/* 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: 10px;
  --radius-lg: 16px;

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

  /* 16px é o piso do tema: os degraus menores existem só para não quebrar o
     que já usa a variável, mas nenhum deles desce abaixo disso */
  /* O painel manda o corpo do texto em sites.font, e o tema respeita, mas
     nunca desce de 16px: esse é o piso desta pele */
  --font-size: 16px;
  --fs-xs: max(16px, var(--font-size));
  --fs-sm: max(16px, var(--font-size));
  --fs-base: max(16px, var(--font-size));
  --fs-md: max(17px, calc(var(--font-size) + 1px));
  --fs-lg: max(19px, calc(var(--font-size) + 3px));
  --fs-xl: max(24px, calc(var(--font-size) + 8px));

  /* Largura de tudo: player, menu, seções e rodapé usam a mesma coluna */
  --wrap: 1600px;
  --gutter: 32px;
}

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

/* Bootstrap paints .btn:hover with variables that only exist inside its own
   components, so the hover fell back to transparent. Every variant restates
   its background with the same specificity, from a file that loads later. */
.btn--primary { background: var(--primary); color: var(--primary-fg); }
.btn--primary:hover { background: var(--fg); color: var(--primary-fg); opacity: 0.88; }

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

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

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

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