/*
 * HCN Management — Mijn HCN signed-out screens (D-89): sign in, forgotten password, new activation
 * link, "check your e-mail", choose a password, a link that no longer works, and the R1 code sign-in.
 *
 * ONE OPEN COLUMN. No card, no outer border, no outer shadow: the page is the surface. The HCN logo,
 * a centred heading and introduction, the form, then help — in that order on every screen, so a
 * pilgrim who has seen one screen recognises all of them.
 *
 * WRITTEN FOR OLDER PILGRIMS FIRST. Nothing a pilgrim must read is smaller than 16px; labels, fields,
 * buttons and links are 17–19px; controls are 58px high. Sizes are in rem, so a browser set to larger
 * text makes all of it larger. The form controls are Registration V2's — same field shape, same gold
 * button, same radii — one step larger, because this screen holds three fields where V2 holds thirty.
 *
 * House rules: colours, radii and the brand golds come from tokens.css; no coloured left borders; no
 * blue; every control at least 44px on its smallest side; a focus ring of at least 3:1 everywhere.
 *
 * The page around the column: on a signed-out screen `PortalController::bodyClass()` adds
 * `hcn-auth-screen` to <body>, and only then do the rules at the end of this file hide the theme's
 * header logo, its "Mijn HCN" page title and the footer logo — the form's own logo and heading take
 * their place, so nothing is said twice. The signed-in dashboard keeps the theme untouched.
 */

.hcn-auth {
    font-family: var(--hcn-font);
    --hcn-auth-column: 560px;
    --hcn-auth-gutter: 24px;
    --hcn-auth-control: 3.625rem;                                   /* 58px */
    --hcn-auth-radius: var(--hcn-radius-md, 8px);                   /* fields: V2's 8px */
    --hcn-auth-radius-action: 12px;                                 /* buttons: V2's 12px */
    --hcn-auth-gold: var(--hcn-color-btn-primary-bg, #8F6E46);      /* white on it 4.68:1 */
    --hcn-auth-gold-deep: var(--hcn-color-btn-primary-bg-hover, #7C5F3C);
    --hcn-auth-ink: var(--hcn-color-text, #2D2E2F);
    --hcn-auth-heading: var(--hcn-color-heading, #1C1C1D);
    --hcn-auth-quiet: var(--hcn-color-muted, #5a5f66);              /* 6.43:1 on white */
    /* A field's edge has to be SEEN by someone with weaker eyes: 3.2:1 on white, 3.0:1 on the page.
       V2's #d0d3d6 (1.5:1) is a hairline, not a boundary. */
    --hcn-auth-field-edge: #8a9098;
    --hcn-auth-hairline: var(--hcn-color-border-soft, #e4e6e9);    /* separators only, never a control */
    --hcn-auth-ring: 3px solid var(--hcn-color-btn-primary-bg, #8F6E46);

    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--hcn-auth-column) + 2 * var(--hcn-auth-gutter));
    margin: 0 auto;
    padding: 88px var(--hcn-auth-gutter) 96px;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--hcn-auth-ink);
}
.hcn-auth *,
.hcn-auth *::before,
.hcn-auth *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ brand */

.hcn-auth .hcn-auth__brand {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 48px;
    border-radius: 6px;
    text-decoration: none;
}
.hcn-auth .hcn-auth__brand:focus-visible { outline: var(--hcn-auth-ring); outline-offset: 6px; }
.hcn-auth .hcn-auth__logo {
    display: block;
    width: auto;
    height: 76px;
    max-width: 100%;
}
.hcn-auth .hcn-auth__wordmark {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--hcn-auth-heading);
}

/* ------------------------------------------------------------------ heading block */

.hcn-auth .hcn-auth__head {
    margin: 0 0 40px;
    text-align: center;
}
/* The site's own heading face (the theme gives h1 Prata), at its real weight — Prata has no bold. */
.hcn-auth .hcn-auth__title {
    margin: 0 0 16px;
    font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.005em;
    color: var(--hcn-auth-heading);
    text-wrap: balance;
}
.hcn-auth .hcn-auth__title:focus { outline: none; }
.hcn-auth .hcn-auth__lead {
    max-width: 31em;
    margin: 0 auto;
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--hcn-auth-ink);
    text-wrap: balance;
}
.hcn-auth .hcn-auth__lead strong { font-weight: 700; color: var(--hcn-auth-heading); }
/* An address stays on one line when it fits; only one longer than the column breaks. */
.hcn-auth .hcn-auth__address { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
/* "e-mailadres", "HCN-beveiligingscode", "Mijn HCN": one word to the reader, never split at the hyphen. */
.hcn-auth .hcn-auth__keep { white-space: nowrap; }
.hcn-auth .hcn-auth__ref { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The round mark above a status heading ("check your e-mail", "this link no longer works"). */
.hcn-auth .hcn-auth__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--hcn-color-brand-soft, #F4EEE5);
    color: var(--hcn-color-brand-strong, #8F6E46);
}
.hcn-auth .hcn-auth__mark--link { background: var(--hcn-color-subtle-bg, #f6f7f7); color: var(--hcn-auth-quiet); }

/* ------------------------------------------------------------------ notices */

.hcn-auth .hcn-auth__notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0 0 32px;
    padding: 16px 18px;
    border-radius: var(--hcn-auth-radius);
    font-size: 1.0625rem;
    line-height: 1.55;
}
.hcn-auth .hcn-auth__notice:focus { outline: none; }    /* focused by script so it is read first */
.hcn-auth .hcn-auth__notice p { margin: 0; }
.hcn-auth .hcn-auth__notice-icon { margin-top: 1px; }
.hcn-auth .hcn-auth__notice--success { background: var(--hcn-color-success-bg, #e6f4ea); color: var(--hcn-color-success, #1E7A4D); }
.hcn-auth .hcn-auth__notice--error { background: var(--hcn-color-error-bg, #fdeceb); color: var(--hcn-color-error, #B42318); }
.hcn-auth .hcn-auth__notice--info { background: var(--hcn-color-brand-soft, #F4EEE5); color: var(--hcn-auth-heading); }
.hcn-auth .hcn-auth__notice--info .hcn-auth__notice-icon { color: var(--hcn-color-brand-strong, #8F6E46); }

/* ------------------------------------------------------------------ form */

.hcn-auth .hcn-auth__form { display: grid; gap: 28px; margin: 0; }
.hcn-auth .hcn-auth__field { display: grid; gap: 10px; min-width: 0; margin: 0; }

.hcn-auth .hcn-auth__label {
    display: block;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--hcn-auth-heading);
}

.hcn-auth .hcn-auth__input {
    display: block;
    width: 100%;
    height: var(--hcn-auth-control);
    min-height: var(--hcn-auth-control);
    margin: 0;
    padding: 0 18px;
    font: inherit;
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hcn-auth-heading);
    background: var(--hcn-color-surface, #fff);
    border: 1px solid var(--hcn-auth-field-edge);
    border-radius: var(--hcn-auth-radius);
    box-shadow: none;
    transition: border-color .15s ease;
}
.hcn-auth .hcn-auth__input:hover { border-color: var(--hcn-auth-quiet); }
/* On every focus, mouse included: an older pilgrim who clicked a field should see where they are. */
.hcn-auth .hcn-auth__input:focus {
    border-color: var(--hcn-auth-gold);
    outline: var(--hcn-auth-ring);
    outline-offset: 2px;
    box-shadow: none;
}
.hcn-auth .hcn-auth__input[aria-invalid="true"] { border-color: var(--hcn-color-error, #B42318); }
.hcn-auth .hcn-auth__input[aria-invalid="true"]:focus { outline-color: var(--hcn-color-error, #B42318); }

/* Browser autofill keeps the white field and dark text instead of its own blue tint. */
.hcn-auth .hcn-auth__input:-webkit-autofill,
.hcn-auth .hcn-auth__input:-webkit-autofill:hover,
.hcn-auth .hcn-auth__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hcn-auth-heading);
    -webkit-box-shadow: 0 0 0 1000px var(--hcn-color-surface, #fff) inset;
    transition: background-color 9999s ease-out 0s;
}

.hcn-auth .hcn-auth__hint {
    margin: -2px 0 2px;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--hcn-auth-quiet);
}
.hcn-auth .hcn-auth__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--hcn-color-error, #B42318);
}
.hcn-auth .hcn-auth__error::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.6v5.2'/%3E%3Cpath d='M12 16.3h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Password + show/hide. Without JS the toggle is never added and the field is an ordinary input. */
.hcn-auth .hcn-auth__secret { position: relative; display: block; }
.hcn-auth .hcn-auth__secret.is-enhanced .hcn-auth__input { padding-right: 128px; }
/* Two classes deep on purpose: the theme's global button style (dark fill, 20px 40px) is one class + one element. */
.hcn-auth .hcn-auth__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hcn-auth-gold);
    background: transparent;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
}
.hcn-auth .hcn-auth__toggle:focus { background: transparent; color: var(--hcn-auth-gold); outline: none; }
.hcn-auth .hcn-auth__toggle:hover,
.hcn-auth .hcn-auth__toggle:active { background: var(--hcn-color-brand-soft, #F4EEE5); color: var(--hcn-auth-gold-deep); }
.hcn-auth .hcn-auth__toggle:focus-visible { background: var(--hcn-color-brand-soft, #F4EEE5); outline: var(--hcn-auth-ring); outline-offset: 0; }
.hcn-auth .hcn-auth__toggle svg { flex: 0 0 auto; display: block; }

/* Password managers read the username field; screen readers read .hcn-auth__sr; neither is seen. */
.hcn-auth .hcn-auth__sr,
.hcn-auth .hcn-auth__username {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* "Wachtwoord vergeten?" sits under its field, on the left where a magnified screen starts. */
.hcn-auth .hcn-auth__fieldlink { margin: 0; font-size: 1.0625rem; line-height: 1.4; }
.hcn-auth .hcn-auth__fieldlink .hcn-auth__link { display: inline-flex; align-items: center; min-height: 44px; }

/* ------------------------------------------------------------------ links: brand gold, never blue */

.hcn-auth a.hcn-auth__link {
    color: var(--hcn-auth-gold);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    border-radius: 4px;
}
.hcn-auth a.hcn-auth__link:hover { color: var(--hcn-auth-gold-deep); text-decoration-thickness: 2px; }
.hcn-auth a.hcn-auth__link:focus-visible { outline: var(--hcn-auth-ring); outline-offset: 3px; }

/* ------------------------------------------------------------------ the primary action: gold, white ink */

.hcn-auth .hcn-auth__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: var(--hcn-auth-control);
    margin: 4px 0 0;
    padding: 12px 24px;
    font: inherit;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    color: var(--hcn-color-btn-ink, #fff);
    background: var(--hcn-auth-gold);
    border: 2px solid var(--hcn-auth-gold);
    border-radius: var(--hcn-auth-radius-action);
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.hcn-auth .hcn-auth__submit:focus { color: var(--hcn-color-btn-ink, #fff); background: var(--hcn-auth-gold); }
.hcn-auth .hcn-auth__submit:hover {
    color: var(--hcn-color-btn-ink, #fff);
    background: var(--hcn-auth-gold-deep);
    border-color: var(--hcn-auth-gold-deep);
}
.hcn-auth .hcn-auth__submit:focus-visible { outline: var(--hcn-auth-ring); outline-offset: 3px; }
.hcn-auth .hcn-auth__submit:active { background: var(--hcn-auth-gold-deep); transform: translateY(1px); }
.hcn-auth .hcn-auth__submit[aria-disabled="true"] { cursor: progress; opacity: .82; transform: none; }
.hcn-auth .hcn-auth__submit--link { margin-top: 0; }

.hcn-auth .hcn-auth__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: var(--hcn-color-btn-ink, #fff);
    border-radius: 50%;
    animation: hcn-auth-spin .8s linear infinite;
}
@keyframes hcn-auth-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ quiet ways back, and supporting text */

.hcn-auth .hcn-auth__back {
    margin: 24px 0 0;
    text-align: center;
    font-size: 1.0625rem;
}
.hcn-auth .hcn-auth__back .hcn-auth__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}
.hcn-auth .hcn-auth__text {
    margin: -8px 0 32px;
    text-align: center;
    font-size: 1.125rem;
    color: var(--hcn-auth-quiet);
    text-wrap: pretty;
}
.hcn-auth .hcn-auth__text--note { margin: 28px 0 0; font-size: 1.0625rem; }

/* ------------------------------------------------------------------ "Lukt het inloggen niet?" */

.hcn-auth .hcn-auth__more { margin: 56px 0 0; }
.hcn-auth .hcn-auth__more-title {
    margin: 0 0 8px;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--hcn-auth-heading);
}
.hcn-auth .hcn-auth__options { margin: 0; padding: 0; list-style: none; }
/* A hairline between the routes, none after the last: the help line below brings its own. */
.hcn-auth .hcn-auth__options li { margin: 0; padding: 0; border-top: 1px solid var(--hcn-auth-hairline); }
.hcn-auth a.hcn-auth__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    /* Text stays on the column edge; the row (and its focus ring) reaches 12px past it on both sides. */
    margin: 0 -12px;
    padding: 18px 12px;
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
}
.hcn-auth .hcn-auth__option-body { display: grid; gap: 4px; }
.hcn-auth .hcn-auth__option-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--hcn-auth-gold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.hcn-auth .hcn-auth__option-text { font-size: 1.0625rem; line-height: 1.5; color: var(--hcn-auth-quiet); }
.hcn-auth .hcn-auth__chevron { color: var(--hcn-auth-gold); transition: transform .15s ease; }
.hcn-auth a.hcn-auth__option:hover .hcn-auth__option-title { color: var(--hcn-auth-gold-deep); text-decoration-thickness: 2px; }
.hcn-auth a.hcn-auth__option:hover .hcn-auth__chevron { transform: translateX(3px); }
.hcn-auth a.hcn-auth__option:focus-visible { outline: var(--hcn-auth-ring); outline-offset: 0; }

/* ------------------------------------------------------------------ help line */

.hcn-auth .hcn-auth__support {
    margin: 56px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--hcn-auth-hairline);
    text-align: center;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--hcn-auth-quiet);
}
.hcn-auth .hcn-auth__support-lead { display: block; font-weight: 700; color: var(--hcn-auth-heading); }
.hcn-auth .hcn-auth__phone { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 600px) {
    .hcn-auth {
        --hcn-auth-gutter: 14px;   /* + the theme's 10px = 24px from the screen edge */
        padding-top: 40px;
        padding-bottom: 56px;
    }
    .hcn-auth .hcn-auth__brand { margin-bottom: 32px; }
    .hcn-auth .hcn-auth__logo { height: 60px; }
    .hcn-auth .hcn-auth__head { margin-bottom: 32px; }
    .hcn-auth .hcn-auth__lead { font-size: 1.125rem; }
    .hcn-auth .hcn-auth__form { gap: 24px; }
    .hcn-auth .hcn-auth__input { font-size: 1.125rem; padding: 0 16px; }
    .hcn-auth .hcn-auth__secret.is-enhanced .hcn-auth__input { padding-right: 120px; }
    .hcn-auth .hcn-auth__submit { font-size: 1.125rem; }
    .hcn-auth .hcn-auth__more,
    .hcn-auth .hcn-auth__support { margin-top: 44px; }
}
@media (max-width: 360px) {
    .hcn-auth .hcn-auth__logo { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .hcn-auth .hcn-auth__input,
    .hcn-auth .hcn-auth__submit,
    .hcn-auth .hcn-auth__chevron { transition: none; }
    .hcn-auth .hcn-auth__submit:active { transform: none; }
    .hcn-auth a.hcn-auth__option:hover .hcn-auth__chevron { transform: none; }
    .hcn-auth .hcn-auth__spinner { animation-duration: 2.4s; }
}

@media (forced-colors: active) {
    .hcn-auth .hcn-auth__input { border-color: CanvasText; }
    .hcn-auth .hcn-auth__submit { border-color: ButtonText; }
}

/* ------------------------------------------------------------------ the page around the column */

/* Only on a signed-out Mijn HCN screen (see the header of this file). */
body.hcn-auth-screen #site-header,
body.hcn-auth-screen .page-header,
body.hcn-auth-screen #site-footer .site-branding { display: none; }

/*
 * The site-wide floating WhatsApp button (Elementor contact buttons: fixed 25px from the bottom-right,
 * 55px, z-index 10000) sits on top of the form on a phone — over "Wachtwoord vergeten?", the side
 * routes and the end of the main button. On these screens the same help is in the page (the help line
 * above), so on a phone the floating button steps aside here, and only here. Wider screens keep it:
 * the column never reaches that corner there.
 */
@media (max-width: 767px) {
    body.hcn-auth-screen:has([data-hcn-auth-support]) .e-contact-buttons { display: none; }
}