/*
 * ============================================================
 *  RAGE X — UI Enhancement Overrides
 *  File: ragex-ui-overrides.css
 *  Enqueue after: ragex-pro.css  (no !important unless noted)
 *
 *  HOW TO ADD TO WORDPRESS:
 *  Appearance → Customize → Additional CSS  (paste entire file)
 *  — or —
 *  Add to child theme style.css if you use one
 *  — or —
 *  Enqueue in functions.php:
 *    wp_enqueue_style('ragex-ui-overrides',
 *      get_template_directory_uri().'/ragex-ui-overrides.css',
 *      ['ragex-pro'], '1.0');
 *
 *  Every change is modular. To revert a section, delete it.
 * ============================================================
 */


/* ============================================================
   STEP 1 — TOKENS CONSOLIDATED INTO style.css :root (v27)
   All dimension tokens (--header-h, --nav-h, --ticker-h,
   --container-xl) are now set to final values directly in
   style.css :root. No overrides needed here.
   Nav text color tweaks kept below.
   ============================================================ */
:root {
  /* Brighter nav text */
  --nav-item: #b8b8b8;
  --nav-hover: #ffffff;
}


/* ============================================================
   STEP 2 — BREAKING NEWS TICKER
   Slimmer, more refined. Less glow, tighter text.
   ============================================================ */

/* Ticker rail height auto-inherits --ticker-h via line-height.
   These rules refine typography and reduce visual noise. */
.rx-ticker {
  height: var(--ticker-h);
  min-height: var(--ticker-h);
}

.rx-ticker__badge,
.breaking-ticker__badge {
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 0 10px;
}

/* The "BREAKING" label pulsing animation — keep but calm it */
@keyframes ticker-pulse {
  0%, 100% { opacity: 1; box-shadow: none; }
  50%       { opacity: 0.7; box-shadow: none; }  /* remove white glow entirely */
}

.rx-ticker__label {
  font-size: 10px;
  letter-spacing: 0.14em;
}

.breaking-ticker__item {
  font-size: 12px;           /* was 13px */
  letter-spacing: 0.04em;
  padding: 0 14px;           /* was 0 16px */
  line-height: var(--ticker-h);
}

.breaking-ticker__sep {
  font-size: 5px;
  padding: 0 8px;
}

/* Ticker links — keep white but remove glow on hover */
.breaking-ticker__item a:hover,
.rx-ticker__item a:hover {
  color: var(--tac-yellow);
  text-shadow: none;    /* was inheriting glow from some themes */
  border-bottom-color: var(--tac-yellow);
}


/* ============================================================
   STEP 3 — TYPOGRAPHY CLEANUP
   • Remove the red "reading line" underline effect from body text
   • Standardize paragraph spacing
   • Tighten line-height to readable-but-not-loose
   • Fix link colors inside articles
   ============================================================ */

/* Article body — base reading comfort */
.article-body,
.rx-article .article-body {
  font-size: 17px !important;   /* was 18px — slightly tighter for screen */
  line-height: 1.72 !important; /* was 1.82 — less airy */
}

.article-body > p,
.rx-article .article-body > p {
  margin-bottom: 1.3em;  /* was 1.5em */
}

/* CRITICAL: Article body links
   Current: intel-blue underline → rage-red hover
   Fix: keep intel-blue underline, softer hover (no jarring red flash) */
.article-body a,
.rx-article .article-body a {
  color: var(--intel-blue-light, #3a6aaa);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(58, 106, 170, 0.3);
  transition: color 0.15s, text-decoration-color 0.15s;
}

.article-body a:hover,
.rx-article .article-body a:hover {
  color: #5a8fcc;  /* lighter intel-blue — stays in blue family, no red */
  text-decoration-color: rgba(90, 143, 204, 0.6);
}

/* Reading progress bar — keep functional, remove the glow shadow */
.reading-progress {
  height: 2px;
  box-shadow: none;   /* was: 0 0 8px rgba(154,0,0,.5) */
  opacity: 0;
  transition: width 0.1s linear, opacity 0.2s;
}

.reading-progress.is-active {
  opacity: 1;
}

/* Deck / subtitle serif — subtle, not primary attention */
.rx-article__deck,
.article-header__subtitle {
  font-size: 17px !important;   /* was 18-19px */
  line-height: 1.55 !important;
}


/* ============================================================
   STEP 4 — COLOR & DIVIDER DISCIPLINE
   Red is reserved for: Alerts, Breaking, Active states.
   All other structural dividers → subtle dark gray.
   ============================================================ */

/* Widget title border-bottom: red → neutral steel */
.widget .widget-title {
  border-bottom: 1px solid var(--border-mid) !important;  /* was 2px red */
}

/* Exception: newsletter widget keeps its full red header — it's a CTA */
.widget-newsletter .widget-title {
  border-bottom: none !important;
}

/* Archive / category header strip: red → neutral */
.archive-header {
  border-bottom: 1px solid var(--border-mid);  /* was 2px rage-red */
}

/* Author box top accent: red → neutral */
.author-box {
  border-top: 2px solid var(--border-mid);  /* was 3px rage-red */
}

/* Nav bottom border: keep 2px red — this is intentional active-state branding */
/* .nav-primary — NOT changed */

/* Section header red accent (the 56px bottom underline) — keep, it's structural */
/* .section-header::after — NOT changed */

/* Sub-menu top border: soften from full rage-red to dim */
.nav-primary__menu .sub-menu {
  border-top-color: var(--rage-red-dim, #6b0000);  /* was var(--rage-red) — less aggressive */
}

/* Post pagination active page — keep red (it's a UI state) */
/* .page-numbers — NOT changed */

/* Pullquote — soften from full red to dim */
.wp-block-pullquote {
  border-top-color: var(--rage-red-dim, #6b0000);
  border-bottom-color: var(--rage-red-dim, #6b0000);
  background: rgba(154, 0, 0, 0.03);  /* was 0.05 */
}

/* H2 in article body — the left border red accent */
.article-body h2 {
  border-left-color: var(--rage-red-dim, #6b0000);  /* was full rage-red */
}


/* ============================================================
   STEP 5 — ALIGNMENT & GRID SYSTEM
   Enforce 1280px max-width across all wrapper containers.
   Consistent horizontal padding on all sections.
   ============================================================ */

.header-inner,
.nav-primary__wrap,
.hero-grid,
.layout-with-sidebar,
.layout-full,
.homepage-body__inner,
.footer-inner,
.archive-header > .container,
.container,
.container-xl {
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Hero grid inherits max-width — just force consistent padding */
.hero-grid {
  padding: 0 24px 32px;
}


/* ============================================================
   STEP 6 — NAVIGATION REFINEMENT
   Brighter text, cleaner hover, consistent spacing.
   ============================================================ */

.nav-primary {
  border-top: 1px solid var(--border);    /* light separator from header */
  border-bottom: 2px solid var(--rage-red); /* keep: brand anchor line */
}

/* Menu items: tighter padding for better fit in 40px nav-h */
.nav-primary__menu > li > a {
  padding: 0 16px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--nav-item);   /* now #b8b8b8 via Step 1 token */
  min-height: var(--nav-h);
}

/* Hover state — clean underline only, no extra glow */
.nav-primary__menu > li > a:hover,
.nav-primary__menu > li.current-menu-item > a,
.nav-primary__menu > li.current-menu-ancestor > a,
.nav-primary__menu > li.current-category-ancestor > a,
.nav-primary__menu > li.current_page_item > a,
.nav-primary__menu > li.current_page_ancestor > a,
.nav-primary__menu > li.current-post-ancestor > a,
.nav-primary__menu > li.active > a {
  color: #ffffff;
  border-bottom-color: var(--rage-red);
}

/* Sub-menu items — improve hover readability */
.nav-primary__menu .sub-menu li a {
  padding: 8px 16px;
  font-size: 11px;
  color: var(--text-s);
}

.nav-primary__menu .sub-menu li a:hover {
  color: var(--text-p);
  background: var(--bg-s3);
  border-left-color: var(--rage-red);
}


/* ============================================================
   STEP 7 — UI COMPONENT CONSISTENCY
   Unified height, padding, and border-radius for all controls.
   Target: 34px tall interactive elements, 2px radius.
   ============================================================ */

/* Search input */
.header-search__input {
  height: 34px;
  padding: 0 14px 0 34px;
  font-size: 12px;
  border-radius: 2px;         /* was 20px — match brand's flat aesthetic */
  width: 180px;
}

.header-search__input:focus {
  width: 240px;               /* was 280px */
  box-shadow: 0 0 0 2px rgba(154, 0, 0, 0.2);  /* was 3px, more subtle */
}

/* Theme toggle button — match search height */
.theme-toggle__btn,
.theme-toggle {
  height: 34px;
  min-width: 34px;
  border-radius: 2px;
}

/* Hamburger toggle — mobile */
.header-toggle {
  width: 34px;
  height: 34px;
  border-radius: 2px;
}

/* Header live badge */
.header-live {
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 4px 8px;
}


/* ============================================================
   STEP 8 — CONTENT HIERARCHY
   Headlines: stronger visual priority.
   Body: cleaner, reduced noise.
   Cards: tighten spacing, reduce clutter.
   ============================================================ */

/* Article card titles — slightly larger for visual priority */
.article-card__title {
  font-size: 14px !important;   /* was 15px — compensates for uppercase weight */
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
}

/* Card body — tighter internal gap */
.article-card__body {
  padding: 12px 14px 14px !important;  /* was 14px 16px 16px */
  gap: 6px !important;                 /* was 8px */
}

/* Card footer — thin clean separator */
.article-card__footer {
  padding-top: 8px;           /* was 10px */
  border-top-color: var(--border);
}

/* Card excerpt — one line only on compact grids */
.article-card__excerpt {
  font-size: 12px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  color: var(--text-s);
}

/* List item articles — tighter vertical rhythm */
.article-list-item {
  padding: 10px 0;            /* was 12px */
  gap: 12px;                  /* was 14px */
}

/* Section header — reduce margin-bottom slightly */
.section-header {
  margin-bottom: 16px;        /* was 20px */
  padding-bottom: 10px;       /* was 12px */
}

/* Article page H1 */
.article-header__title,
.entry-title {
  line-height: 1.08;
  letter-spacing: 0.01em;
}


/* ============================================================
   STEP 9 — SIDEBAR CLEANUP
   Remove heavy red widget borders.
   Match main content design system.
   Normalize spacing.
   ============================================================ */

/* Widget container — remove any leftover red borders */
.widget {
  border: 1px solid var(--card-border);  /* subtle, matches article cards */
  background: var(--widget-bg);
  overflow: hidden;
}

/* Widget title — was: 2px red border-bottom. Now: 1px steel gray (Step 4) */
/* (already handled in Step 4 — no duplicate needed) */

/* Alert panel — KEEP red left border: this is an alert, red is correct */
.alert-panel {
  border-left: 3px solid var(--rage-red);  /* was 4px — slight reduction */
}

/* Trending / list items inside widgets — breathing room */
.widget .article-list-item,
.trending-item {
  padding: 8px 0;
}

/* Category list in sidebar — remove excess weight */
.cat-list-item {
  border-bottom: 1px solid var(--border);
}

.cat-list-item:last-child {
  border-bottom: none;
}

/* Sidebar sticky position re-calculated from Step 1 tokens */
.sidebar__sticky {
  top: var(--sidebar-top);
  gap: 16px;   /* was inheriting gutter var — make explicit for stability */
}


/* ============================================================
   STEP 10 — LIGHT MODE PARITY
   Ensure all overrides apply cleanly to the light theme too.
   ============================================================ */
[data-theme="light"] .widget {
  border-color: var(--card-border);
}

[data-theme="light"] .article-body a,
[data-theme="light"] .rx-article .article-body a {
  color: var(--intel-blue, #1B365D);
  text-decoration-color: rgba(27, 54, 93, 0.35);
}

[data-theme="light"] .article-body a:hover,
[data-theme="light"] .rx-article .article-body a:hover {
  color: #1b4f8a;
  text-decoration-color: rgba(27, 54, 93, 0.7);
}

[data-theme="light"] .archive-header {
  border-bottom: 1px solid var(--border-mid);
}

[data-theme="light"] .author-box {
  border-top: 2px solid var(--border-mid);
}

[data-theme="light"] .nav-primary {
  border-bottom: 2px solid var(--rage-red);
}


/* ============================================================
   MOBILE RESPONSIVE — Preserve all fixes on small screens
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --header-h:   var(--header-h-mobile);
    --ticker-h:   var(--ticker-h-mobile);
  }

  .header-search__input {
    width: 160px;
  }

  .article-card__body {
    padding: 10px 12px 12px !important;
  }
}

@media (max-width: 600px) {
  .header-search__input {
    width: 0;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
  }

  /* On mobile, search is handled by the toggle button — hide inline field */
  .header-search__input:focus {
    width: 0;
  }
}


/* ============================================================
   OPTIONAL IMPROVEMENTS (disabled by default)
   Uncomment individual blocks to activate.
   ============================================================

   A. Subtle card hover lift instead of red border glow:
   ——————————————————————————————————————————
   .article-card:hover {
     border-color: var(--border-mid);
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
     transform: translateY(-1px);
     transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
   }

   B. Slightly warmer background for dark mode (less harsh than #0e0e0e):
   ——————————————————————————————————————————
   :root, [data-theme="dark"] {
     --bg-body: #111111;
     --bg-s1:   #171717;
   }

   C. Nav item hover with micro underline instead of border-bottom:
   ——————————————————————————————————————————
   .nav-primary__menu > li > a {
     border-bottom: 3px solid transparent;
     position: relative;
   }
   .nav-primary__menu > li > a::before {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 50%;
     width: 0;
     height: 2px;
     background: var(--rage-red);
     transition: width 0.2s ease, left 0.2s ease;
   }
   .nav-primary__menu > li > a:hover::before {
     left: 0;
     width: 100%;
   }

   D. Drop the reading-progress bar entirely (if you find it noisy):
   ——————————————————————————————————————————
   .reading-progress {
     display: none !important;
   }

   E. Wider readable text column on article pages:
   ——————————————————————————————————————————
   :root {
     --read-width: 720px;   -- uncomment and adjust (960px is current)
   }

   ============================================================ */