/* =========================================================
   SAFE MOBILE FIX v6 (WPConvert - Melodie op Maat)
   - Geen menu-items automatisch verbergen
   - Branded off-canvas
   - Fix voor gekropte tekst
   - Fix voor wazige/blur header in menu
   - Alleen mobile scope
========================================================= */

@media (max-width: 767px) {

  :root{
    --wpconvert-mobile-header-height: 64px;
    --wpconvert-brand-purple: #2b0f5b;
    --wpconvert-brand-purple-dark: #1f0a45;
    --wpconvert-brand-gold: #d6b24c;
  }

  /* 0) Extra safety: eerste item nooit verbergen */
  #wpconvert-mobile-nav .mobile-menu > li:first-child,
  #wpconvert-mobile-nav ul > li:first-child {
    display: block !important;
  }

  /* 1) Off-canvas positionering onder fixed header */
  #wpconvert-mobile-nav{
    top: var(--wpconvert-mobile-header-height) !important;
    bottom: auto !important;
    height: calc(100dvh - var(--wpconvert-mobile-header-height)) !important;

    width: 85vw !important;
    max-width: 340px !important;

    background: var(--wpconvert-brand-purple) !important;
    color: #fff !important;

    border-left: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: -10px 0 28px rgba(0,0,0,0.22) !important;

    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;

    /* voorkomt “wazig/blur” effect door oudere rules */
    filter: none !important;
    backdrop-filter: none !important;
  }

  /* 2) Backdrop netjes (geen rare grijze slab) */
  #wpconvert-mobile-nav-backdrop{
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    backdrop-filter: none !important;
  }

  /* 3) Binnenruimte */
  #wpconvert-mobile-nav .nav-inner{
    padding: 1.25rem 1.25rem 2rem !important;
  }

  /* 4) Als jouw header.php de mobile menu header row gebruikt */
  .wpconvert-mobile-menu-header{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;

    padding-bottom: 0.9rem !important;
    margin-bottom: 0.9rem !important;

    border-bottom: 1px solid rgba(255,255,255,0.12) !important;

    background: transparent !important;
    filter: none !important;
    backdrop-filter: none !important;
  }

  /* Close knop (nieuwe + oudere class) */
  .wpconvert-mobile-close,
  #wpconvert-mobile-nav .close-btn{
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    padding: 0.25rem !important;
    line-height: 1 !important;
  }

  /* Logo in menu header netjes schalen */
  .wpconvert-mobile-logo img{
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
  }

  .wpconvert-mobile-logo-text{
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }
  .wpconvert-mobile-logo-text span{
    color: var(--wpconvert-brand-gold) !important;
  }

  /* 5) Forceer mobile menu UL verticaal
        (niet laten beïnvloeden door desktop UL regels) */
  #wpconvert-mobile-nav ul,
  #wpconvert-mobile-nav .mobile-menu,
  #wpconvert-mobile-nav ul#wpconvert-primary-ul,
  #wpconvert-mobile-nav #wpconvert-primary-ul{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #wpconvert-mobile-nav li,
  #wpconvert-mobile-nav .mobile-menu > li,
  #wpconvert-mobile-nav #wpconvert-primary-ul > li{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  }

  #wpconvert-mobile-nav li:last-child{
    border-bottom: none !important;
  }

  /* 6) Link stijl: grotere leesbaarheid + meer lucht */
  #wpconvert-mobile-nav a{
    display: block !important;
    width: 100% !important;

    color: #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;

    font-size: 15px !important;
    line-height: 1.25 !important;

    padding: 1.05rem 0.25rem !important;
  }

  #wpconvert-mobile-nav a:hover,
  #wpconvert-mobile-nav a:active{
    background: rgba(255,255,255,0.06) !important;
  }

  /* 7) Bestellen CTA stijl (als menu-item aanwezig) */
  #wpconvert-mobile-nav a[href*="/bestellen"]{
    background: var(--wpconvert-brand-gold) !important;
    color: var(--wpconvert-brand-purple-dark) !important;

    border-radius: 999px !important;
    padding: 0.95rem 1.2rem !important;

    margin-top: 1rem !important;

    text-align: center !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;

    box-shadow: 0 10px 22px rgba(214,178,76,0.22) !important;
  }

  /* 8) Optioneel: als je het logo in het menu NIET wil tonen
        (laat uit als je het juist wel wil)
  */
  /*
  .wpconvert-mobile-menu-header{
    display: none !important;
  }
  */

}

/* CTA alleen zichtbaar in mobile menu, niet op desktop */
@media (min-width: 768px) {
  li.cta-mobile-only {
    display: none !important;
  }
}

/* =========================================================
   MOBILE HEADER + MENU FINISH (inspired by example)
   - Hamburger links
   - Logo gecentreerd
   - Grijze vlak rechts weg
   - Voorkomt "dubbele branding" gevoel
========================================================= */

@media (max-width: 767px) {

  /* ---------------------------------------
     1) MOBILE HEADER LAYOUT
     Hamburger links + logo gecentreerd
  ---------------------------------------- */

  /* Maak de nav container een ‘anchor’ voor absolute centering */
  header > nav .container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 64px !important;
  }

  /* Logo is in jouw header.php de eerste <a> in de container */
  header > nav .container > a:first-child {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  /* Hamburger altijd links houden */
  #wpconvert-hamburger {
    order: -1 !important;
    margin-left: 0 !important;
    z-index: 3 !important;
  }

  /* Iets compacter logo-icoon in de header */
  header > nav .container > a:first-child .w-10,
  header > nav .container > a:first-child .h-10 {
    width: 36px !important;
    height: 36px !important;
  }

  /* ---------------------------------------
     2) MOBILE MENU PANEL: GEEN GRIJS VLAK
     Maak het paneel full-width op mobiel
  ---------------------------------------- */

  #wpconvert-mobile-nav {
    width: 100vw !important;
    max-width: 100vw !important;

    /* behoud jouw huisstijl */
    background: #2b0f5b !important;
    color: #ffffff !important;

    /* nette randen weg bij full width */
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important;
  }

  /* Slide-right maar nu over volledige breedte */
  #wpconvert-mobile-nav.slide-right {
    left: 0 !important;
    right: 0 !important;
    border-left: 0 !important;
    transform: translateX(100%);
  }
  #wpconvert-mobile-nav.open.slide-right {
    transform: translateX(0) !important;
  }

  /* Overlay moet ook echt ‘overlay’ zijn */
  #wpconvert-mobile-nav-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 99998 !important;
  }
  body.mobile-nav-open #wpconvert-mobile-nav-backdrop {
    display: block !important;
  }

  /* ---------------------------------------
     3) MENU HEADER BINNEN PANEEL
     Voorkom "logo 2x" gevoel:
     we tonen geen extra logo in het paneel
  ---------------------------------------- */

  .wpconvert-mobile-menu-header .wpconvert-mobile-logo,
  .wpconvert-mobile-menu-header .custom-logo-link {
    display: none !important;
  }

  /* Close knop netjes */
  .wpconvert-mobile-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 0.25rem 0 1rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .wpconvert-mobile-close {
    background: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
    padding: 0 !important;
  }

  /* Door het logo in paneel-header te verbergen:
     minder top padding nodig */
  #wpconvert-mobile-nav .nav-inner {
    padding: 1.25rem !important;
    padding-top: 1rem !important;
  }

  /* ---------------------------------------
     4) MENU LIJST SPACING + TYPO
  ---------------------------------------- */

  #wpconvert-mobile-nav ul,
  #wpconvert-mobile-nav ul#wpconvert-primary-ul,
  #wpconvert-mobile-nav #wpconvert-primary-ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #wpconvert-mobile-nav li,
  #wpconvert-mobile-nav #wpconvert-primary-ul > li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  }

  #wpconvert-mobile-nav a {
    display: block !important;
    width: 100% !important;

    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;

    font-size: 16px !important;
    padding: 1.1rem 0.25rem !important;
  }

  #wpconvert-mobile-nav a:hover,
  #wpconvert-mobile-nav a:active {
    background: rgba(255,255,255,0.06) !important;
  }

  /* CTA in menu (Bestellen) */
  #wpconvert-mobile-nav a[href*="/bestellen"] {
    background: #d6b24c !important;
    color: #2b0f5b !important;

    border-radius: 999px !important;
    padding: 1rem 1.25rem !important;
    margin-top: 1.25rem !important;

    text-align: center !important;
    font-weight: 800 !important;

    box-shadow: 0 10px 22px rgba(214,178,76,0.25) !important;
    border-bottom: 0 !important;
  }
}

/* =========================================================
   GOLD DIVIDER UNDER HEADER (v2 - only bottom)
   - Alleen 1 gouden lijn ONDER de header
   - Forceert GEEN lijnen op child elements
========================================================= */

:root {
  --brand-gold: #d6b24c; /* pas aan als je footer-goud anders is */
}

/* Alleen de header zelf krijgt een bottom border */
header.fixed,
header.site-header,
header {
  border-bottom: 4px solid var(--brand-gold) !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Zorg dat interne header-onderdelen geen extra lijnen toevoegen */
header > div,
header > nav {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Optioneel: iets dunner op mobiel */
@media (max-width: 767px) {
  header.fixed,
  header.site-header,
  header {
    border-bottom-width: 4px !important;
  }
}

/* =========================================================
   HEADER OFFSET v3 (COLOR SHIM)
   - Lost witte strook op door een paarse "shim" te maken
   - Werkt ook als eerste block een witte/lege wrapper is
   - Veilig voor WPConvert / Gutenberg layouts
========================================================= */

:root{
  --mom-header-offset-mobile: 64px;
  --mom-header-offset-desktop: 88px;

  /* Jouw huisstijl paars (pas aan als je exact andere hex gebruikt) */
  --mom-brand-purple: #2b0f5b;
}

/* Reset eerdere padding-trucs op main */
main.site-main,
.site-main,
main#main,
#main {
  padding-top: 0 !important;
  position: relative;
}

/* Maak een gekleurde spacer die de content omlaag duwt */
main.site-main::before,
.site-main::before,
main#main::before,
#main::before {
  content: "";
  display: block;
  height: var(--mom-header-offset-mobile);
  background: var(--mom-brand-purple);
  width: 100%;
}

/* Desktop hoogte */
@media (min-width: 768px) {
  main.site-main::before,
  .site-main::before,
  main#main::before,
  #main::before {
    height: var(--mom-header-offset-desktop);
  }
}

/* =========================================================
   FIX: laatste witte strook onder header weg
   - voorkomt "wit lekken" door body background
   - synchroniseert header + main + shim kleur
   - haalt mini top gaps van eerste block weg
========================================================= */

:root{
  --mom-brand-purple: #2b0f5b; /* pas aan als je exact andere paars gebruikt */
}

/* 1) voorkom dat wit ooit zichtbaar wordt in header-gaps */
html, body{
  background: var(--mom-brand-purple) !important;
}

/* 2) force header/main dezelfde basis-kleur */
header,
header.fixed,
header .bg-brand-purpleDark,
header nav{
  background: var(--mom-brand-purple) !important;
}

/* 3) jouw kleur-shim (als je die al gebruikt) extra hard vastzetten */
main.site-main::before,
.site-main::before,
main#main::before,
#main::before{
  background: var(--mom-brand-purple) !important;
}

/* 4) mini gaps door Gutenberg/WPConvert bovenaan weg */
.site-main > *:first-child{
  margin-top: 0 !important;
}

/* Soms zit het in een eerste Group block */
.site-main > .wp-block-group:first-child,
.site-main > section:first-child{
  margin-top: 0 !important;
}

/* =========================================================
   HEADER GOLD LINE (elegant)
   - Maakt de scheidingslijn onderdeel van de header zelf
   - Voorkomt kleur-lek op witte pagina’s
   - Haalt eventuele oude "filler" weg
========================================================= */

:root{
  --mom-gold: #d6b24c;
  --mom-header-line: 4px; /* pas aan naar 3px/5px als je wil */
}

/* 1) Zet de lijn uitsluitend onder de MAIN NAV in de header */
header.fixed > nav{
  border-bottom: var(--mom-header-line) solid var(--mom-gold) !important;
}

/* 2) Zorg dat er niet óók nog ergens anders een lijn staat */
header.fixed{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* 3) Schakel oude "gap filler" pseudo-elementen uit (als je die eerder had) */
main.site-main::before,
.site-main::before,
main#main::before,
#main::before{
  content: none !important;
  display: none !important;
  height: 0 !important;
}

/* =========================================================
   SUBTLE PAGE TOP BREATHING ROOM (DESKTOP)
   - Extra ademruimte onder de header
   - Zonder een losse witte/paarsige strook
   - Alleen desktop, want mobiel is al goed
========================================================= */

@media (min-width: 768px) {

  /* Zorg dat we geen oude "main padding" fixes stapelen */
  .site-main {
    padding-top: 0 !important;
  }

  /*
    Geef alleen het EERSTE content element een beetje "inner space".
    Padding is hier veiliger dan margin, omdat het minder snel een
    losgekoppelde kleurstrook veroorzaakt.
  */
  body:not(.home) .site-main .wp-block-post-content > :first-child,
  body:not(.home) .site-main .entry-content > :first-child,
  body:not(.home) .site-main > :first-child {
    margin-top: 0 !important;
    padding-top: clamp(14px, 1.6vw, 26px) !important;
  }

  /* Bonus: anker/scroll offsets netjes met fixed header */
  body:not(.home) h1,
  body:not(.home) h2,
  body:not(.home) h3 {
    scroll-margin-top: 120px;
  }
}

/* =========================================================
   MOBILE RESET for "page breathing room" desktop fix
   - Houdt desktop netjes
   - Zet extra top spacing uit op mobiel
========================================================= */

@media (max-width: 767px) {

  body:not(.home) .site-main .wp-block-post-content > :first-child,
  body:not(.home) .site-main .entry-content > :first-child,
  body:not(.home) .site-main > :first-child {
    padding-top: 8px !important; /* klein maar netjes */
    margin-top: 0 !important;
  }
}

/* =========================================================
   MOBILE HOTFIX – houdt desktop fix intact
   - Lost mobile "te strak/afkappen onder header" op
   - Zonder witte extra strook te forceren
   - Override van mogelijke desktop padding/margin regels
========================================================= */

@media (max-width: 767px) {

  /* 1) Als er per ongeluk padding op .site-main is gezet door desktop-fix */
  main.site-main,
  .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 2) Geef ademruimte IN de eerste content container
        zodat de achtergrond van die sectie blijft doorlopen
        (dus geen witte strook) */
  body:not(.home) .site-main > *:first-child {
    margin-top: 0 !important;
    padding-top: 18px !important;
  }

  /* 3) Extra zekerheid voor veelvoorkomende WP containers */
  body:not(.home) .site-main .entry-content > *:first-child,
  body:not(.home) .site-main .wp-block-post-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 28px !important;
  }
}

/* =========================================
   MOBILE PAGE CLEARANCE FIX (Melodie op Maat)
   Doel:
   - Zorgt dat content op mobiel niet onder de fixed header valt
   - Voorkomt dat bovenste titels/tekst wegvallen
   - Zo klein mogelijk, zonder desktop te beïnvloeden
========================================= */

@media (max-width: 767px) {

  /* 1) Één centrale hoogte voor jouw mobiele header.
        Dit is de hoogte van de paarse main header + gouden lijn.
        Pas dit getal aan als je nét iets meer/minder ruimte wil. */
  :root {
    --mom-mobile-header-clearance: 14px;
  }

  /* 2) Geef de main content exact genoeg topruimte op mobiel */
  body:not(.wp-admin) main.site-main,
  body:not(.wp-admin) main {
    padding-top: var(--mom-mobile-header-clearance) !important;
  }

  /* 3) Extra zekerheid voor anker-links / scroll naar secties */
  .site-main h1[id],
  .site-main h2[id],
  .site-main h3[id],
  .site-main h4[id] {
    scroll-margin-top: calc(var(--mom-mobile-header-clearance) + 12px);
  }
}

/* === MelodieopMaat styling voor WooCommerce checkout === */

.page-checkout {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Achtergrond van de hele pagina wat lichter maken */
body.page-template-page-checkout {
  background-color: #f9fafb;
}

/* Basis styling wrapper */
.page-checkout .woocommerce-checkout-wrapper .woocommerce {
  /* Woo voegt zelf .woocommerce toe rond het formulier */
}

.page-checkout .woocommerce form.checkout {
  background-color: #ffffff;
  border-radius: 1.5rem;
  box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
}

/* Labels & teksten */
.page-checkout .woocommerce form .form-row label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #4b5563; /* grijs */
  margin-bottom: 4px;
}

/* Inputs, selects, textarea */
.page-checkout .woocommerce input.input-text,
.page-checkout .woocommerce textarea,
.page-checkout .woocommerce select {
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
  padding: 0.8rem 0.9rem;
  font-size: 0.95rem;
  color: #111827;
  background-color: #f9fafb;
  box-shadow: none;
}

.page-checkout .woocommerce input.input-text:focus,
.page-checkout .woocommerce textarea:focus,
.page-checkout .woocommerce select:focus {
  outline: none;
  border-color: #f4c84a;            /* brand gold */
  box-shadow: 0 0 0 2px rgba(244, 200, 74, 0.35);
  background-color: #ffffff;
}

/* Order summary rechts */
.page-checkout .woocommerce-checkout-review-order-table {
  font-size: 0.9rem;
}

.page-checkout .woocommerce-checkout-review-order-table th,
.page-checkout .woocommerce-checkout-review-order-table td {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* Titel "Order summary" etc. wat meer opmaken */
.page-checkout .woocommerce h3,
.page-checkout .woocommerce h2 {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  color: #3b225f; /* brand purple dark-ish */
}

/* Primary button: Afrekenen (Mollie) */
.page-checkout .woocommerce #place_order {
  background-color: #f4c84a;      /* brand gold */
  color: #2b0f57;                 /* donkerpaars voor tekst */
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 9999px;
  border: none;
  padding: 0.9rem 2.6rem;
  text-transform: none;
  letter-spacing: 0.02em;
  box-shadow: 0 15px 30px rgba(244, 200, 74, 0.5);
  transition: all 0.2s ease;
}

.page-checkout .woocommerce #place_order:hover {
  background-color: #ffffff;
  color: #3b225f;
  box-shadow: 0 20px 35px rgba(244, 200, 74, 0.4);
  transform: translateY(-1px);
}

.page-checkout .woocommerce #place_order:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Coupon link etc. leesbaar maken */
.page-checkout .woocommerce a {
  color: #6d28d9; /* paars */
}

.page-checkout .woocommerce a:hover {
  color: #4c1d95;
}

/* Foutmeldingen en notices */
.page-checkout .woocommerce-error,
.page-checkout .woocommerce-info,
.page-checkout .woocommerce-message {
  border-radius: 0.75rem;
  border: none;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
}

.page-checkout .woocommerce-error {
  background-color: #fef2f2;
  color: #b91c1c;
}

.page-checkout .woocommerce-info {
  background-color: #eff6ff;
  color: #1d4ed8;
}

.page-checkout .woocommerce-message {
  background-color: #ecfdf3;
  color: #15803d;
}

/* Payment methods lijst iets netter */
.page-checkout .woocommerce .wc_payment_methods {
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  padding: 0.75rem 1rem;
  background: #f9fafb;
}

.page-checkout .woocommerce .wc_payment_methods li {
  padding: 0.4rem 0;
}

/* Verberg Woo titles die dubbel zijn met je eigen hero, indien nodig */
/* .page-checkout .woocommerce > h1,
.page-checkout .woocommerce > h2 {
  display: none;
} */