/* ==========================================
   HORIZONTAL CONTENT MENU FIX (V2 Aggressive)
   ========================================== */
/* Target any navigation structure inside the main content areas */
.layout-content nav ul,
.region-content nav ul,
.region-highlighted nav ul,
.block-menu ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 25px !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Force the list items to sit inline */
.layout-content nav ul li,
.region-content nav ul li,
.region-highlighted nav ul li,
.block-menu ul li {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure the links themselves don't force a new line */
.layout-content nav ul li a,
.region-content nav ul li a,
.region-highlighted nav ul li a,
.block-menu ul li a {
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  width: auto !important;
}

/* ==========================================
   HERO BANNER COMPONENT
========================================== */

/* 1. The SFW/NSFW Toggle (Ghost Wrapper Fix)
   Only hide the SFW Banner if the NSFW Banner wrapper actually contains an image.
   We use .node here so it applies to ANY content type (Stream, Bio, etc.) */
.node:has(.field--name-field-nsfw-banner img) .field--name-field-sfw-banner { 
    display: none !important; 
}

/* Force the field wrapper itself to center */
.field--name-field-sfw-banner,
.field--name-field-nsfw-banner {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* 2. Hero Banner Formatting
   Ensure the banner images stretch nicely across the top of the content area 
   without breaking Olivero's layout */
.field--name-field-sfw-banner img,
.field--name-field-nsfw-banner img {
    width: 100%;
    max-width: 1400px; /* Caps the width so it doesn't blow out on massive screens */
    height: auto;
    max-height: 400px; /* Prevents massive images from pushing content too far down */
    object-fit: cover; /* Ensures the image fills the space without squishing */
    border-radius: 8px; /* Optional: matches your existing modern UI feel */
    margin: 0 auto 24px auto !important; /* Strictly forces dead-center alignment */
    display: block !important;
}

/* ==========================================
   STREAM MEDIA HIERARCHY (TRAILERS > THUMBS)
========================================== */

/* 1. THE THUMBNAIL SWAP (Only applies if no trailers exist)
   If the NSFW thumbnail loads, hide the SFW thumbnail AND the SFW Loop overlay. */
.node:has(.field--name-field-nsfw-thumbnail img) .field--name-field-sfw-thumbnail,
.node:has(.field--name-field-nsfw-thumbnail img) .field--name-field-sfw-loop-id { 
    display: none !important; 
}

/* 2. THE TRAILER SWAP
   If the NSFW trailer loads, hide the SFW trailer so they don't see double. */
.node:has(.field--name-field-nsfw-trailer) .field--name-field-sfw-trailer {
    display: none !important;
}

/* 3. TRAILER PRIORITY (The Guillotine)
   If ANY trailer loads on the screen, completely hide ALL thumbnails AND hover loops. */
.node:has(.field--name-field-nsfw-trailer) .field--name-field-nsfw-thumbnail,
.node:has(.field--name-field-nsfw-trailer) .field--name-field-sfw-thumbnail,
.node:has(.field--name-field-sfw-trailer) .field--name-field-nsfw-thumbnail,
.node:has(.field--name-field-sfw-trailer) .field--name-field-sfw-thumbnail,
.node:has(.field--name-field-nsfw-trailer) .field--name-field-nsfw-loop-id,
.node:has(.field--name-field-nsfw-trailer) .field--name-field-sfw-loop-id,
.node:has(.field--name-field-sfw-trailer) .field--name-field-nsfw-loop-id,
.node:has(.field--name-field-sfw-trailer) .field--name-field-sfw-loop-id {
    display: none !important;
}

/* Ensure the node container anchors the invisible glass hover pane properly */
.node--view-mode-grid-card .node__content {
    position: relative;
}

/* ==========================================
   THE TWIG GUILLOTINE: MASTER HEADER CSS
   ========================================== */
.cu-master-header {
  width: 100%;
  background-color: var(--cu-header-bg);
  border-bottom: 1px solid var(--cu-border);
  font-family: system-ui, -apple-system, sans-serif;
}

/* Base row styling */
.cu-row {
  width: 100%;
  padding: 0.5rem 5%; /* Full width with comfortable side margins */
  box-sizing: border-box;
  position: relative; /* Contextual pencil anchor */
}

/* ------------------------------------------
   1) ROW 1: BRANDING & AD ON SAME LINE
   ------------------------------------------ */
/* Force the region into a strict, non-wrapping row */
.cu-row-1 .region--header-site-branding {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 15px !important;
}

/* Protect the Site Title from being overly squished */
#block-creatorsunchained-site-branding {
  flex: 0 1 auto !important;
}

/* Target the Random Ad block (and its BigPipe loading placeholder) */
#block-creatorsunchained-site-branding ~ div,
#block-creatorsunchained-site-branding ~ span {
  flex: 1 1 auto !important;
  max-width: 728px !important; /* Prevents ad from stretching larger than its natural size */
  display: flex !important;
  justify-content: flex-end !important; /* Pins the ad cleanly to the right */
  overflow: hidden !important;
}

/* Ensure the actual ad image scales down fluidly on narrow screens */
.cu-row-1 .region--header-site-branding img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ------------------------------------------
   2) ROW 2: HERO BANNER (CENTERED)
   ------------------------------------------ */
.cu-row-2 {
  padding: 0 !important; 
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.cu-row-2 .region-hero {
  display: flex !important;
  justify-content: center !important; 
  align-items: center !important;
  width: 100% !important;
}

/* Force any internal block wrappers inside the Hero region to explicitly center */
.cu-row-2 .region-hero > div {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* ------------------------------------------
   3) ROW 3: MAIN NAV LEFT, SEARCH RIGHT
   ------------------------------------------ */
.cu-row-3 {
  background-color: var(--cu-bg-elevated);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* Force the wrapper inside Row 3 to allow side-by-side */
.cu-row-3 > div,
.cu-row-3 .region {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* The Main Menu Block (Force Left) */
.cu-row-3 nav#block-creatorsunchained-mainnavigation,
.cu-row-3 .block-menu.navigation {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding-left: 0 !important; /* Strips Olivero default indents */
  padding-right: 40px !important; /* Dead-zone to keep menu links away from the pencil */
}

/* HIDE THE MAIN NAVIGATION TITLE */
#block-creatorsunchained-mainnavigation h2.block__title {
  display: none !important;
}

/* The Search Narrow Block (Force Right) */
.cu-row-3 .block-search-narrow,
.cu-row-3 #block-creatorsunchained-search-form-narrow {
  flex: 0 1 10% !important; /* Let it shrink down to 10% */
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  min-width: 45px !important; /* Safe fallback so the magnifying glass icon always fits */
}

/* ------------------------------------------
   4) ROW 4: USER MENU LEFT, TOGGLE RIGHT
   ------------------------------------------ */
.cu-row-4 {
  padding: 0.5rem 1rem !important; /* MATCHES ROW 3 PADDING FOR PERFECT LEFT ALIGNMENT */
  display: flex !important;
  justify-content: flex-start !important; /* Forces the entire row contents to align left */
}

.cu-row-4 .region,
.cu-row-4 nav {
  display: flex !important;
  justify-content: flex-start !important; /* Pushes the menu items left */
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important; /* Strips hidden Olivero Secondary Menu indents */
  padding-right: 40px !important; /* Dead-zone for the pencil icon */
}

/* Ensure the UL takes full width so the margin-auto trick works for the toggle button */
.cu-row-4 ul.menu {
  width: 100% !important;
}

/* ------------------------------------------
   MENU LINK FORMATTING & FONT LOCK
   ------------------------------------------ */
.cu-master-header ul.menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important; /* STOP WRAPPING */
  gap: 20px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cu-master-header ul.menu li {
  display: inline-flex !important;
  margin: 0 !important;
}

.cu-master-header ul.menu li a {
  text-decoration: none !important;
  font-weight: 600 !important;
  color: var(--cu-text-main) !important;
  font-size: 1rem !important; /* STRICT LOCK: Prevents ballooning fonts */
  white-space: nowrap !important;
  display: inline-block !important;
}

/* ------------------------------------------
   5) LIGHT/DARK TOGGLE TO THE RIGHT OF USER MENU
   ------------------------------------------ */
.cu-row-4 ul.menu li:has(#theme-toggle-btn) {
  order: 99 !important; /* Forces it to the far right */
  margin-left: auto !important; /* Pushes it away from the left-aligned menu links */
}

#theme-toggle-btn {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================
   THE BULLETPROOF PENCIL FIX
   ========================================== */
.cu-master-header .contextual {
  top: 4px !important;
  right: 4px !important;
  position: absolute !important;
  z-index: 100 !important;
}

/* Force the pencil's text dropdown to anchor to the right so it never overlaps left */
.cu-master-header .contextual .contextual-links {
  right: 0 !important;
  left: auto !important;
  text-align: right !important;
}

/* ==========================================
   MOBILE GRACEFUL STACKING
   ========================================== */
@media (max-width: 768px) {
  .cu-row-1 .region--header-site-branding,
  .cu-row-3,
  .cu-row-3 > div,
  .cu-row-3 .region,
  .cu-row-4,
  .cu-row-4 .region,
  .cu-row-4 nav {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important; /* Remove pencil dead-zone on mobile stacking */
  }
  
  /* Center the search box on mobile */
  .cu-row-3 .block-search-narrow,
  .cu-row-3 #block-creatorsunchained-search-form-narrow {
    min-width: 100% !important;
    justify-content: center !important;
  }

  .cu-master-header ul.menu {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Reset the toggle margin so it centers correctly on mobile */
  .cu-row-4 ul.menu li:has(#theme-toggle-btn) {
    margin-left: 0 !important; 
  }

  /* Push the pencil down on mobile so it clears the hamburger menu */
  .cu-master-header .contextual {
    top: 22px !important; /* Drops it down to align with the bottom of the search box */
    right: 8px !important; /* Nudges it slightly left to breathe */
  }
}

/* ==========================================
   PAYWALL BUTTON STYLING (Smart Wrap Fix)
========================================== */

/* 1. Style the native Drupal "Add to Cart" Flag link into a large Yellow Button */
.flag-buy-now a.use-ajax {
  display: block !important;
  width: 100% !important;
  max-width: 600px !important;
  background-color: #FFD700 !important; /* Nice bright yellow */
  color: #000000 !important; /* Black text for contrast */
  text-align: center !important;
  padding: 15px !important;
  font-weight: bold !important;
  font-size: 1.2em !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  margin-bottom: 10px !important;
  transition: opacity 0.2s ease-in-out;
}

.flag-buy-now a.use-ajax:hover {
  opacity: 0.8 !important;
  color: #000000 !important;
}

/* 2. Format the custom Paywall Wrapper (Lightning & Stablecoins) */
.cu-paywall-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important; /* CRITICAL: Allows buttons to stack if the container is too narrow */
  gap: 15px !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 600px !important;
}

/* 3. Style the child buttons to split the width smartly */
.cu-paywall-wrapper button {
  /* Grow and shrink, but force a wrap if the container drops below ~400px (like a grid card) */
  flex: 1 1 200px !important; 
  padding: 8px !important;
  font-weight: 600 !important;
  font-size: 0.9em !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

/* Explicitly set the custom colors */
.cu-paywall-wrapper button.cu-lightning {
  background-color: #F7931A !important; 
}

.cu-paywall-wrapper button.cu-stablecoin {
  background-color: #85BB65 !important; 
}
/* NOTE: The @media query for 768px was deleted because flex-wrap handles this automatically now! */

/* ==========================================
   VIEWS EXPOSED FILTER WIDTH FIX
========================================== */
/* Ensures dropdowns don't collapse when cu_access unsets their options */
.views-exposed-form select,
.views-exposed-form .form-item {
  min-width: 180px !important;
  width: 100% !important;
}

/* Green Flag Views Table Badge */
.cu-green-flag-table-badge {
  display: inline-block;
  background-color: #00FF00 !important;
  color: #000000 !important;
  padding: 2px 6px;
  margin-left: 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85em;
  border: 1px solid #00AA00;
}

/* ==========================================
   EXTERNAL ONLY BADGE (BUY NOW OVERRIDE)
========================================== */
.cu-external-only-badge a.use-ajax {
  background-color: #fff9c4 !important; /* Pale yellow */
  color: #856404 !important; /* Dark golden brown for contrast */
  cursor: not-allowed !important;
  pointer-events: none !important; /* Physically kills the click/AJAX event */
  text-decoration: none !important;
  border: 1px solid #ffeeba !important;
  padding: 10px 15px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* Neutralize Olivero's aggressive hover states for this specific badge */
.cu-external-only-badge a.use-ajax:hover,
.cu-external-only-badge a.use-ajax:focus,
.cu-external-only-badge a.use-ajax:active {
  background-color: #fff9c4 !important;
  color: #856404 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* ==========================================
   PROCESSING BADGE (BUY NOW OVERRIDE)
========================================== */
.cu-processing-badge a.use-ajax {
  background-color: #e0e0e0 !important; /* Neutral grey */
  color: #616161 !important; /* Dark grey text */
  cursor: wait !important; /* Shows the loading/hourglass cursor */
  pointer-events: none !important;
  text-decoration: none !important;
  border: 1px solid #bdbdbd !important;
  padding: 10px 15px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

.cu-processing-badge a.use-ajax:hover,
.cu-processing-badge a.use-ajax:focus,
.cu-processing-badge a.use-ajax:active {
  background-color: #e0e0e0 !important;
  color: #616161 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* ==========================================
   SECONDARY MENU REGION: VERTICAL STACKING
========================================== */
.region--secondary-menu {
  display: flex !important;
  flex-direction: column !important; /* Stacks the two menu blocks vertically */
  align-items: flex-start !important; /* ALIGN FIX: Keeps both menus perfectly left-aligned */
  justify-content: flex-start !important;
  gap: 10px !important; /* Adds a little breathing room */
  width: 100% !important; /* Required to keep the pencil right-anchored */
}

/* Ensure the links inside the Dashboard and User menus stay horizontal and left-aligned */
.region--secondary-menu nav,
.region--secondary-menu nav ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important; /* Pushes the menu items left */
  width: 100% !important;
  margin: 0 !important;
}

/* ==========================================
   DASHBOARD MENU INDENTATION
========================================== */
/* Target the Dashboard menu list inside the secondary region */
.region--secondary-menu #block-creatorsunchained-dashboard ul.menu {
  padding-left: 20px !important; /* Indents the links to show subservient status! */
}

/* ==========================================
   FREE CONTENT BADGE (BUY NOW OVERRIDE)
========================================== */
.cu-free-badge a.use-ajax {
  background-color: #d4edda !important; /* Pale mint green */
  color: #155724 !important; /* Dark forest green text */
  border: 1px solid #c3e6cb !important;
  padding: 10px 15px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  display: inline-block !important;
  /* Note: pointer-events is intentionally omitted so users CAN click it! */
}

.cu-free-badge a.use-ajax:hover,
.cu-free-badge a.use-ajax:focus {
  background-color: #c3e6cb !important;
  color: #155724 !important;
  text-decoration: none !important;
  opacity: 0.9 !important;
}

/* ==========================================
   BETA SPLASH OVERLAY
========================================== */
.cu-splash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 15, 0.88);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.cu-splash-card {
  background: var(--cu-bg-elevated, #1a1a24);
  color: var(--cu-text-main, #ffffff);
  border: 1px solid var(--cu-border, #33334d);
  border-radius: 12px;
  max-width: 580px;
  width: 100%;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.cu-splash-card h2 {
  margin-top: 0;
  font-size: 1.75rem;
  color: var(--cu-text-main, #fff);
}

.cu-splash-main-text {
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.cu-splash-notice {
  background: rgba(255, 193, 7, 0.1);
  border-left: 4px solid #ffc107;
  color: #ffc107;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 0.95rem;
  text-align: left;
  margin-bottom: 28px;
}

.cu-splash-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cu-splash-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.2s ease;
  border: none;
}

.cu-splash-btn:hover {
  opacity: 0.9;
}

.cu-splash-btn-primary {
  background: #0070f3;
  color: #fff !important;
}

.cu-splash-btn-secondary {
  background: #333344;
  color: #fff !important;
}

.cu-splash-btn-outline {
  background: transparent;
  border: 1px solid #666;
  color: var(--cu-text-muted, #ccc);
}