/*
Theme Name: BK Woonconcept
Theme URI: https://bkkeukens.nl
Template: sellabees-sites-core
Author: TechDog
Author URI: https://techdog.nl
Description: Maatwerk child-thema voor BK Woonconcept (keukens, badkamers, wellness, vloeren) bovenop Sellabees Sites Core. Classic theme met ACF Pro Flexible Content als veilige pagina-builder.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bk-woonconcept
*/

/* ==========================================================================
   Design tokens (huisstijl uit Figma) — pas hier centraal de huisstijl aan
   ========================================================================== */
:root {
    /* Kleuren (exacte Figma-waarden) */
    --bk-gold: #c3b491;
    --bk-gold-dark: #ab9b76;
    --bk-black: #000000;
    --bk-dark: #1f1f1f;          /* donkere pagina-/sectie-achtergrond */
    --bk-white: #ffffff;
    --bk-bg: #ffffff;
    --bk-text: #1a1a1a;
    --bk-text-muted: #5a5a5a;
    --bk-footer-bg: #000000;
    --bk-footer-text: #ffffff;

    /* Typografie (exacte Figma-waarden) */
    --bk-font-heading: "Cormorant Infant", Georgia, "Times New Roman", serif;
    --bk-font-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --bk-fs-body: 18px;          /* Albert Sans Regular 18px / lh 26px */
    --bk-lh-body: 26px;
    --bk-fs-nav: 18px;
    --bk-fs-button: 16px;
    --bk-fw-heading: 500;        /* Medium voor ALLE koppen (consistente schaal) */

    /* Vloeiende kop-schaal met clamp(min, voorkeur, max): max = de Figma-maat op
       desktop (≥~1900px), min = de mobiele maat (≤600px). Daartussen schaalt de
       kop vloeiend met de viewport mee — geen harde sprong meer op 600px en geen
       te grote koppen op tablet/laptop. (Eerder: vast 60px → harde sprong 34px.) */
    --bk-h1: clamp(34px, 22px + 2vw, 60px);   /* pagina-hoofdtitel (1 per pagina) */
    --bk-h2: clamp(34px, 22px + 2vw, 60px);   /* sectietitels */
    --bk-h3: clamp(28px, 22px + 1vw, 40px);   /* kaarttitels */
    --bk-h4: clamp(22px, 18px + 0.65vw, 30px);/* reviewnamen, footerkoppen */
    --bk-h5: clamp(20px, 18px + 0.4vw, 25px); /* labels (bv. plaats-tag) */
    --bk-h6: 20px;
    --bk-h-banner: clamp(44px, 28px + 2.7vw, 80px);  /* "Wij denken mee"-banner */

    /* Spacing & maatvoering (exacte Figma-marges) */
    --bk-container: 1320px;       /* tekst/secties: 300px marge op 1920 */
    --bk-container-wide: 1590px;  /* header & brede beeldband: ~165px marge */
    --bk-container-pad: 24px;
    --bk-radius: 5px;
    --bk-radius-pill: 100px;
    --bk-gap: 24px;
    --bk-section-y: 40px;   /* 40+40 = 80px tussen secties, zoals Figma (~78px) */
}

/* ==========================================================================
   Basis / reset
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--bk-font-body);
    font-size: var(--bk-fs-body);
    font-weight: 300;                       /* Albert Sans Light */
    line-height: var(--bk-lh-body);
    color: var(--bk-text);
    background: var(--bk-bg);
    -webkit-font-smoothing: antialiased;    /* dunner/lichter, zoals Figma rendert */
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bk-font-heading);
    font-weight: var(--bk-fw-heading);
    line-height: 1.1;
    margin: 0 0 .5em;
    color: inherit;
}
/* Consistente kop-schaal: één vaste maat per tag, overal gelijk. */
h1 { font-size: var(--bk-h1); }
h2 { font-size: var(--bk-h2); }
h3 { font-size: var(--bk-h3); }
h4 { font-size: var(--bk-h4); }
h5 { font-size: var(--bk-h5); }
h6 { font-size: var(--bk-h6); }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

.bk-container {
    width: 100%;
    /* Content-band moet exact 1320px breed zijn op de 300px-marge (Figma).
       max-width = 1320 + 2x24px padding zodat de inhoud (na padding) 1320px is
       en op x=300..x1620 valt i.p.v. x=324..x1596. */
    max-width: calc(var(--bk-container) + var(--bk-container-pad) * 2);
    margin-inline: auto;
    padding-inline: var(--bk-container-pad);
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ==========================================================================
   Knoppen
   ========================================================================== */
.bk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-family: var(--bk-font-body);
    font-size: var(--bk-fs-button);
    font-weight: 700;
    line-height: 1;
    padding: 15px 40px;
    white-space: nowrap;
    border-radius: var(--bk-radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bk-btn:hover { text-decoration: none; }

.bk-btn--gold { background: var(--bk-gold); color: var(--bk-white); border-color: var(--bk-gold); }
.bk-btn--gold:hover { background: var(--bk-gold-dark); border-color: var(--bk-gold-dark); }

.bk-btn--outline { background: transparent; color: var(--bk-white); border-color: var(--bk-white); }
.bk-btn--outline:hover { background: var(--bk-white); color: var(--bk-black); }

/* CTA-knop in het mobiele menu — standaard verborgen (desktop heeft de header-CTA). */
.bk-nav-cta { display: none; }

/* ==========================================================================
   Header / hoofdmenu
   ========================================================================== */
.site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    transition: background .28s ease, box-shadow .28s ease;
}
/* Donkere balk zodra je scrollt — bovenaan blijft de header transparant over de hero (zoals het ontwerp). */
.site-header.is-scrolled {
    background: rgba(10,10,10,.95);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
/* Het mobiele menu is een fixed overlay binnen de header. backdrop-filter op de header
   maakt er een containing block van, waardoor de overlay in de (smalle) balk gevangen
   raakt i.p.v. het scherm te vullen. Zet het filter uit zolang het menu open is — de
   overlay dekt de header toch volledig af, dus de blur is daar niet zichtbaar. */
body.nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* In de gescrolde balk vervalt de losse zwarte achtergrond van de menu-pill (en hamburger),
   zodat de hele balk één kleur is i.p.v. een afstekend zwart blok rond de menu-items. */
.site-header.is-scrolled .main-navigation .nav-pill,
.site-header.is-scrolled .menu-toggle { background: transparent; }
.site-header .site-branding img,
.site-header .custom-logo { transition: height .28s ease; }
/* Compactere balk wanneer gescrolld (alleen desktop/tablet; mobiel is al klein). */
@media (min-width: 601px) {
    .site-header.is-scrolled .site-header__inner { padding-block: 10px; }
    .site-header.is-scrolled .site-branding img,
    .site-header.is-scrolled .custom-logo { height: 60px; }
}
/* Pagina's zonder hero: meteen een donkere balk + inhoud schuift onder de vaste header vandaan. */
body:not(.has-hero) .site-header { background: var(--bk-black); }
body:not(.has-hero) .site-content { padding-top: 128px; }
.site-header .site-header__inner {
    max-width: var(--bk-container-wide);   /* header = 1590px (±165px marge) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-block: 18px;
}

.site-branding { flex: 0 0 auto; }
.site-branding img,
.custom-logo { height: 92px; width: auto; max-width: none; }
.site-branding .site-title {
    font-family: var(--bk-font-heading);
    font-size: 28px;
    margin: 0;
}

/* Navigatie — zwarte balk, exact gecentreerd in de volledige headerbreedte */
.main-navigation {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
}
.main-navigation .nav-pill {
    display: flex;
    align-items: center;
    background: var(--bk-black);
    border-radius: var(--bk-radius);   /* 5px — rechthoek, geen pill (zoals ontwerp) */
    height: 50px;
    padding: 0 34px;
}
.main-navigation ul.menu {
    display: flex;
    align-items: center;
    gap: 32px;
}
.main-navigation .menu > li { position: relative; }
.main-navigation .menu a {
    color: var(--bk-white);
    font-size: var(--bk-fs-nav);
    line-height: 1;
    padding: 6px 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.main-navigation .menu a:hover { color: var(--bk-gold); text-decoration: none; }
.main-navigation .menu .menu-item-has-children > a::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

/* Sub-menu (dropdown onder "Meer") */
.main-navigation .sub-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: var(--bk-black);
    border-radius: var(--bk-radius);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease;
}
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.main-navigation .sub-menu a { display: block; padding: 8px 22px; }
/* Onzichtbare "brug" over het 14px-gaatje tussen "Meer" en het submenu, zodat de
   dropdown niet dichtvalt terwijl je muis er naartoe beweegt (alleen desktop-hover). */
@media ( min-width: 1401px ) {
    .main-navigation .sub-menu::before {
        content: "";
        position: absolute;
        left: 0; right: 0;
        top: -24px;
        height: 24px;
    }
}

.header-actions { flex: 0 0 auto; }

/* Hamburger (mobiel) */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: var(--bk-black);
    border: 0;
    border-radius: var(--bk-radius);
    padding: 12px;
    cursor: pointer;
}
.menu-toggle span {
    display: block;
    width: 24px; height: 2px;
    background: var(--bk-white);
}

/* ==========================================================================
   Pre-footer CTA: "Plan je bezoek of kom langs"
   ========================================================================== */
.prefooter {
    padding-block: var(--bk-section-y);
}
/* Pre-footer iets breder: 50px extra aan beide kanten t.o.v. de standaardcontainer. */
.prefooter .bk-container {
    max-width: calc(var(--bk-container) + 100px);
}
.prefooter__top {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 48px;
}
.prefooter__title {
    font-size: clamp(30px, 20px + 1.6vw, 50px);   /* Figma 50px op desktop; mobiel kleiner */
    margin-bottom: 18px;
}
.prefooter__intro { color: var(--bk-text-muted); max-width: 60ch; }
.prefooter__usps {
    display: grid;
    gap: 20px;
    margin-bottom: 30px;
    margin-top: 30px;
}
.prefooter__usp { display: flex; align-items: center; gap: 14px; }
.prefooter__usp .check {
    flex: 0 0 auto;
    width: 23px; height: 23px;
    border-radius: 50%;
    background: var(--bk-gold);
    display: inline-flex; align-items: center; justify-content: center;
}
.prefooter__usp .check svg { width: 11px; height: 11px; }
.prefooter__usp span { font-family: var(--bk-font-heading); font-weight: 600; font-size: 20px; }
.prefooter__buttons { display: flex; flex-wrap: nowrap; gap: 16px; }
/* outline-knopkleuren staan in blocks.css (.prefooter is altijd donker → witte outline);
   hier geen lichte variant meer die daarmee conflicteert. */

.prefooter__media { position: relative; border-radius: var(--bk-radius); overflow: hidden; }
.prefooter__media img { width: 100%; height: auto; object-fit: cover; }
.prefooter__location {
    position: absolute;
    top: 0; left: 0;
    background: var(--bk-gold);
    color: var(--bk-white);
    font-family: var(--bk-font-heading);
    font-weight: 700;
    font-size: clamp(15px, 9px + 1.1vw, 25px);                 /* mobiel kleiner, desktop 25px (Figma) */
    padding: clamp(8px, 4px + 0.7vw, 14px) clamp(14px, 7px + 1.4vw, 28px);
    display: inline-flex; align-items: center; gap: clamp(6px, 4px + 0.4vw, 10px);
}
.prefooter__location svg { width: auto; height: clamp(15px, 9px + 1vw, 22px); flex: 0 0 auto; fill: currentColor; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background: var(--bk-footer-bg);
    color: var(--bk-footer-text);
    border-radius: var(--bk-radius);
    font-size: 16px;   /* Figma: footertekst 16px */
}
.site-footer__cols {
    display: grid;
    grid-template-columns: 1.3fr 1.2fr 1fr 1fr;
    gap: 40px;
    padding-block: 64px 40px;
}
.footer-col__title {
    margin-bottom: 22px;
}
.footer-col ul { display: grid; gap: 0; }
.footer-col ul a,
.footer-hours dt,
.footer-hours dd { line-height: 34px; }   /* Figma: lijstregels lh 34px */
.footer-col a:hover { color: var(--bk-gold); text-decoration: none; }

.footer-contact__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.footer-contact__item svg { width: auto; height: 18px; flex: 0 0 auto; margin-top: 3px; fill: currentColor; }

.footer-hours {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0px 24px;
}
.footer-hours dt { margin: 0; }
.footer-hours dd { margin: 0; }

.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
    width: 31px; height: 31px;
    display: inline-flex; align-items: center; justify-content: center;
}
.footer-social svg { width: 31px; height: 31px; fill: currentColor; }

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.2);
    padding-block: 14px 18px;
    font-size: 14px;
}

.site-colophon p { margin: 0; line-height: 1.5; }
.site-colophon__by a { color: inherit; text-decoration: none; }
.site-colophon__by a:hover { text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .prefooter__top { grid-template-columns: 1fr; gap: 0px; }
    .prefooter .bk-container { max-width: var(--bk-container); }   /* geen extra breedte op tablet/mobiel */
    .prefooter__buttons { flex-wrap: wrap; }                       /* knoppen mogen wrappen */
    .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Breekpunt 1400px: de gecentreerde nav-pill wordt in de vólle headerbreedte
   gecentreerd; onder ~1400px is er te weinig ruimte naast de CTA-knop (die dan
   onder de pill schuift). Daarom schakelt de hamburger al bij 1400px in. */
@media (max-width: 1400px) {
    .menu-toggle { display: flex; position: relative; z-index: 160; margin-left: auto; }
    .site-branding { position: relative; z-index: 160; }
    .header-actions { display: none; }   /* CTA-knop niet in de header op tablet/mobiel; hamburger staat rechts */

    /* Fullscreen mobiel menu: zwart paneel dat van boven naar onder opengroeit
       (clip-path), zoals op de Brock-site. Kleur = var(--bk-black), gelijk aan het menu. */
    .main-navigation {
        position: fixed;
        inset: 0;
        transform: none;
        height: auto;
        display: flex;                    /* altijd in de DOM zodat de animatie kan lopen */
        justify-content: center;
        z-index: 150;
        background: var(--bk-black);
        padding: 100px 24px 48px;
        overflow-y: auto;
        clip-path: inset(0 0 100% 0);     /* dicht: 0 hoogte bovenaan */
        visibility: hidden;
        pointer-events: none;
        transition: clip-path .34s cubic-bezier(.22,1,.36,1), visibility 0s linear .34s;
    }
    .main-navigation.is-open {
        clip-path: inset(0 0 0 0);        /* open: groeit naar volledige hoogte */
        visibility: visible;
        pointer-events: auto;
        transition: clip-path .34s cubic-bezier(.22,1,.36,1);
    }
    @media (prefers-reduced-motion: reduce) {
        .main-navigation,
        .main-navigation.is-open { transition: visibility 0s; }
    }
    .main-navigation .nav-pill {
        flex-direction: column;
        align-items: stretch;
        background: none;
        border-radius: 0;
        height: auto;
        padding: 0;
        width: 100%;
        max-width: 520px;
    }
    .main-navigation ul.menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .main-navigation .menu > li { width: 100%; }
    .main-navigation .menu a {
        font-family: var(--bk-font-heading);
        font-size: 26px;
        min-width: 100%;
        padding: 18px 2px;
        border-bottom: 1px solid rgba(255,255,255,.14);
        justify-content: space-between;
    }
    .main-navigation .sub-menu {
        position: static;
        transform: none;
        opacity: 1; visibility: visible;
        display: none;                       /* standaard dicht; opent bij klik */
        background: none;
        min-width: 0;
        padding: 0 0 8px 18px;
    }
    .main-navigation .menu-item-has-children.is-expanded > .sub-menu { display: block; }
    /* Voorkom dat de desktop-translateX(-50%) het submenu op mobiel buiten beeld schuift. */
    .main-navigation .menu-item-has-children:hover > .sub-menu,
    .main-navigation .menu-item-has-children:focus-within > .sub-menu { transform: none; left: auto; }
    .main-navigation .sub-menu a { font-size: 19px; padding: 12px 2px; border-bottom: 0; color: var(--bk-white); opacity: 1; }

    /* CTA-knop onderaan het mobiele menu */
    .bk-nav-cta { display: inline-flex; width: 100%; max-width: 520px; margin-top: 28px; }
    .main-navigation .menu-item-has-children > a::after { margin-left: auto; transition: transform .2s ease; }
    .main-navigation .menu-item-has-children.is-expanded > a::after { transform: translateY(1px) rotate(-135deg); }

    /* Hamburger -> kruis wanneer geopend */
    .menu-toggle span { transition: transform .25s ease, opacity .2s ease; }
    .menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.is-active span:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    body.nav-open { overflow: hidden; }
}

/* Overlay-menu op tablet/laptop (601–1400px): een nette, gecentreerde
   fullscreen-menu i.p.v. een smalle kolom links-van-midden. Items met
   gecentreerde tekst en breedte = inhoud (geen doorlopende strepen). */
@media (min-width: 601px) and (max-width: 1400px) {
    .main-navigation.is-open { align-items: center; }          /* verticaal centreren */
    .main-navigation .nav-pill { max-width: none; text-align: center; align-items: center; }
    .main-navigation ul.menu { align-items: center; gap: 6px; }
    .main-navigation .menu > li { width: auto; }               /* breedte = inhoud */
    .main-navigation .menu a {
        justify-content: center;
        border-bottom: 0;                                      /* geen volle-breedte streep */
        font-size: 34px;
        padding: 10px 10px;
    }
    .main-navigation .menu-item-has-children > a::after { margin-left: 12px; }
    .main-navigation .sub-menu { padding: 2px 0 12px; text-align: center; }
    .main-navigation .sub-menu a { font-size: 22px; padding: 8px 2px; }
    .bk-nav-cta { width: auto; min-width: 320px; margin-top: 36px; }
}

@media (max-width: 600px) {
    /* Kopgroottes worden nu vloeiend geregeld via clamp() in :root — geen harde
       mobiele override meer nodig. */
    /* Footer mobiel: contact + openingstijden vol breed, diensten + over naast elkaar */
    .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
    .footer-contact,
    .footer-hours-col { grid-column: 1 / -1; }
    .header-actions .bk-btn { display: none; }
    .site-branding img,
    .custom-logo { height: 56px; }                 /* kleiner logo op mobiel */
    .site-header .site-header__inner { padding-block: 12px; }
    body:not(.has-hero) .site-content { padding-top: 80px; }   /* vaste header is mobiel lager */
    .prefooter__buttons { width: 100%; }
    .prefooter__buttons .bk-btn { flex: 1 1 100%; justify-content: center; }  /* knoppen onder elkaar, volle breedte */
}