/**
 * 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. */
.nde-hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: 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;
    }
}