/* Tokens */
:root {
  --bg: var(--p1);
  --fg: var(--p2);
  --card: var(--p1);
  --muted: rgba(127, 127, 127, 0.12);
  --muted-fg: rgba(127, 127, 127, 1);
  --border: rgba(127, 127, 127, 0.28);
  --border-2: rgba(127, 127, 127, 0.16);
  --surface: rgba(127, 127, 127, 0.1);
  --surface-2: rgba(127, 127, 127, 0.16);

  --menu-bg: rgba(127, 127, 127, 0.16);
  --menu-fg: var(--p2);
  --menu-fg-strong: var(--p2);

  --second: var(--p4);
  --second-soft: rgba(127, 127, 127, 0.12);
  --second-fg: var(--p4);

  --accent: var(--p3);
  --accent-fg: var(--p1);
  --accent-soft: rgba(127, 127, 127, 0.12);
  --accent-soft-fg: var(--p3);

  --primary: var(--p2);
  --primary-fg: var(--p1);

  --success: #2e9e5b;
  --success-soft: rgba(46, 158, 91, 0.14);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;

  --font: "Manrope", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --ease: 0.18s;

  /* Type scale anchored on sites.font, which header.php declares inline */
  --font-size: 14px;
  --fs-xs: calc(var(--font-size) - 3px);
  --fs-sm: calc(var(--font-size) - 1.5px);
  --fs-base: var(--font-size);
  --fs-md: calc(var(--font-size) + 1px);
  --fs-lg: calc(var(--font-size) + 3px);
  --fs-xl: calc(var(--font-size) + 8px);
}

@supports (color: color-mix(in oklch, red 50%, blue)) {
  :root {
    --bg: color-mix(in oklch, var(--p1) 92%, var(--p2) 8%);
    --card: color-mix(in oklch, var(--p1) 97%, var(--p2) 3%);
    --muted: color-mix(in oklch, var(--p1) 88%, var(--p2) 12%);
    --muted-fg: color-mix(in oklch, var(--p1) 35%, var(--p2) 65%);
    --border: color-mix(in oklch, var(--p1) 78%, var(--p2) 22%);
    --border-2: color-mix(in oklch, var(--p1) 88%, var(--p2) 12%);
    --surface: color-mix(in oklch, var(--p1) 80%, var(--p2) 20%);
    --surface-2: color-mix(in oklch, var(--p1) 75%, var(--p2) 25%);

    --menu-bg: color-mix(in oklch, var(--p1) 82%, var(--p2) 18%);
    --menu-fg: color-mix(in oklch, var(--p2) 82%, var(--p1) 18%);

    --second-soft: color-mix(in oklch, var(--p1) 86%, var(--p4) 14%);
    --second-fg: color-mix(in oklch, var(--p4) 72%, var(--p2) 28%);

    --accent-soft: color-mix(in oklch, var(--p1) 88%, var(--p3) 12%);
    --accent-soft-fg: color-mix(in oklch, var(--p2) 40%, var(--p3) 60%);
  }
}

/* Reset */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Neutralize the Bootstrap link colors at the variable, so no `a:hover` rule
   is needed here and component classes keep control of their own color.
   The color declaration was also dropped from `a:hover` in the theme copy of
   bootstrap.min.css: `inherit` there resolved against the parent, so a link
   painting itself white over a photo turned dark as soon as it was hovered. */
:root {
  --bs-link-color: inherit;
  --bs-link-hover-color: inherit;
  --bs-link-color-rgb: inherit;
  --bs-link-hover-color-rgb: inherit;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: none; }

/* Keyboard focus in the accent color; no ring for mouse users */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img { max-width: 100%; }

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; }

.wrap {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}

.background-image {
  position: fixed;
  inset: 0;
  z-index: -20;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: 999px;
}

.badge--ghost { background: var(--muted); color: var(--muted-fg); }
.badge--outline { background: transparent; border-color: var(--border); color: var(--fg); }
.badge--soft { background: var(--muted); color: var(--fg); }
.badge--accent { background: var(--accent-soft); color: var(--accent-soft-fg); }
.badge--second { background: var(--second-soft); color: var(--second-fg); }

.badge--cat {
  align-self: flex-start;
  padding: 4px 11px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}

.dot {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.dot--green { background: var(--success); }

.badge .dot { animation: badge-pulse 1.6s infinite; }

@keyframes badge-pulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 5px transparent; }
}

/* Buttons */

/* Inline icons: the svg follows the font size of whatever sits around it,
   the same way the icon font used to behave */
.icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; vertical-align: -0.15em; }
.icon svg { width: 1em; height: 1em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform 0.12s;
}

.btn:active { transform: scale(0.985); }
/* Bootstrap repaints a disabled .btn with its own variables, which do not
   exist outside its components, so the button loses colour. The palette is
   restated here with the same specificity, and this file loads later. */
.btn:disabled { pointer-events: none; opacity: 0.55; }
.btn--primary:disabled { background: var(--primary); color: var(--primary-fg); }
.btn--accent:disabled { background: var(--accent); color: var(--accent-fg); }

.btn--primary { background: var(--primary); color: var(--primary-fg); }
.btn--primary:hover { background: var(--fg); opacity: 0.88; }

.btn--accent { background: var(--accent); color: var(--accent-fg); }
.btn--accent:hover { opacity: 0.88; }

.btn--outline { background: transparent; color: var(--fg); border-color: var(--border); }
.btn--outline:hover { background: var(--muted); }

.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost:hover { background: var(--muted); }

.btn--ghost-tone { background: var(--surface); color: var(--fg); border-color: var(--border); }
.btn--ghost-tone:hover { background: var(--surface-2); }

.btn--sm { padding: 7px 12px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* Skeleton */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: skeletonSweep 1.4s ease-in-out infinite;
}

.skeleton > * { visibility: hidden; }

@keyframes skeletonSweep {
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* Router skeleton, shown only when a navigation is slow */
.router-skeleton { padding-top: 24px; padding-bottom: 32px; }

.router-skeleton__bar {
  height: 46px;
  margin-bottom: 20px;
  border-radius: var(--radius);
}

.router-skeleton__grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  gap: 20px;
}

.router-skeleton__block {
  height: 320px;
  border-radius: var(--radius);
}

@media (max-width: 1100px) {
  .router-skeleton__grid { grid-template-columns: 1fr; }
  .router-skeleton__block { height: 200px; }
}

/* Utilities */
.is-hidden { display: none !important; }
.text-truncate-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.text-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.text-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* The station name as the heading of the home. The logo already shows it,
   so it is read, not drawn twice. */
.page-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}