/* Jobeazee shared chrome — the header and footer used by EVERY page.

   WHY THIS FILE EXISTS
   --------------------
   The header markup lives in one partial (_site_header.html) but its styling lived in
   home.css, which only the landing page and /daily-match load. So when /guide took the
   approved design and started loading guide.css instead, the shared header lost
   `.site-header`, `.hide-md` and `.btn-dark` — a sticky-less bar with the "Get started"
   button rendering as a bare link. Shipped live on 2026-09-22 and caught the same day.

   One partial styled by one stylesheet that every page loads. Markup and styling now
   travel together; a page cannot take the header without its appearance.

   ✅ CONVERTED TO var(), 2026-09-24 (batch 6), in the same change as home.css.

   It could not be done earlier, and the reason is worth keeping. Originally the blocker
   was that four stylesheets declared competing :root blocks, so a var() here resolved to
   whichever page stylesheet happened to be present. tokens.css fixed that in the prep
   step.

   What remained was smaller and sharper: these values are home.css's, and home.css's
   `--line` was var(--line) against the canonical #E4DFD4. Converting the chrome ALONE would
   have changed the header border on every page EXCEPT / and /daily-match — the two
   home.css covers — which is a visible change AND a new inconsistency. So the two
   converted together, and the border is now one colour everywhere for the first time.

   LOAD ORDER: this file comes FIRST, before any page stylesheet, so a page that wants a
   different content width can still override `.wrap` for its own body. The default here
   only has to be right for pages that bring no stylesheet of their own.
*/

/* Content width. Overridden by home.css (1440) and guide.css (1120); this default
   serves the pages that load neither. */
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ── buttons used by the chrome ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; border-radius: 999px; font-weight: 500; white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-dark { background: var(--ink); color: var(--card); padding: 0 20px; font-size: 15px; }
.btn-dark:hover { background: var(--ink-2); color: var(--card); }

/* ── header ──────────────────────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.brand:hover { color: var(--ink); text-decoration: none; }
/* The glyph inherits `currentColor`, so the square sets the ink once and the "j"
   follows — which is what lets the same markup sit on paper, on indigo and on dark.
   `place-items` rather than flex centring because the SVG fills the square: the
   letterform's own margins are inside its 100x100 viewBox, and squeezing it into a
   smaller box a second time made it look lost in the corner. */
.brand-mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--indigo); color: var(--card);
}
.brand-mark svg { width: 100%; height: 100%; display: block; border-radius: inherit; }
.nav-links { display: flex; align-items: center; gap: 36px; font-size: 15px; }
.nav-links a:not(.btn) { /* Chrome-specific ink, no canonical twin. NOT `var(--text, …)`: --text
   exists only in home.css, so that would have made the nav links one
   colour on / and another everywhere else. */
  color: #3C3C44; text-decoration: none; }
.nav-links a:not(.btn):hover { color: var(--indigo); }
/* The sign-out form sits inline among the links. */
.nav-links form { display: flex; margin: 0; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-footer { margin-top: 120px; border-top: 1px solid var(--line); }
/* `.footer` is the inner row. It lived only in home.css, so /guide and every page on
   the shared shell rendered the footer with no layout at all — same bug as the header,
   found by the markup-vs-stylesheet test rather than by looking. */
.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px; padding-top: 40px; padding-bottom: 40px;
  font-size: 14px; color: var(--muted);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.footer nav a { color: #4A4A52;  /* chrome-specific ink; see above */ text-decoration: none; }
.footer nav a:hover { color: var(--indigo); }

/* ── responsive: links drop out before the buttons do ────────────────────── */
@media (max-width: 1024px) {
  .nav-links a.hide-md { display: none; }
}
@media (max-width: 720px) {
  .nav-links { gap: 18px; }
  .nav-links a.hide-sm { display: none; }
}

/* Measured 2026-09-23: at a 390px viewport the document was 396px wide, and the sole
   element past the edge was `nav.nav-links` at 234px -- over by exactly 6. Six pixels
   of horizontal scroll on every page, on the narrowest common phone.

   The gap is what gives, not a link: at this width the nav is already down to Pricing,
   Sign in and Get started, and dropping another one would take away a way to reach
   something. 18px -> 10px across two gaps recovers 16px, which clears it with room.

   🔴 `.site-header .nav-links`, not `.nav-links`. home.css is loaded AFTER this file
   and sets `.nav-links { gap: 18px }` at <=640px; at equal specificity the later
   sheet wins, so the first version of this rule changed nothing and the measurement
   still read +6. The extra selector is what makes the shared chrome's own rule hold
   on a page that also brings a page stylesheet. */
@media (max-width: 430px) {
  /* Clearing the 6px was not enough on its own: at gap 10 the wordmark butted
     straight against 'Pricing' and 'Sign in' wrapped onto two lines -- no longer
     overflowing, but plainly broken. The brand is what gives up room, because every
     nav item here is a destination and dropping one takes away a way to reach
     something. 'Pricing' in particular was added to this nav on request. */
  .site-header .nav-links { gap: 14px; font-size: 14px; }
  /* 16px, and a guaranteed gap on the row. At 18px the signed-in nav (Pricing ·
     Dashboard · Sign out) filled the width exactly -- no overflow, but `space-between`
     had no slack to distribute, so the wordmark sat flush against 'Pricing'. Shrinking
     the brand is what buys the gap; the nav items are all destinations. */
  .site-header .brand { font-size: 16px; gap: 8px; }
  .site-header .nav { gap: 10px; }
  .site-header .brand-mark { width: 28px; height: 28px; }
  .site-header .btn-dark { padding: 0 14px; font-size: 14px; }
}


/* ── consent banner ──────────────────────────────────────────────────────── */
/* It is `position: fixed` with no z-index, so it paints at the default level and the
   hero's résumé card -- which carries `z-index: 1` -- sat ON TOP of it, hiding the OK
   button. A consent notice whose only control can be covered by decoration is not a
   consent notice. Lives here, in the shared chrome, because the banner is on every
   page while the card that covered it is on one.

   The number is high enough to clear anything in a page stylesheet without being
   2147483647, which wins an argument nobody should be having. */
#cookie-banner { z-index: 60; }