/* ============================================================================
   Hermithive - shared sub-page stylesheet   (/css/site-pages.css)
   ----------------------------------------------------------------------------
   Styles /events/, /projects/ and /playlist/. Each of those pages links this
   file FIRST, then its own small page-specific sheet:

       <link rel="stylesheet" href="/css/site-pages.css">
       <link rel="stylesheet" href="/css/projects.css">   <- page-specific

   The homepage has its own /styles.css. This file deliberately reuses that
   file's TOKEN NAMES AND VALUES verbatim, so the two halves of the site stay
   in step. If you change a colour in one, change it in the other.

   THEMING CONTRACT (identical to the homepage):
     - localStorage 'hh-theme' = 'light' | 'dark' | absent/other (= system)
     - state lives on <html> as data-theme="light" / data-theme="dark"
     - when the choice is "system" the attribute is ABSENT, so
       prefers-color-scheme alone has to resolve it
     - every colour therefore has its base definition on bare :root; the dark
       blocks below only REDEFINE tokens. No colour is defined solely inside
       a media query or a [data-theme] block.

   Rule of thumb: anything that should look the same on every sub-page belongs
   here. Only genuinely page-specific rules belong in the per-page sheets, so
   the pages cannot drift apart again.
   ========================================================================== */

/* ---- Light palette: the complete set of tokens, on bare :root ----------- */

:root {
    color-scheme: light dark;

    --primary-bg: #eceff1;
    --surface: #ffffff;
    --surface-alt: #f2f5f6;
    --border: #cfd8dc;

    --accent-bg: #263238;
    --accent-bg-light: #37474f;

    --primary-fg: #222222;
    --muted-fg: #48555d;
    --secondary-fg: #ffffff;
    --heading-fg: #263238;

    --highlight: #546e7a;
    --highlight-light: #7e9bae;

    --link: #114277;
    --link-hover: #0d2f56;
    --footer-link: #e6edf1;

    --banner-bg: #ffd700;
    --banner-fg: #2b2200;

    --focus: #ffb300;
    --border-radius: 8px;
    /* The framed wiki page is light-only, so its backing stays light in both
       themes; a dark backing would flash behind it while it loads. */
    --frame-bg: #ffffff;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.07);

    /* Sub-page-only tokens (no homepage equivalent) */
    --cta-bg: #dfe6ea;
    --map-bg: #dde3e6;
    /* Primary button. Not built from --accent-bg-light directly: in dark that
       is near-black and the button vanishes against the dark card (the
       homepage's .cta has the same exception). */
    --button-bg: #37474f;
    --button-hover-bg: #263238;
    --button-hover-fg: #ffffff;
}

/* ---- Explicit dark choice: data-theme="dark" ---------------------------- */

:root[data-theme="dark"] {
    color-scheme: dark;
    /* Lifted verbatim from :root[data-theme="dark"] in /styles.css */
    --primary-bg: #11171a;
    --surface: #1a2227;
    --surface-alt: #222c32;
    --border: #38474f;

    --accent-bg: #0b1012;
    --accent-bg-light: #151d21;

    --primary-fg: #e7ecee;
    --muted-fg: #b9c5cb;
    --secondary-fg: #ffffff;
    --heading-fg: #d7e3ea;

    --highlight: #40555f;
    --highlight-light: #6d8a99;

    --link: #8fc5ec;
    --link-hover: #bfdff6;
    --footer-link: #dce6ec;

    --banner-bg: #ffd54f;
    --banner-fg: #1d1700;

    --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    /* Sub-page-only tokens (no homepage equivalent) */
    --cta-bg: #222c32;
    --map-bg: #1f282d;
    --button-bg: #40555f;
    --button-hover-bg: #6d8a99;
    --button-hover-fg: #0e1518;
}

/* ---- No explicit choice (attribute absent): follow the OS --------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        /* Lifted verbatim from :root[data-theme="dark"] in /styles.css */
        --primary-bg: #11171a;
        --surface: #1a2227;
        --surface-alt: #222c32;
        --border: #38474f;

        --accent-bg: #0b1012;
        --accent-bg-light: #151d21;

        --primary-fg: #e7ecee;
        --muted-fg: #b9c5cb;
        --secondary-fg: #ffffff;
        --heading-fg: #d7e3ea;

        --highlight: #40555f;
        --highlight-light: #6d8a99;

        --link: #8fc5ec;
        --link-hover: #bfdff6;
        --footer-link: #dce6ec;

        --banner-bg: #ffd54f;
        --banner-fg: #1d1700;

        --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
        /* Sub-page-only tokens (no homepage equivalent) */
        --cta-bg: #222c32;
        --map-bg: #1f282d;
        --button-bg: #40555f;
        --button-hover-bg: #6d8a99;
        --button-hover-fg: #0e1518;
    }
}

/* An explicit light choice must beat a dark OS preference. */
:root[data-theme="light"] { color-scheme: light; }

/* ---- Base -------------------------------------------------------------- */

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

body {
    /* Same stack as /styles.css, so header, nav and footer type match the homepage */
    font-family: system-ui, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--primary-bg);
    color: var(--primary-fg);
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

/* ---- Language ------------------------------------------------------------
   Every translated element exists twice: data-lang="nl" and data-lang="en".
   These rules hide the inactive copy from the first paint (the inline <head>
   script has already put the stored choice on <html>) and for visitors
   without JavaScript, who get Dutch. /lang.js mirrors it with `hidden`. */

html[lang="en"] [data-lang="nl"],
html[lang="nl"] [data-lang="en"] { display: none; }

/* ---- Skip link --------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -3rem;
    z-index: 10000;
    padding: 0.6rem 1rem;
    background: var(--banner-bg);
    color: var(--banner-fg);
    font-weight: bold;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    text-decoration: none;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus { top: 0; }

/* ---- Visible focus for everything interactive -------------------------- */

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* Fallback for browsers without :focus-visible support */
a:focus, button:focus, summary:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; }

/* Amber is < 2:1 against the light surface; the link colour holds in both themes */
main :focus-visible { outline-color: var(--link); }

/* ---- Header + site navigation ------------------------------------------ */

header.site-header {
    background-color: var(--accent-bg);
    color: var(--secondary-fg);
    padding: 1em 1.25em 0.5em;
}

.site-header .banner {
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.site-header .banner img {
    height: 40px;
    width: auto;
    border-radius: 4px;
}

.site-header .banner a {
    color: var(--secondary-fg);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.7em;
}

/* Banner on the left, language switch on the right; the switch drops below
   the banner when a phone is too narrow for both. */
.site-header .header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em 1em;
}

/* Shipped hidden and revealed by /lang.js: without JavaScript the buttons
   could not do anything. */
.lang-switch[hidden] { display: none; }
.lang-switch { display: flex; gap: 0.35em; }

.language-toggle {
    padding: 0.3em 0.8em;
    border: 1px solid var(--highlight-light);
    border-radius: 999px;
    background: transparent;
    color: var(--footer-link);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.language-toggle:hover { border-color: #ffffff; color: #ffffff; }

.language-toggle[aria-pressed="true"] {
    background: #ffffff;
    border-color: #ffffff;
    color: #263238;
    font-weight: bold;
}

nav.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em 0.9em;
    margin-top: 0.75em;
    padding-bottom: 0.25em;
}

nav.site-nav a {
    color: var(--footer-link);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    padding: 0.35em 0.1em;
    border-bottom: 3px solid transparent;
}

nav.site-nav a:hover { color: #ffffff; border-bottom-color: var(--highlight-light); }

nav.site-nav a[aria-current="page"] {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* External-link arrow. A real <span class="ext" aria-hidden="true"> in the
   markup, as on the homepage, rather than generated content: screen readers
   skip it and read the .visually-hidden "(opens in a new tab)" text instead. */
nav.site-nav .ext {
    font-size: 0.85em;
    opacity: 0.8;
}

/* ---- Main layout ------------------------------------------------------- */

main {
    max-width: 60rem;
    margin: 1.5rem auto;
    padding-inline: 1rem;
}

.page-intro { margin-bottom: 1.5rem; }

/* Un-carded sections (the project list, the calendar) would otherwise sit
   flush against the card or CTA that follows them. */
main > section { margin-bottom: 1.5rem; }

h1 {
    font-size: 1.9rem;
    margin: 0 0 0.4em;
    color: var(--heading-fg);
    line-height: 1.2;
}

h2 {
    font-size: 1.3rem;
    color: var(--heading-fg);
    margin: 0 0 0.6em;
}

h3 { font-size: 1.1rem; margin: 0 0 0.3em; color: var(--primary-fg); }

p { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.lead { font-size: 1.05rem; color: var(--muted-fg); }

/* ---- Cards ------------------------------------------------------------- */

.card {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

/* ---- Item lists (events, projects) ------------------------------------- */

.item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--highlight);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem;
}


.item-title {
    font-size: 1.15rem;
    margin: 0 0 0.35em;
    color: var(--heading-fg);
}

.item-desc { margin: 0 0 0.6em; }

.item-meta {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted-fg);
}

.item-meta dt {
    font-weight: bold;
    color: var(--primary-fg);
}

.item-meta dd { margin: 0 0 0.4em; }

/* Tag / badge */

.item-date {
    display: block;
    margin-bottom: 0.4em;
}

.tag {
    display: inline-block;
    padding: 0.1em 0.65em;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--muted-fg);
    font-size: 0.8rem;
    font-weight: bold;
}

/* ---- Call to action ---------------------------------------------------- */

.cta {
    background: var(--cta-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.cta h2 { margin-top: 0; }

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.button {
    display: inline-block;
    background: var(--button-bg);
    color: var(--secondary-fg);
    text-decoration: none;
    font-weight: bold;
    padding: 0.6em 1.1em;
    border-radius: var(--border-radius);
    border: 1px solid var(--button-bg);
    cursor: pointer;
    font-size: 0.95rem;
    font-family: inherit;
}

.button:hover { background: var(--button-hover-bg); color: var(--button-hover-fg); }

.button-secondary {
    background: var(--surface);
    color: var(--heading-fg);
    border-color: var(--border);
}

.button-secondary:hover { background: var(--surface-alt); color: var(--heading-fg); }

/* ---- "Find us" map ----------------------------------------------------- */

.find-us address {
    font-style: normal;
    margin-bottom: 0.6em;
}

.map-holder {
    height: 260px;
    margin-top: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--highlight);
    background: var(--map-bg);
    overflow: hidden;
}

.map-note {
    font-size: 0.85rem;
    color: var(--muted-fg);
    margin-top: 0.6em;
}

/* ---- Footer ------------------------------------------------------------ */

footer.site-footer {
    background-color: var(--accent-bg-light);
    color: var(--secondary-fg);
    padding: 1.2em 1rem 0.8em;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 2rem;
}

footer.site-footer a { color: var(--footer-link); }
footer.site-footer a:hover { color: #ffffff; }

footer.site-footer p { margin: 0.45em 0; overflow-wrap: anywhere; }

/* Inline SVG (no third-party request). It is the link's only content, so the
   padding lifts the 32px glyph to a 44px tap target. */
footer.site-footer .footer-icon {
    vertical-align: middle;
    box-sizing: content-box;
    padding: 6px;
}

/* The WIFI string below is a deliberate puzzle, not a rendering glitch.
   .easter-egg keeps it visually quiet and it is labelled in the markup. */
.easter-egg {
    display: block;
    margin: 0.3em auto 0;
    max-width: 48rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8em;
    color: var(--footer-link);
    opacity: 0.85;
    overflow-wrap: anywhere;
}

.contact-email {
    color: var(--footer-link);
    text-decoration: underline;
    font-weight: 500;
}

.contact-email:hover { color: #ffffff; }

/* ---- Small screens (no horizontal scroll at 400px) --------------------- */

@media (max-width: 480px) {
    header.site-header { padding: 0.9em 1em 0.4em; }
    .site-header .banner { font-size: 1.2em; }
    .site-header .banner img { height: 32px; }
    nav.site-nav { gap: 0.15em 0.75em; }
    nav.site-nav a { font-size: 0.9rem; }
    h1 { font-size: 1.5rem; }
    main { margin: 1rem auto; padding-inline: 1rem; }
    .card, .cta { padding: 1rem; }
    .item { padding: 0.9rem; }
    .map-holder { height: 220px; }
}

/* Touch screens: the text nav links are ~37px tall otherwise */
@media (pointer: coarse) {
    nav.site-nav a { padding: 0.6em 0.3em; }
    .language-toggle { padding-block: 0.7em; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---- Print: content only ------------------------------------------------
   Tokens are forced to ink-on-paper so a dark-theme visitor does not print
   pale text on white. */
@media print {
    :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
        --primary-bg: #fff; --surface: #fff; --surface-alt: #fff; --cta-bg: #fff;
        --primary-fg: #000; --heading-fg: #000; --muted-fg: #333;
        --link: #000; --border: #999; --shadow: none;
    }
    .skip-link, nav.site-nav, .lang-switch, .wiki-frame, .map-holder, #show-map { display: none !important; }
    header.site-header, footer.site-footer { background: none; color: #000; padding-inline: 0; }
    .site-header .banner a, footer.site-footer a, .easter-egg { color: #000; }
    main { max-width: none; margin: 0; padding: 0; }
    .button { background: none; color: #000; border-color: #000; }
}

/* Screen-reader-only text: used for "(opens in a new tab)" suffixes.
   Kept identical to the definition in /styles.css. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Embedded wiki calendar --------------------------------------------- */

.wiki-frame {
    display: block;
    width: 100%;
    /* Tall enough to show several rows without swallowing the whole screen. */
    height: clamp(420px, 75vh, 900px);
    margin: 1rem 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--frame-bg);
}

@media (max-width: 600px) {
    /* On a phone the wiki's own layout needs more vertical room to be usable,
       and the "read it on the wiki" link below is the better route anyway. */
    .wiki-frame { height: 70vh; }
}