/*
Theme Name: Blackout Wrestling 2.0
Theme URI: https://blackoutwrestling.com
Author: Blackout Wrestling
Description: Dark, high-impact wrestling news theme. Recent stories up top, a full multi-promotion Power Rankings row (five Power Fives + a Blackout Top 10), and the hero banner relocated to the bottom of the homepage. Rankings and banner are editable from the WordPress Customizer.
Version: 2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blackout2
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bw-bg:            #0a0a0b;
  --bw-bg-2:          #0f0f11;
  --bw-card:          #141416;
  --bw-card-2:        #1a1a1d;
  --bw-line:          rgba(255,255,255,.07);
  --bw-line-2:        rgba(255,255,255,.05);
  --bw-red:           #e1202b;
  --bw-red-hot:       #ff2f3a;
  --bw-red-deep:      #7c0f16;
  --bw-text:          #f4f4f5;
  --bw-text-dim:      #b6b6ba;
  --bw-text-dimmer:   #77777d;
  --bw-radius:        14px;
  --bw-radius-sm:     10px;
  --bw-max:           1280px;
  --bw-gap:           28px;
  --bw-display:       "Oswald", "Arial Narrow", sans-serif;
  --bw-body:          "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body.blackout2{
  margin:0;
  background:var(--bw-bg);
  color:var(--bw-text);
  font-family:var(--bw-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--bw-red-hot); outline-offset:3px; border-radius:3px; }
h1,h2,h3,h4{ font-family:var(--bw-display); font-weight:600; line-height:1.08; margin:0; }

.bw-wrap{ width:100%; max-width:var(--bw-max); margin:0 auto; padding:0 24px; }

/* ============================================================
   NAV
   ============================================================ */
.bw-nav{
  position:sticky; top:0; z-index:60;
  background:rgba(9,9,11,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bw-line);
}
.bw-nav-inner{
  display:flex; align-items:center; gap:24px;
  max-width:var(--bw-max); margin:0 auto; padding:12px 24px;
}
.bw-logo{ display:flex; align-items:center; flex:0 0 auto; }
.bw-logo img{ max-height:52px; width:auto; }
.bw-logo .bw-logo-fallback{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--bw-display); font-weight:700; letter-spacing:.02em;
  font-size:1.15rem; text-transform:uppercase;
}
.bw-logo .bw-logo-mark{
  display:inline-grid; place-items:center;
  width:46px; height:46px; border:2px solid var(--bw-red);
  color:#fff; font-style:italic; font-weight:700; font-size:1.25rem;
  border-radius:8px; background:linear-gradient(145deg,#1a1a1d,#0c0c0e);
}
.bw-nav-menu{ margin-left:auto; }
.bw-nav-menu ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:34px;
}
.bw-nav-menu a{
  font-family:var(--bw-display); font-weight:500;
  text-transform:uppercase; letter-spacing:.11em; font-size:.92rem;
  color:var(--bw-text-dim); padding:6px 0; position:relative;
  transition:color .18s ease;
}
.bw-nav-menu a:hover{ color:#fff; }
.bw-nav-menu li.current-menu-item > a,
.bw-nav-menu li.current_page_item > a{ color:#fff; }
.bw-nav-menu li.current-menu-item > a::after,
.bw-nav-menu li.current_page_item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--bw-red);
}
.bw-nav-toggle{
  display:none; margin-left:auto;
  background:transparent; border:1px solid var(--bw-line);
  color:#fff; width:44px; height:40px; border-radius:8px;
  font-size:1.4rem; cursor:pointer;
}

/* ============================================================
   SECTION HEADINGS  (icon + title + red underline)
   ============================================================ */
.bw-section{ padding:44px 0; }
.bw-section-head{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.bw-section-head .bw-ico{ color:var(--bw-red); display:inline-flex; }
.bw-section-head .bw-ico svg{ width:26px; height:26px; display:block; }
.bw-section-head h2{
  font-size:1.9rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
}
.bw-underline{
  height:2px; border-radius:2px; margin:14px 0 26px;
  background:linear-gradient(90deg,var(--bw-red) 0%, var(--bw-red) 22%, var(--bw-line) 22%);
}

/* ============================================================
   RECENT STORIES  (TOP)
   ============================================================ */
.bw-featured{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  background:var(--bw-card); border:1px solid var(--bw-line);
  border-radius:var(--bw-radius); overflow:hidden; margin-bottom:var(--bw-gap);
  transition:border-color .2s ease, transform .2s ease;
}
.bw-featured:hover{ border-color:rgba(225,32,43,.45); }
.bw-featured .bw-featured-media{ position:relative; min-height:340px; overflow:hidden; }
.bw-featured .bw-featured-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.bw-featured:hover .bw-featured-media img{ transform:scale(1.04); }
.bw-featured .bw-featured-body{
  padding:38px 40px; display:flex; flex-direction:column; justify-content:center; gap:16px;
}
.bw-featured .bw-featured-body h3{ font-size:2.05rem; font-weight:700; line-height:1.06; }
.bw-featured .bw-featured-body h3 a:hover{ color:var(--bw-red-hot); }
.bw-featured .bw-excerpt{ color:var(--bw-text-dim); font-size:1.02rem; }

.bw-eyebrow{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  font-family:var(--bw-display); text-transform:uppercase; letter-spacing:.14em;
  font-size:.74rem; font-weight:600; color:var(--bw-red);
}
.bw-eyebrow .dot{ width:6px; height:6px; background:var(--bw-red); border-radius:50%; }
.bw-meta{
  font-family:var(--bw-display); font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bw-text-dimmer);
}
.bw-readmore{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--bw-display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.82rem; font-weight:600; color:#fff; margin-top:4px;
}
.bw-readmore .arrow{ color:var(--bw-red); transition:transform .2s ease; }
.bw-readmore:hover .arrow{ transform:translateX(4px); }

.bw-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.bw-card{
  background:var(--bw-card); border:1px solid var(--bw-line);
  border-radius:var(--bw-radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease;
}
.bw-card:hover{ border-color:rgba(225,32,43,.45); transform:translateY(-3px); }
.bw-card .bw-card-media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.bw-card .bw-card-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.bw-card:hover .bw-card-media img{ transform:scale(1.05); }
.bw-card .bw-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.bw-card .bw-card-body h3{ font-size:1.16rem; font-weight:600; line-height:1.14; }
.bw-card .bw-card-body h3 a:hover{ color:var(--bw-red-hot); }
.bw-card .bw-card-foot{
  margin-top:auto; padding-top:6px;
  display:flex; align-items:center; justify-content:space-between;
}
.bw-card .bw-card-foot .arrow{ color:var(--bw-red); }
.bw-card:hover .bw-card-foot .arrow{ transform:translateX(3px); transition:transform .2s ease; }

/* image placeholder when no featured image */
.bw-noimg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(225,32,43,.22), transparent 55%),
    linear-gradient(160deg,#1c1c20,#0c0c0e);
  display:grid; place-items:center;
}
.bw-noimg span{
  font-family:var(--bw-display); font-weight:700; font-style:italic;
  letter-spacing:.06em; color:rgba(255,255,255,.14); font-size:2rem;
}

/* ============================================================
   POWER RANKINGS ROW
   ============================================================ */
.bw-rankings{ background:var(--bw-bg-2); border-top:1px solid var(--bw-line); border-bottom:1px solid var(--bw-line); }

.bw-pf-grid{
  display:grid; gap:20px; margin-bottom:26px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.bw-rank-card{
  background:var(--bw-card); border:1px solid var(--bw-line);
  border-radius:var(--bw-radius); padding:20px 22px 10px;
}
.bw-rank-head{ display:flex; align-items:center; gap:10px; }
.bw-rank-head .bw-ico{ color:var(--bw-red); display:inline-flex; }
.bw-rank-head .bw-ico svg{ width:20px; height:20px; }
.bw-rank-head h3{
  font-size:1.12rem; text-transform:uppercase; letter-spacing:.045em; font-weight:600;
}
.bw-rank-card .bw-underline{ margin:12px 0 6px; }

.bw-rank-list{ list-style:none; margin:0; padding:0; }
.bw-rank-list li{
  display:flex; align-items:center; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--bw-line-2);
}
.bw-rank-list li:last-child{ border-bottom:0; }
.bw-rank-num{
  font-family:var(--bw-display); font-weight:700; font-size:1.5rem;
  color:var(--bw-red); min-width:26px; text-align:left; line-height:1;
  font-variant-numeric:tabular-nums;
}
.bw-rank-div{ width:1px; align-self:stretch; background:var(--bw-line); min-height:22px; }
.bw-rank-name{
  font-family:var(--bw-display); font-weight:500; font-size:1.06rem;
  letter-spacing:.01em; color:#fff;
}
.bw-rank-list li.is-empty .bw-rank-name{ color:var(--bw-text-dimmer); font-weight:400; }

/* Blackout Top 10 — flagship block */
.bw-top10{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(225,32,43,.10), transparent 60%),
    var(--bw-card);
  border:1px solid rgba(225,32,43,.30);
  border-radius:var(--bw-radius); padding:26px 30px 18px;
  box-shadow:0 0 0 1px rgba(225,32,43,.05), 0 24px 60px -30px rgba(225,32,43,.35);
}
.bw-top10 .bw-rank-head h3{ font-size:1.5rem; letter-spacing:.05em; }
.bw-top10 .bw-rank-head .bw-ico svg{ width:26px; height:26px; }
.bw-top10 .bw-underline{ margin:14px 0 6px; }
.bw-top10 .bw-rank-list{
  display:grid; grid-template-columns:1fr 1fr; column-gap:44px;
}
.bw-top10 .bw-rank-num{ font-size:1.65rem; min-width:34px; }
.bw-top10 .bw-rank-name{ font-size:1.14rem; }

/* ============================================================
   BOTTOM BANNER
   ============================================================ */
.bw-bottom-banner{
  border-top:1px solid var(--bw-line);
  background:#000; position:relative;
}
.bw-bottom-banner img{ width:100%; height:auto; display:block; }
.bw-bottom-banner .bw-banner-fallback{
  min-height:300px; display:grid; place-items:center; text-align:center; padding:60px 24px;
  background:
    radial-gradient(90% 120% at 15% 30%, rgba(225,32,43,.28), transparent 55%),
    radial-gradient(80% 120% at 90% 70%, rgba(124,15,22,.5), transparent 60%),
    #0b0b0d;
}
.bw-bottom-banner .bw-banner-fallback h2{
  font-size:clamp(2.4rem,7vw,5rem); font-weight:700; font-style:italic;
  letter-spacing:.02em; text-transform:uppercase; color:#fff;
  text-shadow:0 6px 40px rgba(0,0,0,.6);
}
.bw-bottom-banner .bw-banner-fallback p{
  color:var(--bw-text-dim); font-family:var(--bw-display);
  letter-spacing:.14em; text-transform:uppercase; font-size:.85rem; margin-top:10px;
}

/* ============================================================
   POSTS / PAGES / ARCHIVES
   ============================================================ */
.bw-single{ padding:48px 0 60px; }
.bw-single .bw-post-hero{ margin:0 0 30px; border-radius:var(--bw-radius); overflow:hidden; border:1px solid var(--bw-line); }
.bw-single h1.bw-post-title{ font-size:clamp(2rem,4.5vw,3rem); font-weight:700; line-height:1.05; margin:14px 0 12px; }
.bw-article{ max-width:820px; margin:0 auto; }
.bw-article .bw-content{ font-size:1.08rem; color:#e7e7e9; }
.bw-article .bw-content p{ margin:0 0 1.3em; }
.bw-article .bw-content h2{ font-size:1.7rem; margin:1.6em 0 .5em; }
.bw-article .bw-content h3{ font-size:1.35rem; margin:1.4em 0 .5em; }
.bw-article .bw-content a{ color:var(--bw-red-hot); text-decoration:underline; text-underline-offset:3px; }
.bw-article .bw-content img{ border-radius:var(--bw-radius-sm); margin:1.4em 0; }
.bw-article .bw-content blockquote{
  border-left:3px solid var(--bw-red); margin:1.6em 0; padding:.2em 0 .2em 22px;
  color:var(--bw-text-dim); font-style:italic;
}
.bw-archive-head{ padding:44px 0 8px; }
.bw-archive-head h1{ font-size:2.4rem; text-transform:uppercase; letter-spacing:.03em; }
.bw-archive-head .bw-underline{ margin:16px 0 0; }

.bw-pagination{ padding:26px 0 60px; display:flex; justify-content:center; gap:10px; }
.bw-pagination .page-numbers{
  font-family:var(--bw-display); font-weight:600; padding:8px 14px;
  border:1px solid var(--bw-line); border-radius:8px; color:var(--bw-text-dim);
}
.bw-pagination .page-numbers.current{ background:var(--bw-red); color:#fff; border-color:var(--bw-red); }
.bw-pagination a.page-numbers:hover{ color:#fff; border-color:var(--bw-red); }

.bw-empty{ text-align:center; padding:80px 24px; }
.bw-empty h1{ font-size:2.2rem; margin-bottom:10px; }
.bw-empty p{ color:var(--bw-text-dim); }

/* ============================================================
   FOOTER
   ============================================================ */
.bw-footer{ border-top:1px solid var(--bw-line); background:var(--bw-bg); padding:30px 0; }
.bw-footer-inner{
  max-width:var(--bw-max); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.bw-footer .bw-copy{ color:var(--bw-text-dimmer); font-size:.9rem; }
.bw-footer .bw-foot-brand{
  font-family:var(--bw-display); font-weight:700; font-style:italic;
  text-transform:uppercase; letter-spacing:.04em; color:#fff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .bw-featured{ grid-template-columns:1fr; }
  .bw-featured .bw-featured-media{ min-height:220px; aspect-ratio:16/9; }
  .bw-featured .bw-featured-body{ padding:26px 24px; }
  .bw-featured .bw-featured-body h3{ font-size:1.6rem; }
  .bw-top10 .bw-rank-list{ grid-template-columns:1fr; column-gap:0; }
}
@media (max-width:780px){
  .bw-nav-menu{
    position:absolute; top:100%; left:0; right:0;
    background:var(--bw-bg-2); border-bottom:1px solid var(--bw-line);
    max-height:0; overflow:hidden; transition:max-height .3s ease; margin-left:0;
  }
  .bw-nav-menu.is-open{ max-height:520px; }
  .bw-nav-menu ul{ flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 16px; }
  .bw-nav-menu li{ width:100%; }
  .bw-nav-menu a{ display:block; padding:12px 0; width:100%; }
  .bw-nav-toggle{ display:inline-block; }
  .bw-section-head h2{ font-size:1.55rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}