/*
Theme Name: Just Radio
Template: twentytwentyfive
Theme URI: https://justradio.app
Author: Just Radio
Author URI: https://justradio.app
Description: Just Radio child theme — Busy Black canvas, Younger Yellow accent, Welding White text. Brings the app's look to the web. Native blocks, no plugins.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: justradio
*/

/* ---------------------------------------------------------------------------
   Just Radio — base styles. Brand tokens live in theme.json; this file adds
   the bespoke bits blocks can't express: the aurora hero, the ghost button,
   and a few utilities. Colours reference the theme.json presets so there's
   one source of truth.
   ------------------------------------------------------------------------- */

:root {
  --jr-black: var(--wp--preset--color--busy-black, #000);
  --jr-white: var(--wp--preset--color--welding-white, #fff);
  --jr-accent: var(--wp--preset--color--younger-yellow, #ffc600);
}

/* Animated aurora — put on a full-width Group (className "jr-aurora") to get
   the app's living, breathing colour field behind the content. */
.jr-aurora {
  position: relative;
  isolation: isolate;
  background-color: var(--jr-black);
  overflow: clip;
}
.jr-aurora::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  background:
    radial-gradient(38% 45% at 22% 28%, rgba(88, 197, 255, 0.55), rgba(0, 0, 0, 0) 60%),
    radial-gradient(32% 40% at 82% 22%, rgba(255, 240, 170, 0.45), rgba(0, 0, 0, 0) 60%),
    radial-gradient(40% 42% at 78% 82%, rgba(255, 170, 219, 0.50), rgba(0, 0, 0, 0) 60%),
    radial-gradient(42% 46% at 25% 84%, rgba(216, 255, 155, 0.50), rgba(0, 0, 0, 0) 62%);
  filter: blur(48px) saturate(120%);
  animation: jr-aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes jr-aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .jr-aurora::before { animation: none; }
}

/* Ghost button — the quiet counterpart to the accent pill (1px white ring). */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background-color: transparent;
  color: var(--jr-white);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
  border-color: var(--jr-white);
  background-color: rgba(255, 255, 255, 0.06);
}

/* Hairline — a 15% white rule to match the app's dividers. */
.jr-hairline {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

/* Muted body text helper. */
.jr-muted { color: rgba(255, 255, 255, 0.55); }