/*
Theme Name:   Enfold Child – Ander Ouderschap
Description:  Ander Ouderschap huisstijl bovenop het Enfold parent-theme.
              Kleuren: achtergrond #F5E6E0, titels #6B2737, accent #C1876B, footer #3D1F1F.
Version:      1.4
Author:       Bas Gruijters
Template:     enfold
*/

/* ================================================
   GOOGLE FONTS – Nunito
   ================================================ */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap");

/* ================================================
   CSS CUSTOM PROPERTIES (Huisstijlkleuren)
   ================================================ */
:root {
  --antiek: #c1876b; /* warm koperbruin – knoppen & accenten   */
  --hover: #a86b52; /* donkerder koper – knop hover            */
  --licht: #e8b4a0; /* licht koper/zalm – randen, hover-bg     */
  --creme: #eecfc4; /* warm roze – kaartjes, velden            */
  --achtergrond: #f5e6e0; /* warm zalmroze – paginaachtergrond       */
  --roze-sectie: #f2d9d3; /* iets dieper roze – kaarten              */
  --cta-bg: #c9756b; /* zalm/koper – CTA-secties                */
  --donker: #6b2737; /* diep wijnrood – koppen & tekst          */
  --footer-bg: #3d1f1f; /* donker warm bruin – footer              */
  --wit: #ffffff;
  --schaduw: rgba(107, 39, 55, 0.1);
  --schaduw2: rgba(107, 39, 55, 0.2);
  --font: "Nunito", "Lato", Arial, sans-serif;
}

/* ================================================
   GLOBALE TYPOGRAFIE & BODY
   ================================================ */
html {
  font-size: 16px;
}

body,
#top {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  background-color: var(--achtergrond) !important;
  line-height: 1.75;
  font-size: 1rem;
}

/* Paginaachtergrond doortrekken in Enfold-wrappers */
#wrap_all,
#main,
.container_wrap {
  background-color: var(--achtergrond);
}

/* Sectie-containers: vrij van breedte/padding zodat achtergronden
   de volledige viewport beslaan. Uitsluitend .avia-section-containers
   worden geraakt; header, title-balk en footer blijven ongewijzigd.
   .responsive prefix verhoogt specificiteit (0,3,0) boven Enfold's
   inline .responsive .container { max-width: 1230px } (0,2,0). */
.responsive .container_wrap.fullsize > .container {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.flex_column.av_one_full.av_one_full {
  max-width: 100%;
}

.flex_column.av_one_full.av_one_full > section {
  max-width: 1230px;
  padding: 0 40px;
  margin: 0 auto;
}

.template-page .entry-content-wrapper h1,
.template-page .entry-content-wrapper h2 {
  text-transform: none !important;
  letter-spacing: inherit;
}

main.av-content-full {
  padding: 0;
}

/* Hercentreer content via de kolom zelf. max-width + auto-marges
   werken voor alle kinderen, ongeacht element-tag.
   clamp() geeft responsieve zijmarges (voorkomt rand-aan-rand op mobiel). */
.avia-section .flex_column.av_one_full {
  max-width: 1230px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

/* Headings */
#top h1,
#top h2,
#top h3,
#top h4,
#top h5,
#top h6 {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  line-height: 1.25;
  font-weight: 700;
}

#top h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom: 16px;
  color: var(--wit);
  text-shadow:
    0 2px 18px rgba(40, 15, 10, 0.65),
    0 1px 4px rgba(40, 15, 10, 0.5);
}

#top h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  margin-bottom: 14px;
}

 
/* Lichte overlay (10%) zodat magnolia goed zichtbaar blijft */
#top .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(107, 39, 55, 0.10);
  z-index: 1;
}

#top .hero .hero__inhoud h1 {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  margin-bottom: 18px;
  color: var(--wit);
  text-shadow:
    0 2px 18px rgba(40, 15, 10, 0.65),
    0 1px 4px rgba(40, 15, 10, 0.5);
}

#top .hero .avia-button {
  background: var(--wit) !important;
  color: var(--donker) !important;
  border-color: var(--wit) !important;
}

#top .hero .avia-button {
  padding: 16px 44px !important;
  font-size: 1.07rem !important;
}
#top .hero .avia-button {
  display: inline-block;
  padding: 14px 36px !important;
  border-radius: 36px !important;
  font-family: var(--font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border: 2.5px solid transparent !important;
  cursor: pointer !important;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s,
    color 0.2s !important;
  text-align: center !important;
}

#top .hero .avia-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px var(--schaduw2) !important;
  background: var(--antiek) !important;
  color: var(--wit) !important;
  border-color: var(--antiek) !important;
}

/* Paragrafen */
#top p {
  margin-bottom: 0.9rem;
}
#top p:last-child {
  margin-bottom: 0;
}

/* Links */
#top a {
  color: var(--antiek);
  text-decoration: none;
  transition: color 0.2s;
}
#top a:hover {
  color: var(--donker);
}

/* Tekst in content-blokken */
#top .avia_textblock,
#top .entry-content-wrapper {
  font-family: var(--font) !important;
  color: var(--donker);
  line-height: 1.75;
}

/* Unordered lists in content (Avia textblock) */
#top .avia_textblock ul,
#top .entry-content-wrapper ul {
  padding-left: 1.4em;
  margin-bottom: 0.9rem;
}

#top .avia_textblock ul li,
#top .entry-content-wrapper ul li {
  margin-bottom: 0.4rem;
  line-height: 1.7;
}

.sectie-kop {
  text-align: center;
  margin-bottom: 56px;
}
.sectie-kop h2 {
  font-size: clamp(1.65rem, 3.5vw, 2.4rem);
  margin-bottom: 10px;
}
.sectie-kop p {
  font-size: 1.03rem;
  max-width: 560px;
  margin: 0 auto;
}
.sectie-kop .streep {
  width: 54px;
  height: 3px;
  background: var(--antiek);
  border-radius: 3px;
  margin: 16px auto 0;
}

.main_color a, .main_color .widget_first, .main_color strong, .main_color b, .main_color b a, .main_color strong a, .main_color #js_sort_items a:hover, .main_color #js_sort_items a.active_sort, .main_color .av-sort-by-term a.active_sort, .main_color .special_amp, .main_color .taglist a.activeFilter, .main_color #commentform .required, #top .main_color .av-no-color.av-icon-style-border a.av-icon-char, .html_elegant-blog #top .main_color .blog-categories a, .html_elegant-blog #top .main_color .blog-categories a:hover {
  color: var(--donker) !important;
}

/* ================================================
   HEADER & NAVIGATIE
   ================================================ */
#header,
#header_main,
#header_main .container,
#header_main .av-logo-container,
#header_main .inner-container,
.header_bg {
  background: var(--wit) !important;
  background-color: var(--wit) !important;
}

#header {
  box-shadow: 0 2px 16px var(--schaduw) !important;
}

/* Binnenste container hoogte (~90 px) */
#header_main .container,
#header_main .av-logo-container {
  height: 90px;
}

/* Sticky header: behoud hoogte */
.html_header_top.html_header_sticky #header_main .container {
  height: 90px;
}

/* Sticky-header compensatie voor de body */
.html_header_top.html_header_sticky #main {
  padding-top: 90px;
}

/* Logo */
#top #header .logo img,
#top #header .logo a img {
  max-height: 80px;
  width: auto;
  display: block;
}

/* ---- Navigatie-links ---- */
/* Enfold zet height/line-height als inline stijl op iedere <a>;
   !important is vereist om inline stijlen te overschrijven.   */

/* li: flex-container voor verticale centrering binnen 90px header.
   .av-burger-menu-main uitgesloten — Enfold beheert die zelf via display:none. */
#top .main_menu ul:first-child > li:not(.av-burger-menu-main) {
  display: inline-flex !important;
  align-items: center !important;
  height: 90px !important;
}

#top .header-scrolled .main_menu ul:first-child > li:not(.av-burger-menu-main) {
  height: 45px !important;
}

@media (max-width: 768px) {
  #top .main_menu ul:first-child > li:not(.av-burger-menu-main) {
    display: none !important;
  }
  #top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items {
    height: auto !important;
    display: block !important;
  }
}

/* Hamburger verbergen op desktop */
#top .main_menu .av-burger-menu-main {
  display: none !important;
}

#top .main_menu ul:first-child > li > a {
  font-family: var(--font) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--donker) !important;
  border-radius: 24px !important;
  padding: 7px 16px !important;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s;
  /* Inline style overschrijven */
  height: auto !important;
  line-height: 1.5 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#top .main_menu ul:first-child > li > a:hover,
#top .main_menu ul:first-child > li.current-menu-item > a,
#top .main_menu ul:first-child > li.current_page_item > a,
#top .main_menu ul:first-child > li.current-menu-ancestor > a {
  background: var(--licht) !important;
  color: var(--donker) !important;
}

/* Contact-knop: voorlaatste <li> omdat de hamburger de laatste is.
   Als er ook een zoekicoon-<li> aanwezig is, gebruik :nth-last-child(3). */
#top .main_menu ul:first-child > li:nth-last-child(2) > a {
  background: var(--antiek) !important;
  color: var(--wit) !important;
  margin-left: 8px;
}
#top .main_menu ul:first-child > li:nth-last-child(2) > a:hover {
  background: var(--donker) !important;
  color: var(--wit) !important;
}

/* Sub-menu */
#top .main_menu .sub_menu,
#top .main_menu .sub_menu ul {
  background: var(--wit) !important;
  box-shadow: 0 12px 28px var(--schaduw2);
  border-top: 3px solid var(--antiek) !important;
  border-radius: 0 0 10px 10px;
}
#top .main_menu .sub_menu > ul > li > a,
#top .main_menu .sub_menu > div > ul > li > a {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  font-size: 0.88rem !important;
}
#top .main_menu .sub_menu > ul > li > a:hover,
#top .main_menu .sub_menu > div > ul > li > a:hover {
  color: var(--antiek) !important;
  background: var(--achtergrond) !important;
}

/* Hamburger-menu kleur (mobiel) */
.av-hamburger-inner,
.av-hamburger-inner::before,
.av-hamburger-inner::after {
  background-color: var(--donker) !important;
}

/* Mobiel uitklapmenu */
#top #avia-menu.av-burger-menu-link-list a {
  font-family: var(--font) !important;
  font-size: 1rem !important;
  color: var(--donker) !important;
}

.header_color .primary-background,
.header_color .primary-background a,
div .header_color .button,
.header_color #submit,
.header_color input[type="submit"],
.header_color .small-preview:hover,
.header_color .avia-menu-fx,
.header_color .avia-menu-fx .avia-arrow,
.header_color.iconbox_top .iconbox_icon,
.header_color .iconbox_top a.iconbox_icon:hover,
.header_color .avia-data-table th.avia-highlight-col,
.header_color .avia-color-theme-color,
.header_color .avia-color-theme-color:hover,
.header_color .image-overlay .image-overlay-inside:before,
.header_color .comment-count,
.header_color .av_dropcap2,
.header_color .av-colored-style .av-countdown-cell-inner,
.responsive #top .header_color .av-open-submenu.av-subnav-menu > li > a:hover,
#top .header_color .av-open-submenu.av-subnav-menu li > ul a:hover {
  background-color: var(--donker) !important;
  color: var(--wit) !important;
}

#top .main_menu .avia-menu-fx {
  display: none !important;
}

/* ================================================
   PAGINATITEL-BALK (.title_container)
   ================================================ */
.title_container {
  background-color: var(--donker) !important;
  padding-top: 14px;
  padding-bottom: 14px;
}

#top .title_container .container {
  min-height: 44px;
}

.title_container .main-title,
.title_container .main-title a {
  font-family: var(--font) !important;
  color: var(--wit) !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.title_container .breadcrumb,
.title_container .breadcrumb a {
  color: var(--creme) !important;
  font-size: 0.82rem;
}
.title_container .breadcrumb a:hover {
  color: var(--licht) !important;
}
.title_container .breadcrumb .sep {
  color: var(--licht) !important;
}

/* ================================================
   KNOPPEN (.avia-button)
   ================================================ */
body div .avia-button {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  border-radius: 36px !important;
  padding: 14px 36px !important;
  font-size: 1rem !important;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s,
    color 0.2s !important;
  border-bottom-style: none !important;
  line-height: 1.3;
}

body div .avia-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--schaduw2) !important;
  opacity: 1 !important;
}

/* Gevulde knop (theme-color) */
.avia-button.avia-color-theme-color {
  background-color: var(--antiek) !important;
  border-color: var(--antiek) !important;
  color: var(--wit) !important;
}
.avia-button.avia-color-theme-color:hover {
  background-color: var(--hover) !important;
  border-color: var(--hover) !important;
  color: var(--wit) !important;
}

/* Outline knop (light) */
#top .avia-button.avia-color-light {
  border: 2.5px solid var(--antiek) !important;
  color: var(--antiek) !important;
  background: transparent !important;
}
#top .avia-button.avia-color-light:hover {
  background: var(--antiek) !important;
  color: var(--wit) !important;
}

/* Witte knop (op donkere/foto-achtergrond) */
.avia-button.avia-color-grey {
  background-color: var(--wit) !important;
  border-color: var(--wit) !important;
  color: var(--donker) !important;
}
.avia-button.avia-color-grey:hover {
  background-color: var(--creme) !important;
  border-color: var(--creme) !important;
  color: var(--donker) !important;
}

/* Knopgroottes */
.avia-button.avia-size-small {
  padding: 9px 20px !important;
  font-size: 0.88rem !important;
}
.avia-button.avia-size-medium {
  padding: 12px 28px !important;
  font-size: 0.95rem !important;
}
.avia-button.avia-size-large {
  padding: 16px 44px !important;
  font-size: 1.05rem !important;
}
.avia-button.avia-size-x-large {
  padding: 20px 50px !important;
  font-size: 1.1rem !important;
}




/* ================================================
   PAGINAKOP (subpagina's) – met magnolia achtergrond
   ================================================ */
.paginakop {
  position: relative;
  background-image: url('magnolia.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 90px 28px 70px;
  text-align: center;
  overflow: hidden;
}

/* Alle directe kinderen boven de overlay */
.paginakop > * { position: relative; z-index: 2; }

.paginakop__label {
  display: inline-block;
  background: rgba(255, 255, 255, 0.25);
  color: var(--cta-bg) !important;
  padding: 5px 18px;
  border-radius: 24px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 14px;
  backdrop-filter: blur(4px);
}

.paginakop h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom: 16px;
  color: var(--wit);
  text-shadow: 0 2px 18px rgba(40, 15, 10, 0.65), 0 1px 4px rgba(40, 15, 10, 0.5);
}

.paginakop p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.97);
  text-shadow: 0 1px 10px rgba(40, 15, 10, 0.55);
}

/* ================================================
   KNOPPEN
   ================================================ */
#top .knop {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 36px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s,
    color 0.2s;
  text-align: center;
}

#top .knop:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--schaduw2);
}

#top .knop--vol {
  background: var(--antiek);
  color: var(--wit) !important;
}
#top .knop--vol:hover {
  background: var(--hover);
  color: var(--wit) !important;
}

#top .knop--rand {
  border-color: var(--antiek);
  color: var(--antiek);
  background: transparent;
}
#top .knop--rand:hover {
  background: var(--antiek);
  color: var(--wit) !important;
}

#top .knop--groot {
  padding: 16px 44px;
  font-size: 1.07rem;
}

/* ================================================
   SECTIES (.avia-section)
   ================================================ */
.avia-section {
  padding-top: 90px;
  padding-bottom: 90px;
}

/* Lichte achtergrond (default / main_color) */
.avia-section.main_color,
.avia-section.av-section-color-main {
  background-color: var(--achtergrond) !important;
  color: var(--donker) !important;
}

/* Crème/roze achtergrond (alternate_color) */
.avia-section.alternate_color,
.avia-section.av-section-color-alternate {
  background-color: var(--creme) !important;
  color: var(--donker) !important;
}

/* Donkere wijnrode sectie (socket / dark) */
.avia-section.socket_color,
.avia-section.av-section-color-socket {
  background-color: var(--donker) !important;
  color: var(--wit) !important;
}
.avia-section.socket_color h1,
.avia-section.socket_color h2,
.avia-section.socket_color h3,
.avia-section.socket_color h4,
.avia-section.socket_color p,
.avia-section.av-section-color-socket h1,
.avia-section.av-section-color-socket h2,
.avia-section.av-section-color-socket h3,
.avia-section.av-section-color-socket h4,
.avia-section.av-section-color-socket p {
  color: var(--wit) !important;
}
.avia-section.socket_color a,
.avia-section.av-section-color-socket a {
  color: var(--licht) !important;
}
.avia-section.socket_color a:hover,
.avia-section.av-section-color-socket a:hover {
  color: var(--wit) !important;
}

/* Zalmroze CTA-sectie (#C9756B achtergrond via Avia kleurinstelling) */
.avia-section[style*="#C9756B"],
.avia-section[style*="rgb(201, 117, 107)"],
.avia-section[style*="#c9756b"] {
  color: var(--wit) !important;
}
.avia-section[style*="#C9756B"] h1,
.avia-section[style*="#C9756B"] h2,
.avia-section[style*="#C9756B"] h3,
.avia-section[style*="#C9756B"] p,
.avia-section[style*="rgb(201, 117, 107)"] h1,
.avia-section[style*="rgb(201, 117, 107)"] h2,
.avia-section[style*="rgb(201, 117, 107)"] h3,
.avia-section[style*="rgb(201, 117, 107)"] p {
  color: var(--wit) !important;
}

/* Achtergrondkleur op sectieniveau voor de roze-creme kaartensectie */
.avia-section.avia-section-roze-kaart {
  background-color: var(--roze-sectie) !important;
}

/* ================================================
   SECTIE BINNENPAGINA-KOP (hero header met achtergrondafbeelding)
   Avia-section met background image + overlay
   ================================================ */
.avia-section.avia-full-stretch,
.avia-section[style*="background-image"] {
  position: relative;
}

/* Donkere overlay op afbeeldingssecties (class toe te voegen in Avia builder) */
.avia-section.av-section-overlay-donker::before,
.avia-section.av-dark-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(107, 39, 55, 0.1);
  z-index: 1;
  pointer-events: none;
}
.avia-section.av-section-overlay-donker .container,
.avia-section.av-dark-overlay .container {
  position: relative;
  z-index: 2;
}

/* Witte tekst in afbeeldingssecties op hero */
.avia-section.avia-full-stretch.socket_color h1,
.avia-section.avia-full-stretch.socket_color h2,
.avia-section.avia-full-stretch.socket_color p,
.avia-section.avia-full-stretch.av-section-color-socket h1,
.avia-section.avia-full-stretch.av-section-color-socket h2,
.avia-section.avia-full-stretch.av-section-color-socket p {
  color: var(--wit) !important;
  text-shadow:
    0 2px 18px rgba(40, 15, 10, 0.65),
    0 1px 4px rgba(40, 15, 10, 0.5);
}

/* ================================================
   ENFOLD HEADING ELEMENT (.av-special-heading)
   ================================================ */
body .av-special-heading .av-special-heading-tag {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  line-height: 1.25;
  font-weight: 700;
}

/* Koppen in donkere secties */
.socket_color body .av-special-heading .av-special-heading-tag,
.socket_color .av-special-heading .av-special-heading-tag,
.av-section-color-socket .av-special-heading .av-special-heading-tag {
  color: var(--wit) !important;
}

/* Decoratieve streep onder sectiekoppen */
.special-heading-border,
.av-special-heading-h2 .special-heading-border,
.av-special-heading-h3 .special-heading-border {
  border-color: var(--antiek) !important;
}

/* Subheading / ondertitel */
.av-subheading,
.av-subheading p {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  font-size: 1.03rem;
}

/* ================================================
   ICON BOX (.iconbox)
   ================================================ */
#top .iconbox {
  background: var(--wit);
  border-radius: 20px;
  box-shadow: 0 4px 24px var(--schaduw);
  border-top: 5px solid var(--licht);
  padding: 36px 28px;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
#top .iconbox:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px var(--schaduw2);
}

#top .iconbox .iconbox_icon {
  background: var(--creme) !important;
  border: 2px solid var(--licht) !important;
  border-radius: 50%;
  color: var(--donker) !important;
  transition: background 0.2s;
}
#top .iconbox:hover .iconbox_icon {
  background: var(--licht) !important;
}

#top .iconbox .iconbox_content_title {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  font-weight: 700;
}

#top .iconbox .iconbox_content p {
  color: var(--donker);
  font-size: 0.95rem;
}

/* ================================================
   ICON LIST (.avia-icon-list, .iconlist_icon)
   ================================================ */
#top .avia-icon-list .iconlist_icon {
  color: var(--antiek) !important;
}
#top .avia-icon-list .iconlist_title {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  font-weight: 700;
}
#top .avia-icon-list .iconlist_content_wrap {
  color: var(--donker);
}

/* ================================================
   TESTIMONIALS (.avia-testimonial)
   ================================================ */
#top .avia-testimonial {
  background: var(--wit) !important;
  border-radius: 20px;
  border-top: 5px solid var(--licht) !important;
  box-shadow: 0 4px 24px var(--schaduw);
  padding: 32px 28px;
}

#top .avia-testimonial .avia-testimonial-content {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  font-size: 0.97rem;
  line-height: 1.75;
}

#top .avia-testimonial .avia-testimonial-content blockquote,
#top .avia-testimonial .avia-testimonial-content p {
  color: var(--donker) !important;
}

#top .avia-testimonial .avia-testimonial-meta {
  border-top: 1px solid var(--creme);
  margin-top: 18px;
  padding-top: 14px;
}

#top .avia-testimonial .avia-testimonial-name {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  font-weight: 700;
  font-size: 0.97rem;
}

#top .avia-testimonial .avia-testimonial-subtitle {
  color: var(--antiek);
  font-size: 0.87rem;
}

/* Grote testimonials (slider) */
#top .av-large-testimonial-slider .avia-testimonial {
  border-top: none !important;
  box-shadow: none;
  background: transparent !important;
}

/* Testimonial in donkere sectie */
.socket_color #top .avia-testimonial,
.av-section-color-socket #top .avia-testimonial {
  background: rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.25) !important;
}
.socket_color #top .avia-testimonial .avia-testimonial-content p,
.socket_color #top .avia-testimonial .avia-testimonial-name,
.av-section-color-socket #top .avia-testimonial .avia-testimonial-content p,
.av-section-color-socket #top .avia-testimonial .avia-testimonial-name {
  color: var(--wit) !important;
}

/* ================================================
   PROGRESS BAR (.avia-progress-bar)
   ================================================ */
#top .avia-progress-bar {
  border-radius: 8px !important;
  overflow: hidden;
  background: var(--creme) !important;
}
#top .avia-progress-bar .progress {
  background: var(--creme) !important;
  box-shadow: none !important;
  border: none !important;
}
#top .avia-progress-bar div.progress .bar,
#top .avia-progress-bar .progress-bar {
  background: var(--antiek) !important;
  border-radius: 8px !important;
}
#top .avia-progress-bar .avia-progressbar-title {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  font-weight: 600;
}

/* ================================================
   TABS (.tabcontainer)
   ================================================ */
#top .tabcontainer .tab_titles {
  border-bottom: 2px solid var(--licht) !important;
  background: transparent !important;
}

#top .tabcontainer .tab_titles li a {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  transition:
    color 0.2s,
    border-color 0.2s;
}

#top .tabcontainer .tab_titles li a:hover {
  color: var(--antiek) !important;
}

#top .tabcontainer .tab_titles li.active_tab a,
#top .tabcontainer .tab_titles li.active a {
  color: var(--donker) !important;
  border-bottom-color: var(--antiek) !important;
  font-weight: 700;
}

#top .tabcontainer .tab_content {
  background: var(--wit) !important;
  border: 1px solid var(--licht) !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px;
  font-family: var(--font) !important;
  color: var(--donker) !important;
}

/* ================================================
   ACCORDION / TOGGLE (.toggle_wrap, .toggler)
   ================================================ */
#top .toggle_wrap .toggler {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  font-weight: 700 !important;
  background: var(--creme) !important;
  border-bottom: 2px solid var(--licht) !important;
  padding: 14px 18px;
  border-radius: 8px;
  transition:
    background 0.2s,
    color 0.2s;
}

#top .toggle_wrap .toggler:hover,
#top .toggle_wrap .toggler.active_toggle {
  background: var(--licht) !important;
  color: var(--donker) !important;
}

#top .toggle_wrap .toggle_content {
  background: var(--wit) !important;
  border: 1px solid var(--licht);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 18px;
  font-family: var(--font) !important;
  color: var(--donker) !important;
}

/* ================================================
   PROMO BOX / CALLOUT (.av_promobox)
   ================================================ */
.av_promobox {
  border-radius: 18px;
  box-shadow: 0 4px 24px var(--schaduw);
  background: var(--wit) !important;
  border: 2px solid var(--licht);
  padding: 36px 32px;
}

.av_promobox .av_promobox_content_element {
  font-family: var(--font) !important;
  color: var(--donker) !important;
}

.av_promobox .av_promobox_content_element h3,
.av_promobox .promobox_heading {
  font-family: var(--font) !important;
  color: var(--donker) !important;
  font-weight: 700;
}

/* ================================================
   BLOKCITAAT / BLOCKQUOTE
   ================================================ */
#top blockquote {
  font-family: var(--font) !important;
  border:none;
  padding: 16px 22px;
  background: var(--creme);
  border-radius: 10px;
  font-size: 1.05rem;
  color: var(--donker) !important;
  margin-bottom: 0.9rem;
}

/* Citaatbalk (donkere sectie met grote quote) */
.avia-section.socket_color blockquote,
.avia-section.av-section-color-socket blockquote {
  background: transparent;
  border-left-color: var(--licht);
  color: var(--wit) !important;
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.45;
  padding: 0;
  border-left: none;
  border-radius: 0;
}

/* ================================================
   ENFOLD HR / DIVIDER
   ================================================ */
.hr_content,
.hr_content_inner {
  border-color: var(--licht) !important;
}

.hr_content.av-accent-border,
#top .av-special-heading .special-heading-divider {
  border-color: var(--antiek) !important;
}

/* ================================================
   AFBEELDINGEN
   ================================================ */
/* Ronde portretfoto (Enfold 'circular' stijl) */
#top .avia-image-container.av-styling-round img,
#top .avia_image.av-styling-round img {
  border-radius: 50%;
  box-shadow: 0 8px 36px var(--schaduw2);
  border: 5px solid var(--licht);
}

/* Afbeeldingen met Enfold drop-shadow stijl */
#top .avia-image-container.av-styling-shadow img {
  box-shadow: 0 8px 36px var(--schaduw2);
  border-radius: 18px;
}

/* Content-afbeeldingen */
#top .entry-content-wrapper img,
#top .avia_textblock img {
  max-width: 100%;
  height: auto;
}

/* WP caption-box */
#top .wp-caption {
  border-color: var(--licht) !important;
  border-radius: 8px;
  background: var(--creme);
}
#top .wp-caption-text,
#top .wp-caption .wp-caption-dd {
  font-family: var(--font) !important;
  color: var(--donker);
  font-size: 0.82rem;
}

/* ================================================
   EXTRA LAYOUT-KLASSEN (vervangen inline grid styles)
   ================================================ */

/* Pakket blokken – anders-opvoeden.html */
#top .pakket-blok {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
}

/* Praktische details – ander-ouderschap.html (3 kolommen) */
#top .praktische-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

/* 4-kolommen kenmerken – over-mij.html */
#top .typeert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 40px auto 0;
  max-width: 1000px;
}

/* Contact-kaarten raster (2 kolommen) */
#top .contact-kaarten-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}

/* Individuele contactkaart */
#top .contact-kaart {
  background: #F2D9D3;
  border-radius: 16px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

#top .contact-kaart__icoon {
  width: 44px;
  height: 44px;
  background: var(--wit);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

#top .contact-kaart h3      { font-size: .95rem; margin-bottom: 4px; }
#top .contact-kaart p       { font-size: .88rem; margin: 0; }
#top .contact-kaart__subtext { font-size: .78rem; opacity: .7; margin-top: 3px; }

/* ================================================
   FORMULIEREN (Enfold Contact / Gravity Forms)
   ================================================ */
#top .avia_ajax_form input[type="text"],
#top .avia_ajax_form input[type="email"],
#top .avia_ajax_form input[type="tel"],
#top .avia_ajax_form input[type="url"],
#top .avia_ajax_form textarea,
#top .avia_ajax_form select,
#top input[type="text"],
#top input[type="email"],
#top input[type="tel"],
#top input[type="url"],
#top input[type="password"],
#top textarea,
#top select {
  padding: 13px 17px !important;
  border: 2px solid var(--licht) !important;
  border-radius: 10px !important;
  font-family: var(--font) !important;
  font-size: 0.97rem !important;
  color: var(--donker) !important;
  background: var(--wit) !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

#top .avia_ajax_form input[type="text"]:focus,
#top .avia_ajax_form input[type="email"]:focus,
#top .avia_ajax_form textarea:focus,
#top input[type="text"]:focus,
#top input[type="email"]:focus,
#top textarea:focus,
#top select:focus {
  border-color: var(--antiek) !important;
  box-shadow: 0 0 0 3px rgba(193, 135, 107, 0.18) !important;
  outline: none;
}

/* Labels */
#top .avia_ajax_form label,
#top .gfield label,
#top label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--donker);
  font-family: var(--font);
  letter-spacing: 0.04em;
}

/* Validatiestatus */
#top #wrap_all .valid .text_input,
#top #wrap_all .valid .text_area {
  border-color: #6b8f5a !important;
}
#top #wrap_all .error .text_input,
#top #wrap_all .error .text_area {
  border-color: #b84848 !important;
}

/* Verzend-knop in contact-formulier */
#top .avia_ajax_form input[type="submit"],
#top .avia_ajax_form .avia-button-default-style,
#top .avia_ajax_form .avia-button {
  background-color: var(--antiek) !important;
  border-color: var(--antiek) !important;
  color: var(--wit) !important;
  border-radius: 36px !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  padding: 14px 36px !important;
  border-bottom: none !important;
  transition:
    background 0.2s,
    transform 0.2s !important;
}
#top .avia_ajax_form input[type="submit"]:hover,
#top .avia_ajax_form .avia-button-default-style:hover {
  background-color: var(--hover) !important;
  border-color: var(--hover) !important;
  transform: translateY(-2px);
}



/* ================================================
   CONTACT PAGINA
   ================================================ */

#top .social-icons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

#top .social-icon {
  width: 38px; height: 38px;
  background: rgba(244,240,224,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

#top .social-icon:hover { background: var(--antiek); }

#top .social-icon svg {
  width: 17px; height: 17px;
  fill: var(--creme);
}

#top .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}

#top .contact-info-blok { position: sticky; top: 86px; }

#top .contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}

#top .contact-item__icoon {
  width: 46px; height: 46px;
  background: var(--licht);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

#top .contact-item h3 { font-size: .93rem; margin-bottom: 3px; }
#top .contact-item p  { font-size: .9rem; margin: 0; }

/* Koppen in contactblok */
#top .contact-grid__kop    { font-size: 1.6rem; margin-bottom: 24px; }
#top .formulier-blok__kop  { font-size: 1.5rem; margin-bottom: 8px; }
#top .formulier-blok__intro { margin-bottom: 28px; font-size: .95rem; }

/* Foto-wrapper */
#top .contact-foto-wrapper {
  margin-top: 32px;
  text-align: center;
}
#top .contact-foto-wrapper img {
  max-width: 400px;
  width: 100%;
  border-radius: 20px;
  display: block;
  margin: 0 auto;
}

/* Social sectie */
#top .contact-social { margin-top: 28px; }
#top .contact-social__kop {
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--donker);
}

/* Social icons (contactpagina – lichte achtergrond, donkere iconen) */
#top .contact-info-blok .social-icon {
  background: var(--licht);
}
#top .contact-info-blok .social-icon svg {
  fill: var(--donker);
  width: 17px;
  height: 17px;
}
#top .contact-info-blok .social-icon--outline svg {
  fill: none;
  stroke: var(--donker);
  stroke-width: 1.5px;
}

/* Formulierblok (crème kaart) */
#top .formulier-blok {
  background: var(--creme);
  border-radius: 20px;
  padding: 44px 40px;
  box-shadow: 0 4px 28px var(--schaduw);
}
#top .formulier-blok button[type="submit"] { width: 100%; }

/* Verplicht-marker */
.vereist { color: var(--antiek); }

/* Checkbox-rij */
#top .veld--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}
#top .veld--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--antiek);
}
#top .veld--checkbox label {
  font-weight: 400;
  cursor: pointer;
}

/* Kennismaking-blok */
#top .kennismaking-blok {
  background: linear-gradient(135deg, var(--licht) 0%, #f0c8c8 100%);
  border-radius: 20px;
  padding: 32px;
  margin-top: 24px;
  text-align: center;
}
#top .kennismaking-blok__kop     { font-size: 1.2rem; margin-bottom: 10px; }
#top .kennismaking-blok__tekst   { font-size: .93rem; margin-bottom: 18px; }
#top .kennismaking-blok__contact { font-size: .9rem; font-weight: 600; color: var(--donker); }

/* formulier */
#top .formulier__rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

#top .veld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

#top .veld label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--donker);
  letter-spacing: .04em;
}

#top .veld input,
#top .veld textarea,
#top .veld select {
  padding: 13px 17px;
  border: 2px solid var(--licht);
  border-radius: 10px;
  font-family: var(--font);
  font-size: .97rem;
  color: var(--tekst);
  background: var(--wit);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

#top .veld input:focus,
#top .veld textarea:focus,
#top .veld select:focus {
  border-color: var(--antiek);
  box-shadow: 0 0 0 3px rgba(193,135,107,.18);
}

#top .veld textarea { resize: vertical; min-height: 140px; }

/* ================================================
   GRAVITY FORMS
   ================================================ */
#top .gform_wrapper input[type="text"],
#top .gform_wrapper input[type="email"],
#top .gform_wrapper input[type="tel"],
#top .gform_wrapper input[type="url"],
#top .gform_wrapper input[type="number"],
#top .gform_wrapper textarea,
#top .gform_wrapper select {
  min-height: 50px;
  padding: 13px 17px !important;
  border: 2px solid var(--licht) !important;
  border-radius: 10px !important;
  font-family: var(--font) !important;
  font-size: 0.97rem !important;
  color: var(--donker) !important;
  background: var(--wit) !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

#top .gform_wrapper input:focus,
#top .gform_wrapper textarea:focus,
#top .gform_wrapper select:focus {
  border-color: var(--antiek) !important;
  box-shadow: 0 0 0 3px rgba(193, 135, 107, 0.18) !important;
  outline: none;
}

#top .gform_wrapper .gfield_label {
  font-family: var(--font) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--donker) !important;
  letter-spacing: 0.04em;
}

#top .gform_wrapper .gform_footer input[type="submit"],
#top .gform_wrapper .gform_page_footer input[type="submit"] {
  background-color: var(--antiek) !important;
  border: none !important;
  border-radius: 36px !important;
  color: var(--wit) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 14px 36px !important;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
#top .gform_wrapper .gform_footer input[type="submit"]:hover {
  background-color: var(--hover) !important;
  transform: translateY(-2px);
}

#top .gform_wrapper .validation_error,
#top .gform_wrapper .gfield_description.validation_message {
  color: #b84848 !important;
  border-left: 3px solid #b84848;
  padding-left: 10px;
  font-size: 0.88rem;
}

#top .gform_wrapper .gfield_required {
  color: var(--antiek) !important;
}

/* ================================================
   BLOG / BERICHTEN
   ================================================ */
#top .av-blog-entry .entry-title a {
  color: var(--donker) !important;
  font-family: var(--font) !important;
}
#top .av-blog-entry .entry-title a:hover {
  color: var(--antiek) !important;
}
#top .av-blog-entry {
  border-color: var(--licht) !important;
  background: var(--wit);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px var(--schaduw);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
#top .av-blog-entry:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--schaduw2);
}
#top .av-blog-entry .av-blog-meta-rating,
#top .av-blog-entry .av-blog-meta,
#top .av-blog-entry .av-blog-meta a {
  color: var(--antiek) !important;
  font-family: var(--font) !important;
}
#top .av-blog-entry .entry-excerpt p {
  color: var(--donker);
  font-size: 0.93rem;
}

/* Lees-meer link */
#top .av-blog-entry .read-more-link,
#top .av-blog-entry .more-link {
  color: var(--antiek) !important;
  font-weight: 700;
}
#top .av-blog-entry .read-more-link:hover,
#top .av-blog-entry .more-link:hover {
  color: var(--donker) !important;
}

/* ================================================
   PORTFOLIO-ITEMS
   ================================================ */
#top .portfolio-entry .portfolio-entry-img-wrap {
  border-radius: 18px;
  overflow: hidden;
}
#top .portfolio-entry .portfolio-entry-title a {
  font-family: var(--font) !important;
  color: var(--donker) !important;
}
#top .portfolio-entry .portfolio-entry-title a:hover {
  color: var(--antiek) !important;
}

/* ================================================
   MASONRY / GRID ITEMS
   ================================================ */
#top .av-masonry-entry .inner-entry {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px var(--schaduw);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
#top .av-masonry-entry:hover .inner-entry {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--schaduw2);
}

/* ================================================
   SCROLL-NAAR-BOVEN KNOP
   ================================================ */
#scroll-top-link {
  background: var(--antiek) !important;
  color: var(--wit) !important;
  border-radius: 50%;
  transition: background 0.2s;
}
#scroll-top-link:hover {
  background: var(--donker) !important;
}

/* ================================================
   ZOEKBALK
   ================================================ */
#top .avia-search-tooltip .search-field,
#top .header-search input[type="search"] {
  border: 2px solid var(--licht) !important;
  border-radius: 24px !important;
  font-family: var(--font) !important;
  color: var(--donker) !important;
  background: var(--wit) !important;
  padding: 8px 16px !important;
}
#top .avia-search-tooltip .search-submit,
#top .header-search button[type="submit"] {
  background: var(--antiek) !important;
  color: var(--wit) !important;
  border-radius: 50%;
}
#top .avia-search-tooltip .search-submit:hover {
  background: var(--donker) !important;
}

/* ================================================
   TABEL
   ================================================ */
#top table {
  font-family: var(--font);
  font-size: 0.95rem;
}
#top th {
  background: var(--donker) !important;
  color: var(--wit) !important;
  border-color: rgba(107, 39, 55, 0.3) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 12px 16px;
}
#top td {
  border-color: var(--licht) !important;
  padding: 11px 16px;
  color: var(--donker);
}
#top tr:nth-child(even) td {
  background: var(--creme);
}


/* ================================================
   STAPPEN
   ================================================ */
#top .stappen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}

#top .stap {
  text-align: center;
  padding: 28px 16px;
}

#top .stap__num {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--licht);
  line-height: 1;
  margin-bottom: 12px;
}

#top .stap h3 { font-size: 1.05rem; margin-bottom: 8px; }
#top .stap p  { font-size: .92rem; margin: 0; }

/* ================================================
   FOOTER (#footer + #socket)
   ================================================ */
#footer {
  background-color: var(--footer-bg) !important;
  color: var(--creme) !important;
  padding-top: 60px;
  padding-bottom: 28px;
}

/* Widget-titels */
#footer .widget_title,
#footer .widgettitle {
  font-family: var(--font) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--licht) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Headings in footer */
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6 {
  color: var(--licht) !important;
}

/* Tekst & lijstitems */
#footer .widget,
#footer p,
#footer li,
#footer span:not([class]) {
  color: var(--creme);
  font-size: 0.87rem;
  line-height: 1.65;
}

/* Links in footer */
#footer a {
  color: var(--creme) !important;
  opacity: 0.72;
  font-size: 0.88rem;
  transition:
    opacity 0.2s,
    color 0.2s;
}
#footer a:hover {
  opacity: 1;
  color: var(--licht) !important;
}

/* Social icons in footer */
#footer .social_bookmarks li a {
  background: rgba(244, 240, 224, 0.1) !important;
  border-radius: 50%;
  transition: background 0.2s;
}
#footer .social_bookmarks li a:hover {
  background: var(--antiek) !important;
}

/* Aangepaste footer HTML-widget klassen */
#footer .footer__logo {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--licht);
  margin-bottom: 12px;
}

#footer .footer__beschr {
  font-size: 0.87rem;
  opacity: 0.75;
  line-height: 1.65;
  max-width: 300px;
}

#footer .footer__kop {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--licht);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

#footer .footer__lijst {
  list-style: none;
}

#footer .footer__lijst li {
  margin-bottom: 8px;
}

#footer .footer__lijst a {
  color: var(--creme);
  opacity: 0.72;
  font-size: 0.88rem;
  transition:
    opacity 0.2s,
    color 0.2s;
}

#footer .footer__lijst a:hover {
  opacity: 1;
  color: var(--licht);
}

#footer .social-icons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

#footer .social-icon {
  width: 38px;
  height: 38px;
  background: rgba(244, 240, 224, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#footer .social-icon:hover {
  background: var(--antiek);
}

#footer .social-icon svg {
  width: 17px;
  height: 17px;
  fill: var(--creme);
}

#footer .footer__bodem {
  border-top: 1px solid rgba(244, 240, 224, 0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.79rem;
  opacity: 0.5;
  flex-wrap: wrap;
  gap: 8px;
}

#footer .widgettitle {
  margin-top:0;
}

/* Onderste balk (#socket) */
#socket {
  background-color: var(--footer-bg) !important;
  border-top: 1px solid rgba(244, 240, 224, 0.12) !important;
  color: var(--creme) !important;
  font-size: 0.79rem !important;
}
#socket a,
#socket .copyright {
  color: var(--creme) !important;
  opacity: 0.7;
}
#socket a:hover {
  color: var(--licht) !important;
  opacity: 1;
}

/* ================================================
   COOKIE CONSENT (Enfold ingebouwd)
   ================================================ */
#top .avia-cookie-consent-modal {
  background: var(--footer-bg) !important;
  color: var(--creme) !important;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
}
#top .avia-cookie-consent-modal p,
#top .avia-cookie-consent-modal li {
  color: var(--creme) !important;
  font-family: var(--font) !important;
}
#top .avia-cookie-consent-modal a {
  color: var(--licht) !important;
  text-decoration: underline;
}
#top .avia-cookie-consent-modal-buttons-wrap .avia-button {
  font-family: var(--font) !important;
  border-radius: 36px !important;
}
/* Accepteer-knop */
#top
  .avia-cookie-consent-modal-buttons-wrap
  .avia-button.avia-color-theme-color {
  background-color: var(--antiek) !important;
  border-color: var(--antiek) !important;
  color: var(--wit) !important;
}
/* Weigeren-knop */
#top .avia-cookie-consent-modal-buttons-wrap .avia-button.avia-color-light {
  border-color: var(--creme) !important;
  color: var(--creme) !important;
  background: transparent !important;
}
#top
  .avia-cookie-consent-modal-buttons-wrap
  .avia-button.avia-color-light:hover {
  background: var(--creme) !important;
  color: var(--donker) !important;
}

/* Privacy toggle track (aan = groen/copper) */
#top .av-toggle-switch input[type="checkbox"]:checked + .toggle-track {
  background: var(--antiek) !important;
}

/* ================================================
   CONTAINER WRAP – KLEURKLASSEN (paginastructuur)
   De `.container_wrap` met kleurvarianten bepalen de
   achtergrond van de structurele paginawrappers.
   ================================================ */

#top .container_wrap {
  border-color: transparent !important;
}   

/* Paginaachtergrond (hoofdcontent, default secties) */
#top .container_wrap.main_color,
#top .container_wrap.av-section-color-main,
#top #main .container_wrap_first {
  background-color: var(--achtergrond);
}

/* Crème/roze alternatieve achtergrond */
#top .container_wrap.alternate_color:not(.title_container) {
  background-color: var(--creme);
}

/* Footer-containerwrapper */
#top .container_wrap.footer_color {
  background-color: var(--footer-bg);
}

/* Socket (onderste balk) */
#top .container_wrap.socket_color {
  background-color: var(--footer-bg);
}

/* ================================================
   SIDEBAR & WIDGETS
   ================================================ */

/* Content-rand (border tussen content en sidebar) */
#top #main .content {
  border-right-color: var(--licht) !important;
}
#top #main .sidebar_left .content {
  border-left-color: var(--licht) !important;
}

/* Sidebar container */
#top .inner_sidebar {
  font-family: var(--font);
}

/* Widget-titels in sidebar (niet in footer) */
#top .sidebar .widgettitle,
#top aside.sidebar .widget_title {
  font-family: var(--font) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--donker) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Algemene widgettitels (inclusief footer) */
.widgettitle {
  font-family: var(--font);
  color: inherit;
}

/* Sidebar widget-links */
#top .sidebar .widget a,
#top aside.sidebar a {
  color: var(--antiek) !important;
  transition: color 0.2s;
}
#top .sidebar .widget a:hover,
#top aside.sidebar a:hover {
  color: var(--donker) !important;
}

/* Sidebar widget-lijstitems */
#top .sidebar .widget li,
#top aside.sidebar li {
  font-family: var(--font) !important;
  color: var(--donker);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Seperator (dunne scheidingslijn tussen widgets) */
#top .seperator.extralight-border {
  border-top-color: var(--licht) !important;
  border-bottom-color: var(--licht) !important;
}
#top #footer .seperator.extralight-border {
  border-top-color: rgba(244, 240, 224, 0.12) !important;
}

/* ================================================
   ADMIN BAR – STICKY HEADER OFFSET CORRECTIE
   Wanneer de admin-balk zichtbaar is (WP backend)
   verschuift de html 32px omlaag; compenseer de
   sticky-header padding.
   ================================================ */
.admin-bar.html_header_top.html_header_sticky #main {
  padding-top: 90px; /* Enfold en WP admin bar regelen dit zelf */
}

/* ================================================
   HEADER SHRINK STATE
   Enfold verkleint de header bij scrollen via JS.
   Zorg dat de header-achtergrond altijd wit blijft.
   ================================================ */
#top #header.header-scrolled,
#top.html_header_shrinking #header,
#top #header.header-scrolled #header_main,
#top.html_header_shrinking #header #header_main {
  background: var(--wit) !important;
  background-color: var(--wit) !important;
  box-shadow: 0 2px 16px var(--schaduw) !important;
}

/* Zoekveld in navigatie (header search icon) */
#top .avia-search-tooltip {
  background: var(--wit) !important;
  box-shadow: 0 8px 28px var(--schaduw2) !important;
  border-radius: 8px;
}

/* ================================================
   WP GUTENBERG BLOCK STIJLEN – conflict prevention
   `a:where(:not(.wp-element-button)){ text-decoration: underline }`
   in global-styles-inline-css overschrijft onze link-stijl niet
   omdat #top a hogere specificiteit heeft, maar we zetten het
   hier expliciet voor de zekerheid.
   ================================================ */
#top a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

/* WP block heading achtergronden: padding aanpassen aan huisstijl */
#top h1.has-background,
#top h2.has-background,
#top h3.has-background,
#top h4.has-background {
  border-radius: 8px;
}

/* ================================================
   KAARTEN
   ================================================ */
#top .kaarten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
}

#top .kaart {
  background: var(--wit);
  border-radius: 20px;
  padding: 38px 32px;
  box-shadow: 0 4px 24px var(--schaduw);
  border-top: 5px solid var(--licht);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

#top .kaart:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px var(--schaduw2);
}

#top .kaart--roze {
  background: #c9756b;
  border-top-color: #a85c52;
}

.kaart--roze h3,
.kaart--roze p,
.kaart--roze li {
  color: var(--wit);
}

#top .kaart--roze .kaart__icoon {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}

#top .kaart--roze .kaart__link {
  color: var(--wit);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
#top .kaart--roze .kaart__link:hover {
  border-bottom-color: var(--wit);
}

#top .kaart__icoon {
  width: 58px;
  height: 58px;
  background: var(--creme);
  border: 2px solid var(--licht);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

#top .kaart h3 {
  font-size: 1.15rem;
  margin-bottom: 14px;
}

#top .kaart ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 16px;
}

#top .kaart ul li {
  padding: 7px 0;
  border-bottom: 1px solid var(--creme);
  font-size: 0.93rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

#top .kaart ul li::before {
  content: "◆";
  color: var(--antiek);
  font-size: 0.65rem;
  margin-top: 5px;
  flex-shrink: 0;
}

/* ================================================
   TWEE KOLOMMEN
   ================================================ */
#top .tweekolom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

#top .tweekolom--flip .tweekolom__media { order: 2; }
#top .tweekolom--flip .tweekolom__tekst { order: 1; }

#top .tweekolom__tekst h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: 16px; }


/* ================================================
   CITAAT / BANNER
   ================================================ */
#top .citaat-balk {
  background: var(--donker);
  padding: 70px 28px;
  text-align: center;
}

#top .citaat-balk blockquote {
  font-size: clamp(1.25rem, 2.8vw, 1.9rem) !important;
  font-weight: 700 !important;
  color: var(--wit) !important;
  max-width: 740px !important;
  margin: 0 auto !important;
  background: var(--donker) !important;
  line-height: 1.45 !important;
  border: none !important;
}

#top .citaat-balk cite {
  display: block;
  margin-top: 20px;
  color: var(--creme) !important;
  font-size: 0.85rem !important;
  font-style: normal !important;
  letter-spacing: 0.1em !important;
}

#top .citaat-balk p {
  margin:0!important;
  font-size: inherit!important;
}

/* ================================================
   OVER INGRID (homepage blok)
   ================================================ */
#top .ingrid-blok {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 64px;
  align-items: center;
}

#top .ingrid-foto-wrapper {
  display: flex;
  justify-content: center;
}

#top .ingrid-foto {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 5/7;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 50%;
  box-shadow: 0 8px 36px var(--schaduw2);
  border: 5px solid var(--licht);
}

/* ================================================
   CTA SECTIE
   ================================================ */
#top .cta-sectie {
  background: #eecfc4;
  padding: 90px 28px;
  text-align: center;
}

#top .cta-sectie h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom: 16px;
  color: var(--wit)!important;
}
#top .cta-sectie p {
  max-width: 540px;
  margin: 0 auto 32px;
  font-size: 1.03rem;
  color: rgba(255, 255, 255, 0.92)!important;
}

/* ================================================
   RESPONSIEF – tablet (≤ 1000 px)
   ================================================ */
@media (max-width: 1000px) {
  .avia-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}



/* ================================================
   RESPONSIEF – mobiel (≤ 768 px)
   ================================================ */
@media (max-width: 768px) {
  /* Header */
  #header_main .container,
  #header_main .av-logo-container {
    height: 70px;
  }
  .html_header_top.html_header_sticky #main {
    padding-top: 70px;
  }
  #top #header .logo img,
  #top #header .logo a img {
    max-height: 56px;
  }

  /* Secties */
  .avia-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  /* Knoppen: voldoende tik-doel */
  body div .avia-button {
    min-height: 48px;
    padding: 14px 28px !important;
  }
  .avia-button.avia-size-large,
  .avia-button.avia-size-x-large {
    padding: 15px 32px !important;
    font-size: 1rem !important;
  }

  /* Icon box */
  #top .iconbox {
    padding: 24px 20px;
  }

  /* Navigatie */
  #top .main_menu ul:first-child > li:not(.av-burger-menu-main) {
    height: 70px !important;
  }
  #top .main_menu ul:first-child > li > a {
    font-size: 1rem !important;
    padding: 12px 16px !important;
  }

  /* Hamburger tonen op mobiel */
  #top .main_menu .av-burger-menu-main {
    display: inline-flex !important;
    align-items: center !important;
    height: 70px !important;
  }
  /* Zoekicoon verbergen op mobiel */
  #top .main_menu .noMobile {
    display: none !important;
  }

  /* Footer */
  #footer {
    padding-top: 40px;
    border: none !important;
  }

  /* Contact pagina */
  #top .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  #top .contact-info-blok {
    position: static;
  }
  #top .formulier__rij {
    grid-template-columns: 1fr;
  }
  #top .formulier-blok {
    padding: 28px 20px;
  }

  /* Sidebar verbergen op mobiel (Enfold stijl) */
  #top .inner_sidebar {
    margin-left: 0;
  }

  #top .ingrid-blok {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  #top .ingrid-foto {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* Admin bar op mobiel (≤ 782px): 46px in plaats van 32px */
@media screen and (max-width: 782px) {
  .admin-bar.html_header_top.html_header_sticky #main {
    padding-top: 70px;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .container {
    width: 100%;
    max-width: 100%;
  }
}


/* ================================================
   RESPONSIEF – mobiel (768px)
   ================================================ */
@media (max-width: 768px) {

  /* --- Navigatie: hamburger --- */
  #top .nav__inner { height: 70px; padding: 0 20px; }
  #top .nav__logo-img { max-height: 56px; }

  #top .nav__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px; left: 0; right: 0;
    background: var(--wit);
    padding: 16px 20px 24px;
    box-shadow: 0 12px 28px var(--schaduw2);
    gap: 2px;
    z-index: 200;
  }
  #top .nav__links.open { display: flex; }
  #top .nav__links a { padding: 12px 16px; font-size: 1rem; }
  #top .nav__links .knop-nav { margin-left: 0; margin-top: 8px; text-align: center; }
  #top .hamburger { display: flex; }

  /* --- Hero --- */
  #top .hero { min-height: 60vh; }
  #top .hero__inhoud { padding: 56px 20px; }
  #top .hero__knoppen { flex-direction: column; align-items: center; }
  #top .hero__knoppen .knop { width: 100%; max-width: 320px; }

  /* --- Secties --- */
  #top .sectie { padding: 52px 20px; }
  #top .citaat-balk { padding: 48px 20px; }
  #top .cta-sectie { padding: 52px 20px; }
  #top .paginakop { padding: 64px 20px 48px; }
  #top .sectie-kop { margin-bottom: 36px; }

  /* --- Kolommen → enkelvoudig --- */
  /* !important om inline grid-template-columns te overschrijven */
  #top .tweekolom { grid-template-columns: 1fr !important; gap: 32px; }
  #top .ingrid-blok { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  #top .ingrid-foto { max-width: 240px; margin: 0 auto; }

  #top .verhaal-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  #top .over-mij-grid { grid-template-columns: 1fr; }
  #top .sticky-foto { position: static; max-width: 300px; margin: 0 auto; }

  /* --- Contact --- */
  #top .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  #top .contact-info-blok { position: static; }
  #top .formulier__rij { grid-template-columns: 1fr; }

  /* --- Kaarten & grids --- */
  #top .kaarten-grid { grid-template-columns: 1fr !important; }
  #top .waarden-grid { grid-template-columns: 1fr; }
  #top .stappen-grid { grid-template-columns: 1fr; }
  #top .pakket-blok  { grid-template-columns: 1fr; text-align: center; }
  #top .pakket-blok img { margin: 0 auto; }
  #top .praktische-grid { grid-template-columns: 1fr; }
  #top .typeert-grid { grid-template-columns: 1fr 1fr; }
  #top .contact-kaarten-grid { grid-template-columns: 1fr; }

  /* --- Footer --- */
  #top .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  #top .footer__beschr { max-width: 100%; }
  #top .footer__bodem { flex-direction: column; text-align: center; gap: 6px; }

  /* --- Knoppen: grote tikdoelen --- */
  #top .knop { min-height: 48px; padding: 14px 28px; }
  #top .knop--groot { padding: 15px 32px; font-size: 1rem; }

  /* --- Foto's: schalen mee --- */
  #top img { max-width: 100%; height: auto; }

  /* Portretfoto over-mij met vaste breedte in inline stijl */
  #top .tweekolom__media img,
  #top .verhaal-grid img { width: 100% !important; height: auto !important; max-width: 340px; margin: 0 auto; }

  /* --- Tekstgrootte leesbaar houden --- */
  #top .paginakop h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  #top .hero__inhoud h1 { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  #top .hero__ondertitel { font-size: 1rem; }
  #top .citaat-balk blockquote { font-size: clamp(1.1rem, 4.5vw, 1.5rem); }

  #footer, #socket {
    padding:20px 40px 20px 40px;
  }
}