.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================
   OMA TOOS — Speelse Oer-Hollandse Hero
   Plak dit in: Elementor > Site Settings > Custom CSS
   (of voeg toe aan je oma-toos.css)
   ===================================================== */

.ot-hh-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Bovenste en onderste Delftsblauwe tegelband */
.ot-hh-tile-strip {
  width: 100%;
  height: 40px;
  background-color: #EA4E38;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' viewBox='0 0 60 40'><g fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='.7'><path d='M30 8 Q24 12 22 18 Q26 22 30 20 Q34 22 38 18 Q36 12 30 8 Z' fill='%23ffffff' fill-opacity='.3'/><circle cx='30' cy='30' r='1.5' fill='%23ffffff' fill-opacity='.6'/><path d='M10 20 L18 20 M42 20 L50 20' stroke-linecap='round'/></g></svg>");
  background-repeat: repeat-x;
  background-size: 60px 40px;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.15), inset 0 2px 0 rgba(255,255,255,.15);
}

/* Het ornamentele witte kader met Delftsblauwe hoeken */
.ot-hh-frame {
  max-width: 880px;
  margin: 40px auto !important;
  background: rgba(246, 241, 231, 0.04) !important;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 0 !important;
  position: relative;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Decoratieve hoekflourishes — 4 stuks (linksboven, rechtsboven, linksonder, rechtsonder) */
.ot-hh-frame::before,
.ot-hh-frame::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.ot-hh-frame::before {
  top: -2px; left: -2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.8'><path d='M5 35 Q5 5 35 5'/><path d='M12 28 Q12 12 28 12' opacity='.5'/><circle cx='20' cy='20' r='2' fill='%23ffffff'/><path d='M18 18 Q14 14 12 18 Q14 22 18 20 Z' fill='%23ffffff' fill-opacity='.7'/><path d='M22 22 Q26 26 28 22 Q26 18 22 20 Z' fill='%23ffffff' fill-opacity='.7'/></svg>");
}
.ot-hh-frame::after {
  bottom: -2px; right: -2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.8'><path d='M75 45 Q75 75 45 75'/><path d='M68 52 Q68 68 52 68' opacity='.5'/><circle cx='60' cy='60' r='2' fill='%23ffffff'/><path d='M58 58 Q62 54 64 58 Q62 62 58 60 Z' fill='%23ffffff' fill-opacity='.7'/><path d='M54 62 Q50 58 52 54 Q56 56 54 62 Z' fill='%23ffffff' fill-opacity='.7'/></svg>");
}

/* Extra decoratieve hoeken (via nested pseudo — we maken een wrapper-achtige look) */
.ot-hh-section .ot-hh-frame {
  /* border via ::before/::after is al gedaan; voeg binnen-border toe voor "tegel" gevoel */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 0 8px rgba(255,255,255,0.05),
    inset 0 0 0 9px rgba(255,255,255,0.18);
}

/* Kicker script in oranje-geel voor warmte */
.ot-hh-kicker h1,
.ot-hh-kicker h2,
.ot-hh-kicker h3,
.ot-hh-kicker h4,
.ot-hh-kicker h5,
.ot-hh-kicker h6,
.ot-hh-kicker .elementor-heading-title,
.ot-hh-kicker div {
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}

/* Grote titel — massive, bold, met lichte text shadow voor leesbaarheid */
.ot-hh-title .elementor-heading-title {
  text-shadow: 0 4px 40px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  font-variant: small-caps;
}

/* Subtitle italic */
.ot-hh-subtitle .elementor-heading-title {
  font-family: 'Fraunces', serif !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}

/* Divider SVG container */
.ot-hh-divider {
  max-width: 420px;
  margin: 10px auto 26px;
  opacity: .9;
}
.ot-hh-divider svg {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);  /* maakt het wit op de donkere achtergrond */
}

/* CTA buttons row */
.ot-hh-cta-row .elementor-container {
  justify-content: center !important;
}
.ot-hh-cta-row .elementor-button {
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
}

/* Rating badge in tegel-stijl */
.ot-hh-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin: 0 auto;
}
.ot-hh-rating .ot-hh-stars {
  color: #FCD34D;
  letter-spacing: 2px;
  font-size: 16px;
}
.ot-hh-rating strong {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  color: #fff;
}
.ot-hh-rating-label {
  color: rgba(255,255,255,.7);
}

/* Responsive */
@media (max-width: 900px) {
  .ot-hh-section {
    min-height: 85vh !important;
  }
  .ot-hh-frame {
    margin: 20px auto !important;
    padding: 40px 24px !important;
  }
  .ot-hh-frame::before,
  .ot-hh-frame::after {
    width: 50px; height: 50px;
  }
  .ot-hh-title .elementor-heading-title {
    font-size: 72px !important;
  }
  .ot-hh-subtitle .elementor-heading-title {
    font-size: 20px !important;
  }
  .ot-hh-kicker div {
    font-size: 26px !important;
  }
  .ot-hh-divider { max-width: 280px; }
}

/* Extra kleine tulp-silhouetten op de achtergrond voor extra speelsheid */
.ot-hh-section::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 4%;
  width: 80px; height: 140px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200' fill='none'><path d='M60 10 Q40 25 48 55 Q56 50 60 45 Q64 50 72 55 Q80 25 60 10 Z' fill='%23ea4e38' opacity='.5' stroke='%23ffffff' stroke-width='1'/><path d='M60 55 L60 180' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' opacity='.5'/><path d='M60 110 Q30 90 20 120 Q40 125 60 115' fill='%23ffffff' opacity='.25'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .6;
  z-index: 1;
  transform: rotate(-8deg);
  pointer-events: none;
}
.ot-hh-section::after {
  content: '';
  position: absolute;
  bottom: 10%;
  right: 4%;
  width: 80px; height: 140px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200' fill='none'><path d='M60 10 Q40 25 48 55 Q56 50 60 45 Q64 50 72 55 Q80 25 60 10 Z' fill='%23ea4e38' opacity='.5' stroke='%23ffffff' stroke-width='1'/><path d='M60 55 L60 180' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' opacity='.5'/><path d='M60 140 Q100 130 105 160 Q85 165 60 150' fill='%23ffffff' opacity='.25'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .6;
  z-index: 1;
  transform: rotate(10deg);
  pointer-events: none;
}

@media (max-width: 900px) {
  .ot-hh-section::before,
  .ot-hh-section::after { display: none; }
}
/* ===========================================================
   OMA TOOS — Fix voor de "Drie dingen die je écht moet proeven"
   sectie (menu cards) — zorgt dat alle 3 kaarten gelijk zijn.

   Plak dit toe aan Elementor > Site Settings > Custom CSS
   (onder je bestaande CSS)
   =========================================================== */

/* De drie columns waarin de cards zitten op de Home pagina */
.elementor-section .elementor-column:has(.elementor-element-populated) {
  display: flex;
  flex-direction: column;
}

/* Alle menu-card kolommen gelijke hoogte */
.ot-card-col,
.elementor-column.ot-card-col .elementor-widget-wrap,
.elementor-column.ot-card-col .elementor-widget-wrap .elementor-widget,
.elementor-column .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
}

/* Zorg dat elke column die een kaart is een minimale hoogte krijgt
   en de button altijd onderaan staat */
.elementor-column.ot-card-col {
  align-self: stretch;
}

.elementor-column.ot-card-col .elementor-widget-wrap {
  flex: 1 1 auto;
  justify-content: flex-start;
}

/* De button-widget altijd onderaan via margin-top:auto op de
   allerlaatste widget in de card */
.elementor-column.ot-card-col > .elementor-widget-wrap > .elementor-widget-button:last-child {
  margin-top: auto;
}

/* Zorg dat afbeeldingen in de cards altijd dezelfde hoogte hebben */
.elementor-column.ot-card-col .elementor-widget-image,
.elementor-column.ot-card-col .elementor-widget-image img {
  width: 100%;
}
.elementor-column.ot-card-col .elementor-widget-image img {
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* Als je geen ot-card-col class hebt op je columns kun je ook
   de brede fallback gebruiken — alle 3-kolom secties met cards: */
.elementor-section.elementor-section-boxed > .elementor-container > .elementor-column {
  display: flex;
}
.elementor-section.elementor-section-boxed > .elementor-container > .elementor-column > .elementor-widget-wrap {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
}/* End custom CSS */