/* 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);

  --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: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --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 {
    /* The colour the client picked arrives whole: the tones around it are the
       same colour with alpha, the way the old theme painted them. Mixing p1
       with p2 turned every palette into a grey of its own. */
    --bg: var(--p1);
    --card: var(--p1);
    --muted: color-mix(in srgb, var(--p2) 7%, transparent);
    --muted-fg: color-mix(in srgb, var(--p2) 70%, transparent);
    --border: color-mix(in srgb, var(--p2) 20%, transparent);
    --border-2: color-mix(in srgb, var(--p2) 12%, transparent);
    --surface: color-mix(in srgb, var(--p2) 9%, transparent);
    --surface-2: color-mix(in srgb, var(--p2) 15%, transparent);

    --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 32px;
}

.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); }

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

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

/* 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;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}