/* ============================================================================
   TalentVibe — shared site chrome (nav + footer)
   ----------------------------------------------------------------------------
   Source of truth: the landing (index.html) nav + footer. This file is a
   SELF-CONTAINED copy so the marketing subpages (press / privacy / terms /
   about / team) wear the exact same header + footer and can never drift.

   Colour resolution: every colour resolves to a /tokens.css variable WITH a
   hardcoded fallback (e.g. var(--surface-line, rgba(248,247,252,.1))), so the
   chrome renders identically whether or not the host page defines the landing's
   local vars (--hair / --text-on-stage / --text-dim — which the subpages do
   NOT define). The translucent frosted-nav backgrounds have no matching token,
   so they stay as the same literal rgba() values the landing uses.
   ============================================================================ */

/* ─── Sticky nav ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 100;
  background: rgba(5, 8, 16, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: space-between;
  /* safe-area insets keep the logo/CTA clear of the notch in landscape on iPhones */
  padding-left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right));
  border-bottom: 1px solid transparent; transition: background .25s, border-color .25s;
}
/* Once scrolled off the top, drop the (per-frame) backdrop blur and lean on a
   near-solid background instead — same trick the landing uses. */
.nav.scrolled { background: rgba(5, 8, 16, 0.94); border-bottom-color: var(--surface-line, rgba(248, 247, 252, 0.1)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; border: 0; }
.nav-logo img { height: 30px; width: auto; display: block; }
.nav-logo .wm { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; color: #f5f4f8; letter-spacing: -0.01em; }
.nav-logo .wm span { color: var(--brand-light, #2dd4bf); }
.nav-right { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: 'DM Sans', sans-serif; font-size: 14px; color: rgba(245, 244, 248, 0.78); text-decoration: none; transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: #f5f4f8; }
.nav-links a[aria-current="true"] { color: var(--brand-light, #2dd4bf); }
.nav-sheet-only { display: none; }   /* About/Team/Press + divider live in the mobile sheet only */
.nav-cta {
  padding: 9px 20px; background: var(--brand-primary, #14b8a6); color: #fff; border-radius: 999px;
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 24px rgba(20, 184, 166, 0.3); transition: transform .15s, background .15s, box-shadow .15s;
}
.nav-cta:hover { background: var(--brand-light, #2dd4bf); transform: translateY(-1px); box-shadow: 0 0 32px rgba(20, 184, 166, 0.5); }
.nav-toggle { display: none; }
.nav-scrim { display: none; }

/* Teal pill used by the mobile-sheet CTA. Copied verbatim from the landing
   (global .btn-primary) so the mobile-sheet cascade matches it exactly. Only
   the mobile sheet exposes a .btn-primary on these pages, so this is inert on
   desktop and collides with nothing else on the subpages. */
.btn-primary {
  padding: 14px 32px; background: var(--brand-primary, #14b8a6); color: #fff; border: none; border-radius: 999px;
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 16px; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 60px var(--brand-glow, rgba(20, 184, 166, 0.35)); transition: transform .15s, box-shadow .15s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 80px rgba(20, 184, 166, 0.55); }

/* ── Mobile: collapse the link row into a hamburger sheet ── */
@media (max-width: 720px) {
  .nav-logo .wm { display: none; }        /* logo mark only — frees width for the CTA + toggle */
  .nav-cta { padding: 8px 15px; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 11px; border: 1px solid var(--surface-line, rgba(248, 247, 252, 0.1)); border-radius: 11px;
    background: rgba(255, 255, 255, 0.04); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span { display: block; height: 2px; width: 100%; background: #f5f4f8; border-radius: 2px; transition: transform .2s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links {
    position: fixed; top: 64px; left: 0; right: 0; z-index: 2;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(5, 8, 16, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--surface-line, rgba(248, 247, 252, 0.1)); padding: 6px clamp(16px, 5vw, 28px) 24px;
    max-height: calc(100svh - 64px); overflow-y: auto;
    transform: translateY(-10px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 15px 6px; font-size: 16px; border-bottom: 1px solid var(--surface-line, rgba(248, 247, 252, 0.1)); }
  .nav-sheet-only { display: flex; }
  .nav-divider { height: 0; border-bottom: 1px solid var(--surface-line, rgba(248, 247, 252, 0.1)); padding: 0; margin: 8px 0; opacity: .6; }
  .nav-sheet-cta { padding-top: 18px; border: none; }
  .nav-sheet-cta a { border: none; text-align: center; padding: 0; }
  .nav-sheet-cta .btn-primary { display: block; width: 100%; }
  .nav-scrim { display: block; position: fixed; inset: 64px 0 0; z-index: 89; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity .22s; }
  .nav-scrim.open { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}

/* ─── Footer ─── */
.mkt-foot { position: relative; z-index: 10; border-top: 1px solid var(--surface-line, rgba(248, 247, 252, 0.1)); padding: 40px 24px 36px; text-align: center; background: var(--surface-canvas, #050810); }
.mkt-foot-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(248, 247, 252, 0.58); margin: 0 0 16px; }
.mkt-foot-links { display: flex; justify-content: center; gap: clamp(14px, 4vw, 28px); flex-wrap: wrap; margin-bottom: 16px; }
.mkt-foot-links a { font-size: 13px; color: rgba(248, 247, 252, 0.75); text-decoration: none; font-family: 'DM Mono', monospace; letter-spacing: .3px; padding: 6px 4px; }
.mkt-foot-links a:hover { color: rgba(248, 247, 252, 1); }
.mkt-foot-copy { font-size: 11.5px; color: rgba(248, 247, 252, 0.55); font-weight: 300; margin: 0; }

/* ─── Accessibility: visible keyboard focus for the chrome ─── */
.nav a:focus-visible, .nav button:focus-visible, .mkt-foot a:focus-visible {
  outline: 2px solid var(--brand-light, #2dd4bf); outline-offset: 3px; border-radius: 6px;
}