/*
Theme Name: PakGamersHub CP v2
Theme URI: https://pakgamershub.com
Description: A fully custom gaming magazine & community theme for PakGamersHub. Cinematic hero, breaking news ticker, light/dark theme toggle, category tabs, reviews, community pulse, and a polished editorial layout built for the Pakistani gaming community.
Author: PakGamersHub
Version: 2.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pakgamershub
Tags: gaming, magazine, community, dark-mode, news
*/

/* ─── LIGHT THEME (DEFAULT) ───────────────────────────── */
:root {
  --red:          #c0392b;
  --red2:         #e74c3c;
  --red-glow:     rgba(192,57,43,0.3);
  --max:          1180px;
  --hf:           'Barlow Condensed', sans-serif;
  --bf:           'Barlow', sans-serif;

  /* surfaces */
  --bg:           #f4f5f7;
  --bg2:          #eef0f3;
  --surface:      #ffffff;
  --surface2:     #f9fafb;
  --panel:        #ffffff;

  /* text */
  --text:         #111111;
  --muted:        #6b7280;
  --muted2:       #374151;

  /* borders */
  --border:       rgba(0,0,0,0.08);
  --border2:      rgba(0,0,0,0.14);

  /* header */
  --header-bg:    rgba(255,255,255,0.94);
  --header-border:rgba(0,0,0,0.1);
  --nav-link:     #4b5563;
  --nav-active:   #111111;

  /* ticker stays red either way */
  --thumb-bg:     #e8eaed;
  --thumb-text:   rgba(0,0,0,0.2);

  /* section alternation */
  --section-alt:  #f0f2f5;

  /* card shadow */
  --card-shadow:  0 2px 12px rgba(0,0,0,0.07);
  --card-hover-shadow: 0 8px 28px rgba(0,0,0,0.12);

  /* join cta stays dark */
  --cta-bg:       #0d0d0d;
  --cta-text:     #ffffff;
  --cta-muted:    rgba(255,255,255,0.5);
}

/* ─── DARK THEME ──────────────────────────────────────── */
[data-theme="dark"] {
  --bg:           #0d0d0d;
  --bg2:          #111111;
  --surface:      #1e1e1e;
  --surface2:     #242424;
  --panel:        #1e1e1e;

  --text:         #f0f0f0;
  --muted:        #888888;
  --muted2:       #aaaaaa;

  --border:       rgba(255,255,255,0.07);
  --border2:      rgba(255,255,255,0.12);

  --header-bg:    rgba(13,13,13,0.92);
  --header-border:rgba(255,255,255,0.08);
  --nav-link:     #aaaaaa;
  --nav-active:   #ffffff;

  --thumb-bg:     #1a1a1a;
  --thumb-text:   rgba(255,255,255,0.1);

  --section-alt:  #141414;

  --card-shadow:  none;
  --card-hover-shadow: 0 16px 40px rgba(0,0,0,0.5);

  --cta-bg:       #141414;
  --cta-text:     #ffffff;
  --cta-muted:    rgba(255,255,255,0.5);
}

/* ─── RESET ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--bf);font-size:15px;
  background:var(--bg);color:var(--text);
  overflow-x:hidden;line-height:1.6;
  transition:background 0.3s, color 0.3s;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

/* ─── NOISE TEXTURE ───────────────────────────────────── */
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9999;opacity:0.35;
}

/* ─── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px}

/* ─── THEME TRANSITION ────────────────────────────────── */
.site-header,.feature-card,.review-card,.hot-card,.trending-sidebar,
.pulse-card,.tabs-bar,.tab-thumb,.hero-stack-card,body{
  transition:background 0.3s,border-color 0.3s,color 0.3s,box-shadow 0.3s;
}

/* ─── TICKER ──────────────────────────────────────────── */
.ticker{
  background:var(--red);height:34px;
  display:flex;align-items:center;overflow:hidden;
  position:relative;z-index:100;
}
/* Push down past WP admin bar when logged in */
.admin-bar .ticker{margin-top:0}
.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  .admin-bar .site-header{top:46px}
}
.ticker-label{
  flex-shrink:0;
  /* Solid darker shade of the accent so moving items don't show through */
  background:#8a1c14;
  font-family:var(--hf);font-size:12px;font-weight:800;letter-spacing:0.12em;
  text-transform:uppercase;padding:0 18px;height:100%;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,0.25);color:#fff;
  position:relative;z-index:2;
}
.ticker-label span{display:inline-block;width:7px;height:7px;background:#fff;border-radius:50%;animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}
.ticker-track{
  display:flex;align-items:center;
  animation:ticker-scroll 40s linear infinite;
  white-space:nowrap;
}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-item{
  font-size:12px;font-weight:600;letter-spacing:0.02em;
  padding:0 28px;border-right:1px solid rgba(255,255,255,0.2);
  display:flex;align-items:center;gap:8px;height:34px;
  color:#fff;cursor:pointer;transition:background 0.2s;
}
.ticker-item:hover{background:rgba(0,0,0,0.15)}
.ticker-cat{
  font-family:var(--hf);font-size:10px;font-weight:800;letter-spacing:0.08em;
  text-transform:uppercase;background:rgba(0,0,0,0.25);
  padding:2px 7px;border-radius:2px;color:#fff;
}

/* ─── HEADER ──────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--header-bg);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid var(--header-border);
  box-shadow:0 1px 0 var(--header-border);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:62px;max-width:var(--max);margin:0 auto;gap:24px;
}
.logo{
  font-family:var(--hf);font-size:26px;font-weight:900;
  letter-spacing:0.04em;text-transform:uppercase;flex-shrink:0;
}
.logo .pak{color:var(--text)}
.logo .gamers{color:var(--red)}
.logo .hub{color:var(--muted)}

.main-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.main-nav ul,
.main-nav ol{
  display:flex;align-items:center;gap:2px;
  list-style:none !important;margin:0;padding:0;
}
.main-nav li{
  list-style:none !important;
  margin:0;padding:0;
  position:relative;
}
.main-nav li::before,
.main-nav li::marker{display:none !important;content:none !important}
.main-nav a,
.main-nav li a{
  font-family:var(--hf);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;
  padding:8px 13px;color:var(--nav-link);
  border-radius:3px;transition:color 0.2s,background 0.2s;
  position:relative;white-space:nowrap;
  text-decoration:none;
  display:inline-block;
}
.main-nav a:hover,
.main-nav li a:hover,
.main-nav a.active,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a{color:var(--nav-active)}
.main-nav a.active::after,
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after{
  content:'';position:absolute;bottom:-1px;left:13px;right:13px;
  height:2px;background:var(--red);border-radius:1px;
}
.main-nav a.hot{color:var(--red)}

.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.search-pill{
  display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:20px;padding:6px 14px;
  font-size:12px;color:var(--muted);cursor:pointer;
  transition:border-color 0.2s,background 0.2s;
}
.search-pill:hover{border-color:var(--red)}
.theme-toggle{
  width:36px;height:36px;border-radius:50%;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;transition:all 0.2s;
  flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--red);background:var(--bg2)}
.btn-join{
  font-family:var(--hf);font-size:13px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.06em;
  background:var(--red);color:#fff;
  padding:8px 18px;border-radius:3px;
  transition:background 0.2s,transform 0.2s,box-shadow 0.2s;
}
.btn-join:hover{
  background:var(--red2);transform:translateY(-1px);
  box-shadow:0 6px 18px -6px var(--red-glow);
}

/* ─── HERO ────────────────────────────────────────────── */
/* Hero always stays dark/cinematic */
.hero{
  position:relative;min-height:600px;overflow:hidden;
  display:flex;align-items:flex-end;
  background:#0d0d0d;
}
.hero-bg{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#0d0d0d 0%,#1a0a0a 40%,#141414 100%);
}
.hero-img-placeholder{
  position:absolute;right:0;top:0;bottom:0;width:55%;
  background:linear-gradient(135deg,#1e1010 0%,#2a1515 40%,#1e1a1a 100%);
  clip-path:polygon(8% 0,100% 0,100% 100%,0% 100%);overflow:hidden;
}
.hero-img-label{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  font-family:monospace;font-size:11px;color:rgba(255,255,255,0.13);
  letter-spacing:0.05em;text-transform:uppercase;
  border:1px dashed rgba(255,255,255,0.06);margin:20px;border-radius:2px;
}
.hero-img-label span{font-size:9px;opacity:0.6}
.hero-grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(192,57,43,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(192,57,43,0.06) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,#0d0d0d 30%,rgba(13,13,13,0.7) 60%,transparent 100%);
  z-index:1;
}
.hero-overlay-bottom{
  position:absolute;bottom:0;left:0;right:0;height:160px;
  background:linear-gradient(to top,#0d0d0d,transparent);z-index:1;
}
/* In light theme, fade hero bottom into page bg */
[data-theme="light"] .hero-overlay-bottom{
  background:linear-gradient(to top, var(--bg), transparent);
}
.hero-inner{
  position:relative;z-index:2;
  padding:80px 24px 60px;
  max-width:var(--max);margin:0 auto;width:100%;
}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px}
.hero-cat-badge{
  font-family:var(--hf);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.1em;
  background:var(--red);color:#fff;padding:4px 12px;border-radius:2px;
}
.hero-meta-line{font-size:12px;color:rgba(255,255,255,0.5);letter-spacing:0.03em}
.hero-title{
  font-family:var(--hf);font-size:clamp(44px,6.5vw,78px);font-weight:900;
  line-height:0.95;letter-spacing:-0.01em;text-transform:uppercase;
  max-width:640px;margin-bottom:22px;color:#fff;
}
.hero-title em{
  font-style:normal;color:var(--red);
  text-shadow:0 0 40px rgba(192,57,43,0.5);
}
.hero-excerpt{
  font-size:17px;line-height:1.6;
  color:rgba(255,255,255,0.72);max-width:520px;margin-bottom:32px;
}
.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--hf);font-size:14px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.07em;
  background:var(--red);color:#fff;padding:14px 28px;border-radius:3px;
  transition:all 0.25s;position:relative;overflow:hidden;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  transform:translateX(-100%);transition:transform 0.5s;
}
.btn-primary:hover::before{transform:translateX(100%)}
.btn-primary:hover{
  background:var(--red2);transform:translateY(-2px);
  box-shadow:0 10px 28px -8px var(--red-glow);
}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--hf);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;
  color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.2);
  padding:13px 22px;border-radius:3px;transition:all 0.2s;
}
.btn-ghost:hover{border-color:rgba(255,255,255,0.5);color:#fff}
.hero-author{
  display:flex;align-items:center;gap:10px;
  margin-top:28px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.1);
}
.avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--red),#7a1a10);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hf);font-size:14px;font-weight:800;color:#fff;flex-shrink:0;
}
.hero-author-name{font-weight:600;color:#fff;font-size:13px}
.hero-author-time{color:rgba(255,255,255,0.45);font-size:12px}

/* Hero mini stack — positioned within max-width constraint */
/* Hero stack — sits BELOW the hero in a horizontal row, no longer floating */
.hero-stack{
  position:relative;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:var(--max);
  margin:-40px auto 0;
  padding:0 24px;
  z-index:3;
}
/* Defensive: never render hero-stack outside the hero section */
body:not(.home) .hero-stack,
body:not(.home) .hero-stack-card{display:none !important}

/* On smaller screens, stack vertically */
@media(max-width:768px){
  .hero-stack{
    grid-template-columns:1fr;
    margin-top:16px;
    gap:10px;
  }
}
.hero-stack-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;cursor:pointer;
  transition:all 0.25s;
  box-shadow:var(--card-shadow);
  text-decoration:none !important;
  color:var(--text);
  min-height:104px;
}
.hero-stack-card:hover{
  border-color:var(--red);
  transform:translateY(-3px);
  box-shadow:var(--card-hover-shadow);
}
.hero-stack-card .stack-title{
  color:var(--text);
}
.hero-stack-card .stack-time{
  color:var(--muted);
}
.stack-thumb{
  width:90px;height:68px;border-radius:6px;flex-shrink:0;
  background:var(--thumb-bg);
  background-size:cover;background-position:center;
}
.stack-info{flex:1;min-width:0}
.stack-cat{
  font-family:var(--hf);font-size:11px;font-weight:800;
  color:var(--red);text-transform:uppercase;letter-spacing:0.07em;
  margin-bottom:5px;display:block;
}
.stack-title{
  font-family:var(--bf);font-size:15px;font-weight:600;line-height:1.4;
  color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:6px;
}
.stack-time{font-size:12px;color:var(--muted)}

/* ─── SECTION HEAD ────────────────────────────────────── */
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.section-title{
  font-family:var(--hf);font-size:22px;font-weight:900;
  text-transform:uppercase;letter-spacing:0.04em;
  display:flex;align-items:center;gap:12px;color:var(--text);
}
.section-bar{
  display:inline-block;width:3px;height:22px;
  background:var(--red);border-radius:1px;
  box-shadow:0 0 8px var(--red-glow);flex-shrink:0;
}
.section-more{
  font-family:var(--hf);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.07em;
  color:var(--red);opacity:0.8;display:flex;align-items:center;gap:4px;
  transition:opacity 0.2s;
}
.section-more:hover{opacity:1}

/* ─── LEAD GRID ───────────────────────────────────────── */
.lead-section{padding:52px 0;background:var(--bg)}
.lead-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px}
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.feature-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:7px;overflow:hidden;cursor:pointer;
  box-shadow:var(--card-shadow);
  transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s;
}
.feature-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--card-hover-shadow);
  border-color:rgba(192,57,43,0.3);
}
.feature-thumb{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  background:var(--thumb-bg);
}
.feature-thumb-inner{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  font-family:monospace;font-size:9px;color:var(--thumb-text);
  text-transform:uppercase;letter-spacing:0.05em;
}
.feature-thumb::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:50%;
  background:linear-gradient(to top,var(--surface),transparent);
}
.feat-cat{
  position:absolute;top:10px;left:10px;z-index:1;
  font-family:var(--hf);font-size:10px;font-weight:800;letter-spacing:0.08em;
  text-transform:uppercase;background:var(--red);color:#fff;
  padding:3px 9px;border-radius:2px;
}
.feature-body{padding:16px 18px 18px}
.feature-title{
  font-family:var(--hf);font-size:17px;font-weight:800;
  line-height:1.25;letter-spacing:0.01em;color:var(--text);
  margin-bottom:8px;transition:color 0.2s;
}
.feature-card:hover .feature-title{color:var(--red)}
.feature-meta{font-size:11px;color:var(--muted);display:flex;gap:10px;align-items:center}
.dot{opacity:0.4}

/* ─── TRENDING SIDEBAR ────────────────────────────────── */
.trending-sidebar{
  background:var(--surface);border:1px solid var(--border);
  border-radius:7px;padding:22px;align-self:start;
  position:sticky;top:80px;box-shadow:var(--card-shadow);
}
.trend-list{list-style:none}
.trend-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.trend-item:first-child{padding-top:0}
.trend-item:last-child{border-bottom:none;padding-bottom:0}
.trend-rank{
  font-family:var(--hf);font-size:30px;font-weight:900;
  font-style:italic;line-height:1;min-width:30px;
  background:linear-gradient(135deg,var(--red),var(--red2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.trend-body{flex:1;min-width:0}
.trend-cat{
  font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--red);display:block;margin-bottom:3px;
}
.trend-title{
  font-size:13px;font-weight:600;line-height:1.4;
  color:var(--text);display:block;transition:color 0.2s;
}
.trend-item:hover .trend-title{color:var(--red)}

/* ─── TABS ────────────────────────────────────────────── */
.tabs-section{padding:0 0 52px;background:var(--bg)}
.tabs-bar{
  background:var(--surface);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-bottom:28px;overflow-x:auto;scrollbar-width:none;
  box-shadow:0 1px 0 var(--border);
}
[data-theme="dark"] .tabs-bar{background:var(--bg2)}
.tabs-bar::-webkit-scrollbar{display:none}
.tabs-nav{
  display:flex;list-style:none;padding:0 24px;
  max-width:var(--max);margin:0 auto;
}
.tabs-nav li a{
  display:block;padding:13px 15px;
  font-family:var(--hf);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.07em;
  color:var(--muted);border-bottom:2px solid transparent;
  transition:color 0.2s,border-color 0.2s;white-space:nowrap;
}
.tabs-nav li a:hover,.tabs-nav li a.active{color:var(--text);border-bottom-color:var(--red)}
.tabs-panel{display:none}
.tabs-panel.active{display:block}
.tab-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
}

.tab-card{
  display:block;
  cursor:pointer;
  min-width:0;
  text-decoration:none !important;
  color:inherit;
}
.tab-thumb-wrap{border-radius:5px;overflow:hidden;margin-bottom:10px;background:var(--thumb-bg)}
.tab-thumb{
  aspect-ratio:16/9;background:var(--thumb-bg);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  font-family:monospace;font-size:9px;color:var(--thumb-text);
  text-transform:uppercase;letter-spacing:0.04em;
  transition:transform 0.3s;
}
.tab-card:hover .tab-thumb{transform:scale(1.05)}
.tab-cat{
  font-family:var(--hf);font-size:10px;font-weight:700;
  letter-spacing:0.07em;text-transform:uppercase;
  color:var(--red);display:block;margin-bottom:4px;
}
.tab-title{
  font-size:13px;font-weight:700;line-height:1.35;color:var(--text);
  transition:color 0.2s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tab-card:hover .tab-title{color:var(--red)}
.tab-date{font-size:11px;color:var(--muted);margin-top:5px;display:block}

/* ─── REVIEWS ─────────────────────────────────────────── */
.reviews-section{
  padding:52px 0;
  background:var(--section-alt);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:7px;overflow:hidden;cursor:pointer;
  box-shadow:var(--card-shadow);
  transition:border-color 0.25s,transform 0.25s,box-shadow 0.25s;
}
.review-card:hover{
  border-color:rgba(192,57,43,0.35);transform:translateY(-3px);
  box-shadow:var(--card-hover-shadow);
}
.review-thumb{
  aspect-ratio:16/9;background:var(--thumb-bg);position:relative;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  font-family:monospace;font-size:9px;color:var(--thumb-text);
  text-transform:uppercase;overflow:hidden;
}
.review-score{
  position:absolute;top:12px;right:12px;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hf);font-size:17px;font-weight:900;color:#1a1000;
  box-shadow:0 4px 14px -4px rgba(245,158,11,0.5);
}
.review-badge-label{
  position:absolute;top:12px;left:12px;
  font-family:var(--hf);font-size:10px;font-weight:800;letter-spacing:0.1em;
  text-transform:uppercase;
  background:rgba(0,0,0,0.55);color:rgba(255,255,255,0.85);
  padding:4px 10px;border-radius:2px;
}
.review-body{padding:18px 20px 20px}
.review-title{
  font-family:var(--hf);font-size:18px;font-weight:800;
  margin-bottom:8px;line-height:1.2;color:var(--text);transition:color 0.2s;
}
.review-card:hover .review-title{color:var(--red)}
.review-excerpt{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
.review-stars{display:flex;gap:3px;margin-top:10px}
.star{color:#f59e0b;font-size:13px}
.star.half{opacity:0.35}

/* ─── HOT + COMMUNITY ─────────────────────────────────── */
.hot-community{padding:52px 0;background:var(--bg)}
.hot-community-grid{display:grid;grid-template-columns:2fr 1fr;gap:28px}
.hot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hot-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:7px;overflow:hidden;cursor:pointer;
  box-shadow:var(--card-shadow);
  transition:border-color 0.25s,transform 0.25s,box-shadow 0.25s;
}
.hot-card:hover{
  border-color:rgba(192,57,43,0.35);transform:translateY(-3px);
  box-shadow:var(--card-hover-shadow);
}
.hot-thumb{
  aspect-ratio:16/10;background:var(--thumb-bg);position:relative;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  font-family:monospace;font-size:9px;color:var(--thumb-text);
  text-transform:uppercase;overflow:hidden;
}
.hot-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,var(--surface) 0%,transparent 60%);
}
.hot-cat{
  position:absolute;top:10px;left:10px;z-index:1;
  font-family:var(--hf);font-size:10px;font-weight:800;letter-spacing:0.07em;
  text-transform:uppercase;background:var(--red);color:#fff;
  padding:3px 8px;border-radius:2px;
}
.hot-body{padding:14px 16px 16px}
.hot-title{
  font-size:14px;font-weight:700;line-height:1.35;
  color:var(--text);margin-bottom:7px;transition:color 0.2s;
}
.hot-card:hover .hot-title{color:var(--red)}
.hot-meta{font-size:11px;color:var(--muted);display:flex;gap:8px}
.comments-count{color:var(--red);font-weight:600}

/* ─── PULSE ───────────────────────────────────────────── */
.pulse{align-self:start}
.pulse-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:7px;padding:20px 22px;margin-bottom:16px;
  box-shadow:var(--card-shadow);
}
.pulse-card-title{
  font-family:var(--hf);font-size:15px;font-weight:800;
  letter-spacing:0.04em;color:var(--text);
  padding-bottom:12px;border-bottom:1px solid var(--border);
  margin-bottom:0;
}
.pulse-list{list-style:none}
.pulse-item{border-bottom:1px solid var(--border)}
.pulse-item:last-child{border-bottom:none}
.pulse-link{display:block;padding:11px 0;transition:opacity 0.2s;cursor:pointer}
.pulse-link:hover{opacity:0.7}
.pulse-thread{display:block;font-size:13px;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:3px}
.pulse-meta{display:block;font-size:11px;color:var(--muted)}
.pulse-more{
  display:inline-block;margin-top:12px;
  font-size:12px;font-weight:700;color:var(--red);
  font-family:var(--hf);text-transform:uppercase;letter-spacing:0.06em;
}
.pulse-shout{
  background:linear-gradient(135deg,#0f0505 0%,#1a0808 100%);
  border-color:rgba(192,57,43,0.2);box-shadow:none;
}
[data-theme="light"] .pulse-shout{
  background:linear-gradient(135deg,#1a0505 0%,#200a0a 100%);
}
.pulse-shout .pulse-card-title{color:#fff;border-bottom-color:rgba(192,57,43,0.2)}
.shout-text{font-size:13px;line-height:1.55;color:rgba(255,255,255,0.55);margin:12px 0 16px}
.btn-shout{
  display:inline-block;font-family:var(--hf);font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.07em;
  background:var(--red);color:#fff;padding:9px 18px;border-radius:3px;
  transition:background 0.2s,box-shadow 0.2s;
}
.btn-shout:hover{background:var(--red2);box-shadow:0 6px 18px -6px var(--red-glow)}

/* ─── JOIN CTA ────────────────────────────────────────── */
.join-cta{
  position:relative;overflow:hidden;padding:90px 0;
  background:var(--cta-bg);
  border-top:1px solid rgba(255,255,255,0.05);
}
.join-cta-glow{
  position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,57,43,0.14) 0%,transparent 70%);
  top:-200px;right:-100px;pointer-events:none;
}
.join-cta-glow2{
  position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,57,43,0.08) 0%,transparent 70%);
  bottom:-100px;left:100px;pointer-events:none;
}
.join-grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(192,57,43,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(192,57,43,0.04) 1px,transparent 1px);
  background-size:80px 80px;
}
.join-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:2fr 1fr;gap:56px;align-items:center;
}
.join-tagline{
  font-family:var(--hf);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.14em;color:var(--red);
  margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.join-tagline::before{content:'';display:inline-block;width:28px;height:1px;background:var(--red)}
.join-title{
  font-family:var(--hf);font-size:clamp(34px,4vw,52px);font-weight:900;
  line-height:1.05;letter-spacing:-0.01em;text-transform:uppercase;
  color:var(--cta-text);margin-bottom:18px;
}
.join-title .hl{color:transparent;-webkit-text-stroke:1.5px var(--red)}
.join-desc{font-size:15px;line-height:1.7;color:var(--cta-muted);max-width:500px}
.join-stat{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 20px;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);border-radius:5px;margin-top:28px;
}
.join-stat-val{font-family:var(--hf);font-size:28px;font-weight:900;color:var(--red);line-height:1}
.join-stat-label{font-size:12px;color:rgba(255,255,255,0.45);line-height:1.3}
.join-stat-divider{width:1px;height:36px;background:rgba(255,255,255,0.08)}
.join-actions{display:flex;flex-direction:column;gap:12px}
.btn-join-primary{
  display:block;text-align:center;
  font-family:var(--hf);font-size:14px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.07em;
  background:var(--red);color:#fff;padding:16px 32px;border-radius:3px;
  transition:all 0.25s;
}
.btn-join-primary:hover{
  background:var(--red2);transform:translateY(-2px);
  box-shadow:0 12px 32px -10px var(--red-glow);
}
.btn-join-ghost{
  display:block;text-align:center;
  font-family:var(--hf);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;
  color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.12);
  padding:15px 32px;border-radius:3px;transition:all 0.2s;
}
.btn-join-ghost:hover{border-color:rgba(255,255,255,0.3);color:#fff}

/* ─── FOOTER ──────────────────────────────────────────── */
.footer{background:var(--bg2);border-top:1px solid var(--border);padding:18px 0}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:12px;font-size:12px;color:var(--muted);
}
.footer-logo{font-family:var(--hf);font-size:18px;font-weight:900;letter-spacing:0.04em;text-transform:uppercase;color:var(--text)}
.footer-logo .gamers{color:var(--red)}
.footer-links{display:flex;gap:18px}
.footer-links a{color:var(--muted);transition:color 0.2s}
.footer-links a:hover{color:var(--red)}

/* ─── SCROLL REVEAL ───────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 0.55s ease,transform 0.55s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ─── PLACEHOLDERS ────────────────────────────────────── */
.ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;width:100%;height:100%;
  font-family:monospace;font-size:9px;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--thumb-text);
}
.ph-lines{
  width:40px;height:30px;border:1px dashed currentColor;opacity:0.4;
  display:flex;flex-direction:column;justify-content:center;gap:3px;padding:5px;
}
.ph-line{height:2px;background:currentColor;border-radius:1px;opacity:0.5}
.ph-line:nth-child(2){width:70%}
.ph-line:nth-child(3){width:50%}

/* ─── TWEAKS PANEL ────────────────────────────────────── */
#tweaks-panel{
  position:fixed;bottom:24px;right:24px;z-index:10000;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:10px;padding:20px;width:248px;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
  font-size:13px;display:none;
}
[data-theme="dark"] #tweaks-panel{box-shadow:0 20px 60px rgba(0,0,0,0.6)}
#tweaks-panel.open{display:block}
#tweaks-panel h4{
  font-family:var(--hf);font-size:14px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.08em;
  margin-bottom:16px;color:var(--text);
  display:flex;justify-content:space-between;align-items:center;
}
#tweaks-panel h4 button{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:18px;line-height:1;padding:0;transition:color 0.2s;
}
#tweaks-panel h4 button:hover{color:var(--text)}
.tweak-row{margin-bottom:14px}
.tweak-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:7px}
.tweak-options{display:flex;gap:6px;flex-wrap:wrap}
.tweak-opt{
  font-size:11px;font-weight:600;padding:5px 10px;border-radius:3px;
  border:1px solid var(--border2);color:var(--muted);cursor:pointer;
  transition:all 0.2s;background:transparent;font-family:var(--bf);
}
.tweak-opt:hover,.tweak-opt.active{background:var(--red);border-color:var(--red);color:#fff}
.tweak-divider{border:none;border-top:1px solid var(--border);margin:12px 0}
.tweak-toggle{display:flex;gap:8px;align-items:center;cursor:pointer;font-size:12px;color:var(--muted2)}
.tweak-toggle input{accent-color:var(--red);width:14px;height:14px;cursor:pointer}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:960px){
  .lead-grid,.hot-community-grid,.join-inner{grid-template-columns:1fr}
  .trending-sidebar{position:static}
  .reviews-grid,.hot-grid{grid-template-columns:1fr 1fr}
  .tab-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:600px){
  .features-grid,.reviews-grid,.hot-grid,.tab-grid{grid-template-columns:1fr !important}
  .hero-img-placeholder{display:none}
  .main-nav{display:none}
}


/* ════════════════════════════════════════════════════════
   LEGACY COMPATIBILITY — Single posts, pages, archives
   These adapt the existing pkg-* templates to the v2 design system
   ════════════════════════════════════════════════════════ */

/* Site wrap container for single/archive */
.pkg-site-wrap{display:block}
.pkg-wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

/* ─── GLOBAL CONTENT WRAPPER ─── */
/* Every non-homepage template uses .pkg-main-wrap as its outer container.
   Constrain to max-width and add side padding so content never hits viewport edges. */
.pkg-main-wrap{
  width:100%;max-width:var(--max);margin:0 auto;
  padding:32px 24px;
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.pkg-main-wrap.pkg-no-sidebar{grid-template-columns:1fr}
.pkg-main-wrap:not(.pkg-no-sidebar){
  grid-template-columns:minmax(0,1fr) 300px;
}
.pkg-main-wrap.pkg-sidebar-left{grid-template-columns:300px minmax(0,1fr)}
.pkg-main-wrap.pkg-sidebar-left main{order:2}

@media (max-width:900px){
  .pkg-main-wrap:not(.pkg-no-sidebar),
  .pkg-main-wrap.pkg-sidebar-left{grid-template-columns:1fr}
  .pkg-main-wrap.pkg-sidebar-left main{order:initial}
}

/* The page title above content (Profile, Forums, Shoutbox titles) should also be wrapped */
.entry-header,
.page-header{
  max-width:var(--max);margin:0 auto;padding:24px;
}

/* Plugin pages (forums, shoutbox, profile, marketplace stream) often render their
   shortcode markup at body root. Wrap their containers too. */
.pgh-forums-wrap,
.pgh-stream-wrap,
.pgh-profile-wrap,
.pgh-shoutbox-wrap,
.pgh-shoutbox-page,
.pghp-profile-page{
  max-width:var(--max);
  margin:0 auto;
  padding:24px;
}
@media (max-width:600px){
  .pkg-main-wrap{padding:20px 16px}
  .pgh-forums-wrap,
  .pgh-stream-wrap,
  .pgh-profile-wrap,
  .pgh-shoutbox-wrap,
  .pgh-shoutbox-page,
  .pghp-profile-page{padding:16px}
}

/* Page title rendered standalone in page templates */
.pkg-page-title{
  max-width:var(--max);margin:0 auto;padding:24px 24px 0;
  font-family:var(--hf);font-weight:900;font-size:clamp(28px,4vw,42px);
  letter-spacing:0.005em;line-height:1.1;color:var(--text);
}

/* ─── Single post / Page ─── */
.pkg-single,
.pkg-page-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 36px;
    margin: 32px auto;
    box-shadow: var(--card-shadow);
}
.pkg-single-header{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.pkg-single-cat{
    display:inline-block;background:var(--red);color:#fff;
    font-family:var(--hf);font-size:11px;font-weight:800;
    letter-spacing:0.08em;text-transform:uppercase;
    padding:5px 12px;border-radius:2px;margin-bottom:16px;text-decoration:none;
}
.pkg-single-cat:hover{background:var(--red2)}
.pkg-single-title{
    font-family:var(--hf);font-size:clamp(28px,4vw,44px);
    font-weight:900;line-height:1.1;margin:0 0 16px;
    letter-spacing:0.005em;color:var(--text);
}
.pkg-single-meta{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pkg-single-meta a{color:var(--muted);text-decoration:none}
.pkg-single-meta a:hover{color:var(--red)}
.pkg-single-thumb{width:100%;height:auto;border-radius:6px;margin:20px 0 24px;display:block}
.pkg-single-content{font-size:16px;line-height:1.75;color:var(--text)}
.pkg-single-content h2{font-family:var(--hf);font-weight:800;font-size:1.7em;margin:1.6em 0 0.6em;line-height:1.2}
.pkg-single-content h3{font-family:var(--hf);font-weight:700;font-size:1.35em;margin:1.4em 0 0.5em}
.pkg-single-content p{margin:0 0 1.1em}
.pkg-single-content a{color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pkg-single-content a:hover{color:var(--red2)}
.pkg-single-content blockquote{
    border-left:3px solid var(--red);padding:0 0 0 20px;margin:1.4em 0;
    color:var(--muted2);font-style:italic;font-size:1.1em;
}
.pkg-single-content code{
    background:var(--surface2);padding:2px 6px;border-radius:3px;
    font-size:0.9em;border:1px solid var(--border);
}
.pkg-single-content pre{
    background:var(--surface2);padding:16px;border-radius:6px;overflow-x:auto;
    border:1px solid var(--border);margin:1.4em 0;font-size:14px;line-height:1.5;
}
.pkg-single-content img{max-width:100%;height:auto;border-radius:4px;margin:1em 0}
.pkg-single-content ul,
.pkg-single-content ol{padding-left:1.5em;margin:0 0 1.1em}
.pkg-single-content li{margin-bottom:0.4em}
.pkg-single-content table{
    width:100%;border-collapse:collapse;margin:1.4em 0;
    border:1px solid var(--border);
}
.pkg-single-content th,
.pkg-single-content td{border:1px solid var(--border);padding:8px 12px;text-align:left}
.pkg-single-content th{background:var(--surface2);font-weight:700}

/* ─── Single post tags ─── */
.pkg-single-tags{
    display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;
    padding-top:20px;border-top:1px solid var(--border);
}
.pkg-tag{
    background:var(--surface2);border:1px solid var(--border);
    color:var(--muted2);font-size:12px;font-weight:600;
    padding:5px 12px;border-radius:14px;text-decoration:none;
    transition:all 0.2s;
}
.pkg-tag:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ─── Post navigation ─── */
.pkg-post-nav{
    display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;
}
.pkg-post-nav-item{
    background:var(--surface2);border:1px solid var(--border);
    border-radius:6px;padding:14px 18px;text-decoration:none;
    color:var(--text);transition:all 0.2s;display:block;
}
.pkg-post-nav-item:hover{border-color:var(--red);background:var(--surface)}
.pkg-post-nav-item a{color:inherit;text-decoration:none;display:block}
.pkg-post-nav-item .label{
    font-family:var(--hf);font-size:11px;font-weight:700;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--red);
    margin-bottom:4px;display:block;
}
.pkg-post-nav-next{text-align:right}

/* ─── Author box ─── */
.pkg-author-box{
    display:flex;gap:18px;background:var(--surface2);border:1px solid var(--border);
    border-radius:6px;padding:20px;margin-top:28px;align-items:flex-start;
}
.pkg-author-avatar img{width:64px;height:64px;border-radius:50%;display:block}
.pkg-author-name{font-family:var(--hf);font-size:16px;font-weight:800;margin-bottom:4px}
.pkg-author-bio{font-size:14px;color:var(--muted2);line-height:1.5}

/* ─── Comments ─── */
.pkg-comments{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.pkg-comments h2{
    font-family:var(--hf);font-size:22px;font-weight:800;margin-bottom:16px;
}

/* ─── Archive / Index loop ─── */
.pkg-loop-title{
    font-family:var(--hf);font-size:24px;font-weight:800;
    margin:32px 0 20px;padding-bottom:12px;border-bottom:2px solid var(--red);
    color:var(--text);
}
.pkg-loop{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pkg-loop-item{
    background:var(--surface);border:1px solid var(--border);
    border-radius:6px;overflow:hidden;transition:all 0.2s;
}
.pkg-loop-item:hover{transform:translateY(-3px);box-shadow:var(--card-hover-shadow)}
.pkg-loop-thumb{
    display:block;aspect-ratio:16/10;background-size:cover;background-position:center;
    background-color:var(--thumb-bg);
}
.pkg-loop-body{padding:16px 18px}
.pkg-loop-cat{
    display:inline-block;font-family:var(--hf);font-size:10px;font-weight:800;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--red);margin-bottom:8px;
}
.pkg-loop-item-title{
    font-family:var(--hf);font-size:16px;font-weight:700;line-height:1.3;
    margin:0 0 8px;
}
.pkg-loop-item-title a{color:var(--text);text-decoration:none}
.pkg-loop-item-title a:hover{color:var(--red)}
.pkg-loop-meta{font-size:12px;color:var(--muted)}

/* ─── Pagination ─── */
.pkg-pagination{
    display:flex;justify-content:center;gap:6px;margin:32px 0;flex-wrap:wrap;
}
.pkg-pagination a,
.pkg-pagination span{
    padding:8px 14px;background:var(--surface);border:1px solid var(--border);
    color:var(--text);text-decoration:none;border-radius:4px;font-size:14px;
    font-weight:600;transition:all 0.2s;
}
.pkg-pagination a:hover{background:var(--red);color:#fff;border-color:var(--red)}
.pkg-pagination .current{background:var(--red);color:#fff;border-color:var(--red)}

/* ─── Footer (legacy widgets) ─── */
.footer-widgets{
    display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
    padding:48px 24px 32px;border-top:1px solid var(--border);
}
.footer-widget{font-size:14px;color:var(--muted2)}
.footer-widget h3{
    font-family:var(--hf);font-size:13px;font-weight:800;
    text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;color:var(--text);
}
.footer-widget ul{list-style:none;padding:0;margin:0}
.footer-widget li{padding:5px 0;border-bottom:1px solid var(--border)}
.footer-widget li:last-child{border-bottom:none}
.footer-widget a{color:var(--muted2);text-decoration:none;transition:color 0.2s}
.footer-widget a:hover{color:var(--red)}

/* ─── 404 ─── */
.pkg-404{text-align:center;padding:80px 24px;max-width:600px;margin:0 auto}
.pkg-404 h1{
    font-family:var(--hf);font-size:120px;font-weight:900;line-height:1;
    color:var(--red);margin:0;
}
.pkg-404 h2{
    font-family:var(--hf);font-size:32px;font-weight:800;margin:12px 0 16px;
}
.pkg-404 p{font-size:16px;color:var(--muted2);margin:0 0 24px;line-height:1.6}
.pkg-404 a{
    display:inline-block;background:var(--red);color:#fff;padding:12px 24px;
    font-family:var(--hf);font-weight:800;text-transform:uppercase;letter-spacing:0.06em;
    text-decoration:none;border-radius:3px;
}
.pkg-404 a:hover{background:var(--red2)}

/* ─── Search form ─── */
.pkg-search-form{
    display:flex;gap:8px;max-width:480px;margin:24px 0;
}
.pkg-search-form input[type="search"]{
    flex:1;padding:10px 14px;background:var(--surface);
    border:1px solid var(--border);color:var(--text);border-radius:4px;
    font-family:var(--bf);font-size:14px;
}
.pkg-search-form input[type="search"]:focus{outline:none;border-color:var(--red)}
.pkg-search-form button{
    background:var(--red);color:#fff;border:none;padding:10px 20px;
    font-family:var(--hf);font-weight:800;text-transform:uppercase;
    letter-spacing:0.06em;font-size:13px;border-radius:4px;cursor:pointer;
}
.pkg-search-form button:hover{background:var(--red2)}

/* ─── Mobile menu drawer ─── */
.mobile-nav-toggle{
    display:none;width:36px;height:36px;border-radius:50%;
    background:var(--surface2);border:1px solid var(--border2);
    align-items:center;justify-content:center;cursor:pointer;color:var(--text);
}
.mobile-nav-toggle:hover{border-color:var(--red)}

@media (max-width:768px){
    .main-nav{display:none;position:fixed;top:62px;left:0;right:0;
        background:var(--header-bg);backdrop-filter:blur(16px);
        border-bottom:1px solid var(--header-border);padding:16px 24px;
        flex-direction:column;align-items:flex-start;gap:8px;z-index:199;}
    .main-nav.open{display:flex}
    .main-nav a, .main-nav .main-nav-list li a{padding:12px 16px;width:100%;border-radius:4px}
    .mobile-nav-toggle{display:flex}
    .search-pill{display:none}
    .footer-widgets{grid-template-columns:repeat(2,1fr)}
    .pkg-loop{grid-template-columns:1fr}
    .pkg-post-nav{grid-template-columns:1fr}
    .pkg-single,.pkg-page-content{padding:24px;margin:16px}
}

@media (max-width:480px){
    .footer-widgets{grid-template-columns:1fr}
}


/* ─── GLOBAL LINK STYLING ─── */
/* Default: no underline on ANY link anywhere */
a, a:link, a:visited{text-decoration:none}

/* Articles bodies are special — links inside actual prose content should be underlined for readability */
.pkg-single-content a,
.pkg-single-content a:link,
.pkg-single-content a:visited,
.pkg-page-content a,
.pkg-page-content a:link,
.pkg-page-content a:visited,
.entry-content a,
.entry-content a:link,
.entry-content a:visited{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

/* Recent activity cards / news cards / forum rows / profile / etc — clean */
[class*="pgh-"] a,
[class*="pgh-"] a:link,
[class*="pgh-"] a:visited,
[class*="pghf-"] a,
[class*="pghp-"] a,
[class*="pghs-"] a,
.pkg-loop-item a,
.pkg-loop-item a:link,
.pkg-loop-item a:visited,
.recent-activity a,
.activity-feed a,
.profile-activity a,
.profile-activity-card a,
[class*="activity"] a:not(.pkg-single-content a){
  text-decoration:none !important;
}


/* ─── Archive loop excerpts + read more ─── */
.pkg-loop-item .pkg-loop-title{
    font-family:var(--hf);font-size:17px;font-weight:700;line-height:1.3;
    margin:0 0 8px;padding:0;border:none;letter-spacing:0;
}
.pkg-loop-item .pkg-loop-title a{color:var(--text);text-decoration:none}
.pkg-loop-item .pkg-loop-title a:hover{color:var(--red)}
.pkg-loop-meta{
    font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px;
    margin-bottom:10px;
}
.pkg-loop-meta a{color:var(--muted);text-decoration:none}
.pkg-loop-meta a:hover{color:var(--red)}
.pkg-loop-meta i{margin-right:4px;font-size:11px;opacity:0.7}
.pkg-loop-excerpt{
    font-size:13px;line-height:1.55;color:var(--muted2);margin:0 0 12px;
}
.pkg-loop-excerpt p{margin:0}
.pkg-read-more{
    display:inline-block;font-family:var(--hf);font-size:11px;font-weight:800;
    text-transform:uppercase;letter-spacing:0.06em;color:var(--red);
    text-decoration:none;padding:6px 0;border-bottom:1px solid var(--red);
}
.pkg-read-more:hover{color:var(--red2);border-bottom-color:var(--red2)}
.pkg-loop-thumb img{
    width:100%;height:100%;object-fit:cover;display:block;
}

/* Archive heading at top of page (h1 with same class) */
h1.pkg-loop-title{
    font-family:var(--hf);font-size:32px !important;font-weight:900;
    margin:0 0 24px !important;padding-bottom:14px !important;
    border-bottom:2px solid var(--red);color:var(--text);
}

/* Mobile responsive */
@media (max-width:768px){
    .pkg-loop{grid-template-columns:1fr 1fr;gap:16px}
}
@media (max-width:480px){
    .pkg-loop{grid-template-columns:1fr;gap:14px}
}