/*
Theme Name: WAGY Downtown Radio
Theme URI: http://www.wagyfm.com/
Author: KTC Broadcasting
Description: Theme for WAGY 107.5 FM / 1320 AM, Forest City NC. Built from the approved mockup: masthead, hero with live player, tuning dial, sponsor grid, events, and studio panel.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wagy
*/

:root{
  --navy:      #2C2F8F;
  --navy-deep: #1A1C5C;
  --sky:       #4EC1F0;
  --sky-pale:  #DCEFFA;
  --ink:       #16161A;
  --slate:     #5A6270;
  --paper:     #FFFFFF;
  --tint:      #F1F6FB;
  --needle:    #E0402A;
  --rule:      #E3EAF2;

  --wrap: 62rem;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size:1.125rem;
  line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--navy); }
a:focus-visible,
button:focus-visible{
  outline:3px solid var(--needle);
  outline-offset:3px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:1.5rem;
}

/* Accessibility helper WordPress expects to exist. */
.screen-reader-text{
  border:0;
  clip-path:inset(50%);
  height:1px; width:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  position:absolute;
  word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#fff;
  clip-path:none;
  color:var(--navy);
  display:block;
  font-size:1rem;
  height:auto; width:auto;
  padding:1rem 1.5rem;
  left:1rem; top:1rem;
  position:fixed;
  text-decoration:none;
  z-index:100000;
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.25);
}

/* ---------- masthead ---------- */
.masthead{
  padding:2.25rem 0 2rem;
  text-align:center;
}
.masthead img{
  margin-inline:auto;
  width:min(30rem, 100%);
}
.masthead .site-title{
  font-family:"Fraunces", Georgia, serif;
  font-weight:900;
  font-size:2rem;
  margin:0;
}
.masthead .site-title a{ text-decoration:none; }

/* ---------- nav (only renders when a menu is assigned) ---------- */
.site-nav{ margin-top:1.5rem; }
.site-nav ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem 1.75rem;
}
.site-nav a{
  font-weight:600;
  font-size:1rem;
  letter-spacing:.02em;
  text-decoration:none;
  padding-bottom:.15rem;
  border-bottom:3px solid transparent;
}
.site-nav a:hover,
.site-nav .current-menu-item > a{ border-bottom-color:var(--sky); }

/* ---------- hero ---------- */
.hero{
  background:var(--navy-deep);
  color:#fff;
  padding:3.5rem 0 4rem;
  text-align:center;
}
.hero h1{
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 60, "WONK" 1, "opsz" 120;
  font-weight:900;
  font-size:clamp(2.75rem, 11vw, 5.5rem);
  line-height:0.95;
  letter-spacing:-0.02em;
  margin:0;
}
.hero h1 em{
  font-style:italic;
  color:var(--sky);
  display:block;
}
.hero p{
  margin:1.25rem auto 0;
  max-width:38rem;
  color:var(--sky-pale);
  font-size:1.125rem;
}

/* ---------- dial ---------- */
.dial-section{
  padding:4rem 0;
  background:var(--tint);
  text-align:center;
}
.eyebrow{
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--slate);
  margin:0 0 2.5rem;
}
.dial{
  position:relative;
  max-width:38rem;
  margin-inline:auto;
  padding-top:3.25rem;
}
.dial-track{
  height:2.5rem;
  border-top:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  background-image:repeating-linear-gradient(
    to right,
    var(--navy) 0 1px,
    transparent 1px 1.25rem
  );
  background-size:100% 0.9rem;
  background-repeat:no-repeat;
  background-position:0 0.8rem;
  opacity:.55;
}
.stop{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  width:9rem;
}
.stop--fm{ left:28%; }
.stop--am{ left:72%; }
.stop b{
  display:block;
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 60, "WONK" 1;
  font-weight:900;
  font-size:1.75rem;
  line-height:1.1;
  color:var(--navy);
}
.stop span{
  display:block;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
}
.stop::after{
  content:"";
  position:absolute;
  left:50%;
  top:3.25rem;
  width:3px;
  height:2.5rem;
  background:var(--needle);
  transform:translateX(-50%);
}

/* ---------- sponsors ---------- */
.sponsors{
  padding:3.5rem 0;
  border-bottom:1px solid var(--rule);
  text-align:center;
}
.sponsor-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  max-width:52rem;
  margin-inline:auto;
}
.sponsor{
  display:block;
  border:1px solid #DCE3EC;
  border-radius:.25rem;
  overflow:hidden;
  background:#fff;
}
.sponsor img{ width:100%; }
.sponsor:hover{ border-color:var(--navy); }
.sponsor-cta{
  margin:1.75rem 0 0;
  font-size:1rem;
  color:var(--slate);
}

/* ---------- events ---------- */
.events{ padding:3.5rem 0; }
.event-list{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:44rem;
}
.event{
  display:flex;
  gap:1.25rem;
  align-items:flex-start;
  padding:1.25rem 0;
  border-top:1px solid var(--rule);
}
.event:last-child{ border-bottom:1px solid var(--rule); }
.date{
  flex:0 0 3.75rem;
  background:var(--navy);
  color:#fff;
  border-radius:.3rem;
  text-align:center;
  padding:.45rem 0 .55rem;
  line-height:1;
}
.date b{
  display:block;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sky);
}
.date i{
  display:block;
  font-style:normal;
  font-family:"Fraunces", Georgia, serif;
  font-weight:900;
  font-size:1.6rem;
  margin-top:.2rem;
}
.event h3{
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 60, "WONK" 1;
  font-weight:700;
  font-size:1.25rem;
  margin:0 0 .25rem;
  color:var(--navy);
}
.event p{ margin:0; font-size:1rem; color:#2E3340; }

.events .eyebrow{ text-align:center; }

.photos{
  padding:0 0 3.5rem;
  text-align:center;
}
.photo-grid{
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
  max-width:44rem;
  margin-inline:auto;
}
.photo-grid img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:.3rem;
  border:1px solid #DCE3EC;
}

/* ---------- about ---------- */
.about{ padding:4.5rem 0; }
.about-grid{
  display:grid;
  gap:2.5rem;
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:48rem){
  .about-grid{ grid-template-columns:1.55fr 1fr; gap:3rem; }
}
.studio{ margin:0; }
.studio img{
  width:100%;
  border-radius:.5rem;
  border:1px solid #DCE3EC;
}
.studio figcaption{
  margin-top:.65rem;
  font-size:.9375rem;
  color:var(--slate);
}
.about .h2-next{ margin-top:2.5rem; }
.about h2{
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 60, "WONK" 1;
  font-weight:700;
  font-size:1.75rem;
  line-height:1.15;
  margin:0 0 .75rem;
  color:var(--navy);
}
.about p{ margin:0 0 1rem; color:#2E3340; }
.big-link{
  display:inline-block;
  font-weight:700;
  font-size:1.375rem;
  text-decoration:none;
  border-bottom:3px solid var(--sky);
  padding-bottom:.15rem;
}
.big-link:hover{ border-bottom-color:var(--navy); }
.visit .big-link{ margin-bottom:.35rem; }

/* ---------- interior pages / posts ---------- */
.page-head{
  background:var(--tint);
  padding:3rem 0;
  text-align:center;
  border-bottom:1px solid var(--rule);
}
.page-head h1{
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 60, "WONK" 1;
  font-weight:900;
  font-size:clamp(2rem, 6vw, 3rem);
  line-height:1.05;
  margin:0;
  color:var(--navy);
}
.page-body{ padding:3.5rem 0 4.5rem; }
.page-body .wrap{ max-width:44rem; }
.entry + .entry{ margin-top:3rem; padding-top:3rem; border-top:1px solid var(--rule); }
.entry-title{
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 60, "WONK" 1;
  font-weight:700;
  font-size:1.75rem;
  line-height:1.2;
  margin:0 0 .35rem;
  color:var(--navy);
}
.entry-title a{ text-decoration:none; color:inherit; }
.entry-title a:hover{ border-bottom:2px solid var(--sky); }
.entry-meta{
  font-size:.9375rem;
  color:var(--slate);
  margin:0 0 1.25rem;
}
.entry-content h2,
.entry-content h3{
  font-family:"Fraunces", Georgia, serif;
  font-variation-settings:"SOFT" 60, "WONK" 1;
  color:var(--navy);
  line-height:1.2;
}
.entry-content blockquote{
  margin:1.5rem 0;
  padding-left:1.25rem;
  border-left:4px solid var(--sky);
  color:#2E3340;
}
.entry-content figure{ margin:1.5rem 0; }
.entry-content img{ border-radius:.3rem; }
.alignleft{ float:left; margin:.35rem 1.5rem 1rem 0; }
.alignright{ float:right; margin:.35rem 0 1rem 1.5rem; }
.aligncenter{ margin-inline:auto; }
.wp-caption-text,
.entry-content figcaption{
  font-size:.9375rem;
  color:var(--slate);
  margin-top:.5rem;
}
.pagination{ margin-top:3rem; }
.pagination .page-numbers{
  display:inline-block;
  padding:.4rem .85rem;
  margin-right:.35rem;
  border:1px solid var(--rule);
  border-radius:.25rem;
  text-decoration:none;
  font-size:1rem;
}
.pagination .current{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.back-home{ margin-top:3rem; font-size:1rem; }

/* ---------- footer ---------- */
.site-footer{
  background:var(--navy-deep);
  color:var(--sky-pale);
  padding:2.5rem 0;
  text-align:center;
  font-size:.9375rem;
}
.site-footer p{ margin:.25rem 0; }
.site-footer a{ color:#fff; }

/* Keep the admin bar from covering the masthead. */
body.admin-bar .screen-reader-text:focus{ top:3.5rem; }

/* ---------- station note (front page, from the assigned front page) ---------- */
.station-note{
  padding:3rem 0;
  border-bottom:1px solid var(--rule);
}
.station-note .wrap{ max-width:44rem; }
.station-note .entry-content > :first-child{ margin-top:0; }
.station-note .entry-content > :last-child{ margin-bottom:0; }

/* ---------- event extras ---------- */
.event-where{
  font-size:.9375rem;
  font-weight:600;
  color:var(--slate);
  margin:0 0 .35rem;
}
.event .entry-content p:last-child{ margin-bottom:0; }

/* ---------- page banner ---------- */
.page-banner img{
  width:100%;
  max-height:24rem;
  object-fit:cover;
}

/* ---------- admin-only prompts for empty sections ---------- */
.editor-note{
  max-width:34rem;
  margin:0 auto;
  padding:1.5rem;
  border:2px dashed #C3CDD9;
  border-radius:.5rem;
  color:var(--slate);
  font-size:1rem;
  text-align:center;
}
.editor-note span{
  display:block;
  margin-top:.35rem;
  font-size:.8125rem;
  opacity:.75;
}

.edit-note{
  margin-top:2.5rem;
  font-size:.9375rem;
}
.page-links{ margin-top:2rem; font-size:1rem; }

/* ============================================================
   Live player
   Two faces, one <audio> element: the receiver sits in the hero
   on the front page, the dock is fixed to the bottom of the
   window and appears once the receiver scrolls away.
   ============================================================ */

/* Room for the dock so it never covers the end of the page. */
body{ padding-bottom:4.5rem; }

/* ---------- shared parts ---------- */
.play-button{
  display:grid;
  place-items:center;
  border:0;
  padding:0;
  cursor:pointer;
  font:inherit;
  flex:0 0 auto;
}
.play-button:focus-visible{
  outline:3px solid var(--needle);
  outline-offset:3px;
}
.play-button svg{ display:block; }

/* Which glyph shows is driven by the state class on the surrounding face.
   This has to be CSS rather than the hidden property: these are <svg>
   elements, and `hidden` exists on HTMLElement only — setting it from
   script on an SVG element silently does nothing. */
.play-button .icon-pause{ display:none; }
.is-playing .play-button .icon-play,
.is-connecting .play-button .icon-play{ display:none; }
.is-playing .play-button .icon-pause,
.is-connecting .play-button .icon-pause{ display:block; }

/* While the stream connects the button pulses, so it doesn't look dead
   during the second or two before audio starts. */
.is-connecting .play-button{ animation:wagy-pulse .9s ease-in-out infinite; }
@keyframes wagy-pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }

.listeners{ opacity:.85; }

/* Level meter — flat until the stream is actually running. */
.level{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:1.25rem;
}
.level i{
  display:block;
  width:3px;
  height:20%;
  background:currentColor;
  border-radius:1px;
  transition:height .25s ease;
}
.is-playing .level i{ animation:wagy-level 1.1s ease-in-out infinite; }
.level i:nth-child(1){ animation-delay:-.9s }
.level i:nth-child(2){ animation-delay:-.5s }
.level i:nth-child(3){ animation-delay:-.2s }
.level i:nth-child(4){ animation-delay:-.7s }
.level i:nth-child(5){ animation-delay:-.35s }
.level i:nth-child(6){ animation-delay:-.1s }
@keyframes wagy-level{
  0%,100%{ height:25% }
  50%    { height:100% }
}

/* Volume */
.volume{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.volume input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  cursor:pointer;
  height:1.25rem;
  width:100%;
  /* Form controls don't inherit colour; without this, currentColor below
     resolves to the UA default (black) instead of the surrounding text. */
  color:inherit;
}
.volume input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:2px; background:currentColor; opacity:.45;
}
.volume input[type="range"]::-moz-range-track{
  height:4px; border-radius:2px; background:currentColor; opacity:.45;
}
.volume input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:1rem; height:1rem;
  border-radius:50%;
  background:currentColor;
  margin-top:-.375rem;
}
.volume input[type="range"]::-moz-range-thumb{
  width:1rem; height:1rem;
  border:0; border-radius:50%;
  background:currentColor;
}
.volume input[type="range"]:focus-visible{
  outline:3px solid var(--needle);
  outline-offset:4px;
}

/* ---------- receiver (front page hero) ---------- */
.receiver{
  width:min(30rem, 100%);
  margin:2.5rem auto 0;
  background:var(--paper);
  color:var(--ink);
  border-radius:.6rem;
  padding:1.5rem;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.25rem;
  align-items:center;
  text-align:left;
  box-shadow:
    0 1rem 2.5rem rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(26,28,92,.10);
}
.receiver-grille{
  width:7rem; height:7rem;
  border-radius:.35rem;
  background:repeating-linear-gradient(
    to bottom,
    var(--navy-deep) 0 3px,
    #2A2E63 3px 6px
  );
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 1.25rem rgba(0,0,0,.55);
  color:var(--sky);
}
.receiver-grille .level{ height:2.25rem; }
.receiver-grille .level i{ width:4px; }

.receiver-brand{
  font-family:"Fraunces", Georgia, serif;
  font-weight:900;
  font-size:1.5rem;
  line-height:1;
  color:var(--navy-deep);
}
.receiver-band{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
  margin-top:.25rem;
}
.receiver-controls{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-top:1rem;
}
.receiver .play-button{
  width:2.75rem; height:2.75rem;
  border-radius:50%;
  background:var(--needle);
  color:#fff;
  box-shadow:0 .3rem 0 #A62D1D;
  transition:transform .1s ease, box-shadow .1s ease;
}
.receiver .play-button:active{
  transform:translateY(.2rem);
  box-shadow:0 .1rem 0 #A62D1D;
}
.receiver .volume{
  flex:1 1 auto;
  color:var(--navy-deep);
}

@media (max-width:32rem){
  .receiver{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .receiver-face{ width:100%; }
}

/* ---------- dock ---------- */
.dock{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:900;
  background:var(--navy-deep);
  color:#fff;
  padding:.65rem clamp(.9rem, 4vw, 2rem);
  display:flex;
  align-items:center;
  gap:.9rem;
  box-shadow:0 -.5rem 1.5rem rgba(0,0,0,.28);
  transform:translateY(100%);
  transition:transform .28s ease;
}
.dock.is-visible{ transform:translateY(0); }

.dock .play-button{
  width:2.4rem; height:2.4rem;
  border-radius:50%;
  background:var(--sky);
  color:var(--navy-deep);
  transition:transform .18s ease;
}
.dock .play-button:hover{ transform:scale(1.07); }

.dock-text{
  flex:1 1 auto;
  min-width:0;
  font-size:.8125rem;
  line-height:1.3;
}
.dock-text b{
  display:block;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dock-text > span{
  display:flex;
  align-items:center;
  gap:.4rem;
  color:var(--sky-pale);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.dock .level{ color:var(--sky); flex:0 0 auto; }
.dock-volume{
  color:#fff;
  width:8rem;
  flex:0 0 auto;
  gap:.6rem;
}
.dock-volume svg{ flex:0 0 auto; opacity:.9; }

@media (max-width:40rem){
  .dock .level,
  .dock-volume{ display:none; }
}

/* The admin bar is fixed at the top; nothing to do at the bottom, but keep
   the dock clear of it on mobile where WordPress moves it. */
@media screen and (max-width:782px){
  body.admin-bar .dock{ bottom:0; }
}

@media (prefers-reduced-motion:reduce){
  .dock{ transition:none; }
  .is-playing .level i,
  .is-connecting .play-button{ animation:none; }
}

/* Without JavaScript there are no controls, so offer the raw stream. */
.receiver-fallback{
  margin:.7rem 0 0;
  font-size:.875rem;
  font-weight:600;
}
.receiver-fallback a{ color:var(--navy); }

/* Events has a public empty state rather than hiding, so the section keeps
   its place on the page and the photo strip below it stays put. */
.events-empty{
  max-width:44rem;
  margin:0 auto;
  padding:1.75rem 1rem;
  text-align:center;
  color:var(--slate);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.events-empty + .editor-note{ margin-top:1.5rem; }

/* ---------- photo viewer ---------- */
.photo-link{
  display:block;
  border-radius:.3rem;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.photo-link:hover{
  transform:translateY(-2px);
  box-shadow:0 .5rem 1.25rem rgba(26,28,92,.22);
}
.photo-link:focus-visible{
  outline:3px solid var(--needle);
  outline-offset:3px;
}
.photo-grid .photo-link img{ border-radius:0; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(12,13,40,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem, 5vw, 3rem);
}
.lightbox[hidden]{ display:none; }

.lightbox-figure{
  margin:0;
  max-width:min(60rem, 100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  align-items:center;
}
.lightbox-figure img{
  max-width:100%;
  max-height:80vh;
  width:auto;
  border-radius:.4rem;
  box-shadow:0 1.5rem 4rem rgba(0,0,0,.5);
}
.lightbox-figure figcaption{
  color:var(--sky-pale);
  font-size:.9375rem;
  text-align:center;
}
.lightbox-figure figcaption[hidden]{ display:none; }

.lightbox-close{
  position:absolute;
  top:1rem; right:1rem;
  width:2.75rem; height:2.75rem;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  transition:background .18s ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,.24); }
.lightbox-close:focus-visible{
  outline:3px solid var(--needle);
  outline-offset:3px;
}

/* Stop the page scrolling behind the overlay. */
body.has-lightbox{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .photo-link{ transition:none; }
  .photo-link:hover{ transform:none; }
}