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

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v51-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/roboto-v51-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v51-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/roboto-v51-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/roboto-v51-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/roboto-v51-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v51-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/roboto-v51-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    /* --font-display: "paralucent condensed"; */
    --font-display: "Roboto";
    --font-sans: "Roboto", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* ============================================================
       Brand palette — Roelofsen Installatietechniek
       brand-1  Blauw (primair, logo)
       brand-2  Rood (accent, logo)
       brand-3  Donker (tekst, headings, inverse secties)
       ============================================================ */
    --brand-1: #004A99;   /* blauw */
    --brand-2: #E73029;   /* rood */
    --brand-3: #0e1036;   /* donker */

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

    --color-foreground: var(--brand-3);
    --color-muted: #7A6F73;
    --color-muted-80: #5A5A5A;
    --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);

    /* Alle tones hieronder zijn afgeleid van de 3 brand colors
       via color-mix() — pas het percentage aan om de tint bij te sturen. */
    --color-background: color-mix(in srgb, var(--brand-1) 6%, white);
    --color-surface: #ffffff;
    --color-surface-alt: color-mix(in srgb, var(--brand-1) 3%, white);
    --color-tinted-card: color-mix(in srgb, var(--brand-1) 10%, white);

    /* Shades: neutrale, lichte kaart/pill-achtergronden afgeleid van brand-3 */
    --color-shade-1: color-mix(in srgb, var(--brand-3) 6%, white);
    --color-shade-2: color-mix(in srgb, var(--brand-3) 12%, white);

    /* Kaartkleuren binnen gekleurde secties — een shade donkerder/lichter
       dan de sectie-achtergrond zelf, voor subtiele diepte */
    --color-primary-shade: color-mix(in srgb, var(--brand-1) 88%, black);
    --color-secondary-shade: color-mix(in srgb, var(--brand-2) 88%, black);
    --color-dark-shade: color-mix(in srgb, var(--brand-3) 88%, white);

    /* Iets donkerdere variant van brand-3, voor een 2e donkere achtergrond
       naast .bg-surface-inverse (bijv. 2 aangrenzende donkere kaarten) */
    --color-surface-inverse-alt: color-mix(in srgb, var(--brand-3) 92%, black);

    --color-border: #E2E8F0;
    --color-heading-default: var(--brand-3);
    --color-heading-inverse: #ffffff;

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

    /* 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-3);
    --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-3);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: var(--color-tinted-card);
    --section-card-fg: var(--brand-3);
}


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

   Let op: dit zijn platte CSS-classes, geen Tailwind @utility — er
   worden dus geen lg:/hover:/sm:/etc. varianten van gegenereerd. De
   paar plekken in de theme-templates die zo'n variant nodig hadden
   (hero.php, template-walker.php) hebben hieronder een eigen kleine
   vervangklasse gekregen.
   ============================================================ */

.bg-surface {
    --section-bg: var(--color-surface);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-3);
    --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-3);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: var(--color-tinted-card);
    --section-card-fg: var(--brand-3);
    background-color: var(--color-surface);
    color: var(--section-fg);
}

.bg-surface-alt {
    --section-bg: var(--color-surface-alt);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-3);
    --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-3);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: var(--color-tinted-card);
    --section-card-fg: var(--brand-3);
    background-color: var(--color-surface-alt);
    color: var(--section-fg);
}

.bg-shade-1 {
    --section-bg: var(--color-shade-1);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-3);
    --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-3);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: var(--color-tinted-card);
    --section-card-fg: var(--brand-3);
    background-color: var(--color-shade-1);
    color: var(--section-fg);
}

.bg-shade-2 {
    --section-bg: var(--color-shade-2);
    --section-fg: var(--color-muted-80);
    --section-heading: var(--brand-3);
    --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-3);
    --section-eyebrow-accent: var(--brand-1);
    --section-card-bg: var(--color-tinted-card);
    --section-card-fg: var(--brand-3);
    background-color: var(--color-shade-2);
    color: var(--section-fg);
}

.bg-brand-2 {
    --section-bg: var(--brand-2);
    --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: #ffffff;
    --section-card-bg: var(--color-secondary-shade);
    --section-card-fg: #ffffff;
    background-color: var(--brand-2);
    color: var(--section-fg);
}

.bg-primary {
    --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-2);
    --section-card-bg: var(--color-primary-shade);
    --section-card-fg: #ffffff;
    background-color: var(--brand-1);
    color: var(--section-fg);
}

.bg-surface-inverse {
    --section-bg: var(--brand-3);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: #ffffff;
    --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: #ffffff;
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    --section-card-bg: var(--color-dark-shade);
    --section-card-fg: #ffffff;
    background-color: var(--brand-3);
    color: var(--section-fg);
}

.bg-surface-inverse-alt {
    --section-bg: var(--color-surface-inverse-alt);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: #ffffff;
    --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: #ffffff;
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    --section-card-bg: var(--color-dark-shade);
    --section-card-fg: #ffffff;
    background-color: var(--color-surface-inverse-alt);
    color: var(--section-fg);
}

.bg-dark {
    --section-bg: var(--brand-3);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: #ffffff;
    --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: #ffffff;
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    --section-card-bg: var(--color-dark-shade);
    --section-card-fg: #ffffff;
    background-color: var(--brand-3);
    color: var(--section-fg);
}

.bg-secondary {
    --section-bg: var(--brand-3);
    --section-fg: rgba(255, 255, 255, 0.82);
    --section-heading: #ffffff;
    --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: #ffffff;
    --section-eyebrow: rgba(255, 255, 255, 0.70);
    --section-eyebrow-accent: var(--brand-2);
    --section-card-bg: var(--color-dark-shade);
    --section-card-fg: #ffffff;
}

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

/* ============================================================
   Vervangklassen voor de 2 plekken die een responsive/hover-variant
   van een section-achtergrondklasse nodig hadden. Dat kon alleen
   via Tailwind @utility (nu verplaatst naar platte classes hierboven),
   dus deze reproduceren hetzelfde gedrag los van Tailwind's variant-engine.
   ============================================================ */

/* hero.php: bg-transparent op mobiel, donkere sectie-achtergrond vanaf lg.
   Zet ook de section-tokens (net als .bg-surface-inverse hierboven), anders
   blijft de heading/tekstkleur op de default (donker) staan terwijl de
   achtergrond wel donker wordt. */
@media (min-width: 1024px) {
    .hero-bg-inverse-lg {
        --section-bg: var(--brand-3);
        --section-fg: rgba(255, 255, 255, 0.82);
        --section-heading: #ffffff;
        --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: #ffffff;
        --section-eyebrow: rgba(255, 255, 255, 0.70);
        --section-eyebrow-accent: var(--brand-2);
        --section-card-bg: var(--color-dark-shade);
        --section-card-fg: #ffffff;
        background-color: var(--brand-3);
        color: var(--section-fg);
    }
}

/* template-walker.php: mega-menu list-item hover-achtergrond op 10% */
.menu-item-hover-dark:hover {
    background-color: color-mix(in srgb, var(--brand-3) 10%, transparent);
}

/* Navbar scrolled: bg-white → elementen donker houden (Roelofsen-specifiek: nav is altijd donker) */
.nav-dark .navbar.header-scrolled {
    border-color: color-mix(in srgb, var(--color-dark) 15%, transparent);
}

.nav-dark .navbar.header-scrolled .menu {
    color: var(--color-dark);
}

.nav-dark .navbar.header-scrolled .hamburger--bars,
.nav-dark .navbar.header-scrolled .hamburger--bars::before,
.nav-dark .navbar.header-scrolled .hamburger--bars::after,
.nav-dark .navbar.header-scrolled .hamburger--cross::before,
.nav-dark .navbar.header-scrolled .hamburger--cross::after {
    background-color: var(--color-dark);
}

.nav-dark .navbar.header-scrolled .brand svg {
    filter: brightness(0);
}