/*
Theme Name: World News Radio
Theme URI: https://aiwnn.com/
Author: AIWNN
Author URI: https://aiwnn.com/
Description: A modern, responsive WordPress theme for World News Radio — a 24/7 AI-powered news radio station. Includes a public article submission form, an editorial approval workflow with timed publishing, a dedicated approved-articles RSS feed, and a contact form, both with email notifications.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: world-news-radio
Tags: news, blog, radio, custom-colors, custom-menu, featured-images, full-width-template, threaded-comments
*/

/* ==========================================================================
   1. Custom properties / theme tokens
   ========================================================================== */
:root{
  --wnr-bg: #0b0f14;
  --wnr-bg-alt: #10161d;
  --wnr-surface: #161d26;
  --wnr-surface-2: #1d2630;
  --wnr-border: #263241;
  --wnr-text: #e8edf3;
  --wnr-text-dim: #9fb0c0;
  --wnr-text-faint: #6c7d8e;
  --wnr-accent: #38bdf8;
  --wnr-accent-2: #60a5fa;
  --wnr-accent-grad: linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #6366f1 100%);
  --wnr-live: #30d158;
  --wnr-radius: 14px;
  --wnr-radius-sm: 8px;
  --wnr-shadow: 0 10px 30px rgba(0,0,0,.35);
  --wnr-maxw: 1200px;
  --wnr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wnr-font-display: "Space Grotesk", var(--wnr-font);
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--wnr-bg);
  color: var(--wnr-text);
  font-family: var(--wnr-font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--wnr-accent-2); text-decoration:none; transition: color .15s ease; }
a:hover{ color: var(--wnr-accent); }
h1,h2,h3,h4,h5,h6{
  font-family: var(--wnr-font-display);
  line-height:1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}
p{ margin:0 0 1.1em; color: var(--wnr-text-dim); }
ul{ padding-left: 1.2em; }
button, input, textarea, select{ font-family: inherit; font-size: 1rem; }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.wnr-container{ max-width: var(--wnr-maxw); margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   3. Header
   ========================================================================== */
.wnr-site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(11,15,20,.85);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--wnr-border);
}
.wnr-header-inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.wnr-logo{ display:flex; align-items:center; gap:10px; font-family: var(--wnr-font-display); }
.wnr-logo img{ max-height: 40px; width:auto; }
.wnr-logo-text{ font-size: 1.3rem; font-weight:800; color:var(--wnr-text); letter-spacing:-.02em; }
.wnr-logo-text span{
  background: var(--wnr-accent-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wnr-live-pill{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--wnr-surface); border:1px solid var(--wnr-border);
  padding: 5px 10px 5px 8px; border-radius: 999px;
  font-size: .72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--wnr-text-dim); margin-left: 10px;
}
.wnr-live-dot{
  width:7px; height:7px; border-radius:50%; background: var(--wnr-live);
  box-shadow: 0 0 0 0 rgba(48,209,88,.6);
  animation: wnr-pulse 1.8s infinite;
}
@keyframes wnr-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(48,209,88,.55); }
  70%{ box-shadow: 0 0 0 8px rgba(48,209,88,0); }
  100%{ box-shadow: 0 0 0 0 rgba(48,209,88,0); }
}
.wnr-primary-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.wnr-primary-nav a{
  color: var(--wnr-text-dim); font-weight:600; font-size:.95rem;
}
.wnr-primary-nav a:hover, .wnr-primary-nav .current-menu-item > a{ color: var(--wnr-text); }
.wnr-header-cta{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--wnr-accent-grad); color:#ffffff !important;
  font-weight:700; font-size:.9rem; padding:10px 18px; border-radius: 999px;
}
.wnr-header-cta:hover{ filter:brightness(1.08); }
.wnr-menu-toggle{
  display:none; background:none; border:1px solid var(--wnr-border); color:var(--wnr-text);
  border-radius: 8px; padding: 8px 10px; cursor:pointer;
}

/* ==========================================================================
   4. Hero / player
   ========================================================================== */
.wnr-hero{
  position:relative; padding: 64px 0 56px; overflow:hidden;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(700px 380px at 100% 0%, rgba(99,102,241,.16), transparent 60%),
    linear-gradient(180deg, rgba(11,15,20,.55) 0%, rgba(11,15,20,.92) 85%),
    url('assets/img/hero-bg.png') center top / cover no-repeat,
    var(--wnr-bg-alt);
  border-bottom: 1px solid var(--wnr-border);
}
.wnr-hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; }
.wnr-eyebrow{
  display:inline-flex; align-items:center; gap:8px; color: var(--wnr-accent-2);
  font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px;
}
.wnr-hero h1{ font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom:.4em; }
.wnr-hero-lead{ font-size:1.08rem; max-width:52ch; }
.wnr-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 22px; }
.wnr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 24px; border-radius: 999px; font-weight:700; font-size:.95rem;
  border: 1px solid transparent; cursor:pointer; transition: transform .12s ease, filter .12s ease;
}
.wnr-btn:hover{ transform: translateY(-1px); }
.wnr-btn-primary{ background: var(--wnr-accent-grad); color:#ffffff !important; }
.wnr-btn-primary:hover{ filter:brightness(1.07); }
.wnr-btn-ghost{ background: transparent; color:var(--wnr-text) !important; border-color: var(--wnr-border); }
.wnr-btn-ghost:hover{ border-color: var(--wnr-text-faint); }
.wnr-btn-block{ width:100%; }

.wnr-player-card{
  background: var(--wnr-surface); border:none;
  border-radius: var(--wnr-radius); padding: 18px; box-shadow: var(--wnr-shadow);
}
.wnr-player-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.wnr-player-card-head strong{ font-family: var(--wnr-font-display); }
/* The provider's embed script manages its own iframe sizing (it reveals
   and resizes the iframe once the player has loaded), so this wrapper
   must stay flexible-height — no fixed aspect-ratio, or the player gets
   clipped and shows its own internal scrollbar. No border/background/
   radius of our own here either — the embed renders its own frame, and
   adding one on top of it just produces a mismatched double edge. */
.wnr-player-frame-wrap{ min-height: 90px; }
.wnr-player-frame-wrap iframe{ width:100%; border:0; display:block; }
.wnr-player-meta{ display:flex; justify-content:space-between; margin-top:12px; font-size:.82rem; color: var(--wnr-text-faint); }
.wnr-apps{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.wnr-apps img{ height:36px; width:auto; border-radius:6px; }

/* ==========================================================================
   5. Section headings / layout helpers
   ========================================================================== */
.wnr-section{ padding: 64px 0; }
.wnr-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 28px; flex-wrap:wrap; }
.wnr-section-head h2{ font-size: clamp(1.5rem, 2.4vw, 2rem); margin:0; }
.wnr-section-sub{ color: var(--wnr-text-faint); margin-top:6px; }
.wnr-kicker{
  text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; font-weight:700;
  color: var(--wnr-accent); margin-bottom:8px; display:block;
}

/* ==========================================================================
   6. Article cards / grid
   ========================================================================== */
.wnr-article-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wnr-article-card{
  background: var(--wnr-surface); border:1px solid var(--wnr-border); border-radius: var(--wnr-radius);
  padding: 22px; display:flex; flex-direction:column; gap:12px; transition: border-color .15s ease, transform .15s ease;
}
.wnr-article-card:hover{ border-color: var(--wnr-text-faint); transform: translateY(-2px); }
.wnr-article-card .wnr-badge-row{ display:flex; gap:8px; align-items:center; }
.wnr-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; padding: 4px 9px; border-radius: 999px;
}
.wnr-badge-approved{ background: rgba(48,209,88,.12); color: var(--wnr-live); border:1px solid rgba(48,209,88,.3); }
.wnr-badge-new{ background: rgba(96,165,250,.12); color: var(--wnr-accent-2); border:1px solid rgba(96,165,250,.3); }
.wnr-badge-expired{ background: rgba(255,255,255,.06); color: var(--wnr-text-faint); border:1px solid var(--wnr-border); }
.wnr-article-card h3{ font-size: 1.15rem; margin:0; }
.wnr-article-card h3 a{ color: var(--wnr-text); }
.wnr-article-card h3 a:hover{ color: var(--wnr-accent-2); }
.wnr-article-excerpt{ font-size:.92rem; margin:0; }
.wnr-article-meta{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--wnr-text-faint); margin-top:auto; padding-top:10px; border-top:1px dashed var(--wnr-border); }
.wnr-empty-state{
  border:1px dashed var(--wnr-border); border-radius: var(--wnr-radius); padding: 48px 24px;
  text-align:center; color: var(--wnr-text-faint);
}

/* ==========================================================================
   7. Forms (submission + contact)
   ========================================================================== */
.wnr-form-wrap{
  background: var(--wnr-surface); border:1px solid var(--wnr-border); border-radius: var(--wnr-radius);
  padding: clamp(20px, 4vw, 40px); max-width: 760px; margin: 0 auto; box-shadow: var(--wnr-shadow);
}
.wnr-form-wrap.wnr-form-narrow{ max-width: 620px; }
.wnr-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wnr-field{ margin-bottom: 18px; }
.wnr-field label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; color: var(--wnr-text); }
.wnr-field .req{ color: var(--wnr-accent); }
.wnr-field input[type=text], .wnr-field input[type=email], .wnr-field input[type=url], .wnr-field textarea, .wnr-field select{
  width:100%; background: var(--wnr-bg-alt); border:1px solid var(--wnr-border); color: var(--wnr-text);
  border-radius: var(--wnr-radius-sm); padding: 12px 14px; transition: border-color .15s ease;
}
.wnr-field input:focus, .wnr-field textarea:focus, .wnr-field select:focus{
  outline:none; border-color: var(--wnr-accent-2);
}
.wnr-field textarea{ resize: vertical; min-height: 160px; }
.wnr-field-hint{ font-size:.78rem; color: var(--wnr-text-faint); margin-top:5px; }
.wnr-hp-field{ position:absolute !important; left:-9999px !important; top:-9999px !important; }
.wnr-form-notice{ border-radius: var(--wnr-radius-sm); padding: 14px 16px; margin-bottom: 20px; font-size:.92rem; }
.wnr-form-notice.success{ background: rgba(48,209,88,.1); border:1px solid rgba(48,209,88,.3); color:#9af0b4; }
.wnr-form-notice.error{ background: rgba(255,59,48,.1); border:1px solid rgba(255,59,48,.35); color:#ffb3ae; }
.wnr-form-note{ font-size:.82rem; color: var(--wnr-text-faint); margin-top: 16px; }

/* ==========================================================================
   8. Single article / content
   ========================================================================== */
.wnr-single-article{ max-width: 820px; margin: 0 auto; }
.wnr-single-article .wnr-article-meta{ border:none; padding:0; margin: 10px 0 26px; }
.wnr-article-content{ font-size: 1.05rem; color: var(--wnr-text); }
.wnr-article-content p{ color: var(--wnr-text); }
.wnr-expiry-note{
  margin-top: 36px; padding: 14px 16px; border:1px dashed var(--wnr-border);
  border-radius: var(--wnr-radius-sm); font-size: .85rem; color: var(--wnr-text-faint);
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.wnr-site-footer{ background: var(--wnr-bg-alt); border-top:1px solid var(--wnr-border); padding: 54px 0 28px; margin-top: 40px; }
.wnr-footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
.wnr-footer-col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color: var(--wnr-text-faint); margin-bottom: 14px; }
.wnr-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.wnr-footer-col a{ color: var(--wnr-text-dim); font-size:.92rem; }
.wnr-footer-col a:hover{ color: var(--wnr-text); }
.wnr-footer-brand p{ max-width: 34ch; font-size:.9rem; }
.wnr-footer-bottom{
  border-top:1px solid var(--wnr-border); padding-top: 20px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:.82rem; color: var(--wnr-text-faint);
}
.wnr-social{ display:flex; gap:12px; }
.wnr-social a{ color: var(--wnr-text-faint); }

/* ==========================================================================
   10. Misc / responsive
   ========================================================================== */
.wnr-page-header{ padding: 44px 0 10px; }
.wnr-page-header h1{ font-size: clamp(1.8rem, 3vw, 2.4rem); }
.alignwide{ max-width: 1000px; margin-left:auto; margin-right:auto; }
.alignfull{ max-width: none; }

@media (max-width: 900px){
  .wnr-hero-grid{ grid-template-columns: 1fr; }
  .wnr-article-grid{ grid-template-columns: repeat(2, 1fr); }
  .wnr-footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  /* Collapsed by default: an absolutely-positioned dropdown panel that
     drops down below the header, full-width, as a vertical list — not
     the horizontal flex row the nav uses at desktop widths. JS (see
     assets/js/navigation.js) toggles the .is-open class; this rule only
     controls layout, not visibility (visibility is handled below). */
  .wnr-primary-nav{
    display:block;
    position:absolute;
    top:100%; left:0; right:0;
    background: var(--wnr-bg-alt);
    border:1px solid var(--wnr-border);
    border-top:none;
    border-radius: 0 0 var(--wnr-radius) var(--wnr-radius);
    box-shadow: var(--wnr-shadow);
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition: max-height .2s ease, opacity .15s ease;
    z-index:99;
  }
  .wnr-primary-nav.is-open{
    max-height:70vh;
    overflow-y:auto;
    opacity:1;
    visibility:visible;
  }
  .wnr-primary-nav ul{
    display:flex; flex-direction:column; gap:0; padding: 8px 0;
  }
  .wnr-primary-nav li{ border-top:1px solid var(--wnr-border); }
  .wnr-primary-nav li:first-child{ border-top:none; }
  .wnr-primary-nav a{
    display:block; padding: 14px 24px;
  }
  .wnr-menu-toggle{ display:inline-flex; }
  .wnr-header-cta{ display:none; }
  .wnr-article-grid{ grid-template-columns: 1fr; }
  .wnr-form-grid{ grid-template-columns: 1fr; }
  .wnr-footer-grid{ grid-template-columns: 1fr; }
}