/* =============================================================
   ENS Immigration Advice — responsive.css
   Consolidated media queries for global chrome + shared
   interior components. Load LAST (after main.css + components.css).
   Mobile-first intent; these are max-width overrides that collapse
   multi-column layouts on tablet (<=980px) and phone (<=700px).
   ============================================================= */

/* Contain the intentional off-canvas mobile nav drawer (position:fixed, parked
   off-screen right) and act as a final backstop against horizontal page scroll.
   `clip` (not `hidden`) creates no scroll container, so position:sticky and the
   desktop mega-menu are unaffected. Real layout overflows are fixed at source
   below — this is only for the fixed off-canvas panel. */
html{overflow-x:clip;}

/* ---------- TABLET (<= 980px) ---------- */
@media (max-width:980px){
  /* interior components */
  .quick-cards{grid-template-columns:repeat(2,1fr);}
  .card-grid,
  .card-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .testimonials-grid{grid-template-columns:1fr;}
  .articles-grid{grid-template-columns:1fr;}
  .fee-accordion{grid-template-columns:1fr;}
  .with-toc{grid-template-columns:1fr;gap:0;}
  .toc{display:none;}
  .toc-mobile{display:block;}
  .form-grid{grid-template-columns:1fr;}
  .trust-bar ul{flex-wrap:wrap;}
  .trust-bar li{flex:1 1 33%;border-left:none;border-top:1px dashed var(--line);}
  /* Footer had no responsive rules — collapse the 4-col grid so it never
     overflows; the intro column spans full width, long links/emails wrap. */
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px 26px;}
  .footer-about{grid-column:1 / -1;}
  .footer-grid a{overflow-wrap:anywhere;}
}

/* Tablet 2-col card grids: a lone last card (odd count) spans the full width so
   the final row fills instead of leaving an empty cell. Scoped below the desktop
   content-aware range (≥861px); the --flex variant already fills via flex-grow. */
@media (max-width:860px){
  .card-grid:not([class*="cols-"]):has(> :nth-child(odd):last-child) > :last-child{grid-column:1 / -1;}
}

/* ---------- PHONE (<= 700px) ---------- */
/* ============================================================
   MOBILE NAVIGATION HUB — full-height slide-in panel from right.
   Panel = the existing .nav-links container; close button, backdrop
   and contact block are injected by navigation.js. Submenus expand
   as accordions (one at a time). Applies to phones + small tablets.
   ============================================================ */
@media (max-width:860px){
  body{overflow-x:hidden;}
  .menu-toggle{display:block; position:relative; z-index:130;}
  body.nav-open{overflow:hidden;}
  body.nav-open .menu-toggle{visibility:hidden;}
  /* The slide-in panel lives inside the fixed header (a stacking context).
     Raise the header above the backdrop when open so panel taps land on the
     links, not the scrim — deterministic across browsers. */
  body.nav-open header{z-index:130;}

  /* Backdrop (injected) */
  .nav-backdrop{
    display:block;
    position:fixed; inset:0;
    background:rgba(14,45,38,0.55);
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:115;
  }
  body.nav-open .nav-backdrop{opacity:1; visibility:visible;}

  /* Slide-in panel */
  .nav-links{
    display:flex;
    position:fixed; top:0; right:0;
    height:100vh; height:100dvh;
    width:min(86vw,360px);
    flex-direction:column; align-items:stretch; gap:0;
    padding:0 0 24px;
    background:var(--ink);
    box-shadow:-24px 0 60px -24px rgba(0,0,0,0.6);
    transform:translateX(100%);
    /* visibility flips to hidden AFTER the slide-out finishes, so the fixed drawer
       is never painted while parked off-screen (prevents it showing on zoom-out) */
    visibility:hidden;
    transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    z-index:120;
  }
  body.nav-open .nav-links{transform:translateX(0); visibility:visible; transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;}

  /* Panel top bar with close button (injected) */
  .nav-close{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 22px;
    border-bottom:1px solid var(--line-on-ink);
    position:sticky; top:0; background:var(--ink); z-index:2;
  }
  .nav-close-label{
    font-family:'IBM Plex Mono',monospace; font-size:11px;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--brass-light);
  }
  .nav-close button{
    background:none; border:1px solid var(--line-on-ink); border-radius:50%;
    width:38px; height:38px; color:var(--paper); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .nav-close button svg{width:16px; height:16px;}

  /* Top-level link rows */
  .nav-links > a:not(.btn){
    color:var(--paper) !important;
    font-family:'Bai Jamjuree',sans-serif; font-size:18px; font-weight:500;
    padding:18px 22px;
    border-bottom:1px solid var(--line-on-ink);
  }
  .nav-links > a:not(.btn):hover,
  .nav-links > a:not(.btn):active{color:var(--brass-light) !important; background:var(--ink-soft);}

  /* Visas accordion header */
  .nav-item{border-bottom:1px solid var(--line-on-ink);}
  .nav-item .nav-trigger{
    width:100%; justify-content:space-between;
    color:var(--paper) !important;
    font-family:'Bai Jamjuree',sans-serif; font-size:18px; font-weight:500;
    padding:18px 22px;
  }
  .nav-item .nav-trigger .caret{color:var(--brass-light); font-size:14px; transition:transform .25s ease;}
  .nav-item.expanded .nav-trigger{color:var(--brass-light);}
  .nav-item.expanded .nav-trigger .caret{transform:rotate(180deg);}

  /* Submenu = 6-group drill-down: rail of groups -> panel with a Back control */
  .mega-menu{
    position:static; transform:none; width:auto;
    background:var(--ink-deep); border:none; border-radius:0; box-shadow:none;
    opacity:1; visibility:visible; pointer-events:auto;
    padding:0; max-height:0; overflow:hidden;
    transition:max-height .32s ease;
  }
  .nav-item.expanded .mega-menu{max-height:2600px;}
  .mega-head{display:none;}
  .mega-layout{display:block;}
  /* rail = the six group rows (full width, large tap targets) */
  .mega-rail{width:auto;border-right:none;padding:0;gap:0;}
  .mega-tab{
    border-radius:0;color:var(--paper);
    font-size:16px;font-weight:500;
    padding:15px 22px;border-bottom:1px solid var(--line-on-ink);
    box-shadow:none;
  }
  .mega-tab--ecaa{box-shadow:inset 4px 0 0 var(--brass);}
  .mega-tab:hover,.mega-tab:focus-visible{background:var(--ink-soft);color:var(--brass-light);}
  .mega-tab[aria-selected="true"]{background:none;color:var(--paper);}
  .mega-ico{color:var(--brass-light);}
  .mega-tab-label small{color:var(--brass-light);}
  .mega-chevron{display:block;}
  /* panels hidden until a group is chosen (drilled) */
  .mega-panelwrap{display:none;padding:0;}
  .mega-layout.is-drilled .mega-rail{display:none;}
  .mega-layout.is-drilled .mega-panelwrap{display:block;}
  .mega-back{
    display:flex;align-items:center;gap:8px;width:100%;
    padding:15px 22px;background:var(--ink-soft);border:none;
    border-bottom:1px solid var(--line-on-ink);cursor:pointer;
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
    font-weight:700;
    color:var(--brass-light);
  }
  .mega-panel-cols{display:block;}
  .mega-group h5{padding:16px 22px 8px;margin:0;color:var(--brass-light);}
  .mega-group ul{gap:0;}
  .mega-group a{
    display:block;color:rgba(247,248,245,0.82);
    padding:13px 22px 13px 34px;border-bottom:1px solid var(--line-on-ink);
    font-size:15px;
  }
  .mega-group a:hover{color:var(--brass-light);background:var(--ink-soft);}
  .mega-group--feature{background:none;border:none;border-radius:0;padding:0;}

  /* Flat (rail-less) mega on mobile — content shows directly, no drill needed */
  .mega-flat{padding:0;}

  /* Collapsible sub-group sections (accordion). Applied by navigation.js only
     to panels that have more than one section; items are hidden until the
     section heading is tapped. Single-section categories show their list. */
  .mega-group.is-collapsible > h5{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    cursor:pointer;
    padding:16px 22px;
    border-bottom:1px solid var(--line-on-ink);
    font-family:'Bai Jamjuree',sans-serif;font-size:15px;font-weight:600;
    letter-spacing:0;text-transform:none;color:var(--paper);
  }
  .mega-group.is-collapsible > h5::after{
    content:'+';font-size:20px;line-height:1;color:var(--brass-light);font-weight:400;
  }
  .mega-group.is-collapsible.open > h5{color:var(--brass-light);}
  .mega-group.is-collapsible.open > h5::after{content:'\2013';}
  .mega-group.is-collapsible > ul{display:none;}
  .mega-group.is-collapsible.open > ul{display:block;}
  /* bottom CTA (dark) */
  .mega-cta{
    flex-direction:column;align-items:stretch;gap:12px;
    padding:18px 22px;background:var(--ink-soft);border-top:1px solid var(--line-on-ink);
  }
  .mega-cta-text{color:var(--paper);}
  .mega-cta-btns{flex-direction:column;}
  .mega-cta .btn{width:100%;justify-content:center;}
  .mega-cta .btn-ghost{color:var(--paper);border-color:var(--line-on-ink);}
  .mega-cta .btn-ghost:hover{background:var(--ink);border-color:var(--paper);}

  /* Prominent bottom CTA, pushed to the base of the panel */
  .nav-links > a.btn-primary{
    margin:26px 22px 6px; margin-top:auto;
    justify-content:center; padding:16px 24px; font-size:14px;
  }

  /* Contact block (injected) */
  .nav-contact{padding:6px 22px 4px; display:flex; flex-direction:column;}
  .nav-contact a{
    display:flex; align-items:center; gap:11px;
    color:rgba(247,248,245,0.78); font-size:14px; padding:11px 0;
    font-family:'IBM Plex Mono',monospace;
  }
  .nav-contact a:hover{color:var(--paper);}
  .nav-contact svg{width:16px; height:16px; color:var(--brass-light); flex-shrink:0;}
}

@media (max-width:700px){
  /* generic layout */
  .section-head{flex-direction:column;align-items:flex-start;}
  section{padding:44px 0;}
  .wrap{padding:0 20px;}

  /* interior components */
  .quick-cards{grid-template-columns:1fr;}
  .card-grid,
  .card-grid.cols-2,
  .card-grid.cols-4{grid-template-columns:1fr;}
  /* Tighter hero on mobile so the main content starts sooner (sticky 71px
     header + breadcrumb already separate it — no need for big top padding). */
  .page-hero{padding:56px 0 32px;}
  .page-hero h1{margin-bottom:12px;}
  .page-hero p.lede{font-size:15px;line-height:1.5;margin:0 0 20px;}
  .page-hero p{margin-bottom:20px;}
  .page-hero-ctas,.page-hero .hero-ctas{gap:10px;margin-bottom:0;}
  .cta-strip{flex-direction:column;align-items:flex-start;padding:30px 26px;}
  .fee-row{flex-direction:column;align-items:flex-start;gap:4px;}
  .fee-row span{max-width:100%;min-width:0;}
  .calc-row{flex-direction:column;align-items:flex-start;gap:8px;}
  .calc-row input[type="number"],
  .calc-row input[type="text"],
  .calc-row select{width:100%;max-width:none;}
  .breadcrumb ol{padding:12px 20px;}

  /* back-to-top */
  .back-to-top{right:16px;bottom:16px;width:42px;height:42px;}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}