/* Gedeelde layout-fixes bovenop de per-pagina inline styles. Laadt na de <style>-blokken. */

/* Ankers landen onder de sticky header */
html { scroll-padding-top: 104px; }

/* Hero: de shorthand `padding: X 0 Y` overschreef de zijmarge van .container */
.container.hero-content,
.container.svc-hero-content,
.container.hero-inner { padding-left: 28px; padding-right: 28px; }

/* Header: ruimte tussen logo, menu en knop; knoppen niet laten wrappen */
.header-inner { gap: 24px; }
.btn { white-space: nowrap; }
@media (max-width: 1080px) {
  header nav { display: none; }
  .nav-toggle { display: flex; }
}

/* Diensten-dropdown: links uitlijnen en het gat naar de knop overbruggen */
.dropdown-panel { left: 0; transform: none; }
.dropdown-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }

/* Mobiel menu open: zwevende knoppen uit de weg */
body:has(.mobile-nav.open) .wa-float,
body:has(.mobile-nav.open) .mobile-cta-bar { display: none; }

/* Hero-foto op mobiel/tablet: alleen bovenin, niet uitgerekt over het gestapelde formulier */
@media (max-width: 900px) {
  .hero, .svc-hero, .photo-hero { background: #121F24; }
  .hero-bg, .svc-hero-bg, .photo-hero-bg { inset: 0 0 auto 0; height: 760px; }
}

/* Carrousels: eerste kaart op dezelfde lijn als de koppen */
.in-beeld-track,
.werkwijze-track { scroll-padding-inline: max(28px, calc((100% - 1160px) / 2 + 28px)); }

/* Prijskaart: sticky onder de header */
.prijs-card { top: 120px; }

/* Toetsenbordfocus zichtbaar op de optiekaarten (radio zelf is onzichtbaar) */
.option-card:has(input:focus-visible) { outline: 2px solid var(--koper); outline-offset: 2px; }

/* WhatsApp-tekstballon: niet op kleine schermen */
@media (max-width: 600px) { .wa-bubble { display: none; } }

/* Landingspagina's: los klok-icoontje in de topbalk op mobiel */
@media (max-width: 600px) { .bar-note { display: none; } }

/* Grotere tikdoelen op mobiel */
@media (max-width: 720px) {
  .btn-link { padding: 12px 8px; }
  .breadcrumb a { padding: 12px 0; }
  footer li a, footer ul a { display: inline-block; padding: 6px 0; }
  .wa-bubble .wa-close { width: 32px; height: 32px; top: -14px; right: -14px; }
}