/**
 * Job board signup prompt (.gfi-job-signup)
 *
 * The dialog rendered by gfi_job_signup_prompt_render() in
 * inc/job-board-signup-prompt.php. Namespaced away from .gfi-signup-modal in
 * site-navbar.css: that one is the navbar's role chooser and is a different
 * component with a different job.
 *
 * Every value here is a token. See .claude/skills/gfi-design-system.
 */

/* ── Shell ─────────────────────────────────────────────────────────────── */

.gfi-job-signup {
    position: fixed;
    inset: 0;
    /* Above .filter-modal-overlay (9999, the mobile filter sheet) and above
       .gfi-signup-modal (10050, the navbar's role chooser). A gated action can
       be triggered from inside either of those, and when it is, this dialog is
       the thing the visitor just asked for. The script separately declines to
       fire the *unprompted* nudge over an open dialog. */
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gfi-space-2);
}

/* [hidden] alone loses to the display:flex above, so restate it. */
.gfi-job-signup[hidden] {
    display: none;
}

.gfi-job-signup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 24, 24, 0.55);
    animation: gfi-job-signup-fade 0.18s ease-out;
}

.gfi-job-signup__dialog {
    position: relative;
    width: 100%;
    /* 520, not 460: the H3 headline needs ~400px of line to stay on two lines
       at the desktop step, and 460 left only 396px of measure after padding.
       The extra 60px is what lets the headline be the size it wants to be. */
    max-width: 520px;
    max-height: calc(100vh - var(--gfi-space-4));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: var(--gfi-space-4);
    background: var(--gfi-color-surface);
    border-radius: var(--gfi-radius-xl);
    box-shadow: var(--gfi-shadow-xl);
    text-align: left;
    animation: gfi-job-signup-rise 0.22s ease-out;
}

.gfi-job-signup__dialog:focus {
    outline: none;
}

.gfi-job-signup__dialog:focus-visible {
    outline: 2px solid var(--gfi-color-brand);
    outline-offset: 2px;
}

/* ── Close ─────────────────────────────────────────────────────────────── */

/*
 * Scoped under .gfi-job-signup on purpose - see the note above the actions
 * block. Elementor's kit would otherwise paint this a green disc with a glow.
 */
.gfi-job-signup .gfi-job-signup__close {
    position: absolute;
    top: var(--gfi-space-2);
    right: var(--gfi-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    /* An explicit white, not `none`. Transparent would inherit the dialog's
       white and look identical today, but it also means any stray rule that
       lands a background here wins by default - which is exactly how the
       Elementor kit turned this into a green disc. Stating the colour makes
       the intent enforceable. */
    background: var(--gfi-color-surface);
    border: none;
    border-radius: var(--gfi-radius-pill);
    box-shadow: none;
    color: var(--gfi-color-text-muted);
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.gfi-job-signup .gfi-job-signup__close:hover,
.gfi-job-signup .gfi-job-signup__close:focus-visible {
    background: var(--gfi-color-surface-subtle);
    color: var(--gfi-color-text);
}

/* ── Copy ──────────────────────────────────────────────────────────────── */

/* The "Free account" eyebrow that used to open this block is gone - the CTAs
   already say "free". Nothing replaces it; the headline is now the first thing
   in the dialog, which is why it carries its own right inset below. */

.gfi-job-signup .gfi-job-signup__title {
    /* H3, sized to be the clear focal point of the dialog while still holding
       the longest headline to two lines.

       The budget, measured off a real render rather than guessed: Louize bold
       averages ~0.58em per character for this copy. The longest headline is 46
       characters, so at the 30px desktop step it needs ~800px of line, or
       ~400px across two lines. The measure below is 456px (520 max-width less
       2x32 padding), which clears that with room to spare - and every smaller
       breakpoint has a shorter headline budget but the same measure, so it
       only gets safer. H2 (40px) is what this rendered at by accident before,
       and needed ~533px per line: three lines, which is the bug that started
       this. text-wrap: balance evens the two lines instead of leaving a long
       first line and an orphan; browsers without it just wrap normally.

       The right inset. With the eyebrow gone the headline is the first thing in
       the dialog and its first line sits at y=32px - squarely in the close
       button's row (the button spans y=16..48px). The button is inset 16px from
       the dialog edge and is 32px wide, so it reaches 48px in; the dialog's 32px
       padding only clears the first 32px of that. 24px of margin puts the text
       8px clear of the button. Mobile needs more and overrides this at the
       bottom of the file - the sheet's side padding is only 16px there, so the
       button reaches 32px past the content edge instead of 16px.

       That leaves 432px of measure against the ~400px the longest headline
       needs, so it still holds two lines. If a longer headline is ever added,
       re-measure before trusting that.

       On !important: global.css sets `h2 { font-size: var(--gfi-font-h2)
       !important }`, and an !important element rule beats a non-important
       class rule no matter how specific. job-board-cards.css and
       job-board-detail.css override the same global block the same way - it is
       the house pattern for a heading inside a component. Per the design
       system H1-H4 take --gfi-ls-heading; only H5/H6 take the -sm variant. */
    margin: 0 var(--gfi-space-3) var(--gfi-space-2) 0;
    color: var(--gfi-color-text);
    font-family: var(--gfi-font-heading);
    font-size: var(--gfi-font-h3) !important;
    font-weight: var(--gfi-fw-bold);
    letter-spacing: var(--gfi-ls-heading) !important;
    line-height: var(--gfi-lh-h3) !important;
    text-wrap: balance;
}

.gfi-job-signup__sub {
    margin: 0 0 var(--gfi-space-3);
    color: var(--gfi-color-text-muted);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-s);
    line-height: var(--gfi-lh-body-s);
}

/* ── Benefits ──────────────────────────────────────────────────────────── */

.gfi-job-signup__benefits {
    margin: 0 0 var(--gfi-space-3);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--gfi-space-1);
}

.gfi-job-signup__benefit {
    display: flex;
    align-items: flex-start;
    gap: var(--gfi-space-1);
    margin: 0;
    color: var(--gfi-color-text);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-s);
    line-height: var(--gfi-lh-body-s);
}

.gfi-job-signup__benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--gfi-color-surface-accent);
    border-radius: var(--gfi-radius-pill);
    color: var(--gfi-color-brand-accent);
}

.gfi-job-signup__benefit-text {
    padding-top: 4px; /* optical: centres 14px/1.5 copy against the 28px badge */
}

/* ── Actions ───────────────────────────────────────────────────────────── */

.gfi-job-signup__actions {
    display: grid;
    gap: var(--gfi-space-1);
    margin-bottom: 0;
}

/*
 * One rectangle shared by all three actions, so "No thanks, keep browsing"
 * matches "Create a free account" rather than sitting under them as a bare
 * text link.
 *
 * Every selector here is scoped under .gfi-job-signup deliberately. Elementor's
 * global kit emits
 *
 *     .elementor-kit-1007 button { background-color: var(--gfi-color-cta-bg);
 *                                  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5) }
 *
 * into uploads/elementor/css/post-1007.css, and every board page carries
 * .elementor-kit-1007 on <body>. At (0,1,1) that beats a bare
 * .gfi-job-signup__dismiss (0,1,0) - which is why the two <button>s in this
 * dialog rendered mint green with a glow while the two <a> CTAs were fine.
 *
 * Two classes (0,2,0) beats (0,1,1) on class count in any load order, so this
 * needs no !important - unlike .gfi-nav button in site-navbar.css, which ties
 * at (0,1,1) and has to shout. box-shadow is restated because the kit sets
 * that too and it does not come along with the background.
 */
.gfi-job-signup .gfi-job-signup__cta,
.gfi-job-signup .gfi-job-signup__dismiss {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px var(--gfi-space-2);
    background: var(--gfi-color-cta-bg);
    border: 1px solid transparent;
    border-radius: var(--gfi-radius-sm);
    box-shadow: none;
    color: var(--gfi-color-cta-fg);
    font-family: var(--gfi-font-body);
    font-size: var(--gfi-font-body-m);
    font-weight: var(--gfi-fw-medium);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.gfi-job-signup .gfi-job-signup__cta:hover,
.gfi-job-signup .gfi-job-signup__cta:focus-visible,
.gfi-job-signup .gfi-job-signup__dismiss:hover,
.gfi-job-signup .gfi-job-signup__dismiss:focus-visible {
    background: var(--gfi-color-cta-bg-hover);
    color: var(--gfi-color-cta-fg);
    text-decoration: none;
}

.gfi-job-signup .gfi-job-signup__cta--secondary {
    background: var(--gfi-color-surface);
    border-color: var(--gfi-color-brand);
    color: var(--gfi-color-brand-accent);
}

.gfi-job-signup .gfi-job-signup__cta--secondary:hover,
.gfi-job-signup .gfi-job-signup__cta--secondary:focus-visible {
    background: var(--gfi-color-surface-accent);
    border-color: var(--gfi-color-brand-accent);
    color: var(--gfi-color-brand-accent);
}

/* Sits outside .gfi-job-signup__actions in the markup, so it carries its own
   gap rather than inheriting the grid's. */
.gfi-job-signup .gfi-job-signup__dismiss {
    margin-top: var(--gfi-space-1);
}

/* Scroll lock while the dialog is up, so the board behind it does not move
   under the visitor's thumb on touch. */
body.gfi-job-signup-open {
    overflow: hidden;
}

/* ── Motion ────────────────────────────────────────────────────────────── */

@keyframes gfi-job-signup-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes gfi-job-signup-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .gfi-job-signup__backdrop,
    .gfi-job-signup__dialog {
        animation: none;
    }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .gfi-job-signup {
        /* Bottom sheet, matching .filter-modal - the board's other dialog. */
        align-items: flex-end;
        padding: 0;
    }

    .gfi-job-signup__dialog {
        max-width: none;
        max-height: 90vh;
        padding: var(--gfi-space-3) var(--gfi-space-2) var(--gfi-space-2);
        border-radius: var(--gfi-radius-xl) var(--gfi-radius-xl) 0 0;
        animation: gfi-job-signup-sheet 0.22s ease-out;
    }

    /* The sheet's side padding is 16px, not 32px, so the close button reaches
       32px past the content edge here rather than 16px. 40px keeps the same 8px
       of clearance the desktop inset gives. */
    .gfi-job-signup .gfi-job-signup__title {
        margin-right: 40px;
    }
}

@keyframes gfi-job-signup-sheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}