/*
 * ═══════════════════════════════════════════════════════════════
 *  RAGE X INTELLIGENCE — ULTRA VISUAL SYSTEM  v2.7
 *  ragex-ultra.css  |  Theme v27 — Decode. Dominate. Deliver.
 *  Loaded last — wins all specificity
 *
 *  V27 CHANGES:
 *  ✦ READING PROGRESS BAR — top:0, Intel Blue→Tactical Yellow gradient
 *  ✦ HEADER/NAV — desktop width fix, max 1200px, properly contained
 *  ✦ COLOR BALANCE — Red/Blue/Yellow used purposefully by role
 *  ✦ CARDS — tricolor glow system (blue=default, red=alert, gold=nuclear)
 *  ✦ SECTION HEADERS — animated dual-color accent lines
 *  ✦ BADGES — tricolor system (red=breaking, blue=intel, gold=exclusive)
 *  ✦ FOOTER — tricolor top border, depth reveal
 *  ✦ TYPOGRAPHY — H3 blue accent, blockquote intel-blue
 *  ✦ LIGHT MODE — full v27 parity
 * ═══════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════
   01  DESIGN TOKENS — V27 SYSTEM
   ═══════════════════════════════════════════════════════════════ */
:root {
  --rx-r-sharp:  0px;
  --rx-r-sm:     3px;
  --rx-r-card:   6px;
  --rx-r-pill:   20px;

  --rx-red:        #9A0000;
  --rx-blue:       #4A90E2;
  --rx-yellow:     #CCAA00;
  --rx-red-dim:    rgba(154,0,0,0.5);
  --rx-blue-dim:   rgba(74,144,226,0.45);
  --rx-yellow-dim: rgba(204,170,0,0.5);

  --rx-shadow-card:      0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  --rx-shadow-hover:     0 6px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
  --rx-shadow-red-glow:  0 0 0 1px rgba(154,0,0,0.35), 0 6px 28px rgba(0,0,0,0.55);
  --rx-shadow-blue-glow: 0 0 0 1px rgba(74,144,226,0.35), 0 6px 28px rgba(0,0,0,0.5);
  --rx-shadow-gold-glow: 0 0 0 1px rgba(204,170,0,0.35), 0 6px 28px rgba(0,0,0,0.5);
  --rx-shadow-deep:      0 16px 48px rgba(0,0,0,0.8), 0 4px 12px rgba(0,0,0,0.5);
  --rx-shadow-header:    0 2px 32px rgba(0,0,0,0.6);
  --rx-shadow-widget:    0 1px 4px rgba(0,0,0,0.35), 0 4px 20px rgba(0,0,0,0.2);

  --rx-t-instant: 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --rx-t-quick:   0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --rx-t-smooth:  0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --rx-t-entry:   0.4s  cubic-bezier(0.16, 1, 0.3, 1);
  --rx-t-spring:  0.5s  cubic-bezier(0.34, 1.56, 0.64, 1);

  --rx-anim-play: running;
}


/* ═══════════════════════════════════════════════════════════════
   02  READING PROGRESS BAR — V27 FIXED
   FIX 1: top: 0 — sits at absolute viewport top (not mid-page)
   FIX 2: Intel Blue → Tactical Yellow gradient (not all red)
   FIX 3: z-index: 999999 — above ticker and header
   ═══════════════════════════════════════════════════════════════ */
.reading-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0;
  height: 3px !important;
  width: 0;
  z-index: 999999 !important;
  pointer-events: none;
  opacity: 0;
  transform-origin: left center;

  background: linear-gradient(
    90deg,
    #1B365D    0%,
    #4A90E2   35%,
    #5ABBE8   60%,
    #A8B800   80%,
    #CCAA00  100%
  ) !important;
  background-size: 200% 100%;

  box-shadow:
    0 0 6px rgba(74,144,226,0.8),
    0 0 14px rgba(74,144,226,0.25),
    0 1px 0 rgba(0,0,0,0.6) !important;

  transition:
    width 0.06s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.3s ease,
    box-shadow 0.4s ease;
}

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

.reading-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60px;
  width: 60px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%
  );
  animation: rx-scan-line 2.4s ease-in-out infinite;
  animation-play-state: var(--rx-anim-play);
}

/* Near 100%: glow shifts to gold */
.reading-progress[style*="width: 9"],
.reading-progress[style*="width: 10"] {
  box-shadow:
    0 0 8px rgba(204,170,0,0.8),
    0 0 18px rgba(204,170,0,0.35),
    0 1px 0 rgba(0,0,0,0.6) !important;
}


/* ═══════════════════════════════════════════════════════════════
   03  HEADER — V27 DESKTOP WIDTH FIX + GLASS MORPHISM
   FIX: header-inner constrained to 1200px, balanced, no overflow.
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  transition:
    box-shadow var(--rx-t-smooth),
    background var(--rx-t-smooth),
    backdrop-filter var(--rx-t-smooth);
  will-change: box-shadow;
}

.header-inner {
  max-width: var(--container-xl) !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  position: relative;
  gap: 16px;
}

.site-header.is-scrolled {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--rx-shadow-header);
}

/* V27: Gold top-edge — subtle brand identity line */
.site-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(204,170,0,0.4) 20%,
    rgba(204,170,0,0.15) 50%,
    rgba(204,170,0,0.4) 80%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Scanline texture */
.header-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 4px
  );
  pointer-events: none;
  z-index: 0;
}

.site-logo {
  transition: opacity var(--rx-t-quick);
}
.site-logo:hover {
  opacity: 0.85;
}

/* V27: LIVE badge — Intel Blue (blue = live intel feed) */
.header-live {
  background: rgba(74,144,226,0.1);
  border: 1px solid rgba(74,144,226,0.3);
  border-radius: var(--rx-r-sm);
  color: #4A90E2;
  font-size: 9px;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.header-live__dot {
  width: 6px;
  height: 6px;
  background: #4A90E2;
  border-radius: 50%;
  animation: rx-pulse-dot 1.6s ease-in-out infinite;
  animation-play-state: var(--rx-anim-play);
  box-shadow: 0 0 6px rgba(74,144,226,0.7);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   04  BREAKING TICKER — REFINED
   ═══════════════════════════════════════════════════════════════ */
.rx-ticker,
.breaking-ticker {
  border-bottom: 1px solid rgba(154,0,0,0.3);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.rx-ticker__badge,
.breaking-ticker__badge {
  border-radius: var(--rx-r-sharp);
  letter-spacing: 0.16em;
  box-shadow: 0 0 8px rgba(154,0,0,0.4);
}

.breaking-ticker__item a:hover,
.rx-ticker__item a:hover {
  color: var(--rx-yellow);
  text-shadow: 0 0 12px rgba(204,170,0,0.4);
}

.rx-ticker__fade-r {
  background: linear-gradient(to right, transparent, var(--header-bg, #000) 80%);
  width: 80px;
}


/* ═══════════════════════════════════════════════════════════════
   05  NAVIGATION — V27 DESKTOP FIX + YELLOW HOVER / RED ACTIVE
   FIX: nav wrap matches header 1200px container.
   UPGRADE: hover = yellow underline; active = red underline.
   ═══════════════════════════════════════════════════════════════ */
.nav-primary__wrap {
  max-width: var(--container-xl) !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
}

.nav-primary__menu > li > a {
  position: relative;
  border-bottom: none !important;
  padding: 0 16px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--nav-item, #b8b8b8);
  transition: color var(--rx-t-quick);
  min-height: var(--nav-h);
}

/* Underline: grows from center on hover = YELLOW */
.nav-primary__menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--rx-yellow);
  transform: translateX(-50%);
  transition: width var(--rx-t-smooth);
  border-radius: 1px 1px 0 0;
}

.nav-primary__menu > li > a:hover::after {
  width: 100%;
  box-shadow: 0 0 8px rgba(204,170,0,0.5);
}

/* Active page = RED underline (stronger identity) */
.nav-primary__menu > li.current-menu-item > a::after,
.nav-primary__menu > li.current-menu-ancestor > a::after,
.nav-primary__menu > li.current-category-ancestor > a::after,
.nav-primary__menu > li.current_page_item > a::after,
.nav-primary__menu > li.current-post-ancestor > a::after,
.nav-primary__menu > li.active > a::after {
  width: 100%;
  background: var(--rx-red);
  box-shadow: 0 0 10px rgba(154,0,0,0.6);
  transition: none;
}

.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-post-ancestor > a,
.nav-primary__menu > li.active > a {
  color: #fff;
}

/* Sub-menu */
.nav-primary__menu .sub-menu {
  border-radius: 0 0 var(--rx-r-sm) var(--rx-r-sm);
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
  border-top: 2px solid var(--rx-red-dim);
}

.nav-primary__menu .sub-menu li a {
  transition: all var(--rx-t-quick);
  border-left: 2px solid transparent;
}

.nav-primary__menu .sub-menu li a:hover {
  border-left-color: var(--rx-yellow);
  padding-left: 20px;
  color: var(--rx-yellow);
}


/* ═══════════════════════════════════════════════════════════════
   06  HERO SECTION — CINEMATIC DEPTH
   ═══════════════════════════════════════════════════════════════ */
.hero-main {
  border-radius: var(--rx-r-card) var(--rx-r-card) 0 0;
  box-shadow: var(--rx-shadow-deep);
  overflow: hidden;
}

.hero-main__img {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hero-main:hover .hero-main__img {
  transform: scale(1.04);
}

.hero-main__overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.95)    0%,
    rgba(0,0,0,0.7)     25%,
    rgba(10,20,40,0.2)  60%,
    transparent         100%
  );
}

/* V27: Dual-color bottom edge — red fades to blue */
.hero-main__body::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--rx-red)  0%,
    var(--rx-blue) 50%,
    transparent    100%
  );
  z-index: 4;
}

.hero-main__title {
  text-shadow:
    0 2px 4px rgba(0,0,0,0.8),
    0 4px 16px rgba(0,0,0,0.6),
    0 0 48px rgba(0,0,0,0.4);
}

.hero-main__action {
  border-radius: var(--rx-r-sm);
  transition: all var(--rx-t-quick);
  backdrop-filter: blur(4px);
}

.hero-main__action--primary { box-shadow: 0 0 16px rgba(154,0,0,0.4); }
.hero-main__action--primary:hover {
  box-shadow: 0 0 24px rgba(154,0,0,0.6);
  transform: translateY(-1px);
}

.hero-side__item {
  border-radius: var(--rx-r-card);
  overflow: hidden;
  box-shadow: var(--rx-shadow-card);
  transition: box-shadow var(--rx-t-smooth), transform var(--rx-t-smooth);
}

.hero-side__item:hover {
  box-shadow: var(--rx-shadow-hover);
  transform: translateY(-2px);
}

.hero-side__img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.hero-side__item:hover .hero-side__img { transform: scale(1.06); }


/* ═══════════════════════════════════════════════════════════════
   07  ARTICLE CARDS — TRICOLOR GLOW SYSTEM
   Default: blue glow  |  Alert: red glow  |  Nuclear/Report: gold
   ═══════════════════════════════════════════════════════════════ */
.article-card {
  border-radius: var(--rx-r-card);
  box-shadow: var(--rx-shadow-card);
  border: 1px solid var(--card-border);
  transition:
    transform      var(--rx-t-smooth),
    box-shadow     var(--rx-t-smooth),
    border-color   var(--rx-t-quick);
  will-change: transform, box-shadow;
  animation: rx-card-enter 0.5s var(--rx-t-entry) both;
  animation-play-state: var(--rx-anim-play);
}

/* V27: Default hover = BLUE (not red — red is reserved for alerts) */
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--rx-shadow-blue-glow);
  border-color: rgba(74,144,226,0.4);
}

.article-card__img-wrap {
  border-radius: var(--rx-r-card) var(--rx-r-card) 0 0;
  overflow: hidden;
}

.article-card__img-wrap img,
.article-card .wp-post-image {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.article-card:hover .article-card__img-wrap img,
.article-card:hover .wp-post-image { transform: scale(1.07); }

/* Staggered entrance */
.article-grid .article-card:nth-child(1) { animation-delay: 0.00s; }
.article-grid .article-card:nth-child(2) { animation-delay: 0.06s; }
.article-grid .article-card:nth-child(3) { animation-delay: 0.12s; }
.article-grid .article-card:nth-child(4) { animation-delay: 0.18s; }
.article-grid .article-card:nth-child(5) { animation-delay: 0.24s; }
.article-grid .article-card:nth-child(6) { animation-delay: 0.30s; }
.article-grid .article-card:nth-child(7) { animation-delay: 0.36s; }
.article-grid .article-card:nth-child(8) { animation-delay: 0.42s; }

/* Alert cards = RED */
.article-card--alert,
.cat-alerts .article-card,
.category-alerts .article-card {
  border-left: 3px solid var(--rx-red) !important;
  box-shadow: var(--rx-shadow-card), inset 3px 0 0 rgba(154,0,0,0.15);
}
.article-card--alert:hover,
.cat-alerts .article-card:hover {
  box-shadow: var(--rx-shadow-red-glow);
  border-color: rgba(154,0,0,0.5);
  border-left-color: var(--rx-red) !important;
}

/* Nuclear/Report cards = GOLD */
.cat-nuclear .article-card:hover,
.category-nuclear-dynamics .article-card:hover,
.cat-reports .article-card:hover {
  box-shadow: var(--rx-shadow-gold-glow);
  border-color: rgba(204,170,0,0.4);
}

.article-list-item {
  border-radius: var(--rx-r-sm);
  transition: background var(--rx-t-quick), padding-left var(--rx-t-quick);
}

.article-list-item:hover {
  background: rgba(74,144,226,0.03);
  padding-left: 6px;
}

.cat-section-featured {
  border-radius: var(--rx-r-card);
  box-shadow: var(--rx-shadow-card);
  transition: transform var(--rx-t-smooth), box-shadow var(--rx-t-smooth);
}

.cat-section-featured:hover {
  transform: translateY(-3px);
  box-shadow: var(--rx-shadow-hover);
}

.cat-section-featured__thumb {
  border-radius: var(--rx-r-card) var(--rx-r-card) 0 0;
  overflow: hidden;
}

.cat-section-list__item {
  border-radius: var(--rx-r-card);
  box-shadow: var(--rx-shadow-card);
  transition: transform var(--rx-t-smooth), box-shadow var(--rx-t-smooth), border-color var(--rx-t-quick);
}

.cat-section-list__item:hover {
  transform: translateX(3px);
  box-shadow: var(--rx-shadow-hover);
  border-color: rgba(74,144,226,0.35);
}

.nd-grid {
  border-radius: var(--rx-r-card);
  overflow: hidden;
  box-shadow: var(--rx-shadow-card);
}

.nd-cards .article-card { animation: rx-card-enter 0.5s var(--rx-t-entry) both; }
.nd-cards .article-card:nth-child(1) { animation-delay: 0.05s; }
.nd-cards .article-card:nth-child(2) { animation-delay: 0.11s; }
.nd-cards .article-card:nth-child(3) { animation-delay: 0.17s; }
.nd-cards .article-card:nth-child(4) { animation-delay: 0.23s; }


/* ═══════════════════════════════════════════════════════════════
   08  SECTION HEADERS — DUAL-COLOR ACCENT
   ═══════════════════════════════════════════════════════════════ */
.section-header {
  margin-bottom: 16px;
  padding-bottom: 10px;
  position: relative;
}

/* V27: Red + Blue dual accent line */
.section-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(
    90deg,
    var(--rx-red)  0px,
    var(--rx-red)  32px,
    var(--rx-blue) 32px,
    var(--rx-blue) 56px,
    transparent    56px
  );
  animation: rx-accent-grow 0.6s 0.2s var(--rx-t-entry) forwards;
  animation-play-state: var(--rx-anim-play);
}

.homepage-cat-section__header::before {
  transition: width 0.4s var(--rx-t-entry);
}

.hero-command__metric {
  border-radius: var(--rx-r-sm);
  transition: background var(--rx-t-quick), border-color var(--rx-t-quick), transform var(--rx-t-smooth);
}

.hero-command__metric:hover {
  background: var(--bg-s3);
  border-color: var(--border-mid);
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════
   09  TYPOGRAPHY — EDITORIAL GRADE
   ═══════════════════════════════════════════════════════════════ */
.article-body.has-dropcap > p:first-of-type::first-letter {
  font-size: 4.2em;
  line-height: 0.82;
  margin: 6px 12px -2px 0;
  color: var(--rx-red);
  text-shadow: 0 0 24px rgba(154,0,0,0.3);
}

.article-body h2,
.rx-article .article-body h2 {
  border-left-color: var(--rx-red) !important;
  position: relative;
  transition: padding-left var(--rx-t-smooth);
}

.article-body h2:hover,
.rx-article .article-body h2:hover {
  padding-left: 20px !important;
}

/* V27: H3 — Intel Blue accent (sub-section = informational) */
.article-body h3,
.rx-article .article-body h3 {
  border-left: 2px solid var(--rx-blue);
  padding-left: 10px;
  transition: padding-left var(--rx-t-smooth);
}

/* V27: Blockquote — Intel Blue (sourcing = intelligence) */
.article-body blockquote,
.rx-article .article-body blockquote {
  border-left: 4px solid var(--rx-blue);
  border-radius: 0 var(--rx-r-sm) var(--rx-r-sm) 0;
  box-shadow: inset 4px 0 0 rgba(74,144,226,0.08), 0 2px 12px rgba(0,0,0,0.12);
  background: rgba(74,144,226,0.04);
}

.article-body hr,
.rx-article .article-body hr {
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--rx-red) 0%,
    var(--rx-blue) 50%,
    transparent 100%
  );
  opacity: 1; border: none;
  margin: 2.8em 0;
  animation: rx-hr-grow 0.8s var(--rx-t-entry) both;
  animation-play-state: var(--rx-anim-play);
}

/* V27: Article deck — blue accent (intel = blue) */
.rx-article__deck {
  border-left: 3px solid var(--rx-blue) !important;
  padding-left: 20px !important;
  border-radius: 0 var(--rx-r-sm) var(--rx-r-sm) 0;
  background: rgba(74,144,226,0.04);
}

.rx-byline__avatar {
  transition: border-color var(--rx-t-smooth), box-shadow var(--rx-t-smooth);
}

.rx-byline:hover .rx-byline__avatar {
  border-color: var(--rx-blue);
  box-shadow: 0 0 12px rgba(74,144,226,0.35);
}

/* Tags — blue family */
.article-tag {
  border-radius: var(--rx-r-pill);
  transition: all var(--rx-t-quick);
}

.article-tag:hover {
  background: rgba(74,144,226,0.1);
  border-color: var(--rx-blue);
  color: var(--rx-blue);
  transform: translateY(-1px);
}

/* Share buttons */
.share-btn {
  border-radius: var(--rx-r-sm);
  transition: all var(--rx-t-quick);
}

.share-btn:hover {
  background: rgba(74,144,226,0.08);
  border-color: var(--rx-blue);
  transform: translateY(-1px);
}

/* Post nav */
.post-nav__item {
  border-radius: var(--rx-r-card);
  transition: all var(--rx-t-smooth);
}

.post-nav__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--rx-shadow-hover);
  border-color: rgba(74,144,226,0.3);
}

/* Author box — blue top border (credibility = intel) */
.author-box {
  border-radius: var(--rx-r-card);
  border-top: 2px solid var(--rx-blue) !important;
  border-left: none !important;
  box-shadow: var(--rx-shadow-card);
}

.author-box__avatar {
  border-radius: 50%;
  transition: transform var(--rx-t-smooth), box-shadow var(--rx-t-smooth);
}

.author-box:hover .author-box__avatar {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(74,144,226,0.3);
}


/* ═══════════════════════════════════════════════════════════════
   10  SIDEBAR — BLUE-ACCENTED DEPTH
   ═══════════════════════════════════════════════════════════════ */
.widget {
  border-radius: var(--rx-r-card);
  box-shadow: var(--rx-shadow-widget);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow var(--rx-t-smooth);
  animation: rx-card-enter 0.5s var(--rx-t-entry) both;
  animation-play-state: var(--rx-anim-play);
}

.widget:hover { box-shadow: 0 4px 28px rgba(0,0,0,0.45); }

.sidebar__sticky .widget:nth-child(1) { animation-delay: 0.1s; }
.sidebar__sticky .widget:nth-child(2) { animation-delay: 0.2s; }
.sidebar__sticky .widget:nth-child(3) { animation-delay: 0.3s; }
.sidebar__sticky .widget:nth-child(4) { animation-delay: 0.4s; }

/* V27: Widget title — blue underline (informational) */
.widget .widget-title {
  letter-spacing: 0.18em !important;
  border-bottom: 1px solid rgba(74,144,226,0.3) !important;
}

/* Alert widget keeps red */
.widget--alerts .widget-title,
.alert-panel .widget-title {
  border-bottom: 1px solid rgba(154,0,0,0.4) !important;
}

.alert-panel {
  border-radius: var(--rx-r-card);
  border-left: 3px solid var(--rx-red) !important;
}

.alert-panel__item-dot {
  animation: rx-alert-pulse 2s ease-in-out infinite;
  animation-play-state: var(--rx-anim-play);
}

.trending-item__num {
  transition: color var(--rx-t-smooth), transform var(--rx-t-smooth);
}

.trending-item:hover .trending-item__num {
  color: var(--rx-blue);
  transform: scale(1.12);
}

.trending-item {
  border-radius: var(--rx-r-sm);
  transition: background var(--rx-t-quick), padding-left var(--rx-t-quick);
}

.trending-item:hover {
  background: rgba(74,144,226,0.03);
  padding-left: 4px;
}

.cat-list-item__count { border-radius: var(--rx-r-pill); }

.nl-input {
  border-radius: var(--rx-r-sm);
  transition: border-color var(--rx-t-quick), box-shadow var(--rx-t-quick);
}

.nl-input:focus {
  border-color: var(--rx-blue);
  box-shadow: 0 0 0 3px rgba(74,144,226,0.15);
}

.nl-submit {
  border-radius: var(--rx-r-sm);
  transition: background var(--rx-t-quick), transform var(--rx-t-quick), box-shadow var(--rx-t-quick);
  overflow: hidden;
}

.nl-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(154,0,0,0.4);
}

.nl-submit:active { transform: translateY(0); }


/* ═══════════════════════════════════════════════════════════════
   11  BADGES — TRICOLOR SYSTEM
   Red = Breaking/Alert/War
   Blue = Analysis/Intel/Defense/Global
   Gold = Exclusive/Nuclear/Report/Technology
   ═══════════════════════════════════════════════════════════════ */
.cat-badge {
  border-radius: var(--rx-r-sm);
  transition: box-shadow var(--rx-t-quick), transform var(--rx-t-quick);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 2px 6px;
  font-weight: 800;
  text-transform: uppercase;
}

.cat-badge--breaking,
.cat-badge--alert,
.cat-badge--war {
  background: var(--rx-red);
  color: #fff;
  box-shadow: 0 0 8px rgba(154,0,0,0.5);
  animation: rx-badge-breaking 2.4s ease-in-out infinite;
  animation-play-state: var(--rx-anim-play);
}

.cat-badge--analysis,
.cat-badge--intel,
.cat-badge--intelligence,
.cat-badge--defense,
.cat-badge--global {
  background: rgba(74,144,226,0.15);
  color: #4A90E2;
  border: 1px solid rgba(74,144,226,0.4);
  box-shadow: 0 0 6px rgba(74,144,226,0.2);
}

.cat-badge--exclusive,
.cat-badge--nuclear,
.cat-badge--report,
.cat-badge--technology {
  background: rgba(204,170,0,0.12);
  color: #CCAA00;
  border: 1px solid rgba(204,170,0,0.4);
  animation: rx-badge-exclusive 3s ease-in-out infinite;
  animation-play-state: var(--rx-anim-play);
}

.live-wire__breaking {
  border-radius: var(--rx-r-sm);
  background: var(--rx-red);
  animation: rx-badge-breaking 1.8s ease-in-out infinite;
  animation-play-state: var(--rx-anim-play);
}

.rx-byline__updated {
  border-radius: var(--rx-r-sm);
  background: rgba(204,170,0,0.12);
  color: #CCAA00;
  border: 1px solid rgba(204,170,0,0.3);
}


/* ═══════════════════════════════════════════════════════════════
   12  LIVE WIRE — PULSE REFINEMENT
   ═══════════════════════════════════════════════════════════════ */
.live-wire__pulse {
  position: relative;
  animation: rx-pulse-dot 1.6s ease-in-out infinite;
  animation-play-state: var(--rx-anim-play);
}

.live-wire__pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--rx-red);
  animation: rx-ripple 1.6s ease-out infinite;
  animation-play-state: var(--rx-anim-play);
}

.live-wire__headline {
  transition: color var(--rx-t-quick);
}

/* V27: gold hover (not red — red = danger/alert only) */
.live-wire__headline:hover { color: var(--rx-yellow); }

.live-wire__item {
  transition: background var(--rx-t-quick);
  border-radius: var(--rx-r-sm);
}

.live-wire__item:hover { background: rgba(74,144,226,0.03); }


/* ═══════════════════════════════════════════════════════════════
   13  BUTTONS & INPUTS — TACTILE FEEL
   ═══════════════════════════════════════════════════════════════ */
.header-search__input {
  border-radius: var(--rx-r-sm);
  transition: width 0.3s var(--rx-t-entry), border-color var(--rx-t-quick), box-shadow var(--rx-t-quick), background var(--rx-t-quick);
}

/* V27: search focus = blue ring */
.header-search__input:focus {
  border-color: var(--rx-blue);
  box-shadow: 0 0 0 2px rgba(74,144,226,0.25), 0 4px 12px rgba(0,0,0,0.3);
}

.theme-toggle__btn {
  border-radius: var(--rx-r-sm);
  transition: background var(--rx-t-quick), border-color var(--rx-t-quick), transform var(--rx-t-quick);
}

.theme-toggle__btn:hover { transform: rotate(12deg); }

.scroll-top {
  border-radius: var(--rx-r-sm);
  transition: opacity 0.3s, visibility 0.3s, background var(--rx-t-quick), transform var(--rx-t-smooth), box-shadow var(--rx-t-smooth);
}

.scroll-top:hover {
  background: #c41c1c;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(154,0,0,0.5);
}


/* ═══════════════════════════════════════════════════════════════
   14  IMAGES — SOPHISTICATED FADE-IN
   ═══════════════════════════════════════════════════════════════ */
.article-card__thumb img,
.cat-section-featured__thumb img,
.hero-main__img,
.hero-side__img,
.article-hero .wp-post-image {
  opacity: 0;
  animation: rx-img-fade 0.4s ease forwards;
  animation-play-state: var(--rx-anim-play);
}

.article-card:nth-child(1) .article-card__thumb img { animation-delay: 0.05s; }
.article-card:nth-child(2) .article-card__thumb img { animation-delay: 0.10s; }
.article-card:nth-child(3) .article-card__thumb img { animation-delay: 0.15s; }
.article-card:nth-child(4) .article-card__thumb img { animation-delay: 0.20s; }


/* ═══════════════════════════════════════════════════════════════
   15  INTEL STRIP TABS — BLUE ACTIVE STATE
   ═══════════════════════════════════════════════════════════════ */
.intel-strip__tab {
  border-radius: var(--rx-r-sm);
  transition: all var(--rx-t-quick);
  position: relative;
}

.intel-strip__tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--rx-blue);
  transform: translateX(-50%);
  transition: width var(--rx-t-smooth);
}

.intel-strip__tab:hover::after,
.intel-strip__tab.is-active::after { width: 100%; }

.intel-strip__tab.is-active {
  color: #fff;
  background: rgba(74,144,226,0.12);
}


/* ═══════════════════════════════════════════════════════════════
   16  FOOTER — V27 TRICOLOR TOP BORDER + DEPTH
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  overflow: hidden;
}

/* V27: Tricolor footer top border — all three brand colors */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--rx-red)    0%,
    var(--rx-red)    33.3%,
    var(--rx-blue)   33.3%,
    var(--rx-blue)   66.6%,
    var(--rx-yellow) 66.6%,
    var(--rx-yellow) 100%
  );
  opacity: 0.65;
}

.footer-brand__tagline {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rx-yellow);
  opacity: 0.7;
}

.footer-col a:hover { color: var(--rx-blue); }
.footer-bottom { border-top: 1px solid rgba(74,144,226,0.1); }

.footer-social a {
  transition: color var(--rx-t-quick), transform var(--rx-t-quick);
}

.footer-social a:hover {
  color: var(--rx-yellow);
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════
   17  WAR TRACKER — STATUS COLORS
   ═══════════════════════════════════════════════════════════════ */
.war-tracker__status--active    { color: var(--rx-red);    border-color: rgba(154,0,0,0.4); }
.war-tracker__status--monitoring { color: var(--rx-yellow); border-color: rgba(204,170,0,0.4); }
.war-tracker__status--resolved  { color: var(--rx-blue);   border-color: rgba(74,144,226,0.4); }

.war-tracker__item {
  border-radius: var(--rx-r-card);
  transition: all var(--rx-t-smooth);
}

.war-tracker__item:hover {
  transform: translateX(4px);
  border-color: rgba(154,0,0,0.3);
}


/* ═══════════════════════════════════════════════════════════════
   18  LIGHT MODE — FULL V27 PARITY
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .reading-progress {
  box-shadow:
    0 0 6px rgba(74,144,226,0.6),
    0 0 14px rgba(74,144,226,0.2),
    0 1px 0 rgba(0,0,0,0.15) !important;
}

[data-theme="light"] .header-live {
  background: rgba(74,144,226,0.08);
  border-color: rgba(74,144,226,0.25);
}

[data-theme="light"] .article-card:hover {
  box-shadow: 0 0 0 1px rgba(74,144,226,0.25), 0 6px 24px rgba(0,0,0,0.1);
  border-color: rgba(74,144,226,0.35);
}

[data-theme="light"] .article-body blockquote,
[data-theme="light"] .rx-article .article-body blockquote {
  background: rgba(74,144,226,0.03);
  border-left-color: var(--rx-blue);
}

[data-theme="light"] .author-box {
  border-top: 2px solid var(--rx-blue) !important;
  border-left: none !important;
}

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

[data-theme="light"] .site-header::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(204,170,0,0.3) 20%,
    rgba(204,170,0,0.1) 50%,
    rgba(204,170,0,0.3) 80%,
    transparent 100%
  );
}

[data-theme="light"] .widget .widget-title {
  border-bottom-color: rgba(74,144,226,0.2) !important;
}

[data-theme="light"] .trending-item:hover .trending-item__num {
  color: var(--rx-blue);
}

[data-theme="light"] .site-footer::before {
  opacity: 0.45;
}

[data-theme="light"] .article-body h3,
[data-theme="light"] .rx-article .article-body h3 {
  border-left-color: var(--rx-blue);
}

[data-theme="light"] .article-tag:hover {
  background: rgba(74,144,226,0.08);
  border-color: var(--rx-blue);
  color: var(--rx-blue);
}


/* ═══════════════════════════════════════════════════════════════
   19  MOBILE — PRESERVED V27 FIXES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .reading-progress { height: 2px !important; }

  .header-inner,
  .nav-primary__wrap {
    padding: 0 16px !important;
  }
}

@media (max-width: 600px) {
  .article-card:hover { transform: none; } /* no lift on touch */
}


/* ═══════════════════════════════════════════════════════════════
   20  REDUCED MOTION — ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root { --rx-anim-play: paused; }

  .reading-progress,
  .article-card,
  .widget,
  .hero-main__img,
  .hero-side__img {
    animation: none !important;
    transition: none !important;
  }

  .article-card:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════
   21  KEYFRAMES LIBRARY — V27
   ═══════════════════════════════════════════════════════════════ */
@keyframes rx-card-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rx-accent-grow {
  from { width: 0; }
  to   { width: 56px; }
}

@keyframes rx-hr-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes rx-img-fade {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes rx-scan-line {
  0%   { left: -60px; }
  100% { left: 110%; }
}

@keyframes rx-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

@keyframes rx-ripple {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes rx-alert-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes rx-badge-breaking {
  0%, 100% { box-shadow: 0 0 8px rgba(154,0,0,0.5); }
  50%       { box-shadow: 0 0 16px rgba(154,0,0,0.8), 0 0 28px rgba(154,0,0,0.3); }
}

@keyframes rx-badge-exclusive {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 10px rgba(204,170,0,0.5); }
}