@charset "UTF-8";
/*
 * Gedeeld thema bovenop Bootstrap 5, bedoeld om de look van de oude site
 * technisch na te bouwen (zie stappenplan-herbouw-bigbang.md, uitgangspunt
 * "Styling blijft hetzelfde: geen visuele herontwerp-slag, puur een
 * technische herbouw"). Kleurwaarden hieronder zijn letterlijk overgenomen
 * uit de oude css/dbc.css (headerband #8AB8DB, content #EFF4F7, link/actief
 * #2e6e9e / #e17009, menu-pillen #dfeffc/#c5dbec), maar dan als lichte laag
 * over Bootstrap-componenten (nav, card, list-group) in plaats van de oude
 * losstaande #buttonarea/#tabarea/#floatMenu-CSS met absolute positionering.
 *
 * Sinds de omzetting naar Sass (1 september 2026) komen de kleurwaarden zelf
 * uit _dbc-variables.scss (@use hierboven), niet meer als losse hexcodes
 * hier: dat is nu de ene plek waar dit palet vastligt, zie de toelichting
 * in dat bestand. Dit :root-blok blijft functioneel exact hetzelfde: het
 * genereert nog steeds dezelfde CSS custom properties, die nog steeds
 * gewoon in de browser/JS opvraagbaar/overschrijfbaar zijn.
 */
:root {
  --dbc-header-bg: #8AB8DB;
  --dbc-header-border: #4297d7;
  --dbc-content-bg: #EFF4F7;
  --dbc-link: #2e6e9e;
  --dbc-link-hover: #1d5987;
  --dbc-active: #e17009;
  --dbc-pill-bg: #dfeffc;
  --dbc-pill-bg-hover: #d0e5f5;
  --dbc-pill-border: #c5dbec;
  --dbc-pill-border-hover: #79b7e7;
  --dbc-nieuws-datum: #0088ee;
  /* Zelfde lettertype-stapeltje als de oude css/dbc.css, dat vrijwel
     overal (kopband, menu's, tabarea/textscroll, .specialday) gebruikt
     werd. Bootstrap zet zelf geen font-family op <html>/<body>, dus
     zonder deze regel viel de site terug op de generieke systeemfont
     (Segoe UI/system-ui) — merkbaar ander lettertype dan het origineel,
     ook al zijn het allebei schreefloze fonts. Zie Paul: "voelt nog te
     veel anders voor mij [...] font type en size, kleur gebruik". */
  --dbc-font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
}

/*
 * Oude css/dbc.css: `html { font-size:80%; font-family: Lucida
 * Grande,Lucida Sans,Arial,sans-serif; }` — de HELE oude site (menu's,
 * kop, content, knoppen) rendert zo'n 20% kleiner/compacter dan
 * Bootstraps standaard 16px-basis. Omdat vrijwel alle Bootstrap-opmaak
 * (font-sizes, paddings, marges) in rem werkt, schaalt deze ene regel
 * automatisch de hele site mee terug naar dezelfde dichtheid als het
 * origineel, zonder dat elk los onderdeel apart aangepast hoeft te
 * worden. Op <html> (niet <body>) gezet, want rem-eenheden rekenen
 * tegen de font-size van <html>, precies zoals het origineel ook deed.
 */
html {
  font-size: 80%;
}

/*
 * css/dbc.css zet nergens een eigen `line-height` — dus viel overal terug
 * op de (compacte) browserstandaard "normal", zo'n 1.15 i.p.v. Bootstraps
 * eigen keuze van 1.5 op <body>. Dat scheelt behoorlijk: bij dezelfde
 * font-size staat platte tekst met 1.5 zo'n 30% verder uit elkaar dan met
 * "normal", wat Paul zag als "compacter opelkaar (kleinere regelafstand)"
 * in het origineel — en diezelfde extra witruimte tussen de regels laat
 * dezelfde letters ook net iets "minder vet" ogen, puur door het contrast
 * met meer lucht eromheen (het feitelijke font-weight is op beide sites
 * gewoon 400, gecontroleerd via de browser). Hier dus bewust terug naar
 * "normal", zodat platte tekst zonder eigen Bootstrap-component-klasse
 * (paragrafen, nieuwsbericht-body) weer even compact oogt als het
 * origineel; Bootstrap-componenten die zelf al een eigen line-height
 * zetten (bijv. .btn, .form-control) blijven ongemoeid, dit raakt alleen
 * geërfde, niet expliciet ingestelde tekst.
 */
body {
  background: var(--dbc-content-bg);
  font-family: var(--dbc-font-family);
  line-height: normal;
}

/*
 * Bootstraps standaard .container heeft per breakpoint een eigen
 * max-width (tot 1320px op xxl) en wordt daarna gecentreerd: op een
 * breed scherm ontstaat zo een steeds grotere, lege marge links/rechts
 * tot de browserrand, terwijl .dbc-header (hieronder) gewoon randvol
 * loopt met maar 24px padding. Dat verschil viel Paul op als "het
 * contextmenu staat een heel stuk van de rechterkant af": de kop raakt
 * de rand wel, de content (incl. het contextmenu erin) niet.
 * Fix: geen max-width meer, gewoon 100% breed met dezelfde 24px als de
 * kopband, zodat kop en content precies dezelfde rand aanhouden. Dit
 * herdefinieert simpelweg de bestaande Bootstrap-klasse .container die
 * pagina/show.php, alle Fase D-module-views en templates/footer.php al
 * gebruiken, dus geen enkele view hoeft hiervoor aangepast te worden.
 */
.container {
  max-width: none;
  padding-left: 24px;
  padding-right: 24px;
}

/*
 * Flexbox-min-content-fix voor de hoofdkolom (.col-md-8) naast het
 * contextmenu (.col-md-4): Bootstraps .row is display:flex, en een
 * flex-item krijgt standaard min-width:auto, dus de browser maakt 'm nooit
 * smaller dan de intrinsieke minimuminhoud (het langste onafbreekbare
 * stuk content erin). Bij oude weekspel-/kalenderinhoud met een lang
 * onafbreekbaar stuk (bijv. een reeks &nbsp; voor uitlijning, een lange
 * url) betekende dit dat .col-md-8 zelf breder werd dan zijn toegewezen
 * plek, en dus de hele pagina breder dan het scherm: een scrollbalk
 * onderaan de HELE pagina, i.p.v. binnen de content zelf.
 * .uitslagen-legacy-content (uitslagen.css/.scss) heeft daar al
 * overflow-x:auto voor, en legacy-sticky-scrollbar.js zet er al een
 * sticky scrollbalkje bij, maar dat mechanisme kreeg nooit de kans: de
 * kolom groeide gewoon mee in plaats van dat de inhoud erbinnen ging
 * scrollen.
 * Zelfde soort fix als hierboven al bij .dbc-header-content staat, nu ook
 * hier. Zie stappenplan-herbouw-bigbang.md sectie 65.48 voor de volledige
 * toelichting (Paul: weekspel/kalender toonden de balk, nieuws en een
 * weekspel zonder brede content niet).
 */
.col-md-8 {
  min-width: 0;
}

/* Kopband: logo, titel, login-plek, hoofdmenu, submenu, marquee.
   position: relative zodat .dbc-infoarea (de "content:"-regel) hierbinnen
   met position: absolute tegen de onderkant aan gezet kan worden, zie
   hieronder. */
.dbc-header {
  position: relative;
  background: var(--dbc-header-bg);
  border-bottom: 1px solid var(--dbc-header-border);
  padding: 12px 24px 10px;
}

/*
 * Logo links, de rest (titel/login-rij, hoofdmenu, submenu, marquee)
 * in een kolom ernaast: zelfde indeling als de oude site, waar de
 * menuknoppen ook onder de titel begonnen (ingesprongen tot voorbij het
 * logo) i.p.v. onder het logo zelf. `align-items: flex-start` zorgt ervoor
 * dat het logo alleen zijn eigen hoogte inneemt; de kolom eronder loopt
 * gewoon door op dezelfde inspringing, ook voor de rijen die lager staan
 * dan het logo hoog is.
 */
.dbc-header-flex {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dbc-logo {
  height: 130px;
  width: auto;
  flex-shrink: 0;
}

.dbc-header-content {
  flex: 1 1 auto;
  min-width: 0;
}

.dbc-header-top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.dbc-title {
  /* Was hier eerder Georgia (schreef-lettertype) — dat was fout: het
     origineel `#titleblock` in css/dbc.css gebruikt hetzelfde schreefloze
     stapeltje (Lucida Grande/Lucida Sans/Arial) als de rest van de site,
     gewoon schuin en vet gemaakt, geen apart sier-lettertype. Rechtgezet
     na Pauls opmerking over het lettertype-verschil. */
  font-family: var(--dbc-font-family);
  font-style: italic;
  font-weight: bold;
  font-size: 1.7rem;
  color: #fff;
  flex: 1 1 auto;
}

.dbc-loginarea {
  font-size: 0.85rem;
  white-space: nowrap;
}

.dbc-loginarea a,
.dbc-loginarea button {
  color: #fff;
  text-decoration: underline;
  margin-left: 6px;
}

.dbc-loginarea button {
  /* "log uit" is een <button> in een klein POST-formuliertje (zie
     templates/header.php), geen <a>: hier alleen zijn Bootstrap-styling
     resetten zodat hij er toch als een simpele link uitziet, net als
     "login" ernaast. */
  border: none;
  background: none;
  font-size: inherit;
}

/* Opvolger van het "content:"-deel van het oude #contentmail-blokje
   (index.php). Position: absolute (t.o.v. .dbc-header hierboven) i.p.v.
   gewoon in de documentstroom: anders komt er, ná het hoofdmenu/submenu/
   marquee, een hele extra regelhoogte bij onderaan de kop. Nu staat het
   juist op dezelfde hoogte als de onderkant van het submenu, rechts
   uitgelijnd (zelfde rechter kant als de rest van de kopband).
   Alleen het "content:"-label is wit (zie .dbc-infoarea strong hieronder);
   de link zelf krijgt bewust geen kleur opgelegd, gewoon de standaard
   linkkleur. */
.dbc-infoarea {
  position: absolute;
  right: 24px;
  bottom: 10px;
  font-size: 0.8rem;
  text-align: right;
}

.dbc-infoarea strong {
  color: #fff;
}

.dbc-nav-main,
.dbc-nav-sub {
  margin-top: 10px;
}

/* Menu-"pillen": zelfde ronde, gekleurde knoppen als het oude hoofd-/
   submenu (.buttonlist/.tablist in css/dbc.css), nu gewoon een <ul><li><a>
   in plaats van absoluut gepositioneerde divs. */
.nav-pills-dbc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nav-pills-dbc a {
  /*
   * css/dbc.css zet de tekstgrootte van het hoofdmenu niet op de knoppen
   * zelf, maar op de omliggende container (`#buttonarea { font-size:24px;
   * }`, letterlijk 24px, GEEN percentage/rem — telt dus niet mee in de
   * html{font-size:80%}-verkleining hierboven). De knoppen hier kregen tot
   * nu toe geen eigen font-size en erfden domweg de gewone 12,8px
   * lopende-tekst-grootte, waardoor ze een stuk kleiner oogden dan het
   * origineel — Paul: "de knoppen in het menu zijn een stuk groter"
   * (origineel). Rechtstreeks als 24px overgenomen; padding staat, net als
   * in het origineel (`.tablist/.buttonlist li a { padding:.2em .4em; }`),
   * in `em` zodat 'ie automatisch meeschaalt met deze font-size.
   */
  display: block;
  padding: 0.2em 0.4em;
  font-size: 24px;
  text-decoration: none;
  border: 1px solid var(--dbc-pill-border);
  background: var(--dbc-pill-bg);
  color: var(--dbc-link);
  font-weight: bold;
  border-radius: 6px;
}

.nav-pills-dbc a:hover {
  border-color: var(--dbc-pill-border-hover);
  background: var(--dbc-pill-bg-hover);
  color: var(--dbc-link-hover);
}

.nav-pills-dbc a.current {
  color: var(--dbc-active);
  border-color: var(--dbc-pill-border-hover);
}

.nav-pills-dbc-sub a {
  /* Zelfde verhaal als hierboven bij .nav-pills-dbc a, maar dan voor het
     submenu: origineel `#tabarea { font-size:18px; }` (ook letterlijk,
     geen rem/%). Padding blijft dezelfde `.2em .4em`-verhouding als het
     hoofdmenu (net als in het origineel, dat hoofd- en submenu dezelfde
     .tablist/.buttonlist-padding gaf) — schaalt hier vanzelf mee naar iets
     kleiner doordat de font-size zelf al kleiner is dan het hoofdmenu. */
  font-size: 18px;
}

/* Marquee: WEL weer scrollende tekst, net als op de oude site
   (scripts/js/jquery.marquee.js, "van rechts naar links doorlopend").
   Eerst hier bewust vervangen door een gewone stilstaande regel, maar Paul
   gaf aan dat 'ie ook echt moet scrollen zoals het origineel — dat is nu
   een pure CSS-animatie (geen jQuery-afhankelijkheid nodig, past bij de
   sitebrede keuze om jQuery niet opnieuw te introduceren in de herbouw,
   zie stappenplan-herbouw-bigbang.md sectie 5).
   .dbc-marquee is het "kijkgaatje" (overflow:hidden), .dbc-marquee-track is
   de daadwerkelijk bewegende laag: begint via padding-left:100% net buiten
   beeld rechts, en schuift met translateX(-100%) helemaal naar links tot
   'ie net buiten beeld links verdwijnt — bij infinite herhaling ontstaat
   zo dezelfde ononderbroken doorloop-illusie als het origineel
   (duplicated:true). animation-play-state:paused bij :hover doet hetzelfde
   als het origineel z'n pauseOnHover:true. */
.dbc-marquee {
  margin-top: 6px;
  font-size: 0.8rem;
  overflow: hidden;
  white-space: nowrap;
}

.dbc-marquee-track {
  display: inline-block;
  padding-left: 100%;
  animation: dbc-marquee-scroll 18s linear infinite;
}

.dbc-marquee:hover .dbc-marquee-track {
  animation-play-state: paused;
}

@keyframes dbc-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.dbc-marquee a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.dbc-marquee a:hover {
  text-decoration: underline;
}

/*
 * Contextmenu: opvolger van de oude #floatMenu-kaart rechts op de pagina.
 * De oude site liet 'm "meezweven" met scrollen via een jQuery-scrollhandler
 * (moveFloatMenu() in scripts/js/jquerymain.js, die bij elke scroll de
 * top-positie herberekende). `position: sticky` is het moderne, CSS-only
 * equivalent daarvan: geen JS nodig, blijft vanzelf in beeld terwijl je
 * door de linkerkolom scrolt, en valt terug op gewoon normaal meescrollen
 * zodra de kaart zelf langer is dan het scherm.
 */
.dbc-context-menu {
  background: #FCFDFD;
  border: 1px solid #2266AA;
  border-radius: 6px;
  position: sticky;
  top: 16px;
}

/*
 * Was verder gewoon zo breed als de col-md-4 waar hij in staat: prima op
 * de oude, smallere Bootstrap-container, maar op de nu randvolle
 * .container hierboven (zie de body{}-regel) wordt col-md-4 op een breed
 * scherm al snel 500-600px, veel breder dan het simpele lijstje aan
 * links nodig heeft. Paul noemde dit "behoorlijk breed". Vaste, smallere
 * maximale breedte + rechts uitgelijnd binnen zijn kolom (margin-left:
 * auto), zodat de kaart ook echt tegen dezelfde rand als de kopband komt
 * te staan, i.p.v. los ergens in een brede kolom te zweven. Alleen vanaf
 * md: onder md staat col-md-4 sowieso al 100% breed (gewoon gestapeld
 * onder de hoofdcontent), dat gedrag blijft ongewijzigd.
 */
@media (min-width: 768px) {
  .dbc-context-menu {
    max-width: 260px;
    margin-left: auto;
  }
}
.dbc-context-menu .list-group-item {
  border: none;
  color: #222;
}

.dbc-context-menu .list-group-item:hover {
  background: var(--dbc-pill-bg);
  color: var(--dbc-link);
}

.dbc-context-menu .list-group-item.active {
  background: #f5f8f9;
  color: var(--dbc-active);
  font-weight: bold;
  border: none;
}

/*
 * Nieuwsberichten (nieuws/actueel.php, en de detailweergave in de popup van
 * nieuws/historie.php): letterlijk overgenomen uit de oude .nieuwsheader/
 * .nieuwssubheader/.nieuwsbody-klassen in css/dbc.css, die dispNieuws.php
 * gebruikte. .dbc-nieuws-datum was daar ".nieuwsheader" (zonder de losse
 * h1-regel, die was alleen voor de "NIEUWS"-paginatitel, niet meer nodig
 * nu de titel via de gewone <h1 class="h4"> van de pagina zelf komt).
 */
.dbc-nieuws-kop {
  color: var(--dbc-active);
  font-size: 1.1em;
  font-weight: bold;
}

.dbc-nieuws-datum {
  color: var(--dbc-nieuws-datum);
  font-size: 0.9em;
}

.dbc-nieuws-body {
  color: var(--dbc-link);
}

/*
 * Infoblokje ("stuur een mailtje") boven de nieuwsberichten: zelfde
 * kader-kleur als de contextmenu-kaart (#2266AA), maar bewust dikker (2px
 * i.p.v. 1px) zodat het duidelijker opvalt tussen de nieuwsberichten,
 * anders dan Bootstraps standaard `.border` (heel lichtgrijs, viel volgens
 * Paul te weinig op).
 */
.dbc-nieuws-infoblok {
  background: #FCFDFD;
  border: 2px solid #2266AA;
  border-radius: 6px;
}

.dbc-footer {
  padding: 16px 0;
  color: #666;
  border-top: 1px solid #ddd;
  margin-top: 40px;
}

/*
 * Miniaturen in de "kies bestaand bestand"-lijsten (nieuwsadmin/form.php,
 * weekspeladmin/ontbrekende_bestanden.php, infopaginaadmin/bewerk.php):
 * Paul, verbatim, over de eerdere kale <select>-dropdowns: "is het
 * mischien mogelijk om een voorbeeld van de plaatjes op te nemen?".
 * .dbc-bestandkiezer-thumb toont de echte afbeelding, .dbc-bestandkiezer-
 * icon is de vervanger voor niet-afbeeldingen (documenten): zelfde
 * afmeting/positie zodat de lijst niet "springt" tussen afbeelding- en
 * documentregels.
 */
.dbc-bestandkiezer-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: #f0f0f0;
}

.dbc-bestandkiezer-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 1.25rem;
}

/*# sourceMappingURL=site-theme.css.map */