/* ═══════════════════════════════════════════════════════════════════
   LOCALWORK — SHARED HEADER NAV
   Loaded by EVERY public page, alongside whichever base sheet that
   page uses.

   ── Why this file exists ──────────────────────────────────────────
   The site has two independent CSS systems (see ARCHITECTURE.md):
   home-style.css for the home page, styles.css + search-theme.css for
   search / job detail / city / category, and get-ready loads styles.css
   without search-theme. The header actions partial renders on all of
   them, so its styles previously lived in search-theme.css and were
   simply absent on home and get-ready — the links fell back to a
   generic ember colour with no divider and no button.

   Anything that renders in the shared header belongs HERE, not in a
   base sheet, so it can only ever look the same everywhere.

   ── Seeker vs employer ────────────────────────────────────────────
   One brand hue, split by weight:

     Ember  = job seeker actions. The primary audience, and Ember only
              ever means "seeker action" so it keeps its meaning.
     Ink    = employer actions, separated by a divider, with "Post a
              Job" as an ink outline button.

   No second accent colour — a new hue would read as a different
   product rather than a different audience.
   ═══════════════════════════════════════════════════════════════════ */

/* Tokens with fallbacks: home-style.css and styles.css declare these
   under different names historically, so every value degrades safely. */
.nav-menu,
.header-buttons {
    --nav-ember:      var(--primary-600, #E8482B);
    --nav-ember-soft: var(--primary-soft, #FDEAE5);
    --nav-ink:        var(--text, #1C1614);
    --nav-ink-2:      var(--text-2, #4A403B);
    --nav-border:     var(--border, #EFE4D9);
}

/* ── Shared shape for every account link ─────────────────────────── */
.seeker-nav-link,
.employer-nav-link,
.header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans, inherit);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, opacity .15s;
}
.seeker-nav-link svg,
.employer-nav-link svg,
.header-nav-link svg { flex-shrink: 0; }

/* ── Seeker side — Ember ─────────────────────────────────────────── */
.seeker-nav-link {
    color: var(--nav-ember);
    font-weight: 600;
}
.seeker-nav-link:hover {
    color: var(--nav-ember);
    opacity: .78;
}

/* ── Divider ─────────────────────────────────────────────────────── */
.nav-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: var(--nav-border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Employer side — Ink ─────────────────────────────────────────── */
.employer-nav-link {
    color: var(--nav-ink-2);
}
.employer-nav-link:hover {
    color: var(--nav-ink);
}

/* Outline rather than filled: it's a real call to action, but it
   shouldn't outrank the seeker experience on a job board. */
.employer-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    margin-left: 2px;
    background: transparent;
    color: var(--nav-ink);
    border: 1px solid var(--nav-ink);
    border-radius: var(--radius-btn, 8px);
    font-family: var(--font-sans, inherit);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.employer-nav-cta:hover {
    background: var(--nav-ink);
    color: var(--card, #fff);
}

/* Home page nav is <ul>-based; the partial renders into
   .header-buttons there with the header-nav-link variant. Colour is
   applied by whichever of the two links above it happens to be. */
.header-nav-link { color: var(--nav-ink-2); }
.header-nav-link:hover { color: var(--nav-ink); }
.header-buttons .seeker-nav-link { color: var(--nav-ember); }

/* ── Spacing so the header doesn't look crowded ──────────────────── */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 18px;
}
.header-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ── Focus ───────────────────────────────────────────────────────── */
.seeker-nav-link:focus-visible,
.employer-nav-link:focus-visible,
.employer-nav-cta:focus-visible,
.header-nav-link:focus-visible {
    outline: 2px solid var(--nav-ember);
    outline-offset: 2px;
    border-radius: var(--radius-btn, 8px);
}

/* ── Dark mode ───────────────────────────────────────────────────── */
/* Ink inverts to paper on a dark surface, otherwise the employer
   outline button disappears entirely. */
body.dark-mode .employer-nav-cta {
    color: var(--text, #FBF7F3);
    border-color: var(--border-strong, #4A403B);
}
body.dark-mode .employer-nav-cta:hover {
    background: var(--text, #FBF7F3);
    color: #1C1614;
}
body.dark-mode .employer-nav-link { color: var(--text-2, #C4B8AF); }
body.dark-mode .employer-nav-link:hover { color: var(--text, #FBF7F3); }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .nav-menu, .header-buttons { gap: 12px; }
    .employer-nav-cta { padding: 6px 12px; font-size: 13px; }
}

@media (max-width: 768px) {
    /* Below this width the whole desktop row hands over to the drawer
       (.lwmm) — every link here is re-rendered there. Hiding these
       individually used to leave "Employers" and "Post a Job" with
       nowhere to go at all. */
    .employer-nav-cta,
    .employer-nav-link,
    .seeker-nav-link,
    .nav-divider { display: none; }

    /* .nav-menu is hidden HERE and not only in the base sheets. Both
       styles.css and home-style.css already say `display: none` at this
       width, but the `.nav-menu { display: flex }` further up this file is
       unconditional and nav.css loads last — equal specificity, later
       sheet wins, so the desktop links kept rendering on top of the mobile
       header and wrapping over the logo. */
    .nav-menu { display: none; }
}

/* ── Active section marker ───────────────────────────────────────────
   Replaces the inline style the Get Ready header used to carry, which
   couldn't respond to hover or dark mode. */
.nav-item.is-active {
    color: var(--nav-ember);
    font-weight: 600;
}

/* ── Theme toggle ────────────────────────────────────────────────────
   Shape lives here so the button looks the same whether the page
   supplies a Font Awesome <i> or the inline SVG pair. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-btn, 8px);
    color: var(--nav-ink-2);
    cursor: pointer;
    transition: color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
    color: var(--nav-ember);
    background: var(--nav-ember-soft);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--nav-ember);
    outline-offset: 2px;
}
.theme-toggle svg { flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV DRAWER  (.lwmm — markup in includes/mobile_nav.php)

   One drawer for both CSS systems, which is why it lives here and not
   in home-style.css or styles.css. Every token is declared locally with
   a literal fallback so it renders identically whether the page brought
   the --ink-* names (home) or the --text/--border names (everything
   else); home-style.css has no dark mode and defines neither set.

   The panel is position:fixed, so it doesn't matter where in the header
   the partial is dropped — only .lwmm-toggle sits in the header's flex
   row, and only below 768px.
   ═══════════════════════════════════════════════════════════════════ */
.lwmm,
.lwmm-toggle {
    --mm-ember:  var(--primary-600, #E8482B);
    --mm-ink:    var(--text, #1C1614);
    --mm-ink-2:  var(--text-2, #4A403B);
    --mm-border: var(--border, #EFE4D9);
    --mm-card:   var(--card, #FFFFFF);
    --mm-soft:   var(--bg-subtle, #FDFAF7);
}

/* ── Hamburger ──────────────────────────────────────────────────── */
.lwmm-toggle {
    display: none; /* desktop shows the real nav row */
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-btn, 8px);
    color: var(--mm-ink);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.lwmm-toggle:active { background: var(--mm-soft); }
.lwmm-toggle:focus-visible {
    outline: 2px solid var(--mm-ember);
    outline-offset: 2px;
}
.lwmm-toggle svg { display: block; }

/* ── Overlay ────────────────────────────────────────────────────── */
/* The UA's [hidden] rule is beaten by any rule that sets display on the
   same element, and this panel is full of flex children that do. Restate
   it once for the whole drawer. */
.lwmm[hidden],
.lwmm [hidden] { display: none; }

/* mobile-nav.js moves this element to <body> on init so the z-index below
   is measured against the page, not against the header's own stacking
   context. 1200 clears the highest thing on a public page (the search
   page's filters drawer at 300, sort sheet at 400, modals at 1000). */
.lwmm {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.lwmm-scrim {
    position: absolute;
    inset: 0;
    background: rgba(28, 22, 20, 0.45);
    opacity: 0;
    transition: opacity .22s ease;
}
.lwmm.is-open .lwmm-scrim { opacity: 1; }

/* ── Panel ──────────────────────────────────────────────────────── */
.lwmm-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 320px);
    display: flex;
    flex-direction: column;
    background: var(--mm-card);
    border-left: 1px solid var(--mm-border);
    box-shadow: -8px 0 32px rgba(28, 22, 20, 0.18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Notch / home-indicator safe areas — the panel is full-bleed. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}
.lwmm.is-open .lwmm-panel { transform: translateX(0); }

/* Respect a reduced-motion preference: still slides, just instantly. */
@media (prefers-reduced-motion: reduce) {
    .lwmm-panel, .lwmm-scrim { transition: none; }
}

.lwmm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 8px 0 20px;
    border-bottom: 1px solid var(--mm-border);
    flex-shrink: 0;
}

.lwmm-top-title {
    font-family: var(--font-display, var(--font-sans, inherit));
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mm-ink-2);
}

.lwmm-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-btn, 8px);
    color: var(--mm-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.lwmm-close:active { background: var(--mm-soft); }
.lwmm-close:focus-visible {
    outline: 2px solid var(--mm-ember);
    outline-offset: -2px;
}

.lwmm-body {
    padding: 8px 0 24px;
}

/* ── Rows ───────────────────────────────────────────────────────── */
/* Reset rather than inherit: .lwmm-theme is a <button>, and both base
   sheets style bare buttons differently. */
.lwmm-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 20px;
    background: none;
    border: none;
    font-family: var(--font-body, var(--font-sans, inherit));
    font-size: 16px; /* 16px minimum — anything less zooms on iOS tap */
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    color: var(--mm-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.lwmm-link:hover { color: var(--mm-ink); }
.lwmm-link:active { background: var(--mm-soft); }
.lwmm-link:focus-visible {
    outline: 2px solid var(--mm-ember);
    outline-offset: -2px;
}
.lwmm-link svg {
    flex-shrink: 0;
    color: var(--mm-ink-2);
}

/* Ember = seeker action, same rule as the desktop row. */
.lwmm-link--seeker,
.lwmm-link--seeker svg,
.lwmm-link.is-active,
.lwmm-link.is-active svg {
    color: var(--mm-ember);
}
.lwmm-link--seeker, .lwmm-link.is-active { font-weight: 600; }

.lwmm-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mm-border);
}

.lwmm-heading {
    margin: 0;
    padding: 10px 20px 4px;
    font-family: var(--font-mono, var(--font-sans, inherit));
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-ink-2);
    opacity: .75;
}

/* Ink outline, matching .employer-nav-cta — full width because it's the
   only real button in the panel. */
.lwmm-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 20px 4px;
    padding: 12px 16px;
    background: transparent;
    color: var(--mm-ink);
    border: 1px solid var(--mm-ink);
    border-radius: var(--radius-btn, 8px);
    font-family: var(--font-body, var(--font-sans, inherit));
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.lwmm-cta:hover { color: var(--mm-ink); }
.lwmm-cta:focus-visible {
    outline: 2px solid var(--mm-ember);
    outline-offset: 2px;
}

/* The theme row carries .theme-toggle so theme.js binds it; that class
   is a 34px square button on desktop, which has to be undone here. */
.lwmm-theme.theme-toggle {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    border-radius: 0;
}
.lwmm-theme.theme-toggle:hover {
    background: none;
    color: var(--mm-ink);
}

/* ── Dark mode ──────────────────────────────────────────────────── */
/* Tokens already invert via styles.css, except the outline button,
   which would otherwise be ink-on-ink and vanish. */
body.dark-mode .lwmm-cta {
    color: var(--text, #FBF7F3);
    border-color: var(--border-strong, #4A403B);
}
body.dark-mode .lwmm-scrim { background: rgba(0, 0, 0, 0.6); }

/* ── Breakpoint ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lwmm-toggle { display: inline-flex; }
}

/* Scroll lock. Set on <html> so it survives both body classes
   (.dark-mode, .portal-body, …) without a specificity fight. */
html.lwmm-locked,
html.lwmm-locked body {
    overflow: hidden;
}