/*
 * Registration V2, Step 1 — "Dit e-mailadres is al geregistreerd".
 *
 * The inline notice under the e-mail field, shown when the address already signs in to an HCN account.
 * Never a popup: it sits in the form, pushes the fields below it down, and leaves when the address
 * changes. Every rule is scoped to `.hcn-v2-emailnotice`, so nothing else on any V2 step changes.
 *
 * Owner-approved reference: a pale green surface with a thin green edge all round (no side stripe), an
 * information mark in a soft green disc, a bold green title, the explanation in body ink, and two
 * actions — "Inloggen bij Mijn HCN" filled in the Mijn HCN green, "Wachtwoord vergeten?" outlined in
 * HCN gold. Sizes are in em so the flow's own text-size control (A- / A+) scales the notice with the
 * field above it. Colours come from tokens.css; the tints are mixed from those tokens.
 */

.hcn-reg--v2 .hcn-v2-emailnotice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.05em;
    row-gap: 1.05em;
    margin-top: .9em;
    padding: 1.3em 1.45em 1.4em;
    background: #f3f8f4;
    background: color-mix(in srgb, var(--hcn-color-mijn-green, #207B4E) 5%, var(--hcn-color-surface, #fff));
    border: 1px solid #8fbfa1;
    border: 1px solid color-mix(in srgb, var(--hcn-color-mijn-green, #207B4E) 50%, var(--hcn-color-surface, #fff));
    border-radius: var(--hcn-radius-lg, 12px);
    color: var(--hcn-color-text, #2D2E2F);
    animation: hcn-v2-emailnotice-in .18s ease-out;
}
.hcn-reg--v2 .hcn-v2-emailnotice[hidden] { display: none !important; }

.hcn-reg--v2 .hcn-v2-emailnotice__icon {
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    background: #dcebe1;
    background: color-mix(in srgb, var(--hcn-color-mijn-green, #207B4E) 14%, var(--hcn-color-surface, #fff));
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 .hcn-v2-emailnotice__icon svg { width: 1.3em; height: 1.3em; }

.hcn-reg--v2 .hcn-v2-emailnotice__body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: center;
}
.hcn-reg--v2 .hcn-v2-emailnotice__title {
    margin: 0 0 .4em;
    color: var(--hcn-color-mijn-green-deep, #19653F);
    font-size: 1.12em;
    font-weight: 800;
    line-height: 1.3;
}
.hcn-reg--v2 .hcn-v2-emailnotice__title:focus { outline: none; }
.hcn-reg--v2 .hcn-v2-emailnotice__text {
    margin: 0;
    line-height: 1.55;
}
.hcn-reg--v2 .hcn-v2-emailnotice__text + .hcn-v2-emailnotice__text { margin-top: .35em; }

.hcn-reg--v2 .hcn-v2-emailnotice__actions {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .75em;
}

/* Links that look like the flow's buttons. Every state names its colours, so a theme's link colour
   (WordPress blue or otherwise) can never show through. */
.hcn-reg--v2 a.hcn-v2-emailnotice__btn,
.hcn-reg--v2 a.hcn-v2-emailnotice__btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    min-height: 48px;
    min-height: max(48px, 2.85em);
    padding: 0 1.35em;
    border: 1.5px solid transparent;
    border-radius: var(--hcn-radius-md, 8px);
    font-size: 1em;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.hcn-reg--v2 .hcn-v2-emailnotice__arrow { flex: none; width: 1.1em; height: 1.1em; }

.hcn-reg--v2 a.hcn-v2-emailnotice__btn--primary,
.hcn-reg--v2 a.hcn-v2-emailnotice__btn--primary:visited {
    background: var(--hcn-color-mijn-green, #207B4E);
    border-color: var(--hcn-color-mijn-green, #207B4E);
    color: var(--hcn-color-surface, #fff);
}
.hcn-reg--v2 a.hcn-v2-emailnotice__btn--primary:hover,
.hcn-reg--v2 a.hcn-v2-emailnotice__btn--primary:focus-visible {
    background: var(--hcn-color-mijn-green-deep, #19653F);
    border-color: var(--hcn-color-mijn-green-deep, #19653F);
    color: var(--hcn-color-surface, #fff);
}

.hcn-reg--v2 a.hcn-v2-emailnotice__btn--secondary,
.hcn-reg--v2 a.hcn-v2-emailnotice__btn--secondary:visited {
    background: var(--hcn-color-surface, #fff);
    border-color: var(--hcn-color-brand, #B38F64);
    color: var(--hcn-color-heading, #1C1C1D);
}
.hcn-reg--v2 a.hcn-v2-emailnotice__btn--secondary .hcn-v2-emailnotice__arrow { color: var(--hcn-color-brand-strong, #8F6E46); }
.hcn-reg--v2 a.hcn-v2-emailnotice__btn--secondary:hover,
.hcn-reg--v2 a.hcn-v2-emailnotice__btn--secondary:focus-visible {
    background: var(--hcn-color-brand-soft, #F4EEE5);
    border-color: var(--hcn-color-brand-strong, #8F6E46);
    color: var(--hcn-color-heading, #1C1C1D);
}
/* The flow's gold focus ring, with the button's own radius kept. */
.hcn-reg--v2 a.hcn-v2-emailnotice__btn:focus-visible {
    outline: var(--hcn-focus-ring, 3px solid rgba(179, 143, 100, .55));
    outline-offset: 3px;
    border-radius: var(--hcn-radius-md, 8px);
}

/* While the notice is about the address in the field, the field keeps its ordinary edge: the notice is
   guidance, not an error (as in the approved reference). `aria-invalid` stays for assistive technology. */
.hcn-reg--v2 .hcn-v2-emailfield input[aria-describedby~="hcn-v2-email-registered"] {
    border-width: 1px;
    border-color: var(--hcn-color-border, #d0d3d6);
}
.hcn-reg--v2 .hcn-v2-emailfield input[aria-describedby~="hcn-v2-email-registered"]:focus { border-color: var(--hcn-color-brand, #B38F64); }

/* High contrast (the flow's own toggle): solid ink edges and text. */
.hcn-reg--v2.is-contrast .hcn-v2-emailnotice { background: var(--hcn-color-surface, #fff); border: 2px solid var(--hcn-color-heading, #1C1C1D); }
.hcn-reg--v2.is-contrast .hcn-v2-emailnotice__title { color: var(--hcn-color-heading, #1C1C1D); }
.hcn-reg--v2.is-contrast a.hcn-v2-emailnotice__btn--secondary { border-color: var(--hcn-color-heading, #1C1C1D); }

/* Tablets: when the two actions no longer fit side by side, each takes the full width of the text column
   instead of leaving one short button under a long one. */
@media (min-width: 601px) and (max-width: 900px) {
    .hcn-reg--v2 a.hcn-v2-emailnotice__btn { flex: 1 1 15em; }
}

/* Phones: the actions take the full width under the text, one per row, so neither label wraps. */
@media (max-width: 600px) {
    .hcn-reg--v2 .hcn-v2-emailnotice {
        column-gap: .85em;
        padding: 1.1em 1.05em 1.15em;
    }
    .hcn-reg--v2 .hcn-v2-emailnotice__icon { width: 2.2em; height: 2.2em; align-self: start; }
    .hcn-reg--v2 .hcn-v2-emailnotice__icon svg { width: 1.15em; height: 1.15em; }
    .hcn-reg--v2 .hcn-v2-emailnotice__body { align-self: start; }
    .hcn-reg--v2 .hcn-v2-emailnotice__actions { grid-column: 1 / -1; flex-direction: column; }
    .hcn-reg--v2 a.hcn-v2-emailnotice__btn { width: 100%; }
}

/* The narrowest phones (320–360px): the information mark gives its column to the text, and the arrows step
   aside, so the title and both labels stay on as few lines as they can. */
@media (max-width: 360px) {
    .hcn-reg--v2 .hcn-v2-emailnotice { grid-template-columns: minmax(0, 1fr); padding: 1em .85em 1.05em; }
    .hcn-reg--v2 .hcn-v2-emailnotice__icon { display: none; }
    .hcn-reg--v2 .hcn-v2-emailnotice__body { grid-column: 1; }
    .hcn-reg--v2 a.hcn-v2-emailnotice__btn { padding: 0 .75em; font-size: .95em; }
    .hcn-reg--v2 .hcn-v2-emailnotice__arrow { display: none; }
}

@keyframes hcn-v2-emailnotice-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hcn-reg--v2 .hcn-v2-emailnotice { animation: none; }
}