/* Accessible minimal layout – target: WCAG 2.2 level AA.
   One single font size (1rem = the user's browser setting, usually 16 px).
   Headings differ only by bold weight and spacing.
   No layout tables: <table> is used only for real tabular content. */

/* ---------- Colours (contrast checked) ----------
   Light: text #1b1b1b on #ffffff ≈ 17:1 | links #0a4d8c ≈ 8.6:1 | lines #767676 ≈ 4.5:1
   Dark:  text #eef1f4 on #15181c ≈ 16:1 | links #9ecbff ≈ 10:1  | lines #8a939e ≈ 5.8:1 */
:root {
  --bg: #ffffff; --text: #1b1b1b; --muted: #454545; --link: #0a4d8c;
  --line: #767676; --header-cell: #eef1f4; --focus: #0a4d8c;
  color-scheme: light dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181c; --text: #eef1f4; --muted: #c5cbd3; --link: #9ecbff;
    --line: #8a939e; --header-cell: #252b32; --focus: #ffd166;
  }
}
:root[data-theme="dark"] {
  --bg: #15181c; --text: #eef1f4; --muted: #c5cbd3; --link: #9ecbff;
  --line: #8a939e; --header-cell: #252b32; --focus: #ffd166;
}
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }

html { font-size: 100%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  max-width: 60rem;
  padding: 0 max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px));
  background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
/* Everything inherits the same size – including form fields, which are otherwise smaller */
h1, h2, h3, caption, th, td, input, button, small { font-size: inherit; font-family: inherit; line-height: inherit; }
h1, h2, h3 { font-weight: 700; margin: 0; hyphens: auto; }
p { max-width: 70ch; margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }

/* Text for screen readers only */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link { position: absolute; left: 1rem; top: 0.5rem; padding: 0.75rem 1rem; z-index: 10;
  background: var(--bg); border: 2px solid var(--focus); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

header, footer { padding-block: 1.5rem; }
header { border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
header p { margin: 0.25rem 0 0; }
footer { border-top: 1px solid var(--line); margin-top: 3rem; color: var(--muted); }
footer ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }
footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------- Search ---------- */
.search { margin-bottom: 2.5rem; }
.search label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.search__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search input, .search button {
  min-height: 2.75rem;               /* target size ≥ 44 px (2.5.8) */
  padding: 0.4rem 0.75rem;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--line);     /* contrast ≥ 3:1 against the background (1.4.11) */
  border-radius: 0.25rem;
}
.search input { flex: 1 1 14rem; min-width: 0; }
.search button { cursor: pointer; font-weight: 700; }
.search button:hover { border-color: var(--text); }
.search p { margin: 0.5rem 0 0; color: var(--muted); }
.search #search-status { color: var(--text); font-weight: 700; }
.search #search-status:empty { display: none; }

/* ---------- Events: one after another, like blog posts ---------- */
.entry { margin-bottom: 3.5rem; padding-top: 1rem; border-top: 3px solid var(--text); } /* marks the start of each event */
.entry h2 { margin-bottom: 0.75rem; }
.entry h3 { margin-top: 0.5rem; }
.entry > p { margin-bottom: 1.25rem; }
/* Short description: framed like the buttons and tables, so it stands out at the top of an event */
.short-desc { border: 2px solid var(--line); border-radius: 0.25rem; padding: 0.75rem 1rem; margin-bottom: 1.25rem; }
.short-desc h2, .short-desc h3 { margin-top: 0; }
.short-desc p { margin-bottom: 0; }
.short-desc p + p { margin-top: 1em; }
.notice { margin-bottom: 1.5rem; }                /* notice box above the introduction: same gap as between the texts */
@media (forced-colors: active) { .short-desc { border-color: CanvasText; } }
.reading-time { font-weight: 400; }               /* reading time behind a heading: same size, normal weight */

table { border-collapse: collapse; width: 100%; margin-bottom: 1.25rem; }
caption { text-align: left; font-weight: 700; padding-bottom: 0.5rem; }
th, td { border: 1px solid var(--line); padding: 0.5rem clamp(0.4rem, 2vw, 0.75rem);
  text-align: left; vertical-align: top; hyphens: auto; }
thead th { background: var(--header-cell); }

/* Table 1: event details – row headers on the left */
.details th { background: var(--header-cell); width: clamp(7.5rem, 30%, 12rem); }
.details ul { margin: 0; padding-left: 1.1rem; }

/* Table 2: scrolls sideways only if it is wider than the screen */
.table-scroll { overflow-x: auto; overflow-y: hidden; margin-bottom: 1.25rem; }   /* sideways only: the frame always grows to the full table height */
.table-scroll table { margin-bottom: 0; }

.note { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  th, td, .search input, .search button { border-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}
@media print {
  .skip-link, .search { display: none !important; }
  .table-scroll { overflow: visible; }
  .entry { break-inside: avoid; }
}

/* ---------- Tabs: switch between Program – 23 and Bauer Verlag ----------
   Plain links. The current website is bold, not underlined and joined to the page;
   the other one is a normal underlined link. */
.site-switch { padding-top: 1rem; }
.site-switch ul {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  list-style: none; margin: 0; padding: 0;
  border-bottom: 1px solid var(--line);
}
.site-switch li { margin-bottom: -1px; }            /* tab sits on the line */
.site-switch a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;                             /* target size ≥ 44 px (2.5.8) */
  padding: 0.4rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem 0.25rem 0 0;
}
.site-switch a:hover { border-color: var(--line); }
.site-switch a[aria-current="page"] {
  color: var(--text); font-weight: 700; text-decoration: none;
  background: var(--bg);
  border-color: var(--line) var(--line) var(--bg);  /* joined to the page below */
}
@media (forced-colors: active) {
  .site-switch a[aria-current="page"] { border-color: CanvasText; }
}
@media print {
  .site-switch { display: none !important; }
}

/* ---------- Downloads ----------
   "Download data sheet" button above the additional table, and the links
   in the "Downloads" column. Same font size as everything else. */
.download { margin: 0 0 1.25rem; }
.download .button {
  display: inline-flex; align-items: center;
  text-decoration: none;                           /* boxed links are not underlined – the box shows it is a link */
  min-height: 2.75rem;                             /* target size ≥ 44 px (2.5.8) */
  padding: 0.4rem 0.75rem;
  font-weight: 700;
  color: var(--text); background: var(--bg);
  border: 2px solid var(--line);                   /* contrast ≥ 3:1 against the background (1.4.11) */
  border-radius: 0.25rem;
}
.download .button:hover { border-color: var(--text); }
/* Downloads column: each file as a small button (like the data sheet button), stacked;
   file type and size on their own line. role="list" keeps the list for screen readers. */
ul.downloads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem;
  min-width: 9rem; }                               /* keeps "Floor plan (PDF, 44 KB)" readable; the table scrolls sideways on phones */
ul.downloads a {
  display: block; min-height: 2.75rem;             /* target size ≥ 44 px (2.5.8) */
  padding: 0.4rem 0.6rem;
  font-weight: 700; color: var(--text); text-decoration: none;
  background: var(--bg);
  border: 2px solid var(--line);                   /* contrast ≥ 3:1 against the background (1.4.11) */
  border-radius: 0.25rem;
}
ul.downloads a:hover { border-color: var(--text); }
ul.downloads .file-info { display: block; font-weight: 400; color: var(--muted); }
@media (forced-colors: active) {
  ul.downloads a { border-color: CanvasText; }
}
@media (forced-colors: active) {
  .download .button { border-color: CanvasText; }
}

/* Program – 23 page: no line between the introduction and the search */
header.intro { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.5rem; }   /* same gap as between the two texts */

/* Inactive tab: looks like a tab (not like a text link); the text is underlined on hover */
.site-switch a:not([aria-current="page"]) {
  color: var(--text); font-weight: 400; text-decoration: none;
  background: var(--header-cell);
  border-color: var(--line);
}
.site-switch a:not([aria-current="page"]):hover { text-decoration: underline; }

/* Optional second text under the introduction (only shown when filled in) */
.intro-second { margin-top: 1.5rem; }
.intro-second p + p { margin-top: 1em; }
/* Lists written in the longer text fields ("- " or "• " at the start of each line) */
.intro-second ul, .intro ul, .entry > ul, .fold ul { max-width: 70ch; margin: 0 0 1em; padding-left: 1.25rem; }
.intro-second li, .intro li, .entry > ul li, .fold li { margin-bottom: 0.25em; }

/* ---------- Search: highlighted matches (like "find" in a text document) ----------
   Matches are underlined as well as coloured (not colour alone, 1.4.1);
   the current match also gets a thick outline. Text contrast ≥ 4.5:1 in both themes. */
:root { --hit-bg: #fff2a8; --hit-current-bg: #ffd166; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hit-bg: #5c4b00; --hit-current-bg: #7a6000; }
}
:root[data-theme="dark"] { --hit-bg: #5c4b00; --hit-current-bg: #7a6000; }
mark.hit {
  background: var(--hit-bg); color: var(--text);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em;
  scroll-margin: 5rem;
}
mark.hit.hit--current { background: var(--hit-current-bg); outline: 2px solid var(--text); outline-offset: 1px; }
.search button:disabled { cursor: default; color: var(--muted); border-color: var(--line); }
@media (forced-colors: active) {
  mark.hit { background: Mark; color: MarkText; }
  mark.hit.hit--current { outline-color: Highlight; }
}

/* Schedule that can be folded away (<details>): the clickable line looks like a heading with an arrow */
details.schedule { margin-bottom: 1.25rem; }
details.schedule > summary {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem;                             /* target size ≥ 44 px (2.5.8) */
  font-weight: 700; cursor: pointer;
}
details.schedule[open] > summary { margin-bottom: 0.5rem; }

/* Arrow for foldable sections (the browser's own arrow disappears with display: flex):
   ▸ closed, ▾ open. Decorative only – screen readers announce "collapsed/expanded" themselves. */
details.schedule > summary { list-style: none; }
details.schedule > summary::-webkit-details-marker { display: none; }
details.schedule > summary::before { content: "▸" / ""; font-weight: 400; }
details.schedule[open] > summary::before { content: "▾" / ""; }

/* Shortened event text: the beginning stays visible; "Show full text" button like the download buttons */
.fold .fold-toggle {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;                             /* target size ≥ 44 px (2.5.8) */
  padding: 0.4rem 0.75rem; margin-bottom: 1.25rem;
  font: inherit; font-weight: 700; cursor: pointer;
  color: var(--text); background: var(--bg);
  border: 2px solid var(--line);                   /* contrast ≥ 3:1 against the background (1.4.11) */
  border-radius: 0.25rem;
}
.fold .fold-toggle:hover { border-color: var(--text); }
@media (forced-colors: active) { .fold .fold-toggle { border-color: CanvasText; } }
@media print {                                     /* printed pages always show the whole text */
  .fold .fold-toggle, .fold .fold-ellipsis { display: none !important; }
  .fold span.fold-rest { display: inline !important; }
  .fold div.fold-rest { display: block !important; }
}
.fold .fold-ellipsis { margin-left: 0.25em; }          /* "…" a little apart from the last word */

/* Additional table: the column chosen as "wide column" in the CMS gets more room
   (in em, so it grows with the text size; the table scrolls sideways on small screens) */
th.col-wide { min-width: 24em; }

/* Wide tables: keep everything inside the scroll box (also the screen-reader-only texts),
   so only the table scrolls sideways, never the page (WCAG 1.4.10 Reflow) */
.table-scroll { position: relative; }

/* ---------- Wide tables: scroll sideways instead of squeezing ----------
   Text cells keep a readable width (about 25–30 or 40 characters per line); tables wider than
   their frame scroll sideways inside it (WCAG 1.4.10 allows this for data tables).
   Words are never broken without a hyphen; normal hyphenation stays. */
.table-scroll td { overflow-wrap: normal; }
.table-scroll td.cell-m { min-width: 12em; }
.table-scroll td.cell-l { min-width: 18em; }

/* "↗" after links that open a PDF in a new tab; not bold, so it reads as a sign, not as text */
.newtab { font-weight: 400; }

/* ---------- Program – 23 page: each event on its own sheet of paper (like a PDF viewer) ----------
   Grey "desk" behind white sheets with a thin edge; "Sheet 2 of 4" below each sheet.
   Contrast on the desk: text ≈ 13.8:1, links ≈ 7:1, lines ≈ 3.6:1 (checked). */
:root { --desk: #e4e7eb; --sheet-edge: #c3c8cf; --sheet: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --desk: #000000; --sheet-edge: #59616d; --sheet: #1d2127; }
}
:root[data-theme="dark"] { --desk: #000000; --sheet-edge: #59616d; --sheet: #1d2127; }

body.sheets { background: var(--desk); }
body.sheets .entry {
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-top: 1px solid var(--sheet-edge);         /* replaces the thick black line above each event */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  padding: clamp(1rem, 4vw, 2.5rem);
  margin: 0;
}
body.sheets .sheet-no { text-align: center; color: var(--muted); max-width: none; margin: 0.5rem 0 2.5rem; }
body.sheets .sheet-no--top { margin: 0 0 0.5rem; }
/* the active tab is joined to the page, so it takes the desk colour here */
body.sheets .site-switch a[aria-current="page"] { background: var(--desk); border-bottom-color: var(--desk); }
@media (forced-colors: active) {
  body.sheets .entry { border-color: CanvasText; }
}
@media print {                                     /* printed: plain white, every event starts on a new page */
  body.sheets { background: #fff; }
  body.sheets .entry { border: 0; box-shadow: none; padding: 0; }
  body.sheets .entry:not(:first-of-type) { break-before: page; }
  body.sheets .sheet-no, .top-bar { display: none !important; }
}

/* ---------- Search bar at the bottom of the screen (only while a search is active) ----------
   Keeps "Previous" / "Next" reachable after jumping to a match, e.g. on phones.
   The page gets extra space at the bottom, so the bar never covers content (WCAG 2.4.11). */
.search-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--bg);
  border-top: 2px solid var(--line);
  padding: 0.5rem max(1rem, env(safe-area-inset-right, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
}
.search-bar__inner { max-width: 58rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.search-bar__status { margin: 0 auto 0 0; font-weight: 700; }
.search-bar button {
  min-height: 2.75rem;                             /* target size ≥ 44 px (2.5.8) */
  padding: 0.4rem 0.75rem;
  font: inherit; font-weight: 700; cursor: pointer;
  color: var(--text); background: var(--bg);
  border: 2px solid var(--line); border-radius: 0.25rem;
}
.search-bar button:hover { border-color: var(--text); }
body.searching { padding-bottom: 8rem; }
@media (forced-colors: active) { .search-bar, .search-bar button { border-color: CanvasText; } }
@media print { .search-bar { display: none !important; } }

/* ---------- Footer: one row of link buttons (main page and text pages) ----------
   No line, no table; the buttons wrap onto a new line on narrow screens. */
footer.form-footer { border-top: 0; margin-top: 1rem; padding-block: 1.5rem; color: var(--text); }
.link-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.link-buttons a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;                             /* target size ≥ 44 px (2.5.8) */
  padding: 0.3rem 0.6rem;
  font-weight: 700; color: var(--text); text-decoration: none;
  background: var(--bg);
  border: 2px solid var(--line);                   /* contrast ≥ 3:1 against the background (1.4.11) */
  border-radius: 0.25rem;
}
.link-buttons a:hover { border-color: var(--text); }
.link-buttons a[aria-current="page"] { border-color: var(--text); }   /* the page you are on */
@media (forced-colors: active) { .link-buttons a { border-color: CanvasText; } }

/* Text pages (Colophon, Privacy policy, Accessibility statement): title on the sheet */
.text-page { padding-top: 2rem; }
.text-page h1 { margin-bottom: 1rem; }
.text-page h2 { margin: 1.75rem 0 0.5rem; }          /* section headings: weight and spacing only, same size */
.text-page ul { max-width: 70ch; margin: 0 0 1em; padding-left: 1.25rem; }
.text-page li { margin-bottom: 0.35em; }

/* ---------- Phones: row headings of the event tables turned vertically ----------
   Reads from top to bottom like a book spine; words are never split. Only below 30rem width. */
@media (max-width: 30rem) {
  body.sheets .entry th[scope="row"] {
    width: auto; min-width: 0;
    padding: 0.6rem 0.4rem;
    text-align: center; vertical-align: top;         /* vertical text centred in its column */
  }
  /* The script in index.njk measures each heading and turns it a quarter turn inside a box
     of exactly that size ("rh-box"), so the cell always has room for it – also in Safari,
     which sizes vertical writing modes in table cells wrongly. Entries without letters
     (times, "1/3") are not turned. Without JavaScript the headings stay horizontal. */
  .rh-box { display: inline-block; position: relative; vertical-align: top; }
  .rh-box > .rh { position: absolute; top: 0; left: 0; transform-origin: 0 0; white-space: nowrap; }
}

/* ---------- Top bar: current event, data sheet number, "Scroll table sideways" ----------
   Fixed at the top while reading the events; content scrolled to by keyboard or search
   is kept below it (scroll-padding). Hidden on very low windows (phone sideways, strong zoom). */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem;
  padding: calc(0.4rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) 0.4rem max(1rem, env(safe-area-inset-left, 0px));
  background: var(--sheet);
  border-bottom: 2px solid var(--line);
}
.top-bar[hidden] { display: none; }
.top-bar__event { font-weight: 700; }
.top-bar__sheet { color: var(--muted); }
.top-bar__hint { font-weight: 700; }
html:has(.top-bar) { scroll-padding-top: 5rem; }
@media (max-height: 30rem) { .top-bar { display: none !important; } }
@media (forced-colors: active) { .top-bar { border-color: CanvasText; } }

/* ---------- Large screens: wider page, so tables fit without scrolling sideways ----------
   From 64rem screen width the page may grow to 90rem (prose keeps its 70ch line length);
   text columns need a little less minimum width than on small screens. */
@media (min-width: 64rem) {
  body.sheets { max-width: 90rem; }
  .table-scroll td.cell-m { min-width: 9em; }
  .table-scroll td.cell-l { min-width: 14em; }
  th.col-wide { min-width: 18em; }
}

/* Row headings in the wide tables ("Dates and venues", "Program details") sit on white,
   not in a grey heading cell, so they are set in regular weight like the other cells.
   They stay row headings for screen readers. Grey heading cells stay bold. */
.table-scroll tbody th[scope="row"] { font-weight: 400; }

/* Bauer Verlag placeholder page: only "Coming soon" below the tabs */
.coming-soon { padding-block: 3rem; }