/* Select Autocentrum v2 basis (stap 2 plan 2026-10-07). Geladen op alle pagina's: font + tokens. Overflow-fix alleen onder body.sac2-ui2. */

/* 2.1 Open Sans Variable, self-hosted (@fontsource-variable/open-sans 5.3.0, SIL OFL 1.1) */
@font-face {
    font-family: 'Open Sans Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 300 800;
    src: url('../fonts/open-sans-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Open Sans Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 300 800;
    src: url('../fonts/open-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Het thema vraagt 'Open Sans'; alias zodat bestaande regels de self-hosted variabele font krijgen. */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 300 800;
    src: url('../fonts/open-sans-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 300 800;
    src: url('../fonts/open-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2.2 Tokens (huisstijl: groen #41b573 als accent; #2b8250 haalt 4,76:1 op wit (#2e8a55 uit het plan haalde 4,30) voor tekst en knoppen) */
:root {
    --sac-green-700: #2b8250;
    --sac-green-500: #41b573;
    --sac-green-050: #eaf7ef;
    --sac-ink: #1b1f23;
    --sac-ink-600: #4b5563;
    --sac-line: #e5e7eb;
    --sac-surface: #ffffff;
    --sac-surface-2: #f6f8f7;
    --sac-warn-050: #fff4e5;
    --sac-warn-500: #f0b36a;
    --sac-radius: 12px;
    --sac-radius-pill: 999px;
    --sac-tap: 48px;
    --sac-btn-h: 52px;
    --sac-font: 'Open Sans Variable', 'Open Sans', Arial, sans-serif;
}
@media (min-width: 1024px) {
    :root { --sac-btn-h: 48px; }
}
body {
    font-family: var(--sac-font);
}

/* 2.3 Sticky-werkbaarheid in v2: geen overflow-clipping (hidden/auto) op html, body of voorouders van sticky-elementen.
   Horizontale overflow wordt bij de bron opgelost: het off-canvas menu (.nav-menu, style.css:427 right:-100%) wordt in
   gesloten stand met transform buiten beeld gezet en krijgt visibility:hidden, zodat het geen layoutbreedte meer maakt.
   'clip' (geen scroll-container) als vangnet op html en body. */
html:has(body.sac2-ui2) {
    overflow: visible;
    overflow-x: clip;
}
body.sac2-ui2 {
    overflow: visible;
    overflow-x: clip;
}
@media (max-width: 1024px) {
    body.sac2-ui2 .nav-menu {
        right: 0;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
    }
    body.sac2-ui2 .nav-menu.active {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }
}
/* Voorouders van de sticky kolom: verticaal nooit clippen (dat breekt sticky), horizontaal clippen zonder scroll-container. */
body.sac2-ui2 .occasion-main-content,
body.sac2-ui2 .occasion-main-content-left,
body.sac2-ui2 .occasion-layout-wrapper,
body.sac2-ui2 .occasion-layout-wrapper .container,
body.sac2-ui2 .occasion-main-grid {
    overflow: visible;
    overflow-x: clip;
}
/* Grid-/flexkinderen mogen niet breder worden dan hun kolom (min-width:auto laat afbeeldingen en carrousels uitdijen). */
body.sac2-ui2 .occasion-main-grid > *,
body.sac2-ui2 .occasion-main-content-left,
body.sac2-ui2 .occasion-gallery,
body.sac2-ui2 .gallery-main {
    min-width: 0;
    max-width: 100%;
}
body.sac2-ui2 .gallery-main img {
    max-width: 100%;
    height: auto;
}

/* Footer mobiel (Octo 2026-10-07): grid-kolom paste zich aan de inhoud aan (1fr = minmax(auto,1fr)) en werd 512px op een scherm van 390px. */
@media (max-width: 768px) {
    .footer-main { grid-template-columns: minmax(0, 1fr) !important; }
    .footer-main > * { min-width: 0; max-width: 100%; }
    .footer-logo img { max-width: 100%; height: auto; }
    .footer .contact-link { display: flex !important; justify-content: center; margin: 0 0 10px; }
    .footer .contact-link, .footer .address { flex-wrap: wrap; overflow-wrap: anywhere; }
    .footer .rating-text { color: #d1d5db !important; }
    .footer .hours-list { max-width: 260px; margin: 0 auto; }
    .footer-links ul, .footer-occasions ul { display: inline-block; text-align: left; }
    .footer .google-review { flex-wrap: wrap; justify-content: center; white-space: normal; }
    .footer-consent-open { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
    /* ruimte onder de laatste regel, zodat zwevende knoppen of de onderbalk niets afdekken */
    .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
    /* scroll-to-top-knop overlapt bel/WhatsApp op mobiel */
    .scroll-to-top { display: none !important; }
}