/* ============================================================
   Uncommon Christian Network — stylesheet module: layout
   Site header/nav, section + interior-hero scaffolding, footer, responsive nav.
   Load order (header.php): base, layout, home, live, support, pages.
   ============================================================ */
/* ---------- Header ---------- */
/* Solid black bar. */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#09090e;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:800;letter-spacing:-.02em}
/* Brighter purple gradient, rounded, with a subtle light border + glow. */
.brand-mark{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--violet-600);color:#fff;font-size:.9rem;font-weight:900;
  letter-spacing:-.03em;border:1px solid rgba(255,255,255,.2);
  box-shadow:0 10px 26px rgb(from var(--violet-400) r g b / .32);
}
.brand-text{font-size:1.02rem}
.brand-christ{color:var(--accent);letter-spacing:.01em}
.site-nav{display:flex;align-items:center;gap:1.6rem}
.site-nav a{color:var(--muted);font-weight:500;font-size:.95rem;transition:.15s}
.site-nav a:hover,.site-nav a.active{color:var(--text)}
/* "Support UCN" — a plain bold text link in warm gold. No pill, no outline;
   the gold makes it stand out among the muted nav links without competing with
   the colour-cycling Prayer pill. */
.site-nav .nav-cta{
  color:#ffca78;background:none;border:0;padding:0;
  font-weight:800;letter-spacing:.01em;
  transition:color .15s, text-shadow .15s;
}
.site-nav .nav-cta:hover{color:#ffd89a;text-shadow:0 0 18px rgba(255,202,120,.5)}
/* "Radio" — a plain nav link (no pill), just a small pulsing live beacon so
   it still reads as the live station without shouting. */
.site-nav .nav-live{display:inline-flex;align-items:center;gap:.45rem;
  color:var(--muted);font-weight:500;font-size:.95rem}
.site-nav .nav-live:hover,.site-nav .nav-live.active{color:var(--text)}
.nav-live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  --beacon-500:var(--ok);   /* green dot + green pulse (keyframe reads this var) */
  animation:navBeaconPulse 1.6s ease-in-out infinite}
@keyframes navBeaconPulse{
  0%,100%{box-shadow:0 0 0 0 rgb(from var(--beacon-500) r g b / .7);opacity:1}
  70%    {box-shadow:0 0 0 5px rgb(from var(--beacon-500) r g b / 0);opacity:.55}
}
/* Kept for the Prayer dot (white pulse on the coloured pill). */
@keyframes navLivePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.7);opacity:1}
  70%    {box-shadow:0 0 0 6px rgba(255,255,255,0);opacity:.6}
}
@media (prefers-reduced-motion:reduce){.nav-live-dot{animation:none}}
/* "Prayer Request" pill — a glossy pill whose colour smoothly cycles through
   the topic-tile palette (rose → amber → sky → violet → teal), with a soft
   pulsing glow so it draws the eye. The sheen gradient stays fixed; only the
   background COLOUR animates underneath it. */
.site-nav .nav-pray{display:inline-flex;align-items:center;gap:.5rem;color:#fff;
  background-color:var(--violet-600);
  background-image:linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.22));
  border:1px solid rgba(255,255,255,.18);
  padding:.5rem 1.05rem;border-radius:999px;font-weight:800;font-size:.82rem;letter-spacing:.05em;
  text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.4);
  animation:navPrayHue 12s linear infinite, navPrayPulse 1.9s ease-in-out infinite;
  transition:transform .14s}
.site-nav .nav-pray:hover,.site-nav .nav-pray.active{transform:translateY(-1px);color:#fff}
.nav-pray-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;
  animation:navLivePulse 1.6s ease-in-out infinite}
/* Each colour HOLDS for most of its slot, then snaps quickly to the next, so
   the changes read as distinct colours instead of muddy in-between blends. */
@keyframes navPrayHue{
  0%,16%   {background-color:#f43f5e}   /* rose   */
  20%,36%  {background-color:#f59e0b}   /* amber  */
  40%,56%  {background-color:#38bdf8}   /* sky    */
  60%,76%  {background-color:var(--violet-600)}   /* violet */
  80%,96%  {background-color:#12a594}   /* teal   */
  100%     {background-color:#f43f5e}
}
@keyframes navPrayPulse{
  0%,100%{box-shadow:0 6px 16px rgba(0,0,0,.4), 0 0 0 0 rgba(255,255,255,0), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 6px rgba(0,0,0,.24)}
  50%    {box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 20px 2px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 6px rgba(0,0,0,.24)}
}
@media (prefers-reduced-motion:reduce){
  .nav-pray{animation:none;background-color:var(--violet-600)}
  .nav-pray-dot{animation:none}
}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px}

/* ---------- Sections ---------- */
.section{padding:66px 0}

/* Page hero (interior pages) */
/* All interior heroes share the same top glow so their spacing/feel matches. */
.page-hero{position:relative;overflow:hidden;padding:70px 0 30px;
  background:radial-gradient(900px 400px at 80% -20%, rgb(from var(--violet-200) r g b / .16), transparent 60%),
             linear-gradient(180deg,var(--bg-2),var(--bg))}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2rem,4.5vw,3rem)}

/* Shared photographic-hero structure (used by the live + support heroes; the
   home hero reuses it via `.hero .hero-bg`). Constrained to the site's
   max-width and edge-masked so the photo never runs hard to the browser edge. */
.hero-bg{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;
  width:100%;max-width:calc(var(--maxw) + 90px);
  z-index:0;pointer-events:none;
  background-color:transparent;background-repeat:no-repeat;
  /* Dissolve the block's own left & right edges into the section dark. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
/* Structure only — each hero supplies its own gradients below, so the two can
   be tuned independently without duplicating the positioning. */
.hero-bg::after{content:"";position:absolute;inset:0}

/* Copy column + shared type inside the photographic heroes. */
.hero-copy{position:relative;z-index:2;max-width:min(34rem,36vw);text-align:left}
.hero-title-accent{color:var(--accent-2);
  text-shadow:0 0 46px rgb(from var(--violet-200) r g b / .45),0 2px 26px rgba(4,5,9,.66)}
.hero-lead{margin:1.5rem 0 0;max-width:44ch;font-size:1.06rem;line-height:1.7;
  color:#b6c0ce}

/* The persistent "Now Playing" bar. Hidden until window.UCNPlayer.load() is
   called (podcast episode playback) — the [hidden] attribute keeps it out of
   view until then. It's fixed to the bottom and outside <main>, so audio keeps
   playing across pjax navigation. */
.ucn-player{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;gap:.9rem;
  padding:.6rem clamp(12px,4vw,26px);background:rgba(18,22,30,.97);backdrop-filter:blur(12px) saturate(1.1);
  border-top:1px solid var(--line);box-shadow:0 -10px 34px rgba(0,0,0,.44)}
body.has-player{padding-bottom:76px}
.ucn-pp{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--violet-600);color:#fff;display:grid;place-items:center;transition:.15s}
.ucn-pp:hover{background:var(--violet-500)}
.ucn-pp svg{width:22px;height:22px}
.ucn-meta{min-width:0;flex:0 1 210px}
.ucn-title{font-family:var(--display);font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucn-show{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ucn-scrub{flex:1 1 auto;display:flex;align-items:center;gap:.6rem;min-width:110px}
.ucn-time{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.ucn-range{flex:1 1 auto;accent-color:var(--accent);height:4px;cursor:pointer}
.ucn-speed{flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid var(--line);
  color:var(--muted);border-radius:8px;padding:.15rem .5rem;font-size:.82rem;font-weight:600;
  cursor:pointer;min-width:3.2ch;text-align:center;transition:color .15s,border-color .15s}
.ucn-speed:hover{color:var(--text);border-color:rgba(255,255,255,.24)}
.ucn-close{flex:0 0 auto;background:none;border:0;color:var(--muted);font-size:1.6rem;line-height:1;cursor:pointer;padding:.1rem .4rem}
.ucn-close:hover{color:var(--text)}
@media (max-width:600px){.ucn-meta{flex-basis:120px}.ucn-time{display:none}}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),#0e1219);padding:3.6rem 0 1.7rem;margin-top:3rem}
.footer-inner{display:grid;grid-template-columns:1.7fr 1fr 1.15fr 1fr;gap:2.4rem}
.footer-brandcol{max-width:310px}
.footer-brand{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.9rem;
  font-family:var(--display);font-weight:700;font-size:1rem}
.footer-tag{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0 0 1.1rem;max-width:280px}
/* Social icons (placeholders until the accounts exist). */
.footer-social{display:flex;gap:.6rem}
.fs-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);
  transition:color .15s,border-color .15s,background .15s}
.fs-ico:hover{color:var(--accent-2);border-color:rgb(from var(--violet-200) r g b / .5);background:rgb(from var(--violet-200) r g b / .08)}
.fs-ico svg{width:17px;height:17px}
.footer-col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);
  margin:.2rem 0 1.05rem;font-weight:700}
.footer-col a{display:block;color:var(--text);opacity:.82;font-size:.92rem;margin-bottom:.62rem;transition:.15s}
.footer-col a:hover{opacity:1;color:var(--accent-2)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem 1.4rem;
  border-top:1px solid var(--line);margin-top:2.8rem;padding-top:1.5rem}
.footer-bottom p{color:var(--muted);font-size:.84rem;margin:0}
.footer-legal-links{display:flex;gap:1.3rem}
.footer-legal-links a{color:var(--muted);font-size:.84rem;transition:.15s}
.footer-legal-links a:hover{color:var(--accent-2)}

/* ---------- Responsive ---------- */
/* The full menu (6 links + two pills) needs more room than the old 3-item nav,
   so the hamburger takes over below 1120px rather than 720px. */
@media (max-width:1240px){
  .site-nav{gap:1.1rem}
  .site-nav a{font-size:.9rem}
}
@media (max-width:1280px){
  .nav-toggle{display:flex}
  .site-nav{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--bg-2);border-bottom:1px solid var(--line);padding:1rem 22px;gap:.4rem;
    transform:translateY(-120%);opacity:0;visibility:hidden;pointer-events:none;box-shadow:var(--shadow);
    transition:transform .25s ease,opacity .25s ease,visibility 0s .25s}
  body.nav-open .site-nav{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;
    transition:transform .25s ease,opacity .25s ease,visibility 0s}
  .site-nav a{padding:.7rem 0;font-size:.95rem}
  .site-nav .nav-live,.site-nav .nav-pray{align-self:flex-start;padding:.5rem 1.05rem}
  .site-nav .nav-cta{text-align:center;margin-top:.4rem}
}
@media (max-width:860px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-brandcol{grid-column:1/-1;max-width:none}
}
@media (max-width:720px){
  /* Keep the brand on one line on phones — shrink it a touch and don't wrap. */
  .brand-text{font-size:.9rem;white-space:nowrap}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-bottom{justify-content:center;text-align:center}
}
/* Very narrow phones need a bit smaller still to keep the brand on one line. */
@media (max-width:390px){
  .brand-text{font-size:.8rem}
  .brand{gap:.45rem}
}