*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* De basis (Strak, clean en extreem leesbaar) */
  --bg:             #f8fafc;
  --surface:        #ffffff;
  --surface2:       #f1f5f9;
  --surface2:       #f1f5f9;
  --surface3:       #e2e8f0;
  --border:         #cbd5e1;
  --text:           #0f172a; /* Diep donkerblauw/zwart voor tekst */
  --textlight:      #f0e8d5; /* bijna wit voor tekst op donker */

  /* De Interface Dragers (De oplossing voor het felle cyaan) */
  --accent:         #0f172a; /* Pro-Navy: Knoppen en hoofdaccenten worden nu heel strak, donker en professioneel */
  --textlink:       #1e40af; /* Een betrouwbaar, diep sportblauw voor tekstlinks zodat ze leesbaar zijn */
  --muted:          #64748b;
  --buttontext:     #ffffff;
  --velomint:       #00E676;
  --emerald:        #10B981;

  /* Het Logosysteem als Subtiele Highlights (Gedoseerd bruikbaar) */
  --brand-cyaan:    #00e5ff; /* Alleen gebruiken voor een klein stipje, een dun actief lijntje, of de actieve discipline */
  --brand-koraal:   #ff3d60; /* Alleen voor een cruciale 'Live' button of een hele belangrijke call-to-action */
  --accent-dim:     #e0f2fe; /* Heel zacht lichtblauw voor geselecteerde tabelrijen */

  /* Systeem-status */
  --green:          #10b981;
  --darkgreen:      #065f46;
  --red:            #ef4444;
  --orange:         #f97316;

  /* De Wielerdisciplines (Gecentreerd rond sportieve, volwassen tinten) */
  --wegwielrennen:  #475569; /* Neutraal 'asfalt' grijs, matcht met je oude basis */
  --veldrijden:     #15803d; /* Donkerder, natuurlijk bosgroen (minder fel) */
  --baanwielrennen: #4338ca; /* Diep koningsblauw */
  --mountainbike:   #b45309; /* Warm okergoud (stijlvol modder) */
  --bmx:            #be123c; /* Diep bordeaux/crimson, stoer maar rustig */

  /* Styling */
  --radius:         3px;
  --tableheader:   #f1f5f9;
}

a {
  color: var(--text);
  text-decoration: none;
}
a, [role="link"] {
  cursor: pointer;
  touch-action: manipulation;
}
a:active {
    opacity: 0.6;
}

body {
  font-family:Inter,"IBM Plex Sans",sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

button {
	font-family:Inter,"IBM Plex Sans",sans-serif;
}

.page { padding-left: 5px; padding-right: 5px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.0rem; }
.gen-footer { color: var(--muted); font-size: .75rem; text-align: center; padding: .5rem 0; margin-bottom: 60px;}

/* ── Filtering ── */
.year-btn {
  font-size: .75rem; padding: 3px 10px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text); cursor: pointer; transition: background .15s, border-color .15s;
}
.year-btn:hover { border-color: var(--accent); color: var(--accent); }
.year-btn.active { background: var(--accent); color: var(--textlight); border-color: var(--accent); }

/* ── Nav ── */
.nav { position: sticky; top: 0; z-index: 100; background: var(--surface2); backdrop-filter: blur(8px); border-bottom: 1px solid var(--surface3); }
.nav-logo { height: 15px;}
.nav-inner { padding: 0 1rem; height: 50px; display: flex; align-items: center; justify-content: center; }
.nav-links { display: none; list-style: none; gap: .15rem; }
.nav-build { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.nav-dropdown { position: relative; }
.nav-dropdown > a::after { content: ' ▾'; font-size: 1rem; opacity: .6; }
.nav-submenu { list-style: none; display: none; position: absolute; top: calc(100% + 0); left: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; min-width: 150px; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.5); padding: .3rem 0; }
.nav-submenu a { display: block !important; padding: .45rem .9rem !important; font-size: .85rem !important; color: var(--muted) !important; border-radius: 0 !important; background: transparent !important; }
.nav-submenu a:hover { color: var(--accent) !important; background: var(--surface2) !important; }
.nav-dropdown:hover .nav-submenu, .nav-dropdown.open .nav-submenu { display: block; }

/* ── Hero ── */
.hero {
  background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 60%, var(--bg) 100%);
  padding: 0.5rem 0.5rem; display: flex; flex-direction: column; gap: .4rem;
}
.hero h1 { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.hero .sub { color: var(--muted); font-size: .85rem; }

/* ── Bottom nav ── */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--bg); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav-items { display: flex; height: 56px; }
.bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: .62rem; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.bottom-nav-item .nav-icon { font-size: 1.2rem; line-height: 1; }
.bottom-nav-item.active { color: var(--brand-koraal); }




@media (min-width: 600px) {
  .nav-links { margin-left:20px; display: flex; align-items: center; }
  .nav-links a { display: block; padding: .4rem .8rem; border-radius: 6px; font-size: .9rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s, background .15s; }
  .nav-links a:hover  { color: var(--text); background: var(--surface); }
  .nav-links a.active { color: var(--accent); font-weight: 700; }
  .bottom-nav { display: none; }
  body { padding-bottom: 0; }
  .page { padding: 1.5rem; }
}

@media (max-width: 600px) {
    .hero {
        padding: 1.25rem 1rem;
    }
}