/**
 * Newspaper Digital Edition - Modal Styles
 *
 * The public-facing email access modal is a native `<dialog>` element
 * opened via `HTMLDialogElement.showModal()`. The browser handles
 * top-layer rendering, focus trap, ESC-to-close, body inert, and
 * accessibility semantics — so this stylesheet is mostly visual
 * styling, with two small declarative bits of behaviour:
 *
 *   1. `::backdrop` paints the dim overlay.
 *   2. `body:has(dialog.nde-modal[open]) { overflow: hidden }` locks
 *      page scroll while the dialog is open. No JS class toggling.
 *
 * Browser support note: native `<dialog>.showModal()` is supported in
 * Chrome 37+, Firefox 98+, and Safari 15.4+ (March 2022). `:has()` is
 * supported in Safari 15.4+, Chrome 105+, Firefox 121+. Both are
 * comfortably within the modern-browser baseline.
 *
 * The masthead class names are shared with the standalone link-state
 * templates (gate.php, link-action.php, error.php). We re-style them
 * scoped under `.nde-modal` so a host theme rule targeting the generic
 * `.masthead` selector — common in newspaper themes — can't bleed
 * through to the modal.
 *
 * @package Newspaper_Digital_Edition
 */

:root {
    --nde-card: #ffffff;
    --nde-border: #e5e7eb;
    --nde-rule: #d4d4d4;
    --nde-ink: #111111;
    --nde-ink-muted: #4b5563;
    --nde-ink-dim: #9ca3af;
    --nde-info-bg: #f3f4f6;
    --nde-success-bg: #ecfdf5;
    --nde-success-ink: #14532d;
    --nde-error-bg: #fef2f2;
    --nde-error-border: #b91c1c;
    --nde-error-ink: #991b1b;
    --nde-modal-backdrop: rgba(0, 0, 0, 0.55);
    --nde-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --nde-font-serif: 'Times New Roman', 'Liberation Serif', Times, Georgia, serif;
}

/* =========================================================================
   Dialog
   ========================================================================= */

dialog.nde-modal {
    /* Reset the browser's default <dialog> chrome (groove border, default
       padding, etc.). */
    margin: auto;
    padding: 0;
    border: 1px solid var(--nde-border);
    border-radius: 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);

    /* Sizing. The dialog is centred via the inherited `inset: 0` +
       `margin: auto` from the user-agent stylesheet for `dialog[open]`,
       capped at 480px on desktop and tracking the viewport on mobile. */
    width: calc(100% - 24px);
    max-width: 480px;
    /* dvh tracks iOS Safari's URL-bar resize and the on-screen keyboard
       on iOS 16+; vh is the static fallback. */
    max-height: 90vh;
    max-height: 90dvh;

    /* The dialog itself is the scroll container — its content can
       overflow vertically and the dialog scrolls internally. */
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Visuals */
    background: var(--nde-card);
    color: var(--nde-ink);
    font-family: var(--nde-font-sans);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* Lining + tabular figures so numerals in the headline / dateline
       sit at uniform cap height. */
    font-feature-settings: "lnum" 1, "tnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

/* The dim overlay behind the dialog. Replaces the legacy
   `.nde-modal-backdrop` div. */
dialog.nde-modal::backdrop {
    background: var(--nde-modal-backdrop);
}

/* The dialog itself is a container, not an interactive control. When
   the JS moves focus here on touch devices (so the on-screen keyboard
   stays closed and the close button doesn't get a focus ring), we
   suppress any outline a browser might draw — the focused state is
   semantic for screen-reader announcement only, not visual. */
dialog.nde-modal:focus,
dialog.nde-modal:focus-visible {
    outline: none;
}

/* Lock page scroll while the dialog is open. `:has()` is supported in
   every browser that supports `<dialog>.showModal()`, so this is the
   declarative replacement for the JS scroll-lock helpers we used
   before native dialog support landed. */
body:has(dialog.nde-modal[open]) {
    overflow: hidden;
}

/* =========================================================================
   Close button
   ========================================================================= */

.nde-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    color: var(--nde-ink-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: color 0.15s ease;
}

.nde-modal-close::before {
    font-size: 20px;
    line-height: 1;
}

.nde-modal-close:hover {
    color: var(--nde-ink);
}

.nde-modal-close:focus-visible {
    outline: 2px solid var(--nde-ink);
    outline-offset: 2px;
    color: var(--nde-ink);
}

/* =========================================================================
   Masthead — rendered by NDE_API::render_masthead()
   ========================================================================= */

/* Defensive resets: a host theme that styles the generic `.masthead`
   selector (common in newspaper themes) would otherwise bleed through
   onto these elements. The modal forces every visual property a theme
   might paint back to the values we want. */
.nde-modal .masthead {
    margin: 0;
    padding: 24px 32px 20px;
    background: var(--nde-card);
    border: 0;
    border-bottom: 3px double var(--nde-rule);
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}

.nde-modal .masthead-name {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--nde-font-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--nde-ink);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    line-height: 1.3;
    text-shadow: none;
    font-feature-settings: "lnum" 1, "tnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.nde-modal .masthead-logo {
    display: block;
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    float: none;
}

.nde-modal .masthead-has-logo .masthead-name {
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--nde-ink-muted);
}

/* =========================================================================
   Body
   ========================================================================= */

.nde-modal-body {
    padding: 26px 32px 28px;
}

.nde-modal-edition {
    margin-bottom: 22px;
}

.nde-modal-edition:empty {
    display: none;
}

.nde-modal-kicker {
    font-size: 11px;
    font-weight: 700;
    color: var(--nde-ink-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.nde-modal-kicker:empty {
    display: none;
}

.nde-modal-headline {
    margin: 0;
    font-family: var(--nde-font-serif);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--nde-ink);
    font-feature-settings: "lnum" 1, "tnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.nde-modal-headline:empty {
    display: none;
}

/* Dateline mirrors the link-state pages' `.dateline` so the modal,
   the gate, and the link-action / error pages all show the edition
   date in the same italic muted treatment. */
.nde-modal-dateline {
    margin-top: 6px;
    font-size: 13px;
    color: var(--nde-ink-muted);
    font-style: italic;
}

.nde-modal-dateline:empty {
    display: none;
}

.nde-modal-description {
    margin: 0 0 22px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--nde-ink-muted);
}

/* =========================================================================
   Email form
   ========================================================================= */

.nde-email-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nde-form-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nde-ink-muted);
    margin-bottom: 8px;
}

.nde-form-field input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--nde-ink);
    border: 1px solid var(--nde-border);
    background: var(--nde-card);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.nde-form-field input[type="email"]:focus {
    outline: none;
    border-color: var(--nde-ink);
}

/* Keyboard focus gets an explicit 2px ring on top of the border-colour
   change so the indicator clears WCAG 2.4.13 (Focus Appearance, AAA). */
.nde-form-field input[type="email"]:focus-visible {
    outline: 2px solid var(--nde-ink);
    outline-offset: 2px;
}

.nde-form-field input[type="email"]::placeholder {
    color: var(--nde-ink-dim);
}

/* Honeypot — visible to bots, hidden from real users.
   display:none (not offscreen positioning) on purpose: password managers
   skip display:none fields entirely, so they never attach their autofill
   menu to the honeypot or fill it (offscreen/opacity-hidden fields passed
   Bitwarden's visibility checks and got filled, tripping the bot check for
   real subscribers). Naive bots read the raw HTML without computing
   external CSS and still fall for it. */
.nde-hp-field {
    display: none;
}

.nde-form-actions {
    margin-top: 4px;
}

.nde-submit-button {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid var(--nde-ink);
    cursor: pointer;
    background: var(--nde-ink);
    color: #ffffff;
    transition: background 0.15s ease;
}

.nde-submit-button:hover:not(:disabled) {
    background: #000;
}

.nde-submit-button:focus-visible {
    outline: 2px solid var(--nde-ink);
    outline-offset: 2px;
}

.nde-submit-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* =========================================================================
   Form messages (success / error)
   ========================================================================= */

.nde-form-message {
    padding: 11px 14px;
    font-size: 13px;
    border-left: 3px solid;
}

.nde-form-message.nde-message-success {
    background: var(--nde-success-bg);
    color: var(--nde-success-ink);
    border-color: var(--nde-success-ink);
}

.nde-form-message.nde-message-error {
    background: var(--nde-error-bg);
    color: var(--nde-error-ink);
    border-color: var(--nde-error-border);
}

.nde-form-message.nde-message-success::before {
    content: "\2713\00a0";
}

.nde-form-message.nde-message-error::before {
    content: "\26A0\00a0";
}

/* =========================================================================
   Contact (Need Help?)
   ========================================================================= */

.nde-modal-help {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--nde-rule);
}

.nde-modal-help-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--nde-ink-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.nde-modal-help-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}

.nde-modal-help-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--nde-ink-muted);
    line-height: 1.4;
}

.nde-modal-help-item a {
    color: var(--nde-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.nde-modal-help-item a:hover {
    border-bottom-color: var(--nde-ink);
}

.nde-modal-help-icon {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    color: var(--nde-ink-dim);
    flex-shrink: 0;
}

/* =========================================================================
   Mobile
   ========================================================================= */

@media (max-width: 600px) {
    /* The dialog already uses `width: calc(100% - 24px)` and tracks the
       dynamic viewport via `max-height: 90dvh`, so most mobile layout
       flows from the base rules. The mobile overrides below tighten
       padding and bump the close button to a thumb-friendly size. */
    dialog.nde-modal {
        /* Pin to the top so the headline / form sit above where the
           on-screen keyboard will appear, rather than getting centred
           and partly hidden when the keyboard opens. */
        margin: 12px auto auto;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    /* WCAG 2.2 AAA touch target (44×44 CSS px) on the primary dismiss
       control. */
    .nde-modal-close {
        top: 6px;
        right: 6px;
        width: 44px;
        height: 44px;
    }

    .nde-modal-close::before {
        font-size: 22px;
    }

    .nde-modal .masthead {
        padding: 20px 20px 16px;
    }

    .nde-modal .masthead-name {
        font-size: 15px;
        letter-spacing: 1.5px;
    }

    .nde-modal .masthead-logo {
        max-height: 60px;
    }

    .nde-modal .masthead-has-logo .masthead-name {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .nde-modal-body {
        padding: 22px 20px 24px;
    }

    .nde-modal-headline {
        font-size: 20px;
    }

    .nde-form-field input[type="email"] {
        padding: 12px;
        /* 16px font prevents iOS Safari from zooming in on focus. */
        font-size: 16px;
    }

    .nde-submit-button {
        padding: 16px 24px;
    }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .nde-submit-button,
    .nde-modal-close,
    .nde-form-field input[type="email"] {
        transition: none !important;
    }
}