/* ============================================================
   mobile.css — responsive refinements
   Loaded LAST on every page so these rules are authoritative
   across all page types (home / year / contact / levels).
   ============================================================ */

/* The dropdown menu is built by JS and exists in the DOM on every page,
   so it must be hidden by default on ALL viewports (incl. desktop).
   It is only revealed inside the <=900px block when the menu is open. */
.navbar-mobile-menu { display: none; }

/* ---------- Mobile navbar + hamburger dropdown (<= 900px) ---------- */
@media (max-width: 900px) {
  /* Solid, sticky top bar — in normal flow, so no fixed-overlap gap */
  .navbar {
    position: sticky !important;
    top: 0;
    background: #ffffff !important;
    box-shadow: 0 1px 10px rgba(15, 23, 42, 0.08);
    padding: 8px 0 !important;
  }
  .navbar-inner { gap: 10px; }
  .navbar-brand { color: #1E293B !important; font-size: 1rem; }

  /* Top bar keeps only: brand + primary CTA + hamburger */
  .navbar-year-links { display: none !important; }
  .navbar-cta .lang-toggle,
  .navbar-cta .nav-contact-link { display: none !important; }
  .navbar-cta { gap: 8px; flex-shrink: 0; }
  .navbar-cta .btn-primary {
    background: linear-gradient(135deg, #F15A29, #E8963E) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 8px 14px;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .navbar-toggle .hamburger-bar { background: #1E293B; }

  /* JS-built dropdown menu holding the secondary nav items */
  .navbar-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-wrap: wrap;
    gap: 8px;
    background: #ffffff;
    padding: 10px 20px 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    border-top: 1px solid #EEF1F5;
    max-height: 74vh;
    overflow-y: auto;
    z-index: 999;
  }
  .navbar.mobile-open .navbar-mobile-menu { display: flex; }

  /* Contact + language: two matched compact buttons sharing the top row */
  .navbar-mobile-menu > .nav-contact-link,
  .navbar-mobile-menu > .lang-toggle {
    flex: 1 1 calc(50% - 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    margin: 0 0 6px;
    padding: 11px 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #F15A29 !important;
    background: #FFF5F0;
    border: 1.5px solid #F6C9B5 !important;
    border-radius: 8px !important;
    text-decoration: none;
    white-space: nowrap;
  }
  .navbar-mobile-menu > .nav-contact-link:hover,
  .navbar-mobile-menu > .lang-toggle:hover { background: #FCE6D9; }

  /* Years: compact button grid — 3 per row (rows fill exactly; lone last item stays normal width) */
  .navbar-mobile-menu > .nav-year-link {
    flex: 0 1 calc((100% - 16px) / 3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 2px;
    margin-top: 2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    background: #F1F5F9;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    text-decoration: none;
  }
  .navbar-mobile-menu > .nav-year-link:hover { background: #E9EEF4; color: #1E293B; }
  .navbar-mobile-menu > .nav-year-link.active {
    background: #F15A29;
    border-color: #F15A29;
    color: #fff;
  }

  /* Hide the desktop right-side consult panel — it overlaps content on mobile */
  .float-consult { display: none !important; }

  /* Navbar is now in-flow → remove the big empty gap above hero/breadcrumb */
  .hero { min-height: auto !important; padding: 28px 0 40px !important; }
  .year-hero { min-height: auto !important; padding: 24px 0 36px !important; }
  .breadcrumb { margin-top: 0 !important; padding-top: 0 !important; }

  /* Uniform vertical rhythm for sections across all pages */
  .section { padding: 48px 0 !important; }
}

/* ---------- Comfortable, UNIFORM side gutters across every container ---------- */
/* Listed variants override the more-specific per-page rules in year-page.css/pastpaper.css */
@media (max-width: 768px) {
  .container,
  .hero .container,
  .year-hero .container,
  .conversion-section .container,
  .site-footer .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 375px) {
  .navbar-brand {
    max-width: 56%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .navbar-cta .btn-primary { padding: 7px 11px; font-size: 0.74rem; }
  .section { padding: 40px 0 !important; }
}