/*
Theme Name: BTEG Child
Theme URI: https://bteg.local
Description: Child theme van Hello Elementor voor IB Onderwijs in NL. Bevat de globale basis van het originele Claude-design: fonts, reset en de scroll-reveal animatie.
Author: Bridging the Education Gap
Template: hello-elementor
Version: 1.0.0
Text Domain: bteg-child
*/

/* ===== Design-tokens die niet via Elementor kunnen =====
   De kleuren staan als Global Variables in Elementor (Site-instellingen →
   Variabelen) en zijn daar aanpasbaar. Maat-variabelen zijn in Elementor een
   Pro-functie, dus die staan hier.

   --corner bepaalt de grote afgeronde hoeken waarmee de secties in elkaar
   overlopen: dat is de vorm die de overgang tussen de achtergrondkleuren maakt.
   Groter = rondere overgang. */
:root {
  --corner: clamp(60px, 8vw, 120px);
}

@media (max-width: 640px) {
  :root { --corner: clamp(26px, 9vw, 42px); }
}

/* ===== Basis uit het originele design ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Mulish', system-ui, sans-serif;
  color: #2C4A63;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #fff;
}

img { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

a { color: inherit; text-decoration: none; }

::selection { background: #A6CE39; color: #232D3F; }

/* Hello Elementor's container mag de full-bleed secties niet inperken */
.site-main,
.page-content { max-width: none; padding: 0; margin: 0; }

/* Het design wikkelt alles in .site-root met overflow-x:clip. Dat clipt de
   decoratieve bg-patch-blokken die bewust breder zijn dan het scherm.
   'clip' (niet 'hidden') omdat het geen scroll-container maakt en de sticky
   header dus blijft werken. */
html,
body,
.elementor { overflow-x: clip; }

/* ===== Scroll-reveal (identiek aan het design) ===== */
.dc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
.dc-reveal.is-shown {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .dc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* In de Elementor-editor mag niets verborgen zijn: daar wil je alle inhoud
   kunnen zien en aanklikken, ook wat op de site pas bij scrollen verschijnt. */
body.elementor-editor-active .dc-reveal,
body.elementor-editor-active .over-panel {
  opacity: 1 !important;
  transform: none !important;
  display: block !important;
}

/* ===== Xpro Theme Builder wrappers neutraliseren =====
   Xpro wikkelt de header/footer-template in <header><nav>…</nav></header>.
   Die extra lagen mogen geen eigen hoogte of spacing toevoegen: het design
   regelt dat in de template zelf. */
.xpro-theme-builder-header,
.xpro-theme-builder-header-nav,
.xpro-theme-builder-footer,
.xpro-theme-builder-footer-nav {
  margin: 0;
  padding: 0;
  display: block;
  border: 0;
  background: none;
}
.xpro-theme-builder-header .main-title,
.xpro-theme-builder-footer .main-title { display: none; }

/* De template is zelf al position:sticky; de wrapper hoeft dat niet nog eens. */
.xtb-header-sticky { position: static; }

/* ===== Navigatie (header) =====
   De dubbele .elementor is bewust. Elementor's atomic base-style
   `.elementor .e-div-block-base{display:block}` heeft specificiteit (0,2,0) en
   wordt in de editor bovendien als inline <style> geinjecteerd, dus na alles
   wat via een stylesheet binnenkomt. Met .elementor.elementor (0,3,0) wint de
   eigen opmaak zowel op de site als in de editor. */
.elementor.elementor .navd { display: flex; }
.elementor.elementor .navb { display: none; }

.nav-drop { position: relative; }
.nav-drop-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s, transform .15s;
  pointer-events: none;
  padding-top: 12px;
}
.nav-drop:hover .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Mobiel menu */
.dc-mobile-menu {
  position: fixed;
  top: 0; right: 0;
  z-index: 56;
  width: min(86vw, 360px);
  height: 100%;
  background: #fff;
  padding: 86px 26px 26px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: -20px 0 60px -20px rgba(35, 45, 63, .4);
  overflow-y: auto;
}
.dc-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(35, 45, 63, .4);
  backdrop-filter: blur(2px);
  display: none;
}
body.dc-menu-open .dc-mobile-menu,
body.dc-menu-open .dc-mobile-overlay { display: flex; }
body.dc-menu-open { overflow: hidden; }

.dc-mobile-link {
  display: block;
  text-align: left;
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #232D3F;
  padding: 13px 8px;
  border-bottom: 1px solid #e8e3d7;
}
.dc-mobile-link--child {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #5a6773;
  padding: 11px 8px 11px 22px;
}
.dc-mobile-link--child::before {
  content: '';
  width: 14px;
  height: 3px;
  background: #A6CE39;
  border-radius: 2px;
  flex-shrink: 0;
}
.dc-mobile-cta {
  margin-top: 18px;
  background: #A6CE39;
  color: #232D3F;
  font-weight: 800;
  font-size: 16px;
  padding: 15px;
  border-radius: 14px;
  text-align: center;
}

/* ===== Responsive regels uit het design ===== */
@media (max-width: 1000px) {
  .elementor.elementor .navd { display: none !important; }
  .elementor.elementor .navb { display: flex !important; }
}
@media (max-width: 860px) {
  .elementor.elementor .grid2fr { grid-template-columns: 1fr !important; }
  .elementor.elementor .stick-col { position: static !important; top: auto !important; }
}
@media (max-width: 640px) {
  .bg-patch { width: auto !important; height: auto !important; }
  .photo-frame > div:first-child { inset: -8px -8px 12px 12px !important; border-radius: 16px !important; }
  .photo-frame > div:nth-child(2) { border-radius: 16px !important; box-shadow: 0 16px 32px -18px rgba(35, 45, 63, .3) !important; }
}
@media (max-width: 480px) {
  .initiatief-label { display: none !important; }
  .initiatief-block { padding-right: 10px !important; gap: 10px !important; }
}

/* Over-pagina: alleen het actieve tabpaneel tonen (tabs.js regelt het wisselen) */
.elementor.elementor .over-panel-hidden { display: none; }

/* geen browser-standaardrand */
/* Elementor schrijft soms border-style zonder breedte; de browser maakt daar
   dan 'medium' (3px) van. Deze regel heeft lagere specificiteit dan de
   opmaakregels per element, dus bedoelde randen blijven gewoon staan. */
:where([class*="e-"][class*="-s"], .e-con, .e-atomic-element) {
  border-width: 0;
}


/* === navigatie: uitlijning, hover en actieve pagina === */
/* De knop met chevron moet zijn inhoud naast elkaar zetten; Elementor's
   basisstijl maakt er anders een block van, waardoor het pijltje eronder valt. */
.elementor.elementor .nav-drop > button,
.elementor.elementor .nav-drop > a {
  display: flex;
  align-items: center;
  gap: 5px;
}
.elementor.elementor .nav-drop > button > .e-svg-base,
.elementor.elementor .nav-drop > a > .e-svg-base {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Hover, zoals in het ontwerp */
.elementor.elementor .nav-drop > button:hover,
.elementor.elementor .nav-drop > a:hover { color: #232D3F; }
.nav-drop-panel button:hover,
.nav-drop-panel a:hover { background: #F3EEE3; color: #232D3F; }

/* Actieve pagina: het groene streepje */
.elementor.elementor .nav-drop > a.dc-actief,
.elementor.elementor .nav-drop > button.dc-actief { color: #232D3F; }
.elementor.elementor .nav-drop > .dc-actief::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: #A6CE39;
  border-radius: 2px;
}
/* Het vaste streepje verbergen dat uit het ontwerp meekwam; nav-actief.js zet
   het via .dc-actief onder de pagina waar je daadwerkelijk bent.
   Let op: geen [class*="-s"] in de selector. Dat streepje is een lege <span>
   met een inline style en zonder class, dus die eis sloot hem juist uit - het
   groen bleef daardoor op elke pagina onder 'Home' staan. */
.elementor.elementor .nav-drop > * > span:empty { display: none; }