/* ───────────────────────────────────────────────────────────
   DFG CANONICAL SITE FOOTER  (.sf-*)  —  "Statement Sixt"
   Self-contained — NO Tailwind dependency, so it renders identically
   on the marketing pages (Tailwind) and the funnel (compiled funnel.css).
   Bilingual via the site's own [data-en]/[data-es] toggler.
   Single source of truth: edit here + assets/_canonical-footer.html, then
   propagate the <footer class="sf"> block to every page.
   ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   GLOBAL ANTI-HORIZONTAL-SCROLL GUARD (loaded site-wide via this file)
   No page should ever scroll/move sideways on mobile. Uses overflow-x:clip
   (NOT hidden) so it never breaks the sticky/fixed headers or vertical scroll.
   ═══════════════════════════════════════════════════════════ */
html, body { overflow-x: clip; max-width: 100%; }

.sf{ background:linear-gradient(180deg,#0a0a0a 0%,#070707 100%); color:#fff;
  font-family:'Inter',system-ui,-apple-system,sans-serif; }

/* ── Statement bar (Ready to drive? + Book) ── */
.sf__statebar{ max-width:80rem; margin:0 auto; padding:3.25rem 2rem 3rem; display:flex;
  align-items:center; justify-content:space-between; gap:1.75rem 2.5rem; flex-wrap:wrap; }
.sf__stateH{ margin:0; font-family:'Archivo Black','Inter',system-ui,sans-serif; font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1; letter-spacing:-.025em; color:#fff; }
.sf__stateH .sf__hl{ display:inline-block; background:#FD3049; color:#fff; padding:.04em .2em .1em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.sf__cta-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; background:#FD3049;
  color:#fff; font-family:'Inter',system-ui,sans-serif; font-size:.95rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:1rem 2.6rem; border-radius:0; text-decoration:none; white-space:nowrap;
  transition:background .18s, transform .15s; }
.sf__cta-btn:hover{ background:#D90E26; transform:translateY(-1px); }
.sf__cta-btn:active{ transform:translateY(0); }
.sf__cta-btn:focus-visible{ outline:2px solid #FD3049; outline-offset:3px; }

/* ── Nav row (clusters left · logo + IG right) ── */
.sf__navbar{ max-width:80rem; margin:0 auto; padding:1.75rem 2rem; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:1.25rem 2rem; border-top:1px solid rgba(255,255,255,.10); }
.sf__clusters{ display:flex; align-items:center; flex-wrap:wrap; }
.sf__cluster{ display:inline-flex; align-items:center; flex-wrap:wrap; }
.sf__cluster a{ font-family:'Inter',system-ui,sans-serif; font-size:.875rem; font-weight:500;
  color:rgba(255,255,255,.62); text-decoration:none; white-space:nowrap; margin-right:1.4rem; transition:color .18s; }
.sf__cluster a:last-child{ margin-right:0; }
.sf__cluster a:hover{ color:#fff; }
.sf__cluster a:focus-visible{ outline:2px solid #FD3049; outline-offset:2px; border-radius:2px; }
.sf__cluster-sep{ width:1px; height:14px; background:rgba(255,255,255,.18); margin:0 1.4rem; flex:none; }
.sf__navright{ display:inline-flex; align-items:center; gap:1.5rem; flex:none; }
.sf__brandLink{ display:inline-flex; align-items:center; line-height:0; border-radius:4px; outline:none;
  transition:opacity .18s; }
.sf__brandLink:hover{ opacity:.78; }
.sf__brandLink:focus-visible{ outline:2px solid #FD3049; outline-offset:4px; }
.sf__logo{ height:34px; width:auto; display:block; }
.sf__ic{ display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.62);
  transition:color .18s; outline:none; }
.sf__ic:hover{ color:#fff; }
.sf__ic:focus-visible{ outline:2px solid #FD3049; outline-offset:3px; border-radius:3px; }
.sf__ic svg{ width:20px; height:20px; display:block; }

/* ── Legal bar (legal links left · location + copyright right) ── */
.sf__bottom{ max-width:80rem; margin:0 auto; padding:1.5rem 2rem 2.25rem; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:.75rem 1.5rem; border-top:1px solid rgba(255,255,255,.07); }
.sf__legal{ display:inline-flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.sf__legal a{ font-size:.8125rem; color:rgba(255,255,255,.4); text-decoration:none; transition:color .15s; }
.sf__legal a:hover{ color:rgba(255,255,255,.75); }
.sf__legal a:focus-visible{ outline:2px solid rgba(255,255,255,.4); outline-offset:2px; border-radius:2px; }
.sf__legal-sep{ width:1px; height:11px; background:rgba(255,255,255,.15); display:inline-block; }
.sf__bottomRight{ display:inline-flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:flex-end; }
.sf__loc{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8125rem; color:rgba(255,255,255,.35); }
.sf__dot{ width:6px; height:6px; border-radius:50%; background:#FD3049; display:inline-block; flex:none; }
.sf__copy{ font-size:.8125rem; color:rgba(255,255,255,.35); white-space:nowrap; }

/* ── Sixt display title (funnel page H1s adopt the marketing Archivo Black) ── */
.sx-title{ font-family:'Archivo Black','Inter',system-ui,-apple-system,sans-serif; font-weight:400; }

/* ── Sixt desktop header nav (the "menu letters" — bold uppercase tracked) ── */
.sx-nav{ gap:1.9rem; }
.sx-nav>li>a{ font-family:'Inter',system-ui,sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:#0F0F14; transition:color .15s; }
.sx-nav>li>a:hover{ color:#FD3049; }
.sx-nav>li>a[aria-current="page"]{ color:#D90E26; }   /* AA-safe red for active */

/* ── Sixt header Reserve CTA (desktop only; mobile uses the takeover menu) ── */
.sx-reserve{ display:none; }
@media (min-width:1024px){
  .sx-reserve{ display:inline-flex; align-items:center; background:#FD3049; color:#fff;
    font-family:'Inter',system-ui,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; padding:.62rem 1.25rem; white-space:nowrap; transition:background .15s; }
}
.sx-reserve:hover{ background:#D90E26; }

/* ── Responsive ── */
@media (max-width:900px){
  .sf__statebar{ padding:2.75rem 1.5rem 2.5rem; flex-direction:column; align-items:flex-start; gap:1.75rem; }
  .sf__navbar{ padding:1.5rem; flex-direction:column; align-items:flex-start; gap:1.25rem; }
  .sf__navright{ align-self:flex-start; }
  .sf__bottom{ padding:1.25rem 1.5rem 2rem; flex-direction:column; align-items:flex-start; gap:.75rem; }
  .sf__bottomRight{ justify-content:flex-start; }
}
@media (max-width:600px){
  .sf__statebar{ align-items:center; text-align:center; }
  .sf__cta-btn{ width:100%; align-self:stretch; }
  .sf__navbar{ align-items:center; }
  .sf__clusters{ justify-content:center; }
  .sf__cluster-sep{ display:none; }
  .sf__cluster a,.sf__cluster a:last-child{ margin:.15rem .7rem; }
  .sf__navright{ align-self:center; justify-content:center; }
  .sf__bottom{ align-items:center; text-align:center; }
  .sf__legal{ justify-content:center; }
  .sf__bottomRight{ justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .sf__cta-btn,.sf__cluster a,.sf__ic,.sf__legal a,.sf__brandLink{ transition:none; }
  .sf__cta-btn:hover{ transform:none; }
}