/*
Theme Name: Goorse Wintermarkt
Theme URI: https://www.goorsewintermarkt.nl
Template: sellabees-sites-core
Author: TechDog
Author URI: https://techdog.nl
Description: Maatwerk child-thema voor de Goorse Wintermarkt bovenop Sellabees Sites Core. Classic theme met ACF Pro Flexible Content als veilige pagina-builder; vervangt de Elementor-pagebuilder. Huisstijl: terracotta (Comfortaa/Mulish/Montserrat).
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: goor
*/

/* ==========================================================================
   Design tokens (huisstijl uit Figma — PK-Markt landingspagina)
   Exacte Figma-waarden; pas hier centraal de huisstijl aan.
   ========================================================================== */
:root {
    /* Kleuren (exacte Figma-waarden) */
    --goor-terra: #a27457;          /* primair: knop, FAQ-band, koppen */
    --goor-terra-dark: #8b533b;     /* knop-rand / footer / hover */
    --goor-brown-text: #7f6650;     /* body-tekst in terracotta-context */
    --goor-black: #000000;
    --goor-white: #ffffff;
    --goor-bg: #ffffff;
    --goor-text: #1f1a16;           /* algemene donkere tekst */
    --goor-text-muted: #7f6650;
    --goor-overlay: rgba(104,104,104,0.65);   /* hero-foto overlay (Figma) */

    --goor-footer-bg: #8b533b;      /* donker terracotta i.p.v. Figma-placeholder #ccc (site-breed terracotta) */
    --goor-footer-text: #ffffff;

    /* Typografie (exacte Figma-fonts) */
    --goor-font-display: "Comfortaa", "Trebuchet MS", system-ui, sans-serif;  /* koppen + knoppen */
    --goor-font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --goor-font-nav: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; /* logo-wordmerk + nav */

    /* Lettergroottes (Figma-waarden; vloeiend opgeschaald waar zinvol) */
    --goor-fs-body: 16px;           /* Figma 13.6px op 1920 → leesbaar genormaliseerd */
    --goor-lh-body: 1.7;
    --goor-fs-nav: 13px;            /* nav-links (Figma 12.8px) */
    --goor-ls-nav: 0.16em;          /* letter-spacing nav (Figma 2.56px) */
    --goor-fs-wordmark: 22px;       /* logo-wordmerk (Figma 24px) */
    --goor-ls-wordmark: 0.1em;      /* (Figma 2.4px) */
    --goor-fs-button: 15px;         /* knop AANMELDEN */

    /* Kop-schaal (Figma: secties 39px, hero 68px) */
    --goor-h1: 68px;    /* hero-hoofdtitel */
    --goor-h2: 39px;    /* sectietitels ("Meld je aan…", "Veelgestelde vragen") */
    --goor-h3: 28px;
    --goor-h4: 22px;
    --goor-fw-display: 400;   /* Comfortaa Regular voor koppen */

    /* Maatvoering (afgeleid van Figma-marges op 1920) */
    --goor-container: 1260px;       /* content: ~331px marge */
    --goor-container-wide: 1840px;  /* header / brede band: ~40px marge */
    --goor-pad: 24px;
    --goor-radius: 10px;            /* Figma: afgeronde hoeken 10px */
    --goor-radius-pill: 74px;       /* knop (Figma 74px) */
    --goor-section-y: 80px;
}

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

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

body {
    margin: 0;
    font-family: var(--goor-font-body);
    font-size: var(--goor-fs-body);
    font-weight: 400;
    line-height: var(--goor-lh-body);
    color: var(--goor-text);
    background: var(--goor-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--goor-font-display);
    font-weight: var(--goor-fw-display);
    line-height: 1.15;
    margin: 0 0 .5em;
    color: inherit;
}
h1 { font-size: var(--goor-h1); }
h2 { font-size: var(--goor-h2); }
h3 { font-size: var(--goor-h3); }
h4 { font-size: var(--goor-h4); }

p { margin: 0 0 1em; }

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

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

/* Voorkom horizontale overflow op mobiel */
html { overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }
input, textarea, select { max-width: 100%; }

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

.goor-container {
    width: 100%;
    max-width: var(--goor-container);
    margin-inline: auto;
    padding-inline: var(--goor-pad);
}
.goor-container--wide { max-width: var(--goor-container-wide); }

.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
   ========================================================================== */
.goor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-family: var(--goor-font-display);
    font-size: var(--goor-fs-button);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    padding: 18px 40px;
    white-space: nowrap;
    text-transform: uppercase;
    border-radius: var(--goor-radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.goor-btn:hover { text-decoration: none; transform: translateY(-1px); }

.goor-btn--terra {
    background: var(--goor-terra);
    color: var(--goor-white);
    border-color: var(--goor-terra-dark);
    box-shadow: 0 4px 4px rgba(0,0,0,.25);   /* Figma-schaduw */
}
.goor-btn--terra:hover { background: var(--goor-terra-dark); border-color: var(--goor-terra-dark); }

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

.goor-nav-cta { display: none; }

/* ==========================================================================
   Header / hoofdmenu (Figma: witte balk, logo + wordmerk links, nav rechts)
   ========================================================================== */
.site-header {
    position: relative;
    z-index: 100;
    width: 100%;
    background: var(--goor-white);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 16px;
}

/* Branding: logo-afbeelding + wordmerk */
.site-branding { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }
.site-branding img,
.custom-logo { height: 84px; width: auto; max-width: none; }
.site-branding .site-wordmark {
    font-family: var(--goor-font-nav);
    font-weight: 700;
    font-size: var(--goor-fs-wordmark);
    letter-spacing: var(--goor-ls-wordmark);
    text-transform: uppercase;
    color: var(--goor-black);
    line-height: 1.1;
    white-space: nowrap;
}

/* Navigatie rechts */
.main-navigation { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: center; }
.main-navigation .nav-inner { display: flex; align-items: center; gap: 28px; }
.main-navigation ul.menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px 28px;
    justify-content: flex-end;
}
.main-navigation .menu > li { position: relative; }
.main-navigation .menu a {
    font-family: var(--goor-font-nav);
    font-weight: 700;
    font-size: var(--goor-fs-nav);
    letter-spacing: var(--goor-ls-nav);
    text-transform: uppercase;
    color: var(--goor-black);
    line-height: 1;
    padding-bottom: 8px;
    border-bottom: 1.5px solid currentColor;   /* Figma: onderstreping onder elk item */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .18s ease;
}
.main-navigation .menu a:hover { color: var(--goor-terra); text-decoration: none; }
.main-navigation .menu .menu-item-has-children > a::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
}

/* Sub-menu (dropdown) */
.main-navigation .sub-menu {
    position: absolute;
    top: 100%;              /* sluit aan op het item: geen dode zone */
    margin-top: 14px;       /* visuele ruimte */
    left: 0;
    min-width: 220px;
    background: var(--goor-white);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--goor-radius);
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    padding: 8px 0;
    z-index: 20;
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}
/* Onzichtbare brug over de visuele ruimte zodat de hover niet wegvalt
   wanneer de muis van het hoofditem naar de subitems beweegt. */
.main-navigation .sub-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -16px;
    height: 16px;
}
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.main-navigation .sub-menu a { display: block; padding: 9px 20px; border-bottom: 0; }

/* Zoek-icoon */
.header-search { flex: 0 0 auto; display: inline-flex; }
.header-search a { display: inline-flex; padding: 6px; color: var(--goor-black); }
.header-search svg { width: 21px; height: 21px; }
.header-search a:hover { color: var(--goor-terra); }

/* Hamburger (mobiel) */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: var(--goor-terra);
    border: 0;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
}
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--goor-white); transition: transform .25s ease, opacity .2s ease; }

/* ==========================================================================
   Site content
   ========================================================================== */
.site-content { display: block; }

/* Tijdelijke container voor pagina's zonder ACF-blokken (klassieke content) */
.goor-page-content { padding-block: var(--goor-section-y); }
.goor-page-content h1 { font-size: var(--goor-h2); color: var(--goor-terra); margin-bottom: .4em; }

/* ==========================================================================
   Footer (Figma: nav-rij + colofon; site-breed terracotta)
   ========================================================================== */
.site-footer {
    background: var(--goor-footer-bg);
    color: var(--goor-footer-text);
    padding-block: 56px 28px;
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--goor-white); text-decoration: underline; }

.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 40px;
    margin-bottom: 40px;
}
.site-footer__nav li { list-style: none; display: inline-flex; }
.site-footer__nav a {
    font-family: var(--goor-font-nav);
    font-weight: 700;
    font-size: var(--goor-fs-nav);
    letter-spacing: var(--goor-ls-nav);
    text-transform: uppercase;
    line-height: 1;
}

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.22);
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.site-colophon { font-size: 13px; opacity: .8; }
.site-colophon p { margin: 0; line-height: 1.5; }
.site-colophon__by a { text-decoration: none; }
.site-colophon__by a:hover { text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .menu-toggle { display: flex; order: 3; }
    .header-search { order: 2; }
    .main-navigation {
        position: fixed;
        inset: 0;
        background: var(--goor-terra);
        color: var(--goor-white);
        display: none;
        z-index: 150;
        padding: 96px 24px 48px;
        overflow-y: auto;
        justify-content: center;
    }
    .main-navigation.is-open { display: flex; }
    .main-navigation .nav-inner { flex-direction: column; align-items: stretch; width: 100%; max-width: 520px; }
    .main-navigation ul.menu { flex-direction: column; align-items: stretch; gap: 0; }
    .main-navigation .menu > li { width: 100%; }
    .main-navigation .menu a {
        color: var(--goor-white);
        font-size: 18px;
        padding: 16px 2px;
        border-bottom: 1px solid rgba(255,255,255,.2);
        justify-content: space-between;
    }
    .main-navigation .sub-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        display: none; background: transparent; border: 0; box-shadow: none;
        padding: 0 0 8px 16px;
    }
    .main-navigation .menu-item-has-children.is-expanded > .sub-menu { display: block; }
    .main-navigation .sub-menu a { color: var(--goor-white); font-size: 16px; padding: 10px 2px; }
    .goor-nav-cta { display: inline-flex; width: 100%; margin-top: 24px; }

    .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; }
}

/* Tablet/telefoon: wordmerk verbergen zodat logo + zoek + hamburger altijd passen
   (anders duwt de lange tekst de hamburger van het scherm → overflow). */
@media (max-width: 820px) {
    .site-branding .site-wordmark { display: none; }
    .site-header__inner { gap: 12px; }
    .menu-toggle { margin-left: auto; }
}

@media (max-width: 680px) {
    :root { --goor-h1: 40px; --goor-h2: 28px; }
    .site-branding img, .custom-logo { height: 56px; }
    .site-footer__nav { gap: 14px 24px; }
    .goor-hero__title--split { font-size: clamp(34px, 9vw, 44px); }
    .goor-textimg__grid, .goor-contact__grid { gap: 28px; }
    .goor-buttons__row .goor-btn { flex: 1 1 100%; }
}