/* =========================================================
   Responsive Strategy — Mobile First Overrides
   Breakpoints: 1360 nav-collapse / 1200 desktop / 992 tablet-landscape
                / 768 tablet / 480 mobile
   ========================================================= */

/* ---------- ≤1360px : collapse the full nav to a menu button ----------
   Rationale: with 8 nav items + logo + 2 CTA buttons, a horizontal nav
   only has room to breathe on large desktop monitors. Anything narrower
   (most laptops, all tablets) gets the compact hamburger nav instead of
   a cramped, wrapping, overlapping menu bar. ---------- */
@media (max-width: 1360px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0;
    background: #fff; flex-direction: column; align-items: flex-start; gap: 0;
    padding: var(--space-5); overflow-y: auto;
    transform: translateX(100%); transition: transform var(--transition-base);
    z-index: 999;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a {
    width: 100%; display: block; white-space: normal;
    font-size: var(--fs-body); padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border); border-left: none !important;
  }
  .nav-actions .btn-outline { display: none; }
  .brand-sub { display: none; }
}

/* ---------- ≤1200px : contained desktop ---------- */
@media (max-width: 1200px) {
  .container { padding: 0 var(--space-5); }
  .hero h1 { font-size: 38px; }
}

/* ---------- ≤992px : tablet landscape ---------- */
@media (max-width: 992px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; max-width: 420px; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; aspect-ratio: 16/10; }
  .contact-grid { grid-template-columns: 1fr; }
  .visa-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .search-panel form { grid-template-columns: 1fr 1fr; }
  .search-panel form .btn { grid-column: 1 / -1; }
}

/* ---------- ≤768px : tablet ---------- */
@media (max-width: 768px) {
  :root { --header-height: 64px; }
  h1, .h1, .hero h1 { font-size: 30px; }
  h2, .h2 { font-size: 26px; }
  .section { padding: var(--space-8) 0; }
  .top-bar { display: none; }

  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .visa-summary-grid { grid-template-columns: 1fr 1fr; }
  .visa-type-pill-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; text-align: center; padding: var(--space-7) var(--space-5); }
  .search-panel { margin-top: var(--space-5); padding: var(--space-5); }
  .search-panel form { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- ≤600px : small tablet / large phone — trim the brand lockup ---------- */
@media (max-width: 600px) {
  .brand { font-size: 15px; }
  .brand-mark { width: 34px; height: 34px; font-size: 14px; }
  .nav-actions { gap: var(--space-2); }
  .hp-logo-img { height: 40px; }
  .hp-footer .hp-logo-img { height: 44px; }
}

/* ---------- ≤480px : mobile ---------- */
@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  .hero h1, h1, .h1 { font-size: 26px; }
  .hero p.lead { font-size: var(--fs-body); }
  .hero-trust { gap: var(--space-4); }
  .hero-trust div strong { font-size: 20px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .stat strong { font-size: 30px; }
  .visa-summary-grid { grid-template-columns: 1fr; }
  .visa-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .visa-tab { flex-shrink: 0; }

  /* Buttons go full-width in content sections (forms, CTAs, hero)
     but must NOT stretch inside the fixed-height navbar or they blow
     up the header and collide with the menu button. */
  .section .btn, .card .btn, .cta-band .btn, form .btn, .form-group + .btn { width: 100%; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; width: auto; }
  .nav-actions .btn { width: auto; padding: 8px 14px; font-size: 13px; }
  .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}