/*
 * KBC 1911 — Design System v2
 * Alle tokens, typografie, spacing, componenten
 * Geldt voor ALLE pagina's behalve homepage-hero
 */

/* ═══════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════ */
:root {
  /* Kleuren */
  --c-primary:      #3195CF;
  --c-primary-dark: #14507a;
  --c-primary-bg:   #E8F4FC;
  --c-text:         #1A1A1A;
  --c-text-muted:   #6a6a6a;
  --c-text-faint:   #9a9a9a;
  --c-border:       rgba(49,149,207,.14);
  --c-border-light: rgba(26,26,26,.08);
  --c-surface:      #ffffff;
  --c-bg:           #F8F8F8;
  --c-success:      #2a8a3a;
  --c-danger:       #c0392b;

  /* Spacing scale (8pt grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  36px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Typography scale */
  --t-label:   700 11px/1 'Source Sans 3', sans-serif;
  --t-xs:      400 12px/1.4 'Source Sans 3', sans-serif;
  --t-sm:      400 13.5px/1.5 'Source Sans 3', sans-serif;
  --t-base:    400 15px/1.6 'Source Sans 3', sans-serif;
  --t-lg:      400 17px/1.6 'Source Sans 3', sans-serif;
  --t-h3:      700 17px/1.2 'Schibsted Grotesk', sans-serif;
  --t-h2:      700 22px/1.15 'Schibsted Grotesk', sans-serif;
  --t-h1:      800 32px/1.05 'Schibsted Grotesk', sans-serif;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  18px;

  /* Shadows */
  --sh-sm: 0 1px 4px rgba(20,50,75,.06), 0 4px 12px rgba(20,50,75,.07);
  --sh-md: 0 2px 8px rgba(20,50,75,.07), 0 8px 24px rgba(20,50,75,.09);

  /* Container */
  --container-max: 1240px;
  --container-pad: clamp(16px, 3vw, 40px);

  /* Page header */
  --page-header-pt: 60px;
  --page-header-pb: 24px;
  --page-content-pt: 28px;
  --page-content-pb: 48px;
}

/* ═══════════════════════════════════════════════
   CONTAINER (overal hetzelfde)
   ═══════════════════════════════════════════════ */
.kbc-disc-container,
.kbc-agenda-container,
.kbc-news-container,
.kbc-news-header__inner,
.kbc-container {
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--container-pad) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════
   PAGE HEADER — uniforme structuur
   ═══════════════════════════════════════════════ */
.kbc-disc-header,
.kbc-agenda-header,
.kbc-news-header {
  background: var(--c-surface) !important;
  padding: var(--page-header-pt) 0 var(--page-header-pb) !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Breadcrumb boven header, kleine padding */
[style*="padding-top:12px"].kbc-disc-container,
[style*="padding-top:12px"].kbc-agenda-container,
[style*="padding-top:12px"].kbc-news-header__inner {
  padding-top: 10px !important;
  padding-bottom: 6px !important;
}



/* H1 overal hetzelfde */
.kbc-disc-title,
.kbc-agenda-title,
.kbc-news-header__title {
  font: 700 42px/1.05 'Schibsted Grotesk', sans-serif !important;
  color: var(--c-primary-dark) !important;
  margin: 0 0 6px !important;
}

/* Sub tekst */
.kbc-disc-sub,
.kbc-agenda-sub,
.kbc-news-header__desc {
  font: var(--t-sm) !important;
  color: var(--c-text-faint) !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════
   CONTENT AREA spacing
   ═══════════════════════════════════════════════ */
.kbc-disc-container[style*="padding-top:32px"],
.kbc-disc-container[style*="padding-top: 32px"] {
  padding-top: var(--page-content-pt) !important;
  padding-bottom: var(--page-content-pb) !important;
}

/* ═══════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════ */
.kbc-disc-tabs {
  padding-top: 14px !important;
  margin-bottom: 20px !important;
  gap: 4px !important;
}
.kbc-disc-tab {
  padding: 7px 14px !important;
  font-size: 13.5px !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
  gap: 5px !important;
}
.kbc-disc-tab svg { width: 14px !important; height: 14px !important; }
.kbc-disc-section-title {
  font: var(--t-h2) !important;
  color: var(--c-primary-dark) !important;
  margin: 0 0 14px !important;
}
.kbc-disc-section { padding-bottom: var(--page-content-pb) !important; }

/* ═══════════════════════════════════════════════
   TABELLEN — uniforme stijl
   ═══════════════════════════════════════════════ */
.kbc-disc-table { font-size: 13.5px !important; }
.kbc-disc-table thead th {
  padding: 9px 10px !important;
  font-size: 10.5px !important;
  letter-spacing: .08em !important;
}
.kbc-disc-table tbody td {
  padding: 9px 10px !important;
  font-size: 13.5px !important;
}
.kbc-disc-table tbody tr { height: auto !important; }

/* ═══════════════════════════════════════════════
   KAARTEN (agenda, spelers, nieuws)
   ═══════════════════════════════════════════════ */
.kbc-disc-card,
a.kbc-disc-card {
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
  gap: 12px !important;
  box-shadow: var(--sh-sm) !important;
  border: 1px solid var(--c-border) !important;
}
.kbc-disc-card__stats { gap: 8px !important; }
.kbc-disc-card__stat {
  padding: 6px 8px !important;
  min-width: 52px !important;
  border-radius: var(--r-sm) !important;
}
.kbc-disc-card__stat-val { font-size: 17px !important; }
.kbc-disc-card__stat-lbl { font-size: 10px !important; }
.kbc-disc-card__name { font-size: 15px !important; }

/* Agenda items */
.kbc-agenda-item {
  padding: 11px 14px !important;
  gap: 12px !important;
  border-radius: var(--r-md) !important;
  margin-bottom: 6px !important;
}
.kbc-agenda-item__title { font-size: 14.5px !important; }
.kbc-agenda-item__meta { font-size: 12.5px !important; }
.kbc-agenda-month-title { font-size: 13px !important; margin: 18px 0 8px !important; }

/* Agenda featured */
.kbc-agenda-featured {
  padding: 22px 26px !important;
  margin: 20px 0 8px !important;
  border-radius: var(--r-xl) !important;
}
.kbc-agenda-featured__title { font-size: 22px !important; }
.kbc-agenda-featured__day { font-size: 36px !important; }
.kbc-agenda-featured__date-block { padding: 12px 16px !important; min-width: 66px !important; }

/* Nieuws cards */
.kbc-news-card__body { padding: 12px 14px 14px !important; }
.kbc-news-card__title { font-size: 15px !important; line-height: 1.35 !important; }
.kbc-news-card__excerpt { font-size: 13px !important; }
.kbc-news-grid { gap: 18px !important; }
.kbc-news-header { margin-bottom: 20px !important; }
.kbc-news-header__count { font-size: 12.5px !important; margin-top: 4px !important; }

/* ═══════════════════════════════════════════════
   STAND BIJGEWERKT BADGE
   ═══════════════════════════════════════════════ */
.kbc-stand-bijgewerkt {
  font-size: 12px !important;
  padding: 5px 10px !important;
  margin-bottom: 12px !important;
  border-radius: var(--r-sm) !important;
}

/* ═══════════════════════════════════════════════
   SPELERSPROFIEL
   ═══════════════════════════════════════════════ */
.kbc-profiel-hero {
  padding: 28px 0 24px !important;
}
.kbc-profiel-avatar {
  width: 60px !important; height: 60px !important;
  font-size: 24px !important; line-height: 60px !important;
}
.kbc-profiel-name { font-size: 26px !important; margin-bottom: 6px !important; }
.kbc-stat-grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 10px !important;
  margin: 20px 0 28px !important;
}
.kbc-stat-box { padding: 14px 12px !important; border-radius: var(--r-lg) !important; }
.kbc-stat-box__val { font-size: 22px !important; margin-bottom: 5px !important; }
.kbc-stat-box__lbl { font-size: 10px !important; }
.kbc-wedstr-titel { font-size: 17px !important; margin-bottom: 12px !important; }
.kbc-wedstr-item {
  padding: 11px 14px !important;
  margin-bottom: 6px !important;
  border-radius: var(--r-md) !important;
  gap: 10px !important;
}
.kbc-wedstr-sc { font-size: 16px !important; }
.kbc-wedstr-teg { font-size: 14px !important; }
.kbc-wedstr-datum { font-size: 12px !important; }

/* ═══════════════════════════════════════════════
   ZOEKPAGINA
   ═══════════════════════════════════════════════ */
.kbc-search-hero {
  padding: 0 0 0 !important;
}
#kbc-search-main .kbc-news-container > h1,
.kbc-search-hero h1 {
  font: 800 28px/1.1 'Schibsted Grotesk', sans-serif !important;
  color: var(--c-primary-dark) !important;
  margin: 8px 0 4px !important;
}
.kbc-search-form-big {
  margin: 12px 0 20px !important;
  max-width: 520px !important;
}
.kbc-search-input-big { padding: 10px 14px !important; font-size: 14px !important; }
.kbc-search-btn-big { padding: 0 16px !important; font-size: 14px !important; }
.kbc-search-result {
  padding: 12px 16px !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
  border-radius: var(--r-md) !important;
}
.kbc-search-result__title { font-size: 15px !important; }
.kbc-search-result__excerpt { font-size: 13px !important; }
.kbc-search-result__icon {
  width: 36px !important; height: 36px !important;
  border-radius: var(--r-sm) !important;
}
.kbc-search-result__type { font-size: 10px !important; }

/* ═══════════════════════════════════════════════
   ONDERLINGE COMP OVERZICHT
   ═══════════════════════════════════════════════ */
.kbc-oc-card {
  padding: 16px 20px !important;
  gap: 14px !important;
  border-radius: var(--r-lg) !important;
}
.kbc-oc-icon { width: 44px !important; height: 44px !important; border-radius: var(--r-md) !important; }
.kbc-oc-name { font-size: 16px !important; margin-bottom: 3px !important; }
.kbc-oc-sub { font-size: 13px !important; }

/* ═══════════════════════════════════════════════
   FILTERS & BADGES
   ═══════════════════════════════════════════════ */
.kbc-agenda-filter {
  padding: 6px 14px !important;
  font-size: 13px !important;
  border-radius: 20px !important;
}
.kbc-agenda-filters { gap: 6px !important; margin: 14px 0 18px !important; }

/* ═══════════════════════════════════════════════
   FOOTER compacter
   ═══════════════════════════════════════════════ */
#kbc-footer .kbc-footer-col a { font-size: 13px !important; line-height: 1.8 !important; }
#kbc-footer .kbc-footer-brand-name { font-size: 17px !important; }
#kbc-footer .kbc-footer-addr { font-size: 13px !important; line-height: 1.7 !important; }
/* Nieuws header margin fix */
.kbc-news-header { margin-bottom: 20px !important; }
.kbc-news-header__inner { padding-bottom: 0 !important; }

/* Zoek pagina compacter */
.kbc-search-hero .kbc-news-container { padding-top: 10px !important; padding-bottom: 20px !important; }
.kbc-search-hero { padding: 0 !important; }
#kbc-search-main > .kbc-news-container:first-child { padding-top: 32px !important; }

/* ========================================================
   UNIFORM TYPOGRAFIE SYSTEEM - alle pagina's
   H1 page titles: 28px, H2 section: 20px, H3: 17px
   Spacing boven kop: 0 (breadcrumb regelt ruimte)
   Spacing onder kop: 6px naar subtitel, 0 naar content
   ======================================================== */

/* H1 page title - alle varianten gelijk */
.kbc-disc-title,
.kbc-agenda-title,
.kbc-news-header__title {
  font: 700 42px/1.05 'Schibsted Grotesk', sans-serif !important;
  color: #14507a !important;
  margin: 4px 0 6px !important;
  letter-spacing: normal !important;
}

/* H1 op zoekpagina */
.kbc-search-hero h1,
#kbc-search-main h1 {
  font: 800 28px/1.1 'Schibsted Grotesk', sans-serif !important;
  color: #14507a !important;
  margin: 4px 0 6px !important;
}

/* H2 sectie koppen - tabellen, gerelateerde berichten etc. */
.kbc-disc-section-title,
.kbc-related__title,
.kbc-wedstr-titel,
.kbc-comments-title,
.kbc-comment-form__title {
  font: 700 19px/1.2 'Schibsted Grotesk', sans-serif !important;
  color: #14507a !important;
  margin: 0 0 14px !important;
}

/* H2 in artikel body */
.kbc-article-content h2 {
  font: 700 20px/1.2 'Schibsted Grotesk', sans-serif !important;
  color: #14507a !important;
  margin: 28px 0 10px !important;
}
.kbc-article-content h3 {
  font: 700 17px/1.3 'Schibsted Grotesk', sans-serif !important;
  color: #14507a !important;
  margin: 22px 0 8px !important;
}

/* Sidebar en kaart titels */
.kbc-sidebar-title { font-size: 11px !important; }
.kbc-disc-card__name { font-size: 14px !important; }
.kbc-news-card-v2__title { font-size: 15px !important; }
.kbc-news-featured h2 { font: 700 clamp(17px,2.2vw,24px)/1.2 'Schibsted Grotesk',sans-serif !important; }

/* Subtitels (sub) consistent */
.kbc-disc-sub,
.kbc-agenda-sub,
.kbc-news-header__desc {
  font: 400 14px/1.55 'Source Sans 3', sans-serif !important;
  color: #9a9a9a !important;
  margin: 0 !important;
}

/* Label (ONDERLINGE COMPETITIE etc.) */
.kbc-disc-header [style*='letter-spacing'],
.kbc-agenda-header [style*='letter-spacing'],
.kbc-news-header [style*='letter-spacing'],
.kbc-disc-container [style*='letter-spacing'],
.kbc-agenda-container [style*='letter-spacing'],
.kbc-news-header__inner [style*='letter-spacing'] {
  font: 400 16px/1 'Source Sans 3', sans-serif !important;
  letter-spacing: .16em !important;
  color: #3195CF !important;
  margin-bottom: 14px !important;
  margin-top: 0 !important;
  display: block !important;
  text-transform: uppercase !important;
}
