/* =========================================================
   WEERFOCUS DESIGN SYSTEM
   Bento / High-Tech Radar
   ---------------------------------------------------------
   Wordt als losse <link> geladen door src/layouts/BaseLayout.astro,
   vóór alle pagina-/componentstijlen.
   Dit bestand bevat ALLEEN tokens + gedeelde componenten;
   pagina-specifieke stijlen staan in de pagina zelf.

   De reset en componentstijlen zijn gescoped aan .wf-scope
   (de layout zet die class op <body>).
   ========================================================= */

/* ---------------------------------------------------------
   1. FONTS
   Worden via <link> in BaseLayout.astro geladen (sneller dan
   @import, dat de download pas start nadat deze CSS binnen is).
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   2. TOKENS (site-breed beschikbaar, geen risico om globaal
   te zetten -- variabelen doen niets totdat ze gebruikt worden)
   --------------------------------------------------------- */
:root {
  /* Achtergronden
     wf-bg-card is bewust merkbaar lichter dan wf-bg: dat contrast is
     wat een kaart als kaart laat lezen i.p.v. bijna-onzichtbaar op de
     paginan-achtergrond te vervagen. */
  --wf-bg: #0a0d12;
  --wf-bg-card: rgba(30, 37, 48, 0.92);
  --wf-bg-card-hover: rgba(38, 46, 59, 0.96);
  --wf-bg-surface-1: #0d1117; /* upload-card, module-box tint */
  --wf-bg-surface-2: #10141b; /* card-info balk */
  --wf-bg-surface-3: #090c10; /* time-slot, inactive-pill */
  --wf-bg-surface-4: #05070a; /* diepste laag: player, image-wrap */

  /* Accent & status */
  --wf-accent: #ff6b35;
  --wf-accent-hover: #e55a2b;
  --wf-accent-glow: rgba(255, 107, 53, 0.25);
  --wf-success: #3fb950;
  --wf-warning: #d29922;
  --wf-danger: #f85149;
  --wf-discord: #5865f2;
  --wf-inactive: #6e7681;

  /* Tekst */
  --wf-text-main: #f0f6fc;
  --wf-text-muted: #8b949e;
  --wf-text-soft: #c9d1d9; /* lopende tekst op donkere/foto-achtergrond (hero, sectie-intro's) */

  /* Randen */
  --wf-border: rgba(255, 255, 255, 0.08);
  --wf-border-hover: rgba(255, 107, 53, 0.45);

  /* Typografie */
  --wf-font-display: 'Norwester', sans-serif;
  --wf-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wf-font-mono: 'JetBrains Mono', monospace;
  --wf-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* header/footer chrome, los van brand-font content */

  /* Radius-schaal */
  --wf-radius-sm: 10px;
  --wf-radius-md: 14px;
  --wf-radius-lg: 22px;
  --wf-radius-pill: 20px;

  /* Layout */
  --wf-container-width: 1240px;
  --wf-container-padding: 28px;
  --wf-container-padding-mobile: 14px;
}

/* ---------------------------------------------------------
   3. SCOPED RESET
   Alleen van toepassing binnen .wf-scope, nooit site-breed.
   --------------------------------------------------------- */
.wf-scope,
.wf-scope * {
  box-sizing: border-box;
}

.wf-scope {
  font-family: var(--wf-font-body);
  color: var(--wf-text-main);
}

.wf-scope h1, .wf-scope h2, .wf-scope h3,
.wf-scope p, .wf-scope ul, .wf-scope li {
  margin: 0;
  padding: 0;
}

/* Pagina-basis (deed voorheen het WordPress-thema + Customizer "Extra CSS") */
html, body { margin: 0; }
/* 17px-basis en regelhoogte 1.65 van het oude Astra-thema: alle rem-maten zijn daarop afgestemd */
html { background-color: var(--wf-bg); font-size: 106.25%; }
body {
  line-height: 1.65;
  background-color: var(--wf-bg);
  /* Oranje radargloed over de pagina verspreid */
  background-image:
    radial-gradient(circle 800px at 50% 150px, rgba(255, 107, 53, 0.10) 0%, rgba(10, 13, 18, 0) 80%),
    radial-gradient(circle 700px at 95% 750px, rgba(255, 107, 53, 0.08) 0%, rgba(10, 13, 18, 0) 80%),
    radial-gradient(circle 700px at 5% 1450px, rgba(255, 107, 53, 0.08) 0%, rgba(10, 13, 18, 0) 80%),
    radial-gradient(circle 850px at 90% 2150px, rgba(255, 107, 53, 0.09) 0%, rgba(10, 13, 18, 0) 80%);
  background-repeat: no-repeat;
  background-position: center top;
  /* .wf-full-bleed gebruikt 100vw, dat is incl. scrollbar-breedte */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.wf-scope img { max-width: 100%; }

/* Basis voor koppen en formulierelementen die voorheen uit het Astra-thema en de
   Elementor-Kit kwamen. Bewust lage specificiteit (zoals daar), zodat paginastijlen
   met een eigen font/regelhoogte gewoon winnen. */
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 600; }
/* em (niet een kale factor) zoals Astra: kinderen erven dan de regelhoogte in px */
h1, h2, h3 { line-height: 1.3em; }
h4, h5, h6 { line-height: 1.2em; }
h4, h5, h6, blockquote, figure { margin: 0; }
/* Kopkleur uit de Elementor-Kit (specificiteit 0,1,1 zoals .elementor-kit-4 h2) */
.wf-scope h1, .wf-scope h2, .wf-scope h3,
.wf-scope h4, .wf-scope h5, .wf-scope h6 { color: var(--wf-text-main); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; line-height: 24px; }
button { font-weight: 500; font-size: 0.941176rem; line-height: 1em; }
label, legend { line-height: 20px; }

@media (max-width: 768px) {
  body {
    background-image:
      radial-gradient(circle 550px at 50% -30px, rgba(255, 107, 53, 0.16) 0%, rgba(10, 13, 18, 0) 80%),
      radial-gradient(circle 450px at 100% 750px, rgba(255, 107, 53, 0.10) 0%, rgba(10, 13, 18, 0) 80%),
      radial-gradient(circle 450px at 0% 1450px, rgba(255, 107, 53, 0.10) 0%, rgba(10, 13, 18, 0) 80%),
      radial-gradient(circle 550px at 100% 2150px, rgba(255, 107, 53, 0.11) 0%, rgba(10, 13, 18, 0) 80%);
  }
}

.wf-scope ul { list-style: none; }
.wf-scope a { text-decoration: none; color: inherit; }

/* Consistente focus-ring voor toetsenbordnavigatie (niet bij muisklik,
   dankzij :focus-visible) -- ontbrak eerder, geeft afgewerkte indruk. */
.wf-scope a:focus-visible,
.wf-scope button:focus-visible {
  outline: 2px solid var(--wf-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------
   4. LAYOUT UTILITIES
   --------------------------------------------------------- */
.wf-container {
  max-width: var(--wf-container-width);
  margin: 0 auto;
  padding: 0 var(--wf-container-padding) 40px var(--wf-container-padding);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

@media (max-width: 860px) {
  .wf-container { padding: 0 var(--wf-container-padding-mobile) 40px var(--wf-container-padding-mobile); }
}

/* Full-bleed: laat een element de volledige viewportbreedte
   innemen, ongeacht Elementor's eigen content-wrapper padding. */
.wf-full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

.wf-bento-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* ---------------------------------------------------------
   5. BENTO CARD (basis voor elk kaart-achtig blok)
   --------------------------------------------------------- */
.wf-bento-card {
  /* Subtiele warme gloed vanuit de bovenhoek, boven op de effen
     kaartkleur -- geeft de kaart wat "leven" zonder van het donkere
     thema af te wijken (vgl. de gloed-accenten in referentie-dashboards). */
  background: radial-gradient(140% 100% at 100% 0%, rgba(255, 107, 53, 0.09) 0%, transparent 55%), var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Inset highlight bovenaan: alsof er licht op de bovenrand van het
     glas valt -- klassieke glassmorphism-afwerking. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.wf-bento-card:hover {
  border-color: var(--wf-border-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 25px var(--wf-accent-glow);
}

/* Lift-on-hover alleen op apparaten met een echte muis: voorkomt een
   "vastgeplakte" hover-staat na een tik op touchscreens. */
@media (hover: hover) and (pointer: fine) {
  .wf-bento-card:hover {
    transform: translateY(-4px);
  }
}

/* Variant: nadrukkelijke kaart (bijv. v2-aankondiging), sterkere
   glow en vaste accentrand i.p.v. pas bij hover. */
.wf-bento-card--featured {
  border-color: var(--wf-border-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 107, 53, 0.12);
  background: radial-gradient(140% 100% at 100% 0%, rgba(255, 107, 53, 0.14) 0%, transparent 55%),
    linear-gradient(135deg, rgba(30, 37, 48, 0.98) 0%, rgba(12, 15, 20, 0.99) 100%);
}

.wf-bento-card--featured:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 35px var(--wf-accent-glow);
}

@media (max-width: 600px) {
  .wf-bento-card { border-radius: 18px; }
}

/* ---------------------------------------------------------
   6. STATUS DOT (pulserend bolletje, overal hergebruikt)
   --------------------------------------------------------- */
.wf-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--wf-accent);
  box-shadow: 0 0 8px var(--wf-accent);
  animation: wf-pulse-dot 2s infinite;
}

.wf-status-dot--success { background-color: var(--wf-success); box-shadow: 0 0 8px var(--wf-success); }
.wf-status-dot--warning { background-color: var(--wf-warning); box-shadow: 0 0 8px var(--wf-warning); }
.wf-status-dot--danger  { background-color: var(--wf-danger);  box-shadow: 0 0 8px var(--wf-danger); }
.wf-status-dot--inactive {
  background-color: var(--wf-inactive);
  box-shadow: none;
  animation: none;
}

@keyframes wf-pulse-dot {
  0%   { opacity: 1;   transform: scale(1); }
  50%  { opacity: 0.3; transform: scale(1.25); }
  100% { opacity: 1;   transform: scale(1); }
}

/* ---------------------------------------------------------
   7. BADGE (klein uppercase label + stip, alle varianten)
   --------------------------------------------------------- */
.wf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--wf-accent);
}

/* Variant met achtergrond-pill (zoals community-badge) */
.wf-badge--pill {
  background: rgba(255, 107, 53, 0.12);
  border: 1px solid rgba(255, 107, 53, 0.3);
  padding: 5px 14px;
  border-radius: var(--wf-radius-pill);
}

.wf-badge--success { color: var(--wf-success); }
.wf-badge--discord {
  color: var(--wf-discord);
  background: rgba(88, 101, 242, 0.12);
  border-color: rgba(88, 101, 242, 0.3);
}

/* Versienummer-badge (v2.0 stijl) */
.wf-badge-version {
  font-family: var(--wf-font-mono);
  font-size: 0.8rem;
  background: var(--wf-accent);
  color: #0d1117;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* NEW-badge met pulse (header-navigatie) */
.wf-badge-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--wf-accent) 0%, var(--wf-danger) 100%);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
  animation: wf-badge-pulse 2s infinite ease-in-out;
}

@keyframes wf-badge-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 8px rgba(255, 107, 53, 0.4); }
  50%  { transform: scale(1.12); box-shadow: 0 0 16px rgba(255, 107, 53, 0.8), 0 0 6px rgba(248, 81, 73, 0.6); }
  100% { transform: scale(1);    box-shadow: 0 0 8px rgba(255, 107, 53, 0.4); }
}

/* Regio-pill (KNMI-banner regio's) */
.wf-pill {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--wf-radius-pill);
  letter-spacing: 0.3px;
}

/* ---------------------------------------------------------
   8. KNOPPEN & LINKS
   --------------------------------------------------------- */
.wf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--wf-accent) 0%, var(--wf-accent-hover) 100%);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 13px 26px;
  border-radius: var(--wf-radius-md);
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(255, 107, 53, 0.35);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.wf-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 107, 53, 0.5);
}

/* Press-state: knijpt lichtjes samen bij klik/tik, voor tactiele feedback */
.wf-btn-primary:active {
  transform: scale(0.97);
}

.wf-btn-primary .wf-arrow { transition: transform 0.2s ease; }
.wf-btn-primary:hover .wf-arrow { transform: translateX(4px); }

/* Discord-variant (eigen merkkleur) */
.wf-btn-primary--discord {
  background: var(--wf-discord);
  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.35);
}
.wf-btn-primary--discord:hover {
  background: #4752c4;
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.5);
}

/* Tekstlink met pijltje (bijv. "Naar YouTube kanaal") */
.wf-link-arrow {
  color: var(--wf-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.wf-link-arrow:hover { color: var(--wf-accent); }
.wf-link-arrow .wf-arrow { transition: transform 0.2s ease; }
.wf-link-arrow:hover .wf-arrow { transform: translateX(4px); }

/* Ghost-knop: outline pill, kleurt om bij hover (bijv. donatie-CTA) */
.wf-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 107, 53, 0.12);
  border: 1px solid rgba(255, 107, 53, 0.45);
  color: var(--wf-accent);
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.15);
}

.wf-btn-ghost:hover {
  background: var(--wf-accent);
  color: #0a0d12;
  border-color: var(--wf-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

.wf-btn-ghost:active {
  transform: scale(0.97);
}

.wf-btn-ghost:hover .wf-status-dot {
  background-color: #0a0d12;
  box-shadow: none;
}

/* ---------------------------------------------------------
   8b. SECTIEKOP (homepage-secties onder de hero)
   Mono-label + grote Norwester-kop (volledig wit, geen losse
   oranje accentwoorden) + optionele intro; link rechts uitgelijnd.
   Sluit aan op de hero-typografie in homepage-main.html.
   --------------------------------------------------------- */
.wf-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.wf-section-head-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
}

.wf-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wf-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--wf-accent);
}

.wf-scope .wf-section-title {
  font-family: var(--wf-font-display) !important;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--wf-text-main);
  margin: 0;
}

.wf-section-lede {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--wf-text-soft);
  max-width: 62ch;
}

/* ---------------------------------------------------------
   9. RESPONSIVE HELPERS
   --------------------------------------------------------- */
@media (max-width: 860px) {
  .wf-stack-mobile {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .wf-full-width-mobile {
    width: 100% !important;
    justify-content: center !important;
  }
}