/*
Theme Name: The Balrog's Lair Reforged
Theme URI: https://www.usablewebsolutions.com/
Author: Usable Web Solutions, LLC
Author URI: https://www.usablewebsolutions.com/
Description: A dark, green, archive-forward editorial theme inspired by the 2002 version of The Balrog's Lair. Designed for wrestling news, opinion, history, and long-form features.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: balrogs-lair-reforged
Tags: news, blog, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
  --tbl-green-950: #07130b;
  --tbl-green-900: #0b2111;
  --tbl-green-800: #103a1d;
  --tbl-green-700: #165128;
  --tbl-green-500: #2f8b49;
  --tbl-green-300: #79c78c;
  --tbl-silver-100: #f2f5f3;
  --tbl-silver-200: #d9dfdb;
  --tbl-silver-400: #9ca7a0;
  --tbl-silver-600: #59635d;
  --tbl-ink: #111512;
  --tbl-panel: #151a17;
  --tbl-panel-2: #1b211d;
  --tbl-border: rgba(217, 223, 219, .16);
  --tbl-shadow: 0 18px 50px rgba(0,0,0,.34);
  --tbl-radius: 6px;
  --tbl-content: 1240px;
  --tbl-reading: 760px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--tbl-silver-200);
  background:
    radial-gradient(circle at top left, rgba(47,139,73,.13), transparent 34rem),
    linear-gradient(180deg, #090c0a 0%, #111512 34rem, #0b0e0c 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.68;
}
a { color: var(--tbl-green-300); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: #a8e1b5; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.tbl-shell { width: min(calc(100% - 32px), var(--tbl-content)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--tbl-border); background: rgba(7,19,11,.94); backdrop-filter: blur(14px); }
.tbl-topline { color: var(--tbl-silver-400); font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; border-bottom: 1px solid var(--tbl-border); }
.tbl-topline .tbl-shell { min-height: 34px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.tbl-masthead { position:relative; overflow:hidden; }
.tbl-masthead::before {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(255,255,255,.025) 44% 46%, transparent 46% 100%),
    linear-gradient(90deg, rgba(47,139,73,.14), transparent 55%);
  background-size: 48px 48px, auto;
  pointer-events:none;
}
.tbl-masthead-inner { position:relative; min-height: 150px; display:flex; align-items:center; justify-content:space-between; gap:36px; padding-block: 28px; }
.tbl-brand { display:flex; align-items:center; gap:22px; min-width:0; }
.custom-logo { max-height:88px; width:auto; }
.tbl-wordmark { text-decoration:none; color:var(--tbl-silver-100); }
.tbl-wordmark:hover { color:#fff; }
.tbl-initials {
  display:block; font-family: Georgia, "Times New Roman", serif; font-style:italic; font-weight:900;
  font-size: clamp(3rem, 7vw, 5.7rem); line-height:.8; letter-spacing:-.08em;
  color:#f5f7f5; text-shadow: 4px 4px 0 #0d351a, 7px 7px 0 rgba(0,0,0,.65);
}
.tbl-name { display:block; margin-top:14px; color:var(--tbl-silver-200); font-family: Georgia, "Times New Roman", serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:clamp(.88rem,2vw,1.2rem); }
.tbl-tagline { max-width:520px; margin:0; padding-left:28px; border-left:1px solid rgba(121,199,140,.35); color:var(--tbl-silver-200); font-family:Georgia,serif; font-size:clamp(1.1rem,2vw,1.55rem); line-height:1.35; }
.tbl-tagline strong { display:block; color:var(--tbl-green-300); margin-top:8px; font-size:.72em; letter-spacing:.13em; text-transform:uppercase; }

.primary-navigation { background: linear-gradient(180deg, #164c27, #0f351b); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid #061008; }
.primary-navigation .menu { list-style:none; margin:0; padding:0; display:flex; align-items:stretch; flex-wrap:wrap; }
.primary-navigation .menu > li { position:relative; }
.primary-navigation a { display:block; padding:15px 18px; color:#f3f7f4; text-decoration:none; font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.primary-navigation a:hover, .primary-navigation .current-menu-item > a { background:rgba(0,0,0,.26); color:#fff; }
.menu-toggle { display:none; width:100%; border:0; background:transparent; color:#fff; padding:14px 0; font-weight:800; text-transform:uppercase; letter-spacing:.09em; text-align:left; }

.site-main { padding-block: 34px 64px; }
.tbl-home-grid { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(280px, .7fr); gap:30px; align-items:start; }
.tbl-content-grid { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:42px; align-items:start; }
.tbl-card { background:linear-gradient(180deg, rgba(27,33,29,.98), rgba(18,23,20,.98)); border:1px solid var(--tbl-border); border-radius:var(--tbl-radius); box-shadow:var(--tbl-shadow); overflow:hidden; }
.tbl-card-body { padding:24px; }
.tbl-section { margin-bottom:34px; }
.tbl-section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 16px; padding:12px 16px; border-left:5px solid var(--tbl-green-500); background:linear-gradient(90deg, rgba(47,139,73,.24), rgba(255,255,255,.025)); color:var(--tbl-silver-100); font-family:Georgia,serif; font-size:1.35rem; line-height:1.15; }
.tbl-section-heading small { font-family:Inter,sans-serif; font-size:.65rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tbl-green-300); }

.tbl-hero { position:relative; min-height:470px; display:flex; align-items:end; background:#172019; }
.tbl-hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.75) contrast(1.05) brightness(.66); }
.tbl-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 25%, rgba(4,8,5,.25) 52%, rgba(4,8,5,.96) 100%); }
.tbl-hero-content { position:relative; z-index:1; padding:clamp(24px,5vw,48px); max-width:820px; }
.tbl-kicker { display:inline-block; color:#c6efcf; font-weight:900; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:12px; }
.tbl-hero h1, .tbl-hero h2 { margin:0 0 13px; color:#fff; font-family:Georgia,serif; font-size:clamp(2.1rem,5vw,4rem); line-height:1.03; letter-spacing:-.03em; }
.tbl-hero h1 a, .tbl-hero h2 a { color:inherit; text-decoration:none; }
.tbl-hero p { margin:0; max-width:62ch; color:#d6ddd8; font-size:1.03rem; }
.tbl-meta { display:flex; flex-wrap:wrap; gap:9px 14px; color:var(--tbl-silver-400); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
.tbl-meta a { color:inherit; }

.tbl-story-list { display:grid; gap:1px; background:var(--tbl-border); }
.tbl-story { display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; padding:20px; background:var(--tbl-panel); }
.tbl-story-thumb { aspect-ratio:4/3; object-fit:cover; width:100%; border-radius:3px; background:#0b120d; }
.tbl-story h2, .tbl-story h3 { margin:3px 0 8px; color:var(--tbl-silver-100); font-family:Georgia,serif; font-size:1.25rem; line-height:1.2; }
.tbl-story h2 a, .tbl-story h3 a { color:inherit; text-decoration:none; }
.tbl-story p { margin:0; color:#bac2bd; font-size:.92rem; line-height:1.55; }
.tbl-story-compact { grid-template-columns:1fr; }

.tbl-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.tbl-feature-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.tbl-feature-card h3 { margin:6px 0 8px; font-family:Georgia,serif; font-size:1.35rem; line-height:1.2; }
.tbl-feature-card h3 a { color:var(--tbl-silver-100); text-decoration:none; }

.widget-area { display:grid; gap:22px; }
.widget { background:var(--tbl-panel); border:1px solid var(--tbl-border); border-top:3px solid var(--tbl-green-700); padding:20px; }
.widget-title { margin:-20px -20px 18px; padding:12px 18px; color:#fff; background:linear-gradient(90deg,#174d28,#102f1a); font-family:Georgia,serif; font-size:1.12rem; }
.widget ul { list-style:none; margin:0; padding:0; }
.widget li { padding:9px 0; border-bottom:1px solid var(--tbl-border); }
.widget li:last-child { border-bottom:0; }
.widget a { text-decoration:none; }

.entry-header { max-width:var(--tbl-reading); margin:0 auto 26px; }
.entry-title { color:#fff; font-family:Georgia,serif; font-size:clamp(2.4rem,6vw,4.7rem); line-height:1.02; letter-spacing:-.04em; margin:0 0 18px; }
.entry-featured { width:min(100%, 1060px); margin:0 auto 34px; }
.entry-featured img { width:100%; max-height:620px; object-fit:cover; border:1px solid var(--tbl-border); box-shadow:var(--tbl-shadow); }
.entry-content { max-width:var(--tbl-reading); margin-inline:auto; color:#d8ded9; font-family:Georgia, "Times New Roman", serif; font-size:1.12rem; }
.entry-content > * { margin-top:0; margin-bottom:1.45em; }
.entry-content h2, .entry-content h3, .entry-content h4 { color:#fff; line-height:1.2; margin-top:1.8em; }
.entry-content blockquote { margin-inline:0; padding:18px 24px; border-left:5px solid var(--tbl-green-500); background:rgba(47,139,73,.08); font-size:1.16em; }
.entry-content img { border-radius:3px; }
.entry-footer { max-width:var(--tbl-reading); margin:34px auto 0; padding-top:22px; border-top:1px solid var(--tbl-border); }

.archive-header { margin-bottom:28px; }
.archive-title { margin:0 0 6px; color:#fff; font-family:Georgia,serif; font-size:clamp(2rem,5vw,3.8rem); }
.pagination { margin-top:30px; }
.nav-links { display:flex; gap:8px; flex-wrap:wrap; }
.page-numbers { display:inline-block; padding:9px 13px; border:1px solid var(--tbl-border); text-decoration:none; background:var(--tbl-panel); }
.page-numbers.current { background:var(--tbl-green-700); color:#fff; }

.site-footer { border-top:1px solid var(--tbl-border); background:#070a08; }
.tbl-footer-widgets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding-block:42px; }
.tbl-footer-bottom { padding:20px 0 30px; border-top:1px solid var(--tbl-border); color:var(--tbl-silver-400); font-size:.83rem; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

@media (max-width: 900px) {
  .tbl-home-grid, .tbl-content-grid { grid-template-columns:1fr; }
  .tbl-tagline { display:none; }
  .tbl-footer-widgets { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  body { font-size:16px; }
  .tbl-shell { width:min(calc(100% - 22px), var(--tbl-content)); }
  .tbl-masthead-inner { min-height:120px; padding-block:22px; }
  .tbl-topline .tbl-shell { justify-content:center; text-align:center; }
  .tbl-topline .tbl-heritage { display:none; }
  .menu-toggle { display:block; }
  .primary-navigation .menu { display:none; flex-direction:column; }
  .primary-navigation.toggled .menu { display:flex; }
  .primary-navigation .menu > li { width:100%; border-top:1px solid rgba(255,255,255,.08); }
  .tbl-hero { min-height:420px; }
  .tbl-story { grid-template-columns:105px minmax(0,1fr); gap:14px; padding:16px; }
  .tbl-story p { display:none; }
  .tbl-feature-grid { grid-template-columns:1fr; }
  .entry-content { font-size:1.04rem; }
}