/*
 * KBC 1911 — Centraal Responsive Framework
 * =========================================
 * Breakpoints:
 *   xs  : < 400px   (kleine mobiel)
 *   sm  : < 600px   (mobiel)
 *   md  : < 768px   (tablet portrait)
 *   lg  : < 1024px  (tablet landscape / kleine laptop)
 *   xl  : < 1280px  (laptop)
 *   2xl : 1920px+   (grote desktop)
 *
 * Gebruik .kbc-container op elke pagina voor consistente breedte.
 * Gebruik utility-classes (.kbc-grid-*, .kbc-stack, etc.) voor layouts.
 */

/* ── 1. CSS CUSTOM PROPERTIES ────────────────────────────────── */
:root {
  /* Containerbreedte */
  --kbc-container-max:  1240px;
  --kbc-container-pad:  clamp(16px, 4vw, 40px);

  /* Spacing schaal */
  --kbc-space-xs:   8px;
  --kbc-space-sm:   16px;
  --kbc-space-md:   24px;
  --kbc-space-lg:   40px;
  --kbc-space-xl:   64px;

  /* Kleuren (voor gebruik in toekomstige componenten) */
  --kbc-primary:    #3195CF;
  --kbc-dark:       #14507a;
  --kbc-bg:         #F8F8F8;
  --kbc-white:      #ffffff;
  --kbc-text:       #1A1A1A;
  --kbc-muted:      #9a9a9a;
  --kbc-border:     rgba(26,26,26,.09);

  /* Typografie */
  --kbc-font-head:  'Schibsted Grotesk', sans-serif;
  --kbc-font-body:  'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  /* Radius */
  --kbc-radius-sm:  8px;
  --kbc-radius-md:  14px;
  --kbc-radius-lg:  18px;

  /* Shadow */
  --kbc-shadow-sm:  0 1px 4px rgba(20,50,75,.05), 0 4px 16px rgba(20,50,75,.07);
  --kbc-shadow-md:  0 2px 8px rgba(20,50,75,.07), 0 8px 32px rgba(20,50,75,.09);
  --kbc-shadow-lg:  0 8px 24px rgba(20,50,75,.12), 0 24px 56px rgba(20,50,75,.13);

  /* Touch target minimum */
  --kbc-touch-min:  44px;
}

/* ── 2. GLOBALE RESET & BASE ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Voorkom horizontal overflow op alle schermen */
  overflow-x: hidden;
  /* Fluid base font voor rem-gebaseerde schaling */
  font-size: 16px;
}

body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

table {
  /* Voorkom tabel-overflow */
  width: 100%;
}

a, button {
  /* Minimale touch target */
  min-height: var(--kbc-touch-min);
}

/* Uitzondering voor inline elementen die geen blokgrootte nodig hebben */
.kbc-inline, nav a, .kbc-menu a, .kbc-menu button,
.kbc-disc-tab, .kbc-agenda-filter, .kbc-news-card__link,
.kbc-footer-col a, .kbc-news-breadcrumb a {
  min-height: unset;
}

/* ── 3. CONTAINER UTILITY ────────────────────────────────────── */
.kbc-container,
.kbc-disc-container,
.kbc-news-container,
.kbc-agenda-container {
  max-width: var(--kbc-container-max);
  margin-inline: auto;
  padding-inline: var(--kbc-container-pad);
  width: 100%;
}

/* ── 4. UTILITY GRID CLASSES ─────────────────────────────────── */
/* Gebruik: <div class="kbc-grid kbc-grid--3"> */
.kbc-grid {
  display: grid;
  gap: clamp(14px, 2vw, 28px);
}
.kbc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kbc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kbc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.kbc-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }

/* Stack: altijd 1 kolom */
.kbc-stack { display: flex; flex-direction: column; gap: var(--kbc-space-sm); }

/* Flex rij met wrap */
.kbc-row { display: flex; flex-wrap: wrap; gap: var(--kbc-space-sm); align-items: center; }

/* ── 5. NAVBAR RESPONSIVE + HAMBURGER ───────────────────────── */

/* Hamburger knop (verborgen op desktop) */
#kbc-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--kbc-radius-sm);
  padding: 8px;
  margin-left: auto;
  flex-shrink: 0;
  transition: background .15s;
}
#kbc-menu-toggle:hover { background: rgba(49,149,207,.10); }
#kbc-menu-toggle svg { width: 22px; height: 22px; color: #14507a; }
#kbc-menu-toggle .kbc-icon-close { display: none; }

/* Mobiel overlay menu */
#kbc-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(20,50,75,.45);
  backdrop-filter: blur(2px);
}
#kbc-mobile-nav.is-open { display: block; }

#kbc-mobile-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 90vw);
  height: 100dvh;
  background: var(--kbc-white);
  padding: 20px 24px 40px;
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(20,50,75,.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
#kbc-mobile-nav.is-open #kbc-mobile-panel { transform: translateX(0); }

#kbc-mobile-panel .kbc-mob-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kbc-border);
}
#kbc-mobile-panel .kbc-mob-close {
  width: 36px; height: 36px;
  border: none; background: transparent;
  cursor: pointer; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--kbc-dark);
}
#kbc-mobile-panel .kbc-mob-close:hover { background: rgba(49,149,207,.10); }

#kbc-mobile-panel a,
#kbc-mobile-panel button.kbc-mob-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 12px;
  border-radius: var(--kbc-radius-sm);
  font: 600 16px/1.2 var(--kbc-font-body);
  color: var(--kbc-text);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background .12s;
  min-height: var(--kbc-touch-min);
}
#kbc-mobile-panel a:hover,
#kbc-mobile-panel button.kbc-mob-item:hover { background: rgba(49,149,207,.08); color: var(--kbc-dark); }

#kbc-mobile-panel .kbc-mob-sub {
  padding-left: 16px;
  display: none;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}
#kbc-mobile-panel .kbc-mob-sub.is-open { display: flex; }
#kbc-mobile-panel .kbc-mob-sub a {
  font-size: 15px;
  font-weight: 500;
  color: #4a4a4a;
  padding: 10px 12px;
}

/* ── 6. NAVBAR BREAKPOINTS ───────────────────────────────────── */
@media (max-width: 1024px) {
  #kbc-navbar { padding: 12px 24px; gap: 16px; }
  #kbc-navbar .kbc-menu > li > a,
  #kbc-navbar .kbc-menu > li > button { padding: 8px 10px; font-size: 13.5px; }
}

@media (max-width: 900px) {
  #kbc-navbar ul.kbc-menu { display: none; }
  #kbc-menu-toggle { display: flex; }
}

@media (max-width: 600px) {
  #kbc-navbar { padding: 10px 16px; }
  #kbc-navbar .kbc-brand-name { font-size: 17px; }
}

/* ── 7. TOPBAR RESPONSIVE ────────────────────────────────────── */
@media (max-width: 600px) {
  #kbc-topbar { font-size: 12px !important; padding: 0 12px !important; }
  #kbc-topbar .kbc-topbar-inner { gap: 8px !important; }
}

/* ── 8. FOOTER RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1024px) {
  #kbc-footer { padding: 40px 24px 28px; }
  #kbc-footer .kbc-footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
  #kbc-footer .kbc-footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

@media (max-width: 480px) {
  #kbc-footer { padding: 24px 16px 18px; margin-top: 32px; }
  #kbc-footer .kbc-footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  #kbc-footer .kbc-footer-grid > div:first-child { grid-column: 1 / -1; }
  #kbc-footer .kbc-footer-brand { margin-bottom: 8px; }
  #kbc-footer .kbc-footer-addr { line-height: 1.5 !important; }
  #kbc-footer .kbc-footer-col-title { margin-bottom: 8px !important; }
  #kbc-footer .kbc-footer-col a { padding: 2px 0 !important; line-height: 1.5 !important; }
  #kbc-footer .kbc-footer-col:last-child > div { line-height: 1.5 !important; }
  #kbc-footer .kbc-footer-copy { margin-top: 16px !important; padding-top: 10px !important; }
}

/* ── 9. DISCIPLINE PAGINA RESPONSIVE ────────────────────────── */
@media (max-width: 1024px) {
  .kbc-disc-container { padding: 0 24px; }
}

@media (max-width: 768px) {
  .kbc-disc-container { padding: 0 16px; }
  .kbc-disc-title { font-size: clamp(24px, 4vw, 36px); }
  .kbc-disc-tabs { gap: 4px; }
  .kbc-disc-tab { padding: 9px 12px; font-size: 13px; }
}

@media (max-width: 600px) {
  .kbc-disc-container { padding: 0 12px; }
  .kbc-disc-header { padding: 28px 0 6px; }
  .kbc-disc-section { padding-bottom: 40px; }

  /* Stand tabel: verberg minder-kritieke kolommen op klein scherm */
  .kbc-disc-table--stand .kbc-col-hide-sm { display: none; }

  /* Tabel tekst kleiner */
  .kbc-disc-table--stand { font-size: 12.5px; }
  .kbc-disc-table--stand thead th { padding: 9px 7px; font-size: 10px; }
  .kbc-disc-table--stand tbody td { padding: 9px 7px; }

  /* Spelerkaarten: 1 kolom */
  .kbc-disc-cards { grid-template-columns: 1fr; }

  /* Tabs scrollen horizontaal als ze niet passen */
  .kbc-disc-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .kbc-disc-tab { white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 400px) {
  .kbc-disc-table--stand { font-size: 11.5px; }
  .kbc-disc-table--stand thead th { padding: 8px 5px; }
  .kbc-disc-table--stand tbody td { padding: 8px 5px; }
}

/* ── 10. NIEUWS PAGINA RESPONSIVE ────────────────────────────── */
@media (max-width: 1024px) {
  .kbc-news-container,
  .kbc-news-header__inner { padding: 0 24px; }
  .kbc-news-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 600px) {
  .kbc-news-container,
  .kbc-news-header__inner { padding: 0 12px; }
  .kbc-news-grid { grid-template-columns: 1fr; gap: 14px; }
  .kbc-news-header { padding: 28px 0 24px; margin-bottom: 24px; }
  .kbc-news-card__body { padding: 14px 16px 16px; }
  .kbc-news-card__title { font-size: 16px; }
  .kbc-news-card__excerpt { -webkit-line-clamp: 2; }
}

/* ── 11. AGENDA PAGINA RESPONSIVE ────────────────────────────── */
@media (max-width: 1024px) {
  .kbc-agenda-container { padding: 0 24px; }
  .kbc-agenda-featured { padding: 28px 28px; }
}

@media (max-width: 768px) {
  .kbc-agenda-container { padding: 0 16px; }
  .kbc-agenda-featured { padding: 24px 22px; margin: 24px 0 8px; }
  .kbc-agenda-featured__body { flex-direction: column; gap: 18px; align-items: flex-start; }
  .kbc-agenda-featured__date-block { flex-direction: row; gap: 12px; align-items: center; padding: 10px 16px; width: 100%; }
  .kbc-agenda-featured__day { font-size: 32px; }
}

@media (max-width: 600px) {
  .kbc-agenda-container { padding: 0 12px; }
  .kbc-agenda-header { padding: 28px 0 6px; }
  .kbc-agenda-featured { padding: 18px 16px; border-radius: 14px; }
  .kbc-agenda-item { padding: 12px 12px; gap: 12px; }
  .kbc-agenda-item__title { font-size: 15px; }
  .kbc-agenda-filters { gap: 6px; }
  .kbc-agenda-filter { padding: 8px 13px; font-size: 13px; }
}

/* ── 12. HOMEPAGE ELEMENTOR RESPONSIEF ───────────────────────── */
/* Snel naar grid: automatisch stapelen */
@media (max-width: 600px) {
  /* De Snel naar grid is inline-stijl; overschrijf via specifieke selector */
  .elementor-widget-html div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Hero knoppen naast elkaar op desktop, gestapeld op mobiel */
@media (max-width: 480px) {
  .elementor-button-wrapper { width: 100%; }
  .elementor-button { width: 100%; justify-content: center; }
}

/* ── 13. STAND BIJGEWERKT BADGE RESPONSIVE ───────────────────── */
@media (max-width: 600px) {
  .kbc-stand-bijgewerkt {
    font-size: 12px;
    padding: 5px 10px;
    flex-wrap: wrap;
  }
}

/* ── 14. TOEKOMSTIGE PAGINA UTILITIES ────────────────────────── */
/* Gebruik .kbc-page-header op nieuwe pagina's */
.kbc-page-header {
  background: var(--kbc-white);
  padding: clamp(28px, 4vw, 48px) 0 8px;
  border-bottom: 1px solid rgba(26,26,26,.08);
  margin-bottom: 0;
}
.kbc-page-title {
  font: 800 clamp(24px, 3.5vw, 44px)/1.05 var(--kbc-font-head);
  color: var(--kbc-dark);
  margin: 8px 0 6px;
}
.kbc-page-sub {
  font: 400 15px/1.5 var(--kbc-font-body);
  color: var(--kbc-muted);
  margin: 0 0 24px;
}
.kbc-section {
  padding-block: clamp(32px, 5vw, 64px);
}

/* Kaart basis: automatisch responsive */
.kbc-card {
  background: var(--kbc-white);
  border-radius: var(--kbc-radius-md);
  border: 1px solid rgba(49,149,207,.12);
  box-shadow: var(--kbc-shadow-sm);
  padding: clamp(16px, 2.5vw, 24px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kbc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--kbc-shadow-md);
}

/* Tabel wrapper: altijd horizontaal scrollbaar */
.kbc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--kbc-radius-md);
  border: 1px solid rgba(49,149,207,.12);
  box-shadow: var(--kbc-shadow-sm);
}

/* Knop basis: touch-vriendelijk */
.kbc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--kbc-touch-min);
  padding: 0 clamp(14px, 2vw, 22px);
  border-radius: var(--kbc-radius-sm);
  font: 600 15px/1 var(--kbc-font-body);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, transform .12s;
  border: 2px solid transparent;
  white-space: nowrap;
}
.kbc-btn--primary {
  background: var(--kbc-primary);
  color: var(--kbc-white);
}
.kbc-btn--primary:hover {
  background: var(--kbc-dark);
  transform: translateY(-1px);
}
.kbc-btn--outline {
  background: transparent;
  color: var(--kbc-dark);
  border-color: var(--kbc-primary);
}
.kbc-btn--outline:hover {
  background: var(--kbc-primary);
  color: var(--kbc-white);
}

/* ── 15. RESPONSIVE IMAGES ───────────────────────────────────── */
.kbc-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kbc-img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── 16. PRINT (basis) ───────────────────────────────────────── */
@media print {
  #kbc-navbar, #kbc-topbar, #kbc-footer, #kbc-mobile-nav { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .kbc-disc-table-wrap { overflow: visible; }
}

/* ── GLOBALE BREADCRUMB STIJL ────────────────────────────────── */
.kbc-news-breadcrumb {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font: 500 13px/1 'Source Sans 3', sans-serif;
  margin-bottom: 0;
  color: #9a9a9a;
}
.kbc-news-breadcrumb a {
  color: #3195CF !important;
  text-decoration: none;
  transition: color .15s;
}
.kbc-news-breadcrumb a:hover {
  color: #14507a !important;
}
.kbc-news-breadcrumb span {
  color: #9a9a9a;
  font-size: 13px;
}
.kbc-news-breadcrumb span[aria-current],
.kbc-news-breadcrumb span:not([aria-hidden]) {
  color: #9a9a9a;
}

/* ========================================================
   MOBILE FIXES
   ======================================================== */

@media (max-width: 768px) {

  /* Geen overflow op geen enkele pagina */
  body, main, .kbc-disc-container,
  .kbc-agenda-container, .kbc-news-container { overflow-x: hidden !important; }

  /* Page title niet te groot op mobiel */
  .kbc-disc-title,
  .kbc-agenda-title,
  .kbc-news-header__title,
  .kbc-search-hero h1,
  #kbc-search-main h1 {
    font-size: 24px !important;
    margin: 2px 0 5px !important;
  }

  /* Article hero body H1 */
  .kbc-article-hero h1 {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  /* Afbeeldingen nooit buiten container */
  img { max-width: 100% !important; height: auto !important; }

  /* News featured niet te hoog */
  .kbc-news-featured { height: 220px !important; border-radius: 12px !important; }
  .kbc-news-featured h2 { font-size: 16px !important; }
  .kbc-news-featured__body { padding: 16px !important; }

  /* Nieuws grid kaarten */
  .kbc-news-card-v2__img-wrap { height: 150px !important; }
  .kbc-news-card-v2__title { font-size: 14px !important; }

  /* Tap targets minimaal 44px hoog */
  .kbc-disc-tab { min-height: 44px !important; padding: 10px 14px !important; }
  .kbc-agenda-filter { min-height: 44px !important; padding: 10px 16px !important; }
  .kbc-btn, .kbc-gesch-btn { min-height: 44px !important; }
  nav a, #kbc-footer a { min-height: 36px !important; }

  /* Agenda item niet te smal */
  .kbc-agenda-item { flex-wrap: wrap !important; }
  .kbc-agenda-featured { border-radius: 12px !important; }
  .kbc-agenda-featured__title { font-size: 18px !important; }

  /* Spelersprofiel stats grid: 2 kolommen op mobiel */
  .kbc-stat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .kbc-stat-box__val { font-size: 18px !important; }

  /* OC kaarten: 1 kolom */
  .kbc-oc-card { flex-direction: row !important; }

  /* Gerelateerde berichten grid 1 kolom */
  .kbc-related__grid { grid-template-columns: 1fr !important; }

  /* Artikel layout: geen sidebar zijkolom */
  .kbc-article-wrap {
    grid-template-columns: 1fr !important;
    padding: 24px 16px 40px !important;
  }

  /* Zoekformulier full width */
  .kbc-search-form-big { max-width: 100% !important; }

  /* Tabel horizontaal scrollbaar */
  .kbc-disc-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .kbc-disc-table { min-width: 600px !important; }

}

@media (max-width: 480px) {

  /* Nog kleinere heading op kleine telefoons */
  .kbc-disc-title,
  .kbc-agenda-title,
  .kbc-news-header__title { font-size: 22px !important; }

  /* Hero in artikel nog kleiner */
  .kbc-article-hero { height: 180px !important; }

  /* Stats: 2x3 grid */
  .kbc-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Nieuws featured nog kleiner */
  .kbc-news-featured { height: 190px !important; }

  /* Kaart nav vorig/volgend: 1 kolom */
  .kbc-article-nav { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Reactie formulier: 1 kolom */
  .kbc-cf-grid { grid-template-columns: 1fr !important; }

}