/* ============================================================
   responsive.css — Global mobile/tablet baselines
   Loaded site-wide via head.php. Fixes common issues without
   touching individual page CSS.
   ============================================================ */

/* Reset any horizontal overflow */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Box model safety */
*, *::before, *::after { box-sizing: border-box; }

/* Media elements never overflow */
img, video, iframe, svg, canvas, audio, picture {
  max-width: 100%;
  height: auto;
}

/* Prevent videos from breaking layouts */
video, iframe { display: block; }

/* Tables become scrollable on small screens */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
  border-collapse: collapse;
}
@media (min-width: 900px) {
  table { display: table; }
}

/* Pre/code word-wrap */
pre, code {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Prevent any section from causing horizontal scroll */
section, main, header, footer, article, aside, nav {
  max-width: 100vw;
}

/* iOS zoom prevention on form focus */
@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Minimum tap targets 44px (WCAG) */
@media (max-width: 767px) {
  button,
  a.btn,
  a.header-btn,
  .header-btn,
  .wbch-btn-primary,
  .wbch-btn-ghost,
  [role="button"] {
    min-height: 44px;
  }
}

/* Common container padding on mobile */
@media (max-width: 767px) {
  .container,
  .wbch-container,
  .wbch-footer__inner,
  .sm-container,
  .vp-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Fluid typography for headings */
h1:not(.no-fluid) { font-size: clamp(22px, 5vw, 48px); line-height: 1.15; }
h2:not(.no-fluid) { font-size: clamp(18px, 3.5vw, 32px); line-height: 1.2; }
h3:not(.no-fluid) { font-size: clamp(16px, 2.5vw, 22px); line-height: 1.3; }

/* Allow specific classes to opt out of fluid sizing */
.hero-main-title,
.wbch-hero-title,
.vp-hero-title,
.sm-h1,
.author-hero h1,
.e404-code {
  /* keep their own sizes */
}

/* Force forms to stack on small screens */
@media (max-width: 640px) {
  form.hero-main-form,
  form.sm-form,
  .smi-cta-form {
    flex-direction: column !important;
  }
  form.hero-main-form input,
  form.hero-main-form button,
  form.sm-form input,
  form.sm-form button {
    width: 100% !important;
  }
}

/* Grid cards that should stack on small screens */
@media (max-width: 640px) {
  .wbch-buy-grid,
  .wbch-steps-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Section padding sanity */
@media (max-width: 640px) {
  .wbch-intro,
  .wbch-steps,
  .wbch-valuation,
  .wbch-what-we-buy,
  .wbch-areas,
  .wbch-faq {
    padding: 40px 0 !important;
  }
}

/* Fix overflowing text */
p, li, h1, h2, h3, h4, h5, h6, a, span, div {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Allow long URLs/emails to wrap */
a[href^="http"],
a[href^="mailto"],
a[href^="tel"] {
  word-break: break-word;
}

/* Smooth scroll for all anchor navigation */
html { scroll-behavior: smooth; }

/* Make sure fixed elements don't trap viewport */
@media (max-width: 767px) {
  .wbch-whatsapp-float {
    right: 12px !important;
    bottom: 80px !important;
  }
}

/* Responsive padding on wbch curved sections */
@media (max-width: 640px) {
  .wbch-container {
    padding: 0 16px !important;
  }
}

/* Card grids — force reasonable minimums */
.wbch-grid,
.wbch-buy-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .wbch-grid,
  .wbch-buy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .wbch-grid,
  .wbch-buy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Hide cluttered elements below 360px */
@media (max-width: 359px) {
  .wbch-topbar-refer { display: none !important; }
}

/* ============================================================
   Pass 2 — Additional targeted fixes
   ============================================================ */

/* Force all sections to never exceed viewport */
main > * { max-width: 100vw; }

/* Sticky position sanity on small screens */
@media (max-width: 767px) {
  .sticky-top, [class*='sticky'] { position: relative !important; }
}

/* Common 2-column grids → stack on mobile */
@media (max-width: 767px) {
  .grid-cols-2,
  .md\:grid-cols-2,
  [class*='grid-cols-2'] {
    grid-template-columns: 1fr !important;
  }
}

/* 3-column grids → 2 on tablet, 1 on phone */
@media (max-width: 900px) {
  .grid-cols-3,
  .md\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 580px) {
  .grid-cols-3,
  .md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* 4-column grids → 2 on tablet, 1 on phone */
@media (max-width: 900px) {
  .grid-cols-4,
  .md\:grid-cols-4,
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 580px) {
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* Hero media flex — stack on mobile */
@media (max-width: 767px) {
  .hero-main-inner[style*='grid'],
  .hero-main-inner {
    grid-template-columns: 1fr !important;
  }
  .hero-main-media {
    display: none !important;
  }
}

/* About page — force container width */
@media (max-width: 767px) {
  .about-bullets { font-size: 14px; }
  .about-proof { padding: 20px; }
}

/* Wizard pages — better mobile padding */
@media (max-width: 767px) {
  .wz-root, .sz-root { padding: 0 !important; }
  .wz-title, .sz-title { font-size: 18px !important; padding: 0 16px !important; }
  .wz-right, .sz-right { padding: 12px 16px !important; }
}

/* Compare tables — horizontal scroll with nice scrollbar */
@media (max-width: 900px) {
  .cmp-grid,
  .compare-grid,
  [class*='comparison'] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Blog content — consistent mobile padding */
@media (max-width: 767px) {
  .blog-text p, .blog-text h2, .blog-text h3, .blog-text ul, .blog-text ol {
    padding-left: 16px;
    padding-right: 16px;
  }
  .blog-text h1 { font-size: 24px; padding: 0 16px; }
  .blog-text h2 { font-size: 20px; }
  .blog-text h3 { font-size: 17px; }
  .blog-shell { padding: 20px 0 !important; }
}

/* Location pages */
@media (max-width: 767px) {
  .loc-hero h1 { font-size: clamp(22px, 5vw, 32px) !important; }
  .loc-main { padding: 20px 16px !important; }
}

/* Refer page */
@media (max-width: 767px) {
  .ref-hero h1 { font-size: clamp(22px, 5vw, 32px) !important; }
  .ref-hero { padding: 60px 16px !important; }
}

/* Recovery page specific */
@media (max-width: 767px) {
  .breakdown-section .container,
  .hero-section .container {
    padding: 0 16px !important;
  }
  .breakdown-section img { max-width: 100%; height: auto; }
}

/* Media page cards */
@media (max-width: 767px) {
  #news img, .card-custom img { height: auto !important; }
}

/* Footer responsive */
@media (max-width: 640px) {
  .wbch-footer__cols { grid-template-columns: 1fr !important; gap: 24px !important; }
  .wbch-footer__inner { padding: 28px 16px 24px !important; }
}

/* Nav mobile padding fix */
@media (max-width: 767px) {
  #wbch-nav .container {
    padding: 0 16px !important;
  }
}

/* Prevent any div with inline max-width from blocking mobile */
[style*='max-width: 1200px'],
[style*='max-width:1200px'],
[style*='max-width: 1180px'],
[style*='max-width:1180px'],
[style*='max-width: 1280px'],
[style*='max-width:1280px'] {
  max-width: 100% !important;
  padding-left: clamp(16px, 4vw, 24px);
  padding-right: clamp(16px, 4vw, 24px);
}
@media (min-width: 1280px) {
  [style*='max-width: 1200px'],
  [style*='max-width:1200px'] { max-width: 1200px !important; }
  [style*='max-width: 1180px'],
  [style*='max-width:1180px'] { max-width: 1180px !important; }
  [style*='max-width: 1280px'],
  [style*='max-width:1280px'] { max-width: 1280px !important; }
}

/* ============================================================
   Pass 3 — Audit-driven page-specific fixes
   ============================================================ */

/* ── contact.php — HIGH PRIORITY: mobile h1 offset bug ── */
@media (max-width: 767px) {
  .contact-title {
    margin-left: 0 !important;
    margin-top: 24px !important;
  }
  .contact-form-wrap p,
  .contact-form-wrap h2 {
    margin-left: 0 !important;
  }
}

/* ── scrap-car.php — tablet 2-col reg/postcode cramped ── */
@media (max-width: 900px) {
  .sc-fields-row {
    grid-template-columns: 1fr !important;
  }
}
.sc-price-amount {
  font-size: clamp(24px, 6vw, 36px) !important;
}
@media (max-width: 640px) {
  .sc-hero {
    padding: 40px 16px !important;
  }
}

/* ── compare/index.php — reg widget stacks too late (480→640) ── */
@media (max-width: 640px) {
  .cmp-row {
    flex-direction: column !important;
  }
  .cmp-go {
    width: 100% !important;
  }
}

/* ── compare/webuyanycar — table double-scroll conflict ── */
.overflow-x-auto > table,
.overflow-x-auto table {
  display: table !important;
}

/* ── locations/location-layout.php — 240px min-w overflow on 320px ── */
@media (max-width: 480px) {
  .header-btn[class*=min-w-],
  [class*=min-w-[240px]],
  [class*=min-w-[200px]] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── locations/index.php — tablet hero padding ── */
@media (max-width: 768px) {
  .lp-hero {
    padding: 40px 0 48px !important;
  }
  .lp-collect-band {
    padding: 36px 20px !important;
  }
}

/* ── sell-for-me.php — tablet 3-col feature grid too tight ── */
@media (min-width: 769px) and (max-width: 900px) {
  .sfm-feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── refer/index.php — pay opts cramped on tiny phones ── */
@media (max-width: 380px) {
  .ref-pay-opts {
    grid-template-columns: 1fr !important;
  }
}

/* ── blog-detail — user-generated content safety ── */
.blog-text table {
  display: block !important;
  overflow-x: auto !important;
  max-width: 100%;
}
.blog-text img {
  max-width: 100% !important;
  height: auto !important;
}
.blog-text iframe {
  max-width: 100% !important;
}

/* ── Sell-car-wizard — dvh fallback ── */
.wz-root, .sz-root {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Global fix: any element with max-width that breaks on mobile ── */
@media (max-width: 767px) {
  [style*=max-width][style*=margin-left:2rem] {
    margin-left: 0 !important;
  }
}

/* ============================================================
   Pass 4 — Nav/hamburger specific fixes
   ============================================================ */

/* Don't force min-height on nav buttons — they have fixed dimensions */
.hamburger,
.wbch-mobile-menu-close,
.wbch-mobile-menu-close button,
#burger {
  min-height: unset !important;
  height: auto;
}

/* Keep the hamburger exact dimensions */
.hamburger {
  width: 40px !important;
  height: 30px !important;
  min-height: unset !important;
}

/* Keep close button perfectly circular */
.wbch-mobile-menu-close {
  width: 36px !important;
  height: 36px !important;
  min-height: unset !important;
  border-radius: 999px !important;
  aspect-ratio: 1 !important;
  padding: 0 !important;
}

/* Make entire mobile menu row clickable by stretching the link */
.wbch-mobile-menu-item {
  padding: 0 !important;
}
.wbch-mobile-menu-item .navlinks {
  display: block !important;
  width: 100% !important;
  padding: 16px 18px !important;
  color: #f8fafc !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
}
.wbch-mobile-menu-item .navlinks:hover,
.wbch-mobile-menu-item .navlinks:active {
  background: rgba(255,255,255,0.08) !important;
}

/* Don't let responsive.css button targets break the burger bars */
.hamburger .bar {
  min-height: unset !important;
  height: 1px !important;
}

/* ============================================================
   Pass 5 — Video page mobile rendering fixes
   ============================================================ */

/* Ensure the video page container respects viewport */
.vp-container {
  max-width: 100% !important;
  margin: 0 auto !important;
}

@media (max-width: 1023px) {
  /* Tighter hero padding on mobile/tablet */
  .vp-hero {
    padding: 80px 0 60px !important;
  }
  .vp-hero::before,
  .vp-hero::after {
    display: none !important;
  }

  /* Single-column grid — minmax(0,1fr) prevents children with overflowing
     content (horizontal-scroll related videos list) from expanding the track. */
  .vp-grid,
  .vp-grid.is-short {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  .vp-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .vp-side,
  .vp-slist {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Body overlap */
  .vp-body {
    padding: 28px 0 48px !important;
    margin-top: -24px !important;
    border-radius: 24px 24px 0 0 !important;
  }

  /* Player card */
  .vp-player-card {
    border-radius: 14px !important;
    margin: 0 !important;
  }

  /* Make portrait shorts narrower on mobile so they fit */
  .vp-player.portrait {
    max-width: min(380px, 100%) !important;
    margin: 0 auto !important;
  }

  /* Info panel padding */
  .vp-info {
    padding: 16px 18px !important;
  }

  /* Buttons stack nicely */
  .vp-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .vp-btns .vp-b {
    width: 100% !important;
    padding: 12px 16px !important;
    justify-content: center !important;
    font-size: 13px !important;
  }

  /* Sidebar becomes horizontal scroll */
  .vp-side {
    position: static !important;
    margin-top: 16px !important;
  }
  .vp-stitle {
    color: #0d1b3e !important;
    margin-bottom: 10px !important;
  }
  .vp-slist {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding: 4px 0 12px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }
  .vp-slist::-webkit-scrollbar { display: none; }

  .vp-rc {
    flex-shrink: 0 !important;
    width: 240px !important;
    flex-direction: column !important;
    scroll-snap-align: start !important;
  }
  .vp-rc-img.landscape {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }
  .vp-rc-img.portrait {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9/16 !important;
    max-height: 220px !important;
  }
  .vp-rc-body {
    padding: 12px 14px !important;
  }

  /* Breadcrumbs wrap properly */
  .vp-crumbs {
    font-size: 10px !important;
    flex-wrap: wrap !important;
    line-height: 1.4 !important;
  }

  /* Title sizing */
  .vp-hero-title {
    font-size: clamp(18px, 4.5vw, 26px) !important;
    line-height: 1.25 !important;
  }

  /* Meta row */
  .vp-hero-meta {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .vp-htag, .vp-hm {
    font-size: 11px !important;
  }
}

@media (max-width: 480px) {
  .vp-hero {
    padding: 72px 0 52px !important;
  }
  .vp-body {
    padding: 24px 0 36px !important;
  }
  .vp-info {
    padding: 14px 16px !important;
  }
  .vp-rc {
    width: 200px !important;
  }
}