/* ═══════════════════════════════════════════════════════════
   BRAVOS — RESPONSIVE CORRECTIONS
   Loaded last so it can correct the earlier sheets without
   editing them. Every rule here traces to a measured failure in
   the Playwright audit (scratchpad/resp_audit.py), not a guess.

   Deliberately NOT here: `overflow-x: hidden` on html/body. It
   would hide horizontal overflow rather than fix it, and it
   breaks position:sticky. The audit is the guard instead.
   ═══════════════════════════════════════════════════════════ */

/* ── Safe universal guards ───────────────────────────────── */

/* Media should never dictate layout width. */
img, video, canvas, svg, iframe, embed, object {
  max-width: 100%;
}

img, video { height: auto; }

/* Flex and grid children default to min-width:auto, which refuses to shrink
   below their content and is the usual cause of a stubborn overflow. */
.container > *,
.nav-inner > *,
.footer-grid > *,
.hero-inner > * {
  min-width: 0;
}

/* Long unbroken strings — emails, URLs, file names — must wrap rather than
   push the page wide. `anywhere` only kicks in when there is no better break. */
p, li, td, th, dd, dt, blockquote,
h1, h2, h3, h4, h5, h6,
.footer-contact-list li,
.bd-file-name, .bd-folder-name, .bd-share-person-email {
  overflow-wrap: anywhere;
}

/* Tables are the classic silent overflow. Let them scroll in place. */
table { max-width: 100%; }

/* ── Navbar ──────────────────────────────────────────────────
   The desktop nav needs 834px to lay out its seven links plus the
   auth buttons, but the hamburger only appeared at <=768px. That
   left 769-833px — iPad Air at 820px sits right in it — rendering
   the Sign Up button ~14px past the right edge on every page.
   The mobile nav now starts at 900px, clear of the 834px floor.
   ──────────────────────────────────────────────────────────── */

/* ── The eight-link band (trap 14) ──────────────────────────────────────────
   Adding Resume to the bar took the seven-link measurement from 834px to
   1068px, while the hamburger still only takes over at 900px. That left
   901-1067px overflowing: the links spilled past their own container and
   Sign Up sat outside the right edge — the same defect the 769-833px dead
   band was, one breakpoint further up.

   Handing every 1024px laptop and landscape iPad a hamburger to fix it would
   be a worse trade, so the bar tightens through the band instead. Padding and
   gaps only; nothing is hidden and no font shrinks, and full spacing returns
   at 1101px. Measured, not guessed — see the widths in tests/browser/nav_check.py. */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav-inner  { padding: 0 14px; gap: 4px; }
  .nav-links  { gap: 0; }
  .nav-link   { padding: 7px 7px; }
  .nav-auth   { gap: 6px; }
}


@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 16px;
    gap: 4px;
    border-top: 1px solid var(--gray-100);
    box-shadow: var(--shadow-lg);
    transform: translateY(-110%);
    z-index: 999;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;

    /* Sliding it out of view is not enough. translateY(-110%) still leaves the
       panel's lower edge at y≈28px, and it stayed visibility:visible /
       pointer-events:auto — an invisible strip across the top of every page
       that swallowed clicks meant for the content underneath. Hiding it also
       takes its links out of the tab order while the menu is closed. */
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--trans), visibility var(--trans);
  }

  .nav-links.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  /* margin-left:auto, not a justify-content change on .nav-inner. Below 900px
     .nav-links becomes a fixed sheet and .nav-auth is hidden, so the flex row
     holds only the logo and the hamburger — with nothing between them they
     packed together on the left, leaving the button next to the wordmark and
     the whole right half of the bar empty. The auto margin eats the free space
     instead, and it keeps working whatever else is or isn't in the row. */
  .hamburger { display: flex; margin-left: auto; }
  .nav-auth  { display: none; }

  /* ── The sheet ──
     It was a 359px-tall floating card in a 932px viewport, so the page showed
     through beneath it and it read as a half-finished dropdown. Anchoring the
     bottom makes it a proper full-height sheet with nothing behind it. */
  .nav-links {
    /* Explicit height rather than top+bottom. The auto-stretch resolved to a
       29px box here, and dvh is the better unit anyway: it tracks the mobile
       browser's collapsing address bar, which vh does not. */
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    bottom: 0;
    max-height: none;
    border-top: 1px solid var(--gray-100);
    box-shadow: none;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 2px;

    /* main.css sets align-items:center for the horizontal desktop bar. Once
       the flex direction turns vertical that centres every row — the reason
       the links, the active pill and the buttons all floated mid-panel. */
    align-items: stretch;
    justify-content: flex-start;
  }

  .nav-links li { width: 100%; }

  /* Inside the sheet the rows are full width, so the link can say what it
     actually is. Pair with .nav-full in main.css. */
  .nav-short { display: none; }
  .nav-full  { display: inline; }

  /* .nav-link is an <a>, inline by default, so the previous `width:100%` did
     nothing at all and the tap target was only as wide as the word itself. */
  .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: .98rem;
    font-weight: 500;
    text-align: left;
    white-space: normal;
    position: relative;
  }

  /* The desktop hover underline animates oddly in a vertical sheet. */
  .nav-link::after { display: none; }

  /* Current page reads as a full row with a left marker instead of a pill
     hovering in the middle of the panel. */
  .nav-link.nav-active {
    background: rgba(10,10,10, .07);
    color: var(--navy);
    font-weight: 600;
  }

  .nav-link.nav-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--navy);
  }

  /* Auth pinned to the foot of the sheet, full width. `margin-top:auto` needs
     the sheet to be full height, which is why the explicit height matters. */
  .nav-menu-auth {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
  }

  .nav-menu-auth .btn-nav-login,
  .nav-menu-auth .btn-nav-signup {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 600;
  }
}

/* ── Clearing the fixed navbar ───────────────────────────────
   .navbar is position:fixed, so it covers whatever sits at the top of the
   document. Only .hero, .page-hero and .auth-panel-right ever compensated —
   every other page (Saved Jobs, My Applications, job detail, Post a Job,
   Register) put its heading straight under the header, at every width
   including 1920px desktop.

   Rather than patch each wrapper, give <main> the offset once and exclude
   the sections that already include it. Pages added later inherit the fix.
   ──────────────────────────────────────────────────────────── */

body:not(.bd-page):not(.nrb-page) #main-content:not(:has(> .hero)):not(:has(> .page-hero)) {
  padding-top: var(--nav-h);
}

/* Full-height panels must lose the same amount or the page gains a scrollbar. */
body:not(.bd-page):not(.nrb-page) #main-content:not(:has(> .hero)):not(:has(> .page-hero)) .auth-layout {
  min-height: calc(100vh - var(--nav-h));
}

/* ── Full-height centred sections on short viewports ─────────
   .hero is min-height:100vh with align-items:center. When its content is
   taller than the viewport — a landscape phone, a short desktop window, a
   Nest Hub — centred flex overflows in BOTH directions, so the top of the
   heading is pushed above y=0 and disappears behind the fixed navbar.

   `safe center` is the fix: it centres normally, but falls back to start
   alignment the moment content would overflow, so nothing is ever cut off
   at the top. The explicit short-viewport rule backs it up for browsers
   without `safe` support.
   ──────────────────────────────────────────────────────────── */

.hero,
.page-hero,
.auth-split {
  align-items: safe center;
}

@media (max-height: 760px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 36px);
    padding-bottom: 52px;
  }
}

/* Landscape phones are short and wide — same problem, tighter budget. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: 36px;
  }
  .hero-heading { font-size: clamp(1.5rem, 5vh, 2.2rem); }
}

/* ── Touch devices ───────────────────────────────────────────
   A tap leaves :hover applied until you tap elsewhere, so the last
   link touched stays highlighted and reads as the current page —
   two rows appearing "selected" at once. Only paint hover where a
   real pointer exists.
   ──────────────────────────────────────────────────────────── */

@media (hover: none) {
  .nav-link:hover:not(.nav-active),
  .bd-nav-item:hover:not(.active) {
    background: transparent;
    color: var(--gray-600);
  }

  /* Keep a press state so taps still feel responsive. */
  .nav-link:active:not(.nav-active) { background: rgba(10,10,10, .07); }
}

/* ── Tablet band (601–900px) ─────────────────────────────── */

@media (max-width: 900px) and (min-width: 601px) {
  /* Two columns reads better than one on a tablet. */
  .features-grid,
  .why-grid,
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid    { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ── Small phones (<=420px) ──────────────────────────────── */

@media (max-width: 420px) {
  .container { padding: 0 14px; }

  /* Any grid still asking for a wide minimum collapses to one column. */
  .jb-jobs-grid,
  .features-grid,
  .why-grid,
  .resources-grid,
  .team-grid,
  .stats-row { grid-template-columns: 1fr !important; }

  .bd-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

/* ── Galaxy Z Fold 5 folded / very narrow (<=360px) ──────── */

@media (max-width: 360px) {
  .container { padding: 0 12px; }

  .logo-wordmark { font-size: .95rem; letter-spacing: 1px; }

  /* The Drive's New button is fixed-padded; give it room to breathe. */
  .bd-new-btn { padding: 13px 20px 13px 16px; font-size: 13.5px; }
  .bd-content { padding: 14px 12px 24px; margin: 6px 6px 0; }
  .bd-crumbstrip { margin: 0 6px; padding: 9px 14px; }
  .bd-page-title { font-size: 18px; }
  .bd-topbar { padding: 8px 10px; gap: 6px; }
  .bd-search-form { height: 42px; padding: 0 14px; gap: 10px; }

  /* Two tiles per row is still readable at 344px. */
  .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bd-file-thumb { height: 78px; }

  .bd-modal-box { padding: 20px; border-radius: 16px; }
  .bd-share-row { flex-wrap: wrap; }
  .bd-share-row .bd-modal-input { flex: 1 1 100%; }
}

/* ── Short viewports (Nest Hub 600px tall, phones landscape) ─ */

@media (max-height: 620px) and (min-width: 901px) {
  /* Drive is a fixed-height shell; on a short screen the sidebar
     must scroll rather than push the storage meter off-screen. */
  .bd-nav { overflow-y: auto; }
  .bd-sidebar { padding-top: 10px; }
  .bd-new-wrap { padding-bottom: 10px; }
}

/* ── Recruiter portals ───────────────────────────────────────
   All three portal shells are two-column grids on desktop: the dashboard rail
   (248px + 1fr), the auth split (46% / 54%) and the chooser (1fr / 1fr). Each
   has to become a single column on a phone or the content column ends up too
   narrow to hold its own children.

   The audit caught the chooser doing exactly that — two cards side by side put
   the page 14px past the viewport on a folded Galaxy Z Fold 5 at 344px.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .rc-choose-grid { grid-template-columns: 1fr; }

  .rc-auth { grid-template-columns: 1fr; }
  .rc-auth-side { padding: 34px 24px; }
  .rc-auth-h { font-size: 1.7rem; }
  .rc-auth-main { padding: 32px 22px; }

  .rc-shell { grid-template-columns: 1fr; }

  /* Once the rail is a banner above the content rather than a column beside it,
     height:100vh would push the whole page down by a full screen, and
     position:sticky would pin the banner over the content as it scrolls. */
  .rc-rail { position: static; height: auto; }
  .rc-nav { flex-direction: row; flex-wrap: wrap; }
  .rc-nav-label { width: 100%; }
  .rc-rail-foot { margin-top: 14px; }
  .rc-main { padding: 22px 18px 44px; }
}

@media (max-width: 900px) {
  /* The resume viewer and the candidate panel stack rather than share a row. */
  .rc-two-col { grid-template-columns: 1fr; }
  .rc-resume { height: 460px; }
}

@media (max-width: 700px) {
  /* Three salary/vacancy columns are unreadable below ~700px. */
  .rc-grid3 { grid-template-columns: 1fr; }
  .rc-filterbar .rc-input { max-width: none; }
  /* A 72% bubble on a phone leaves a useless sliver of gutter. */
  .rc-msg-bubble { max-width: 88%; }
  .rc-form-foot { justify-content: stretch; }
  .rc-form-foot .rc-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
  .rc-grid2 { grid-template-columns: 1fr; }
  .rc-choose { padding: 0 14px 56px; }
  .rc-choose-card { padding: 22px 18px; }
  .rc-stats { grid-template-columns: 1fr 1fr; }
  .rc-stat { padding: 14px; }
  .rc-stat-n { font-size: 1.5rem; }
  .rc-table th, .rc-table td { padding-left: 12px; padding-right: 12px; }
}

/* ── Print ───────────────────────────────────────────────── */

@media print {
  .navbar, .footer, .bd-sidebar, .bd-topbar, .flash-stack { display: none !important; }
  body { padding-top: 0 !important; }
}

/* ── Portal auth header on very narrow screens ──
   The three links fit everywhere except a folded Galaxy Z Fold (344px), where
   they pushed 2px of horizontal scroll onto all six recruiter auth pages. The
   two browse links are conveniences; the seeker sign-in is the one that stops
   somebody being stuck on the wrong door, so that is the one that stays. */
@media (max-width: 460px) {
  .rc-authbar { padding: 0 12px; gap: 8px; }
  .rc-authbar-links a:nth-child(1),
  .rc-authbar-links a:nth-child(2) { display: none; }
  .rc-authbar-links a { padding: 8px 6px; font-size: .8rem; }
  .rc-authbar-word { font-size: .85rem; letter-spacing: .04em; }
}