/*
Theme Name: Blackout Wrestling
Theme URI: https://example.com/blackout-wrestling
Author: Built for Blackout Wrestling
Author URI: https://example.com
Description: Dark, crimson-accented theme for Arizona wrestling news. Recreates the Blackout Wrestling design with a dynamic homepage (latest stories + editable Power 5), a matching single-post layout, and a managed navigation menu. No plugins required.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blackout-wrestling
*/

/* ============================================================
   Tokens
   ============================================================ */
:root{
  --bg:#0a0708;
  --panel-top:#141011;
  --panel-bot:#0f0b0c;
  --panel-row:#100c0d;
  --line:rgba(255,255,255,.07);
  --red:#c1121f;
  --red-bright:#e11d24;
  --text:#e9e5e3;
  --muted:#8f857e;
  --head:#d8d2ce;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;}
a{color:inherit;}

/* Utility font for display/UI elements */
.site-nav a,
.panel-head h2,
.story-title,
.rank-num,
.rank-name,
.site-footer,
.archive-title,
.post-card-title,
.single-title,
.back-link{
  font-family:"Oswald","Arial Narrow",system-ui,sans-serif;
}

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,#0b0809,#080506);
  border-bottom:1px solid rgba(193,18,31,.22);
  box-shadow:0 6px 24px rgba(0,0,0,.55);
}
.header-inner{
  max-width:1380px; margin:0 auto;
  padding:13px 40px;
  display:flex; align-items:center; gap:40px;
}
.brand,
.custom-logo-link{display:flex; align-items:center; line-height:0;}
.brand img,
.custom-logo{height:44px; width:auto; display:block;}

.site-nav ul{
  list-style:none; margin:0 0 0 auto; padding:0;
  display:flex; gap:46px;
}
.site-nav li{margin:0;}
.site-nav a{
  position:relative; display:inline-block; padding:6px 0;
  font-size:15px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
  color:var(--muted); transition:color .18s ease;
}
.site-nav a:hover{color:var(--text);}
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-parent > a{color:var(--red-bright);}
.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:var(--red-bright);
}

.nav-toggle{
  display:none; margin-left:auto;
  background:none; border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:8px 11px; cursor:pointer; line-height:0;
}
.nav-toggle svg{width:22px; height:22px;}

/* ============================================================
   Hero (front page)
   ============================================================ */
.hero{background:#000; line-height:0;}
.hero-art{display:block; width:100%; height:auto;}

/* ============================================================
   Content wrapper + homepage grid
   ============================================================ */
.content{padding:58px 40px 78px;}
.content-grid{
  max-width:1380px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start;
}

.panel{
  position:relative;
  background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));
  border:1px solid var(--line); border-radius:14px;
  padding:24px 28px 30px;
}
.panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,transparent,rgba(193,18,31,.55),transparent);
}
.panel-head{
  position:relative; display:flex; align-items:center; gap:14px;
  padding-bottom:18px; margin-bottom:6px;
}
.panel-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--line) 55%,var(--red) 100%);
}
.panel-head .ico{color:var(--red-bright); display:flex; line-height:0;}
.panel-head .ico svg{width:26px; height:26px;}
.panel-head h2{
  margin:0; font-size:26px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--head);
}

/* Stories */
.story{
  display:grid; grid-template-columns:112px 1fr 26px;
  align-items:center; gap:20px; margin-top:14px; padding:14px;
  background:var(--panel-row); border:1px solid var(--line); border-radius:10px;
  text-decoration:none; color:var(--text);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.story:hover{background:#181112; border-color:rgba(193,18,31,.4); transform:translateX(2px);}
.story-thumb{
  width:112px; height:74px; object-fit:cover; border-radius:6px; display:block;
}
.story-thumb--empty{
  background:linear-gradient(135deg,#1c1415,#0d0a0b);
  border:1px solid var(--line);
}
.story-title{
  margin:0; font-size:20px; font-weight:500; line-height:1.22;
  letter-spacing:.005em; color:#eae6e3;
}
.chev{color:var(--red-bright); display:flex; justify-content:center; transition:transform .18s ease;}
.chev svg{width:22px; height:22px;}
.story:hover .chev{transform:translateX(4px);}

.empty-note{
  color:var(--muted); font-size:15px; line-height:1.6; margin:18px 4px 6px;
}
.empty-note strong{color:var(--text);}

/* Power 5 */
.ranks{list-style:none; margin:6px 0 0; padding:0;}
.rank{
  display:grid; grid-template-columns:48px 1fr; align-items:center;
  padding:15px 6px; border-bottom:1px solid var(--line);
  transition:background .18s ease;
}
.rank:last-child{border-bottom:none;}
.rank:hover{background:linear-gradient(90deg,rgba(193,18,31,.13),transparent 62%);}
.rank-num{font-size:32px; font-weight:700; color:var(--red-bright); text-align:center; line-height:1;}
.rank-name{font-size:19px; font-weight:400; color:#e4e0dd; padding-left:20px; border-left:1px solid var(--line);}

/* ============================================================
   Archive / blog listing (index.php)
   ============================================================ */
.archive-wrap{max-width:900px; margin:0 auto;}
.archive-title{
  font-size:34px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--head); margin:0 0 26px; padding-bottom:16px;
  border-bottom:1px solid var(--line); position:relative;
}
.archive-title::after{
  content:""; position:absolute; left:0; bottom:-1px; width:120px; height:2px; background:var(--red);
}
.post-card{
  background:linear-gradient(180deg,var(--panel-top),var(--panel-bot));
  border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:20px;
  transition:border-color .18s ease, transform .18s ease;
}
.post-card:hover{border-color:rgba(193,18,31,.4); transform:translateY(-2px);}
.post-card-link{display:grid; grid-template-columns:220px 1fr; text-decoration:none; color:var(--text);}
.post-card-thumb{width:220px; height:100%; min-height:150px; object-fit:cover; display:block;}
.post-card-body{padding:22px 24px;}
.post-card-title{font-size:23px; font-weight:600; line-height:1.2; margin:0 0 8px; color:#eae6e3;}
.post-card-meta{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--red-bright); margin:0 0 10px;}
.post-card-excerpt{font-size:15px; line-height:1.6; color:#b8b2ae; margin:0;}

.pagination{margin-top:30px; display:flex; justify-content:center;}
.pagination .nav-links{display:flex; gap:8px; flex-wrap:wrap;}
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px;
  padding:0 12px; border:1px solid var(--line); border-radius:8px; color:var(--text);
  text-decoration:none; font-family:"Oswald",sans-serif;
}
.pagination .page-numbers.current{background:var(--red); border-color:var(--red); color:#fff;}
.pagination a.page-numbers:hover{border-color:var(--red-bright);}

/* ============================================================
   Single post / page
   ============================================================ */
.single{max-width:820px; margin:0 auto;}
.single-head{margin-bottom:22px;}
.single-title{font-size:40px; font-weight:600; line-height:1.12; letter-spacing:.01em; color:#f0ece9; margin:0 0 12px;}
.single-meta{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--red-bright); margin:0;}
.single-hero{margin:0 0 28px; line-height:0;}
.single-hero img{width:100%; height:auto; border-radius:12px; border:1px solid var(--line);}

.single-content{font-size:18px; line-height:1.75; color:#d9d4d1;}
.single-content > *:first-child{margin-top:0;}
.single-content p{margin:0 0 1.15em;}
.single-content h2{font-family:"Oswald",sans-serif; font-size:28px; font-weight:600; color:var(--head); margin:1.6em 0 .5em; letter-spacing:.01em;}
.single-content h3{font-family:"Oswald",sans-serif; font-size:22px; font-weight:600; color:var(--head); margin:1.4em 0 .4em;}
.single-content a{color:var(--red-bright); text-decoration:underline; text-underline-offset:2px;}
.single-content img{max-width:100%; height:auto; border-radius:8px;}
.single-content figure{margin:1.4em 0;}
.single-content figcaption{font-size:13px; color:var(--muted); text-align:center; margin-top:8px;}
.single-content blockquote{margin:1.5em 0; padding:.7em 1.3em; border-left:3px solid var(--red); background:rgba(255,255,255,.02); color:#c9c4c1; font-style:italic;}
.single-content ul,.single-content ol{margin:0 0 1.15em 1.4em;}
.single-content li{margin:.35em 0;}
.single-content code{background:#161011; padding:.12em .45em; border-radius:4px; font-size:.92em;}
.single-content hr{border:none; border-top:1px solid var(--line); margin:2em 0;}

.single-foot{margin-top:40px; padding-top:22px; border-top:1px solid var(--line);}
.back-link{color:var(--red-bright); text-decoration:none; font-size:15px; letter-spacing:.06em; text-transform:uppercase;}
.back-link:hover{color:#fff;}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:#070506; border-top:1px solid var(--line);
  color:var(--muted); text-align:center; padding:26px 20px;
  font-size:13px; font-weight:300; letter-spacing:.1em; text-transform:uppercase;
}
.site-footer .red{color:var(--red-bright);}

/* ============================================================
   Focus / motion
   ============================================================ */
a:focus-visible, button:focus-visible, .story:focus-visible{
  outline:2px solid var(--red-bright); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  .header-inner{padding:12px 20px; gap:16px;}
  .brand img,.custom-logo{height:38px;}
  .nav-toggle{display:inline-flex;}
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    background:#0b0809; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .site-nav.open{max-height:420px;}
  .site-nav ul{flex-direction:column; gap:0; margin:0; padding:6px 20px 14px;}
  .site-nav li{border-bottom:1px solid var(--line);}
  .site-nav li:last-child{border-bottom:none;}
  .site-nav a{display:block; padding:15px 0; font-size:16px;}
  .site-nav .current-menu-item > a::after,
  .site-nav .current_page_item > a::after{display:none;}

  .content{padding:38px 18px 56px;}
  .content-grid{grid-template-columns:1fr; gap:22px;}
  .panel{padding:20px 18px 24px;}
  .panel-head h2{font-size:22px;}
  .panel-head .ico svg{width:23px; height:23px;}

  .story{grid-template-columns:96px 1fr 20px; gap:14px; padding:12px;}
  .story-thumb{width:96px; height:62px;}
  .story-title{font-size:18px;}

  .rank{grid-template-columns:40px 1fr;}
  .rank-num{font-size:27px;}
  .rank-name{font-size:17px; padding-left:16px;}

  .post-card-link{grid-template-columns:1fr;}
  .post-card-thumb{width:100%; height:170px; min-height:0;}
  .single-title{font-size:30px;}
  .single-content{font-size:17px;}
}
@media (max-width:400px){
  .story{grid-template-columns:1fr; gap:12px;}
  .story-thumb{width:100%; height:120px;}
  .story-thumb--empty{height:120px;}
  .chev{display:none;}
}