/*
Theme Name: Kaelia Capital
Template: astra
Author: OmniGrowth
Version: 1.0.0
Description: Custom standalone child theme for Kaelia Capital. Shared header/footer + brand tokens live here.
*/

/* ════════════════════════════════════════════════════
   BRAND TOKENS  ← PAS HIER DE KAELIA-MERK AAN
   Vervang de placeholder-waarden door de echte hex/font
   uit de signature banner. Alles erft hiervan.
════════════════════════════════════════════════════ */
:root {
  /* Kleuren — KAELIA */
  --k-ink:         #032535;   /* hoofdtekst (deep navy) */
  --k-bg:          #ffffff;
  --k-sage:        #a6bdba;   /* brand sage — accenten op donker, panelen */
  --k-sage-soft:   #eef2f1;   /* lichte sage-tint voor grote secties */
  --k-deep:        #032535;   /* donkere secties / footer */
  --k-accent:      #032535;   /* primaire knoppen / CTA */
  --k-accent-soft: #5c8082;   /* afgeleide deep-sage: eyebrows + hovers op wit */
  --k-line:        #d7e0de;   /* lijnen / borders (sage-getint) */
  --k-muted:       #5b6e6e;   /* secundaire tekst */
  --k-on-dark:     rgba(255,255,255,0.85);

  /* Fonts — Optie B */
  --k-font-display: 'Poppins', system-ui, sans-serif;        /* koppen */
  --k-font-body:    'Poppins', system-ui, sans-serif;        /* body */
  --k-font-accent:  'Playfair Display', Georgia, serif;      /* serif-italic: taglines/quotes */

  /* Layout */
  --k-header-h: 80px;
  --k-max:      1300px;
  --k-pad:      80px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0 !important; font-family: var(--k-font-body); background-color: var(--k-bg); color: var(--k-ink); }

/* Astra-chrome verbergen (veiligheidsnet) */
.site-header, #masthead, .ast-above-header-wrap, .ast-main-header-wrap, .ast-below-header-wrap,
.site-footer, #colophon, .ast-site-footer-wrap, .entry-header, .entry-footer,
.post-navigation, .ast-breadcrumbs-wrapper, .comments-area { display: none !important; }
body .site-content, body #content, body #primary, body main#main, body .entry-content, body .ast-container {
  padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important;
}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.k-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--k-header-h); padding: 0 var(--k-pad);
  display: flex; align-items: center; justify-content: space-between;
  background-color: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.k-header.scrolled {
  background-color: rgba(255,255,255,0.97);
  box-shadow: 0 2px 24px rgba(0,0,0,0.06);
  border-color: var(--k-line);
}

/* Logo (placeholder wordmark — vervang door <img>) */
.k-header-logo { text-decoration: none; display: flex; align-items: center; }
.k-header-logo img { height: 40px; width: auto; display: block; object-fit: contain; }
.k-logo-text { font-family: var(--k-font-display); font-size: 24px; font-weight: 500; color: var(--k-ink); letter-spacing: -0.01em; }
.k-logo-text .k-logo-accent { color: var(--k-accent); margin-left: 4px; }

.k-header-nav { display: flex; align-items: center; gap: 36px; }
.k-header-nav a { font-family: var(--k-font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.2px; color: var(--k-ink); text-decoration: none; transition: color 0.2s; white-space: nowrap; }
.k-header-nav a:hover { color: var(--k-accent-soft); }

.k-nav-dropdown { position: relative; }
.k-nav-dropdown > a { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.k-nav-dropdown > a svg { transition: transform 0.25s; }
.k-nav-dropdown:hover > a svg { transform: rotate(180deg); }
.k-nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: #fff; border: 1px solid var(--k-line); border-radius: 10px; padding: 10px 0; min-width: 250px; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; box-shadow: 0 16px 40px rgba(0,0,0,0.10); margin-top: 16px; }
.k-nav-dropdown-menu::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.k-nav-dropdown:hover .k-nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: all; }
.k-nav-dropdown-menu a { display: block; padding: 11px 22px; font-size: 14px; font-weight: 400; color: var(--k-muted); transition: color 0.2s, background-color 0.2s; }
.k-nav-dropdown-menu a:hover { color: var(--k-accent-soft); background-color: var(--k-sage-soft); }

.k-header-cta { display: inline-flex; align-items: center; gap: 8px; background-color: var(--k-accent); color: #fff; font-family: var(--k-font-body); font-size: 14px; font-weight: 600; padding: 12px 24px; border-radius: 8px; text-decoration: none; transition: filter 0.25s, transform 0.2s; white-space: nowrap; }
.k-header-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }

.k-header-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.k-header-hamburger span { display: block; width: 22px; height: 2px; border-radius: 2px; background-color: var(--k-ink); transition: all 0.3s; }
.k-header-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.k-header-hamburger.open span:nth-child(2) { opacity: 0; }
.k-header-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.k-mobile-nav { display: none; position: fixed; top: var(--k-header-h); left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 999; flex-direction: column; padding: 32px; overflow-y: auto; gap: 6px; }
.k-mobile-nav.open { display: flex; }
.k-mobile-nav a { font-size: 16px; font-weight: 500; color: var(--k-ink); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--k-line); transition: color 0.2s; }
.k-mobile-nav a:hover { color: var(--k-accent-soft); }
.k-mobile-nav .k-mobile-label { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--k-accent-soft); margin: 18px 0 2px; }
.k-mobile-nav .k-mobile-cta { margin-top: 26px; background-color: var(--k-accent); color: #fff; text-align: center; border-radius: 8px; padding: 15px; border-bottom: none; font-weight: 600; }

@media (max-width: 1024px) { .k-header { padding: 0 40px; } }
@media (max-width: 900px) {
  .k-header-nav, .k-header-cta { display: none; }
  .k-header-hamburger { display: flex; }
  .k-header { padding: 0 24px; }
}

/* ════════════════════════════════════════
   GEDEELDE COMPONENTEN (eyebrow + buttons)
════════════════════════════════════════ */
.k-eyebrow { display: flex; align-items: center; gap: 12px; }
.k-eyebrow-line { width: 28px; height: 1px; background-color: var(--k-accent-soft); }
.k-eyebrow span { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--k-accent-soft); }

.k-btn-primary { display: inline-flex; align-items: center; gap: 10px; background-color: var(--k-accent); color: #fff; font-family: var(--k-font-body); font-size: 15px; font-weight: 600; padding: 15px 32px; border-radius: 8px; text-decoration: none; transition: filter 0.25s, transform 0.2s; }
.k-btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); color: #fff; }
.k-btn-secondary { display: inline-flex; align-items: center; gap: 8px; background-color: transparent; color: var(--k-ink); font-family: var(--k-font-body); font-size: 15px; font-weight: 500; padding: 14px 28px; border-radius: 8px; border: 1px solid var(--k-line); text-decoration: none; transition: border-color 0.25s, color 0.25s; }
.k-btn-secondary:hover { border-color: var(--k-accent-soft); color: var(--k-accent-soft); }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.k-footer { background-color: var(--k-deep); font-family: var(--k-font-body); }
.k-footer-main { padding: 70px 0 48px; }
.k-footer-inner { max-width: var(--k-max); margin: 0 auto; padding: 0 var(--k-pad); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; }
.k-footer-brand { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.k-footer-brand img { max-height: 44px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.k-footer-logo-text { font-family: var(--k-font-display); font-size: 22px; font-weight: 500; color: #fff; }
.k-footer-logo-text .k-logo-accent { color: var(--k-sage); margin-left: 4px; }
.k-footer-tagline { font-size: 13px; font-weight: 400; line-height: 1.75; color: rgba(255,255,255,0.55); max-width: 280px; }
.k-footer-social { display: flex; gap: 12px; }
.k-footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); text-decoration: none; transition: border-color 0.25s, color 0.25s; }
.k-footer-social a:hover { border-color: var(--k-sage); color: var(--k-sage); }
.k-footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--k-sage); margin-bottom: 20px; }
.k-footer-col-links { display: flex; flex-direction: column; gap: 10px; }
.k-footer-col-links a { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; }
.k-footer-col-links a:hover { color: var(--k-sage); }
.k-footer-contact-item { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.k-footer-contact-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.k-footer-contact-value { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.7); text-decoration: none; }
.k-footer-contact-value:hover { color: var(--k-sage); }
.k-footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 0 var(--k-pad); }
.k-footer-bottom { max-width: var(--k-max); margin: 0 auto; padding: 24px var(--k-pad); display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.k-footer-compliance { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.35); line-height: 1.7; max-width: 720px; }
.k-footer-copy { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.3); white-space: nowrap; }

@media (max-width: 1024px) { .k-footer-inner { padding: 0 40px; grid-template-columns: 1fr 1fr; gap: 40px; } .k-footer-bottom, .k-footer-divider { padding-left: 40px; padding-right: 40px; margin-left: 0; margin-right: 0; } }
@media (max-width: 600px) { .k-footer-inner { grid-template-columns: 1fr; padding: 0 24px; } .k-footer-bottom { padding: 20px 24px; flex-direction: column; } .k-footer-divider { margin: 0 24px; } }

/* ════════════════════════════════════════
   GEDEELD: FAQ-ACCORDEON (lichte secties)
════════════════════════════════════════ */
.k-faq-list { display: flex; flex-direction: column; }
.k-faq-item { border-bottom: 1px solid var(--k-line); }
.k-faq-item:first-child { border-top: 1px solid var(--k-line); }
.k-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; user-select: none; }
.k-faq-q-text { font-family: var(--k-font-display); font-size: 17px; font-weight: 600; color: var(--k-ink); transition: color 0.2s; }
.k-faq-item.open .k-faq-q-text { color: var(--k-accent-soft); }
.k-faq-ic { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--k-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 0.25s, border-color 0.25s; }
.k-faq-item.open .k-faq-ic { background-color: var(--k-sage); border-color: var(--k-sage); }
.k-faq-ic svg { transition: transform 0.3s; }
.k-faq-item.open .k-faq-ic svg { transform: rotate(45deg); }
.k-faq-ic svg path { stroke: var(--k-muted); }
.k-faq-a { font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--k-muted); max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; }
.k-faq-item.open .k-faq-a { max-height: 340px; padding-bottom: 24px; }

/* ════════════════════════════════════════
   GEDEELD: SCROLL-REVEAL
════════════════════════════════════════ */
.k-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.k-reveal.k-in { opacity: 1; transform: none; }