/* Fonts are self-hosted (copied from @fontsource at build time), so visitors'
   browsers never contact a third party. Licenses: /licenses/fonts.txt */
@font-face {
  font-family: "Dela Gothic One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dela-gothic-one-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

/* Minimal reset. */
*,
::before,
::after {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
p {
  margin: 0;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:root {
  --flesh: #f7d23e; /* pineapple yellow */
  --rind: #d9a514; /* darker gold for the hero pattern */
  --crown: #1e5a3c; /* leaf green */
  --ink: #15231b;
  --paper: #ffffff;
  --muted: #4c5a51;
  --line: #dfe5df;
  --font-cjk: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-display: "Dela Gothic One";
  --font-body: "Atkinson Hyperlegible";
}

html {
  /* Always reserve room for the scrollbar, so the columns don't jump sideways
     when a filter makes the page short enough for the scrollbar to disappear. */
  scrollbar-gutter: stable;
  background: var(--paper);
  color: var(--ink);
  /* Atkinson has no Chinese characters, so those fall through to the system's
     Traditional Chinese font. */
  font-family: var(--font-body), var(--font-cjk), system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Two panels on wide screens: brand on the left (stays put), events on the right. */
.layout {
  display: grid;
  min-height: 100vh;
}

/* Left panel: yellow flesh with a diamond rind pattern — the one bold element. */
.hero {
  background-color: var(--flesh);
  background-image:
    repeating-linear-gradient(45deg, transparent 0 22px, var(--rind) 22px 24px),
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--rind) 22px 24px);
  position: relative;
  border-bottom: 10px solid var(--crown);
}
.hero::before {
  /* Fade the pattern out behind the text so it stays readable. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--flesh) 45%, transparent 100%);
}
.hero-inner {
  position: relative;
  container-type: inline-size;
  padding: 3.5rem 1.25rem 3rem;
}

.content {
  padding-inline: 1.25rem;
  width: 100%;
  /* Footer sits at the bottom even when the list is short. */
  display: flex;
  flex-direction: column;
}
/* The events list stops widening on very wide screens; the footer doesn't,
   so the copyright line reaches the right edge. */
.content > main {
  flex: 1;
  width: 100%;
  max-width: 72rem;
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(18rem, 1fr) 2fr;
  }
  .hero {
    position: sticky;
    top: 0;
    height: 100vh;
    border-bottom: 0;
    border-right: 10px solid var(--crown);
  }
  .hero::before {
    background: linear-gradient(180deg, var(--flesh) 55%, transparent 100%);
  }
  /* The title starts at a fixed height rather than being centred, so it
     stays in place when switching languages (mission lengths differ). */
  .hero-inner {
    height: 100%;
    padding: clamp(9rem, 30vh, 18rem) clamp(1.5rem, 4vw, 4rem) 3rem;
    /* Column layout so the contact note can sit at the bottom of the panel. */
    display: flex;
    flex-direction: column;
  }
  /* Pushed to the bottom; on short screens it simply follows the mission text. */
  .contact {
    margin-top: auto;
    padding-top: 2.25rem;
  }
  .content {
    padding-inline: clamp(1.5rem, 4vw, 4rem);
  }
  /* Keep the language links at the top of the panel. */
  .lang-switch {
    position: absolute;
    top: 3rem;
  }
}

/* Short wide windows (e.g. a small laptop, browser not maximised): start the
   title higher so everything in the yellow panel, including the contact note,
   fits on screen — the panel doesn't scroll. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero-inner {
    padding-top: clamp(5.5rem, 15vh, 9rem);
    padding-bottom: 2rem;
  }
  .contact {
    padding-top: 1.5rem;
  }
}

.hero-title {
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
  /* Sized to the panel width so "Pineapple" always fits on one line. */
  font-size: min(16.5cqi, 6.6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--crown);
  margin: 0;
}

.lang-switch ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}
.lang-switch a {
  color: var(--ink);
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.lang-switch a:hover {
  text-decoration-color: var(--crown);
}
/* The current language is marked by colour and underline only: making it
   bold would change its width and shift the other links when switching. */
.lang-switch a[aria-current="page"] {
  color: var(--crown);
  text-decoration-color: var(--crown);
}
.lang-switch a:focus-visible {
  outline: 3px solid var(--crown);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Chinese name above the English one, in a native Traditional Chinese font
   (Dela Gothic One isn't shipped with Chinese characters). */
.hero-name-zh {
  display: block;
  margin-bottom: 0.18em;
  font-family: var(--font-cjk);
  font-weight: 900;
  /* Fixed to the panel width too, so it doesn't change with the English name. */
  font-size: min(9.3cqi, 3.72rem);
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: var(--crown);
}

/* Chinese headings use a native Traditional Chinese font rather than
   Dela Gothic One's Japanese-style characters. */
:lang(zh) .section-title {
  font-family: var(--font-cjk);
  font-weight: 900;
}

.mission {
  margin-top: 1.75rem;
  max-width: 34rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

/* "Any events missing?" note: smaller, at the bottom of the yellow panel. */
.contact {
  margin-top: 2.25rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.5;
}
/* The address looks exactly like the surrounding text. */
.contact a {
  color: inherit;
  text-decoration: none;
  /* Keep the address in one piece (no break at the hyphen); if it doesn't
     fit, the whole address moves to the next line. */
  white-space: nowrap;
}
.contact a:focus-visible {
  outline: 3px solid var(--crown);
  outline-offset: 3px;
  border-radius: 2px;
}

.section-title {
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
  /* Shrinks on narrow phones so long words like "Veranstaltungen" fit. */
  font-size: clamp(1.5rem, 7.5vw, 2rem);
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--crown);
  margin: 3.5rem 0 1rem;
}

.filters {
  margin-bottom: 1.5rem;
}
.filters-label {
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.filter {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.4rem 0.95rem;
  color: var(--crown);
  background: var(--paper);
  border: 2px solid var(--crown);
  border-radius: 999px;
  cursor: pointer;
}
.filter:hover {
  background: #e9f1ea;
}
.filter[aria-pressed="true"] {
  color: var(--paper);
  background: var(--crown);
  font-weight: 700;
}
.filter:focus-visible {
  outline: 3px solid var(--flesh);
  outline-offset: 2px;
}

/* Topic labels on each event: quiet, so the filter buttons stay the clickable thing. */
.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.event-tags li {
  font-size: 0.85rem;
  padding: 0.1rem 0.6rem;
  color: var(--crown);
  background: #fbf0bf;
  border-radius: 4px;
}

.events {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.event {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1.5rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line);
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--crown);
}
.event-day {
  font-family: var(--font-display), sans-serif;
  font-size: 2.75rem;
  line-height: 1;
}
/* Date ranges like "12–13" need a smaller size to fit the column. */
.event-day--range {
  font-size: 1.65rem;
  white-space: nowrap;
}
.event-date--ongoing {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}
.event-when {
  margin: 0.35rem 0 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.event-month {
  margin-top: 0.35rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.event-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.event-location {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.event-summary {
  margin: 0.75rem 0 0;
  /* Long lines are hard to read, so summaries stop widening at ~75 characters. */
  max-width: 75ch;
}

.event-link {
  display: inline-block;
  margin-top: 0.85rem;
  font-weight: 700;
  color: var(--crown);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--flesh);
}
.event-link:hover {
  text-decoration-color: var(--crown);
}
.event-link:focus-visible {
  outline: 3px solid var(--crown);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Previous/next arrows under the events list. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.pager-btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: var(--paper);
  background: var(--crown);
  border: 2px solid var(--crown);
  border-radius: 50%;
  cursor: pointer;
}
.pager-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pager-btn:hover:not(:disabled) {
  background: #154530;
}
.pager-btn:disabled {
  color: var(--crown);
  background: var(--paper);
  opacity: 0.35;
  cursor: default;
}
/* Keyboard focus only (no ring after mouse clicks), in the site's green. */
.pager-btn:focus {
  outline: none;
}
.pager-btn:focus-visible {
  outline: 3px solid var(--crown);
  outline-offset: 3px;
}
.pager-status {
  margin: 0;
  font-weight: 700;
  color: var(--crown);
}

.empty {
  color: var(--muted);
}

.not-found {
  max-width: 40rem;
  margin: 0 auto;
  padding: 4rem 1.25rem;
  display: grid;
  gap: 0.75rem;
}
.not-found h1 {
  font-size: 1.5rem;
}
.not-found ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.footer {
  padding-block: 3rem;
  text-align: right;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .event {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .event-date {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
  }
  .event-day {
    font-size: 2rem;
  }
  .event-day--range {
    font-size: 1.6rem;
  }
}