/* ==========================================================================
   Drive Smart Autos — layout.css
   Grid, section rhythm, header / utility bar / footer / mobile-action-bar
   structural positioning. Visual component styling lives in components.css.
   ========================================================================== */

/* ---- Container / grid ---- */
.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.grid-12{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  /* Column and row gaps are set separately on purpose. A 12-column grid has
     ELEVEN column gaps, so a 40px gap needs 440px of gutter before any content
     — more than a 360px phone has in total, which pushed the grid outside the
     container where overflow-x:hidden clipped it. The column gap therefore
     scales with the viewport and stays small on phones; the row gap stays
     generous, since that is the spacing you actually see once the columns
     stack. Per-section overrides must set row-gap, never the gap shorthand. */
  column-gap:clamp(10px,2vw,var(--col-gap));
  row-gap:var(--sp-4);
}
.bleed{
  /* full-bleed media that ignores the container gutter on one or both sides */
  width:100vw;
  margin-inline:calc(50% - 50vw);
}

/* ---- Section rhythm ---- */
.section{
  padding-block:var(--section-pad);
  position:relative;
}
.section--tight{padding-block:calc(var(--section-pad) * 0.55);}
.section > .container{position:relative;}
.section-head{max-width:38em;}
.section-head + *{margin-top:var(--sp-6);}

/* offset headline / support pattern: headline on 7 cols, support text 8-12 */
.offset-head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  /* Same eleven-gap arithmetic as .grid-12 above — keep these in step. */
  column-gap:clamp(10px,2vw,var(--col-gap));
  row-gap:var(--sp-2);
  align-items:end;
}
.offset-head__title{grid-column:1 / span 12;}
.offset-head__support{grid-column:1 / span 12;color:var(--text-lo);margin-top:var(--sp-2);}
@media (min-width:900px){
  .offset-head__title{grid-column:1 / span 7;}
  .offset-head__support{grid-column:8 / span 5;margin-top:0;}
}

/* ==========================================================================
   Utility bar (desktop only)
   ========================================================================== */
.utility-bar{
  display:none;
  position:relative;
  z-index:var(--z-utility-bar);
  background:var(--ink-950);
  color:var(--onink-lo);
  transition:transform var(--dur-header) var(--ease-out);
}
.utility-bar.is-hidden{transform:translateY(-100%);}
.utility-bar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:10px;
  font-size:13px;
}
.utility-bar__available{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--onink-hi);
}
.utility-bar__dot{
  width:8px;height:8px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px rgba(11,141,238,.22);
  flex:none;
}
@media (min-width:1024px){
  .utility-bar{display:block;}
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  /* Solid on every page, always, and deliberately one shade lighter than
     --ink-950 (used by the hero scrims/footer) so the header reads as its
     own bar rather than melting into a dark photo behind it. The hairline
     border underneath does the rest of that separation. */
  background:var(--ink-900);
  border-bottom:1px solid var(--ink-line);
}
.site-header.is-solid{
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}
/* Pages without a dark hero directly under the header — same treatment */
.site-header.is-static{
  background:var(--ink-900);
  border-bottom-color:var(--ink-line);
}
.site-header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding-block:18px;
  color:var(--onink-hi);
}
.site-header__nav{
  display:none;
  align-items:center;
  gap:var(--sp-4);
}
.site-header__actions{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
}
.site-header__phone{display:none;}
.site-header__burger{
  display:inline-flex;
  width:44px;height:44px;
  align-items:center;justify-content:center;
}
@media (min-width:900px){
  .site-header__phone{display:inline-flex;}
}
/* Narrow phones: the header cannot fit logo + CTA + burger. At 320px the row
   needs about 340px against 280px of content, so the CTA label was being
   clipped by the button's own overflow:hidden. Drop the CTA here — "Request a
   vehicle" is the last item in the burger panel, and nine of the twelve pages
   also carry a Request button in the sticky bottom action bar. */
@media (max-width:479px){
  .site-header__actions .btn{display:none;}
}
@media (min-width:1024px){
  .site-header__nav{display:flex;}
  .site-header__burger{display:none;}
}

/* ==========================================================================
   Mega menu (Services)
   ========================================================================== */
.mega-menu{
  position:absolute;
  inset-inline:0;
  top:100%;
  z-index:var(--z-mega-menu);
  background:var(--ink-950);
  border-bottom:1px solid var(--ink-line);
  color:var(--onink-hi);
  visibility:hidden;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             visibility 0s linear var(--dur-base);
}
.mega-menu.is-open{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             visibility 0s;
}
.mega-menu__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
  padding-block:var(--sp-5);
}
@media (min-width:900px){
  .mega-menu__grid{grid-template-columns:1fr 1fr .9fr;}
}

/* ==========================================================================
   Mobile nav panel
   ========================================================================== */
.mobile-panel{
  position:fixed;
  inset:0;
  z-index:var(--z-mobile-panel);
  display:flex;
  flex-direction:column;
  background:var(--ink-950);
  color:var(--onink-hi);
  /* Order matters: the LAST declaration a browser understands is the one it
     uses. vh first as the fallback, dvh second so any browser that supports it
     wins — the other way round left the panel 100vh tall on phones, i.e.
     taller than the visible viewport, hiding the Call/WhatsApp footer behind
     the retracting URL bar. */
  height:100vh;
  height:100dvh;
  transform:translateX(100%);
  transition:transform var(--dur-panel) var(--ease-out);
  visibility:hidden;
}
.mobile-panel.is-open{
  transform:translateX(0);
  visibility:visible;
}
.mobile-panel__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  flex:none;
}
.mobile-panel__body{
  flex:1;
  overflow-y:auto;
  padding:0 var(--gutter) var(--sp-4);
}
.mobile-panel__foot{
  flex:none;
  padding:var(--sp-3) var(--gutter) max(var(--sp-4),env(safe-area-inset-bottom));
  border-top:1px solid var(--ink-line);
}
/* Two btn--block buttons side by side need ~300px; a 320px phone has 280px,
   which squeezed "Call 07851 581429" until it was cut off. Stack them. */
@media (max-width:419px){
  .mobile-panel__foot .sg-row{flex-wrap:wrap;}
}
.mobile-panel__item{
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.mobile-panel.is-open .mobile-panel__item{opacity:1;transform:translateY(0);}
@media (min-width:1024px){
  .mobile-panel{display:none;}
}

/* ==========================================================================
   Sticky mobile action bar
   ========================================================================== */
.mobile-action-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:var(--z-mobile-action-bar);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:var(--ink-950);
  border-top:1px solid var(--ink-line);
  padding-bottom:env(safe-area-inset-bottom);
  transition:transform var(--dur-base) var(--ease-out);
}
.mobile-action-bar.is-hidden{transform:translateY(100%);}
body.has-mobile-action-bar{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
@media (min-width:900px){
  .mobile-action-bar{display:none;}
  body.has-mobile-action-bar{padding-bottom:0;}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--ink-950);
  color:var(--onink-lo);
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
  padding-block:var(--sp-7);
}
@media (min-width:640px){
  .site-footer__grid{grid-template-columns:1fr 1fr;}
}
@media (min-width:1024px){
  .site-footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}
}
.site-footer__bottom{
  border-top:1px solid var(--ink-line);
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  align-items:center;
  justify-content:space-between;
  padding-block:var(--sp-3);
  font-size:13px;
}

/* ---- Breadcrumbs ---- */
.breadcrumbs{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:13px;color:var(--text-lo);
  padding-block:var(--sp-2);
}
.breadcrumbs a:hover{color:var(--brand-text);}
.breadcrumbs__sep{opacity:.5;}