/* ==========================================================================
   Spill the Tea (kimcooper.life) — VIRAL THEME (FULL REPLACE)
   - Fix clickability (filters/cards/links)
   - Trending cards: TikTok caption vibe (title + 1 line + dominant reaction pill)
   - View page spacing + reactions row styling
   ========================================================================== */

:root{
  --bg:#07070c;
  --bg2:#0b0712;

  --panel:rgba(18,12,28,.70);
  --panel2:rgba(18,12,28,.55);
  --stroke:rgba(255,255,255,.08);

  --text:#f3efff;
  --muted:rgba(243,239,255,.68);

  --pink:#ff3bd4;
  --pink2:#c400ff;

  --tea:#ffb020;     /* tea_confirmed */
  --receipt:#7bd0ff; /* receipts */
  --hot:#ff4d5a;     /* red_flag */

  --r:18px;
  --r2:26px;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow2: 0 10px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  letter-spacing:.1px;
  background:
    radial-gradient(1100px 520px at 14% 8%, rgba(255,59,212,.18), transparent 62%),
    radial-gradient(900px 480px at 86% 18%, rgba(196,0,255,.16), transparent 62%),
    radial-gradient(760px 520px at 50% 92%, rgba(123,208,255,.07), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{opacity:.97}

.container{
  width:min(1180px, calc(100% - 48px));
  margin:0 auto;
}

/* ==========================================================================
   CRITICAL: Fix “nothing is clickable”
   Overlays / pseudo elements should NEVER capture pointer events.
   ========================================================================== */
.hero::before,
.hero::after,
.hero-overlay,
.bg-overlay,
.page-glow,
.glow,
.overlay,
.page-bg::before,
.page-bg::after,
.header-glow,
.section-glow,
.backdrop{
  pointer-events:none !important;
}

/* Ensure interactive UI is above any glow layers */
.topbar{ position:sticky; top:0; z-index:2000; }
.filters{ position:relative; z-index:2100; }
.trending{ position:relative; z-index:200; }
.card, .card *{ pointer-events:auto; }
.filters, .filters *{ pointer-events:auto; }

/* If some wrapper is still eating clicks, this helps too */
main, .main, .content, .wrap, .container{
  position:relative;
  z-index:50;
}

/* ==========================================================================
   Top Bar
   ========================================================================== */
.topbar{
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(8,6,12,.78), rgba(8,6,12,.45));
  border-bottom:1px solid rgba(255,255,255,.06);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}
.brand small{
  display:block;
  margin-top:2px;
  font-weight:700;
  color:var(--muted);
}

.navlinks{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
}
.navlinks a{
  padding:10px 12px;
  border-radius:999px;
}
.navlinks a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-weight:950;
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  color:#170017;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(255,59,212,.18);
}

/* ==========================================================================
   Hero (shorter + text overlay friendly)
   ========================================================================== */
.hero{
  position:relative;
  margin:18px auto 14px;
  border-radius:var(--r2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--shadow);
  background: rgba(10,8,16,.55);
}

/* If you use <div class="hero-media"> with background-image, this will style it.
   If you use <img>, keep it inside hero and give it class hero-img */
.hero-media,
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.08);
  transform:scale(1.02);
}

/* darken so overlay text pops */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(850px 360px at 18% 35%, rgba(255,59,212,.12), transparent 62%),
    radial-gradient(720px 320px at 82% 25%, rgba(196,0,255,.10), transparent 62%),
    linear-gradient(135deg, rgba(0,0,0,.52), rgba(0,0,0,.18));
}

.hero-inner{
  position:relative;
  z-index:2;
  padding:22px 24px 18px;
  min-height: 210px; /* shorter */
  display:flex;
  align-items:flex-end;
}

.hero-copy{ max-width: 680px; }

.hero-kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(243,239,255,.82);
  font-weight:900;
  font-size:12px;
}

.hero h1{
  margin:12px 0 6px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: .96;
  letter-spacing:-.8px;
  font-weight: 950;
  text-shadow: 0 18px 40px rgba(0,0,0,.55);
}

.hero p{
  margin:0 0 12px;
  color: rgba(243,239,255,.78);
  font-weight: 700;
  max-width: 60ch;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  color:var(--text);
  font-weight:950;
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
}
.btn.primary{
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  color:#170017;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.hero-meta{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(243,239,255,.72);
  font-weight:800;
  font-size:13px;
}
.meta-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
}

/* ==========================================================================
   Kim’s Thoughts (single wide block; no extra pills/buttons)
   Uses DB content. Keep it “adult vibe”, not corporate.
   ========================================================================== */
.kim-thoughts{
  margin: 14px auto 18px;
  border-radius:var(--r2);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 240px at 15% 20%, rgba(255,59,212,.11), transparent 60%),
    radial-gradient(700px 240px at 85% 30%, rgba(196,0,255,.10), transparent 60%),
    rgba(10,8,16,.55);
  box-shadow:var(--shadow2);
  overflow:hidden;
}

.kim-thoughts-inner{ padding:16px 18px 16px; }

.kim-title-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.kim-title{
  margin:0;
  font-size: 26px;
  font-weight:950;
  letter-spacing:-.5px;
}

.kim-rule{
  font-size:12px;
  font-weight:950;
  color:rgba(243,239,255,.70);
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
  padding:8px 10px;
  border-radius:999px;
}

.kim-quote{
  position:relative;
  padding:14px 14px 12px;
  border-radius:16px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
}

.kim-quote:before{
  content:"“";
  position:absolute;
  left:10px;
  top:-14px;
  font-size:56px;
  font-weight:950;
  color:rgba(255,59,212,.40);
}

.kim-quote p{
  margin:0;
  font-size: 16px;
  line-height: 1.55;
  color:rgba(243,239,255,.86);
  font-weight: 700;
}

.kim-byline{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  color:rgba(243,239,255,.60);
  font-weight:850;
  font-size:12px;
}

/* your request: remove the 2 pills/buttons from Kim’s Thoughts */
.kim-thoughts .btn,
.kim-thoughts .hero-actions,
.kim-thoughts .thought-actions,
.kim-thoughts .actions,
.kim-thoughts .cta-row{
  display:none !important;
}

/* ==========================================================================
   Trending header + pills
   ========================================================================== */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin: 18px 0 10px;
}

.section-head h2{
  margin:0;
  font-size: 24px;
  font-weight:950;
  letter-spacing:-.4px;
}

.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.24);
  color:rgba(243,239,255,.78);
  font-weight:950;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
.pill:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.18);
  background:rgba(0,0,0,.32);
}
.pill.is-active{
  background: linear-gradient(135deg, rgba(255,59,212,.95), rgba(196,0,255,.85));
  color:#170017;
  border-color:rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(255,59,212,.16);
}

/* ==========================================================================
   Trending cards: TikTok caption style
   - Big title
   - 1-line snippet
   - ONLY dominant reaction pill
   ========================================================================== */
.trending{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-bottom: 26px;
}

.card{
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(10,8,16,.55);
  box-shadow: 0 14px 40px rgba(0,0,0,.40);
  overflow:hidden;
  position:relative;
}
.card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background: linear-gradient(90deg, var(--pink), var(--pink2));
  opacity:.9;
}

.card a.card-link{
  display:block;
  padding:14px 14px 12px;
}

.card .tagrow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
  color:rgba(243,239,255,.60);
  font-weight:900;
  font-size:12px;
}

.card .title{
  margin:0 0 8px;
  font-weight:950;
  letter-spacing:-.35px;
  line-height:1.06;
  font-size: 20px;
}

.card .snippet{
  margin:0;
  color:rgba(243,239,255,.72);
  font-weight:650;
  font-size: 13px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* dominant reaction pill */
.react-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  color: rgba(243,239,255,.85);
}
.react-pill.tea_confirmed{ border-color: rgba(255,176,32,.28); box-shadow: 0 0 0 1px rgba(255,176,32,.10) inset; }
.react-pill.receipts{ border-color: rgba(123,208,255,.28); box-shadow: 0 0 0 1px rgba(123,208,255,.10) inset; }
.react-pill.red_flag{ border-color: rgba(255,77,90,.28); box-shadow: 0 0 0 1px rgba(255,77,90,.10) inset; }

.react-pill .pct{ opacity:.95; }

/* ==========================================================================
   View page (view.php): fix spacing + make it feel intentional
   ========================================================================== */
.view-wrap{
  margin: 18px auto 32px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(10,8,16,.55);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.view-inner{
  padding: 18px 20px 20px;
}

.backrow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.backrow a{
  color:rgba(243,239,255,.75);
  font-weight:950;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.10);
}

.view-h1{
  margin: 6px 0 10px;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height:1.02;
  letter-spacing:-.8px;
  font-weight: 950;
}

.view-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color: rgba(243,239,255,.65);
  font-weight:850;
  font-size: 12px;
  margin-bottom: 14px;
}

.view-story{
  color: rgba(243,239,255,.82);
  font-weight:650;
  font-size: 16px;
  line-height: 1.65;
}
.view-story p{ margin: 0 0 14px; }
.view-story p:last-child{ margin-bottom:0; }

/* reactions row */
.react-row{
  margin-top: 16px;
  padding-top: 14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.react-row h3{
  margin:0 0 10px;
  font-size: 14px;
  color: rgba(243,239,255,.75);
  font-weight: 950;
  letter-spacing:.2px;
  text-transform: uppercase;
}
.react-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.react-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.24);
  color: rgba(243,239,255,.88);
  font-weight: 950;
  cursor:pointer;
}
.react-btn:hover{ transform: translateY(-1px); }
.react-btn:active{ transform: translateY(0); }
.react-btn.tea_confirmed{ border-color: rgba(255,176,32,.28); }
.react-btn.receipts{ border-color: rgba(123,208,255,.28); }
.react-btn.red_flag{ border-color: rgba(255,77,90,.28); }

/* comments */
.comments{
  margin-top: 18px;
  padding-top: 16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.comments h2{
  margin:0 0 10px;
  font-size: 22px;
  font-weight: 950;
}
.comment{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.comment .meta{
  color: rgba(243,239,255,.60);
  font-weight:850;
  font-size: 12px;
  display:flex;
  gap:10px;
  margin-bottom: 8px;
}
.comment .body{
  color: rgba(243,239,255,.85);
  font-weight:650;
  line-height: 1.45;
}

/* forms */
input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline:none;
}
textarea{ min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus{
  border-color: rgba(255,59,212,.35);
  box-shadow: 0 0 0 4px rgba(255,59,212,.10);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1120px){
  .trending{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .container{ width:min(1180px, calc(100% - 26px)); }
  .trending{ grid-template-columns: 1fr; }
  .hero-inner{ min-height: 200px; padding:18px 16px 16px; }
  .kim-title{ font-size:24px; }
}