/*
Theme Name: Cineverse
Theme URI: 
Author: Cinesist
Author URI: 
Description: This is the Official Theme created and managed by Cinesist and the team! We have migrated multiple themes into one Framework to use FSE!
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: foxiz
Text Domain: cineverse
Tags: custom-background, custom-menu, featured-images, theme-options, custom-colors, translation-ready, threaded-comments.


/*
-----------------
>>> 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
22 - Wordpress Hacks
23 - Admin
-----------------
*/

/*
-----------------
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 cineverse 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 {

  /* Cinesist 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 */
  --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: #ffa444;
  /* Yellow Rating Bar */
  --cinebar-midgreen: #a0b339;
  /* Mid Green Rating Bar */
  --cinebar-green: #50a735;
  /* Green Rating Bar */

  /* ========================================= */
  /* == 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-gray-15: #88888826;

/* 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 */
--round-5: 5px;
--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-theme="dark"],
.light-scheme {
  /* --- 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 */
  --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-gray-15: #88888840;
  --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
==================== */

/* ====================
   BASE HTML STYLES
   ==================== */
html {
  font-size: 100%;
  /* Sets base to 16px */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary), var(--font-emoji), sans-serif;
  font-size: var(--font-body);
  line-height: var(--line-height-body);
}

/* --- Fluid Headings & Noto Color Emoji --- */
h1,
.h1 {
  font-size: var(--font-h1);
  line-height: var(--line-height-h1);
  font-family: var(--font-primary), var(--font-emoji), sans-serif;
  font-weight: 800;
}

h2,
.h2 {
  font-size: var(--font-h2);
  line-height: var(--line-height-h2);
  font-family: var(--font-primary), var(--font-emoji), sans-serif;
  font-weight: 700;
}

h3,
.h3 {
  font-size: var(--font-h3);
  line-height: var(--line-height-h3);
  font-family: var(--font-primary), var(--font-emoji), sans-serif;
  font-weight: 700;
}

h4,
.h4 {
  font-size: var(--font-h4);
  line-height: var(--line-height-h4);
  font-family: var(--font-primary), var(--font-emoji), sans-serif;
  font-weight: 600;
}

h5,
.h5 {
  font-size: var(--font-h5);
  line-height: var(--line-height-h5);
  font-family: var(--font-primary), var(--font-emoji), sans-serif;
  font-weight: 600;
}

h6,
.h6 {
  font-size: var(--font-h6);
  line-height: var(--line-height-h6);
  font-family: var(--font-primary), var(--font-emoji), sans-serif;
  font-weight: 600;
}

/* --- Hyperlinks Style --- */
a {
  color: var(--flex-snarkive);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--flex-snarkive-rev-90);
  text-decoration: underline;
}

/* --- Button Style --- */
.is-btn {
  color: var(--awhite);
}

.is-button a:hover {
  color: var(--awhite);
}

/*
-----------------
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: Checking Relevancy as this made Blocksy Spacing use our spacing --- */

/* DEPRECIATED: 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;
}

/* --- Display Post Card Titles --- */
.entry-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* Adjust this number to limit lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Ensures ellipsis appears */
}

/* --- Table of Contents Override --- */
.rbtoc {
  display: inline-flex;
  float: none;
  flex-flow: column nowrap;
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  padding: 20px 20px 13px;
  border-radius: var(--round-5);
  background-color: var(--toc-bg, var(--flex-gray-7));
  box-shadow: 0 5px 30px var(--shadow-7);
}

/* --- Comments Section Style --- */
#comment {
  border-width: 2px;
  border-style: groove;
  border-color: var(--g-color);
  border-radius: 10px;
  box-shadow:
    inset 0px 2px 5px rgba(0, 0, 0, 0.3),
    inset 0px -2px 5px rgba(255, 255, 255, 0.5);
}

/*
-----------------
3 - Icon Fonts
-----------------
*/
/* --- Elementor Icon Dark Mode Fix --- */
.elementor-icon-list-icon svg {
  fill: var(--body-fcolor);
  /* Ensure icons adapt to Mode color */
}

/* Over-ride Foxiz Bookmark Icon */
.rbi-plus:before {
  content: "\e907" !important;
  /* Adds the outlined Bookmark Icon */
}

.rbi-bookmark-fill:before {
  content: "\e906" !important;
  /* Adds the filled Bookmark Icon */
  color: var(--flex-snarkive);
  /* Color it Snarkive when they follow */
}

/* Make Follow Look Relevant */
.b-follow .rb-follow i:after {
  font-family: var(--meta-b-family);
  font-size: 1.25em !important;
  font-weight: var(--meta-b-fweight);
  margin-left: 5px;
}

/*
-----------------
4 - Swiper Slider
-----------------
*/

/*
-----------------
5 - Header
-----------------
*/
/* --- Header logged in greeting --- */
.logged-welcome {
  font-size: 1rem;
  align-items: center;
}

/* Apply glassmorphism effect to #sticky-holder when body has the 'sticky-on' class */
body.sticky-on #sticky-holder {
  background-color: rgba(0, 0, 0, 0.5) !important;
  /* Semi-transparent black for dark mode base */
  backdrop-filter: blur(10px);
  /* Blur effect */
  -webkit-backdrop-filter: blur(10px);
  /* Safari support */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Subtle white border for separation */
}

/* Ensure the navbar-outer placeholder has correct height */
#navbar-outer {
  height: 60px !important;
  /* Adjust if your actual header height is different */
}

/* Hide all default logos within the sticky header, to allow JS to show the correct one */
body.sticky-on .logo-wrap .logo img {
  display: none !important;
}

/* Ensure the specific logo-transparent is visible when JavaScript makes it active */
body.sticky-on .logo-wrap .logo img.logo-transparent {
  display: block !important;
}

/* --- News Ticker Styles --- */
/* Refined 3D Look for Hot News Ticker Container - Raised/Extruding effect */
.elementor-element-247d83b {
  background-color: var(--e-global-color-14d232a, #1a1a1a);
  /* Ensure a consistent background */
  border-radius: 5px;
  /* Maintain rounded corners */
  padding: 1rem 0;
  /* Consistent padding */

  /* Border for a defined top edge, simulating thickness */
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Subtle light border */

  /* Multiple outer shadows for a raised/extruding effect */
  box-shadow:
    0px 5px 15px rgba(0, 0, 0, 0.3),
    /* Closer, softer shadow */
    0px 10px 30px rgba(0, 0, 0, 0.2),
    /* Deeper, more diffused shadow */
    0px 0px 0px 2px rgba(255, 255, 255, 0.03);
  /* Very subtle edge highlight for light source */

  /* Subtle 3D tilt for perspective - slightly more pronounced */
  transform: perspective(1000px) rotateX(2deg) translateY(-2px);
  /* Lift and tilt slightly */
  transform-origin: bottom center;
  /* Rotate and lift from the bottom edge */
  transition: all 0.3s ease;
  /* Smooth transition for any potential hover effects */

  overflow: hidden;
  /* Important for containing rounded corners and shadows */
}

/* Ensure inner container adapts */
.elementor-element-247d83b>.elementor-container {
  border-radius: 10px;
  /* Slightly less than parent's border-radius */
}

/* Ensure text visibility */
.elementor-element-247d83b .breaking-news-heading span,
.elementor-element-247d83b .breaking-news-title a {
  color: var(--e-global-color-text, #ffffff) !important;
  /* Ensure text is visible (e.g., white in dark mode) */
}

/* --- 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);
  z-index: 99999;
}

/* --- 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;
}

/* --- Header Navigation --- */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
    --theme-font-weight: 700;
    --theme-text-transform: uppercase;
    --theme-font-size: 1rem;
    --theme-line-height: 1.3;
    --theme-link-initial-color: var(--body-fcolor);
    --theme-link-hover-color: var(--flex-snarkive);
    --theme-link-active-color: var(--gc-snarkive-accent);
}

/* --- 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);
}

/*
-----------------
6 - Post Entry
-----------------
*/

/* --- Featured Image Container Style --- */
.s-feat-holder {
  border-radius: var(--round-10);
  /* More Rounded Corners */
  box-shadow: var(--shadow-1);
  /* Use Uniform Shadow Variable */
}

/* --- Featured Image Gradient Overlay --- */
.single-standard-3 .single-header-inner:before {
  height: 628px;
  /* Made the Featured Image look complete */
  background: linear-gradient(to top, var(--dark-accent) 30%, transparent 100%);
}

/* --- Post Title Style --- */
.s-title {
  margin-bottom: 5px;
}

/* --- Captions Decoration Style --- */
figcaption:not(:empty):before,
.wp-caption-text:before {
  color: var(--g-color);
}

/* --- Cinesist Category Button Style --- */
.s-cats {
  margin: 0;
}

/*
-----------------
7 - Post Modules
-----------------
*/

/* --- Highlight Post Module Wrapper Style --- */
.s-hl.s-hl-1 {
  background-color: var(--news-letter-bg);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  box-shadow: 5px 10px 20px 0px var(--shadow-7);
}

/* --- Highlight Post Module Style --- */
.s-hl-1 .s-hl-heading {
  opacity: 0.55;
  z-index: 1;
}

.s-hl-1 .hl-point:not(:last-child) {
  padding-bottom: var(--s-hl-gap);
  border-bottom: none;
}

/* --- Cinescore Quick Section Styles --- */
.sqview {
  border-top: 2px solid var(--g-color);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  box-shadow: 5px 10px 20px 0px var(--shadow-7);
}

/* --- Cinescore Section Styles --- */
.review-section {
  background-color: var(--news-letter-bg);
  border-top: 2px solid var(--g-color);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  box-shadow: 5px 10px 20px 0px var(--shadow-7);
}

/* --- Cinescore Meta Bar Style --- */
.rline-wrap {
  border: solid 1px #888888ab;
  /* A Nice little border to give 3d effect */
}

/* --- Cinescore Meta Score Style --- */
.review-quickview-meta .meta-score {
  font-size: max(28px, 2rem) !important;
  line-height: 1;
}

/* --- Cinescore Meta Rating Word Style --- */
.meta-text {
  font-size: 16px !important;
  /*  font-weight: 700;  Bold for Emphasis */
}

/* --- Remove Foxiz Text Related Post Links from Posts --- */
.widget.entry-widget .related-sec {
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  display: none;
}

/**
 * Cinescore Content Section
**/

/* --- Cinescore Breakdown Label Info Line Style --- */
.review-label-info {
  border-left: 3px solid var(--review-color);
}

/*
-----------------
8 - Blocks
-----------------
*/
/* --- Layout Headings --- */
/* Layout 3 Title */
.heading-layout-3 .heading-inner,
.heading-layout-c3 .heading-inner {
  border-bottom: 2px solid var(--body-fcolor);
}

.heading-layout-3 .heading-title>* {
  display: inline-flex;
  padding-bottom: var(--heading-spacing, 10px);
  border-bottom: 5px solid var(--heading-sub-color);
  /* position: absolute; */
  bottom: -3px;
}

/* Layout 12 Title */
.heading-layout-12 .heading-inner {
  width: 100%;
  padding-bottom: var(--heading-spacing, 7px);
  border-bottom: 2px solid var(--heading-color);
}

.heading-layout-12 .heading-title>*:before {
  display: none;
}

/* --- 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(--review-accent);
}

/* --- 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: 2rem;
  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: 2px dashed #ff0d0d;
  border-left: 5px outset var(--gc-color) !important;
  /* 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;
  animation: pulse-border 2s infinite;
}

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

  50% {
    border-color: transparent;
  }

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

.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 Movie Review Pattern Style --- */
/* Cinesist Review 2.0 Base Styles */
.cinesist-review-container {
  --cs-primary: #f39c12;
  /* Default Gold */
  --cs-accent: #e74c3c;
  border: 3px solid var(--cs-primary);
  padding: 2rem;
  background: var(--cs-bg);
  color: var(--cs-text);
  border-radius: 5px;
}

/* MASTERPIECE VARIANT (Good Review) */
.cinesist-review-container.is-legendary {
  --cs-primary: #50a735;
  /* Cinescore Legendary🏆 Green */
  --cs-accent: #00d4ff;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

/* DISASTER VARIANT (Bad Review) */
.cinesist-review-container.is-burn {
  --cs-primary: #ff0d0d;
  /* Cinescore Burn Notice🔥 Red Red */
  --cs-accent: #ffa502;
  box-shadow: 0 0 20px rgba(255, 71, 87, 0.2);
}

/* Header & Subtitle */
.cinesist-title {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-transform: capitalize;
  font-weight: 700;
}

/* Subtitle Styling */
.cinesist-subtitle {
  font-style: italic;
  font-weight: 500;
  color: var(--cs-primary);
  border-left: 4px solid var(--cs-accent);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

/* Fourth Wall Styling */

/* Fourth Wall Break */
.cinesist-fourth-wall {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--cs-primary);
  padding: 1.5rem;
  position: relative;
  font-size: 1.1rem;
  margin: 2rem 0;
}

.cinesist-fourth-wall::before {
  content: "👀 INTERNAL MONOLOGUE";
  position: absolute;
  top: -12px;
  left: 10px;
  background: var(--cs-primary);
  color: #000;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 2px 8px;
}

.wall-label {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--cs-primary);
  color: #000;
  font-weight: 900;
  font-size: 0.7rem;
  padding: 2px 10px;
}

/* Verdict Box */
.cinesist-verdict-box {
  background: #1a1a1a;
  border-radius: 15px;
  padding: 20px;
  margin-top: 40px;
}

.verdict-title {
  padding: 0;
}

.cinescore-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid var(--cs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
}

/* Cinesist Character Bio Post Insert Style */
/* Bio Wrapper Grid */
.cinesist-bio-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

/* Individual Bio Card */
.character-bio-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.character-bio-card:hover {
  transform: translateY(-5px);
  border-color: var(--cs-primary);
}

/* Bio Image Circle */
.bio-image img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cs-primary);
  margin-right: 15px;
}

/* Text Elements */
.actor-name {
  font-size: 1.1rem;
  margin: 0;
  color: var(--cs-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.character-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 8px;
  opacity: 0.8;
}

.bio-snark {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

/* Visual Masonry Grid for Review Posts */
/* Gallery Container */
.cinesist-visual-gallery {
  margin: 50px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 15px;
}

.gallery-title {
  text-align: center;
  color: var(--cs-primary);
  margin-bottom: 30px;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
}

/* Masonry Layout */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 200px;
  gap: 15px;
}

.masonry-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.masonry-item:hover img {
  transform: scale(1.1);
}

/* Large image spanning two rows */
.masonry-item.is-large {
  grid-row: span 2;
}

/* Snarky Caption Overlay */
.masonry-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.75rem;
  padding: 8px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  font-style: italic;
}

.masonry-item:hover figcaption {
  transform: translateY(0);
}

/* Deep Thoughts Container */
.cinesist-deep-thoughts {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 60px 0;
  padding: 30px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 100%);
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}

/* The Character Graphic */
.thoughts-character-art {
  width: 200px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px var(--cs-primary));
}

/* LEGENDARY Logic: Cinefox */
.is-legendary .thoughts-character-art {
  background-image: url("https://www.cinesist.com/wp-content/uploads/2025/10/Cinefox-The-Inquisitor-Legendary-Movie-Review-Graphic.png");
}

/* BURN Logic: Hacker Cipher */
.is-burn .thoughts-character-art {
  background-image: url("https://www.cinesist.com/wp-content/uploads/2025/10/Hacker-Cipher-Burn-Notice-Movie-Graphic.png");
}

/* Text Content Styling */
.thoughts-content {
  flex-grow: 1;
}

.thoughts-heading {
  color: var(--cs-primary);
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.thoughts-signature {
  display: block;
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--cs-primary);
  text-transform: uppercase;
  opacity: 0.7;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .cinesist-deep-thoughts {
    flex-direction: column;
    text-align: center;
  }

  .thoughts-character-art {
    width: 150px;
    height: 150px;
  }
}

/* Badge Container Logic */
.cinesist-badge-wrapper {
  display: none;
  /* Hidden by default */
  justify-content: center;
  margin-bottom: 20px;
}

/* Only show badge if the review is a Masterpiece */
.is-legendary .cinesist-badge-wrapper {
  display: flex;
}

/* The Badge Design */
.cinesist-must-watch-badge {
  position: relative;
  background: linear-gradient(135deg, #ffd700 0%, #ffac00 100%);
  color: #000;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(255, 172, 0, 0.4);
  overflow: hidden;
  /* For the shimmer effect */
}

.badge-icon {
  font-size: 1.2rem;
}

/* The Shimmer Effect */
.cinesist-must-watch-badge::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to bottom right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(45deg);
  animation: cinesist-shimmer 3s infinite;
}

@keyframes cinesist-shimmer {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }

  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

/* --- Cinesist Heading Tagline Style - Makes the Heading Transparent and Large --- */
/* --- Applies to Heading Layout 11 Large Faded Headings --- */
.heading-layout-11 .heading-tagline,
.heading-layout-c11 .heading-tagline {
  font-size: 3rem;
  line-height: 1;
  position: absolute;
  top: auto;
  bottom: -20px;
  /* Adjust position as needed */
  left: 0;
  margin: 0;
  pointer-events: none;
  opacity: 30%;
}

/* --- Cinesist Ultimate Review Box Style --- */
.ultimate-review-wrapper {
  background: var(--flex-bg-color-2);
  /* white Spy background */
  color: var(--body-fcolor);
  /* White Spy */
  border-top: 5px solid var(--flex-snarkive) !important;
  border: 1px solid var(--flex-snarkive);
  border-radius: 8px;
  box-shadow: 5px 10px 20px 0px var(--shadow-7);
  overflow: hidden;
  font-family: 'Work Sans', sans-serif;
}

.top-row {
  display: flex;
  gap: 20px;
  padding: 20px;
}

/* Ensure the Hexagon Score stays on top of poster */
.col-poster {
  position: relative;
  overflow: hidden;
  flex: 0 0 220px;
  /* Fixed poster width */
}

.col-poster img {
  border-radius: 4px;
  width: 100%;
  height: auto;
  display: block;
}

.col-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.snarkive-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 15px;
  background: #111;
  border: 1px solid #d102d1;
  /* Snarkive Purple [cite: 16] */
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  transition: background 0.2s;
}

.snarkive-btn:hover {
  background: #d102d1;
}

/* D20 Score Overlay */
.d20-score-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  background: var(--flex-snarkive);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 24px;
  color: #fff;
}

/* 5-Bar Score Visualizer */
.bar-container {
  display: flex;
  gap: 4px;
  height: 10px;
  width: 100px;
}

.bar {
  flex: 1;
  background: #333;
  border-radius: 2px;
}

.bar.filled {
  background: #d102d1;
}

/* Snarkive Purple fills */

/* The Orange-to-Purple CTA */
.cta-gradient-btn {
  display: block;
  padding: 15px;
  text-align: center;
  background: linear-gradient(90deg, #dd7b45 0%, #d102d1 100%);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 20px;
}

/* Economic Warfare Bar Styling [cite: 157] */
.economic-warfare-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--flex-gray-40);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 10px 15px;
  margin: 10px 0;
}

.metric-item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.metric-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--flex-snarkive);
  margin-bottom: 2px;
}

.metric-value {
  font-weight: 700;
  color: var(--body-fcolor);
  /* Body text color to Change on Modes */
}

.metric-divider {
  font-weight: 900;
  color: var(--flex-snarkive-rev);
  /* Cinefox Orange to Snarkive Purple */
  font-style: italic;
}

/* Success/Fail Field Styling [cite: 158] */
.verdict-status-field {
  text-align: center;
  margin-top: 5px;
}

.status-indicator {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-indicator.cash-cow {
  background: #27ae60;
  color: #fff;
}

/* Win [cite: 159] */
.status-indicator.flop {
  background: #c0392b;
  color: #fff;
}

/* Burn Notice [cite: 166] */

/* Snarkive CTA Get Intel Section */
.snarkive-action {
  display: flex;
  padding-bottom: 25px;
}

.snarkive-intel-btn {
  font-size: var(--btn-fsize);
  display: inline-flex;
  align-items: center;
}

/* Middle Section: Breakdown Styles */
.middle-row {
  padding: 20px;
  background: var(--flex-bg-color-2);
  /* Cinefox White Spy to Black Spy */
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.breakdown-header h3 {
  margin: 0;
  font-size: 20px;
  color: #e5e5e5;
  /* Cinefox White Spy */
}

.meta-word {
  padding: 4px 12px;
  border-radius: 4px;
  color: var(--awhite);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
  background: var(--review-accent, var(--cinesist-red));
}

.age-rating {
  border: 2px solid var(--flex-snarkive);
  padding: 2px 5px 2px 5px;
}

.age-rating a {
  text-decoration: none;
}

.age-rating a:hover {
  color: var(--flex-snarkive-rev);
}

/* Score-based Color Logic [cite: 168] */
.meta-word.legendary {
  background: #d102d1;
  color: #fff;
}

/* Purple */
.meta-word.solid {
  background: #27ae60;
  color: #fff;
}

.meta-word.burn-it {
  background: #c0392b;
  color: #fff;
}

.breakdown-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.metric-line {
  margin-bottom: 15px;
}

.metric-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
}

.metric-title {
  color: var(--body-fcolor);
  border-radius: 6px;
  border-left: 3px solid var(--review-color);
  padding: 10px;
}

.metric-number {
  color: #dd7b45;
}

/* Cinefox Orange [cite: 12] */

/* The 5-Bar System */
.bar-visualizer {
  display: flex;
  gap: 5px;
  height: 8px;
}

.score-bar {
  flex: 1;
  background: #333;
  border-radius: 2px;
  transition: background 0.3s ease;
}

.score-bar.filled {
  background: var(--cinebar-green);
  /* Legendary Green */
  box-shadow: 0 0 8px rgb(80 167 53 / 50%);
}

/* --- Cinescore Dynamic Bar Colors --- */
.score-bar {
  flex: 1;
  height: 10px;
  border-radius: 2px;
  background-color: #333;
  /* Default Empty Bar */
  transition: all 0.3s ease;
}

/* Logic: Classes applied based on the bar index and total score */
.score-bar.fill-red {
  background-color: #ff0d0d;
  box-shadow: 0 0 5px rgba(255, 13, 13, 0.3);
}

.score-bar.fill-orange {
  background-color: #ff5612;
}

.score-bar.fill-yellow {
  background-color: #f1ca2b;
}

.score-bar.fill-light-green {
  background-color: #b2cc21;
}

.score-bar.fill-legendary {
  background-color: var(--cinebar-green);
  box-shadow: 0 0 8px rgb(80 167 53 / 50%);
}

/* Container spacing */
.bar-visualizer {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 150px;
  margin-top: 5px;
}

/* --- Middle Row: Intel & Bullets --- */
.col-intel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intel-block h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.intel-block.gold h4 {
  color: #27ae60;
}

.intel-block.bad h4 {
  color: #c0392b;
}

.hex-bullet {
  width: 12px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.intel-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.intel-block li {
  font-size: 13px;
  margin-bottom: 8px;
  padding-left: 15px;
  position: relative;
  color: var(--body-fcolor);
  line-height: 1.4;
}

.intel-block li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: #dd7b45;
  font-weight: 900;
}

.intel-block.gold li {
  font-size: 13px;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  color: var(--body-fcolor);
  line-height: 1.4;
}

.intel-block.gold li::before {
  content: '🪙';
  position: absolute;
  left: 0;
  color: #dd7b45;
  font-weight: 900;
  font-size: 15px;
}

.intel-block.bad li {
  font-size: 13px;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  color: var(--body-fcolor);
  line-height: 1.4;
}

.intel-block.bad li::before {
  content: '🗡️';
  position: absolute;
  left: 0;
  color: #dd7b45;
  font-weight: 900;
  font-size: 15px;
}

/* --- Cinescore Dynamic Bar Colors --- */
/* --- Cinebar Color Progression --- */
.score-bar.filled.fill-red {
  background: #ff0d0d;
}

.score-bar.filled.fill-orange {
  background: #ff5612;
}

.score-bar.filled.fill-yellow {
  background: #f1ca2b;
}

.score-bar.filled.fill-light-green {
  background: #b2cc21;
}

.score-bar.filled.fill-legendary {
  background: var(--cinebar-green);
}

/* The "Glow" logic: only the highest filled bar glows */
.score-bar.filled.glowing.fill-red {
  box-shadow: 0 0 10px 1px #ff0d0d;
}

.score-bar.filled.glowing.fill-orange {
  box-shadow: 0 0 10px 1px #ff5612;
}

.score-bar.filled.glowing.fill-yellow {
  box-shadow: 0 0 10px 1px #f1ca2b;
}

.score-bar.filled.glowing.fill-light-green {
  box-shadow: 0 0 10px 1px #b2cc21;
}

.score-bar.filled.glowing.fill-legendary {
  box-shadow: 0 0 10px 1px var(--cinebar-green);
}

/* Intel Bullet Styling */
.hex-bullet {
  width: 12px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.intel-block.gold h4 {
  color: #27ae60;
}

/* Green Spy */
.intel-block.bad h4 {
  color: #c0392b;
}

/* Burn Notice */

/* --- Featured Crew Style --- */
.featured-crew-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.crew-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  border-left: 3px solid #dd7b45;
  padding: 10px;
  background: var(--flex-gray-15);
}

.crew-card img {
  border-radius: 4px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid #333;
}

.crew-info {
  display: flex;
  flex-direction: column;
}

.crew-label {
  font-size: 9px;
  color: #dd7b45;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
}

.crew-name {
  font-size: 13px;
  color: var(--body-fcolor) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.crew-name a {
  color: var(--body-fcolor) !important;
  text-decoration: none !important;
}

.crew-name a:hover {
  color: #dd7b45 !important;
}

/* --- Badge & Genre Polish --- */
.badge-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.cinesist-links a {
  color: #dd7b45;
  text-decoration: none;
  font-weight: 700;
}

.cinesist-links a:hover {
  text-decoration: underline;
}

.item-title {
  margin: 0 0 15px 0;
  font-size: 2rem;
  letter-spacing: -1.5px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 900;
}

/* --- Interactive Toggle Logic --- */
.breakdown-state-check {
  display: none;
  /* Hide the actual checkbox */
}

.breakdown-content {
  max-height: 2000px;
  /* Large enough for content */
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  border-top: 1px solid #333;
}

/* Logic: When checkbox is NOT checked, collapse the content */
.breakdown-state-check:not(:checked) ~ .breakdown-content {
  max-height: 0;
}

.cinesist-review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--flex-gray-15);
  border-top: 1px solid #333;
}

.cinesist-review-footer .cta-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cta-price {
  font-family: monospace;
  font-weight: 800;
  color: #27ae60;
  font-size: 14px;
}

.toggle-btn-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--flex-snarkive);
  cursor: pointer;
  user-select: none;
}

/* Toggle Text Logic */
.breakdown-state-check:checked ~ .cinesist-review-footer .text-closed {
  display: none;
}

.breakdown-state-check:not(:checked) ~ .cinesist-review-footer .text-open {
  display: none;
}

.snarkive-intel-btn {
  font-weight: 900;
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
}

.snarkive-intel-btn:hover {
  text-decoration: underline;
}

/* --- Footer Truth Row --- */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.math-declassified {
  font-family: monospace;
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
}

.final-calc {
  color: var(--flex-snarkive-rev);
  font-weight: 900;
}

/* --- Layout Refinements --- */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two columns of metrics */
  gap: 20px 40px;
  padding: 30px;
}

.intel-row {
  background: var(--flex-gray-1);
  border-top: 1px dashed #333;
}

/* --- Verdict Section Polish --- */
.verdict-row {
  padding: 25px 30px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid #333;
}

.verdict-row h3 {
  margin: 0 0 10px 0;
  font-size: 22px;
  color: var(--body-fcolor);
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.verdict-row p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-fcolor);
  margin: 0;
}

/* --- Footer Score Polish --- */
.footer-score-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.total-visualizer {
  max-width: 165px !important;
  height: 10px !important;
}

.footer-meta-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.final-score-val {
  font-size: 32px;
  font-weight: 900;
  color: var(--body-fcolor);
}

/* --- Transformed CTA Button --- */
.cta-wrapper .cta-gradient-btn {
  position: relative;
  padding: 12px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.cta-price-tag {
  display: block;
  font-size: 11px;
  font-family: monospace;
  color: #00ff00;
  /* Arcade Green Price */
  margin-top: 4px;
  opacity: 0.9;
}

/* --- Cinepress 3.0: Snarkive Tag Box --- */
.snarkive-links-box {
    background-color: var(--gc-spy);
    border-radius: 12px;
    padding: 20px 25px;
    margin-top: 30px;
    border-top: 3px solid var(--flex-snarkive);
    box-shadow: var(--shadow-1);
}

.snarkive-links-box h3 {
    color: var(--gc-color);
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

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

.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);
}

/* --- Cinepress 3.0: Cinesist Review Box Admin Skin --- */

/* 1. The Postbox Wrapper */
#acf-group_cinesist_review_box_fields {
    background: #1a1a1a !important;
    border: 2px solid #333 !important;
    color: #e5e5e5 !important;
}

#acf-group_cinesist_review_box_fields .postbox-header {
    background: #222 !important;
    border-bottom: 2px solid var(--flex-snarkive, #f0217d) !important;
}

#acf-group_cinesist_review_box_fields .hndle {
    color: var(--flex-snarkive, #f0217d) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900;
}

/* 2. Sidebar Tabs (The Data Streams) */
#acf-group_cinesist_review_box_fields .acf-tab-wrap {
    background: #111 !important;
    border-right: 1px solid #333 !important;
}

#acf-group_cinesist_review_box_fields .acf-tab-group li a {
    background: transparent !important;
    color: #888 !important;
    border: none !important;
    transition: all 0.3s ease;
}

#acf-group_cinesist_review_box_fields .acf-tab-group li.active a {
    color: var(--cinesist-gold, #ffde21) !important;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 222, 33, 0.4);
    background: rgba(255, 222, 33, 0.05) !important;
}

/* 3. The Fields (Diagnostic Modules) */
.acf-field {
    border-color: #333 !important;
}

.acf-label label {
    color: #aaa !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 1px;
}

/* 4. Score Breakdown Coloring (Dynamic DNA) */
/* We target the specific fields for Plot, Performance, etc. */
.acf-field-plot-score, .acf-field-performance-score, 
.acf-field-execution-score, .acf-field-visuals-vibes-score, 
.acf-field-pacing-score, .acf-field-rewatch-factor-score {
    background: rgba(255, 255, 255, 0.02) !important;
}

.acf-field input[type="number"], 
.acf-field input[type="text"], 
.acf-field textarea {
    background: #000 !important;
    border: 1px solid #444 !important;
    color: #00ff41 !important; /* Matrix/Hacker Green text */
    font-family: 'Courier New', Courier, monospace !important;
}

/* 5. The "Master Score" Module */
.admin-cinescore {
    background: rgba(240, 33, 125, 0.05) !important;
    border-top: 2px solid var(--flex-snarkive) !important;
}

.admin-cinescore input {
    font-size: 24px !important;
    text-align: center;
    color: var(--cinesist-gold, #ffde21) !important;
}

/* 6. The Switch (The Disruptor Toggle) */
.acf-switch {
    background: #333 !important;
}

.acf-switch .acf-switch-on {
    background: var(--flex-snarkive) !important;
}

/* 7. Radio Buttons (Horizontal) */
.acf-radio-list li label {
    background: #222 !important;
    border: 1px solid #444 !important;
    color: #eee !important;
    padding: 5px 15px !important;
}

.acf-radio-list li label.selected {
    background: var(--flex-snarkive) !important;
    border-color: var(--flex-snarkive) !important;
}

/*
-----------------
9 - Single
-----------------
*/

/* --- Blog Pages Body Styles --- */
/* --- Adjust Blog Pages Content Width --- */
@media (min-width: 992px) {
  .grid-container>*:nth-child(1) {
    flex: 0 0 75%;
    width: 70%;
  }
}

/* --- Adjust Blog Font Size --- */
.eplus-wrapper {
  font-size: 18px;
}

/* --- Cinepress 3.0: Post Dossier DNA Skin --- */

/* 1. Automated Image Borders (Featured and In-Post) */

img.is-review-image {
    border: 4px solid var(--review-accent);
    border-radius: 5px;
}

/* 32 The HUD Bar Sync */
.cs-meta-hud-bar {
    border-top: 2px solid var(--review-accent) !important;
    border-bottom: 2px solid var(--review-accent) !important;
    box-shadow: inset 0 0 20px var(--review-accent);
}

/* 3. The Snarky Highlights Sync */
.s-hl {
    border: 2px solid var(--review-accent) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

.s-hl-heading {
    background: var(--review-accent) !important;
    color: #000 !important;
}

/* 4. Pullquote "Glow" */
figure.wp-block-pullquote blockquote:before {
    color: var(--review-accent) !important;
    opacity: .7 !important;
}

/* --- Cinepress 3.0: Post Dossier DNA Skin --- */

/* 2. HUD Stats Bar Border */
.cs-meta-hud-bar {
    border-left: 8px solid var(--review-accent) !important;
    border-right: 1px solid var(--review-accent) !important;
}

/* 3. Subtitle Sync */
.cs-dossier-subtitle {
    color: var(--review-accent) !important;
}

/* --- Cinepress 3.0: Review Dossier Skin --- */

/* 1. THE SPOTLIGHT HUD */
.cs-review-spotlight {
    min-height: 500px !important;
    border-bottom: 4px solid var(--flex-snarkive);
    margin: auto 5% auto 5%; /* Review Wrapper Simulator */
}
.cs-review-spotlight img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-spotlight-inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.cs-spotlight-meta {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--review-accent, var(--cinesist-gold)) !important;
    background: rgba(0,0,0,0.5);
    display: inline-block;
    padding: 5px 20px;
    border-radius: 2px;
    margin-bottom: 1rem !important;
}

.cs-spotlight-title {
    font-size: clamp(2rem, 5vw, 4rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 1.5rem !important;
}

.cs-spotlight-verdict {
    font-family: var(--font-mono, monospace);
    font-size: 1.1rem;
    color: var(--flex-text-secondary);
    max-width: 700px;
    margin: 0 auto !important;
}

/* 2. THE ANALYTICS HUB GAUGE */
.cs-analytics-hub {
    background: var(--flex-gray-2);
    padding: 3rem !important;
    margin: 2rem 0 !important;
    border: 1px solid var(--flex-decor-border);
    border-left: 10px solid var(--review-accent, var(--flex-snarkive));
}

/* Progress Bar Track */
.cs-gauge-track {
    background: #000;
    height: 10px;
    width: 100%;
    margin-top: 10px;
    position: relative;
}

/* Progress Bar Fill - Animated */
.cs-gauge-fill {
    height: 100%;
    background: var(--review-accent, var(--flex-snarkive));
    box-shadow: 0 0 10px var(--review-accent);
    transition: width 1.5s ease-in-out;
}

/* --- Cinepress 3.0: Post Template Meta & Layout --- */

/* --- Cinepress 3.0: High-Fidelity Ticket Stub Breadcrumbs --- */

/* 1. Reset the Nav & Paragraph */
nav.rank-math-breadcrumb {
    margin: 20px 0 25px 0;
    display: block;
    overflow: visible; /* Required for the cutout circles to pop out */
}

nav.rank-math-breadcrumb p {
    display: flex !important; /* Forces all links/spans onto one line */
    flex-wrap: wrap; /* Allows wrapping on small mobile screens */
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 2px; /* Creates the space for the circular cutouts */
}

/* 2. Style the Ticket Stubs */
nav.rank-math-breadcrumb a,
nav.rank-math-breadcrumb .last {
    display: inline-flex !important;
    align-items: center;
    position: relative;
    background: var(--ticket-bg-color, #f1f1f1);
    padding: 8px 20px;
    color: var(--ticket-text-color, #555);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 4px; /* Slight base rounding */
    transition: all 0.3s ease;
}

/* 3. The "Punch Hole" Cutouts (Pseudo-elements) */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::before,
nav.rank-math-breadcrumb .last::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px; /* Slightly smaller for a cleaner look */
    height: 14px;
    border-radius: 50%;
    background-color: var(--flex-gray-3); /* Matches page background to "punch" through */
    transform: translateY(-50%);
    z-index: 5;
}

/* Position Left Hole */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb .last::before {
    left: -8px;
}

/* Position Right Hole */
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::after {
    right: -8px;
}

/* 4. Hide the separators entirely */
nav.rank-math-breadcrumb .separator {
    display: none !important;
}

/* 5. Start/End Exceptions */

/* Home Link: No left hole, rounded left edge */
nav.rank-math-breadcrumb a:first-of-type {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
nav.rank-math-breadcrumb a:first-of-type::before {
    display: none;
}

/* Last Item: Different color/weight, rounded right edge, no right hole */
nav.rank-math-breadcrumb .last {
    background: var(--cinesist-gold);
    color: #000 !important;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
nav.rank-math-breadcrumb .last::after {
    display: none;
}

/* 6. Interaction */
nav.rank-math-breadcrumb a:hover {
    background: var(--flex-snarkive);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 10;
}

/* 1. THE META BAR */
.cs-post-meta-bar {
    padding: 15px 0;
    border-bottom: 1px solid var(--flex-decor-border);
    margin-bottom: 2rem !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: auto 5%;
}

.cs-meta-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-meta-author img {
    border-radius: 50%;
    border: 2px solid var(--flex-snarkive);
}

.wp-block-post-author-name a {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1rem;
}

.cs-meta-stats {
    display: flex;
    gap: 20px;
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* 2. THE COLUMNS GRID */
.cs-dossier-grid {
    gap: 3rem !important;
    margin-top: 2rem !important;
}

/* Sidebar Specific Styling */
.cs-sidebar-profile {
    background: var(--flex-gray-2);
    border: 1px solid var(--flex-decor-border);
    padding: 20px;
    border-top: 4px solid var(--flex-snarkive);
    position: sticky;
    top: 100px;
}

/* Content Area Polish */
.wp-block-post-content {
    line-height: 1.8;
    font-size: 1.1rem;
}

/* --- Save It Placeholder Glow --- */
.cs-meta-stats p:contains('[SAVE]') {
    color: var(--cinesist-gold);
    cursor: pointer;
    font-weight: 900;
}
/* ---------------------------------*/
/* --- Cinepress 3.0: Cinematic Spotlight Protocol --- */

/* 1. The Stage & Backdrop */
.cs-spotlight-stage {
    min-height: 65vh !important; /* Forces the large cinematic height */
    display: flex !important;
    align-items: flex-end !important; /* Pushes text to the bottom */
    position: relative;
}

.cs-spotlight-img img {
    border-radius: var(--round-5);
    box-shadow: var(--shadow-1), 0 0 15px rgba(0, 0, 0, 0.5), 0 0 5px var(--review-accent);
    border: 5px solid var(--review-accent) !important;
    transition: all 0.5s ease;
}

.cs-spotlight-overlay {
    width: 100%;
    position: absolute;
    right: 52px;
    padding: 5% 5% 2% 2% !important;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%) !important;
}

/* 2. Dossier Typography */
.cs-dossier-title {
    /* font-size: var(--font-h1) !important; */
    text-transform: CAPITALIZE;
    color: #fff !important;
    line-height: 0.95;
    margin-bottom: 10px !important;
}

.cs-dossier-subtitle {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    color: var(--cinesist-gold) !important;
    font-weight: 300;
    line-height: 1.3;
}

/* Rankmath Movie Ticket Breadcrumbs Wrapper */
.cs-review-breadcrumbs-wrapper {
 padding-left: 2px;
 padding-right: 0;
}

/* 3. The Meta HUD Bar */
.cs-meta-hud-bar {
    background: var(--flex-gray-15);
    border-bottom: 1px solid var(--flex-decor-border);
    padding: 15px 20px !important;
    justify-content: space-between !important;
    margin-bottom: 2rem !important;
}

.cs-operative-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 0;
    padding-right: 0;
}

.cs-operative-info img {
  width: 3rem;
    border: 2px solid var(--flex-snarkive);
    border-radius: 50%;
}

.cs-operative-info-box {
    display: flex;
    align-items: center;
    position: relative;
    gap: 15px;
    padding-left: 0;
    padding-right: 0;
}

.cs-operative-info-box img {
  width: 3.5rem;
  border: 2px solid var(--flex-snarkive);
  border-radius: 50%;
}

.cs-operative-info-verify {position: absolute;left: 75px;margin-top: -1.3em !important;}

.cs-user-badge{
  display: flex;
  position: relative;
}
/* --- Cinepress 3.0: Mission Status HUD --- */

.cs-mission-status {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: var(--font-mono, monospace);
}

/* The Meta Word (Legendary, Burn-it, etc.) */
.cs-hud-meta-word {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: 2px;
    text-shadow: 0 0 10px currentColor; /* Gives it that neon glow */
}

/* The Large Cinescore Bubble */
.cs-hud-big-score {
    font-size: 2rem;
    font-weight: 900;
    color: var(--review-accent);
    padding: 5px 15px;
     /* Color injected by PHP */
    border-radius: 2px;
    text-shadow: 0 0 10px currentColor;
}

/* Interaction: Pulse effect on the score */
.cs-hud-big-score:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}

/* 4. Sidebar Card Styling */
.cs-sidebar-card {
    background: var(--flex-gray-2);
    border: 1px solid var(--flex-decor-border);
    padding: 25px !important;
    border-top: 4px solid var(--flex-snarkive);
    position: fixed;
    top: 100px;
}

/* --- Cinepress 3.0: Snarkive Holographic Sidebar --- */

.cs-snarkive-intel-card {
    position: -webkit-sticky;
    position: sticky;
    top: 30px; /* Adjust based on your header height */
    margin-bottom: 50px;
    background: var(--flex-gray-15);
    border: 1px solid var(
    --flex-decor-border);
    border-top: 5px solid var(
    --review-accent);
    padding: 0 !important;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.3);
    border-radius: 4px;
    z-index: 10;
    transition: top 0.3s ease;
}

/* 1. The Holographic Poster Effect */
/* We create a "double" poster look using a pseudo-element for the blurred background */
.cs-sidebar-poster-wrap {
    position: relative;
    height: 350px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

/* The "ghost" background image */
.cs-sidebar-poster-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(15px) opacity(0.4) saturate(2);
    transform: scale(1.2);
}

/* The sharp front-facing poster */
.cs-sidebar-poster-main {
    position: relative;
    z-index: 2;
    height: 80%;
    width: auto;
    border: 1px solid var(--review-accent);
    box-shadow: 0 0 30px var(--review-accent);
    transform: perspective(1000px) rotateY(-5deg); /* Subtle 3D tilt */
}

/* --- Cinepress 3.0: GitBash Terminal Styling --- */

.cs-terminal-line {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    line-height: 1.4;
    margin-bottom: 15px;
    background: #000;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #333;
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

/* User & Host (Green) */
.cs-user {
    color: #2ecc71; /* Classic Terminal Green */
    font-weight: 700;
}

/* Separator (White) */
.cs-bash-sep {
    color: #ffffff;
    margin: 0 2px;
}

/* Directory (Snarkive Purple) */
.cs-dir {
    color: var(--flex-snarkive); /* Injects the score color or purple */
    font-weight: 600;
}

/* Command & Args (White) */
.cs-command {
    color: #ecf0f1;
    margin-left: 8px;
}

/* Blinking Cursor Effect */
.cs-cursor {
    color: var(--review-accent);
    font-weight: 900;
    animation: terminal-blink 1s step-end infinite;
}

@keyframes terminal-blink {
    from, to { opacity: 0; }
    50% { opacity: 1; }
}

/* Content adjustment to fit the new terminal line */
.cs-intel-title {
    margin-top: 10px !important;
}

/* 2. Content Area: Data Terminal */
.cs-intel-card-content {
    padding: 25px !important;
    position: relative;
}

/* Scanline Effect Overlay */
.cs-intel-card-content::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 5;
}

.cs-intel-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    color: var(--flex-text-primary);
    margin-bottom: 5px !important;
    letter-spacing: -1px;
}

.cs-intel-type {
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    color: var(--review-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

.cs-intel-overview {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--flex-text-secondary);
    border-top: 1px dashed var(--flex-decor-border);
    padding-top: 15px;
}

/* 3. The Access Button */
.cs-intel-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--review-accent) !important; /* Solid Brand Color */
    border: 1px solid var(--review-accent) !important;
    border-radius: 2px;
    color: #fff !important;
    box-shadow: 0 4px 0px rgba(0,0,0,0.5), 0 0 15px var(--review-accent);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 12px;
    margin-top: 20px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.cs-intel-btn:hover {
    background: var(--review-accent) !important;
    color: #ffffff;
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.2);
    box-shadow: 0 6px 20px var(--review-accent);
}

/* Interaction: "Active Signal" Animation on the button */
.cs-intel-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0px rgba(0,0,0,0.8);
}

/* --- Cinepress Review Share Box --- */
.cs-review-social-share {
  margin-block-start: var(--space-md)!important;
  margin-block-end: var(--space-md) !important;
}

.cs-review-share-box {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-right: 10px;
}

/* --- Cinesist Review Comments Block --- */
/* Comments Spacing */
.cs-review-comments-wrapper {
  margin-block-start: var(--space-md)!important;
  margin-block-end: var(--space-md)!important;
}

.cs-review-comments-label-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cs-review-thoughts-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cs-review-comments-label-icon {
  margin: 0 !important;
  font-size: 2rem !important;
}

.cs-review-comments-label {
  margin: 0!important;
}

.comment-respond:not(:only-child) .comment-reply-title {
  position: relative;
  padding-top: var(--space-sm) !important;
  border-top: 1px solid var(--flex-text-title)!important;
}

.comment-respond:not(:only-child) .comment-reply-title::before {
    background-color: var(--flex-snarkive);
    top: -1px;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 27%;
    z-index: 1;
}

/* Comments Text Area */
/* Styling for all comment inputs and textarea */
.comment-form-field-textarea textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
  border: 2px solid var(--flex-snarkive-90) !important;
  border-radius: 10px;
  padding: 10px;
  width: 100%; /* Ensure they fill the container */
  box-shadow: inset 5px 5px 10px var(--flex-gray-2),
    inset -5px -5px 10px var(--wp--preset--color--flex-gray-4);
}

/* Hide labels but keep them accessible for screen readers */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.comment-form .logged-in-as, .comment-form .comment-notes {
    display: none;
}

/* Avatar styling */
.user-avatar-circle, .user-icon-placeholder {
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 5px;
}

/* Brand styling for comments login/out link */
.cs-comment-operative-info .brand-first,
.cs-comment-operative-info .brand-last {
    display: inline-flex;
}

.brand-first {
    font-weight: bold;
    color: var(--flex-snarkive); /* Adjust to your brand color */
    padding-left: 5px;
}

.brand-last {
    font-weight: 600;
}

.required-mark {
    color: #e74c3c;
}

.cs-comment-operative-info {
  display: flex !important;
  margin-bottom: 20px;
  line-height: 1.6;
  align-items: center;
  gap: 5px;
}

.cs-comment-operative-info img {
    width: 2.25rem;
    border: 2px solid var(--flex-snarkive);
    border-radius: 50%;
}

.cs-logged-in-as {
  margin: 0;
}

.cs-logged-out-as {
  margin: 0;
}

.cs-operative-info-avatar-icon {
  font-size: 1.2rem;
  align-items: center;
  width: 1.5rem;
  color: var(--body-fcolor);
  fill: var(--body-fcolor);
}

/* Blocksy Modal Trigger Style */
.ct-open-modal {
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}


/*
-----------------
10 - Archives
-----------------
*/
/* Archive Grid */
.archive-header-content {
  flex-grow: 1;
  border-bottom: 3px solid;
  /* Gives us the nice separation */
  max-width: 1250px;
  /* Makes the header lineup with the page */
  padding: 0px 0px 0px 0px;
  /* Removes all the padding */
}

.archive-title {
  text-align: left !important;
  /* Fixes Foxiz Stuck on Center Rule */
  padding: 0px !important;
  /* Takes the spacing away from the left side */
  margin-bottom: 1rem !important;
  /* Adds a small space between the Archive Title and Description */
  font-size: var(--font-h1) !important;
}

/* --- Heading Titles --- */
.archive-title.b-follow {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  gap: 20px;
  /* border-bottom: 3px solid var(--body-fcolor); /* Adds a border underneath the Heading, that changes colors */
}

/* Find this rule in your Foxiz CSS and add the two lines below: */
.b-follow .rb-follow {
  width: auto;
  min-width: 25px;
  padding-right: 0px;
  padding-left: 0px;
  border-radius: var(--round-7);
  display: inline-flex;
  align-items: center;
  /* THIS IS THE KEY FLEXBOX PROPERTY */
  justify-content: center;
  /* ADD THIS to center content horizontally as well */
}

/* Now, ensure the icon and the text added via ::after are aligned */
.b-follow .rb-follow i {
  -webkit-transform: none !important;
  transform: none !important;
  /* ADD THIS to ensure the icon is centered relative to the text baseline */
  vertical-align: middle;
  font-size: 1em !important;
}

.b-follow .rb-follow i:before {
  font-size: 2em;
}

.b-follow .rb-follow i:after {
  font-family: var(--meta-b-family);
  font-size: 1.25em;
  font-weight: var(--meta-b-fweight);
  margin-left: 5px;
  position: absolute;
}

/* --- Target the main wrapper to ensure it has space to work with --- */
.category-hero-wrap {
  /* Set an appropriate height/max-height for the hero section */
  /* Example: adjust the max-height as needed */
  max-height: 400px;
}

/* --- Ensure the item container takes up the full space and is a Flex container --- */
.category-hero-item-inner {
  width: 100%;
  height: 100%;
  /* Ensures items inside are centered (optional, but often helpful for 'contain') */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- The KEY Change: Use 'object-fit: contain' --- */
.category-hero-item-inner img {
  /* Set dimensions to ensure the image can use the whole container space */
  width: 100%;
  height: 100%;
  /* This scales the image down to fit its container without cropping. */
  /* It preserves the image's aspect ratio, so you'll see the whole image. */
  object-fit: contain;

  /* Remove any fixed margins or padding that might be squishing the image */
  margin: 0;
  padding: 0;
}

/*
-----------------
11 - Pages
-----------------
*/
.page-header-1 .page-header-inner {
  display: none;
  /* Hides Default Foxiz Page Header */
}

/* --- Homepage --- */
/* Sets the font size for quick links */
.qlink {
  font-size: var(--rem-mini);
  /* 0.8rem */
}

/* Homepage Category Boxes */
.cbox-title {
  font-size: 1.2rem;
}

@media (min-width: 768px) {

  /* makes .cbox elements shrink to 15% width,
     but only when the screen width is 768px or larger. */
  .rb-col-4>.block-inner>.cbox {
    flex-basis: 15%;
    width: auto;
    /* Ensures flex-basis takes precedence over width */
  }
}

/* --- 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);
}

.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 {
  text-decoration: 3px solid underline;
  text-decoration-color: var(--accent) !important;
}

.cs-intel-card-excerpt {
  flex-grow: 0;
  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;
  margin-block-end: 0 !important;
  overflow: hidden;
}

/* Adding Line CLAMP to Intel Card to uniform excerpts */
.cs-intel-card-excerpt {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    display: -webkit-box;  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 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: Review Intel Card Fix --- */

/* 1. Correcting the Wrapper/Grid Relationship */
.cs-intel-card-section-wrapper .is-reviews .cs-intel-card,
.is-reviews .cs-intel-card-inner {
  background: var(--flex-gray-2) !important; /* Forces individual card background */
  border: 1px solid var(--flex-decor-border) !important;
  margin-bottom: 2rem !important; /* Force spacing if grid-gap fails */
  position: relative;
  padding-top: 4px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. The Cinemeter: Score-based Accent */
.cs-intel-card-section-wrapper .is-reviews .cs-intel-card::before,
.is-reviews .cs-intel-card-inner::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 12px var(--review-accent);
}

.is-reviews .cs-intel-card-title a:hover {
  text-decoration: 3px solid underline;
  text-decoration-color: var(--review-accent) !important;
}

/* 3. The Meta Badge: Slanted HUD */
.cs-review-meta-badge {
  position: absolute;
  top: 10px;
  right: -5px; /* Slight offset for that disruptive look */
  background: var(--review-accent);
  color: #e5e5e5 !important;
  padding: 2px 15px !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  z-index: 15;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* --- Cinepress 3.0: Review HUD --- */

/* 1. Main Wrapper: Change to Row and align items center */
.cs-review-hud-stats {
    display: flex !important;
    flex-direction: row !important; /* Forces one line */
    flex-wrap: wrap; /* Allows the long Verdict to drop to a second line if needed */
    align-items: center !important;
    gap: 12px !important;
    padding: 0.5rem 1rem !important;
}

/* 2. Cinemeter Container: Kill the 100% width so the score can sit next to it */
.cs-card-cinemeter {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto !important; /* Key fix: allows score to sit next to it */
    margin-bottom: 0 !important; /* Remove bottom margin to keep centered with score */
}

/* 3. The Bars: Ensure they have a base width since the parent is now 'auto' -Updated 1/31*/
.cs-meter-bars {
    display: flex;
    gap: 1px;
    border: solid 1px #888888ab;
}

/* 4. The Score: Remove bottom margin from paragraph if WP added one */
.cs-review-meta-score {
    margin: 0 !important;
    display: flex;
    align-items: center;
}

/* 5. The Verdict: Force this to a new line so the HUD stays clean */
.cs-review-meta-verdict {
    width: 100%; /* Forces the long text to the next line */
    margin: 5px 0 0 0 !important;
    border-top: 1px dashed var(--flex-decor-border);
    padding-top: 5px;
    font-size: var(--font-caption);
}
/* Adding Line Clamp to uniform Cards */
.cs-review-meta-verdict {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    display: -webkit-box;  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-hud-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 4. HUD Stats (Score & Verdict) */
.cs-review-hud-stats {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
  border-top: 1px dashed var(--flex-decor-border);
  border-bottom: 1px dashed var(--flex-decor-border);
}

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

.cs-hud-verdict {
  -webkit-line-clamp: 1; /* Number of lines to show before truncation */
  line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 0.7rem;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--flex-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis; /* Adds the '...' at the end */
}

/* 5. Hover state: Full System Sync */
.cs-intel-card-section-wrapper .is-reviews .cs-intel-card:hover,
.is-reviews .cs-intel-card-inner:hover {
  border-color: var(--review-accent) !important;
  transform: translateY(-8px) scale(1.01);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.5),
    0 0 15px var(--review-accent);
}

/* --- Cinepress 3.0: Card Cinemeter HUD --- */

.cs-meter-icon {
  color: var(--review-accent);
  display: flex;
  align-items: center;
  line-height: 1;
  opacity: 0.8;
  font-size: 1.5rem;
}

.cs-meter-bars {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 3px; /* Clean gap between segments */
    width: 100px; /* Fixed width for the whole track */
    height: 12px; /* Fixed height for the track */
    border: 1px solid rgba(136, 136, 136, 0.4);
    padding: 2px; /* Inner padding for the "boxed" look */
    background: rgba(0, 0, 0, 0.2);
}

.cs-meter-bars .cs-bar {
    display: block !important;
    flex: 1; /* Automatically divides the 80px into 5 equal parts */
    height: 100% !important; /* Fills the 12px track height */
    background-color: var(--flex-gray-15); /* Inactive bar color */
    border-radius: 1px;
    transition: all 0.3s ease;
}

.cs-meter-bars .cs-bar:not(.is-active) {
  background-color: var(--flex-gray-15);
}

/* Ensure the wrapper doesn't force a block layout */
.cs-review-meter-wrapper {
    display: contents; /* Allows children to participate in the parent flex row */
}

/* --- DNA Active States --- */
/* We target the .is-active class added by the PHP */

.cs-bar.is-active.cs-bar-1 {
  background-color: #ff0d0d !important;
  box-shadow: 0 0 8px rgba(255, 13, 13, 0.6);
}
.cs-bar.is-active.cs-bar-2 {
  background-color: #ff5612 !important;
  box-shadow: 0 0 8px rgba(255, 86, 18, 0.6);
}
.cs-bar.is-active.cs-bar-3 {
  background-color: #ffde21 !important;
  box-shadow: 0 0 8px rgba(255, 222, 33, 0.6);
}
.cs-bar.is-active.cs-bar-4 {
  background-color: #c7e811 !important;
  box-shadow: 0 0 8px rgba(199, 232, 17, 0.6);
}
.cs-bar.is-active.cs-bar-5 {
  background-color: #50a735 !important;
  box-shadow: 0 0 8px rgba(80, 167, 53, 0.6);
}

/* Tablet Optimization: Drop to 2 columns */
@media (max-width: 1024px) {
    .cs-intel-card-section-wrapper.is-reviews .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile Optimization: Single Column Dossier */
@media (max-width: 768px) {
    .cs-intel-card-section-wrapper.is-reviews .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }
}

/* --- 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
-----------------
*/
/* --- Style Footer Top Section --- */
.rb-section.fw-widget.top-footer.edge-padding {
  margin-top: 20px;
  padding-top: 10px;
  background-color: var(--flex-gray-1);
  border-top-width: 2px;
  border-top-style: groove;
}

#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;
  }
}

/*
-----------------
13 - Responsive
-----------------
*/

/*
-----------------
14 - Print
-----------------
*/
/* --- Remove Foxiz Mark Spacing in Copy --- */
mark {
  margin: 0;
  /* Removes extra space  */
  padding: 0;
  /* Removes extra space  */
}

/*
-----------------
15 - Forms
-----------------
*/
/* --- Style All Input Forms --- */
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"] {
  border: 1px solid #d45f3559;
  color: var(--body-fcolor);
}

/* --- Post News-Letter Form Style --- */
#mailpoet_form_1 {
  border: 2px solid var(--g-color);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  background: var(--news-letter-bg);
  /* Use variable for background color change */
  text-align: left;
}

/* --- Footer Newsletter Form Style --- */
#mailpoet_form_2 {
  border: 2px solid var(--g-color);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  background: var(--news-letter-bg);
  /* Use variable for background color change */
  text-align: left;
}

/* --- Style User Review Comment Section --- */
.comment-box-wrap.entry-sec.rb-user-reviews {
  background-color: var(--news-letter-bg);
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  --border-top-width: 1px;
  --border-right-width: 1px;
  --border-bottom-width: 1px;
  --border-left-width: 1px;
  border-color: var(--e-global-color-fb66372);
  --border-color: var(--e-global-color-fb66372);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.5);
  --margin-top: 20px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --margin-right: 0px;
  padding: 20px;
}

/* --- Search Form Style --- */
.is-form-layout .search-icon,
.is-form-layout .rbi-cright {
  opacity: 0.8;
  /* Override Foxiz Default */
}

/*
-----------------
16 - UI/UX
-----------------
*/
/* --- Custom Selection Style --- */
.rbct *::selection {
  background: var(--flex-snarkive);
  color: var(--awhite);
}

/* --- Noto Emoji Font Application --- */
/* --- Ensures Noto Emoji renders on key UI elements like navigation, tags, and category names --- */
.category-item a,
.tag-list li a,
.post-title a,
.nav-menu li a,
.emoji {
  font-family: inherit, var(--font-emoji);
}

/* --- Admin Interface Changes --- */
.rwtm-images li {
  position: relative;
  float: left;
  width: 150px;
  height: 100%;
  margin: 0 10px 10px 0;
  text-align: center;
  border: 3px solid #9ed1bc;
}

/* --- Cinesist Review Cinescore Bars Style --- */

.rline-wrap {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  flex-flow: row nowrap;
  margin-right: 10px;
  gap: 1px;
}

.rline {
  display: inline-flex;
  width: calc(var(--rating-size, 14px) * 1.5);
  max-width: 20%;
  height: min(calc(var(--rating-size, 14px) * 0.5), 10px);
  background-color: var(--flex-gray-15);
}

/* Cinescore Burn-it🔥 Red Rating Bar */
.rline:nth-child(1) {
  background-color: #ff0d0d;
}

/* Cinescore Compromised⚠️ Orange Rating Bar */
.rline:nth-child(2) {
  background-color: #ff5612;
}

/* Cinescore Redacted❓ Yellow Rating Bar */
.rline:nth-child(3) {
  background-color: #f1ca2b;
}

/* Cinescore Solid👍 Light Green Rating Bar */
.rline:nth-child(4) {
  background-color: #b2cc21;
}

/* Cinescore Legendary🏆 Green Rating Bar */
.rline:nth-child(5) {
  background-color: #50a735;
}

.rline:not(.activated) {
  background-color: var(--flex-gray-15);
}

/* --- Movie Ticket Breadcrumb Navigation Style --- */
/* 1. Reset the main nav container */
nav.rank-math-breadcrumb {
  background: none;
  padding: 0;
  border-radius: 0;
  margin-top: 20px;
  margin-bottom: 25px;
  overflow: visible;
  /* Allows cutouts to "pop" */
}

/* 2. Use Flexbox for the inner wrapper */
nav.rank-math-breadcrumb .breadcrumb-inner {
  margin: 0;
  padding: 0;
  display: flex;
  /* Aligns all stubs in a row */
  align-items: center;
}

/* 3. Hide the original Rank Math separator */
nav.rank-math-breadcrumb .separator {
  display: none;
}

/* 4. Style ALL stubs (links and the last item) */
nav.rank-math-breadcrumb a,
nav.rank-math-breadcrumb .last {
  display: block;
  position: relative;
  /* Crucial for positioning the cutouts */
  background: var(--ticket-bg-color);
  padding: 10px 20px;
  /* More padding for the cutout space */
  color: var(--ticket-text-color);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 5. Add the "torn" cutouts to BOTH sides of every stub */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::before,
nav.rank-math-breadcrumb .last::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  /* Size of the cutout */
  height: 20px;
  /* Size of the cutout */
  border-radius: 50%;
  background-color: var(--page-bg-color);
  /* This "punches" the hole */
}

/* --- Position the left cutout --- */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb .last::before {
  left: -10px;
  /* Moves it halfway out */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  /* Optional: adds a subtle shadow */
}

/* --- Position the right cutout --- */
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::after {
  right: -10px;
  /* Moves it halfway out */
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  /* Optional: adds a subtle shadow */
}

/* 6. Fix the ends of the ticket chain */

/* --- The FIRST item ("Home") --- */
nav.rank-math-breadcrumb a:first-child {
  border-radius: 8px 0 0 8px;
  /* Rounds the outer-left corners */
}

/* --- Hide its left-side cutout --- */
nav.rank-math-breadcrumb a:first-child::before {
  display: none;
}

/* --- The LAST item (Current Page) --- */
nav.rank-math-breadcrumb .last {
  border-radius: 0 8px 8px 0;
  /* Rounds the outer-right corners */
  color: var(--ticket-text-current);
  font-weight: 500;
}

/* --- Hide its right-side cutout --- */
nav.rank-math-breadcrumb .last::after {
  display: none;
}

/* 7. Styling the links */
nav.rank-math-breadcrumb a:hover {
  color: var(--ticket-text-hover);
  background: var(--flex-gray-1);
  /* A slight background change on hover */
  z-index: 2;
  /* Brings it "on top" of the next stub */
}

/* --- Review Stars Style --- */
.rb-review-stars {
  color: var(--g-color);
}

/* --- Review Star Filled In Style --- */
rbi rbi-star-o {
  color: var(--g-color);
}

/* --- Like/Dislike Button Styles --- */
.meta-like>span:hover {
  -webkit-transform: var(--flex-snarkive);
  transform: var(--flex-snarkive);
  color: var(--btn-accent-h, var(--awhite));
  border-color: var(--flex-snarkive, var(--flex-snarkive));
  background-color: var(--flex-snarkive, var(--flex-snarkive));
  box-shadow: var(--btn-shadow,
      0 3px 12px var(--flex-snarkive-90, var(--flex-snarkive-90)));
}

/* Cinesist Buttons */

/* Snarkive Intel Button */
.snarkive-intel-btn {
    font-weight: 900;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
}

.snarkive-intel-btn {
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
}

/* Adding Flare to Images and Captions */
figcaption:not(:empty):before, .wp-caption-text:before {
    color: var(--review-accent, var(--flex-snarkive));
}

figcaption:not(:empty):before, .wp-caption-text:before {
    display: var(--caption-bdisplay, inline-block);
    width: 30px;
    height: .3rem;
    margin-right: 7px;
    content: '';
    border-top: 3px solid;
}

.entry-content figcaption {
    text-align: unset !important;
    margin-block: .5em 0;
    font-weight: 600
}

/* --- Push Button Template. Apply .is-push-btn to any Button Block or the Comment Submit Button */
.is-push-btn {
  /* 1. SETUP DEFAULT COLORS (Edit these for manual use) */
  --btn-bg-color: var(--flex-snarkive); /* Snarkive Flex Color */
  --btn-text-color: #ffffff;
  position: relative;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: filter 250ms;
}

/* The 3D Edge & Shadow */
.is-push-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  
  /* Fallback: Uses black at 50% brightness of the background */
  background: var(--flex-decor-border);
  filter: brightness(0.5);
  opacity: 0.6;
  transform: translateY(0);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

/* The Top Face */
.is-push-btn > * {
  display: block;
  position: relative;
  
  /* SMART LOGIC: 
     Use inherited color if FSE sets it, 
     otherwise use our --btn-bg-color variable */
  background-color: var(--wp--preset--color--primary, var(--btn-bg-color)) !important;
  color: var(--wp--preset--color--white, var(--btn-text-color)) !important;
  
  border-radius: inherit !important; 
  padding: 12px 42px !important; 
  will-change: transform;
  transform: translateY(-6px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  border: none !important;
}

/* HOVER & ACTIVE STATES */
.is-push-btn:hover { filter: brightness(110%); }

.is-push-btn:hover > * {
  transform: translateY(-8px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.is-push-btn:active > * {
  transform: translateY(-2px);
  transition: transform 34ms;
}

/* Ensure the button inside our push-wrapper behaves correctly */
.is-push-btn button {
    border: none !important;
    background-color: inherit !important;
    color: inherit !important;
    font-family: inherit;
    cursor: pointer;
}

 /* --- END PUSH BUTTON --- */

 /* Live Search Results */
 .ct-search-results a {
     display: flex;
     align-items: center;
     gap: var(--items-spacing, 15px);
     padding: var(--items-padding, 16px);
     color: var(--flex-text-title);
 }
 .ct-search-results a:hover {
   text-decoration: underline;
   color: var(--flex-snarkive) !important;
 }
 
 /* --- Block Quotes --- */
 figure.wp-block-pullquote {
     position: relative;
     padding: 70px;
     text-align: initial;
     border-width: 1px !important;
     border-style: solid;
     border-color: var(--review-accent) !important;
     border-left-color: var(--review-accent) !important;
     border-left-width: 5px !important;
     border-radius: 5px;
 }
 .figure.wp-block-pullquote blockquote:before {
   color: var(--review-accent);
 }
 
 cite {
     font-family: var(--meta-family);
     font-size: min(14px, var(--rem-small));
     font-weight: var(--meta-fweight);
     font-style: italic !important;
 }
 
 blockquote cite:before {
     display: inline-block;
     width: 30px;
     height: .3em;
     margin-right: 7px;
     content: '';
     color: var(--review-accent);
     border-top: 3px solid currentColor;
 }

/*
-----------------
17 - Snarkive
-----------------

/* --- Snarkive Movie Rating Badge Style --- */

/* Base style for Desktop/Large Screens */
.elementor-1000042565 .elementor-element.elementor-element-7e9c79b .dynamic-content-for-elementor-acf {
  color: #ffffff;
  margin-bottom: 0px;
  font-size: 1.75rem;
  /* Large screen size */
  font-weight: 800;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* RESPONSIVE FONT SHRINK: Triggers when screen width is 768px or smaller */
@media only screen and (max-width: 768px) {
  .elementor-1000042565 .elementor-element.elementor-element-7e9c79b .dynamic-content-for-elementor-acf {
    font-size: 1rem;
    /* Smaller screen size */
  }
}

/* --- Snarkive Person 'Dossier' Template --- */

.person-dossier-wrapper {
  padding: var(--space-lg) 0;
  max-width: var(--layout-content-max-width);
  margin: 0 auto;
}

.dossier-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-lg);
}

/* Standard spacing for the dossier biography */
.entry-content.dossier-bio p {
  margin-bottom: 1.5em;
  /* Adds space after each paragraph */
  line-height: 1.6;
  /* Improves readability within paragraphs */
}

/* Optional: Remove margin from the very last paragraph to avoid extra bottom space */
.entry-content.dossier-bio p:last-child {
  margin-bottom: 0;
}

.tactical-note {
  margin-bottom: 1.5em;
}

/* --- Filmography Grid & Glassmorphism Badge --- */

.filmography-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 172px);
  /* Strict width */
  gap: 10px;
  /* Strict 10px gap */
  /* justify-content: center; */
}

.film-card {
  width: 172px;
  height: 259px;
  /* Strict height */
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.film-card:hover {
  transform: translateY(-8px);
}

.card-poster {
  position: relative;
  width: 172px;
  height: 259px;
  border-radius: var(--round-5);
  overflow: hidden;
}

/* --- The Bottom Title Overlay --- */
.card-meta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 10px 15px 10px;
  /* Increased top padding for role height */
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 100%);
  z-index: 3;
  pointer-events: none;
  /* Allows clicks to pass through to the link */
}

/* Alias/Role Tag Styling */
.film-alias-tag {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 400;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alias-prefix {
  color: var(--flex-snarkive);
  /* Snarkive Purple/Orange */
  font-weight: 700;
  margin-right: 3px;
}

.alias-link {
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  /* Re-enable clicks for the taxonomy link */
}

.alias-link:hover {
  color: var(--flex-snarkive-90);
  text-decoration: underline;
}

/* --- Title Styling with 1-Line Ellipsis --- */
.film-title-overlay {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  text-align: center;
  line-height: 1.2;
  transition: color 0.3s ease;

  /* Strict 1-Line Truncation */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Hover Effect --- */
.film-card:hover .film-title-overlay {
  color: var(--flex-snarkive);
  /* Glows Snarkive Purple/Orange on hover */
}

/* Ensure image fills the fixed dimensions */
.poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Glowing Border Logic */
.film-card:hover .card-poster {
  border-color: var(--flex-snarkive);
  box-shadow: 0 0 20px var(--flex-snarkive-90);
}

/* Glassmorphism Cinescore Badge */
.cinescore-overlay {
  position: absolute;
  bottom: 35%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--flex-gray-1);
  /* Black Spy Semi-Transparent */
  backdrop-filter: blur(8px);
  border: 2px solid var(--flex-snarkive);
  border-radius: 8px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  justify-content: center;
  z-index: 2;
}

.card-icon-marker {
  width: 24px;
  height: 24px;
  background-image: var(--cinesist-card-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.film-cinescore-number {
  display: inline-flex;
  align-items: center;
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--body-fcolor);
  font-family: var(--font-primary);
}

.film-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  /* Adjust this number to limit lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Ensures ellipsis appears */
  margin-top: var(--space-xs);
  line-height: 1.2;
  color: var(--flex-text-primary);
}

.film-title:hover {
  color: var(--flex-snarkive-90);
  text-decoration: underline;
}

.film-title a:hover {
  color: var(--flex-snarkive-90);
}

.film-title .year {
  display: block;
  font-size: 0.8em;
  opacity: 0.7;
  color: var(--flex-snarkive);
}

/* ====================
   Tagged Intel Grid
   ==================== */
.intel-tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 275px);
  /* Strict width */
  gap: 5px;
  /*justify-content: center;*/
}

.intel-tag-card {
  width: 275px;
  height: 260px;
  /* Strict height */
  background: var(--contrast-2);
  border-radius: var(--round-5);
  /* Requested Border Radius */
  overflow: hidden;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
  border: 1px solid var(--flex-decor-border);
  display: flex;
  flex-direction: column;
}

.intel-tag-card:hover {
  transform: translateY(-5px);
  border-color: var(--flex-snarkive);
}

.intel-tag-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.intel-tag-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intel-tag-body {
  padding: var(--space-xs);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 2-Line Title Clamp with Ellipsis */
.intel-tag-title {
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--flex-text-title);
  margin: 0 0 var(--space-sm) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure the title link doesn't look like a standard blue hyperlink */
.intel-tag-title-link {
  text-decoration: none;
  display: block;
}

.intel-tag-title-link:hover .intel-tag-title {
  color: var(--flex-snarkive);
  /* Glow title on hover */
}

.intel-tag-footer {
  border-top: 1px solid var(--flex-decor-border);
  padding-top: var(--space-xs);
}

.author-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Author and Comment links */
.author-profile-link,
.comment-recon-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.author-profile-link:hover,
.comment-recon-link:hover {
  opacity: 0.8;
  color: var(--flex-snarkive-rev);
}

/* Thumbnail hover effect */
.intel-tag-thumb-link {
  display: block;
  overflow: hidden;
}

.intel-tag-thumb-link img {
  transition: transform 0.5s ease;
}

.intel-tag-thumb-link:hover img {
  transform: scale(1.05);
}

/* Container styling */
.intel-tag-writer-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--flex-snarkive);
  display: inline-block;
  /* Ensures span respects dimensions */
  overflow: hidden;
  /* Clips the image to the circle */
}

/* Specific styling for the image inside the container */
.intel-tag-writer-img img {
  width: 100%;
  /* Fills the container width */
  height: 100%;
  /* Fills the container height */
  display: block;
  /* Removes bottom whitespace gap */
  object-fit: cover;
  /* Prevents distortion by cropping to fit */
  border-radius: 50%;
  /* Extra safeguard for older browsers */
}

.author-name {
  color: var(--flex-snarkive);
  font-weight: 800;
  font-size: 13px;
  padding-left: 5px;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.intel-tag-date {
  font-size: 11px;
  font-weight: 300;
  color: var(--body-fcolor);
}

.comment-recon {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--body-fcolor);
}

.chat-icon-custom {
  font-size: 1.25rem;
  color: var(--flex-snarkive);
  /* Snarkive Color Change */
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.myster-icon-custom {
  font-size: 1.25rem;
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.folder-eye-icon-custom {
  font-size: 1.25rem;
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.comment-recon .material-symbols-sharp {
  font-size: 16px;
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 20;
}

.comment-num {
  font-size: 12px;
  font-weight: 700;
}

/* --- Show More Button Styling --- */
.show-more-wrap {
  text-align: center;
  margin: var(--space-md) 0;
}

.show-more-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--flex-snarkive);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.show-more-trigger:hover {
  color: var(--flex-snarkive-rev);
}

.show-more-trigger .material-symbols-sharp {
  font-variation-settings: "FILL" 1;
  /* Filled icons as requested */
}

/* --- Legal Attribution --- */
.dossier-legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--flex-decor-border);
  font-size: 0.85rem;
  opacity: 0.6;
  text-align: center;
}

/* --- Left Column: Headshot & Intel --- */
.recon-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.person-headshot-wrap {
  position: relative;
  border-radius: var(--round-10);
  overflow: hidden;
  border: 1px solid var(--flex-decor-border);
}

.headshot-img {
  width: 100%;
  height: auto;
  display: block;
}

.popularity-meter {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xs);
  background: var(--flex-gray-3);
  color: #fff;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-family: var(--font-primary);
}

.meter-label,
.meter-value {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 14px;
}

/* --- Person's Threat Level --- */
.threat-low {
  color: #3498db;
}

/* Blue */
.threat-elevated {
  color: #e67e22;
}

/* Orange */
.threat-critical {
  color: #e74c3c;
}

/* Red */
.threat-defcon {
  color: #e74c3c;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

.strategic-intel-card {
  background: var(--contrast-2);
  padding: var(--space-md);
  border-radius: var(--round-10);
  border: 1px solid var(--flex-decor-border);
}

.intel-header {
  color: var(--flex-snarkive);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-sm);
  border-bottom: 2px solid var(--flex-snarkive);
}

.intel-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
}

.intel-list li {
  padding: var(--space-xxs) 0;
  border-bottom: 1px solid var(--flex-decor-border);
  font-size: var(--font-body-sm);
}

/* --- Right Column: Briefing --- */
.intelligence-briefing {
  background: var(--contrast-1);
  padding: var(--space-lg);
  border-radius: var(--round-10);
  border: 1px solid var(--flex-decor-border);
}

.person-name {
  margin-bottom: var(--space-xs);
  color: var(--flex-text-title);
}

.keyword-tag {
  display: inline-block;
  background: var(--flex-gray-2);
  color: var(--flex-snarkive);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  margin-right: 5px;
  font-weight: 700;
}

.section-title {
  margin: var(--space-md) 0 var(--space-sm);
  color: var(--flex-snarkive);
}

.social-recon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.social-btn {
  background: var(--flex-gray-3);
  color: #fff !important;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
}

.social-btn:hover {
  background: var(--flex-snarkive);
}

/* ====================
   Tactical Discussion (Comments)
   ==================== */
.tactical-discussion {
  grid-column: 1 / -1;
  /* Forces the section to span the full width of the dossier grid */
  border-top: 1px dashed var(--flex-decor-border);
}

.discussion-inner {
  max-width: 1000px;
  /* Gives the comments breathing room without being too wide */
  margin: 0 auto;
}

.foxiz-comment-wrapper {
  background: var(--contrast-2);
  padding: var(--space-md);
  border-radius: var(--round-5);
  border: 1px solid var(--flex-decor-border);
}

/* Foxiz Comment Styling Overrides */
#respond #reply-title {
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--flex-snarkive);
}

.comment-list .comment-body {
  border-bottom: 1px solid var(--flex-gray-2);
  padding: var(--space-sm) 0;
}

.comment-author .fn {
  font-weight: 800;
  color: var(--flex-text-title);
}

/* Make sure the "Post Comment" button matches your spy theme */
#respond input#submit {
  background: var(--flex-snarkive);
  color: #fff;
  border: none;
  border-radius: var(--round-5);
  font-weight: 800;
  text-transform: uppercase;
  padding: 10px 25px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#respond input#submit:hover {
  background: var(--flex-snarkive-rev);
}

/* Responsive Recon */
@media (max-width: 991px) {
  .dossier-grid {
    grid-template-columns: 1fr;
  }

  .recon-sidebar {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* --- Snarkive Person Grid Style --- */

.cinesist-person-grid {
  display: grid;
  /* Adjust columns for responsive */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}

.cinesist-person-card {
  display: flex;
  flex-direction: column;
}

.cinesist-person-card .cinesist-person-image-link img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* Or 0px for square */
  aspect-ratio: 2 / 3;
  /* Classic poster ratio */
  object-fit: cover;
  margin-bottom: 10px;
  transition: transform 0.2s ease;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
  /* A Little Shadow for Effect */
}

.cinesist-person-card .cinesist-person-image-link:hover img {
  transform: scale(1.03);
}

.cinesist-person-info {
  display: flex;
  flex-direction: column;
}

.cinesist-person-info .cinesist-person-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cinesist-text-primary);
  /* Uses your light/dark mode color! */
  text-decoration: none;
}

.cinesist-person-info .cinesist-person-name:hover {
  text-decoration: underline;
  text-decoration-color: #d45f35;
}

.cinesist-person-info .cinesist-person-role {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--cinesist-text-secondary);
  transition: color 0.3s ease;
  /* Optional: smooth color change */
}

/* Add this new rule: */
.cinesist-person-info .cinesist-person-role:hover {
  color: #d45f35;
  /* The new color on hover */
}

/* Hides the extra cast/crew cards by default */
.cinesist-person-hidden {
  display: none;
}

/* NEW - This wrapper pushes the button to the right */
.cinesist-grid-toggle-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 15px;
}

/* UPDATED - Styles the "Show All" link to be smaller */
.cinesist-grid-toggle {
  display: inline-block;
  /* Changed from block */
  text-align: center;
  padding: 8px 16px;
  /* Made padding smaller */
  background-color: var(--flex-snarkive);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 14px;
  /* Added to control size */
}

.cinesist-grid-toggle:hover {
  background-color: var(--flex-snarkive-rev);
  color: #fff;
}

/* When the grid is toggled, show the hidden items */
.cinesist-person-grid-wrapper.is-open .cinesist-person-hidden {
  display: block;
}

.cinesist-person-grid-wrapper.is-collapsible .cinesist-person-grid {
  /* * This is the magic. Adjust this height!
   * It should be the height of ONE card + its bottom margin.
   * e.g., If your card is 220px tall with 20px margin, set this to 240px.
   */
  max-height: 290px;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

/* This is the 'open' state */
.cinesist-person-grid-wrapper.is-expanded .cinesist-person-grid {
  /* Set to a number larger than the grid could ever be */
  max-height: 3000px;
  transition: max-height 0.6s ease-in;
}

/* Optional: Smooths the button wrapper's appearance */
.cinesist-grid-toggle-wrapper {
  transition: opacity 0.4s ease;
}

/* Hides the button when the grid is open (optional but clean) */
.cinesist-person-grid-wrapper.is-expanded .cinesist-grid-toggle-wrapper {
  /* You can hide it, or just let the JS text-swap work */
  opacity: 1;
}

/* --- Cast/Crew Differentiation Styles --- */

/* 1. Purple Border for CAST */
.cinesist-person-grid-wrapper.is-cast .cinesist-person-card .cinesist-person-image-link img {
  /* Example: Purple/Primary Color */
  border: 3px solid #7d3c98;
  /* Purple for Cast */
  box-shadow: 0 0 10px rgba(125, 60, 152, 0.5);
}

/* 2. Orange Border for CREW */
.cinesist-person-grid-wrapper.is-crew .cinesist-person-card .cinesist-person-image-link img {
  /* Example: Orange/Secondary Color */
  border: 3px solid #f27405;
  /* Orange for Crew */
  box-shadow: 0 0 10px rgba(242, 116, 5, 0.5);
}

/* Optional: Different name color for crew to separate the text visually
.cinesist-person-grid-wrapper.is-crew
  .cinesist-person-info
  .cinesist-person-name {
  color: #ffb347; /* Lighter Orange or Gold tone
}

/* --- Snarkive Social Meta Style --- */
#snarkive-social-meta .meta-like i {
  font-size: calc(1em + 10px);
}

#snarkive-social-meta .smeta-sec .meta-like>span {
  min-width: 52px;
  background: var(--flex-snarkive);
  color: var(--awhite);
}

#snarkive-social-meta .meta-like>span:hover {
  -webkit-transform: var(--flex-snarkive-rev);
  transform: var(--flex-snarkive-rev);
  color: var(--btn-accent-h, var(--awhite));
  border-color: var(--flex-snarkive-rev, var(--flex-snarkive-rev));
  background-color: var(--flex-snarkive-rev, var(--flex-snarkive-rev));
  box-shadow: var(--btn-shadow,
      0 3px 12px var(--flex-snarkive-rev-90, var(--flex-snarkive-rev-90)));
}

@media (min-width: 768px) {
  #snarkive-social-meta .meta-bookmark .rb-bookmark i {
    font-size: calc(var(--meta-fsize) * 1.45);
  }
}

/* --- Snarkive Page Wrapper Style --- */
.snarkive-page-wrapper {
  /* This applies your 1536px max-width */
  max-width: var(--layout-max-width-full);

  /* This applies your 80px fluid padding */
  padding-left: var(--layout-padding-global);
  padding-right: var(--layout-padding-global);

  /* This centers it on the page */
  margin-left: auto;
  margin-right: auto;

  /* This is your 32-35px vertical gap */
  margin-bottom: var(--layout-block-gap);
}

/* --- Snarkive Linked Profiles Box Style --- */
.snarkive-links-box {
  background-color: var(--gc-spy);
  border-radius: 12px;
  padding: 20px 25px;
  margin-top: 30px;
  border-top: 3px solid var(--flex-snarkive);
  box-shadow: var(--shadow-1);
}

.snarkive-links-box h3 {
  color: var(--gc-color);
  /* Cinesist Primary Orange Color */
  font-size: 18px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;
}

.snarkive-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Spacing between tags */
}

/* --- Snarkive Pill Tag Style --- */
.snarkive-tag-link {
  display: inline-flex;
  align-items: center;
  background-color: var(--page-bg-color);
  color: #dddddd;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  padding: 3px 7px 3px 7px;
  /* Padding around the tag */
}

.snarkive-tag-link:hover {
  opacity: 0.75;
}

/* --- Snarkive Pill Tag Image Style --- */
.snarkive-tag-link img {
  width: 28px;
  /* Size of the thumbnail */
  height: 28px;
  /* Size of the thumbnail */
  object-fit: cover;
  margin-right: 10px;
  /* Space between image and text */
}

/* --- Snarkive Pill Tag Fallback Icon Style --- */
.snarkive-tag-link .snarkive-tag-icon {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  background-color: #555;
  /* Fallback dot color */
  border-right: 1px solid #444;
}

/* --- Snarkive Pill Tag Text Style --- */
.snarkive-tag-link span {
  padding-right: 12px;
  /* Add padding to the text */
  /* The color is inherited from the <a> tag */
}

/* --- Snarkive Person Name Shortcode [person_name] --- */
.snarkive-person-name,
.snarkive-movie-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--flex-snarkive);
}

/* --- Snarkive Profile Box --- */
.wp-block-group>.snarkive-box-genres {
  display: inline-flex;
}

/*
-----------------
18 - Buddypress
-----------------
*/
/* --- Buddy Press Text Fields Style --- */
.buddypress-wrap .standard-form .groups-members-search input[type="search"],
.buddypress-wrap .standard-form .groups-members-search input[type="text"],
.buddypress-wrap .standard-form [data-bp-search] input[type="search"],
.buddypress-wrap .standard-form [data-bp-search] input[type="text"],
.buddypress-wrap .standard-form input[type="color"],
.buddypress-wrap .standard-form input[type="date"],
.buddypress-wrap .standard-form input[type="datetime-local"],
.buddypress-wrap .standard-form input[type="datetime"],
.buddypress-wrap .standard-form input[type="email"],
.buddypress-wrap .standard-form input[type="month"],
.buddypress-wrap .standard-form input[type="number"],
.buddypress-wrap .standard-form input[type="password"],
.buddypress-wrap .standard-form input[type="range"],
.buddypress-wrap .standard-form input[type="search"],
.buddypress-wrap .standard-form input[type="tel"],
.buddypress-wrap .standard-form input[type="text"],
.buddypress-wrap .standard-form input[type="time"],
.buddypress-wrap .standard-form input[type="url"],
.buddypress-wrap .standard-form input[type="week"],
.buddypress-wrap .standard-form select,
.buddypress-wrap .standard-form textarea {
  background: var(--flex-gray-15);
  border: 1px solid #d6d6d6;
  border-radius: 0;
  font: inherit;
  font-size: 100%;
  padding: 0.7em;
}

/* --- Buddy Press Tooltip Style --- */
[data-bp-tooltip]:after {
  background-color: var(--gc-color);
}

/* --- Buddy Press Profile Avatar Style --- */
#item-header-cover-image #item-header-avatar img.avatar {
  max-width: 175px;
  height: auto;
  border-radius: 50%;
  /* Make it circle */
}

#item-header-avatar img {
  border: solid 2px var(--flex-gray-1);
  /* Flex them colors to change with White and Black Spy Modes */
  background: var(--contrast-1);
  /* Flex them colors to change with White and Black Spy Modes */
  box-shadow: none;
  display: block;
  margin: 0 auto;
}

.users-header #item-header-avatar:hover .link-change-overlay {
  position: absolute;
  left: 15px;
  right: 0px;
  top: 0px;
  height: 175px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  max-width: 175px;
}

/* --- Buddy Press NiceNames Style --- */
#buddypress div#item-header-cover-image h2 {
  color: #dd7b45;
  text-rendering: optimizelegibility;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.05);
  margin: 0 0 0.6em;
  font-size: 200%;
  font-style: normal;
  text-transform: capitalize;
}

/* --- Buddy Press Navigation Menu Style --- */
.buddypress-wrap .bp-navs li:not(.current) a:hover,
.buddypress-wrap .bp-navs li:not(.selected) a:hover {
  background: var(--flex-overlay-1);
  color: var(--body-fcolor);
}

@media screen and (min-width: 46.8em) {
  .buddypress-wrap.bp-dir-hori-nav:not(.bp-vertical-navs) nav {
    border-bottom: 1px solid var(--flex-gray-1);
    border-top: 1px solid var(--flex-gray-1);
    margin-bottom: 20px;
    -webkit-box-shadow: var(--shadow-1);
    -moz-box-shadow: var(--shadow-1);
    box-shadow: var(--shadow-1);
    background-color: var(--flex-gray-2);
  }
}

@media screen and (min-width: 46.8em) {

  .buddypress-wrap .main-navs:not(.dir-navs) li.current a,
  .buddypress-wrap .main-navs:not(.dir-navs) li.selected a {
    background: var(--flex-overlay-1);
    color: var(--body-fcolor);
    font-weight: 600;
  }
}

/* --- Buddy Press Status Update Form Style --- */
#whats-new-form,
.bp-nouveau-activity-form-placeholder- {
  background-color: var(--contrast-1);
}

.bb-poll-form .bb-model-footer {
  background-color: var(--flex-gray-2);
}

.bb-action-popup .bb-action-popup-content {
  margin: 0 -30px;
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding: 20px 30px;
  background-color: var(--gc-spy);
}

.buddypress .buddypress-wrap button {
  background: var(--gc-color);
  color: var(--alight);
}

.buddypress .buddypress-wrap button:hover {
  background: var(--gc-color);
  color: var(--alight);
}

.buddypress .buddypress-wrap a.button {
  background: var(--gc-color);
}

.buddypress .buddypress-wrap a.button:hover {
  background: var(--gc-color);
  color: var(--alight);
}

/* --- Whats New Update Status --- */
#whats-new-textarea [contenteditable="true"]:empty:before,
#whats-new-textarea-placeholder [contenteditable="true"]:empty:before {
  content: attr(placeholder);
  color: var(--body-fcolor);
  cursor: text;
  display: block;
}

.activity-update-form .whats-new-title,
.bp-nouveau-activity-form-placeholder- .whats-new-title {
  color: var(--body-fcolor);
}

.activity-update-form .bb-model-header,
.bp-nouveau-activity-form-placeholder- .bb-model-header {
  display: none;
  background-color: var(--flex-gray-2) !important;
}

.activity-update-form #whats-new-form #whats-new-toolbar,
.activity-update-form #whats-new-form-placeholder #whats-new-toolbar,
.bp-nouveau-activity-form-placeholder- #whats-new-form #whats-new-toolbar,
.bp-nouveau-activity-form-placeholder- #whats-new-form-placeholder #whats-new-toolbar {
  padding: 12px 16px;
  background-color: var(--flex-gray-2);
  border-top: 1px solid #eee;
}

#whats-new-toolbar [class*=" bb-icon-"] {
  color: var(--flex-icon-1);
  /* make them icons change with the spies */
}

.activity-update-form .whats-new-form-footer,
.bp-nouveau-activity-form-placeholder- .whats-new-form-footer {
  display: flex;
  justify-content: space-between;
  background-color: var(--flex-gray-2);
  border-top: 1px solid #eee;
}

/* --- Buddy Press Activity Feed Style --- */
.activity-list.bp-list {
  background: var(--flex-gray-2);
  border: 1px solid var(--flex-decor-border);
}

/* --- BP Activity Feed H2 Title --- */
.activity-list .activity-item .activity-title h2 {
  color: var(--body-fcolor);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

/* --- Buddy Press Activity Status Screen Overlay --- */
.activity-update-form.modal-popup,
.bp-nouveau-activity-form-placeholder-.modal-popup {
  background-color: var(--flex-overlay-1);
}

.activity-list.bp-list .activity-item {
  background: var(--gc-spy);
  border: 1px solid #b7b7b7;
  -webkit-box-shadow: 0 0 6px #d2d2d2;
  -moz-box-shadow: 0 0 6px #d2d2d2;
  box-shadow: 0 0 6px #d2d2d2;
  margin: 20px 0;
}

.activity-list .activity-item .activity-content>.bp-generic-meta.activity-meta,
.activity-list .activity-item .activity-content>.bp-generic-meta.groups-meta,
.activity-list .activity-item.elementor-activity-item .activity-actions>.bp-generic-meta.action,
.activity-list .activity-item>.bp-generic-meta.activity-meta,
.activity-list .activity-item>.bp-generic-meta.groups-meta,
.activity-list .activity-item>.bp-generic-meta[class*="-meta"] {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #eaeaea;
  padding: 5px 0;
  position: relative;
  background-color: var(--flex-gray-2);
}

.buddypress .buddypress-wrap .generic-button a,
.buddypress .buddypress-wrap a.button {
  color: var(--flex-icon-1);
}

#buddypress .activity-list .activity-item .activity-content .bp-generic-meta.action .button>.like-count {
  color: var(--flex-icon-1) !important;
}

.activity-list .activity-item .activity-content>.bp-generic-meta.activity-meta .acomment-reply.button .comment-count {
  color: var(--flex-icon-1);
}

.activity-list .activity-item .activity-content>.bp-generic-meta.activity-meta div.generic-button>a:hover {
  background-color: var(--flex-overlay-1);
}

.like-count reactions_item {
  color: var(--flex-icon-1);
}

.activity-list .activity-item .ac-emotions_list {
  background-color: var(--flex-gray-1);
}

/* --- Buddy Press View Profile Style --- */
.buddypress-wrap .bp-tables-user tbody tr {
  background-color: var(--flex-gray-15);
}

.buddypress-wrap .bp-tables-user tr.alt td {
  background-color: var(--flex-gray-2);
}

.buddypress-wrap .standard-form p.description {
  color: var(--body-fcolor);
  margin: 5px 0;
}

.buddypress-wrap .current-visibility-level {
  font-style: normal;
  color: var(--body-fcolor);
}

.buddypress-wrap .profile.edit .editfield {
  background: var(--flex-gray-2);
  border: 1px solid #eee;
  margin: 15px 0;
  padding: 1em;
}

.buddypress-wrap .current-visibility-level {
  font-style: normal;
  color: var(--body-fcolor);
}

.buddypress .buddypress-wrap input[type="submit"] {
  background: var(--gc-color);
  color: var(--alight);
}

/* --- Buddy Press Activity Feed --- */
.activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap,
.activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title,
.activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap,
.activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title,
.activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap,
.activity-list li.blogs .activity-content .activity-inner .bb-post-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  display: block;
  color: var(--body-fcolor);
}

/* Activity Avatar */
.activity-list .activity-item div.item-avatar img {
  height: auto;
  max-width: 50%;
}

/* Activity Inner */
.activity-list li.blogs .activity-content .activity-inner {
  display: flex;
  border: 1px solid #eaeaea21;
  padding: 12px;
  border-radius: 5px;
  max-width: 640px;
}

.activity-list li.blogs .activity-content .activity-inner .bb-post-img-link {
  background-color: transparent;
  display: block;
  border-radius: 3px 3px 0 0;
}

/* Activity Entry Background */
.activity-list li.blogs .activity-content .activity-inner .bb-content-wrp {
  display: block;
  padding: 12px;
  background-color: transparent;
}

/* Activity Comments Section */
.acomment-content_wrap {
  width: 750px;
}

.buddypress-wrap .activity-comments .acomment_inner .acomment-content_block {
  background-color: var(--gc-snarkive-accent);
}

.buddypress-wrap .activity-comments .acomment-meta {
  padding-left: 0;
}

.buddypress .buddypress-wrap .generic-button a {
  background: transparent;
}

.buddypress-wrap .activity-comments .acomment-foot-actions .generic-button {
  background-color: var(--gc-color);
}

.like-count {
  color: var(--flex-snarkive);
}

.like-count:hover {
  color: var(--btn-accent-h, var(--awhite));
}

form.ac-form .ac-reply-content {
  border: 1px solid var(--cinefox-orange-accent);
  background-color: var(--flex-gray-7);
  border-radius: 5px;
  padding: 8px;
  margin-left: 10px;
}

form.ac-form .ac-reply-content:focus-within {
  border-color: var(--gc-snarkive-purple);
}

.acomment-content {
  color: var(--awhite);
}

/*
-----------------
19 - bbPress
-----------------
*/
/* --- Forum Header --- */
#bbpress-forums li.bbp-header {
  background: var(--flex-gray-1);
}

.page-header-1 img {
  width: 150px;
}

/* --- Forum Markers --- */
.rbct ul {
  list-style: none;
}

.rbct ul ul {
  list-style: none;
}

/* --- Forum Body --- */
#bbpress-forums div.odd,
#bbpress-forums ul.odd {
  background-color: var(--flex-overlay-1);
}

.bbp-forum-content ul.sticky,
.bbp-topics ul.sticky,
.bbp-topics ul.super-sticky,
.bbp-topics-front ul.super-sticky {
  background-color: #e6440a54 !important;
  font-size: 1.1em;
}

/* Forum Meta Avatar */
#bbpress-forums p.bbp-topic-meta img.avatar {
  float: none;
  margin-bottom: -3px;
  border: 3px solid #ddd;
  -webkit-box-shadow: none;
  box-shadow: none;
  width: 30px;
  border-radius: 50%;
}

/* Forum Tags */
.select2-container--default .select2-selection--multiple {
  background-color: var(--flex-gray-7);
  border: 1px solid #d45f3559 !important;
  border-radius: 4px;
  cursor: text;
}

body .bb-select-dropdown.select2-dropdown {
  background: var(--flex-gray-7);
  box-shadow:
    0 2px 7px 1px rgba(0, 0, 0, 0.05),
    0 6px 32px 0 rgba(18, 43, 70, 0.1);
  border-radius: 4px;
  border: 0;
  padding: 5px 10px;
  margin-right: 0;
  max-width: 300px;
}

/* --- Forum Footer --- */
#bbpress-forums li.bbp-footer,
#bbpress-forums li.bbp-header {
  background: var(--flex-gray-1);
  border-top: 1px solid #eee;
  font-weight: 700;
  padding: 8px;
  text-align: center;
}

/* --- Thread Header --- */
#bbpress-forums div.bbp-forum-header,
#bbpress-forums div.bbp-reply-header,
#bbpress-forums div.bbp-topic-header {
  background-color: var(--flex-gray-7);
}

/* --- Thread Body --- */
#bbpress-forums div.even,
#bbpress-forums ul.even {
  background-color: var(--flex-gray-2);
  box-shadow: 0 0px 20px -5px;
}

span.bbp-admin-links a {
  color: var(--body-fcolor);
  font-weight: 400;
  font-size: 10px;
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 1025px) {

  .type-reply,
  .bbp-replies .topic {
    margin-bottom: 30px;
    padding: 40px;
    box-shadow: 0 2px 20px -5px;
  }
}

#bbpress-forums div.bbp-the-content-wrapper {
  margin-bottom: 10px;
  border: 1px solid #d45f3559 !important;
}

/* --- Single Forum Box Style --- */
.ruby-single-forum {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  width: 100%;
  min-height: 120px;
  padding: 20px;
  border-left: 5px solid;
  border-radius: var(--bbp-round-7);
  box-shadow: 0 5px 20px var(--shadow-7);
  gap: 30px;
  background-color: var(--bbp-white);
}

/* --- Thread Background Color --- */
@media (min-width: 1025px) {

  .type-reply,
  .bbp-replies .topic {
    margin-bottom: 30px;
    padding: 40px;
    box-shadow: 0 4px 20px;
  }
}

/* --- Thread Reply Box --- */
.bbp-reply-form .bbp-form {
  border: solid 1px;
}

/*
-----------------
20 - WooCommerce
-----------------
*/

/*-----------------
21 - Mailpoet
-------------------
*/

/* --- Mailpoet Form Field Background Color --- */
.mp-email-field {
  background-color: var(--input-bg,
      var(--flex-gray-7)) !important;
  /* Match Foxiz input background */
  color: var(--input-fcolor) !important;
  /* Match Foxiz input text color */
}

/*
-----------------
22 - 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--xs) !important;
  padding-right: var(--wp--preset--spacing--xs) !important;
  margin-left: auto;
  margin-right: auto;
}

/* 23 - Admin */
.wp-block .wp-block[data-type='core/group']:not([data-align='full']):not([data-align='wide']):not([data-align='left']):not([data-align='right']), .wp-block .wp-block[data-type='core/cover']:not([data-align='full']):not([data-align='wide']):not([data-align='left']):not([data-align='right']) {
  max-width: unset !important;
  margin-right: unset !important;
  margin-left: unset !important;
}