/*
    Shared modal shell — the single source of truth for the site's modals.

    A modal carries `.wp-modal` alongside its own class. Everything a modal shares lives here
    (overlay, surface, shadow, entry/exit, close button, header block, focus ring, radius
    scale, font vars); each modal's own stylesheet holds only what differs.

    #applyModal is currently the only consumer — sign-in moved to the standalone /login page —
    so this file and apply-modal.css could be collapsed. It is kept split because the split is
    the reason the two stayed consistent, and the next modal starts from here.

    Bootstrap's modal is kept deliberately: it supplies the focus trap, Esc-to-close,
    backdrop click, focus restore to the trigger, and body scroll lock with scrollbar-width
    compensation. Nothing here fights it; this file owns every visual decision.
*/

.wp-modal {
    /*
        Typography — two families, one rule.
        Headings: Times New Roman. Everything else: Josefin Sans.

        Josefin is loaded as ONE FAMILY PER WEIGHT (see the @font-face block in
        core/utilities.css), not one family with a weight axis. So a real 500 and a real 600
        are two different families, and `font-weight` alone cannot reach them — it would
        synthesize faux-bold from the Regular face and smear a thin geometric sans.
        Hence two body vars, both reusing the existing variables.css stacks verbatim.
        A font swap is these two lines.
    */
    --modal-font-heading: 'Times New Roman', Times, serif;
    --modal-font-body: var(--Josefin-medium);           /* real 500 face */
    --modal-font-body-strong: var(--Josefin-semiBold);  /* real 600 face */

    --modal-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /*
        Radius scale: modal 20 / card + tile 14 / input + button 10 / close + eye 8 / link 4.
        The modal sits at 20px against the pages' 16px — a choice surface is allowed to read
        friendlier than the documents behind it. 20px is the ceiling; nothing goes softer.
    */
    --modal-radius: 20px;
    --modal-radius-card: 14px;
    --modal-radius-tile: 14px;
    --modal-radius-control: 10px;
    --modal-radius-icon: 8px;
    --modal-radius-link: 4px;

    /* One focus recipe, applied to every focusable control in both modals. */
    --modal-focus-ring: 0 0 0 3px rgba(98, 0, 238, 0.12); /* --primary at 12% */
}

/* ---- Overlay: blur lives here and only here; the modal surface stays opaque ---- */
/* The backdrop is a body-level sibling of the modal, so it's flagged from JS on show/hide. */
body.wp-modal-open .modal-backdrop.show {
    background-color: rgba(7, 20, 55, 0.55); /* --heading at 55% */
    opacity: 1;
    backdrop-filter: blur(6px);
    transition: opacity 200ms ease;
}

/* ---- Surface ---- */
/* Width is the only shell property that differs per modal; each sets its own max-width. */
.wp-modal .modal-dialog {
    width: calc(100% - 32px);
    margin-inline: auto;
}

.wp-modal .modal-content {
    position: relative;
    background-color: var(--white);
    border: none;
    border-radius: var(--modal-radius);
    padding: 40px;
    box-shadow: 0 24px 64px -16px rgba(7, 20, 55, 0.28), /* --heading at 28% */
                0 0 0 1px rgba(7, 20, 55, 0.04);         /* --heading at 4% */
}

/*
    Entry: fade + scale only. No translateY — nothing moves unless the user moved it.
    Exit reuses the rest state at 150ms.
*/
.wp-modal.fade .modal-dialog {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 150ms ease, transform 150ms var(--modal-ease);
}

.wp-modal.show .modal-dialog {
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease, transform 200ms var(--modal-ease);
}

/* ---- Close button: a control, not an artifact. Sits inside the padding, never on the corner. ---- */
.wp-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--modal-radius-icon);
    background-color: transparent;
    color: var(--text-4);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

/* 32px visual box, 44px hit area — expanded with an overlay so the paint doesn't grow. */
.wp-modal__close::after {
    content: "";
    position: absolute;
    inset: -6px;
}

.wp-modal__close:hover {
    background-color: var(--light-border);
    color: var(--text-2);
}

.wp-modal__close:active {
    background-color: var(--dark-bg);
}

/* The outline is replaced, never merely removed. */
.wp-modal__close:focus {
    outline: none;
}

.wp-modal__close:focus-visible {
    box-shadow: var(--modal-focus-ring);
}

/* ---- Header block: identical structure in both modals ---- */
.wp-modal__header {
    text-align: center;
    /* 32px to the content: enough to separate the header as a unit without stranding it. */
    margin-bottom: 32px;
}

/*
    A serif at 600 next to a geometric sans is the whole personality of these modals.
    Large and quiet.
*/
/*
    The real italic face (a woff2, not 'Times New Roman' obliqued by the browser). font-style must
    be stated as well as the family: the @font-face declares font-style: italic, so without it the
    request doesn't match the descriptor and the browser is free to synthesize a slant instead.
*/
.wp-modal__title {
    font-family: var(--Times-italic);
    font-style: italic;
    font-size: 32px;
    /* 500, not --fw-600: the face ships a single 400 weight, so 600 asks for a faux-bold smear. */
    font-weight: 500;
    /* Tighter tracking than body copy: the serif opens up at display size and needs pulling in. */
    letter-spacing: -0.02em;
    color: var(--heading);
    /* 8px to the subtitle: bound to the title, not floating between it and the content. */
    margin: 0 0 8px;
}

/* Josefin's x-height is short, so 1.6 rather than the usual 1.5. */
.wp-modal__subtitle {
    font-family: var(--modal-font-body);
    font-size: 16px;
    font-weight: 500; /* no --fw-500 token exists; the Medium face carries the weight */
    line-height: 1.6;
    color: var(--text-2); /* #4B5675 is this token exactly */
    /*
        Wide enough for the subtitle to hold one line on desktop — raised with the type from 14px
        to 16px, which pushed the string past the old 420px cap. Still a cap, not a width: on a
        narrower surface the container wins and the line wraps, which is what we want on a phone.
    */
    max-width: 480px;
    margin: 0 auto;
}

@media (max-width: 480px) {
    /* Tighter surface on a phone, and back to the 16px page radius — 20px reads bulbous small. */
    .wp-modal .modal-content {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .wp-modal__close {
        top: 12px;
        right: 12px;
    }
}

/* Motion is dropped; the states themselves stay. */
@media (prefers-reduced-motion: reduce) {
    .wp-modal.fade .modal-dialog,
    .wp-modal.show .modal-dialog {
        transform: none;
        transition: opacity 150ms ease;
    }
}