/*
Theme Name: Cinepress 3.0
Theme URI: 
Author: Cinesist
Author URI: 
Description: This is the One Source of Truth for the Cineverse hosted on Cinesist.com! All things will be handled here!
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 
Version: 1.0
License: GNU General Public License v2 or
License URI: http://www.gnu.org/licenses/
Template: blocksy
Text Domain: cinepress-3-0
Tags: custom-background, custom-menu

/*
-----------------
>>> TABLE OF CONTENTS:
1  - CSS Variables(root)
2 - General
3 - Icon Fonts
4 - Swiper Slider
5 - Header
6 - Post Entry
7 - Post Modules
8 - Blocks
9 - Single
10 - Archives
11 - Pages
12 - Footer
13 - Responsive
14 - Print
15 - Forms
16 - UI/UX
17 - Snarkive
18 - Buddypress - Not Implemented, Has a separate CSS file
19 - bbPress - Not Implemented, Has a separate CSS file
20 - WooCommerce - Not Implemented
-----------------
*/

/*
-----------------
1 - Cinesist Framework v1.0 CSS Variables(root)
-----------------
*/

/* ====================
     Fonts & Icons Import (Local Theme Root)
   ==================== */

/* --- Noto Color Emoji --- */
@font-face {
  font-family: 'Noto Color Emoji';
  /* Corrected: points to fonts folder inside cinepress theme root */
  src: url('fonts/NotoColorEmoji-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Work Sans (Variable Local) --- */
@font-face {
  font-family: 'Work Sans';
  /* Handles all weights 100-900 in one file */
  src: url('fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Work Sans (Variable Italic) --- */
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/WorkSans-Italic-VariableFont_wght.ttf')
    format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* 1. Force your fluid variables into the WordPress Preset variables */
  --wp--preset--spacing--xxs: var(--space-xxs);
  --wp--preset--spacing--xs: var(--space-xs);
  --wp--preset--spacing--sm: var(--space-sm);
  --wp--preset--spacing--md: var(--space-md);
  --wp--preset--spacing--lg: var(--space-lg);
  --wp--preset--spacing--xl: var(--space-xl);
  --wp--preset--spacing--xxl: var(--space-xxl);

  /* 2. Overpower Blocksy's internal spacing variables */
  --theme-content-spacing: var(--space-xxs) !important;
  --theme-block-gap: var(--space-xs) !important;

  /* ====================
     Fonts Declarations
    ==================== */
  --font-primary: 'Work Sans', sans-serif;
  --font-emoji: 'Noto Color Emoji', sans-serif;

  /* ====================
     Layouts & Widths
==================== */
  --layout-page-max-width: 137.142857rem;
  --layout-content-max-width: 116.071428rem;

  /* ====================
     Typography (Fluid)
     Base: 16px (html { font-size: 1rem; })
     Adjusted for Smaller Sizes
==================== */

  /* --- Headings --- */
  --font-h1: clamp(1.54rem, 4.5vw, 2.59rem);
  /* ~24.6px - 41.4px */
  --font-h2: clamp(1.22rem, 3.5vw, 2.03rem);
  /* ~19.6px - 32.5px */
  --font-h3: clamp(1.05rem, 3vw, 1.61rem);
  /* ~16.8px - 25.8px */
  --font-h4: clamp(0.81rem, 2.7vw, 1.33rem);
  /* ~12.9px - 21.3px */
  --font-h5: clamp(0.7rem, 2vw, 1.05rem);
  /* ~11.2px - 16.8px */
  --font-h6: clamp(0.63rem, 1.8vw, 0.77rem);
  /* ~10.1px - 12.3px */

  /* --- Body Text Scale --- */
  --font-body: clamp(1rem, 0.25vi + 0.95rem, 1.125rem);
  /* ~16px (Mobile) to 18px (Desktop) */

  --font-body-sm: clamp(0.875rem, 0.15vi + 0.85rem, 1rem);
  /* ~14px to 16px - Ideal for secondary content */

  --font-micro: 0.75rem;
  /* 12px - For legal fine print only */

  --font-caption: clamp(0.75rem, 0.1vi + 0.725rem, 0.875rem);
  /* ~12px to 14px - Minimum readable size for small details */

  --font-cta: clamp(1rem, 2vw + 0.5rem, 1.5rem);
  /* ~16px to 24px - Responsive button and action text */

  /* ====================
     Line Heights
==================== */
  --line-height-h1: 1.2;
  --line-height-h2: 1.3;
  --line-height-h3: 1.4;
  --line-height-h4: 1.5;
  --line-height-h5: 1.6;
  --line-height-h6: 1.7;
  --line-height-body: 1.5;
  --line-height-caption: 1.4;
  --line-height-cta: 1.5;

  /* ====================
     Fluid Spacing
==================== */
  --space-xxs: clamp(0.25rem, 0.5vw, 0.5rem);
  /* ~4px-8px */
  --space-xs: clamp(0.5rem, 0.8vw, 1rem);
  /* ~8px-16px */
  --space-sm: clamp(1rem, 1.2vw, 1.5rem);
  /* ~16px-24px */
  --space-md: clamp(1.5rem, 2vw, 2.5rem);
  /* ~24px-40px */
  --space-lg: clamp(2.5rem, 3.5vw, 4rem);
  /* ~40px-64px */
  --space-xl: clamp(4rem, 5vw, 6rem);
  /* ~64px-96px */
  --space-xxl: clamp(6rem, 8vw, 8rem);
  /* ~96px-128px */

  /* Over ride Blocksy */
  --theme-content-spacing: var(--space-xs) !important;

  /* ====================
  Foxiz Root Overrides
==================== */
  --em-mini: 1em;
  --rem-mini: 0.8rem;

  /* ====================
     Color Pallette
==================== */
  /* --- Brand Colors --- */
  --cinefox-black-spy: #1a1b1f;
  --cinefox-white-spy: #e5e5e5;
  --cinesist-dark-grey: #1a1a1a;
  --cinesist-middle-grey: #2a2a2a;
  --cinesist-light-grey: #cccccc;
  --cinesist-title-color: #ffffff;
  /* Makes Titles Gleam White */
  --cinesist-text-color: #f0f0f0;
  /* Off-white for general text */
  --cinesist-gold: #e2b304;
  /* Cinesist Gold for accents */
  --cinesist-red: #e50914;
  /* Cinesist Red for accents */
  --cinesist-border-color: rgba(255, 255, 255, 0.2);
  /* Subtle white border */
  --snarkive-purple: #d102d1;
  /* New: Devil Purple for specific elements */
  --snarkive-purple-accent: #792c85;
  /* New: Devil Purple accents */
  --snarkive-purple-alpha: rgba(121, 44, 133, 0.1);
  /* Subtle background for active states */
  --cinefox-orange: #dd7b45;
  /* CineFox Primary Fur Color */
  --cinefox-orange-accent: #d45f35;
  /* CineFox Auxillary Fur Color */
  --cinesist-gaming: #107c10;
  /* Used for all things Gaming Related */
  --cinesist-industry: #708090;
  /* Used for all things Industry Related */
  --cinesist-tv: #0078ae;
  /* Used for all things TV Related */
  --cinesist-info: #00ddff;
  /* Electric Blue */
  --cinesist-sucess: #7dce94;
  /* Lime Green */
  --cinesist-warning: #fff685;
  /*Biohazard Yellow */
  --cinesist-danger: #f0217d;
  /* Comicbook Pink */
  --cinebar-red: #ff0d0d;
  /* Red Rating Bar */
  --cinebar-orange: #ff5612;
  /*orange Rating Bar */
  --cinebar-yellow: #ffde21;
  /* Yellow Rating Bar */
  --cinebar-midgreen: #c7e811;
  /* Mid Green Rating Bar */
  --cinebar-green: #50a735;
  /* Green Rating Bar */
  --brand-facebook: #1877f2;
  --brand-x-twitter: #000000;
  --brand-youtube: #ff0000;

  /* ========================================= */
  /* == Spy Vs Spy Theme (Light/Dark Mode) == */
  /* ========================================= */

  /* Light Mode: White Spy Icon */
  --cinesist-card-logo: url('https://www.cinesist.com/wp-content/uploads/2025/10/Cinesist-Black-and-Purple-Icon-Logomark.png');

  /* ====================
     White Spy Colors For Light Mode
==================== */

  /* --- Cinesist Light Branded Colors --- */
  --gc-color: #d45f35;
  /* Primary Orange Color */
  --body-fcolor: #1a1b1f;
  /* Body Black Spy Flex Color */
  --gc-spy: #e5e5e5;
  /* White Spy Color */
  --gc-gold: #e2b304;
  /* Cinesist Gold Color */
  --gc-red: #e50914;
  /* Cinesist Red Color */
  --gc-snarkive-purple: #d102d1;
  /* Snarkive Purple Color */
  --gc-snarkive-accent: #792c85;
  /* Snarkive Purple Accent Color */
  --bbp-white: #e5e5e5;
  /* Custom variable for bbPress white background */
  --padding-c40: 10px 40px;
  --flex-desc: #000;
  /* Custom variable for form description text color */
  --cs-spy: #e5e5e5;
  /* Custom variable for Cinesist White Spy color */
  --btn-primary: var(--flex-snarkive);
  /* Snarkive Purple to Orange */
  --btn-primary-h: var(--flex-snarkive-rev);
  /* Snarkive Purple Reverse on Hover */

  /* --- Flexible Colors --- */
  --flex-overlay-1: rgba(255, 2551, 255, 0.4);
  --flex-icon-1: rgba(18, 43, 70, 0.5);
  --contrast-1: #ffffff;
  --contrast-2: #eaeaea;
  --flex-bg-color: #fafbfc;
  /* Black BG */
  /* Black Spy Color for Day Time Adapt*/
  --flex-bg-color-2: #e5e5e5;
  /* White Spy Color for Light Mode */
  --flex-header-bg: linear-gradient(to right, #fff 20%, #e5e5e5 80%);
  --flex-footer-bg: linear-gradient(to right, #fff 20%, #e5e5e5 80%);

  /* FLex Gray Color Changes */
  --flex-gray-1: #bab6b6;
  --flex-gray-2: #ededed;
  --flex-gray-3: #aaaaaa;
  --flex-gray-4: #eaeaea;
  --flex-gray-7: rgba(255, 255, 255, 0.35) !important;

  /* Flex Snarkive Brand Colors */
  --flex-snarkive: #d102d1;
  /* Snarkive Purple */
  --flex-snarkive-90: #d102d1e6;
  /* Snarkive Purple 90% Opacity */
  --flex-snarkive-50: #d102d180;
  /* Snarkive Purple 50% Opacity */
  --flex-snarkive-rev: #d45f35;
  /* Snarkive Orange Reverse */
  --flex-snarkive-rev-90: #d45f35e6;
  /* Snarkive Orange Reverse */
  --flex-snarkive-rev-50: #d45f3580;
  /* Snarkive Orange Reverse */

  /* Flex Text Colors */
  --flex-text-title: #1a1a1a;
  /* Makes Titles Dark */
  --flex-text-primary: #2a2a2a;
  /* Dark grey for general text */
  --flex-text-secondary: #555555;
  /* --Cinesist-middle-grey */
  --flex-decor-border: rgba(0, 0, 0, 0.2);
  /* Subtle dark border */

  /* Flex Effects */
  --news-letter-bg: #e5e5e5;
  --flex-hover-brightness: 0.8;
  /* 80% brightness (20% darker) */
  --shadow-1: 5px 10px 20px 0px #00000051;
  --shadow-7: #00000051;
  --round-10: 10px;
  /* Standard Border Radius */
  --page-bg-color: #ffffff;

  /* --- Set your ticket stub colors --- */
  --ticket-bg-color: #f1f1f1;
  --ticket-text-color: #555555;
  --ticket-text-hover: #d45f35;
  /* Kept your orange! */
  --ticket-text-current: #111111;

  /* --- Cinescore Review Section Colors --- */
  --review-color: #d45f35;
}

/* ====================
     Black Spy Colors For Dark Mode
==================== */
[data-color-mode*='dark'] {
  /* --- Cinesist Branded Icons --- */
  /* Dark Mode: Black & Purple Icon */
  --cinesist-card-logo: url('https://www.cinesist.com/wp-content/uploads/2025/10/Cinesist-White-Spy-Icon-Logomark-1.png');

  /* --- Cinesist Dark Branded Colors --- */
  --gc-color: #d45f35;
  /* Primary Orange Color */
  --body-fcolor: #e5e5e5;
  /* Body White Spy Flex Color */
  --gc-spy: #1a1b1f;
  /* Black Spy Color */
  --gc-snarkive-accent: #d45f35;
  --btn-primary: var(--flex-snarkive);
  /* Snarkive Purple to Orange */
  --btn-primary-h: var(--flex-snarkive-rev);
  /* Snarkive Purple Reverse on Hover */

  /* --- Flexible Colors --- */
  /* Custom variable for form description text color */
  --cs-spy: #1a1b1f;

  --flex-overlay-1: rgba(0, 0, 0, 0.4);
  --flex-icon-1: rgb(229, 232, 235, 0.5);
  --contrast-1: #000000;
  --contrast-2: #131313;
  --flex-bg-color: #0a0a0a;
  /* White BG */
  /* White Spy Color for Night Time Adapt */
  --flex-bg-color-2: #1a1b1f;
  /* Black Spy Color for Dark Mode */

  /* Flex Color For Header Footer */
  --flex-header-bg: linear-gradient(to right, #000000 20%, #1a1b1f 80%);
  --flex-footer-bg: linear-gradient(to right, #000000 20%, #1a1b1f 80%);

  /* FLex Gray Color Changes */
  --flex-gray-1: rgb(20 20 20);
  --flex-gray-2: #2d2e32;
  --flex-gray-3: #414245;
  --flex-gray-4: #222222;
  --flex-gray-7: rgba(0, 0, 0, 0.35) !important;
  --flex-snarkive: #dd7b45;
  /* Snarkive Orange */
  --flex-snarkive-90: #dd7b45e6;
  /* Snarkive Orange 90% Opacity */
  --flex-snarkive-50: #dd7b4580;
  /* Snarkive Orange 50% Opacity */
  --flex-snarkive-rev: #d102d1;
  /* Snarkive Purple Reverse */
  --flex-snarkive-rev-90: #d102d1e6;
  /* Snarkive Purple Reverse 90% Opacity */
  --flex-snarkive-rev-50: #d102d180;
  /* Snarkive Purple Reverse 50% Opacity */
  --flex-text-title: #ffffff;
  /* Makes Titles Gleam White */
  --flex-text-primary: #f0f0f0;
  /* Off-white for general text */
  --flex-text-secondary: #cccccc;
  /* --Cinesist-light-grey */
  --flex-decor-border: rgba(255, 255, 255, 0.2);
  /* Subtle white border */

  --news-letter-bg: #1a1b1f;
  --flex-hover-brightness: 1.2;
  /* 120% brightness (20% brighter) */
  --shadow-1: 5px 10px 20px 0px #0000004d;
  --page-bg-color: #111111;

  /* --- Set your ticket stub colors --- */
  --ticket-bg-color: #5e5e5e;
  --ticket-text-color: #aaaaaa;
  --ticket-text-hover: #d45f35;
  /* Kept your orange! */
  --ticket-text-current: #ffffff;
}

/* ====================
     End Cinesist Framework Variables
==================== */

/*
-----------------
2 - General
-----------------
*/

/* --- Cinesist Wrapper gives us Nice Uniform Gutters --- */

/* --- Laptop Gutters --- */
@media (min-width: 1440px) {
  .wrapper {
    --margin-gutter: 80px;
    padding: 0 80px;
  }
}

/* --- Smaller Screen Gutters --- */
@media (min-width: 1024px) {
  .wrapper {
    --margin-gutter: 3rem;
    padding: 0 3rem;
  }
}

/* --- Mobile Gutters --- */
@media (min-width: 768px) {
  .wrapper {
    --margin-gutter: 2rem;
    padding: 0.5rem 2rem;
  }
}

/* --- Cinesist Framework Over Rides: Making Blocksy Spacing use our spacing --- */
/* Neutralize Blocksy's Logical Spacing and Force Framework Margins */
:where(.is-layout-flow, .is-layout-constrained)
  > *:where(:not(h1, h2, h3, h4, h5, h6)) {
  margin-block-start: 0 !important;
  margin-block-end: var(--space-xxs) !important;
  /* Force your fluid variable */
  margin-bottom: var(--space-xxs) !important;
}

:where(.is-layout-flow, .is-layout-constrained) :where(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0 !important;
  /* Optional: space above headings */
  margin-block-end: var(--space-xs) !important;
  margin-bottom: var(--space-xs) !important;
}

/*
-----------------
5 - Header
-----------------
*/
#header {
  background: var(--flex-bg-color);
}

/* --- Sticky Header "Tinted Glass" Effect --- */

/* Target the sticky container when the body is in its sticky state and the container itself is active */
body[data-header*='type-1']
  .ct-header
  [data-sticky*='yes']
  [data-row*='middle'] {
  /* Ensure a background color is set for backdrop-filter to work */
  background-color: rgba(255, 255, 255, 0.2);
  /* Light mode translucent white */
  border-radius: 3px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(5px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(2px) saturate(180%);
  /* For Safari compatibility */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* You might also need to adjust border, shadow, etc., if Blocksy adds them */
  /* For example, if it has a box-shadow that you want to remove or change */
  /* box-shadow: none !important; */
}

/* Dark Mode Tinted Glass for Sticky Header */
html[data-color-mode='dark']
  body[data-header*='type-1']
  .ct-header
  [data-sticky*='yes']
  [data-row*='middle'] {
  background-color: rgba(0, 0, 0, 0.3);
  /* Dark mode translucent black */
  /* Adjust blur/saturate if you want a different effect for dark mode */
  backdrop-filter: blur(2px) saturate(150%) !important;
  border-radius: 3px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  -webkit-backdrop-filter: blur(5px) saturate(150%);
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* --- Logo Switching Logic --- */

/* Default state: Show default logo, hide dark mode and sticky logos */
.site-logo-container .default-logo {
  display: inline;
  /* Or block, depending on your layout */
}

.site-logo-container .dark-mode-logo,
.site-logo-container .sticky-logo {
  display: none;
}

/* Dark Mode: Show dark mode logo, hide default and sticky logos */
html[data-color-mode='dark'] .site-logo-container .default-logo {
  display: none;
}

html[data-color-mode='dark'] .site-logo-container .dark-mode-logo {
  display: inline;
  /* Show dark mode logo */
}

/* Sticky Header (Light Mode): Show sticky logo, hide default and dark mode logos */
body[data-header*='sticky:shrink'] .site-logo-container .default-logo,
body[data-header*='sticky:shrink'] .site-logo-container .dark-mode-logo {
  display: none;
  /* Hide default and dark mode logos when sticky */
}

body[data-header*='sticky:shrink'] .site-logo-container .sticky-logo {
  display: inline;
  /* Show sticky logo */
}

/* Sticky Header (Dark Mode): Show sticky logo (if it's also dark-mode appropriate) */
/* This rule assumes your .sticky-logo is suitable for both light and dark sticky states. */
/* If you have a *separate* sticky-dark-mode-logo, you'd adjust this. */
html[data-color-mode='dark']
  body[data-header*='sticky:shrink']
  .site-logo-container
  .sticky-logo {
  display: inline;
  /* Ensure sticky logo is visible in dark mode sticky state */
  /* If your sticky logo needs a filter for dark mode (e.g., if it's light and needs to appear dark) */
  /* filter: brightness(0.5) invert(0.8); */
}

/* IMPORTANT: If Blocksy adds additional CSS that overrides these rules, you might need to use `!important` 
   or increase specificity. Always test thoroughly. */
/* --- Header Bottom Row --- */
/* Light Mode */
[data-header*='type-1'] .ct-header [data-row*='bottom'] {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0px 5px 15px rgba(0, 0, 0, 0.3),
    0px 10px 30px rgba(0, 0, 0, 0.2),
    0px 0px 0px 2px rgba(255, 255, 255, 0.03) !important;
  transform: perspective(1000px) rotateX(2deg) translateY(-2px);
  transform-origin: bottom center;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Dark Mode */
html[data-color-mode='dark']
  [data-header*='type-1']
  .ct-header
  [data-row*='bottom'] {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0px 5px 15px rgba(0, 0, 0, 0.3),
    0px 10px 30px rgba(0, 0, 0, 0.2),
    0px 0px 0px 2px rgba(0, 0, 0, 0.03) !important;
  transform: perspective(1000px) rotateX(2deg) translateY(-2px);
  transform-origin: bottom center;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* --- Cinesist Intel Command Bar --- */
.cinesist-intel-command-bar {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--black-spy);
  padding: 0.5rem 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
  min-height: 3.5rem;
  gap: 2rem;
}

/* Intel Stream Module */
.intel-stream-module {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  flex-grow: 1;
  /* Occupy all available middle space */
  overflow: hidden;
}

.stream-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
  color: var(--flex-snarkive);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.75rem;
  white-space: nowrap;
  height: 1.5rem;
  background: var(--flex-gray-2);
  padding: 0 10px;
  border-radius: 5px;
  box-shadow: 0 2px 10px var(--shadow-7);
}

.stream-icon svg {
  width: 14px;
  height: 14px;
}

/* Ticker Inner Fix */
.cinesist-ticker-wrapper {
  flex: 1;
  position: relative;
  height: 1.5rem;
  /* Exactly one line high */
  overflow: hidden;
  width: 35rem;
}

/* Hubs Module */
.hubs-nav-module {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  /* Don't allow hubs to squish */
}

.hubs-label {
  color: var(--flex-snarkive);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.hubs-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
  gap: 0.5rem;
}

/* Hub Pill Styling */
.hub-pill {
  padding: 0.4rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 3px;
  color: #fff !important;
  transition:
    filter 0.2s ease,
    transform 0.1s ease;
  white-space: nowrap;
}

.hub-pill:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

.pill-red {
  background-color: var(--cinesist-red);
}

.pill-blue {
  background-color: var(--cinesist-tv);
}

.pill-green {
  background-color: var(--cinesist-gaming);
}

.pill-gray {
  background-color: var(--cinesist-industry);
}

/* Mobile Optimization */
@media (max-width: 1024px) {
  .cinesist-intel-command-bar {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }

  .intel-stream-module,
  .hubs-nav-module {
    width: 100%;
    justify-content: center;
  }

  .hubs-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- Cinesist Intel Stream: Fix for One-Line Ticker --- */
.cs-sub-nav-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-height: 3.5rem;
  /* Ensure a stable height */
}

.news-ticker-col {
  flex: 1 1 auto !important;
  /* Take up remaining space */
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
}

.cs-intel-stream-label {
  flex-shrink: 0;
  margin-right: 1rem;
  white-space: nowrap;
}

.cinesist-ticker-container {
  width: 100%;
  height: 1.5rem;
  /* Force a single line height */
  position: relative;
  overflow: hidden;
  flex-grow: 1;
}

.ticker-list {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.ticker-item {
  position: absolute !important;
  /* This is the key to one-line fades */
  top: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  /* Prevent text wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  /* Add "..." if title is too long */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out;
  display: block !important;
  /* Overwrite any block defaults */
}

.ticker-item.active {
  opacity: 1;
  visibility: visible;
}

/* --- Fix for Horizontal Hub Buttons --- */
.cs-hubs-nav-col {
  flex: 0 0 auto !important;
  /* Stay on the right */
  display: flex !important;
  justify-content: flex-end !important;
}

.cs-hubs-nav-col .wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  /* Force Horizontal */
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.cs-hubs-nav-col .wp-block-buttons {
  display: flex !important;
  flex-direction: row !important;
  /* Force buttons side-by-side */
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
}

/* Responsive: Stack only on mobile if necessary */
@media (max-width: 768px) {
  .cs-sub-nav-row {
    flex-direction: column !important;
    height: auto;
  }

  .cs-hubs-nav-col .wp-block-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- Cinesist Intel Stream Styling --- */
.cinesist-ticker-container {
  display: flex;
  align-items: center;
  background: var(--black-spy);
  color: var(--white-spy);
  height: 3rem;
  overflow: hidden;
  font-family: var(--font-primary);
  border-bottom: 1px solid var(--snarkive-purple-accent);
}

.ticker-label {
  background: var(--cinesist-red);
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

.ticker-content {
  position: relative;
  flex-grow: 1;
  height: 100%;
}

.ticker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.ticker-item {
  position: absolute;
  top: 0;
  left: 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}

.ticker-item.active {
  opacity: 1;
  pointer-events: auto;
}

.ticker-item a {
  color: var(--body-fcolor);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.ticker-item a:hover {
  color: var(--body-fcolor);
  font-weight: 600;
  text-decoration: 2px underline;
  text-decoration-color: var(--flex-snarkive-90);
}

/*
-----------------
8 - Blocks
-----------------
*/

/* --- Cinepress 3.0: Popular Intel Terminal --- */

.ct-trending-block {
  padding: 2.5rem 0;
  margin: 2rem 0;
  border-top: 1px solid var(--flex-decor-border);
  border-bottom: 1px solid var(--flex-decor-border);
  background: var(--flex-gray-7);
  /* Using your flexible gray opacity */
}

/* Module Title Styling */
.ct-module-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-primary);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--flex-text-title);
  margin-bottom: 1.875rem;
  letter-spacing: 1px;
}

/* --- Cinepress 3.0: Custom Bolt Icon Injection --- */

/* 1. Hide the original Fire SVG */
.ct-module-title svg {
  display: none !important;
}

/* 2. Remove the previous ::after that floated to the right */

/* 3. Target the text directly (Blocksy usually wraps this in a span or just text) */
/* We will use the 'Popular Intel' text as the anchor */
.ct-module-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative;
  gap: 0.5rem;
}

/* 4. Inject the Bolt specifically after the text content */
/* We target the specific text node if possible, or just the main title */
.ct-module-title {
  position: relative;
}

.ct-module-title::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--cinesist-gold);

  /* Clean URL-Encoded SVG Bolt with overflow handling */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z'/%3E%3C/svg%3E")
    no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z'/%3E%3C/svg%3E")
    no-repeat center;

  /* Ensure it fits exactly in your 1.25rem box */
  mask-size: contain;
  -webkit-mask-size: contain;

  filter: drop-shadow(0 0 5px var(--cinesist-gold));
  animation: bolt-arc-flicker 4s infinite;
}

/* Ensure the navigation arrows stay on the far right */
.ct-slider-arrows {
  margin-left: auto !important;
  /* Pushes only the arrows to the right */
}

/* 5. The Arc Flicker Animation */
@keyframes bolt-arc-flicker {
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  20%,
  24%,
  55% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}

/* The Cards (Items) */
.ct-trending-block .ct-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.ct-trending-block-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.3s ease;
}

.ct-trending-block-item:hover {
  transform: translateY(-5px);
}

/* Media (Images) */
.ct-media-container img {
  border-radius: 0.25rem;
  border: 1px solid var(--flex-decor-border);
  transition: border-color 0.3s ease;
}

.ct-trending-block-item:hover img {
  border-color: var(--flex-snarkive);
}

/* Post Titles */
.ct-post-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--flex-text-title);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ct-post-title:hover {
  color: var(--flex-snarkive);
}

/* Arrows (Slider Navigation) */
.ct-slider-arrows {
  display: flex;
  gap: 0.5rem;
  margin-left: auto !important;
  /* Pushes only the arrows to the right */
}

.ct-arrow-prev,
.ct-arrow-next {
  cursor: pointer;
  background: var(--flex-gray-2);
  padding: 0.5rem;
  border-radius: 0.25rem;
  color: var(--flex-text-title);
  transition: all 0.2s ease;
}

.ct-arrow-prev:hover,
.ct-arrow-next:hover {
  background: var(--flex-snarkive);
  color: #fff;
}

@keyframes flicker-red {
  0% {
    opacity: 0.8;
    filter: drop-shadow(0 0 2px var(--cinesist-red));
  }

  100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--cinesist-red));
  }
}

/* Mobile: 2 Columns for Small Screens */
@media (max-width: 768px) {
  .ct-trending-block .ct-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Cinepress 3.0: Global Smart Adaptive Section Header --- */

.cs-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  border-bottom: 3px solid var(--flex-decor-border);
  position: relative;
  /* DEFAULT FALLBACK (Red) */
  --accent: var(--cinesist-red);
}

.cs-section-heading {
  position: relative;
  display: inline-flex !important;
  margin: 0 !important;
  padding-bottom: 7px;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--flex-text-title) !important;
}

/* The Solid Bar */
.cs-section-heading::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--accent);
  /* Uses our variable */
  z-index: 5;
}

/* The Gradient Tail */
.cs-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -100px;
  width: 100px;
  height: 3px;
  /* NOW it works because it has a real color variable to pull from */
  background: linear-gradient(to right, var(--accent), transparent) !important;
  z-index: 4;
}

/* --- THE PRESETS --- */
/* You just add these classes to the outer Header Group in the editor */
.is-news {
  --accent: var(--cinesist-info);
}

.is-rants {
  --accent: var(--cinesist-red);
}

.is-movies {
  --accent: var(--cinesist-gold);
}

.is-gaming {
  --accent: var(--cinesist-gaming);
}

.is-tv {
  --accent: var(--cinesist-tv);
}

.is-industry {
  --accent: var(--cinesist-industry);
}

.is-reviews {
  --accent: var(--flex-snarkive-90);
}

/* --- Cinesist Spoiler Warning Block Styling --- */
.cinesist-spoiler-warning-block {
  clear: both;
  /* Ensures it breaks out of any floats */
  margin: 50px auto;
  /* Centered with vertical spacing */
  padding: 35px 30px;
  max-width: 900px;
  /* Consistent with CTA block */
  background: linear-gradient(145deg, var(--gc-spy), var(--flex-gray-1));
  /* Subtle Color Changing Gradient */
  border-radius: 15px;
  border-left: 5px outset var(--gc-color);
  /* Cinefox Orange outset border on the left */
  box-shadow:
    10px 10px 30px rgba(0, 0, 0, 0.7),
    /* Stronger shadow for depth */ -5px -5px 15px rgba(50, 50, 50, 0.2);
  /* Subtle light source shadow */
  text-align: center;
  box-sizing: border-box;
}

.cinesist-spoiler-inner {
  display: flex;
  align-items: center;
  /* Vertically align icon and text */
  justify-content: center;
  /* Center content horizontally */
  gap: 20px;
  /* Space between icon and text */
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
}

.cinesist-spoiler-icon {
  font-size: 2em;
  /* Large siren emoji */
  line-height: 1;
  display: block;
  /* Ensure it behaves as a block for sizing */
  color: var(--cinesist-red);
  /* Make the siren red (or keep default emoji color) */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  /* Subtle 3D effect */
  flex-shrink: 0;
  /* Prevent it from shrinking */
  /* Add a subtle animation to make it "flash" or pulse a bit */
  animation: cinesist-siren-pulse 1.5s infinite alternate;
}

@keyframes cinesist-siren-pulse {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.cinesist-spoiler-text {
  font-family: var(--cinesist-body-font);
  /* Set Font */
  font-size: 1.4em;
  color: var(--body-fcolor);
  /* Color Changing text */
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  /* Remove default paragraph margin */
  max-width: 700px;
  /* Constrain text width */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  /* Subtle text shadow */
}

.cinesist-spoiler-text strong {
  color: var(--cinesist-red);
  /* Make "SPOILER ALERT!" bold and red */
}

.cinesist-content-breakdown::before {
  content: var(--cinesist-card-logo);
}

.cinesist-spoiler-warning-block {
  background: #000;
  border: 2px dashed #ff0d0d;
  padding: 2rem;
  margin: 2rem 0;
  animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
  0% {
    border-color: #ff0d0d;
  }

  50% {
    border-color: transparent;
  }

  100% {
    border-color: #ff0d0d;
  }
}

/* --- Cinepress 3.0: Snarkive Tag Box --- */
.snarkive-links-box {
  margin-top: 3rem;
  padding: 1.5rem;
  background: var(--flex-gray-2);
  border-left: 5px solid var(--cinesist-gold);
}

.snarkive-links-box h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  color: var(--flex-text-secondary);
}

.snarkive-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.snarkive-tag-link {
  display: flex;
  align-items: center;
  background: var(--flex-header-bg);
  border: 1px solid var(--flex-decor-border);
  padding: 5px 12px 5px 5px;
  border-radius: 4px;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.snarkive-tag-link img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 2px;
  margin-right: 10px;
}

.snarkive-tag-link:hover {
  border-color: var(--cinesist-gold);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/*
-----------------
11 - Pages
-----------------
*/

/* --- 11 A. The Homepage --- */

/* --- Cinesist HQ: Hero Grid Revamp --- */

/* 1. The Main Frame */
.hero-section[data-type='type-1'] {
  text-align: var(--alignment);
  margin-bottom: var(--margin-bottom, 0) !important;
}

.cs-homepage-hero-wrap {
  padding: 0.5rem 0;
  max-width: var(--max-site-width);
  margin: 0 auto;
}

.cs-hero-grid {
  gap: 1.5rem !important;
}

/* 1. The Featured Card (70% Column) */
.cs-hero-main .wp-block-post {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--contrast-1);
  transition: transform 0.3s ease;
}

/* Target the Cover Block specifically in our Hero */
.cs-hero-main .wp-block-cover {
  padding: 2.5rem !important;
  /* Spacing inside the "Terminal" */
  border-radius: 0.5rem;
  overflow: hidden;
}

/* The Adaptive Underline for the Title inside the Cover */
.cs-hero-main .wp-block-cover .wp-block-post-title a {
  color: #ffffff !important;
  /* Always white over the dark gradient */
  font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
  /* Responsive font sizing */
  line-height: 1.1;
  display: inline;
  background-image: linear-gradient(var(--flex-snarkive), var(--flex-snarkive));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 3px;
  transition: background-size 0.3s;
}

.cs-hero-main .wp-block-cover:hover .wp-block-post-title a {
  background-size: 100% 3px;
}

/* The Gradient Overlay: Ensuring Title Scannability */
.cs-hero-main .wp-block-post-featured-image {
  position: relative;
  margin: 0 !important;
  height: 35rem;
  transition: filter 0.3s ease;
  /* Smooth transition for the effect */
}

.cs-hero-main .wp-block-post-featured-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  /* Only covers the bottom half */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    transparent 100%
  );
  pointer-events: none;
}

.cs-hero-main .wp-block-post-featured-image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.1);
  transition: filter 0.5s ease;
}

.cs-hero-main .wp-block-post-featured-image img:hover {
  filter: brightness(var(--flex-hover-brightness));
}

/* Overlay the Headline on the image */
.cs-hero-main .wp-block-post-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  z-index: 2;
  margin: 0 !important;
}

.cs-hero-main .wp-block-post-title a {
  color: #fff;
  font-size: var(--font-h2) !important;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

/* 2. Adaptive Title Links & Hover Underline */
.cs-hero-main .wp-block-post-title a,
.cs-hero-sidebar .wp-block-post-title a {
  color: #e5e5e5;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  display: inline-block;
}

/* Sidebar Title Hover Logic */
.cs-hero-sidebar .wp-block-post-title a {
  color: var(--flex-text-title);
  /* Adaptive: Dark in Light mode, White in Dark mode */
  transition: color 0.2s ease;
}

.cs-hero-main .wp-block-post-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--flex-snarkive);
}

/* 3. The Sidebar Intel (30% Column) */
.cs-hero-sidebar .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cs-hero-sidebar .wp-block-post {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--flex-gray-3);
  padding: 0.75rem;
  border-bottom: 1px solid var(--flex-decor-border);
  border-left: 3px solid var(--flex-snarkive-50);
  transition: all 0.3s ease;
  margin-bottom: 0;
}

.cs-main-feature-list-card-content {
  margin-bottom: 0;
}

.cs-hero-sidebar .wp-block-post:hover {
  border-left-color: var(--flex-snarkive-90);
  background: var(--flex-snarkive-50);
  /* Subtle tinted background on hover */
}

.cs-hero-sidebar .wp-block-post-featured-image {
  flex: 0 0 6rem;
  /* Small thumbnails */
  margin: 0 !important;
}

.cs-hero-sidebar .wp-block-post-featured-image img {
  aspect-ratio: 1/1;
  border-radius: 2px;
  border-radius: 0.25rem;
  width: 6.25rem;
  /* ~100px */
  height: 6.25rem;
  object-fit: cover;
}

/* 4. Formatting Sidebar Titles */
.cs-hero-sidebar .wp-block-post-title {
  font-size: 0.95rem !important;
  font-weight: 700;
  line-height: 1.3;
}

.cs-hero-main .wp-block-post-excerpt {
  color: #f0f0f0;
  /* Kept bright for visibility over dark gradient */
  font-size: 1rem;
  max-width: 80%;
  margin-top: 0.5rem;
}

/* --- Cinepress 3.0: Rant Section Logic --- */

.cs-rants-wrapper {
  padding: 0.5rem 0;
  margin-top: 3rem;
  /* Custom 25% Red / 75% Adaptive Border */
}

/* Force the Query Loop into a 3-column Horizontal Grid */
.cs-rants-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cs-rants-card-inner {
  padding: 0 !important;
}

/* --- Cinepress 3.0: Adaptive Intel Heading --- */

/* The Container Wrapper */
.cs-rants-header {
  display: flex;
  align-items: center;
  /* Keeps the heading and "View All" on the same line */
  justify-content: space-between;
  width: 100%;
  /* The Base Track: This stretches across the whole screen */
  border-bottom: 3px solid var(--flex-decor-border);
  margin-bottom: 2.5rem;
}

/* The Heading Logic */
.cs-rants-heading {
  position: relative;
  display: inline-flex !important;
  /* Forces the block to shrink-wrap the text */
  margin: 0 !important;
  padding-bottom: 10px;
  /* Space above the border */
  color: var(--cinesist-red) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* The Solid Red Bar (Adapts to text width) */
.cs-rants-heading::before {
  content: '';
  position: absolute;
  bottom: -3px;
  /* Sits on the container's border-bottom */
  left: 0;
  width: 100%;
  /* MAGIC: Always matches the width of the heading text */
  height: 3px;
  background: var(--cinesist-red);
  z-index: 5;
}

/* The Fade-Out (Fixed length at the end of the text) */
.cs-rants-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -100px;
  /* Positions it just outside the right edge of the text */
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, var(--cinesist-red), transparent);
  z-index: 4;
}

/* If you have a "View All" link on the right */
.cs-rants-header a.view-all {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--flex-text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.cs-rants-header a.view-all:hover {
  color: var(--cinesist-red);
}

/* The Grid Cards: Horizontal Polish */
.cs-rants-grid .wp-block-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Ensures all cards match height */
  background: var(--flex-gray-2) !important;
  border: 1px solid var(--flex-decor-border);
  border-bottom: 4px solid var(--cinesist-red);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Hover Effect: The "Red Alert" Glow */
.cs-rants-grid .wp-block-post:hover {
  transform: translateY(-8px);
  border-color: var(--cinesist-red);
  box-shadow: 0 10px 30px rgba(229, 9, 20, 0.2);
}

/* Image Scanner Look */
.cs-rant-image img {
  width: 100%;
  height: 15rem;
  /* ~240px */
  object-fit: cover;
  transition: all 0.5s ease;
}

.cs-rant-image img:hover {
  border-bottom: 2px solid var(--cinesist-red);
}

.cs-rants-grid .wp-block-post:hover .cs-rant-image img {
  border-bottom: 2px solid var(--cinesist-red);
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--cinesist-red);
}

.cs-rants-grid .wp-block-post:hover::before .cs-rant-image img {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

/* Title: High Intensity */
.cs-rant-title a {
  color: var(--flex-text-title) !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  padding: 0.5rem 0.5rem 0.5rem !important;
  display: block;
  text-decoration: none;
}

.cs-rant-title a:hover {
  color: var(--cinesist-red) !important;
}

/* Excerpt: Redacted Body Text */
.cs-rant-excerpt {
  flex-grow: 1;
  padding: 0.315rem 0.5rem !important;
  font-size: 0.9rem !important;
  line-height: 1.6;
  color: var(--flex-text-primary);
  border-top: 1px dashed var(--flex-decor-border);
  opacity: 0.8;
}

.cs-rant-post-meta {
  gap: var(--space-xxs);
  padding: 0.315rem;
}

.cs-rant-cal-icon {
  padding: unset;
}

.cs-rant-date {
  font-size: 0.8rem;
}

/* Mobile: Collapse to 1 Column */
@media (max-width: 768px) {
  .cs-rants-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* --- Cinepress 3.0: Global Intel Card & Header Framework --- */

/* 1. THE VARIABLE ENGINE */
.cs-intel-card-section-wrapper {
  --accent: var(--cinesist-info);
  /* Default to News Blue */
  margin-top: 3rem;
  padding: 0.5rem 0;
}

/* Presets: Just add these classes to the wrapper in the editor */
.cs-intel-card-section-wrapper.is-rants {
  --accent: var(--cinesist-red);
}

.cs-intel-card-section-wrapper.is-news {
  --accent: var(--cinesist-info);
}

.cs-intel-card-section-wrapper.is-gaming {
  --accent: var(--cinesist-gaming);
}

.cs-intel-card-section-wrapper.is-tv {
  --accent: var(--cinesist-tv);
}

.cs-intel-card-section-wrapper.is-reviews {
  --accent: var(--flex-snarkive-90);
}

.cs-intel-card-section-wrapper.is-movies {
  --accent: var(--cinesist-gold);
}

.cs-intel-card-section-wrapper.is-industry {
  --accent: var(--cinesist-industry);
}

/* 2. THE ADAPTIVE HEADER */
.cs-intel-card-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 3px solid var(--flex-decor-border);
  margin-bottom: 2.5rem;
  position: relative;
}

.cs-intel-card-section-heading {
  position: relative;
  display: inline-flex !important;
  margin: 0 !important;
  padding-bottom: 10px;
  color: var(--flex-text-title) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.cs-intel-card-section-heading::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  /* DYNAMIC COLOR */
  z-index: 5;
}

.cs-intel-card-section-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -100px;
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, var(--accent), transparent);
  /* DYNAMIC COLOR */
  z-index: 4;
}

/* 3. THE INTEL GRID & CARDS */
.cs-intel-card-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
}

.cs-intel-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--flex-gray-2) !important;
  border: 1px solid var(--flex-decor-border);
  border-bottom: 4px solid var(--accent);
  /* DYNAMIC COLOR */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  padding: 0 !important;
  /* Resetting the inline padding */
}

/* Hover State: The Alert Mode */
.cs-intel-card-inner:hover {
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px var(--accent);
  /* Now glows in the accent color! */
}

/* 4. ELEMENT STYLING */
.cs-intel-card-image img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  transition: all 0.5s ease;
}

.cs-intel-card-inner:hover .cs-intel-card-image img {
  transform: scale(1.05);
  border-bottom: 2px solid var(--accent);
}

.cs-intel-card-title a {
  color: var(--flex-text-title) !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  padding: 1rem 1rem 0.5rem !important;
  display: block;
  text-decoration: none;
  transition: color 0.3s ease;
}

.cs-intel-card-title a:hover {
  color: var(--accent) !important;
}

.cs-intel-card-excerpt {
  flex-grow: 1;
  padding: 0.5rem 1rem !important;
  font-size: 0.85rem !important;
  line-height: 1.5;
  color: var(--flex-text-primary);
  border-top: 1px dashed var(--flex-decor-border);
  opacity: 0.8;
}

/* Meta Data & Calendar Icon */
.cs-intel-card-post-meta {
  padding: 0.75rem 1rem !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
}

.cs-intel-card-cal-icon svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--accent);
  /* Calendar icon matches section color */
}

.cs-intel-card-date {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--flex-text-secondary);
}

/* Mobile: Collapse */
@media (max-width: 1024px) {
  .cs-intel-card-grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .cs-intel-card-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* --- Cinepress 3.0: Intel Review Card Skin --- */

/* The Card Border & Cinemeter */
.cs-intel-card-section-wrapper .is-reviews .cs-intel-card {
  border: 1px solid var(--flex-decor-border) !important;
  position: relative;
  padding-top: 4px; /* Space for the Cinemeter */
}

.cs-intel-card-section-wrapper .is-reviews .cs-intel-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--review-accent, var(--flex-snarkive-90));
  z-index: 10;
  box-shadow: 0 0 10px var(--review-accent);
}

/* The Meta Badge Slant */
.cs-review-meta-badge {
  position: absolute;
  top: 20px;
  right: 0;
  background: var(--review-accent);
  color: #000 !important;
  padding: 2px 15px !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  z-index: 20;
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

/* HUD Stats Styling (The Score & Verdict) */
.cs-review-hud-stats {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 10px 0 !important;
  font-family: var(--font-mono, monospace);
  border-top: 1px dashed var(--flex-decor-border);
  border-bottom: 1px dashed var(--flex-decor-border);
  padding: 8px 0 !important;
}

.cs-hud-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--review-accent);
}

.cs-hud-verdict {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--flex-text-secondary);
  line-height: 1.2;
}

/* Hover State */
.cs-intel-card-section-wrapper .is-reviews .cs-intel-card:hover {
  border-color: var(--review-accent) !important;
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.4),
    0 0 15px var(--review-accent);
}

/* --- Cinepress 3.0: CineScore Analytics Hub --- */

.cs-analytics-hub {
  background: var(--flex-header-bg);
  /* Adaptive Terminal Background */
  border-top: 2px solid var(--flex-decor-border);
  border-bottom: 2px solid var(--flex-decor-border);
  padding: 3rem 0;
  margin: 4rem 0;
}

/* 1. The Score Module */
.cs-score-module {
  text-align: center;
  border-right: 1px dashed var(--flex-decor-border);
}

.cs-score-module h2 {
  font-size: 5rem !important;
  font-weight: 900;
  color: var(--cinesist-gold);
  line-height: 1;
  margin: 0 !important;
  text-shadow: 0 0 15px var(--cinesist-gold);
}

/* 2. The Gauges (The Rating Bars) */
.cs-gauge-container {
  padding: 0 2rem;
}

.cs-gauge-row {
  margin-bottom: 1.5rem;
}

.cs-gauge-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--flex-text-secondary);
  display: flex;
  justify-content: space-between;
}

/* The Progress Bars */
.cs-progress-bar {
  height: 8px;
  background: var(--flex-gray-2);
  border-radius: 4px;
  margin-top: 5px;
  position: relative;
  overflow: hidden;
}

.cs-progress-fill {
  height: 100%;
  background: linear-gradient(
    to right,
    var(--cinebar-yellow),
    var(--cinebar-green)
  );
  width: 85%;
  /* This is what you change for each review */
}

/* 3. The Verdict Module */
.cs-verdict-module {
  border-left: 1px dashed var(--flex-decor-border);
  padding-left: 2rem;
}

.cs-verdict-module h3 {
  color: var(--cinesist-info);
  font-size: 0.9rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Cinepress 3.0: Cinescore DNA Banner Skin --- */

.cs-dna-banner-wrapper {
  padding: var(--space-md) !important;
  border-top: 2px solid var(--flex-decor-border);
  border-bottom: 2px solid var(--flex-decor-border);
  position: relative;
  overflow: hidden;
}

.cs-dna-banner {
  display: flex;
}

.cs-dna-banner-hook-col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* 1. Logo Adaptive Logic */
/* --- Cinepress 3.0: High-Precision Logo Toggle --- */

/* 1. Base State (Light Mode) */
.cs-dna-banner-lm-logo {
  display: block !important;
}

.cs-dna-banner-dm-logo {
  display: none !important;
}

/* 2. Tactical State (Dark Mode Trigger) */
/* This matches your root [data-color-mode*="dark"] exactly */
[data-color-mode*='dark'] .cs-dna-banner-lm-logo {
  display: none !important;
}

[data-color-mode*='dark'] .cs-dna-banner-dm-logo {
  display: block !important;
}

/* 3. Global CSS Variable Cleanup */
/* Let's make sure the images stay sharp during the transition */
.cs-dna-banner-lm-logo img,
.cs-dna-banner-dm-logo img {
  max-width: 320px !important;
  height: auto;
  transition: opacity 0.3s ease-in-out;
}

/* 2. Typography Impact */
.cs-dna-banner-mission {
  font-size: var(--font-h2) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  max-width: 800px;
  margin-bottom: 1rem !important;
}

.cs-dna-banner-tagline {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-h4) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.1rem !important;
}

/* 3. The DNA Info-Box (Floating Terminal) */
.cs-dna-infobox {
  padding: 2.5rem !important;
  border: 1px solid var(--flex-decor-border);
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  position: relative;
}

.cs-dna-info-heading {
  text-align: center;
  font-size: 1rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem !important;
}

/* 4. The Pulsing Rating Bar */
.cs-dna-rating-bar {
  gap: 4px !important;
  margin-bottom: 2rem !important;
}

.cs-dna-rating-bar > div {
  height: 8px;
  flex-grow: 1;
  border-radius: 2px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

/* Animation: Subtle 'Scanning' pulse across the bar */
.cs-dna-rating-bar:hover > div {
  opacity: 1;
  box-shadow: 0 0 10px currentColor;
  transform: scaleY(1.2);
}

/* 5. The List Breakdown */
.cs-dna-infobox-breakdown {
  margin-bottom: 2rem !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.cs-dna-infobox-item {
  font-size: 0.85rem !important;
  line-height: 1.4;
  margin-bottom: 12px !important;
  position: relative;
  padding-left: 20px;
}

.cs-dna-infobox-item::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--flex-snarkive);
  font-weight: 900;
}

/* 6. The Button (Snarkive Glow) */
.cs-dna-infobox-button a {
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease !important;
  border: none !important;
}

.cs-dna-infobox-button a:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--flex-snarkive);
  filter: brightness(1.2);
}

/* --- Cinepress 3.0: Review Grid & Card Skin --- */

/* 1. THE Section HEADER: Intelligence Branding */
.cs-review-grid .cs-intel-card-section-header {
  --accent: var(--cinesist-gold); /* Reviews default to Gold Intelligence */
  margin-bottom: 3rem;
}

/* 1. THE GRID: Targeting the UL correctly */
.cs-review-query ul.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 2.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  background: transparent !important; /* Remove that solid block background */
  border: none !important;
}

/* 2. THE CARD: Targeting the LI specifically */
.cs-review-query li.wp-block-post {
  background: var(--flex-gray-2) !important;
  border: 1px solid var(--flex-decor-border);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  --card-accent: var(--cinesist-gold);
}

.cs-review-card {
  background: var(--flex-gray-2) !important;
  border: 1px solid var(--flex-decor-border);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%; /* Makes all cards in a row equal height */
  margin: 0 !important; /* Resetting any weird theme margins */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  /* Default Accent - ACF will override this later */
  --card-accent: var(--cinesist-gold);
}

/* THE CINEMETER: The top glowing bar */
.cs-review-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--card-accent);
  z-index: 30;
  box-shadow: 0 0 15px var(--card-accent);
}

/* HOVER EFFECT: The "Identity" Match */
.cs-review-card:hover {
  border-color: var(--card-accent) !important;
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    0 0 20px var(--card-accent);
}

/* THE CINEMETER: Top Accent Bar on the LI */
.cs-review-query li.wp-block-post::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--card-accent);
  z-index: 20;
  box-shadow: 0 0 12px var(--card-accent);
}

/* Hover effect on the LI */
.cs-review-query li.wp-block-post:hover {
  transform: translateY(-10px);
  border-color: var(--card-accent);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* 3. VISUAL WRAPPER: Poster & Badge */
.cs-card-visual-wrapper {
  position: relative;
  height: 240px;
  overflow: hidden;
  margin: 0 !important;
}

.cs-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%) brightness(0.8);
  transition:
    transform 0.6s ease,
    filter 0.6s ease;
}

.cs-review-card:hover .cs-card-image img {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.08);
}

/* THE META BADGE: Score Overlay */
.cs-card-meta-badge {
  background: var(--card-accent) !important;
  color: #000 !important;
  box-shadow: 0 0 10px var(--card-accent);
  font-family: var(--font-mono, monospace);
  font-weight: 900;
  text-transform: uppercase;
  /* Tactical Scanline look */
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 50%, transparent 50%);
  background-size: 100% 2px;
}

/* 4. CONTENT AREA: Intel & Metadata */
.cs-card-content {
  padding: 1.5rem !important;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* --- Cinepress 3.0: Card Subject Thumbnail Skin --- */

.cs-card-subject-thumb {
  width: 45px;
  height: 60px; /* Poster Aspect Ratio */
  background: var(--flex-gray-3);
  border: 1px solid var(--card-accent);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-subject-mini-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-subject-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.05) 10px,
    rgba(255, 255, 255, 0.05) 20px
  );
}

.cs-card-title {
  margin: 0 0 0.75rem 0 !important;
}

.cs-card-title a {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--flex-text-title) !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.cs-card-title a:hover {
  color: var(--card-accent) !important;
}

.cs-review-card:hover .cs-card-title a {
  color: var(--card-accent) !important;
}

.cs-card-excerpt {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: var(--flex-text-secondary);
  margin-top: auto !important; /* Pushes excerpt to bottom */
  padding-top: 1rem;
  border-top: 1px dashed var(--flex-decor-border);
}

/* 5. POST DATE: The Timestamp */
.cs-review-card .wp-block-post-date {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem !important;
  color: var(--card-accent);
  opacity: 0.8;
  padding: 0 1.5rem 1.5rem !important;
}

/* --- 11 B. Cinescore DNA --- */

/* --- Cinepress 3.0: Cinescore Protocol Skin --- */

.is-danger {
  border: 5px dashed #8b0000;
  /* Deep blood red */
  animation: danger-flash 0.8s step-end infinite;
}

@keyframes danger-flash {
  50% {
    border-color: transparent;
  }
}

.is-warning {
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(
      -45deg,
      #000,
      #000 15px,
      #ffb101 15px,
      #ffb101 30px
    )
    12;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

/* Interactive Hover Effect */
.is-warning:hover {
  transform: scale(1.02);
  /* Slight pop out */
  filter: drop-shadow(0 0 10px rgba(255, 177, 1, 0.7));
  /* Glowing warning */
  cursor: help;
  /* Changes cursor to a question mark/help icon */
}

.is-safe {
  border: 4px solid #bdfcc9;
  /* Soft mint green */
  border-radius: 20px;
  background: white;
  padding: 20px;
  box-shadow: 0 0 15px rgba(189, 252, 201, 0.5);
  transition: all 0.5s ease;
  animation: safe-breath 6s infinite ease-in-out;
}

@keyframes safe-breath {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(189, 252, 201, 0.4);
  }

  50% {
    box-shadow: 0 0 25px rgba(189, 252, 201, 0.8);
  }
}

/* Interactive Hover sanctuary effect */
.is-safe:hover {
  transform: translateY(-5px);
  /* Gentle float */
  cursor: default;
  /* Reassuring standard cursor */
  border-color: #399953;
  /* Deepens to a lush green on focus */
}

.cinescore-dna {
  line-height: 1.6;
  color: var(--flex-text-primary);
}

/* The Parameter Table: "Diagnostic Scanner" */
.cs-cinescore-parameter-table table {
  border-collapse: separate;
  border-spacing: 0 8px;
  border: none !important;
}

.cs-cinescore-parameter-table thead tr {
  background: var(--flex-snarkive-90);
  color: var(--flex-text-title);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.cs-cinescore-parameter-table tbody tr {
  background: var(--flex-gray-2);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.cs-cinescore-parameter-table tbody tr:hover {
  transform: scale(1.02);
  background: var(--flex-gray-3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.cs-cinescore-parameter-table td {
  padding: 1.25rem !important;
  border: none !important;
}

/* The Scoreboard: "System Gauges" */
.cs-cinescore-scoreboard {
  font-size: 1rem;
}
.cs-cinescore-scoreboard .wp-block-column {
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.cs-cinescore-scoreboard .wp-block-column:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}

/* Adding a "Glow" line to the top of the scoreboard blocks */
.cs-cinescore-scoreboard .wp-block-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
}

/* --- Cinepress 3.0: Title Spotlight Pattern --- */

.cs-title-spotlight-wrapper {
  border: 2px solid var(--flex-decor-border);
  margin: 3rem 0;
  padding: 2rem !important;
  position: relative;
  box-shadow: inset 0 0 50px #000;
}

/* The HUD Score (Left) */
.cs-spotlight-score-col {
  text-align: center;
  border-right: 1px dashed var(--flex-decor-border);
}

.cs-spotlight-score-col h2 {
  font-size: 6rem !important;
  font-weight: 900;
  color: #ff5612; /* Compromised Orange */
  line-height: 1;
  margin: 0 !important;
  text-shadow: 0 0 20px rgba(255, 86, 18, 0.5);
}

.cs-spotlight-score-col p {
  letter-spacing: 4px;
  font-weight: 800;
  text-transform: uppercase;
  color: #ff5612;
}

/* The Intel Diagnostic (Center) */
.cs-spotlight-intel-col {
  padding: 0 2rem !important;
}

.cs-spotlight-intel-col h3 {
  font-family: var(--font-mono, monospace);
  color: var(--cinesist-gold);
  text-transform: uppercase;
  margin-bottom: 1rem !important;
}

/* The Verdict (Right) */
.cs-spotlight-verdict-col {
  border-left: 1px dashed var(--flex-decor-border);
  padding-left: 2rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs-spotlight-verdict-col p {
  font-size: 0.7rem;
  color: var(--flex-text-secondary);
  margin-bottom: 5px !important;
}

.cs-spotlight-verdict-col h4 {
  color: #ff0d0d; /* Red Alert */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem !important;
}

/* The Button - "Authorization Required" */
.cs-spotlight-verdict-col .wp-block-button__link {
  background: transparent !important;
  border: 1px solid var(--flex-decor-border) !important;
  color: var(--flex-text-title) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  font-weight: 700;
}

.cs-spotlight-verdict-col .wp-block-button__link:hover {
  background: var(--cinesist-gold) !important;
  color: #000 !important;
  border-color: var(--cinesist-gold) !important;
}

/* The Meta Breakdowns: "Intelligence Dossiers" */
.cs-cinescore-meta-breakdown {
  background: var(--flex-gray-2);
  padding: 2rem !important;
  list-style: none !important;
  margin-bottom: 2rem !important;
}

.cs-cinescore-meta-breakdown li:first-child {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.cs-cinescore-meta-breakdown li:nth-child(1) {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.cs-cinescore-meta-breakdown li:nth-child(2) {
  font-style: italic;
  opacity: 0.9;
}

/* --- Cinepress 3.0: Oath & Core Terminal Skin --- */

/* The Oath Columns: From Pastels to Protocols */
.cs-snark-oath-one,
.cs-snark-oath-two,
.cs-snark-oath-three {
  background-color: var(--flex-gray-2) !important; /* Neutralize the pastels */
  border: 1px solid var(--flex-decor-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Hover Effect: "Focusing the Signal" */
.cs-snark-oath-one:hover,
.cs-snark-oath-two:hover,
.cs-snark-oath-three:hover {
  transform: translateY(-5px);
  border-color: var(--cinesist-gold);
  box-shadow: 0 10px 30px rgba(255, 222, 33, 0.1);
}

/* Color Accent Bars for the Oath Nodes */
.cs-snark-oath-one::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--cinesist-gold);
}
.cs-snark-oath-two::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--flex-snarkive);
}
.cs-snark-oath-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--cinesist-info);
}

.cs-snark-oath-one h2,
.cs-snark-oath-two h2,
.cs-snark-oath-three h2 {
  color: var(--flex-text-title) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Cinefreaks Core: The Signal Reception Hub */
.cs-cinefreaks-core-section {
  background: var(--flex-header-bg);
  border: 2px solid var(--flex-decor-border);
  padding: 3rem !important;
  margin: 4rem 0;
  position: relative;
  border-left: 8px solid var(--flex-snarkive); /* Snarkive Purple Anchor */
}

/* Contact List: "Mastermind Direct Line" */
.cs-contact-masterminds {
  list-style: none !important;
  padding-left: 0 !important;
}

.cs-contact-masterminds li {
  padding: 1rem;
  background: var(--flex-gray-2);
  margin-bottom: 0.5rem;
  border-left: 3px solid var(--cinesist-gold);
  font-family: var(--font-mono, monospace);
}
.wp-container-core-columns-is-layout-d2da2050 .wp-block-column {
  border: 1px solid var(--flex-decor-border);
  transition: background 0.3s ease;
}

.wp-container-core-columns-is-layout-d2da2050 .wp-block-column:hover {
  background-color: var(--flex-gray-3) !important;
}

/*
-----------------
12 - Footer
-----------------
*/
#footer {
  background: var(--flex-bg-color);
}

/* --- Cinesist Terminal Footer: The Skin --- */

/* Root Container Padding & Background */
.cs-terminal-footer-wrap {
  padding: 0;
  /* Color shifts based on Blocksy root variables */
  color: var(--body-fcolor);
  font-family: var(--font-primary);
}

/* 1. The Vanguard: Mascots & Newsletter */
.cs-footer-vanguard {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1.2fr;
  /* 3 Columns: Start, Center, End */
  align-items: center;
  gap: 2.5rem;
  padding: 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  margin-bottom: 3rem;
}

.vanguard-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Speech Bubble */
.cs-speech-bubble {
  position: relative;
  font-size: 18px;
  line-height: 24px;
  width: 300px;
  background: #e5e5e5;
  border-radius: 40px;
  padding: 24px;
  text-align: center;
  color: #000;
}

/* Speech Bubble Pointer (The "Tail") */
.cs-speech-bubble::before,
.cs-speech-bubble::after {
  content: '';
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 24px solid #e5e5e5;
  border-right: 12px solid transparent;
  border-top: 12px solid #e5e5e5;
  border-bottom: 20px solid transparent;
  right: 4.5rem;
  bottom: -24px;
}

/* Status Text & Color Wraps */
.cs-status-text {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 1px;
  margin-top: 1rem;
  text-transform: uppercase;
}

.status-purple {
  color: var(--snarkive-purple-accent);
  font-weight: 800;
}

/* Typing Cursor Effect */
.status-purple:after,
.status-orange:after {
  content: '_';
  animation: cursor-blink 1s infinite;
}

@keyframes cursor-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.status-orange {
  color: var(--cinefox-orange);
  font-weight: 800;
}

/* High-Intensity Glitch for Cipher Status */
.status-orange.is-glitching {
  position: relative;
  display: inline-block;
  animation: status-shake 0.3s infinite;
  text-shadow:
    2px 0 var(--cinesist-red),
    -2px 0 var(--snarkive-purple-accent);
}

@keyframes status-shake {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translate(1px, -1px);
  }

  50% {
    transform: translate(-1px, 1px);
  }

  75% {
    transform: translate(1px, 1px);
  }

  100% {
    transform: translate(0);
  }
}

/* Ensure this variable exists */

/* Cinefox Glow (Alpha-aware) */
.cs-cinefox-footer-logo img {
  width: 10rem !important;
  /* Increased from 125px (~7.8rem) */
  height: auto;
  filter: drop-shadow(0 0 0.93rem rgba(226, 179, 4, 0.6));
  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}

.cs-cinefox-footer-logo img:hover {
  filter: drop-shadow(0 0 1.56rem rgba(226, 179, 4, 0.9));
  transform: scale(1.05);
}

/* Cipher Glow (Alpha-aware) */
.cs-cipher-footer-logo img {
  width: 15rem !important;
  /* Significant increase for the Disruptor */
  height: auto;
  filter: drop-shadow(0 0 0.93rem rgba(121, 44, 133, 0.5));
  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}

.cs-cipher-footer-logo img:hover {
  filter: drop-shadow(0 0 1.56rem rgba(121, 44, 133, 0.8));
  animation: glitch-mini 0.2s infinite;
  transform: scale(1.05);
}

/* Middle Column Styling */
.terminal-header {
  padding: 0;
  margin: 0;
}

.cs-resistance-title {
  color: var(--cinesist-red);
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.cs-resistance-sub {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

/* Responsive Fix */
@media (max-width: 1024px) {
  .cs-footer-vanguard {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

/* --- Cinesist Terminal Form: Clean Revamp --- */

/* Reset the MailPoet container */
#mailpoet_form_1 {
  width: 100% !important;
  max-width: 31.25rem !important;
  /* 500px */
  margin: 0 auto !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#mailpoet_form_1 form.mailpoet_form {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  /* The Magic: Removes the gap */
  padding: 0 !important;
}

/* Style the Paragraph wrappers MailPoet injects */
#mailpoet_form_1 .mailpoet_paragraph {
  margin-bottom: 0 !important;
  flex: 1;
  /* Makes the email field expand */
}

#mailpoet_form_1 .mailpoet_paragraph.cs-footer-newsletter-button {
  flex: 0 0 auto !important;
  /* Keeps the button tight */
}

/* The Email Input Field */
#mailpoet_form_1 .mailpoet_text {
  width: 100% !important;
  height: 3.125rem !important;
  /* ~50px */
  background: var(--cs-spy) !important;
  border: 1px solid var(--flex-snarkive-90) !important;
  /* Snarkive Purple */
  border-right: none !important;
  /* Seam */
  border-radius: 0.25rem 0 0 0.25rem !important;
  color: var(--white-spy) !important;
  padding: 0 1rem !important;
  font-family: var(--font-primary) !important;
  outline: none !important;
}

#mailpoet_form_1 .mailpoet_text:focus {
  border-color: var(--snarkive-purple-accent) !important;
  box-shadow: inset 0 0 5px rgba(121, 44, 133, 0.2);
}

/* The Authorize Submit Button */
#mailpoet_form_1 .mailpoet_submit {
  height: 3.125rem !important;
  background-color: var(--cinesist-red) !important;
  color: #fff !important;
  border: 1px solid var(--cinesist-red) !important;
  border-radius: 0 0.25rem 0.25rem 0 !important;
  padding: 0 1.5rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#mailpoet_form_1 .mailpoet_submit:hover {
  background-color: var(--flex-snarkive) !important;
  border-color: var(--flex-snarkive-50) !important;
  transform: none !important;
}

/* Handle the "Loading" animation positioning */
#mailpoet_form_1 .mailpoet_form_loading {
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Mobile: Stack them when space is tight */
@media (max-width: 37.5rem) {
  /* 600px */
  #mailpoet_form_1 form.mailpoet_form {
    flex-direction: column !important;
    gap: 0.625rem !important;
  }

  #mailpoet_form_1 .mailpoet_text {
    border-right: 1px solid rgba(121, 44, 133, 0.4) !important;
    border-radius: 0.25rem !important;
  }

  #mailpoet_form_1 .mailpoet_submit {
    border-radius: 0.25rem !important;
    width: 100% !important;
  }
}

.cs-mailpoet-terminal-wrap input.mailpoet_submit:hover {
  background-color: var(--flex-snarkive) !important;
  border-color: var(--flex-snarkive-50) !important;
}

/* Security Status Detail */
.terminal-footer-security {
  margin-top: 15px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  opacity: 0.5;
  padding: 5px;
}

.blink-dot {
  height: 6px;
  width: 6px;
  background-color: var(--flex-snarkive);
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  animation: pulse-cinesist 2s infinite;
}

@keyframes pulse-cinesist {
  0% {
    box-shadow: 0 0 0 0 var(--flex-snarkive-50);
  }

  70% {
    box-shadow: 0 0 0 10px var(--flex-snarkive-90);
  }

  100% {
    box-shadow: 0 0 0 0 var(--flex-snarkive);
  }
}

/* 2. The Directory: Link Columns */
.cs-footer-directory {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.875rem;
  margin-bottom: 3.75rem;
}

.cs-footer-directory h4 {
  color: var(--cinesist-red);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 1.25rem;
  border-left: 3px solid var(--cinesist-red);
  padding-left: 0.75rem;
}

.cs-footer-directory ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cs-footer-directory ul li a {
  color: var(--body-fcolor);
  opacity: 0.7;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 2.2;
  transition: all 0.2s ease;
}

.cs-footer-directory ul li a:hover {
  opacity: 1;
  color: var(--snarkive-purple-accent);
  padding-left: 0.5rem;
}

/* 3. The Signature Block */
.cs-footer-signature {
  text-align: center;
  border-top: 1px dashed rgba(128, 128, 128, 0.3);
  padding-top: 0;
}

/* Light/Dark Wordmark Logic */
/* We only show the dark wordmark in dark mode, and vice versa */
.cs-dark-wordmark-logo {
  display: block;
  margin: 0 auto 0.93rem;
}

.cs-light-wordmark-logo {
  display: none;
  margin: 0 auto 0.93rem;
}

[data-color-mode='light'] .cs-dark-wordmark-logo {
  display: none;
}

[data-color-mode='light'] .cs-light-wordmark-logo {
  display: block;
}

.cs-footer-signature p {
  font-size: 0.75rem;
  letter-spacing: 1px;
  opacity: 0.6;
}

/* Mini Glitch for Cipher */
@keyframes glitch-mini {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 1px);
  }

  40% {
    transform: translate(2px, -1px);
  }

  100% {
    transform: translate(0);
  }
}

/* Mobile Responsive Adjustments */
@media (max-width: 900px) {
  .cs-footer-vanguard {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .cs-footer-directory {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-cipher-footer-logo img,
  .cs-cinefox-footer-logo img {
    width: 12rem !important;
  }
}

/*
-----------------
1 - Wordpress Hacks
-----------------
*/

/* --- Hide Wordpress Page Titles --- */
.page .entry-title,
.page-title {
  display: none;
}

/* Ensure the main site container respects your framework gutter */
body {
  --wp--style--root--padding-left: var(--wp--preset--spacing--md);
  --wp--preset--spacing--md: clamp(1.5rem, 2vw, 2.5rem);
  /* Fallback if JSON fails */
}

.wp-site-blocks,
.entry-content {
  padding-left: var(--wp--preset--spacing--md) !important;
  padding-right: var(--wp--preset--spacing--md) !important;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure Full Width blocks can still break out of the gutter */
.alignfull {
  margin-left: calc(var(--wp--preset--spacing--md) * -1) !important;
  margin-right: calc(var(--wp--preset--spacing--md) * -1) !important;
  width: auto;
  max-width: 100vw;
}