/*
Theme Name: Kredietverzekeringkosten Clean
Theme URI: https://www.kredietverzekeringkosten.nl/
Author: Delta Credit Management
Author URI: https://www.deltacm.nl/
Description: Snel block theme voor kredietverzekeringkosten.nl (Delta Credit Management).
Version: 2.3.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kredietverzekeringkosten-clean
Tags: full-site-editing, block-patterns, one-column, custom-colors
*/

/* Theme CSS is intentionally minimal. Most styling lives in theme.json. */

/* Smooth anchors without breaking reduced-motion users */
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}

/* =========================================================
   DCM — Header helpers
   ========================================================= */
.dcm-topbar { gap: 10px; }
.dcm-topbar-contacts p { margin: 0; }
.dcm-topbar-tagline { margin: 0; }
.dcm-header-sep { background: var(--wp--preset--color--slate-200, #e2e8f0); height: 1px; }

/* =========================================================
   DCM — Full-bleed helper (Optie 2)
   Gebruik: zet het blok op 'Volledige breedte' + class 'dcm-fullbleed'
   ========================================================= */
.wp-block-group.alignfull.dcm-fullbleed{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
.wp-block-group.alignfull.dcm-fullbleed > .wp-block-group__inner-container{
  max-width: var(--wp--style--global--content-size, 1200px);
  margin-inline: auto;
  padding-inline: var(--wp--style--root--padding-left, 16px);
}
html, body{ overflow-x: clip; }

/* =========================================================
   HKV — Mobile header + overlay menu (nette layout)
   ========================================================= */
@media (max-width: 599px){

  /* Verberg bovenbalk + scheidingslijn */
  .hkv-header .hkv-topbar,
  .hkv-header .wp-block-separator{
    display: none !important;
  }

  /* Header compacter */
  .hkv-header{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Onderste rij: logo/titel links, hamburger rechts */
  .hkv-header .hkv-mainbar{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  /* Logo + titel altijd naast elkaar */
  .hkv-header .hkv-mainbar > .wp-block-group{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    min-width: 0 !important; /* ellipsis */
    flex: 1 1 auto !important;
  }

  /* Titel: 1 regel */
  .hkv-header .wp-block-site-title{
    margin: 0 !important;
    line-height: 1.2 !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Hamburger knop altijd rechts */
  .hkv-header .hkv-mainbar .wp-block-navigation__responsive-container-open{
    margin-left: auto !important;
    align-self: center !important;
    flex: 0 0 auto !important;
  }

  /* =========================================================
     HKV — Overlay container
     ========================================================= */

  .hkv-header .wp-block-navigation__responsive-container.is-menu-open{
    background: var(--wp--preset--color--bg, #fff) !important;
    padding: 18px 0 24px !important; /* 0 voor full-width borders */
  }

  /* Close button rechtsboven */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    padding: 10px !important;
    border-radius: 999px !important;
  }

  /* Content full width */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-items: stretch !important;
    text-align: left !important;
  }

  /* Brandbar bovenaan (zonder lijn eronder) */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content::before{
    content: "KredietverzekeringKosten.nl";
    display: block;
    padding: 12px 56px 12px 18px; /* ruimte voor X rechts */
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 0 !important;
  }

  /* Menu lijst */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container{
    width: 100% !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Items full width + borders full width */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border-top: 1px solid var(--wp--preset--color--slate-200, #e2e8f0) !important;
  }

  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:last-child{
    border-bottom: 1px solid var(--wp--preset--color--slate-200, #e2e8f0) !important;
  }

  /* Links + button (submenutoggle) identiek stylen */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 18px 18px !important;
    font-weight: 650 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    margin: 0 !important;
  }

  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  button.wp-block-navigation-item__content{
    background: transparent !important;
    border: 0 !important;
    appearance: none !important;
    text-align: left !important;
  }

  /* =========================================================
     HKV — Submenu gedrag (dicht totdat je klikt)
     + chevron rechts, klik op hele rij
     ========================================================= */

  /* Parent context */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child{
    position: relative !important;
  }

  /* Toggle button = volledige rij + ruimte voor chevron */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  button.wp-block-navigation-submenu__toggle{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 64px 18px 18px !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
  }

  /* WP’s submenu icon rechts (SVG) */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-icon{
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;

    /* Geen “grijze hover bubble” */
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;

    /* Klik gaat naar de button eronder (hele rij togglet) */
    pointer-events: none !important;
  }

  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-icon svg{
    width: 18px !important;
    height: 18px !important;
    transition: transform .2s ease !important;
  }

  /* Draai pijl bij open */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  button.wp-block-navigation-submenu__toggle[aria-expanded="true"]
  + .wp-block-navigation__submenu-icon svg{
    transform: rotate(180deg) !important;
  }

  /* Submenu’s: standaard dicht */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container{
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    border: 0 !important;
  }

  /* Submenu open wanneer aria-expanded true is */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  button.wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ~ .wp-block-navigation__submenu-container{
    display: block !important;
  }

  /* Submenu items compacter + lichte achtergrond */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item{
    background: rgba(0,0,0,.02) !important;
    border-top: 1px solid var(--wp--preset--color--slate-200, #e2e8f0) !important;
  }

  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    padding: 14px 18px 14px 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* Optioneel: subtiele hover op de HELE rij i.p.v. rond chevron */
  @media (hover: hover){
    .hkv-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child > button.wp-block-navigation-submenu__toggle:hover{
      background: rgba(0,0,0,.02) !important;
    }
  }
}

/* =========================================================
   HKV — extra strak onder 389px: titel ellipsis in header
   ========================================================= */
@media (max-width: 389px){
  .hkv-header .wp-block-site-title{
    font-size: 15px !important;
  }
}



/* =========================================================
   HKV — FIX: chevron blijft op de 1e rij bij open submenu
   (voorkomt dat 50% van LI de chevron omlaag trekt)
   ========================================================= */
@media (max-width: 600px){

  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child{
    position: relative !important;
  }

  /* Chevron NIET meer vertical-centeren op het LI,
     maar vast op de button-rij houden */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon{
    top: 6px !important;             /* afgestemd op padding 18px + font-size 18px */
    transform: none !important;      /* kill translateY(-50%) */
    right: 12px !important;
  }
}





/* =========================================================
   HKV — FIX: geen horizontale scroll (mobile / overlay menu)
   ========================================================= */

/* iOS/Safari: clip is niet altijd genoeg */
html, body{
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Overlay menu mag nooit breder worden dan viewport */
@media (max-width: 600px){

  .hkv-header .wp-block-navigation__responsive-container.is-menu-open{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Alles binnen overlay: box-model “veilig” (padding telt mee) */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open *,
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open *::before,
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open *::after{
    box-sizing: border-box !important;
  }

  /* Brandbar pseudo-element kan soms overflow veroorzaken */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content::before{
    max-width: 100% !important;
  }

  /* Menu container/lijst: geen rare breedtes */
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container,
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item,
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  button.wp-block-navigation-submenu__toggle,
  .hkv-header .wp-block-navigation__responsive-container.is-menu-open
  a.wp-block-navigation-item__content{
    width: 100% !important;
    max-width: 100% !important;
  }
}