/*
Theme Name:   Van de Weerd — Kadence Child
Template:     kadence
Version:      1.0.1
*/

/* ── Sitenaam verbergen naast logo ────────────────────── */
.has-logo-image .site-title-wrap,
.has-logo-image .site-title,
.site-brand-logo-only .site-title-wrap {
  display: none !important;
}

/* ── Logo marge in header ─────────────────────────────── */
.site-header .site-brand-logo img,
.site-header .custom-logo {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* ── Page hero verbergen op homepage ──────────────────── */
.home .page-hero-section {
  display: none !important;
}

/* ── Kadence margin/padding op homepage naar nul ──────── */
.home #inner-wrap,
.home #primary.content-area,
.home .content-container,
.home #main.site-main,
.home .content-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.home article.entry {
  box-shadow: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.home .entry-content-wrap {
  padding: 0 !important;
  margin: 0 !important;
}

.home .entry-content,
.home .entry-content > *:first-child,
.home .single-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── Palet-klassen (theme.json wordt niet volledig door Kadence verwerkt) */
:root {
  --vdw-basis:         #FAFAF7;
  --vdw-licht:         #EEEAE4;
  --vdw-accent:        #C07830;
  --vdw-accent-licht:  #D4956A;
  --vdw-accent-donker: #A06228;
  --vdw-donker:        #1E2D54;
  --vdw-wit:           #FFFFFF;
}

.has-basis-background-color         { background-color: var(--vdw-basis) !important; }
.has-licht-background-color         { background-color: var(--vdw-licht) !important; }
.has-accent-background-color        { background-color: var(--vdw-accent) !important; }
.has-accent-licht-background-color  { background-color: var(--vdw-accent-licht) !important; }
.has-accent-donker-background-color { background-color: var(--vdw-accent-donker) !important; }
.has-donker-background-color        { background-color: var(--vdw-donker) !important; }
.has-wit-background-color           { background-color: var(--vdw-wit) !important; }

.has-basis-color         { color: var(--vdw-basis) !important; }
.has-licht-color         { color: var(--vdw-licht) !important; }
.has-accent-color        { color: var(--vdw-accent) !important; }
.has-accent-licht-color  { color: var(--vdw-accent-licht) !important; }
.has-accent-donker-color { color: var(--vdw-accent-donker) !important; }
.has-donker-color        { color: var(--vdw-donker) !important; }
.has-wit-color           { color: var(--vdw-wit) !important; }

/* ── Typografie & basis ───────────────────────────────── */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #FAFAF7;
  color: #2C2C2C;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
}

/* ── Menu CTA knop (Meld overlijden) ─────────────────── */
#masthead li.menu-cta {
  margin-left: 0.75rem;
  display: flex;
  align-items: center;
}

#masthead li.menu-cta > a {
  background-color: #C07830 !important;
  color: #ffffff !important;
  padding: 0.5em 1.25em !important;
  border-radius: 2px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease !important;
  line-height: 1.4;
}

#masthead li.menu-cta > a:hover {
  background-color: #A06228 !important;
  color: #ffffff !important;
}

/* ── Navigatie ────────────────────────────────────────── */

/* Header balk */
.site-header {
  background: rgba(250, 250, 247, 0.97) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(192, 120, 48, 0.18) !important;
  box-shadow: 0 1px 10px rgba(44, 44, 44, 0.05);
}

/* Kadence zet #masthead direct op background:#ffffff — eigen selector nodig */
#masthead,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
  background: rgba(250, 250, 247, 0.97) !important;
}

/* Site-naam naast logo */
.site-branding .site-title a,
.site-branding .site-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1E2D54;
}

/* ── Primaire nav-links (match Kadence specificiteit zodat laadorde beslist) */
.main-navigation .primary-menu-container > ul > li.menu-item > a {
  color: #2C2C2C !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  transition: color 0.2s ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
  color: #C07830 !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a {
  color: #A06228 !important;
  font-weight: 600 !important;
}

/* ── Dropdown sub-menu */
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
  background: #FAFAF7 !important;
  box-shadow: 0 6px 24px rgba(44, 44, 44, 0.12) !important;
  border-top: 2px solid #C07830 !important;
  border-radius: 0 0 3px 3px !important;
}

/* Scheidingslijntjes in dropdown */
.header-navigation .header-menu-container ul ul li.menu-item,
.header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul > li.menu-item > a {
  border-bottom: 1px solid rgba(192, 120, 48, 0.12) !important;
}

/* Dropdown-links */
.header-navigation .header-menu-container ul ul li.menu-item > a {
  color: #3D3D3D !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  width: 280px !important;
  padding: 0.8em 1.25em !important;
  transition: background 0.15s ease, color 0.15s ease, padding 0.15s ease;
}

/* Dropdown-link hover */
.header-navigation .header-menu-container ul ul li.menu-item > a:hover {
  color: #A06228 !important;
  background: rgba(192, 120, 48, 0.09) !important;
  padding-left: 1.5em !important;
  border-radius: 0 !important;
}

/* Dropdown actieve pagina */
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
  color: #A06228 !important;
  background: rgba(192, 120, 48, 0.09) !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
}

/* ── Mobile hamburger-knop */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus {
  color: #2C2C2C !important;
}

.mobile-toggle-open-container .menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:focus-visible {
  color: #C07830 !important;
}

/* ── Mobile drawer */
#mobile-drawer,
#mobile-drawer .mobile-drawer-nav {
  background: #2C2C2C !important;
}

.mobile-navigation ul li > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
  color: #E8E2DA !important;
}

.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
  color: #D4956A !important;
}

.mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
.mobile-navigation ul li:not(.menu-item-has-children) a {
  border-bottom: 1px solid rgba(232, 226, 218, 0.1) !important;
}

.mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button {
  border-left: 1px solid rgba(232, 226, 218, 0.1) !important;
}

/* ── Hero: forceer volledige viewport-breedte ────────── */
.home .wp-block-cover.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Voorkom horizontale scroll door 100vw vs scrollbalk-breedte */
html, body {
  overflow-x: hidden;
}

/* ── Witregel onder/boven hero verwijderen ───────────── */
.home .entry-content > .wp-block-cover:first-child,
.home .entry-content > .wp-block-cover.alignfull:first-child {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Witte ruimte boven hero op mobiel wegwerken */
@media (max-width: 1024px) {
  .home #primary.content-area {
    margin-top: 0 !important;
  }
}


/* ── Hero: gradient overlay — top zwaarder zodat witte vignet verdwijnt */
.home .wp-block-cover:first-of-type {
  background-color: #1a2a1a !important;
}
.home .wp-block-cover:first-of-type .wp-block-cover__background {
  background: linear-gradient(
    to bottom,
    rgba(12, 20, 12, 0.35) 0%,
    rgba(18, 28, 18, 0.25) 50%,
    rgba(18, 28, 18, 0.45) 100%
  ) !important;
  opacity: 1 !important;
}

/* ── Hero: H1 scherper maken met subtiele schaduw ─────── */
.home .wp-block-cover:first-of-type h1 {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* ── Hero: eyebrow en telefoon beter leesbaar ─────────── */
.home .wp-block-cover:first-of-type p[style*="c9b99a"],
.home .wp-block-cover:first-of-type p[style*="b0a898"] {
  color: #ddd3c0 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* ── Hero: outline-knop → wit border en tekst ─────────── */
.home .wp-block-cover:first-of-type .is-style-outline .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
}

.home .wp-block-cover:first-of-type .is-style-outline .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
}

/* ── Hero scroll-indicator ────────────────────────────── */
.wp-block-cover:first-of-type::after {
  content: '';
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: top; }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}

/* ── Fade-in bij scrollen ─────────────────────────────── */
.wp-block-group,
.wp-block-columns,
.wp-block-media-text {
  animation: fadeUp 0.6s ease both;
  animation-play-state: paused;
}

.is-visible {
  animation-play-state: running;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Buttons ──────────────────────────────────────────── */
.wp-block-button__link {
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  letter-spacing: 0.01em;
}

.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74, 89, 64, 0.25);
}

/* ── Sectie-spacing compacter (minder zweven) ─────────── */
.entry-content > .wp-block-group[style*="padding-top:var(--wp--preset--spacing--80)"] {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

/* Fade-up: minder ver omhoog, sneller */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wp-block-group,
.wp-block-columns,
.wp-block-media-text {
  animation-duration: 0.45s !important;
}

/* ── Diensten-kaarten: losse blokken met subtiele schaduw  */
.home .wp-block-columns > .wp-block-column > .wp-block-group {
  background: #ffffff;
  border-radius: 6px !important;
  border: none !important;
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
  border-bottom-color: transparent !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(44, 44, 44, 0.07), 0 1px 3px rgba(44, 44, 44, 0.05);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.home .wp-block-columns > .wp-block-column > .wp-block-group:hover {
  box-shadow: 0 8px 28px rgba(44, 44, 44, 0.12), 0 2px 6px rgba(44, 44, 44, 0.07);
  transform: translateY(-3px);
}

/* Tekst-inhoud binnen kaart */
.home .wp-block-columns > .wp-block-column > .wp-block-group > h3,
.home .wp-block-columns > .wp-block-column > .wp-block-group > p,
.home .wp-block-columns > .wp-block-column > .wp-block-group .wp-block-heading,
.home .wp-block-columns > .wp-block-column > .wp-block-group .wp-block-paragraph {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.home .wp-block-columns > .wp-block-column > .wp-block-group .wp-block-paragraph:last-child {
  padding-bottom: 1.5rem;
}

/* Afbeelding: volledige breedte, gelijke hoogte, geen afgeronde hoeken (kaart doet dat) */
.home .wp-block-columns > .wp-block-column > .wp-block-group .wp-block-image {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.home .wp-block-columns > .wp-block-column > .wp-block-group .wp-block-image figure,
.home .wp-block-columns > .wp-block-column > .wp-block-group figure.wp-block-image {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.home .wp-block-columns > .wp-block-column > .wp-block-group .wp-block-image img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 220px !important;
  object-fit: cover;
  border-radius: 0 !important;
}

/* ── Afbeeldingen ─────────────────────────────────────── */
.wp-block-image img,
.wp-block-cover img,
.wp-block-media-text__media img {
  transition: transform 0.5s ease;
  border-radius: 0 !important;
}

.wp-block-image:hover img {
  transform: scale(1.015);
}

/* ── Links in tekst ───────────────────────────────────── */
.entry-content a:not(.wp-block-button__link):not(.vdw-preview-card):not(.vdw-preview-cta):not(.vdw-preview-more-link) {
  color: #A06228;
  text-decoration: underline;
  text-decoration-color: rgba(192, 120, 48, 0.4);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.entry-content a:not(.wp-block-button__link):not(.vdw-preview-card):not(.vdw-preview-cta):not(.vdw-preview-more-link):hover {
  color: #C07830;
  text-decoration-color: #C07830;
}

/* ── Verwijder alle witruimte tussen full-width secties ── */
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-cover.alignfull,
.entry-content > .wp-block-columns.alignfull {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Trust band ───────────────────────────────────────── */
.wp-block-group.has-donker-background-color {
  position: relative;
}

/* WordPress core margin-bottom op columns verwijderen */
.wp-block-group.has-donker-background-color > .wp-block-columns {
  gap: 0 !important;
  margin-bottom: 0 !important;
}

.wp-block-group.has-donker-background-color .wp-block-column {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  min-width: 0 !important;
}

/* Alle marges in trust band kolommen naar nul */
.has-donker-background-color .wp-block-column,
.has-donker-background-color .wp-block-column *,
.has-donker-background-color .wp-block-column .wp-block-paragraph {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Trust band mobiel: 2×2 grid */
@media (max-width: 600px) {
  .wp-block-group.has-donker-background-color > .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .wp-block-group.has-donker-background-color .wp-block-column {
    flex-basis: 50% !important;
    max-width: 50% !important;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 1.25rem 0.75rem !important;
  }
  .wp-block-group.has-donker-background-color .wp-block-column:nth-child(even) {
    border-right: none;
  }
  .wp-block-group.has-donker-background-color .wp-block-column:nth-child(n+3) {
    border-bottom: none;
  }
}

/* ── Over ons: media-text afbeelding inperken ─────────── */
.home .wp-block-media-text {
  align-items: center;
}

@media (max-width: 599px) {
  .home .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    text-align: center;
    padding-top: 1.5rem;
  }
}

.home .wp-block-media-text .wp-block-media-text__media {
  border-radius: 6px;
  overflow: hidden;
}

.home .wp-block-media-text .wp-block-media-text__media img {
  height: auto !important;
  max-height: 520px;
  object-fit: cover;
  object-position: center top;
  width: 100%;
  border-radius: 6px;
}

/* ── Binnenste pagina's: page hero banner ─────────────── */
section.entry-hero.page-hero-section,
.entry-hero.page-hero-section {
  background: #1E2D54 !important;
  background-image: linear-gradient(135deg, #1E2D54 0%, #2a3d6e 100%) !important;
}

.page-hero-section .entry-hero-container-inner {
  background: transparent !important;
}

.page-hero-section .hero-section-overlay {
  display: none !important;
}

.page-hero-section .entry-header {
  padding: 3rem 0 !important;
  min-height: 0 !important;
}

.page-hero-section .entry-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  color: #FAFAF7 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

/* Binnenste pagina's: content area ───────────────────── */
body.page:not(.home) #primary.content-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.page:not(.home) article.entry {
  box-shadow: none !important;
  background: transparent;
}

body.page:not(.home) .entry-content-wrap {
  padding: 8rem 0 4rem !important;
  max-width: none;
  margin: 0;
}

/* Geen top-ruimte als het eerste blok direct een gekleurd full-width vlak is */
body.page:not(.home) .entry-content-wrap:has(> .entry-content > .wp-block-group.alignfull.has-background:first-child),
body.page:not(.home) .entry-content-wrap:has(> .entry-content > .wp-block-cover.alignfull:first-child),
body.page:not(.home) .entry-content-wrap:has(> .entry-content > .wp-block-columns.alignfull.has-background:first-child) {
  padding-top: 0 !important;
}

body.page:not(.home) .entry-content h1,
body.page:not(.home) .entry-content h2,
body.page:not(.home) .entry-content h3,
body.page:not(.home) .entry-content h4,
body.page:not(.home) .entry-content h5 {
  font-family: 'Playfair Display', Georgia, serif;
  color: #1E2D54;
}

body.page:not(.home) .entry-content p {
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.75;
  color: #4a4a4a;
}

/* Verberg kapotte shortcode-output ───────────────────── */
body.page:not(.home) .entry-content .wp-block-html:empty {
  display: none;
}

/* ── Werkwijze stap ───────────────────────────────────── */
.wp-block-column .wp-block-group[style*="border-top"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-column .wp-block-group[style*="border-top"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(44, 44, 44, 0.08);
}

/* ── Footer ───────────────────────────────────────────── */
.site-footer {
  background: #2C2C2C;
  color: #9e9e9e;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
}

.site-footer a {
  color: #c9b99a;
  text-decoration: none;
}

.site-footer a:hover {
  color: #FAFAF7;
}

/* ── Selectie ─────────────────────────────────────────── */
::selection {
  background: rgba(192, 120, 48, 0.2);
  color: #2C2C2C;
}

/* ── Homepage sectie-afwisseling: wit voor Herdenkingspagina's ── */
/* Sectie met inline background-color:#FFFFFF krijgt echte witte bg */
.home .wp-block-group.alignfull[style*="background-color:#FFFFFF"],
.home .wp-block-group.alignfull[style*="background-color: #FFFFFF"] {
  background-color: #FFFFFF !important;
}

/* ── Gallerijen: ruimte boven en onder ───────────────── */
.wp-block-gallery {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

/* ── Responsive headings (mobiel) ────────────────────── */
@media (max-width: 600px) {
  .wp-block-heading,
  .entry-title,
  h1, h2 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .wp-block-heading[style*="font-size:2rem"],
  .wp-block-heading[style*="font-size: 2rem"] {
    font-size: clamp(1.25rem, 6vw, 2rem) !important;
  }
}