/* ==========================================================================
   Tablet (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-links:nth-child(4) { grid-column: 2 / 4; }
}

/* ==========================================================================
   Laptops (1201-1400px): full menu, but tighter spacing so the menu, search
   box and account links all fit on one line.
   ========================================================================== */
@media (min-width: 1201px) and (max-width: 1400px) {
  .header-inner { gap: 16px; }
  .nav-links { gap: 20px; }
  .header-actions { gap: 12px; }
  .nav-search input { width: 150px; }
}

/* ==========================================================================
   Collapsed (hamburger) menu: phones, tablets and small laptops (<= 1200px).
   Above 1200px the full menu, search box and account links fit in one row;
   below it they don't (they overflowed at 1024-1200px), so the menu collapses.
   ========================================================================== */
@media (max-width: 1200px) {
  .hamburger { display: flex; }
  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    overflow-y: auto;
    transition: max-height var(--transition);
    z-index: 99;
  }
  .main-nav.open { max-height: 90vh; }

  .nav-links {
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
  }
  .nav-links li { border-bottom: 1px solid var(--border); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a { display: block; padding: 14px 0; }
  .nav-links a::after { display: none; }

  /* Account links move from the header bar into the menu, first in line. */
  .nav-account-item { display: block; }
  .auth-link-wide { display: none; }
}

/* ==========================================================================
   Small tablet / large mobile (<= 860px) — header search box hidden
   ========================================================================== */
@media (max-width: 860px) {
  .tracker-stats { grid-template-columns: repeat(3, 1fr); }
  .nav-search { display: none; }
  .mic-btn { display: none; }
  /* These are more specific than the bare .mic-btn rule above and
     would otherwise win the cascade and keep the mic button visible
     on mobile — .hero-search .mic-btn in particular was doing
     exactly that on the homepage. Override each explicitly. */
  .hero-search .mic-btn,
  .nav-search .mic-btn { display: none; }


  .job-detail-header { flex-direction: column; align-items: flex-start; }

  .auth-links { gap: 8px; }
  .auth-link { font-size: 0.78rem; }
  .auth-link-cta { padding: 6px 10px; }
}

/* ==========================================================================
   Mobile (<= 640px)
   ========================================================================== */
@media (max-width: 640px) {
  .section { padding: 48px 0; }
  .hero { padding: 64px 0 48px; }
  .hero-search { flex-wrap: wrap; padding: 16px; }
  .hero-search input { width: 100%; order: 1; }
  .hero-search .btn { width: 100%; order: 2; }
  .hero-search svg { display: none; }

  .job-grid { grid-template-columns: 1fr; }

  .job-detail-card { padding: 24px; }
  .job-detail-image { height: 260px; }
  .job-detail-facts { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-links:nth-child(4) { grid-column: auto; }

  #back-to-top { bottom: 18px; right: 18px; width: 42px; height: 42px; }

  .job-detail-actions { flex-direction: column; }
  .job-detail-actions .btn { width: 100%; }

  /* Cards built in later phases (market insights, profile,
     eligibility) — trim padding and stack actions full-width so
     nothing gets tight or clipped on narrow phones. */
  .market-insights-grid { grid-template-columns: 1fr; }
  .insight-card { padding: 20px; }

  .profile-card { padding: 22px; }
  .profile-card-header .btn { margin-left: 0; width: 100%; }
  .profile-facts { grid-template-columns: 1fr 1fr; }

  .eligibility-cta { padding: 20px; flex-direction: column; align-items: stretch; }
  .eligibility-cta .btn { width: 100%; text-align: center; }
  .eligibility-actions { flex-direction: column; }
  .eligibility-actions .btn { width: 100%; text-align: center; }

  .career-card { padding: 20px; }
  .profile-quicklinks { flex-direction: column; }
  .profile-quicklinks .btn { width: 100%; text-align: center; }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; text-align: center; }

  .save-job-bar { flex-direction: column; align-items: stretch; }
  .save-job-bar .btn, .save-job-bar form, .save-job-bar button { width: 100%; text-align: center; }
  .save-job-link { margin-left: 0; text-align: center; }
  .tracker-stats { grid-template-columns: repeat(2, 1fr); }
  .tracker-item { flex-direction: column; align-items: stretch; }
  .tracker-item .btn { width: 100%; text-align: center; }

  .save-search-row { flex-direction: column; align-items: stretch; }
  .save-search-form, .save-search-btn { width: 100%; text-align: center; }
  .alerts-summary { flex-direction: column; align-items: stretch; }
  .alerts-summary .btn { width: 100%; text-align: center; }
  .alert-card { padding: 18px; }
  .alert-card-header .btn { width: 100%; text-align: center; }

  .career-map { flex-direction: column; align-items: stretch; }
  .career-map-arrow { transform: rotate(90deg); align-self: center; }
  .career-map-node { display: block; text-align: center; }

  .settings-actions { flex-direction: column; }
  .settings-actions .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Very small phones (<= 380px)
   ========================================================================== */
@media (max-width: 380px) {
  .logo-text { font-size: 1.05rem; }
  .hero h1 { font-size: 1.9rem; }
  .job-detail-facts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Very small phones (<= 400px, e.g. 320-360px wide): tighten the header so
   the logo, account buttons and hamburger all fit (at 320px the hamburger
   used to be pushed off-screen).
   ========================================================================== */
@media (max-width: 400px) {
  .container { padding: 0 16px; }
  .header-inner { gap: 10px; }
  .logo { gap: 8px; }
  .logo-img { height: 30px; width: 30px; }
  .logo-text { font-size: 1.05rem; }
  .header-actions { gap: 10px; }
  .auth-links { gap: 8px; }
  .auth-link { font-size: 0.76rem; }
  .auth-link-cta { padding: 6px 9px; }
}

/* ==========================================================================
   Smallest phones (< 360px, e.g. 320px): logged-out visitors' "Log In" moves
   from the header into the hamburger menu (first item), keeping "Sign Up"
   visible. With Log In in the header, the header only fitted by ~3px with
   the normal font and overflowed with wider fallback fonts (seen on Windows).
   ========================================================================== */
@media (max-width: 359px) {
  .auth-link-login { display: none; }
  .nav-login-item { display: block; }
}