/* mokum-basis.css — de gedeelde basis van alle Mokum-sites (#214): de kopbalk, de breedte van
   de inhoud en de kolommen. Eén bestand, zodat die overal gelijk blijven; de verschillen van
   vóór 21-10 ontstonden doordat elke pagina een eigen kopie had.

   Laden, vóór de eigen stijl van de pagina:
     op mokum-streams:       <link rel="stylesheet" href="/mokum-basis.css">
     op andere Mokum-sites:  <link rel="stylesheet" href="https://mokum-streams.pdscloud.nl/mokum-basis.css">
   Dus net als site-nav.js: niet hernoemen of verplaatsen zonder die sites mee te nemen. Een
   wijziging staat na de GitHub Pages-cache (~10 min) op alle sites.

   Omdat dit bestand eerst komt, kan een pagina iets bewust anders doen zonder !important
   (zoals het XL-scherm van Mokum Live). Niet voor de OBS-overlays en het pauzescherm. */

/* ── Kleuren en maten ─────────────────────────────────────────────────────────
   Eigen (Nederlandse) namen: mokum-wachtlijst heeft zelf al --mokum-bg, --mokum-text enz.
   met andere waarden, en die mogen elkaar niet overschrijven. */
:root {
  --mokum-pagina: #0a0a0a;         /* achtergrond van de pagina */
  --mokum-balk: #1a1a1a;           /* kopbalk en menu */
  --mokum-lijn: #2a2a2a;           /* randen en de grijze knop */
  --mokum-tekst: #cccccc;          /* gewone tekst */
  --mokum-tekst-zwak: #999999;     /* alleen op de zwarte pagina; op antraciet te zwak */
  --mokum-rood: #cc0000;           /* merkrood: knoppen en "Mokum" in de kop */
  --mokum-rood-licht: #ff6b6b;     /* rode tekst en tekstlinks */
  --mokum-antraciet: #3b3f45;      /* kaart */
  --mokum-antraciet-rand: #5c626a;
  --mokum-tegel: #1c1c1c;          /* donkere ondergrond van tegels en invoervelden */
  --mokum-breedte: 1600px;         /* de inhoud wordt nooit breder dan dit */
  --mokum-marge: 24px;             /* ruimte links en rechts van de inhoud */
  --mokum-kop-hoogte: 69px;        /* de kopbalk met één regel ondertitel, voor sticky kolommen */
}
@media (max-width: 620px) {
  :root { --mokum-marge: 12px; }
}

/* ── Kopbalk ──────────────────────────────────────────────────────────────────
   <header class="mokum-kop">
     <div class="mokum-kop-links"><img class="mokum-kop-logo" src="/mokum-logo.svg" alt="Mokum Pool &amp; Darts"></div>
     <div class="mokum-kop-midden">
       <div class="mokum-kop-titel"><span class="m">Mokum</span> Paginanaam</div>
       <div class="mokum-kop-sub">Wat je op deze pagina doet</div>
     </div>
     <div class="mokum-kop-rechts"></div>
   </header>
   - Links het logo, eventueel met een terugpijl ervoor.
   - Rechts altijd een element, ook als het leeg is: daar staat de ☰ van site-nav.js (fixed,
     top 14px, right 16px), of de eigen knoppen van de pagina. Zonder dat element loopt de
     titel op de telefoon onder de ☰ door. Geeft de pagina een handleiding op (data-handleiding
     bij site-nav.js), dan staat links van de ☰ een boekje en is deze kolom 88 px (#218).
   - Moet de balk blijven staan bij het scrollen? Dan class="mokum-kop vast".
   - Een kortere titel op de telefoon: <span class="mokum-kop-lang">…</span><span class="mokum-kop-kort">…</span>.
   69 px hoog: 14 + 40 (logo) + 14 + 1 (onderrand). */
.mokum-kop {
  box-sizing: border-box;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--mokum-balk); border-bottom: 1px solid var(--mokum-lijn); color: #fff;
  /* Eigen letter en regelafstand: anders neemt de balk die van de pagina over (Tailwind 1.5,
     de handleiding 1.6) en is hij op de ene site hoger dan op de andere. */
  font-family: Arial, Helvetica, sans-serif; line-height: 1.15;
}
.mokum-kop.vast { position: sticky; top: 0; z-index: 5; }
.mokum-kop-links { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* flex: none en width: auto, anders drukt een smal scherm het logo plat. */
.mokum-kop-logo { display: block; flex: none; height: 40px; width: auto; }
.mokum-kop-midden { min-width: 0; text-align: center; }
.mokum-kop-titel {
  margin: 0; font-family: "Arial Black", Arial, sans-serif; font-size: 22px; line-height: 1.05;
  color: #fff; text-wrap: balance;
}
.mokum-kop-titel .m { color: var(--mokum-rood); }
.mokum-kop-sub { margin: 3px 0 0; font-size: 12px; color: var(--mokum-tekst-zwak); text-wrap: balance; }
.mokum-kop-rechts {
  justify-self: end; display: flex; align-items: center; gap: 8px;
  min-width: 40px; min-height: 40px;
}
/* Geeft de pagina een handleiding op (site-nav.js met data-handleiding), dan staat het boekje
   links van de ☰: 40 + 8 + 40 px. site-nav.js zet daarvoor de klasse op <html>. */
.mokum-met-handleiding .mokum-kop-rechts { min-width: 88px; }
/* Ronde-hoek-knop voor in de kopbalk met een outline-icoon (20 px SVG), zelfde look als het boekje
   en de ☰ van site-nav.js. Voor sites met een eigen kopbalk-knoppen: boekje = handleiding,
   persoon = in/uitloggen. */
.mokum-kop-knop {
  box-sizing: border-box; width: 40px; height: 40px; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid #2a2a2a; background: #1a1a1a; color: #fff;
  cursor: pointer; text-decoration: none;
}
.mokum-kop-knop svg { width: 20px; height: 20px; display: block; }
@media (hover: hover) { .mokum-kop-knop:hover { border-color: var(--mokum-rood); } }
.mokum-kop-kort { display: none; }
@media (max-width: 620px) {
  /* gap 8 in plaats van 12: met het boekje en de ☰ rechts past "Mokum Competitie" dan nog op
     één regel op 360 px. */
  .mokum-kop { grid-template-columns: auto 1fr auto; gap: 8px; }
  .mokum-kop-titel { font-size: 18px; }
  .mokum-kop-lang { display: none; }
  .mokum-kop-kort { display: inline; }
}

/* ── Paginabreedte ────────────────────────────────────────────────────────────
   De inhoud hoogstens 1600 px breed, in het midden, met 24 px marge (op de telefoon 12 px).
   Alleen links en rechts; de ruimte boven en onder regelt de pagina zelf. */
.mokum-frame {
  box-sizing: border-box;
  max-width: calc(var(--mokum-breedte) + 2 * var(--mokum-marge));
  margin-left: auto; margin-right: auto;
  padding-left: var(--mokum-marge); padding-right: var(--mokum-marge);
}

/* ── Kolommen ─────────────────────────────────────────────────────────────────
   Kaarten en tegels naast elkaar in plaats van uitgerekt: zoveel kolommen van minstens 360 px
   als er passen, op de telefoon één. Voor de tafels op het dashboard geldt een uitzondering
   (2 kolommen, vanaf 1536 px 4), zodat er nooit 3 + 1 ontstaat. */
.mokum-raster {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}

/* ── Neon-skyline in de kopbalk ───────────────────────────────────────────────
   Grachtenpanden als dunne neonlijn links en rechts van de titel. skyline.js (geladen door
   site-nav.js) zet de tekening als laag onderin de kopbalk en meet per kant hoeveel ruimte er
   is, zodat logo, titel en knoppen altijd vrij blijven. De laag vangt geen klikken. Aan en uit
   met de lampknop rechts, links van het boekje en de ☰ (per site onthouden). Onder 900 px weg.
   De lampknop opent een uitklapmenu met vier standen (skyline.js zet de klassen): 8 s vanuit het
   midden getekend, 5 s volledig zichtbaar en dan 20 s weg (standaard), continu aan, uit, en 5 s
   licht flikkerend zichtbaar en dan 20 s weg. */
:root {
  --skyline-kleur: var(--mokum-rood);
  --skyline-dikte: 2px;
}
/* Houvast voor de laag. De vaste balk (.vast) is al sticky en dus ook een houvast. */
.mokum-kop:not(.vast) { position: relative; }
/* Zelfde vak als .mokum-frame: de skyline lijnt uit met de inhoud eronder. */
.mokum-kop-skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 55px;
  box-sizing: border-box; margin: 0 auto;
  max-width: calc(var(--mokum-breedte) + 2 * var(--mokum-marge));
  padding: 0 var(--mokum-marge);
  pointer-events: none;
  transition: opacity .4s;
}
.mokum-kop-skyline.uit { opacity: 0; }
/* Positie en breedte zet skyline.js na het meten; dit is de beginstand. */
.mokum-skyline {
  position: absolute; bottom: 0; height: 55px; overflow: visible;
  width: min(565px, calc(50% - 180px));
  color: var(--skyline-kleur);
  /* Neongloed in de lijnkleur, naar buiten toe doorzichtiger (zachter dan drie volle lagen). */
  filter: drop-shadow(0 0 2px color-mix(in srgb, currentColor 60%, transparent))
          drop-shadow(0 0 6px color-mix(in srgb, currentColor 35%, transparent))
          drop-shadow(0 0 14px color-mix(in srgb, currentColor 20%, transparent));
}
.mokum-skyline.links { left: var(--mokum-marge); }
.mokum-skyline.rechts { right: var(--mokum-marge); }
.mokum-skyline.gespiegeld { transform: scaleX(-1); }
.mokum-skyline.weg { display: none; }
.mokum-skyline .skyline-lijn { stroke-width: var(--skyline-dikte); }
/* Subtiel flikkeren, als een neonbuis die even haperen: harde sprongen (steps), maar de lijn zakt
   nooit onder de ~70% helderheid. In de 5 s dat de skyline zichtbaar is: aan het begin twee kleine
   haperingen, dan rustig branden, aan het eind nog één. */
.mokum-skyline.flikkert { animation: mokum-skyline-flikker 5s steps(1, end); }
@keyframes mokum-skyline-flikker {
  0% { opacity: 1; }
  6% { opacity: .75; }
  9% { opacity: 1; }
  14% { opacity: .85; }
  17% { opacity: 1; }
  60% { opacity: 1; }
  62% { opacity: .8; }
  64% { opacity: 1; }
  90% { opacity: 1; }
  92% { opacity: .75; }
  95% { opacity: .9; }
  97% { opacity: 1; }
  100% { opacity: 1; }
}
/* Tekenen vanuit het midden: de linkerkant onthult zich van rechts (de kant bij de titel) naar
   links, de rechterkant van links naar rechts. Min 40 px aan de andere kanten zodat de gloed niet
   wordt afgeknipt. */
.mokum-skyline.links.tekent { animation: mokum-skyline-teken-links 8s ease-in-out both; }
.mokum-skyline.rechts.tekent { animation: mokum-skyline-teken-rechts 8s ease-in-out both; }
@keyframes mokum-skyline-teken-links {
  from { clip-path: inset(-40px -40px -40px 100%); }
  to { clip-path: inset(-40px -40px -40px -40px); }
}
@keyframes mokum-skyline-teken-rechts {
  from { clip-path: inset(-40px 100% -40px -40px); }
  to { clip-path: inset(-40px -40px -40px -40px); }
}
@media (prefers-reduced-motion: reduce) {
  .mokum-skyline.flikkert, .mokum-skyline.tekent { animation: none; }
}
/* De lampknop: zelfde knop als het boekje en de ☰ van site-nav.js, vast rechtsboven. skyline.js
   zet hem na het meten 8 px links van de knoppen die er staan; dit is de beginstand (naast de ☰).
   Licht niet op: de skyline zelf laat zien of hij aan staat. */
#mokumnav-skyline {
  position: fixed; top: 14px; right: 64px; z-index: 2147483000; box-sizing: border-box;
  width: 40px; height: 40px; padding: 0; border-radius: 10px;
  border: 1px solid var(--mokum-lijn); background: var(--mokum-balk); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
/* Zonder ☰-menu (het dashboard laadt site-nav.js niet) staat hij gewoon vooraan in
   .mokum-kop-rechts naast de eigen knoppen (.mokum-kop-knop), en scrolt hij mee. */
#mokumnav-skyline.in-kop { position: relative; top: auto; right: auto; z-index: auto; flex: none; box-shadow: none; }
#mokumnav-skyline svg { width: 20px; height: 20px; display: block; }
#mokumnav-skyline:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#mokumnav-skyline[aria-expanded="true"] { border-color: var(--mokum-rood); background: var(--mokum-lijn); }
#mokumnav-skyline[aria-expanded="true"]::after { display: none !important; }
/* Het uitklapmenu onder de lampknop: drie keuzes, de gekozen in antraciet met een vinkje. */
#mokumnav-skyline-menu {
  position: fixed; z-index: 2147483000; width: 330px; box-sizing: border-box; padding: 6px;
  background: var(--mokum-balk); border: 1px solid var(--mokum-lijn); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  font-family: Arial, Helvetica, sans-serif; line-height: 1.2;
}
#mokumnav-skyline-menu[hidden] { display: none; }
#mokumnav-skyline-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 9px 10px; margin: 0; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: #fff; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
#mokumnav-skyline-menu button + button { margin-top: 2px; }
#mokumnav-skyline-menu button .vink { flex: none; width: 14px; color: transparent; }
#mokumnav-skyline-menu button[aria-checked="true"] { background: var(--mokum-antraciet); border-color: var(--mokum-antraciet-rand); }
#mokumnav-skyline-menu button[aria-checked="true"] .vink { color: #fff; }
#mokumnav-skyline-menu button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
#mokumnav-skyline-menu .standaard { margin-left: auto; font-size: 11px; color: var(--mokum-tekst-zwak); }
@media (hover: hover) {
  #mokumnav-skyline-menu button:hover { border-color: var(--mokum-antraciet-rand); }
}
/* Tooltip zoals bij het boekje en de ☰: onder de knop, rechts uitgelijnd. */
#mokumnav-skyline::after {
  content: attr(data-tip); display: none; position: absolute;
  top: calc(100% + 8px); right: 0; width: max-content; max-width: 260px; padding: 6px 10px;
  background: #232323; border: 1px solid var(--mokum-lijn); border-radius: 6px; color: #fff;
  font: 12px/1.35 Arial, Helvetica, sans-serif; text-align: left; white-space: normal;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .4); pointer-events: none;
}
@media (hover: hover) {
  #mokumnav-skyline:hover { border-color: var(--mokum-rood); }
  #mokumnav-skyline:hover::after { display: block; }
}
@media (max-width: 899px) {
  .mokum-kop-skyline, #mokumnav-skyline, #mokumnav-skyline-menu { display: none; }
}