/*
 Theme Name: Stuwit Core Child
 Template: stuwit-core/theme
*/

@font-face {
    font-family: 'Figtree';
    src: url('figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('figtree/Figtree-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --font-display: "Figtree", sans-serif;
    --font-sans: "Figtree", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* ============================================================
       Brand palette — De Betuwe Schilderwerken
       brand-1  Vel blauw (primary — CTA button)
       brand-2  Aqua (accent)
       brand-3  Lichter blauw (surface-alt — subtiele sectie-tint)
       brand-4  Wit (achtergrond)
       brand-5  Licht blauw (surface-soft)
       brand-6  Blauw
       brand-7  Donker blauw (tekst, headings, inverse — secondary button)
       brand-8  Licht groen (accent)
       brand-9  Donker groen (accent donker)
       ============================================================ */
    --brand-1: #7AB2E1;   /* licht blauw (primary) */
    --brand-2: #6FA2A1;   /* aqua */
    --brand-3: #EAEFF2;   /* lichter blauw (surface-alt) */
    --brand-4: #ffffff;   /* wit */
    --brand-5: #0080C9;   /* vel blauw (surface-soft) */
    --brand-6: #4975A8;   /* blauw */
    --brand-7: #181C35;   /* donker blauw (tekst, deepest bg) */
    --brand-8: #91C67C;   /* licht groen */
    --brand-9: #426B37;   /* donker groen */

    /* Semantic tokens (gebruik deze in components/utilities) */
    --color-primary: var(--brand-1);
    --color-secondary: var(--brand-7);
    --color-accent: var(--brand-2);

    --color-foreground: var(--brand-7);
    --color-muted: #6E7E8C;
    --color-muted-80: #4A5A68;
    --color-prose-body: var(--color-muted-80);
    --color-prose-invert-body: color-mix(in srgb, var(--color-background) 82%, transparent);
    --color-prose-invert-captions: color-mix(in srgb, var(--color-background) 72%, transparent);
    --color-prose-invert-border: color-mix(in srgb, var(--color-background) 28%, transparent);
    --color-background: var(--brand-4);
    --color-surface: var(--brand-4);
    --color-surface-alt: var(--brand-3);
    --color-border: #C5D5E5;
    --color-heading-default: var(--brand-7);
    --color-heading-inverse: var(--brand-4);

    /* Backward-compat aliases */
    --color-dark: var(--brand-7);

    /* Typography plugin */
    --tw-prose-body: var(--color-foreground);
    --tw-prose-invert-body: var(--color-background);

    /* Standaard section-tokens (lichte achtergrond als default) */
    --section-bg: var(--color-surface);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-7);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--brand-7);
    --section-eyebrow-accent: var(--brand-1);
}

/* Eyebrow dot */
.eyebrow::before {
    content: '';
    display: block;
    width: 0.4rem;
    height: 0.6rem;
    border-radius: 0 50% 50% 0;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

/* ============================================================
   Section-tokens per achtergrondklasse
   De parent (base.css) consumeert deze tokens voor headings,
   eyebrow en prose. Utilities.css consumeert ze voor prose vars.
   ============================================================ */

.bg-surface {
    --section-bg: var(--color-surface);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-7);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--brand-7);
    --section-eyebrow-accent: var(--brand-1);
    background-color: var(--brand-4);
    color: var(--section-fg);
}

.bg-surface-alt {
    --section-bg: var(--brand-3);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-7);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--brand-7);
    --section-eyebrow-accent: var(--brand-1);
    background-color: var(--brand-3);
    color: var(--section-fg);
}

/* bg-brand-2 / bg-aqua: aqua — lichte achtergrond, donkere tekst */
.bg-brand-2,
.bg-aqua {
    --section-bg: var(--brand-2);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-7);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.12);
    --section-border-strong: rgba(0, 0, 0, 0.25);
    --section-link: var(--brand-7);
    --section-eyebrow: var(--brand-7);
    --section-eyebrow-accent: var(--brand-1);
    background-color: var(--brand-2);
    color: var(--section-fg);
}

/* bg-surface-soft / bg-licht-blauw: licht blauw — lichte achtergrond, donkere tekst */
.bg-surface-soft,
.bg-licht-blauw {
    --section-bg: var(--brand-5);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-7);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--brand-7);
    --section-eyebrow-accent: var(--brand-1);
    background-color: var(--brand-5);
    color: var(--section-fg);
}

/* bg-primary / bg-vel-blauw: vel blauw — donkere sectie, witte tekst */
.bg-primary,
.bg-vel-blauw {
    --section-bg: var(--brand-1);
    --section-fg: rgba(255, 255, 255, 0.88);
    --section-heading: #ffffff;
    --section-muted: rgba(255, 255, 255, 0.70);
    --section-border: rgba(255, 255, 255, 0.20);
    --section-border-strong: rgba(255, 255, 255, 0.45);
    --section-link: #ffffff;
    --section-eyebrow: rgba(255, 255, 255, 0.75);
    --section-eyebrow-accent: var(--brand-4);
    background-color: var(--brand-1);
    color: var(--section-fg);
}

/* bg-surface-inverse / bg-donker-blauw: donker blauw — donkere sectie, witte tekst */
.bg-surface-inverse,
.bg-donker-blauw {
    --section-bg: var(--brand-7);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: var(--brand-4);
    --section-muted: rgba(255, 255, 255, 0.62);
    --section-border: rgba(255, 255, 255, 0.18);
    --section-border-strong: rgba(255, 255, 255, 0.38);
    --section-link: var(--brand-4);
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    background-color: var(--brand-7);
    color: var(--section-fg);
}

/* bg-surface-inverse-alt: zelfde donker blauw, apart instelbaar */
.bg-surface-inverse-alt {
    --section-bg: var(--brand-7);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: var(--brand-4);
    --section-muted: rgba(255, 255, 255, 0.62);
    --section-border: rgba(255, 255, 255, 0.18);
    --section-border-strong: rgba(255, 255, 255, 0.38);
    --section-link: var(--brand-4);
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    background-color: var(--brand-7);
    color: var(--section-fg);
}

/* bg-dark alias — gelijk aan bg-surface-inverse (donker blauw) */
.bg-dark {
    --section-bg: var(--brand-7);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: var(--brand-4);
    --section-muted: rgba(255, 255, 255, 0.62);
    --section-border: rgba(255, 255, 255, 0.18);
    --section-border-strong: rgba(255, 255, 255, 0.38);
    --section-link: var(--brand-4);
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    background-color: var(--brand-7);
    color: var(--section-fg);
}

/* bg-secondary alias (gebruikt hardcoded in hero.php) */
.bg-secondary {
    --section-bg: var(--brand-7);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: var(--brand-4);
    --section-muted: rgba(255, 255, 255, 0.62);
    --section-border: rgba(255, 255, 255, 0.18);
    --section-border-strong: rgba(255, 255, 255, 0.38);
    --section-link: var(--brand-4);
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
}

/* bg-blauw: medium blauw — donkere sectie, witte tekst */
.bg-blauw {
    --section-bg: var(--brand-6);
    --section-fg: rgba(255, 255, 255, 0.88);
    --section-heading: #ffffff;
    --section-muted: rgba(255, 255, 255, 0.70);
    --section-border: rgba(255, 255, 255, 0.20);
    --section-border-strong: rgba(255, 255, 255, 0.40);
    --section-link: #ffffff;
    --section-eyebrow: rgba(255, 255, 255, 0.75);
    --section-eyebrow-accent: var(--brand-3);
    background-color: var(--brand-6);
    color: var(--section-fg);
}

/* bg-licht-groen: licht groen — lichte achtergrond, donkere tekst */
.bg-licht-groen {
    --section-bg: var(--brand-8);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-7);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--brand-7);
    --section-eyebrow: var(--brand-7);
    --section-eyebrow-accent: var(--brand-9);
    background-color: var(--brand-8);
    color: var(--section-fg);
}

/* bg-donker-groen: donker groen — donkere sectie, witte tekst */
.bg-donker-groen {
    --section-bg: var(--brand-9);
    --section-fg: rgba(255, 255, 255, 0.88);
    --section-heading: #ffffff;
    --section-muted: rgba(255, 255, 255, 0.70);
    --section-border: rgba(255, 255, 255, 0.20);
    --section-border-strong: rgba(255, 255, 255, 0.40);
    --section-link: #ffffff;
    --section-eyebrow: rgba(255, 255, 255, 0.75);
    --section-eyebrow-accent: var(--brand-8);
    background-color: var(--brand-9);
    color: var(--section-fg);
}

/* SVG fill utilities */
.fill-surface { fill: var(--brand-4); }
.stroke-surface { stroke: var(--brand-4); }

.fill-surface-alt { fill: var(--brand-3); }
.stroke-surface-alt { stroke: var(--brand-3); }

.fill-surface-soft { fill: var(--brand-5); }
.stroke-surface-soft { stroke: var(--brand-5); }

.fill-surface-inverse { fill: var(--brand-7); }
.stroke-surface-inverse { stroke: var(--brand-7); }

.fill-surface-inverse-alt { fill: var(--brand-7); }
.stroke-surface-inverse-alt { stroke: var(--brand-7); }

.fill-licht-groen { fill: var(--brand-8); }
.stroke-licht-groen { stroke: var(--brand-8); }

.fill-donker-groen { fill: var(--brand-9); }
.stroke-donker-groen { stroke: var(--brand-9); }

/* Prose links op donkere secties: inherit + underline */
.bg-primary .prose a,
.bg-vel-blauw .prose a,
.bg-donker-groen .prose a,
.bg-blauw .prose a {
    color: inherit;
    text-decoration-line: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   Prose ul/li fix
   TW library `:is()` selector (0,2,0) wint van de custom override (0,1,0).
   We matchen dezelfde specificiteit (.prose.prose = 0,2,0) zodat de
   child-CSS later in de cascade wint.
   ============================================================ */

/* ul-inspringing terugzetten: prose-base voegt anders 1.625em toe */
.prose.prose :where(ul) {
    padding-left: 0;
    padding-inline-start: 0;
    margin-left: 0;
}

/* li-padding herstellen voor de custom ::before bullet (0.5em breed) */
.prose.prose :where(ul > li) {
    padding-left: 1.5em;
    padding-inline-start: 1.5em;
}

/* ============================================================
   Button — geen uppercase, clip-path wipe animatie + scale
   ============================================================ */

.btn {
    text-transform: none;
    letter-spacing: 0;
    isolation: isolate;
    transition:
        scale 0.45s cubic-bezier(0.4, 0.15, 0, 1),
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-color: var(--btn-hover-overlay, rgba(0, 0, 0, 0.12));
    clip-path: polygon(50% 100%, 50% 0%, 100% 0%, 100% 0%, 50% 0%, 50% 100%, 0% 100%, 0% 100%);
    transition: clip-path 0.55s cubic-bezier(0.4, 0.15, 0, 1);
    z-index: -1;
}

.btn:active {
    scale: 0.96 0.93;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .btn:is(:hover, :focus-visible) {
        scale: 1.04 1.07;
    }
    .btn:is(:hover, :focus-visible)::before {
        clip-path: polygon(50% 0%, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 100%, 0% 100%, 0% 0%);
        transition-delay: 0.05s;
    }
}

/* Hover overlay per palette — lichte bg = donkerder; donkere bg = lichter */
.btn.bg-primary,
.btn.bg-vel-blauw    { --btn-hover-overlay: rgba(0,   0,   0,   0.16); }
.btn.bg-surface-inverse,
.btn.bg-secondary,
.btn.bg-donker-blauw { --btn-hover-overlay: rgba(255, 255, 255, 0.14); }
.btn.bg-brand-2,
.btn.bg-aqua         { --btn-hover-overlay: rgba(0,   0,   0,   0.10); }
.btn.bg-licht-blauw,
.btn.bg-surface-soft { --btn-hover-overlay: rgba(0,   0,   0,   0.10); }
.btn.bg-blauw        { --btn-hover-overlay: rgba(255, 255, 255, 0.14); }
.btn.bg-licht-groen  { --btn-hover-overlay: rgba(0,   0,   0,   0.10); }
.btn.bg-donker-groen { --btn-hover-overlay: rgba(255, 255, 255, 0.14); }
.btn.bg-white        { --btn-hover-overlay: rgba(0,   0,   0,   0.06); }

.text-white { color: #ffffff; }
.text-dark  { color: var(--color-dark); }

.btn span { font-weight: 500; }

/* nav-dark: logo fill naar brand-7 ipv filter: brightness(0) */
.nav-dark .navbar .brand svg {
    filter: none;
}
.nav-dark .navbar .brand svg path {
    fill: var(--brand-7);
}

/* Bij header-scrolled en hamburger/dropdown staat er een donkere achtergrond — logo terug naar wit */
.nav-dark .navbar.header-scrolled .brand svg path,
.hamburger-active.nav-dark .navbar .brand svg path,
.dropdown-active.nav-dark .navbar .brand svg path {
    fill: #ffffff;
}