/* Opfrisbeurt 2026: strak en sportief, zelfde huisstijl (zwart / geel).
   Dit bestand komt als laatste in <head> en overschrijft de oude PhoenixSite-stijl.
   Inline stijlen in de HTML hebben voorrang, daarom staat hier soms !important. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-condensed-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/barlow-condensed-800.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url(/assets/fonts/barlow-condensed-800-italic.woff2) format("woff2"); }

:root {
  --sk-yellow: #faff00;
  --sk-yellow-dark: #e3e800;
  --sk-black: #0d0d0d;
  --sk-ink: #1a1a1a;
  --sk-muted: #5c5c5c;
  --sk-soft: #f4f4f1;
  --sk-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --sk-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --sk-radius: 14px;
}

/* ---------- Basis typografie ---------- */
body, html, #wrapper { font-family: var(--sk-body) !important; color: var(--sk-ink); -webkit-font-smoothing: antialiased; }
#wrapper p, #wrapper li, #wrapper span:not([class*="fa"]), #wrapper .content-unit-txt, #wrapper .content-unit-txt *:not(i):not([class*="fa"]) {
  font-family: var(--sk-body) !important;
}
#wrapper p, #wrapper .content-unit-txt { line-height: 1.6; }

#wrapper h1, #wrapper h2, #wrapper h3, #wrapper h4,
#wrapper .content-unit-title, #wrapper .hero-main-title, #wrapper .about-title {
  font-family: var(--sk-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02 !important;
}
#wrapper h1 *, #wrapper h2 *, #wrapper h3 * { font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
#wrapper h1 p, #wrapper h2 p, #wrapper h3 p { margin: 0; }

/* Grote kopteksten krijgen een geel streepje erboven: sportief accent */
#wrapper .content-unit-title { font-size: clamp(30px, 3.6vw, 48px) !important; }
#wrapper .about-title { color: var(--sk-black) !important; font-size: clamp(30px, 3.6vw, 48px) !important; }
#wrapper .content-unit-title::before {
  content: ""; display: block; width: 56px; height: 6px; margin: 0 0 18px;
  background: var(--sk-yellow); transform: skewX(-18deg);
}
#wrapper .content-unit-title.align-center::before { margin-left: auto; margin-right: auto; }

/* ---------- Knoppen ---------- */
#wrapper .general-btn, #wrapper .cta-header-button, #wrapper [class*="general-btn"] {
  font-family: var(--sk-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 18px !important;
  background: var(--sk-yellow) !important;
  color: var(--sk-black) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
#wrapper .general-btn:hover, #wrapper .cta-header-button:hover {
  transform: translateY(-2px);
  background: var(--sk-yellow-dark) !important;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5) !important;
}
#wrapper .general-btn::after { content: "  \2192"; }

/* ---------- Header ---------- */
#wrapper .desktop-header .preview-header-item {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px -16px rgba(0, 0, 0, 0.35);
}
#wrapper .desktop-header .menu-item {
  font-family: var(--sk-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 17px !important;
}
#wrapper .desktop-header .sub-menu-item { font-family: var(--sk-body) !important; font-weight: 500; text-transform: none; }
#wrapper .desktop-header .cta-header-button { padding: 10px 24px !important; font-size: 17px !important; box-shadow: none !important; }
#wrapper .desktop-header .cta-header-button::after { content: "  \2192"; }

/* ---------- Hero ---------- */
#wrapper .hero-main-title {
  font-style: italic;
  font-size: clamp(40px, 5.2vw, 78px) !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55) !important;
  max-width: 20ch; margin-left: auto !important; margin-right: auto !important;
}
#wrapper .large-img-title-txt-btn .bg-img-shadow,
#wrapper [class*="bg-img-shadow"] { text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55) !important; }

/* Donkere sectie ("Waarom Sportkarate"): diep zwart met geel accent */
#wrapper .secondary-c-bg { background: var(--sk-black) !important; }
#wrapper .secondary-c-bg strong, #wrapper .secondary-c-bg b { color: var(--sk-yellow); }

/* ---------- Kaarten, beelden ---------- */
#wrapper .card, #wrapper .content-unit-img img, #wrapper .free-image img, #wrapper iframe {
  border-radius: var(--sk-radius);
}
#wrapper .card { overflow: hidden; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.45); }

/* ---------- Footer ---------- */
#wrapper .footer-wrapper .footer-row { background: var(--sk-black) !important; border-top: 6px solid var(--sk-yellow); }
#wrapper .footer-wrapper h3 { color: var(--sk-yellow) !important; font-size: 22px !important; letter-spacing: 0.04em; }
#wrapper .footer-wrapper, #wrapper .footer-wrapper *:not(i):not([class*="fa"]) { font-family: var(--sk-body) !important; }
#wrapper .footer-wrapper h3, #wrapper .footer-wrapper h3 * { font-family: var(--sk-display) !important; }
#wrapper .footer-wrapper a { transition: color 0.15s ease; }
#wrapper .footer-wrapper a:hover { color: var(--sk-yellow) !important; }

/* ---------- Mobiel ---------- */
#wrapper .mobile-header-bar { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.35); }
#wrapper .mobile-menu-nav-item, #wrapper .mobile-menu-nav-item > a, #wrapper .mobile-menu-item-container a {
  font-family: var(--sk-display) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.04em;
}
#wrapper .mobile-submenu-nav-item, #wrapper .mobile-submenu-nav-item * { font-family: var(--sk-body) !important; font-weight: 500 !important; text-transform: none; }

@media (max-width: 767px) {
  #wrapper .general-btn { font-size: 17px !important; padding: 13px 24px !important; }
}

/* Cookiemelding in huisstijl */
.btn-cookie { font-family: var(--sk-display) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px !important; }
.btn-cookie--default { background: var(--sk-black) !important; border-color: var(--sk-black) !important; color: #fff !important; }
.btn-cookie--ghost { border-color: var(--sk-black) !important; color: var(--sk-black) !important; }

@media (prefers-reduced-motion: reduce) {
  #wrapper .general-btn, 
}