/*
Theme Name: TRILL FM Radio
Theme URI: https://trillfm.com
Author: TRILL FM
Description: A clean, urban WordPress theme for TRILL FM — hip-hop, R&B, Louisiana/Texas culture, entertainment news and live radio.
Version: 2.0.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: trillfm
*/

:root {
  --tf-red: #f20d18;
  --tf-red-dark: #a90008;
  --tf-gold: #f5b800;
  --tf-white: #f7f7f7;
  --tf-black: #050505;
  --tf-panel: #101010;
  --tf-panel-2: #171717;
  --tf-muted: #aaa;
  --tf-line: rgba(255,255,255,.12);
  --tf-radius: 18px;
  --tf-shadow: 0 18px 60px rgba(0,0,0,.38);
  --tf-max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--tf-white);
  background: var(--tf-black);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--tf-gold); }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; }

.tf-container { width: min(calc(100% - 32px), var(--tf-max)); margin: 0 auto; }
.tf-kicker {
  color: var(--tf-gold);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tf-section { padding: 72px 0; }
.tf-section--tight { padding: 48px 0; }
.tf-section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.tf-section-head h2 { margin: 6px 0 0; font-size: clamp(1.75rem, 4vw, 3rem); line-height: .98; letter-spacing: -.045em; }
.tf-section-head p { margin: 0; max-width: 560px; color: #b9b9b9; }
.tf-more { font-size: .86rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }

/* header */
.tf-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(5,5,5,.92);
  backdrop-filter: blur(16px);
}
.tf-header-inner { min-height: 86px; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 24px; }
.tf-brand img { width: 220px; max-height: 86px; object-fit: contain; object-position: left center; }
.tf-brand-text { font-size: 1.35rem; font-weight: 950; letter-spacing: -.04em; }
.tf-nav ul { list-style: none; display: flex; gap: 24px; align-items: center; justify-content: center; margin: 0; padding: 0; }
.tf-nav a { font-size: .82rem; font-weight: 850; letter-spacing: .065em; text-transform: uppercase; }
.tf-listen-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--tf-red); color: white; font-weight: 950; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 32px rgba(242,13,24,.25);
}
.tf-listen-btn:before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: white; box-shadow: 0 0 0 6px rgba(255,255,255,.12); }
.tf-listen-btn:hover { color: #fff; background: #ff2630; }
.tf-menu-toggle { display: none; border: 0; background: transparent; color: #fff; width: 44px; height: 44px; font-size: 1.4rem; }

/* breaking/live bar */
.tf-livebar { border-bottom: 1px solid var(--tf-line); background: #0a0a0a; }
.tf-livebar-inner { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }
.tf-live-label { display: inline-flex; align-items: center; gap: 9px; font-size: .73rem; font-weight: 950; text-transform: uppercase; letter-spacing: .1em; }
.tf-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--tf-red); box-shadow: 0 0 0 0 rgba(242,13,24,.8); animation: tfPulse 1.8s infinite; }
@keyframes tfPulse { 0%{box-shadow:0 0 0 0 rgba(242,13,24,.7)} 70%{box-shadow:0 0 0 9px rgba(242,13,24,0)} 100%{box-shadow:0 0 0 0 rgba(242,13,24,0)} }
.tf-live-copy { color: #cfcfcf; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-radio-widget, .tf-radio-widget-inner { width:100%; min-width:0; }
.tf-radio-widget iframe { display:block; width:100% !important; max-width:100% !important; border:0; }
.tf-radio-widget { display: flex; align-items: center; justify-content: flex-end; min-width: 180px; }

/* hero */
.tf-hero { position: relative; overflow: hidden; min-height: 610px; display: flex; align-items: center; border-bottom: 1px solid var(--tf-line); }
.tf-hero:before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 22%, rgba(242,13,24,.30), transparent 30%),
    radial-gradient(circle at 66% 55%, rgba(245,184,0,.12), transparent 26%),
    linear-gradient(115deg, #070707 0%, #090909 48%, #160204 100%);
}
.tf-hero:after {
  content: "TRILL"; position: absolute; right: -2vw; bottom: -9vw; font-weight: 1000; font-size: min(30vw, 430px); line-height: .7; letter-spacing: -.08em; color: rgba(255,255,255,.025); pointer-events: none;
}
.tf-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 58px; padding: 74px 0; }
.tf-hero-copy h1 { margin: 12px 0 20px; font-size: clamp(3.1rem, 7vw, 6.9rem); line-height: .82; letter-spacing: -.07em; text-transform: uppercase; font-weight: 1000; }
.tf-hero-copy h1 span { display: block; color: var(--tf-red); text-shadow: 0 0 30px rgba(242,13,24,.18); }
.tf-hero-copy p { max-width: 680px; margin: 0 0 28px; color: #d3d3d3; font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.65; }
.tf-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px; font-size: .82rem; font-weight: 950; text-transform: uppercase; letter-spacing: .06em; border: 1px solid rgba(255,255,255,.18); }
.tf-btn--primary { background: var(--tf-red); border-color: var(--tf-red); color: #fff; }
.tf-btn--secondary { background: rgba(255,255,255,.05); color: #fff; }
.tf-btn:hover { color: #fff; transform: translateY(-1px); }
.tf-hero-card { position: relative; border-radius: 30px; padding: 30px; background: linear-gradient(145deg, #111, #090909); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--tf-shadow); overflow: hidden; }
.tf-hero-card:before { content:""; position:absolute; inset:-35% 0 auto 30%; height:60%; background:radial-gradient(circle, rgba(242,13,24,.3), transparent 62%); }
.tf-hero-logo { position: relative; width: min(100%, 480px); margin: 0 auto; filter: drop-shadow(0 22px 28px rgba(0,0,0,.48)); }
.tf-market-pills { position: relative; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
.tf-market-pill { padding: 8px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.035); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; color: #ddd; }

/* cards */
.tf-grid { display: grid; gap: 22px; }
.tf-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tf-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.tf-story { background: var(--tf-panel); border: 1px solid rgba(255,255,255,.08); border-radius: var(--tf-radius); overflow: hidden; transition: transform .18s ease, border-color .18s ease; }
.tf-story:hover { transform: translateY(-4px); border-color: rgba(245,184,0,.32); }
.tf-story-media { display:block; position: relative; aspect-ratio: 16/10; overflow:hidden; background: linear-gradient(135deg, #220003, #121212 58%, #2d0900); }
.tf-story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tf-story:hover .tf-story-media img { transform: scale(1.035); }
.tf-story-fallback { width:100%; height:100%; display:flex; align-items:end; padding:22px; background:
  radial-gradient(circle at 75% 22%, rgba(245,184,0,.24), transparent 25%),
  radial-gradient(circle at 22% 72%, rgba(242,13,24,.36), transparent 32%),
  linear-gradient(135deg,#080808,#151515); }
.tf-story-fallback span { font-size: clamp(1.5rem,3vw,3.1rem); font-weight:1000; letter-spacing:-.06em; text-transform:uppercase; opacity:.88; }
.tf-story-tag { position:absolute; left:14px; top:14px; padding:7px 9px; border-radius:999px; background:rgba(5,5,5,.86); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); font-size:.66rem; font-weight:950; text-transform:uppercase; letter-spacing:.08em; }
.tf-story-body { padding: 19px 19px 21px; }
.tf-story-body h3 { margin: 0 0 9px; font-size: 1.15rem; line-height: 1.12; letter-spacing: -.025em; }
.tf-story-body p { color:#aaa; margin:0; font-size:.87rem; line-height:1.52; }
.tf-story-meta { display:flex; gap:10px; align-items:center; margin-top:14px; color:#777; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }

/* feature split */
.tf-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
.tf-feature { min-height: 500px; position: relative; border-radius: 24px; overflow: hidden; border:1px solid rgba(255,255,255,.1); background:#111; }
.tf-feature-media { position:absolute; inset:0; }
.tf-feature-media img { width:100%; height:100%; object-fit:cover; }
.tf-feature-media:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%,rgba(5,5,5,.94) 92%); }
.tf-feature-content { position:absolute; left:0; right:0; bottom:0; padding:34px; z-index:2; }
.tf-feature-content h3 { margin:9px 0 12px; font-size:clamp(1.8rem,4vw,3.35rem); line-height:.96; letter-spacing:-.05em; }
.tf-stack { display:grid; gap:14px; }
.tf-mini-story { display:grid; grid-template-columns:120px 1fr; gap:15px; align-items:center; min-height:112px; padding:12px; background:#101010; border:1px solid rgba(255,255,255,.08); border-radius:16px; }
.tf-mini-thumb { aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#2c0003,#151515); }
.tf-mini-thumb img { width:100%; height:100%; object-fit:cover; }
.tf-mini-story h4 { margin:0 0 7px; line-height:1.12; font-size:1rem; }
.tf-mini-story .tf-story-meta { margin-top:0; }

/* south/local band */
.tf-south { position: relative; overflow:hidden; background: linear-gradient(135deg,#180002,#070707 58%,#1d1000); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.tf-south:before { content:"THE SOUTH"; position:absolute; right:-2%; top:50%; transform:translateY(-50%); font-size:min(16vw,230px); line-height:1; font-weight:1000; color:rgba(255,255,255,.028); letter-spacing:-.08em; }
.tf-market-grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tf-market { min-height:150px; display:flex; flex-direction:column; justify-content:end; padding:18px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.035); }
.tf-market b { font-size:1.35rem; letter-spacing:-.04em; }
.tf-market span { margin-top:5px; color:#aaa; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }

/* newsletter / CTA */
.tf-cta { display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px; padding:34px; border-radius:24px; background:linear-gradient(135deg,var(--tf-red),#8f0008); border:1px solid rgba(255,255,255,.18); box-shadow:0 20px 70px rgba(242,13,24,.18); }
.tf-cta h2 { margin:0 0 8px; font-size:clamp(1.8rem,4vw,3rem); line-height:1; letter-spacing:-.045em; }
.tf-cta p { margin:0; color:rgba(255,255,255,.8); }
.tf-cta .tf-btn { background:#fff; color:#111; border-color:#fff; }
.tf-cta .tf-btn:hover { color:#111; }

/* archive/single */
.tf-page-hero { padding:72px 0 38px; border-bottom:1px solid var(--tf-line); background:linear-gradient(180deg,#0e0e0e,#060606); }
.tf-page-hero h1 { margin:7px 0 0; font-size:clamp(2.5rem,7vw,5rem); line-height:.9; letter-spacing:-.06em; text-transform:uppercase; }
.tf-content-wrap { display:grid; grid-template-columns:minmax(0,780px) 1fr; gap:54px; padding:54px 0 84px; }
.tf-article { font-size:1.05rem; line-height:1.75; color:#dedede; }
.tf-article h1,.tf-article h2,.tf-article h3 { line-height:1.05; letter-spacing:-.035em; color:#fff; }
.tf-article a { color:var(--tf-gold); text-decoration:underline; text-underline-offset:3px; }
.tf-entry-header h1 { margin:10px 0 18px; font-size:clamp(2.45rem,6vw,5.2rem); line-height:.92; letter-spacing:-.055em; }
.tf-entry-meta { color:#888; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.tf-entry-image { margin:30px 0; border-radius:22px; overflow:hidden; }
.tf-sidebar { position:sticky; top:128px; align-self:start; }
.tf-sidebar-box { padding:22px; background:#0e0e0e; border:1px solid rgba(255,255,255,.09); border-radius:18px; margin-bottom:16px; }
.tf-sidebar-box h3 { margin:0 0 14px; }

/* footer */
.tf-footer { border-top:1px solid var(--tf-line); background:#030303; }
.tf-footer-top { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:48px; padding:58px 0 36px; }
.tf-footer-logo img { width:270px; }
.tf-footer-copy { color:#8f8f8f; max-width:520px; line-height:1.6; font-size:.9rem; }
.tf-footer h4 { margin:0 0 14px; font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; color:var(--tf-gold); }
.tf-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.tf-footer li,.tf-footer a { color:#bbb; font-size:.9rem; }
.tf-footer-bottom { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:18px 0 26px; border-top:1px solid rgba(255,255,255,.07); color:#666; font-size:.75rem; }
.tf-socials { display:flex; gap:10px; flex-wrap:wrap; }
.tf-social { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }

/* WordPress */
.alignwide { margin-left:calc(50% - 48vw); width:96vw; max-width:var(--tf-max); }
.alignfull { margin-left:calc(50% - 50vw); width:100vw; max-width:100vw; }
.navigation.pagination { margin-top:30px; }
.nav-links { display:flex; gap:8px; flex-wrap:wrap; }
.page-numbers { display:inline-flex; min-width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:#111; }
.page-numbers.current { background:var(--tf-red); border-color:var(--tf-red); }
.screen-reader-text { position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

@media (max-width: 980px) {
  .tf-header-inner { grid-template-columns: 180px 1fr auto; }
  .tf-brand img { width:180px; }
  .tf-nav { display:none; position:absolute; left:0; right:0; top:86px; background:#070707; border-bottom:1px solid rgba(255,255,255,.1); padding:18px 16px 22px; }
  .tf-nav.is-open { display:block; }
  .tf-nav ul { flex-direction:column; align-items:flex-start; gap:15px; }
  .tf-menu-toggle { display:block; }
  .tf-header-actions { display:flex; align-items:center; gap:6px; }
  .tf-hero-inner { grid-template-columns:1fr; gap:34px; }
  .tf-hero { min-height:auto; }
  .tf-hero-card { max-width:620px; }
  .tf-grid--4 { grid-template-columns:repeat(2,1fr); }
  .tf-grid--3 { grid-template-columns:repeat(2,1fr); }
  .tf-split { grid-template-columns:1fr; }
  .tf-market-grid { grid-template-columns:repeat(2,1fr); }
  .tf-footer-top { grid-template-columns:1fr 1fr; }
  .tf-footer-top > :first-child { grid-column:1/-1; }
  .tf-content-wrap { grid-template-columns:1fr; }
  .tf-sidebar { position:static; }
}

@media (max-width: 680px) {
  .tf-container { width:min(calc(100% - 22px), var(--tf-max)); }
  .tf-header-inner { min-height:76px; grid-template-columns:145px 1fr auto; gap:10px; }
  .tf-brand img { width:145px; max-height:72px; }
  .tf-nav { top:76px; }
  .tf-listen-btn { min-height:40px; padding:0 12px; font-size:.7rem; }
  .tf-listen-btn:before { width:7px; height:7px; }
  .tf-livebar-inner {
    min-height:0;
    grid-template-columns:1fr;
    align-items:stretch;
    gap:8px;
    padding:10px 0 12px;
  }
  .tf-live-label { justify-content:flex-start; }
  .tf-live-copy { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35; }
  .tf-radio-widget { display:block; width:100%; min-width:0; overflow:hidden; }
  .tf-radio-widget-inner { width:100%; }
  .tf-radio-widget iframe { width:100% !important; max-width:100% !important; min-height:60px; }
  .tf-hero-inner { padding:54px 0; }
  .tf-hero-copy h1 { font-size:clamp(3.15rem,18vw,5.6rem); }
  .tf-hero-card { padding:20px; border-radius:22px; }
  .tf-section { padding:52px 0; }
  .tf-section-head { display:block; }
  .tf-section-head p,.tf-section-head .tf-more { margin-top:12px; }
  .tf-grid--4,.tf-grid--3 { grid-template-columns:1fr; }
  .tf-market-grid { grid-template-columns:1fr 1fr; }
  .tf-market { min-height:118px; }
  .tf-feature { min-height:420px; }
  .tf-feature-content { padding:24px; }
  .tf-mini-story { grid-template-columns:92px 1fr; }
  .tf-cta { grid-template-columns:1fr; padding:26px; }
  .tf-footer-top { grid-template-columns:1fr; gap:28px; }
  .tf-footer-top > :first-child { grid-column:auto; }
  .tf-footer-bottom { align-items:flex-start; flex-direction:column; }
}