/*
Theme Name: Betheme Child — &neeltje
Template: betheme
Author: Bushoff & Stans
Description: Child theme voor de &neeltje-herbouw. Bevat de merk-designtokens (kleuren, typografie,
  spacing), Montserrat en herbruikbare componentklassen. Gebruik deze CSS-variabelen/klassen bij het
  bouwen in BeBuilder; override BeTheme-defaults hiermee waar nodig.
Version: 1.2.21
*/

/* ==========================================================================
   Design tokens — exact uit het &neeltje design system
   ========================================================================== */
:root{
  --color-primary:#52667B; --color-secondary:#C2AEAB; --color-accent:#7D6866;
  --color-cream:#E9E8E3; --color-dark:#35302E;
  --color-cream-bright:#F4F3EF; --color-secondary-soft:#DCD1CE;
  --color-accent-hover:#6A5654; --color-primary-deep:#435465;

  --surface-page:var(--color-cream); --surface-card:var(--color-cream-bright);
  --surface-soft:var(--color-secondary-soft); --surface-brand:var(--color-primary);
  --surface-footer:var(--color-dark);
  --text-body:var(--color-dark); --text-heading:var(--color-primary);
  --text-on-dark:var(--color-cream); --text-muted:#6B6560;
  --button-bg:var(--color-accent); --button-fg:var(--color-cream); --button-bg-hover:var(--color-accent-hover);
  --link:var(--color-accent); --link-hover:var(--color-dark);
  --border-soft:rgba(53,48,46,.14); --border-on-dark:rgba(233,232,227,.25); --focus-ring:rgba(82,102,123,.45);

  --font-sans:'Montserrat','Segoe UI',sans-serif;
  --weight-heading:400; --weight-strong:700; --weight-body:500; --weight-light:300; --weight-label:600;
  --text-h1:clamp(2.5rem,5vw,3rem); --text-h2:clamp(1.75rem,3vw,2rem); --text-h3:1.3125rem;
  --text-body-size:1.0625rem; --text-small:.875rem;
  --leading-heading:1.2; --leading-body:1.7; --tracking-label:.08em;

  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-section:clamp(64px,10vw,112px);
  --radius-sm:6px; --radius-md:14px; --radius-pill:999px;
  --shadow-card:0 12px 32px rgba(53,48,46,.10); --shadow-card-hover:0 16px 40px rgba(53,48,46,.14);
  --container:1140px;
}

/* ==========================================================================
   Merk-basis — pas aan/uit afhankelijk van BeTheme Theme Options.
   Deze regels zorgen dat de site standaard in merkstijl staat.
   ========================================================================== */
body,.mfn-main-content{font-family:var(--font-sans);font-weight:var(--weight-body);
  font-size:var(--text-body-size);line-height:var(--leading-body);color:var(--text-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);color:var(--text-heading);line-height:var(--leading-heading)}
h1{font-weight:var(--weight-light)}
h2{font-weight:var(--weight-heading)}
h3{font-weight:var(--weight-body)}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
::selection{background:var(--color-secondary);color:var(--color-dark)}

/* ==========================================================================
   Herbruikbare componentklassen (voor Code-elementen / custom classes in BeBuilder)
   Prefix ne- zodat ze niet botsen met BeTheme.
   ========================================================================== */
.ne-btn{display:inline-block;border:0;cursor:pointer;font-family:inherit;font-weight:600;
  font-size:var(--text-small);letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:14px 28px;border-radius:var(--radius-pill);background:var(--button-bg);color:var(--button-fg);
  transition:background 160ms ease,transform 160ms ease;text-decoration:none}
.ne-btn:hover{background:var(--button-bg-hover);color:var(--button-fg)}
.ne-btn--ondark{background:transparent;border:1px solid var(--color-cream);color:var(--color-cream)}
.ne-btn--ondark:hover{background:rgba(233,232,227,.12);color:var(--color-cream)}

.ne-label .num{font-size:var(--text-small);font-weight:700;color:var(--color-secondary);letter-spacing:var(--tracking-label)}
.ne-label .kicker{font-size:var(--text-small);font-weight:600;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-accent);margin-left:10px}
.ne-label--ondark .kicker{color:var(--color-secondary)}
.ne-label--ondark h2{color:var(--color-cream)}
/* sectie-eyebrow "01 – WELKOM" — exact als design-system SectionLabel:
   weight 600, 0.08em, uppercase, kleur onDark?secondary:accent, marginBottom 10 */
.ne-eyebrow{display:block;font-size:var(--text-small);font-weight:var(--weight-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--color-accent);margin-bottom:10px}

.ne-card{background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);
  overflow:hidden;transition:box-shadow 160ms ease,transform 160ms ease}
.ne-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}

.ne-reason{border-top:2px solid var(--color-secondary);padding-top:16px}
.ne-muted{color:var(--text-muted);font-size:var(--text-small);line-height:1.65}

.ne-field label{font-size:var(--text-small);font-weight:600;color:var(--text-body);display:block;margin-bottom:6px}
.ne-field input,.ne-field textarea{font-family:inherit;font-size:1rem;padding:12px 14px;
  border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:#fff;color:var(--text-body);width:100%}
.ne-field input:focus,.ne-field textarea:focus{outline:none;box-shadow:0 0 0 3px var(--focus-ring);border-color:var(--color-primary)}

/* Sectie-achtergronden om snel te taggen in BeBuilder */
.ne-bg-brand{background:var(--surface-brand);color:var(--color-cream)}
.ne-bg-soft{background:var(--surface-soft)}
.ne-bg-cream{background:var(--surface-page)}
.ne-bg-footer{background:var(--surface-footer);color:var(--color-cream)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==========================================================================
   HEADER — native Betheme-header (header-classic) herstijld naar merk
   ========================================================================== */
/* crème achtergrond + compacte hoogte (default classic-header = 250px op #Header) */
body.header-classic #Header,
body.header-classic #Header_wrapper { height: auto !important; min-height: 0 !important; }
#Header_wrapper { background: var(--color-cream) !important; box-shadow: none !important;
  position: sticky !important; top: 0; z-index: 100; }
#Top_bar { background: rgba(233,232,227,0.92) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft); height: auto !important; padding: 0; }
#Top_bar .container { min-height: 76px; }
/* logo ~52px (mockup) */
#Top_bar .logo img.custom-logo, #Top_bar .logo img { height: 52px !important; width: auto !important; max-height: 52px; }
/* menu: lowercase, Montserrat 500, primary; hover/active accent */
#Top_bar #menu ul.menu > li > a,
#Top_bar .menu > li > a { color: var(--color-primary) !important; text-transform: lowercase;
  font-family: var(--font-sans); font-weight: 500; font-size: 16px; letter-spacing: 0; }
/* hover = accent (2 id's zodat het de basisregel wint).
   LET OP: NIET op .current-menu-item/.current_page_item stylen — WordPress zet die op ALLE
   one-pager-ankeritems op de voorpagina, waardoor alle items accent zouden kleuren. */
#Top_bar #menu ul.menu > li > a:hover,
#Top_bar .menu > li > a:hover { color: var(--color-accent) !important; }
/* Betheme's eigen menu-indicatoren + separators volledig uit (mockup: schone items) */
#Top_bar #menu ul.menu > li > a::after, #Top_bar .menu > li > a::after,
#Top_bar #menu ul.menu > li > a::before, #Top_bar .menu > li > a::before,
#Top_bar .menu > li::after, #Top_bar .menu > li::before {
  display: none !important; content: none !important; background: transparent !important; border: 0 !important; }
#Top_bar .menu > li, #Top_bar #menu ul.menu > li,
#Top_bar .menu > li > a, #Top_bar #menu ul.menu > li > a { border: 0 !important; }
/* DE separators: Betheme zet border-right op de <span> BINNEN elke menu-link */
#Top_bar #menu ul.menu > li > a > span,
#Top_bar .menu > li > a > span { border: 0 !important; }
/* eigen nette onderstreping: alleen op hover + actief item, subtiel 2px accent */
#Top_bar .menu > li > a { box-shadow: inset 0 0 0 var(--color-accent); transition: color 160ms ease, box-shadow 160ms ease; }
#Top_bar .menu > li > a:hover,
#Top_bar .menu > li.nav-active > a { box-shadow: inset 0 -2px 0 var(--color-accent); }
/* geen streepje/lijn onder het telefoonnummer */
#Top_bar .menu > li.nav-phone > a:hover { box-shadow: none; }
/* telefoonnummer als accent-item rechts (2 id's zodat het de basis-menuregel wint) */
#Top_bar #menu ul.menu > li.nav-phone > a,
#Top_bar .menu > li.nav-phone > a { color: var(--color-accent) !important; font-weight: 600; text-transform: none; }
#Top_bar #menu ul.menu > li.nav-phone > a:hover,
#Top_bar .menu > li.nav-phone > a:hover { color: var(--color-dark) !important; }

/* ==========================================================================
   PAGE: Home one-pager — per-sectie styling (gescoped op section_id)
   ========================================================================== */
/* verberg de Betheme page-title/subheader op de homepage (naast de page-option) */
.home #Subheader { display:none !important; }
/* witte balk weg: Betheme #Content heeft 30px top-padding + witte bg → hero moet tegen de header */
.home #Content { padding-top: 0 !important; background: var(--color-cream); }

/* --- Hero (#hero) --- */
#hero { background:var(--color-primary); color:var(--color-cream); padding:clamp(64px,8vw,110px) 0; }
#hero .section_wrapper { align-items:center; }
#hero h6 { color:var(--color-secondary); font-size:var(--text-small); font-weight:600;
  letter-spacing:var(--tracking-label); text-transform:uppercase; margin:0 0 16px; }
#hero h1 { color:var(--color-cream); font-weight:var(--weight-light); font-size:var(--text-h1);
  line-height:1.15; margin:0 0 20px; }
#hero p { color:rgba(233,232,227,.85); font-size:var(--text-body-size); line-height:var(--leading-body); max-width:520px; }
#hero .mcb-column-inner > .button, #hero a.button { display:inline-block; border-radius:var(--radius-pill);
  font-weight:600; font-size:var(--text-small); letter-spacing:var(--tracking-label); text-transform:uppercase;
  padding:14px 28px; margin:0; transition:background 160ms ease,color 160ms ease; }
#hero a.button.button_theme { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-cream); }
#hero a.button.button_theme:hover { background:var(--color-accent-hover); border-color:var(--color-accent-hover); }
#hero a.button.button_stroke { background:transparent; border:1px solid var(--color-cream); color:var(--color-cream); }
#hero a.button.button_stroke:hover { background:rgba(233,232,227,.12); }
#hero img { border-radius:var(--radius-md); box-shadow:var(--shadow-card); display:block; }
/* twee hero-knoppen naast elkaar: kolommen zijn 100% (610px) in een flex-row-wrap → shrink naar auto */
#hero .mcb-column:has(> .mcb-column-inner > a.button) {
  width: auto !important; flex: 0 0 auto !important; margin: 0 16px 12px 0 !important; clear: none !important; }
#hero .mcb-column:has(> .mcb-column-inner > a.button) .mcb-column-inner { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width:920px){
  #hero { padding:56px 0; }
  #hero h1 { font-size:2rem; }
}

/* content-koppen standaard primary (Betheme rendert ze donker); donkere secties overschrijven zelf */
.home #Content h2, .home #Content h3 { color: var(--color-primary) !important; }

/* sectie-foto's: exacte ratio's uit sections.jsx (Photo ratio-prop) */
#hero img { aspect-ratio: 4 / 5; object-fit: cover; }
#welkom img { aspect-ratio: 4 / 3; object-fit: cover; }

/* --- 01 Welkom (grid foto : tekst, gap 64, verticaal gecentreerd — via Betheme two-fifth/three-fifth) --- */
/* sectie-padding (mockup = 112px boven/onder); Betheme-default is hier 0 → foto plakte tegen de hero */
#welkom { padding: var(--space-section) 0; }
#welkom .section_wrapper { align-items: center; }
#welkom img { border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: block; }
/* Betheme geeft elk kolom-item margin-bottom:40px. Hier uit, zodat de tussenruimtes het
   design-system volgen: eyebrow→kop wordt 10px (uit .ne-eyebrow) en kop→body 20px (uit p). */
#welkom .mcb-column-inner { margin-bottom: 0; }
#welkom h2 { margin: 0; }
#welkom p { font-size: var(--text-body-size); line-height: var(--leading-body);
  font-weight: var(--weight-body); color: var(--text-body); max-width: 560px; margin: 20px 0 0; }
/* kolom-gutter naar de mockup-64px: two-fifth/three-fifth raken elkaar op 24px, +40px = 64px */
@media (min-width: 768px) { #welkom .three-fifth { padding-left: 40px; } }

/* --- 02 Diensten (#diensten) — cream-soft sectie, gecentreerde kop, 3 kaarten-grid --- */
#diensten { padding: var(--space-section) 0; background: var(--surface-soft); }
#diensten .mcb-column-inner { margin-bottom: 0; }        /* Betheme 40px-default uit */
#diensten .ne-eyebrow, #diensten h2 { text-align: center; }
#diensten h2 { margin: 0; }
.ne-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  margin-top: var(--space-7); }
.ne-service { display: flex; flex-direction: column; }   /* .ne-card levert bg/radius/shadow/overflow */
.ne-service__img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.ne-service__body { display: flex; flex-direction: column; gap: 16px; padding: var(--space-6); }
.ne-service__title { margin: 0; font-size: var(--text-h3); line-height: 1.2; font-weight: 500; color: var(--text-heading); }
.ne-service__body p { margin: 0; font-size: var(--text-body-size); line-height: var(--leading-body);
  font-weight: var(--weight-body); color: var(--text-body); max-width: none; }
.ne-service__link { margin-top: auto; font-size: var(--text-small); font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--link); text-decoration: none; }
.ne-service__link:hover { color: var(--link-hover); }
@media (max-width: 920px) { .ne-services-grid { grid-template-columns: 1fr 1fr; } }  /* tablet: 2 kolommen */
@media (max-width: 600px) { .ne-services-grid { grid-template-columns: 1fr; } }       /* telefoon: 1 kolom */

/* --- 03 Over mij (#over-mij) — vierkante foto links, tekst + accent-knop rechts (2/5:3/5, gap 64, gecentreerd) --- */
#over-mij { padding: var(--space-section) 0; }
#over-mij .section_wrapper { align-items: center; }
#over-mij .mcb-column-inner { margin-bottom: 0; }        /* Betheme 40px-default uit */
#over-mij img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: block; }
#over-mij h2 { margin: 0; }
#over-mij .ne-about-text { margin-top: 20px; }           /* kop → 1e alinea */
#over-mij .ne-about-text p { margin: 0 0 17px; max-width: 560px;
  font-size: var(--text-body-size); line-height: var(--leading-body); font-weight: var(--weight-body); color: var(--text-body); }
#over-mij .ne-about-text p:last-child { margin-bottom: 0; }
#over-mij a.button.button_theme { margin-top: 24px !important; background: var(--button-bg); border-color: var(--button-bg);
  color: var(--button-fg); border-radius: var(--radius-pill); text-transform: uppercase; font-weight: 600;
  font-size: var(--text-small); letter-spacing: var(--tracking-label); padding: 13px 30px; box-shadow: none; }
#over-mij a.button.button_theme:hover { background: var(--button-bg-hover); border-color: var(--button-bg-hover); }
@media (min-width: 768px) { #over-mij .three-fifth { padding-left: 40px; } }

/* --- 04 Waarom (#waarom) — links intro + 4:3-foto, rechts 3 redenen in 2-koloms grid --- */
#waarom { padding: var(--space-section) 0; }
.ne-why { display: grid; grid-template-columns: 414fr 662fr; gap: 64px; align-items: start; }
.ne-why__intro .ne-eyebrow { margin-bottom: 10px; }
.ne-why__title { margin: 0 0 28px; font-size: var(--text-h2); line-height: 40px; font-weight: var(--weight-heading); color: var(--text-heading); }
/* #waarom-scope nodig: Betheme's #Content img{max-width:100%} wint anders van .ne-why__img */
#waarom .ne-why__img { display: block; width: 100%; max-width: 320px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.ne-why__reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ne-why__reasons .ne-reason { border-top: 2px solid var(--color-secondary); padding-top: 16px; }
.ne-why__reasons .ne-reason h3 { margin: 0 0 8px; font-size: var(--text-h3); line-height: 1.2; font-weight: 500; color: var(--text-heading); }
.ne-why__reasons .ne-reason p { margin: 0; font-size: var(--text-small); line-height: 1.65; font-weight: var(--weight-body); color: var(--text-muted); }
@media (max-width: 920px) { .ne-why { grid-template-columns: 1fr; } }                 /* tablet: intro boven, redenen 2-koloms eronder */
@media (max-width: 600px) { .ne-why__reasons { grid-template-columns: 1fr; } }        /* telefoon: redenen 1 kolom */

/* --- 05 Contact (#contact) — donkere sectie: links info + 4:3-foto, rechts Gravity Form --- */
#contact { padding: var(--space-section) 0; background: var(--color-primary); color: var(--color-cream); }
.ne-contact-grid { display: grid; grid-template-columns: 489fr 587fr; gap: 64px; align-items: start; }
/* links: info-kolom */
#contact .ne-eyebrow { color: var(--color-secondary); }          /* onDark: eyebrow secondary */
.ne-contact-info .ne-eyebrow { margin-bottom: 10px; }
/* 2 id's + !important nodig: generieke `.home #Content h2{color:primary!important}` (spec 1,1,1) maakt de kop anders blauw-op-blauw */
#Content #contact .ne-contact-title { margin: 0 0 16px; font-size: var(--text-h2); line-height: 40px; font-weight: var(--weight-heading); color: var(--color-cream) !important; }
.ne-contact-sub { margin: 0 0 24px; max-width: 420px; font-size: var(--text-body-size); line-height: var(--leading-body); font-weight: var(--weight-body); color: rgba(233,232,227,.85); }
.ne-contact-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.ne-contact-links a { color: var(--color-secondary); font-size: var(--text-small); font-weight: 500; text-decoration: none; }
.ne-contact-links a:hover { color: var(--color-cream); }
#contact .ne-contact-img { display: block; width: 100%; max-width: 340px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
/* rechts: Gravity Form herstijld naar merk (2-koloms grid via layoutGridColumnSpan 6/6/6/6/12) */
#contact .gform_wrapper .gform_fields { grid-column-gap: 18px; grid-row-gap: 18px; gap: 18px; }
#contact .gform_wrapper .gfield_label { font-size: var(--text-small); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-cream); margin: 0 0 6px; }
#contact .gform_wrapper .gfield_required { color: var(--color-secondary); }
#contact .gform_wrapper input[type=text], #contact .gform_wrapper input[type=email], #contact .gform_wrapper input[type=tel], #contact .gform_wrapper textarea {
  background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 12px 16px; font-family: var(--font-sans); font-size: var(--text-body-size); font-weight: var(--weight-body); color: var(--text-body); width: 100%; box-shadow: none; }
#contact .gform_wrapper textarea { min-height: 120px; }
#contact .gform_wrapper input:focus, #contact .gform_wrapper textarea:focus { outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(233,232,227,.30); }
#contact .gform_wrapper .gform_footer { margin: 18px 0 0; padding: 0; }
#contact .gform_wrapper .gform_footer input[type=submit], #contact .gform_wrapper .gform_footer button {
  width: auto; background: var(--button-bg); color: var(--button-fg); border: 0; border-radius: var(--radius-pill);
  text-transform: uppercase; font-weight: 600; font-size: var(--text-small); letter-spacing: var(--tracking-label); padding: 13px 30px; cursor: pointer; }
#contact .gform_wrapper .gform_footer input[type=submit]:hover, #contact .gform_wrapper .gform_footer button:hover { background: var(--button-bg-hover); }
/* nette foutmeldingen op de donkere sectie (merk-coral, leesbaar op blauw) */
#contact .gform_wrapper .gfield_error input, #contact .gform_wrapper .gfield_error textarea {
  border-color: #E4715B; box-shadow: 0 0 0 3px rgba(228,113,91,.28); }
#contact .gform_wrapper .gfield_validation_message, #contact .gform_wrapper .validation_message {
  margin-top: 6px; padding: 0; background: none; border: 0; color: #F2C4BB;
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
#contact .gform_wrapper .gform_validation_errors {
  background: rgba(228,113,91,.14); border: 1px solid rgba(228,113,91,.55); border-radius: var(--radius-sm);
  padding: 14px 18px; margin: 0 0 24px; box-shadow: none; }
/* 2 id's: verslaat de generieke `.home #Content h2{color:primary!important}` (anders blauw op de coral-box) */
#Content #contact .gform_wrapper .gform_validation_errors h2,
#Content #contact .gform_wrapper .gform_validation_errors .gform_submission_error {
  color: var(--color-cream) !important; font-size: var(--text-small); font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: 8px; }
#contact .gform_wrapper .gform_validation_errors svg { fill: #F2C4BB; }
@media (max-width: 920px) { .ne-contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER — merk-footer (#35302E) i.p.v. Betheme-default credit
   ========================================================================== */
#Footer { background: var(--surface-footer); }
#Footer .footer_copy { background: transparent; border-top: 0; padding: 0; }
#Footer .footer_copy .container { min-height: 0; }
#Footer .footer_copy .copyright { text-align: left; color: var(--color-cream); float: none; width: 100%; }
.ne-footer { padding: 40px 0; }
.ne-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
#Footer .ne-footer__logo { display: block; height: 52px; width: auto; margin: 0; }
.ne-footer__meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* Betheme back-to-top pijl weg */
#back_to_top { display: none !important; }
/* #Footer-scope: verslaat Betheme's `#Footer .footer_copy a{color:#d1d1d1}` */
#Footer .ne-footer a { color: var(--color-secondary); font-size: var(--text-small); font-weight: 500; text-decoration: none; transition: color 160ms ease; }
#Footer .ne-footer a:hover { color: var(--color-cream); }
#Footer .ne-footer__copy { color: rgba(233,232,227,.7); font-size: var(--text-small); }
@media (max-width: 640px) { .ne-footer__row { flex-direction: column; align-items: flex-start; gap: 12px; } }