/* Shared overrides — utility classes + mobile responsive */

body, nav.top, section, footer, .dcard, .pill, .btn, .dropdown-menu, .lang-menu, .lang-btn {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ─── KRITIEK: voorkom horizontale scroll op alle viewports ─── */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — geldt voor schermen ≤ 900px
   Targets BEIDE: React-nav (index.html) én statische nav
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* CONTAINERS */
  .container { padding: 0 16px !important; max-width: 100% !important; }

  /* ─── NAV — React (nav > .container) én statisch (nav.top .row) ─── */
  nav > .container,
  nav.top .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    row-gap: 10px !important;
    align-items: center !important;
  }

  /* Logo smaller */
  nav img, nav.top img.logo { height: 38px !important; width: auto !important; }

  /* Audience switch (Particulier/Zakelijk) — compacter */
  nav > .container > div[style*="border-radius: 999"] {
    padding: 3px !important;
  }
  nav > .container > div[style*="border-radius: 999"] button {
    padding: 5px 10px !important;
    font-size: 9px !important;
  }

  /* De links-rij in React-nav (de div met marginLeft: auto + fontSize: 14) */
  nav > .container > div[style*="margin-left: auto"] {
    order: 99 !important;
    width: 100% !important;
    margin-left: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 18px !important;
    font-size: 12px !important;
    padding: 4px 0 !important;
    border-top: 1px solid var(--line) !important;
    margin-top: 6px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  nav > .container > div[style*="margin-left: auto"]::-webkit-scrollbar { display: none; }
  nav > .container > div[style*="margin-left: auto"] > * { white-space: nowrap !important; flex-shrink: 0 !important; }

  /* Static nav .links — zelfde behandeling */
  nav.top .links {
    order: 99 !important;
    width: 100% !important;
    margin-left: 0 !important;
    overflow-x: auto !important;
    gap: 18px !important;
    font-size: 12px !important;
    padding: 4px 0 !important;
    border-top: 1px solid var(--line) !important;
    margin-top: 6px !important;
    scrollbar-width: none !important;
  }
  nav.top .links::-webkit-scrollbar { display: none; }
  nav.top .links a { white-space: nowrap !important; flex-shrink: 0 !important; }

  /* Lang switch compacter */
  .lang-btn { padding: 5px 10px !important; font-size: 10px !important; }
  .lang-menu { min-width: 160px !important; }

  /* CTA button in nav — niet te breed */
  nav .btn, nav.top .btn { padding: 8px 14px !important; font-size: 11px !important; }

  /* Algemene btn op mobiel */
  .btn { padding: 10px 16px !important; font-size: 12px !important; }

  /* ─── SERVICES DROPDOWN — full-width modal-stijl op mobiel ─── */
  .dropdown { position: static !important; }
  .dropdown-menu {
    position: fixed !important;
    top: 80px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    min-width: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    margin: 0 !important;
    z-index: 100 !important;
    box-shadow: 0 24px 64px rgba(20,23,15,0.25) !important;
  }
  .dropdown.open .dropdown-menu {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .dropdown-menu::before { display: none !important; }
  .dropdown-grid { grid-template-columns: 1fr !important; }
  .dropdown-item .name { font-size: 17px !important; }
  .dropdown-item .desc { font-size: 12px !important; }

  /* ─── INTRO / GATE SCREEN ─── */
  #intro .frame { width: min(280px, 70vw) !important; }
  #intro .cta { font-size: 11px !important; letter-spacing: 0.18em !important; gap: 12px !important; }
  #intro .cta .arrow { width: 20px !important; }
  #intro .sub { font-size: 9px !important; padding: 0 20px !important; text-align: center !important; }

  /* ─── HERO ─── */
  section[data-screen-label="Hero"] { padding: 32px 0 24px !important; }
  section[data-screen-label="Hero"] > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  section[data-screen-label="Hero"] h1 {
    font-size: clamp(36px, 9vw, 56px) !important;
    line-height: 1 !important;
  }
  section[data-screen-label="Hero"] p[style*="font-size: 19"] { font-size: 16px !important; }
  section[data-screen-label="Hero"] img[aria-hidden="true"] { display: none !important; }

  /* Medaillon kleiner op mobiel */
  section[data-screen-label="Hero"] div[style*="aspectRatio: '1/1'"],
  section[data-screen-label="Hero"] div[style*="aspect-ratio: 1/1"] {
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* ─── TRUST BAR ─── */
  div[style*="animation: scroll"] { font-size: 11px !important; gap: 32px !important; }

  /* ─── SERVICES GRID ─── */
  section#diensten > div > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  section#diensten > div > div[style*="grid-template-columns: repeat(3"] > div {
    border-right: none !important;
    border-bottom: 1px solid var(--line-strong) !important;
    min-height: auto !important;
    padding: 24px 16px !important;
  }
  section#diensten h2 { font-size: clamp(28px, 7vw, 44px) !important; }
  section#diensten > div > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  /* ─── PROCESS (donker blok) ─── */
  section#werkwijze { padding: 56px 0 !important; }
  section#werkwijze > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  section#werkwijze > div > div[style*="grid-template-columns: repeat(4"] > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(240,234,217,0.18) !important;
    padding: 24px 16px !important;
  }
  section#werkwijze h2 { font-size: 36px !important; }
  section#werkwijze h3 { font-size: 24px !important; }

  /* ─── PRICING ─── */
  section#tarieven { padding: 56px 0 !important; }
  section#tarieven > div > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  section#tarieven > div > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  section#tarieven h2 { font-size: clamp(28px, 7vw, 44px) !important; }

  /* ─── TESTIMONIALS ─── */
  section[data-screen-label="Testimonials"] { padding: 56px 0 !important; }
  section[data-screen-label="Testimonials"] > div > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  section[data-screen-label="Testimonials"] > div > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  section[data-screen-label="Testimonials"] h2 { font-size: clamp(28px, 7vw, 40px) !important; }

  /* ─── COVERAGE ─── */
  section#dekking { padding: 56px 0 !important; }
  section#dekking > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  section#dekking h2 { font-size: 36px !important; }
  section#dekking > div > div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* ─── FAQ ─── */
  section#faq { padding: 56px 0 !important; }
  section#faq > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  section#faq h2 { font-size: 32px !important; }

  /* ─── CONTACT ─── */
  section#contact { padding: 56px 0 !important; }
  section#contact > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  section#contact h2 { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1 !important; }

  /* ─── FOOTER ─── */
  footer { padding: 40px 0 24px !important; }
  footer > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 28px !important;
  }
  footer > div > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: left !important;
  }

  /* ═══════════ DIENSTEN OVERVIEW + DETAIL ═══════════ */
  .grid { grid-template-columns: 1fr !important; }
  .dcard { padding: 24px 18px !important; min-height: auto !important; }
  .dcard-title { font-size: 26px !important; }

  body[data-service-slug] h1.title { font-size: clamp(40px, 11vw, 64px) !important; line-height: 0.95 !important; }
  body[data-service-slug] .lead { font-size: 16px !important; }
  body[data-service-slug] .meta { grid-template-columns: 1fr !important; margin-top: 28px !important; }
  body[data-service-slug] .meta div { border-right: none !important; border-bottom: 1px solid var(--line) !important; padding: 14px 0 !important; }
  body[data-service-slug] .meta div:last-child { border-bottom: none !important; }

  .twocol { grid-template-columns: 1fr !important; gap: 36px !important; padding: 44px 0 !important; }
  .col h2 { font-size: 30px !important; }
  .col li { font-size: 15px !important; }
  .faq h2 { font-size: 30px !important; }
  .faqitem q { font-size: 18px !important; }

  .cta-band { grid-template-columns: 1fr !important; padding: 36px 20px !important; gap: 20px !important; }
  .cta-band h2 { font-size: 28px !important; }
  .cta-band .btnrow { flex-direction: column !important; align-items: stretch !important; }
  .cta-band .btn { justify-content: center !important; }

  .nextprev { grid-template-columns: 1fr !important; }
  .nextprev a:first-child { border-right: none !important; border-bottom: 1px solid var(--line-strong) !important; padding-right: 0 !important; padding-bottom: 18px !important; }
  .nextprev a:last-child { padding-left: 0 !important; text-align: left !important; padding-top: 18px !important; }

  /* ═══════════ STEDEN PAGE ═══════════ */
  .hero h1 { font-size: clamp(36px, 9vw, 64px) !important; }
  .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .stat .n { font-size: 32px !important; }
  .province { grid-template-columns: 1fr !important; gap: 14px !important; padding: 24px 0 !important; }
  .province .head { position: static !important; }
  .province h2 { font-size: 26px !important; }
  .cities { grid-template-columns: repeat(2, 1fr) !important; }
  .city { padding: 12px 14px !important; }
  .city .name { font-size: 14px !important; }
  .seo h2 { font-size: 28px !important; }
}

/* ─────────── EXTRA SMALL (< 480px) ─────────── */
@media (max-width: 480px) {
  .cities { grid-template-columns: 1fr !important; }
  section#dekking > div > div[style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
  #intro .frame { width: min(240px, 75vw) !important; }
}