/*
Theme Name: RTRI MiniSite
Theme URI: https://www.radiotelevisionrevelationinternational.org
Author: JBBDubic
Author URI: https://www.radiotelevisionrevelationinternational.org
Description: Elegant native WordPress launch website for Radio Television Revelation International (RTRI), with compact live radio controls and one-line social links.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: rtri-minisite
*/

:root{
  --navy:#071a33;
  --navy-deep:#031120;
  --blue:#0b294e;
  --gold:#d6ad4f;
  --gold-soft:#efd386;
  --white:#fff;
  --muted:#c7d0dc;
  --line:rgba(214,173,79,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#06182e 0%,#0a2a50 54%,#06182e 100%);color:var(--white);font-family:Georgia,"Times New Roman",serif;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;height:auto}
.rtri-wrap{width:min(1180px,92%);margin:0 auto}

.site-header{position:sticky;top:0;z-index:50;background:rgba(3,17,32,.96);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.header-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img,.brand .custom-logo{width:58px;height:58px;object-fit:cover;border-radius:50%;border:1px solid rgba(214,173,79,.55);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.brand-text strong{display:block;font-family:Arial,Helvetica,sans-serif;font-size:1rem;line-height:1.15;color:#fff;font-weight:700}
.brand-text span{display:block;margin-top:4px;font-family:Arial,Helvetica,sans-serif;color:var(--gold-soft);font-size:.74rem;letter-spacing:.02em}

.header-radio{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:150px}
.radio-heading{display:flex;align-items:center;gap:7px;font-family:Arial,Helvetica,sans-serif;font-size:.74rem;color:#f6f8fb;text-transform:none;letter-spacing:.02em}
.live-dot{width:7px;height:7px;border-radius:50%;background:#e44747;box-shadow:0 0 0 3px rgba(228,71,71,.12)}
.radio-controls{display:flex;gap:6px}
.radio-controls button{border:1px solid rgba(255,255,255,.15);background:#0d2745;color:#fff;border-radius:999px;padding:5px 10px;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-size:.7rem;line-height:1;transition:.18s ease}
.radio-controls button:hover,.radio-controls button.is-playing{border-color:var(--gold);color:var(--gold-soft);background:#12345a}
.radio-controls button span{margin-left:3px}

.rtri-main{min-height:calc(100vh - 86px)}
.hero{padding:70px 0 58px;text-align:center}
.hero-inner{display:flex;flex-direction:column;align-items:center}

.rtri-notice{
  width:min(980px,94vw);
  margin:0 auto 34px;
  overflow:hidden;
  border-top:1px solid rgba(214,173,79,.48);
  border-bottom:1px solid rgba(214,173,79,.48);
  background:rgba(3,17,32,.52);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  white-space:nowrap;
}
.rtri-notice-track{
  display:inline-block;
  min-width:max-content;
  padding:11px 0;
  will-change:transform;
  animation:rtriTicker 42s linear infinite;
}
.rtri-notice-track span{
  display:inline-block;
  padding-left:100vw;
  color:var(--gold-soft);
  font-family:Arial,Helvetica,sans-serif;
  font-size:.78rem;
  letter-spacing:.025em;
}
@keyframes rtriTicker{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}
@media (prefers-reduced-motion:reduce){
  .rtri-notice{white-space:normal}
  .rtri-notice-track{display:block;animation:none;padding:10px 14px}
  .rtri-notice-track span{padding-left:0}
}
.logo-frame{position:relative;display:inline-block;padding:16px;border:1px solid rgba(214,173,79,.42);background:rgba(255,255,255,.025);box-shadow:0 28px 70px rgba(0,0,0,.28);border-radius:10px}
.logo-frame:before,.logo-frame:after{content:"";position:absolute;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.logo-frame:before{top:-10px}.logo-frame:after{bottom:-10px}
.hero-logo{display:block;width:min(430px,78vw);border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.32)}

.social-strip{margin-top:48px;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);padding:16px 20px}
.social-strip a{display:inline-flex;align-items:center;gap:9px;font-family:Arial,Helvetica,sans-serif;font-size:.78rem;color:#dce5ef;transition:.18s ease}
.social-strip a:hover{color:var(--gold-soft);transform:translateY(-1px)}
.social-strip svg{width:28px;height:28px;fill:currentColor;display:block;flex:0 0 auto}

.site-footer{background:#03101f;border-top:1px solid rgba(255,255,255,.07);padding:24px 0 28px;text-align:center;font-family:Arial,Helvetica,sans-serif}
.footer-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.footer-contact{font-size:.85rem;color:#f3f6fa}
.footer-contact:hover{color:var(--gold-soft)}
.copyright{font-size:.74rem;color:#93a4b7}

@media (max-width:760px){
  .header-inner{min-height:78px;gap:14px}
  .brand img,.brand .custom-logo{width:48px;height:48px}
  .brand-text strong{font-size:.82rem;max-width:245px}
  .brand-text span{font-size:.64rem}
  .header-radio{min-width:auto}
  .radio-heading{font-size:.68rem}
  .radio-controls button{padding:5px 8px;font-size:.66rem}
  .hero{padding-top:46px}
  .hero-logo{width:min(390px,82vw)}
  .social-strip{gap:18px;margin-top:40px}
}
@media (max-width:520px){
  .header-inner{align-items:center}
  .brand-text{display:none}
  .header-radio{margin-left:auto}
  .hero{padding:34px 0 42px}
  .logo-frame{padding:10px}
  .hero-logo{width:82vw}
  .social-strip{gap:14px 18px;padding:14px 8px}
  .social-strip a{font-size:.72rem}
  .social-strip svg{width:24px;height:24px}
}