/*
 * WK Pool Pro v1.2.8 — Styling Reset v2
 * Doel: één consequente stijl voor de hele plugin.
 * - Gewone content/cards: licht + donkerblauwe tekst
 * - Hero/volgende wedstrijd: donker + wit/oranje
 * - Badges/knoppen: oranje/donkerblauw
 * - Geen ongewenste witte/lichtblauwe tekstvlakken
 */

.wkp {
  --wkp-blue: #071422;
  --wkp-blue-2: #0d2236;
  --wkp-text: #071422;
  --wkp-muted: #334155;
  --wkp-orange: #ff7a00;
  --wkp-cream: #fffaf2;
  --wkp-card: #ffffff;
  --wkp-line: rgba(7, 20, 34, .12);
  --wkp-orange-line: rgba(255, 122, 0, .28);
  --wkp-radius: 22px;
  --wkp-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  color: var(--wkp-text) !important;
}

/* Algemene reset binnen plugin */
.wkp *,
.wkp *::before,
.wkp *::after {
  box-sizing: border-box;
}

.wkp span,
.wkp strong,
.wkp b,
.wkp em,
.wkp small,
.wkp mark,
.wkp label {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Standaard tekst */
.wkp,
.wkp p,
.wkp li,
.wkp div,
.wkp td,
.wkp th,
.wkp label,
.wkp input,
.wkp select,
.wkp textarea {
  color: var(--wkp-text) !important;
}

/* Subtekst */
.wkp small,
.wkp em,
.wkp .wkp-meta,
.wkp .wkp-hint,
.wkp .wkp-subtitle,
.wkp .wkp-description,
.wkp .wkp-card-subtitle {
  color: var(--wkp-muted) !important;
  opacity: 1 !important;
}

/* Koppen en accenten */
.wkp h1,
.wkp h2,
.wkp h3,
.wkp h4,
.wkp .wkp-section-title,
.wkp .wkp-card-title,
.wkp .wkp-tavern-title,
.wkp .wkp-kicker,
.wkp .wkp-label-accent,
.wkp .wkp-points,
.wkp .wkp-score,
.wkp .wkp-rank-points {
  color: var(--wkp-orange) !important;
  text-shadow: none !important;
}

/* Links */
.wkp a {
  color: var(--wkp-orange) !important;
  font-weight: 800;
}

/* Alles dat als kaart/blok fungeert: licht en leesbaar */
.wkp .wkp-card,
.wkp .wkp-front-card,
.wkp .wkp-front-rank,
.wkp .wkp-news-card,
.wkp .wkp-analysis-card,
.wkp .wkp-feature-card,
.wkp .wkp-feature-block,
.wkp .wkp-stat-card,
.wkp .wkp-rank-row,
.wkp .wkp-tavern-card,
.wkp .wkp-tavern-podium-card,
.wkp .wkp-podium-card,
.wkp .wkp-pub-stat,
.wkp .wkp-details,
.wkp .wkp-table,
.wkp .wkp-mini-table,
.wkp .wkp-welcome,
.wkp .wkp-welcome-item,
.wkp .wkp-question-card,
.wkp .wkp-round-card,
.wkp details {
  background: var(--wkp-cream) !important;
  background-color: var(--wkp-cream) !important;
  background-image: none !important;
  color: var(--wkp-text) !important;
  border: 1px solid var(--wkp-orange-line) !important;
  border-radius: var(--wkp-radius) !important;
  box-shadow: var(--wkp-shadow) !important;
}

/* Tekst in kaarten altijd donker */
.wkp .wkp-card *,
.wkp .wkp-front-card *,
.wkp .wkp-front-rank *,
.wkp .wkp-news-card *,
.wkp .wkp-analysis-card *,
.wkp .wkp-feature-card *,
.wkp .wkp-feature-block *,
.wkp .wkp-stat-card *,
.wkp .wkp-rank-row *,
.wkp .wkp-tavern-card *,
.wkp .wkp-tavern-podium-card *,
.wkp .wkp-podium-card *,
.wkp .wkp-pub-stat *,
.wkp .wkp-details *,
.wkp .wkp-table *,
.wkp .wkp-mini-table *,
.wkp .wkp-welcome *,
.wkp .wkp-welcome-item *,
.wkp .wkp-question-card *,
.wkp .wkp-round-card *,
.wkp details * {
  color: var(--wkp-text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Accenten binnen kaarten blijven oranje */
.wkp .wkp-card h1,
.wkp .wkp-card h2,
.wkp .wkp-card h3,
.wkp .wkp-front-card h1,
.wkp .wkp-front-card h2,
.wkp .wkp-front-card h3,
.wkp .wkp-news-card h1,
.wkp .wkp-news-card h2,
.wkp .wkp-news-card h3,
.wkp .wkp-analysis-card h1,
.wkp .wkp-analysis-card h2,
.wkp .wkp-analysis-card h3,
.wkp .wkp-feature-card h1,
.wkp .wkp-feature-card h2,
.wkp .wkp-feature-card h3,
.wkp .wkp-kicker,
.wkp .wkp-card-title,
.wkp .wkp-section-title,
.wkp .wkp-points,
.wkp .wkp-score,
.wkp .wkp-rank-points,
.wkp .wkp-pub-stat strong,
.wkp .wkp-analysis-card strong {
  color: var(--wkp-orange) !important;
}

/* Meta binnen kaarten blijft subtiel donker */
.wkp .wkp-card small,
.wkp .wkp-front-card small,
.wkp .wkp-news-card small,
.wkp .wkp-analysis-card small,
.wkp .wkp-feature-card small,
.wkp .wkp-meta,
.wkp .wkp-hint {
  color: var(--wkp-muted) !important;
}

/* Donkere onderdelen expliciet afbakenen */
.wkp .wkp-hero,
.wkp .wkp-next,
.wkp .wkp-pub-hero,
.wkp .wkp-dark,
.wkp .wkp-dark-section {
  background: linear-gradient(135deg, var(--wkp-blue), var(--wkp-blue-2)) !important;
  color: #ffffff !important;
  border: 2px solid var(--wkp-orange) !important;
  border-radius: var(--wkp-radius) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.25) !important;
}

/* Tekst op donkere onderdelen */
.wkp .wkp-hero *,
.wkp .wkp-next *,
.wkp .wkp-pub-hero *,
.wkp .wkp-dark *,
.wkp .wkp-dark-section * {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Oranje koppen op donkere onderdelen */
.wkp .wkp-hero h1,
.wkp .wkp-hero h2,
.wkp .wkp-pub-hero h1,
.wkp .wkp-pub-hero h2,
.wkp .wkp-dark h1,
.wkp .wkp-dark h2,
.wkp .wkp-dark-section h1,
.wkp .wkp-dark-section h2,
.wkp .wkp-next-label,
.wkp .wkp-next h2,
.wkp .wkp-next h3 {
  color: var(--wkp-orange) !important;
}

/* Volgende wedstrijd */
.wkp .wkp-next-main,
.wkp .wkp-next-main * {
  color: #ffffff !important;
  font-weight: 950 !important;
}

.wkp .wkp-next-meta,
.wkp .wkp-next-meta * {
  color: rgba(255,255,255,.86) !important;
}

/* Badges/pillen/nummers */
.wkp .wkp-badge,
.wkp .wkp-label,
.wkp .wkp-status,
.wkp .wkp-pill,
.wkp .wkp-medal,
.wkp .wkp-rank-number {
  background: var(--wkp-orange) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* Counters donkerblauw */
.wkp .wkp-count,
.wkp .wkp-counter,
.wkp .wkp-tab-count {
  background: var(--wkp-blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

/* Tabellen */
.wkp table {
  width: 100%;
  border-collapse: collapse;
  background: transparent !important;
  color: var(--wkp-text) !important;
}

.wkp thead,
.wkp tbody,
.wkp tr,
.wkp td,
.wkp th {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--wkp-text) !important;
}

.wkp th {
  color: var(--wkp-orange) !important;
  font-weight: 900 !important;
}

.wkp td strong {
  color: var(--wkp-orange) !important;
}

/* Formulieren */
.wkp input,
.wkp select,
.wkp textarea {
  background: #ffffff !important;
  color: var(--wkp-text) !important;
  border: 1px solid var(--wkp-line) !important;
  border-radius: 10px !important;
}

.wkp input::placeholder,
.wkp textarea::placeholder {
  color: #64748b !important;
}

/* Knoppen */
.wkp button,
.wkp input[type="submit"],
.wkp .button,
.wkp .wkp-button {
  background: var(--wkp-orange) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.wkp button *,
.wkp .button *,
.wkp .wkp-button * {
  color: #ffffff !important;
}

/* Analyse / voorpagina grids */
.wkp .wkp-analysis-grid,
.wkp .wkp-analysis-columns,
.wkp .wkp-front-grid,
.wkp .wkp-news-grid,
.wkp .wkp-tavern-podium {
  background: transparent !important;
  color: var(--wkp-text) !important;
}

/* Accordions mobiel */
@media (max-width: 768px) {
  .wkp details,
  .wkp .wkp-details,
  .wkp .wkp-question-card,
  .wkp .wkp-round-card {
    background: var(--wkp-cream) !important;
    color: var(--wkp-text) !important;
  }

  .wkp summary,
  .wkp summary *,
  .wkp .wkp-details summary,
  .wkp .wkp-details summary * {
    color: var(--wkp-text) !important;
    background: transparent !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
}

/* Selectie alleen zichtbaar tijdens selectie */
.wkp ::selection {
  background: rgba(255,122,0,.25) !important;
  color: var(--wkp-text) !important;
}

/* Afbeeldingen ongemoeid laten */
.wkp img,
.wkp svg {
  background: transparent !important;
}

/* Backoffice-like content als dat in frontend staat */
.wkp .wrap,
.wkp .wrap * {
  color: var(--wkp-text) !important;
}

.wkp .wrap h1,
.wkp .wrap h2 {
  color: var(--wkp-orange) !important;
}