/* The top bar of both pages, index.html and events.html. Same markup and the same size on both,
   so the bar and the page links stay in place when you switch pages. The colour tokens come from each page. */
body > header { position: sticky; top: 0; z-index: 1; background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 16px;
                font: 15px/1.4 system-ui, sans-serif; }
/* 43px: the height of the search field on the card page, so the bar without it is just as high. */
body > header .bar { display: flex; gap: 12px; align-items: center; min-height: 43px; }
body > header h1 { font-size: 18px; font-weight: 700; margin: 0; white-space: nowrap; }
.pages { display: flex; gap: 12px; flex: none; font-size: 14px; }
/* All links have the same weight: a bold current link would make the other link shift a few pixels. */
.pages a { color: var(--muted); font-weight: 600; text-decoration: none; padding: 4px 0; }
.pages a:hover { color: var(--text); }
.pages a[aria-current=page] { color: var(--text); box-shadow: inset 0 -2px var(--accent); }
@media (max-width: 600px) {
  body > header h1 { display: none; }
  /* No room for both links next to the search field: only the link to the other page stays. */
  .pages a[aria-current=page] { display: none; }
}
/* Light or dark (shared.js). The moon switches to dark, the sun back to light. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
.theme { flex: none; margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
         border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; }
.theme:hover { border-color: var(--accent); }
.theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme .sun, .theme[aria-pressed="true"] .moon { display: none; }
.theme[aria-pressed="true"] .sun { display: block; }
/* Language (lang.js): EN | NL, the active one filled. It sits just left of the light/dark button. */
.lang { flex: none; margin-left: auto; display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; height: 40px; }
.lang + .theme { margin-left: 0; }
.lang button { border: 0; padding: 0 10px; font: 600 13px/1 system-ui, sans-serif; background: var(--surface); color: var(--muted); cursor: pointer; }
.lang button + button { border-left: 1px solid var(--border); }
.lang button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.lang button:hover:not([aria-pressed="true"]) { color: var(--text); }
.lang button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Card page up to 900px: one row is too narrow for the search field next to every button (at 600px the field
   shrank to 26px and the light/dark button fell off the screen). The search field and the count move to a second
   row of their own; the first row keeps the page links, Decks, language and light/dark. */
@media (max-width: 900px) {
  body > header .bar:has(#q) { flex-wrap: wrap; row-gap: 10px; }
  .bar:has(#q) #q { order: 1; flex: 1 1 60%; }
  .bar:has(#q) #count { order: 1; }
  .bar:has(#q) #deckbtn { margin-left: auto; } /* Decks sits with the other buttons on the right */
  .bar:has(#q) .lang { margin-left: 0; }
}