/* ============================================================
   radio-schedule-panel.css
   On-air schedule slide-in panel (homepage). Deep Teal card with
   Archive Cream heading/body text, sized to its content and
   anchored to the right viewport edge (vertically centered),
   opened via a persistent brass tab fixed to the same edge. Uses
   the shared brand tokens defined in theme-overrides.css — no new
   colors.
   ============================================================ */

.rw-schedule-panel {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 10000; /* above the sticky nav (9999) so the tab/panel are never click-blocked */
  width: min(420px, 88vw);
  background: var(--rw-teal);
  border: 1px solid var(--rw-brass);
  border-radius: 10px 0 0 10px;
  box-shadow: -20px 0 60px rgba(7, 27, 34, 0.35);
  transform: translate(100%, -50%);
  pointer-events: none;
  transition: transform 0.35s ease;
}
.rw-schedule-panel.is-open {
  transform: translate(0, -50%);
  pointer-events: auto;
}

/* Persistent handle — fixed to the viewport independently of the
   panel, so it stays reachable in the same spot whether the popup
   is open or closed (the panel no longer slides in from this edge). */
.rw-schedule-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 10000;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 22px 12px;
  background: var(--rw-brass);
  color: var(--rw-teal);
  font-family: var(--rw-caps);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: -6px 0 18px rgba(7, 27, 34, 0.25);
  transition: background 0.15s ease;
}
.rw-schedule-tab:hover,
.rw-schedule-tab:focus-visible { background: var(--rw-brass-lite); }

.rw-schedule-panel-inner {
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 48px 40px;
  text-align: center;
}

.rw-schedule-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rw-brass);
  background: transparent;
  color: var(--rw-offwhite);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.rw-schedule-close:hover {
  background: var(--rw-brass);
  color: var(--rw-teal);
}

.rw-schedule-panel h2 {
  font-family: var(--rw-serif);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.25;
  color: var(--rw-offwhite);
  margin: 0 auto;
  max-width: 320px;
}

.rw-schedule-panel .rw-divider { margin: 22px auto 28px; }

.rw-schedule-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rw-schedule-btn {
  display: block;
  font-family: var(--rw-caps);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--rw-offwhite);
  text-decoration: none;
  padding: 18px 22px;
  border-radius: var(--radius, 6px);
  transition: filter 0.18s ease;
}
.rw-schedule-btn:hover,
.rw-schedule-btn:focus-visible { filter: brightness(0.9); }

.rw-schedule-btn-tan { background: var(--rw-tan); }
.rw-schedule-btn-cognac { background: var(--rw-cognac); }

@media (max-width: 520px) {
  .rw-schedule-panel-inner { padding: 40px 26px; }
  .rw-schedule-panel h2 { font-size: 22px; }
  .rw-schedule-btn { font-size: 14px; padding: 16px 18px; }
  .rw-schedule-tab { font-size: 10px; padding: 18px 9px; }
}