/* ═══════════════════════════════════════════════════════════
   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.
   ──────────────────────────────────────────────────────────── */

@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%; }

  /* .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(30, 58, 138, .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(30, 58, 138, .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; }
}