/* Glass play button styling to mirror Flutter mini player */
.glass-play-btn {
	position: relative;
	background: rgba(255,255,255,0.15);
	border: 1.5px solid rgba(255,255,255,0.35);
	box-shadow: 0 3px 8px rgba(0,0,0,0.25);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background .15s ease, transform .15s ease;
}
.glass-play-btn:hover:not([disabled]) {
	background: rgba(255,255,255,0.22);
}
.glass-play-btn:active:not([disabled]) {
	transform: scale(.92);
}
.glass-play-btn[disabled] { opacity:.45; cursor:not-allowed; }

/* Larger center variant */
.glass-play-btn.center {
	width:60px; height:60px; font-size:40px; line-height:60px;
}

/* Icon only center button uses inline SVG; ensure centering */
.glass-play-btn svg { width:40px; height:40px; }

/* Accent variables (used for hero and bottom-player consistency) */
:root {
  --rt-accent-orange: #ea580c; /* tailwind orange-600 */
  --rt-accent-orange-hover: #f97316; /* tailwind orange-500 */
}

/* Make the bottom-player play button match the hero orange (tailwind bg-orange-600 / hover:bg-orange-500) */
#bp-play {
	background: var(--rt-accent-orange);
	border-color: rgba(255,255,255,0.35);
	box-shadow: 0 6px 14px rgba(234,88,12,0.18);
}
#bp-play:hover:not([disabled]) {
	background: var(--rt-accent-orange-hover);
}

/* Smaller glass buttons (skip / stop) */
.glass-btn-small {
	width:32px; height:32px; font-size:11px;
	background: rgba(255,255,255,0.16);
	border:1px solid rgba(255,255,255,0.28);
	box-shadow:0 2px 5px rgba(0,0,0,0.25);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: background .15s ease, transform .15s ease;
}
.glass-btn-small:hover:not([disabled]) { background: rgba(255,255,255,0.25); }
.glass-btn-small:active:not([disabled]) { transform: scale(.9); }
.glass-btn-small.danger { background: rgba(255,0,0,0.5); border-color: rgba(255,255,255,0.4); }
.glass-btn-small.danger:hover { background: rgba(255,0,0,0.6); }
.glass-btn-small.danger:active { background: rgba(255,0,0,0.55); }
/* Make stop button square larger in bottom player only */
#bp-stop { font-size: 20px; }

/* Stronger programme image circle shadow */
.programme-img-shadow {
	/* Subtle outer spread plus soft ambient */
	box-shadow:
		0 4px 8px -2px rgba(0,0,0,0.28),
		0 8px 20px -4px rgba(0,0,0,0.22),
		0 0 0 1px rgba(0,0,0,0.06);
}

/* Cross-fade helper: adds a short opacity transition for container swaps.
	 Uses a class so JS only toggles class names. Respects prefers-reduced-motion. */
.x-fade {
	transition: opacity 180ms ease;
	will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
	.x-fade { transition: none; }
}

/* Live badge with animated soundwave */
.live-badge { display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#fff; background:#e11; padding:6px 8px; border-radius:6px; }
.wave-svg { overflow:visible; transform-origin: center center; transform: scaleY(1.25); }
.bar { fill:#fff; transform-origin:center center; transform-box: fill-box; }
/* Animation only runs when .wave.playing is present to allow JS control */
.wave.playing .bar { animation:peak 1s infinite ease-in-out; }
.bar1 { animation-delay: 0s; }
.bar2 { animation-delay: 0.12s; }
.bar3 { animation-delay: 0.24s; }
.bar4 { animation-delay: 0.36s; }
.bar5 { animation-delay: 0.48s; }
@keyframes peak {
 	0%   { transform: scaleY(0.3) translateY(0.5px); }
 	30%  { transform: scaleY(0.95) translateY(-0.5px); }
 	60%  { transform: scaleY(1) translateY(0); }
 	100% { transform: scaleY(0.35) translateY(0.6px); }
}

/* Hidden helper */
/* .hidden { display:none !important; } */

/* Subtle separator slide animation used on homepage SVG separators */
.sep-slide { will-change: transform; animation: sep-slide 6s ease-in-out infinite; }
@keyframes sep-slide {
	0% { transform: translateY(0); }
	50% { transform: translateY(6px); }
 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.sep-slide { animation: none; }
}

/* Phase-offset helpers for layered separators */
.sep-slide.delay-1 { animation-delay: 0s; }
.sep-slide.delay-2 { animation-delay: 1.2s; }
.sep-slide.delay-3 { animation-delay: 2.4s; }

/* Slight amplitude variation for depth: apply small transform scale on odd/even */
.sep-slide.depth-1 { /* Foreground: least blur, highest opacity */
	transform-origin: center;
	opacity: 0.98;
	filter: blur(0px) saturate(1);
}
.sep-slide.depth-2 { /* Middle: slight blur and reduced opacity */
	transform-origin: center;
	opacity: 0.92;
	filter: blur(0.6px) saturate(1.02);
}
.sep-slide.depth-3 { /* Back: more blur, lower opacity for depth */
	transform-origin: center;
	opacity: 0.86;
	filter: blur(1.2px) saturate(1.04);
}

/* Utility: apply Bitter font (loaded in base template) for branded text */
.font-bitter { font-family: 'Bitter', serif; }

/* Cabin Sketch utility class - use where you want the Cabin Sketch display font */
.font-cabin-sketch {
  font-family: 'Cabin Sketch', Georgia, 'Times New Roman', serif;
}

/* Bungee utility */
.font-bungee {
  font-family: 'Bungee', 'Impact', 'Arial Black', sans-serif;
}

/* Fredoka utility */
.font-fredoka {
  font-family: 'Fredoka', sans-serif;
}

/* Chewy utility */
.font-chewy {
  font-family: 'Chewy', cursive;
}

.font-noto {
  font-family: 'Noto Sans', sans-serif;
}
.font-noto-serif {
  font-family: 'Noto Serif', serif;
}

.font-open-sans {
  font-family: 'Open Sans', sans-serif;
}
.font-roboto {
  font-family: 'Roboto', sans-serif;
}
.font-roboto-slab {
  font-family: 'Roboto Slab', serif;
}
.font-roboto-serif {
  font-family: 'Roboto Serif', serif;
}
.font-fugaz-one {
  font-family: 'Fugaz One', 'Impact', 'Arial Black', sans-serif;
}
.font-poppins {
  font-family: 'Poppins', sans-serif;
}

/* Cookie Consent Banner Styles */
#cookie-consent-banner {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#cookie-consent-banner.showing {
  transform: translateY(0);
}

#cookie-consent-banner.hidden {
  transform: translateY(100%);
}

/* Cookie Settings Modal Styles */
#cookie-settings-modal {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Smooth transitions for cookie elements */
#cookie-consent-banner,
#cookie-settings-modal {
  transition: all 0.3s ease-in-out;
}

/* Custom scrollbar for modal content */
#cookie-settings-modal .max-h-\[90vh\]::-webkit-scrollbar {
  width: 6px;
}

#cookie-settings-modal .max-h-\[90vh\]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

#cookie-settings-modal .max-h-\[90vh\]::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

#cookie-settings-modal .max-h-\[90vh\]::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Focus styles for accessibility */
#cookie-consent-banner button:focus,
#cookie-settings-modal button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #cookie-consent-banner .flex-col {
    text-align: center;
  }

  #cookie-consent-banner .flex {
    flex-direction: column;
    gap: 1rem;
  }

  #cookie-settings-modal .max-w-2xl {
    max-width: 95vw;
  }
}

/* Play button icon positioning for better visual balance */
.play-btn .fa-play {
  position: relative;
  left: 2px;
}

/* Small helper for brand/logo spacing */
.brand-logo {
  display: inline-block;
  vertical-align: middle;
}

/* Animated shield of circles used as a subtle decorative flourish on the dashboard */
.shield-overlay { position: fixed; right: 1rem; top: 1rem; width: 140px; height: 140px; pointer-events: none; z-index: 40; }

/* Card variant: centers the SVG and constrains size inside a dashboard card */
.shield-card { display:flex; align-items:center; justify-content:center; width:100%; height:140px; }
.shield-card svg { width:120px; height:120px; }

/* Pause shield animations when user toggles off */
.shield-paused .shield-circle { animation-play-state: paused !important; opacity: 0.45; }
.shield-paused .concentric-circle { animation-play-state: paused !important; opacity: 0.45; }

/* Concentric circles animation */
@keyframes concentricPulse {
	0% { transform: translate(-50%,-50%) scale(0.4); opacity: 0.9; }
	60% { transform: translate(-50%,-50%) scale(1.05); opacity: 0.4; }
	100% { transform: translate(-50%,-50%) scale(1.7); opacity: 0; }
}
.shield-concentric { position: relative; width: 100%; height: 100%; max-width: 120px; max-height: 120px; }
.shield-concentric .concentric-circle { position: absolute; border-radius: 999px; box-sizing: border-box; border: 2px solid rgba(59,130,246,0.18); background: rgba(59,130,246,0.03); left:50%; top:50%; transform: translate(-50%,-50%) scale(0.4); transform-origin: center; }
.shield-concentric .c1 { width:20%; height:20%; animation: concentricPulse 1.6s ease-out 0s 1 both; }
.shield-concentric .c2 { width:40%; height:40%; animation: concentricPulse 1.9s ease-out 0.12s 1 both; }

/* Weather model badge: small, outlined, subtle */
.weather-model-badge {
	display:inline-block;
	font-size:0.65rem; /* smaller */
	padding:4px 6px;
	border-radius:6px;
	border:1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.03);
	color: rgba(255,255,255,0.9);
}
.weather-model-badge:focus {
	outline: 2px solid rgba(59,130,246,0.6);
	outline-offset: 2px;
}

/* Info button and popover for model badge */
.info-btn {
	display:inline-flex; align-items:center; justify-content:center;
	width:20px; height:20px; font-size:12px; line-height:1;
	border-radius:999px; background: rgba(255,255,255,0.04); color:rgba(255,255,255,0.9);
	border: 1px solid rgba(255,255,255,0.08); cursor:pointer;
}
.info-btn:focus { outline: 2px solid rgba(59,130,246,0.6); outline-offset:2px; }
.model-popover {
	position: fixed; z-index: 9999; background: rgba(15,23,42,0.98); border:1px solid rgba(255,255,255,0.06);
	padding:8px 10px; border-radius:6px; max-width:260px; box-shadow: 0 12px 40px rgba(2,6,23,0.6);
	transform-origin: top left; pointer-events: auto;
}
.model-popover.hidden { display:none; }
.model-popover:focus { outline: none; }
.shield-concentric .c3 { width:60%; height:60%; animation: concentricPulse 2.2s ease-out 0.24s 1 both; }
.shield-concentric .c4 { width:80%; height:80%; animation: concentricPulse 2.5s ease-out 0.36s 1 both; }
.shield-overlay svg { width: 100%; height: 100%; display: block; }
.shield-circle { transform-box: fill-box; transform-origin: center; }

@keyframes shieldPulse {
	0% { transform: scale(0.6); opacity: 0.85; }
	60% { transform: scale(1.12); opacity: 0.35; }
	100% { transform: scale(1.6); opacity: 0; }
}

.shield-circle.c1 { animation: shieldPulse 1.6s cubic-bezier(.22,.9,.35,1) 0s 1 both; }
.shield-circle.c2 { animation: shieldPulse 1.8s cubic-bezier(.22,.9,.35,1) 0.12s 1 both; }
.shield-circle.c3 { animation: shieldPulse 2.0s cubic-bezier(.22,.9,.35,1) 0.24s 1 both; }
.shield-circle.c4 { animation: shieldPulse 2.2s cubic-bezier(.22,.9,.35,1) 0.36s 1 both; }
.shield-circle.c5 { animation: shieldPulse 2.4s cubic-bezier(.22,.9,.35,1) 0.48s 1 both; }

/* Low-contrast default so it doesn't distract; use prefers-reduced-motion to disable */
.shield-overlay circle { fill: rgba(59,130,246,0.12); stroke: rgba(59,130,246,0.18); }
@media (prefers-reduced-motion: reduce) {
	.shield-circle { animation: none !important; opacity: 0; }
}

/* CSS-only shield variants (div-based) to replace inline SVGs */
.shield-main { position: relative; width: 120px; height: 120px; }
.shield-main .shield-circle { position: absolute; border-radius: 999px; background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.18); transform-origin: center; }
.shield-main .c1 { width:36px; height:36px; left:50%; top:32%; transform: translate(-50%,-50%); animation: shieldPulse 1.6s cubic-bezier(.22,.9,.35,1) 0s 1 both; }
.shield-main .c2 { width:24px; height:24px; left:68%; top:48%; transform: translate(-50%,-50%); animation: shieldPulse 1.8s cubic-bezier(.22,.9,.35,1) 0.12s 1 both; }
.shield-main .c3 { width:20px; height:20px; left:38%; top:52%; transform: translate(-50%,-50%); animation: shieldPulse 2.0s cubic-bezier(.22,.9,.35,1) 0.24s 1 both; }
.shield-main .c4 { width:12px; height:12px; left:58%; top:24%; transform: translate(-50%,-50%); animation: shieldPulse 2.2s cubic-bezier(.22,.9,.35,1) 0.36s 1 both; }
.shield-main .c5 { width:8px; height:8px; left:82%; top:28%; transform: translate(-50%,-50%); animation: shieldPulse 2.4s cubic-bezier(.22,.9,.35,1) 0.48s 1 both; }

/* Div-based concentric rings */
.shield-concentric { position: relative; width: 120px; height: 120px; }
.shield-concentric .concentric-circle { position: absolute; border-radius: 999px; box-sizing: border-box; border: 2px solid rgba(59,130,246,0.18); background: rgba(59,130,246,0.03); transform-origin: center; }
.shield-concentric .c1 { width:24px; height:24px; left:50%; top:50%; transform: translate(-50%,-50%) scale(0.4); animation: concentricPulse 1.6s ease-out 0s 1 both; }
.shield-concentric .c2 { width:48px; height:48px; left:50%; top:50%; transform: translate(-50%,-50%) scale(0.4); animation: concentricPulse 1.9s ease-out 0.12s 1 both; }
.shield-concentric .c3 { width:72px; height:72px; left:50%; top:50%; transform: translate(-50%,-50%) scale(0.4); animation: concentricPulse 2.2s ease-out 0.24s 1 both; }
.shield-concentric .c4 { width:96px; height:96px; left:50%; top:50%; transform: translate(-50%,-50%) scale(0.4); animation: concentricPulse 2.5s ease-out 0.36s 1 both; }

/* Honor pause class for div-based circles too */
.shield-paused .shield-main .shield-circle,
.shield-paused .shield-concentric .concentric-circle { animation-play-state: paused !important; opacity: 0.45; }

/* Weather widget styles (appended */
#weather-widget { min-width:180px; }
#weather-widget .w-12 { width:48px; height:48px; font-size:22px; }
#weather-widget #weather-icon { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-radius:8px; display:flex; align-items:center; justify-content:center; }
#weather-widget #weather-temp { color: #fff; }
#weather-widget #weather-desc { color: rgba(255,255,255,0.85); font-size:0.9rem; }

/* Allow inner content to shrink/wrap so loc status doesn't widen the widget */
.min-w-0 { min-width: 0; }
#weather-loc-status { word-break: break-word; white-space: normal; max-width: 28rem; }

@media (max-width: 640px) {
  #weather-widget { display:block; margin-top:12px; }
}

/* Weekly forecast styles (updated polish) */
#weather-weekly-panel { border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
#weather-weekly-list { margin: 0; padding: 0; }
.weather-weekly-item { padding: 8px 10px; border-radius: 8px; display:flex; align-items:center; justify-content:space-between; gap:0.75rem; background: rgba(255,255,255,0.01); }
.weather-weekly-item + .weather-weekly-item { margin-top: 0.5rem; }
.weather-weekly-item:hover { background: rgba(255,255,255,0.03); transform: translateY(-1px); }
.weather-weekly-item.selected { background: rgba(255,255,255,0.06); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.weather-weekly-icon { font-size: 20px; line-height: 1; display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; }
.wk-day { font-weight:600; font-size:0.95rem; }
.wk-temp { font-weight:600; }
.wk-meta { display:flex; gap:0.5rem; font-size:0.78rem; color: rgba(255,255,255,0.75); }
.wk-sun, .wk-uv { font-size:0.72rem; color: rgba(255,255,255,0.65); }

@media (min-width: 640px) {
	.weather-weekly-icon { font-size: 26px; width:36px; height:36px; }
	.weather-weekly-item { padding: 10px 12px; }
}

/* Hourly panel and sparkline */
#weather-hourly-panel { border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
#weather-hourly-spark { height: 48px; }
#weather-hourly-list { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.weather-hourly-cell { padding: 6px 6px; border-radius:6px; background: rgba(255,255,255,0.01); text-align:center; }
.weather-hourly-cell .hour { display:block; font-weight:600; }
.weather-hourly-cell .htemp { display:block; font-size:0.95rem; }
.weather-hourly-cell .hprecip { display:block; font-size:0.75rem; color: rgba(255,255,255,0.72); }
/* hourly icon */
.weather-hourly-icon { margin-top:6px; font-size:18px; line-height:1;}

/* Sparkline path styling */
.weather-sparkline-path { fill: none; stroke: rgba(255,255,255,0.9); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.weather-sparkline-area { fill: rgba(255,255,255,0.06); }
/* precipitation path (light blue) */
.weather-precip-path { fill: none; stroke: rgba(79,195,247,0.95); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; opacity: 0.95; }
/* legend styling */
.weather-legend { display:flex; align-items:center; gap:8px; }
.legend-item { display:inline-flex; align-items:center; gap:6px; }
.legend-swatch { width:10px; height:10px; display:inline-block; border-radius:2px; }
.legend-swatch.legend-temp { background: #fff; }
.legend-swatch.legend-precip { background: rgba(79,195,247,0.95); }
/* optional precipitation area fill */
.weather-precip-area { fill: rgba(79,195,247,0.12); }

/* Zero baseline and label for precipitation (moved from inline SVG) */
.weather-zero-line { stroke: rgba(255,255,255,0.08); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.weather-zero-label { fill: rgba(255,255,255,0.14); font-size: 10px; pointer-events: none; }

/* Small point for single-value sparklines */
.weather-sparkline-point { fill: #fff; stroke: none; }

/* Legend tooltips */
.legend-tooltip { position: absolute; transform: translateY(-6px); background: rgba(0,0,0,0.75); color: #fff; padding:6px 8px; border-radius:6px; font-size:12px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease; z-index:40; }
.legend-item { position: relative; }
.legend-item:focus .legend-tooltip, .legend-item:hover .legend-tooltip { opacity:1; transform: translateY(-10px); pointer-events:auto; }
.legend-item:focus { outline: 2px solid rgba(255,255,255,0.12); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.legend-tooltip { transition: none; }
}

/* Hourly cell tooltip */
.weather-hourly-cell:focus { outline: 2px solid rgba(255,255,255,0.08); outline-offset: 2px; }

/* Hourly hover tooltip */
.weather-tooltip {
	position: fixed; z-index: 99999; pointer-events: none;
	background: rgba(0,0,0,0.78); color: #fff; padding:8px 10px; border-radius:6px;
	font-size:12px; line-height:1.2; max-width:220px; box-shadow: 0 8px 24px rgba(2,6,23,0.6);
	transform-origin: center top; transition: opacity 120ms ease, transform 120ms ease;
	opacity: 0; transform: translateY(-4px) scale(0.98);
	}

/* Reserve bottom space only when the bottom player is open. The JS will set
   --bp-reserved to the measured panel height (px). When the panel is closed
   there is no extra page bottom padding (avoids permanent empty space). */
body.has-bottom-player #main-content-wrapper {
	padding-bottom: calc(var(--bp-reserved, 5rem) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
	body.has-bottom-player #main-content-wrapper {
		padding-bottom: calc(var(--bp-reserved, 6rem) + env(safe-area-inset-bottom, 0px));
	}
}

/* On wider screens remove the extra safety gap so the footer sits flush with the
   top of the bottom player. We clamp to 0 to avoid negative padding. */
@media (min-width: 768px) {
	body.has-bottom-player #main-content-wrapper {
		padding-bottom: max(0px, calc(var(--bp-reserved, 5rem) + env(safe-area-inset-bottom, 0px) - 6px));
	}
}

/* Smoothly animate padding changes when the bottom player opens/closes */
#main-content-wrapper {
	transition: padding-bottom 200ms ease;
}


/* Christmas ornament helper */
.christmas-ornament {
  width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff7cc, #ffd26a);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

/* Realistic CSS-only snow animation used on seasonal pages */
.snow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 60;
	opacity: 0.6;
	mix-blend-mode: screen;
}

.snow::before,
.snow::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		/* Large snowflakes - slow, subtle */
		radial-gradient(circle, rgba(255,255,255,0.7) 1px, rgba(255,255,255,0) 2px),
		radial-gradient(circle, rgba(255,255,255,0.6) 0.8px, rgba(255,255,255,0) 1.6px),
		/* Medium snowflakes - medium speed */
		radial-gradient(circle, rgba(255,255,255,0.5) 0.6px, rgba(255,255,255,0) 1.2px),
		radial-gradient(circle, rgba(255,255,255,0.45) 0.5px, rgba(255,255,255,0) 1px),
		/* Small snowflakes - fast, sparse */
		radial-gradient(circle, rgba(255,255,255,0.4) 0.3px, rgba(255,255,255,0) 0.6px),
		radial-gradient(circle, rgba(255,255,255,0.35) 0.25px, rgba(255,255,255,0) 0.5px);
	background-size:
		/* Large layer - more spaced out */
		240px 240px, 180px 180px,
		/* Medium layer */
		120px 120px, 90px 90px,
		/* Small layer */
		60px 60px, 45px 45px;
	background-position:
		/* Large snowflakes starting positions */
		15% -20%, 70% -30%,
		/* Medium snowflakes starting positions */
		40% -40%, 85% -15%,
		/* Small snowflakes starting positions */
		10% -35%, 55% -25%;
	animation: snow-fall-large 20s linear infinite,
	          snow-fall-medium 14s linear infinite,
	          snow-fall-small 10s linear infinite,
	          snow-drift 30s ease-in-out infinite;
}

.snow::before {
	animation-delay: 0s, 0s, 3s, 3s, 6s, 6s;
}

.snow::after {
	animation-delay: 8s, 8s, 11s, 11s, 14s, 14s;
}

@keyframes snow-fall-large {
	0% {
		background-position:
			10% -20%, 60% -40%, 85% -10%,
			25% -30%, 75% -50%, 45% -15%,
			5% -25%, 35% -35%, 65% -45%;
	}
	100% {
		background-position:
			10% 120%, 60% 100%, 85% 130%,
			25% 110%, 75% 90%, 45% 125%,
			5% 115%, 35% 105%, 65% 85%;
	}
}

@keyframes snow-fall-medium {
	0% {
		background-position:
			10% -20%, 60% -40%, 85% -10%,
			25% -30%, 75% -50%, 45% -15%,
			5% -25%, 35% -35%, 65% -45%;
	}
	100% {
		background-position:
			15% 120%, 65% 100%, 90% 130%,
			30% 110%, 80% 90%, 50% 125%,
			10% 115%, 40% 105%, 70% 85%;
	}
}

@keyframes snow-fall-small {
	0% {
		background-position:
			10% -20%, 60% -40%, 85% -10%,
			25% -30%, 75% -50%, 45% -15%,
			5% -25%, 35% -35%, 65% -45%;
	}
	100% {
		background-position:
			20% 120%, 70% 100%, 95% 130%,
			35% 110%, 85% 90%, 55% 125%,
			15% 115%, 45% 105%, 75% 85%;
	}
}

@keyframes snow-drift {
	0%, 100% { transform: translateX(0px) rotate(0deg); }
	25% { transform: translateX(5px) rotate(0.5deg); }
	50% { transform: translateX(-3px) rotate(-0.3deg); }
	75% { transform: translateX(2px) rotate(0.2deg); }
}

@media (prefers-reduced-motion: reduce) {
	.snow {
		animation: none;
		opacity: 0.5;
	}
	.snow::before,
	.snow::after {
		animation: none;
	}
}

@media (max-width: 640px) {
	.snow {
		opacity: 0.45;
	}
	.snow::before,
	.snow::after {
		background-size:
			/* Large layer - smaller on mobile */
			160px 160px, 120px 120px,
			/* Medium layer */
			80px 80px, 60px 60px,
			/* Small layer */
			40px 40px, 30px 30px;
	}
}



/* Sunrise / Sunset markers on sparkline x-axis */
.weather-sun-tick { stroke: rgba(255,223,93,0.95); stroke-width: 1.25; shape-rendering: crispEdges; pointer-events: none; }
.weather-sun-label { fill: rgba(255,223,93,0.95); font-size: 10px; pointer-events: none; font-weight: 600; }
.weather-sun-label.small { font-size: 9px; opacity: 0.95; }
.weather-sun-tick.sunrise { stroke-opacity: 0.9; }
.weather-sun-tick.sunset { stroke-opacity: 0.9; }
.weather-sun-label.sunrise { text-anchor: middle; }
.weather-sun-label.sunset { text-anchor: middle; }
.weather-tooltip.show { opacity: 1; transform: translateY(0) scale(1); }
.weather-tooltip .tt-time { font-weight:700; margin-bottom:4px; display:block; }
.weather-tooltip .tt-line { font-size:12px; color: rgba(255,255,255,0.9); }

/* Daytime band and midday marker styles for hourly sparklines */
.weather-daytime-band {
	fill: rgba(255, 236, 179, 0.10); /* slightly more visible pale warm wash */
	pointer-events: none;
}
.weather-midday-line {
	stroke: rgba(255, 236, 179, 0.28); /* slightly stronger vertical marker */
	stroke-width: 1;
	stroke-dasharray: 2 4;
	pointer-events: none;
}

/* Current time marker (vertical line + small dot) */
.weather-now-line {
	stroke: rgba(255,120,120,0.95);
	stroke-width: 1.5;
	pointer-events: none;
}
.weather-now-dot {
	fill: rgba(255,120,120,0.98);
	stroke: rgba(255,255,255,0.9);
	stroke-width: 0.8;
	pointer-events: none;
}

/* When tooltip is placed below a target, tweak the entrance animation origin */
.weather-tooltip.below { transform-origin: center bottom; transform: translateY(4px) scale(0.98); }

/* Tooltip arrow (positioned via --arrow-left percent of tooltip width) */
/* arrow removed: tooltip shows without a pointer */

/* Make the inline SVG responsive and give it a sensible default height */
#weather-hourly-sparkline { width: 100%; height: 48px; display: block; }

/* Responsive adjustments: more columns on wider screens */
@media (min-width: 768px) {
	/* 12 columns -> two rows for 12 hours (stacked) */
	#weather-hourly-list { grid-template-columns: repeat(12, 1fr); gap: 8px; }
	#weather-hourly-spark { height: 56px; }
	#weather-hourly-sparkline { height: 56px; }
	.weather-hourly-cell { padding: 8px 6px; font-size: 0.95rem; }
}

@media (min-width: 1024px) {
	/* up to 12 columns (single row) for very wide layouts */
	#weather-hourly-list { grid-template-columns: repeat(12, minmax(36px, 1fr)); gap: 6px; }
	#weather-hourly-spark { height: 64px; }
	#weather-hourly-sparkline { height: 64px; }
	.weather-hourly-cell { padding: 6px 4px; font-size: 0.95rem; }
	.weather-sparkline-path { stroke-width: 2; }
}

/* Custom polygon shape for programme images */
.programme-polygonX {
	clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.programme-polygon-potential {
clip-path: polygon(
      0% 25%, 
      0.5% 20%, 2% 16%, 4.5% 12.5%, 8% 9.5%, 12.5% 7%, 17.5% 5%, 23% 3.5%, 29% 2.5%, 35% 2%, 41% 1.8%, 47% 1.8%, 53% 1.8%, 59% 1.8%, 65% 2%, 71% 2.5%, 77% 3.5%, 82.5% 5%, 87.5% 7%, 92% 9.5%, 95.5% 12.5%, 98% 16%, 99.5% 20%,
      100% 25%, 100% 75%,
      99.5% 80%, 98% 84%, 95.5% 87.5%, 92% 90.5%, 87.5% 93%, 82.5% 95%, 77% 96.5%, 71% 97.5%, 65% 98%, 59% 98.2%, 53% 98.2%, 47% 98.2%, 41% 98.2%, 35% 98%, 29% 97.5%, 23% 96.5%, 17.5% 95%, 12.5% 93%, 8% 90.5%, 4.5% 87.5%, 2% 84%, 0.5% 80%,
      0% 75%
  );
}
.programme-polygon {
/* Ensure polygon clip applies across browsers and that images inside do not get rounded
	 (some templates or utilities may add rounded-full to images elsewhere). */
 -webkit-clip-path: polygon(
	0% 35%, 
	0.3% 28%, 1.2% 22%, 3% 17%, 5.5% 12.5%, 9% 8.5%, 13.5% 5.5%, 
	18.5% 3.2%, 24% 1.5%, 30% 0.5%, 36% 0.1%, 42% 0%, 48% 0%, 
	52% 0%, 58% 0%, 64% 0.1%, 70% 0.5%, 76% 1.5%, 81.5% 3.2%, 
	86.5% 5.5%, 91% 8.5%, 94.5% 12.5%, 97% 17%, 98.8% 22%, 99.7% 28%,
	100% 35%, 100% 65%,
	99.7% 72%, 98.8% 78%, 97% 83%, 94.5% 87.5%, 91% 91.5%, 
	86.5% 94.5%, 81.5% 96.8%, 76% 98.5%, 70% 99.5%, 64% 99.9%, 
	58% 100%, 52% 100%, 48% 100%, 42% 100%, 36% 99.9%, 30% 99.5%, 
	24% 98.5%, 18.5% 96.8%, 13.5% 94.5%, 9% 91.5%, 5.5% 87.5%, 
	3% 83%, 1.2% 78%, 0.3% 72%,
	0% 65%
);
clip-path: polygon(
  0% 35%, 
  0.3% 28%, 1.2% 22%, 3% 17%, 5.5% 12.5%, 9% 8.5%, 13.5% 5.5%, 
  18.5% 3.2%, 24% 1.5%, 30% 0.5%, 36% 0.1%, 42% 0%, 48% 0%, 
  52% 0%, 58% 0%, 64% 0.1%, 70% 0.5%, 76% 1.5%, 81.5% 3.2%, 
  86.5% 5.5%, 91% 8.5%, 94.5% 12.5%, 97% 17%, 98.8% 22%, 99.7% 28%,
  100% 35%, 100% 65%,
  99.7% 72%, 98.8% 78%, 97% 83%, 94.5% 87.5%, 91% 91.5%, 
  86.5% 94.5%, 81.5% 96.8%, 76% 98.5%, 70% 99.5%, 64% 99.9%, 
  58% 100%, 52% 100%, 48% 100%, 42% 100%, 36% 99.9%, 30% 99.5%, 
  24% 98.5%, 18.5% 96.8%, 13.5% 94.5%, 9% 91.5%, 5.5% 87.5%, 
  3% 83%, 1.2% 78%, 0.3% 72%,
  0% 65%
);

/* Force images inside the polygon to not be rounded and to fill the container */
.programme-polygon img {
	border-radius: 0 !important;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
}

.organic-shape {
    clip-path: polygon(
        0% 35%, 
        0.3% 28%, 1.2% 22%, 3% 17%, 5.5% 12.5%, 9% 8.5%, 13.5% 5.5%, 
        18.5% 3.2%, 24% 1.5%, 30% 0.5%, 36% 0.1%, 42% 0%, 48% 0%, 
        52% 0%, 58% 0%, 64% 0.1%, 70% 0.5%, 76% 1.5%, 81.5% 3.2%, 
        86.5% 5.5%, 91% 8.5%, 94.5% 12.5%, 97% 17%, 98.8% 22%, 99.7% 28%,
        100% 35%, 100% 65%,
        99.7% 72%, 98.8% 78%, 97% 83%, 94.5% 87.5%, 91% 91.5%, 
        86.5% 94.5%, 81.5% 96.8%, 76% 98.5%, 70% 99.5%, 64% 99.9%, 
        58% 100%, 52% 100%, 48% 100%, 42% 100%, 36% 99.9%, 30% 99.5%, 
        24% 98.5%, 18.5% 96.8%, 13.5% 94.5%, 9% 91.5%, 5.5% 87.5%, 
        3% 83%, 1.2% 78%, 0.3% 72%,
        0% 65%
    );
}

.audio-wave {
    background: linear-gradient(45deg, #ea580c, #f97316, #fb923c);
    animation: pulse 2s ease-in-out infinite alternate;
}

.audio-wave:nth-child(2) { animation-delay: 0.2s; }
.audio-wave:nth-child(3) { animation-delay: 0.4s; }
.audio-wave:nth-child(4) { animation-delay: 0.6s; }
.audio-wave:nth-child(5) { animation-delay: 0.8s; }

@keyframes pulse {
    0% { transform: scaleY(0.3); opacity: 0.7; }
    100% { transform: scaleY(1); opacity: 1; }
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.live-indicator {
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.gradient-text {
    background: linear-gradient(135deg, #ea580c, #f97316, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* When the bottom persistent player is open we add space so the footer isn't covered.
   Adjust the value if you change the player's height. */
body.has-bottom-player #main-content-wrapper {
	padding-bottom: 96px; /* space for bottom player */
}

/* Prevent layout shift when live clock digits change width (e.g. seconds ticking).
	Use tabular (fixed-width) numerals so AM/PM and surrounding content don't reflow. */
#bp-pos, #bp-dur {
  /* modern browsers */
  font-variant-numeric: tabular-nums;
  /* WebKit / older browsers */
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
}

/* Ensure the am/pm text doesn't collapse or jitter next to digits. Make it
	a stable inline block with a small left margin so it remains visually
	separated from the numeric group. Adjust if you prefer more spacing. */
#bp-pos .ampm, #bp-dur .ampm {
  display: inline-block;
  min-width: 2.2ch; /* reserve approximate width for 'am' or 'pm' */
  margin-left: 0.28ch;
  text-transform: lowercase;
  opacity: 0.95;
}