/* =============================================================================
   CUESYNC MANUSCRIPT THEME v1.0.2 - 2026-01-22
   
   Cream paper, burgundy accents, scholarly serif fonts
   
   SCOPED: Only applies to pages with .cuesync-active or inside iframe with ?cuesync_embed=1
   
   v1.0.2 CHANGE: Added :not(.cs-qa-timestamp) exclusions to prevent Q&A tab conflicts
   
   TO REVERT: Remove this CSS from Customizer or comment out enqueue in functions.php
   ============================================================================= */

/* ========== GLOBAL / PAGE BACKGROUND - SCOPED TO CUESYNC ========== */
body.single-diy_project,
body.page-template-diy,
body[class*="diy"],
.cuesync-embed {
  background: linear-gradient(180deg, #faf7f2 0%, #f5f0e8 100%) !important;
}

/* Main container - ONLY inside CueSync areas */
.single-diy_project .e-con,
.single-diy_project .elementor-element,
.single-diy_project .elementor-widget-container,
.single-diy_project .elementor-section,
.single-diy_project .elementor-container,
.cuesync-embed .e-con,
.cuesync-embed .elementor-element {
  background: transparent !important;
}

/* Page wrapper - SCOPED */
.single-diy_project #content,
.single-diy_project .site-main,
.single-diy_project .elementor,
.single-diy_project .elementor-inner {
  background: #faf7f2 !important;
}

/* KILL ALL BORDERS on main containers */
.single-diy_project,
.single-diy_project .site-main,
.single-diy_project .site-content,
.single-diy_project .entry-content,
.single-diy_project .elementor,
.single-diy_project .elementor-inner,
.single-diy_project .elementor-section-wrap,
.single-diy_project .elementor-section,
.single-diy_project .elementor-top-section,
.single-diy_project .elementor-element,
.single-diy_project .anook-player,
.single-diy_project .e-con,
#col-video,
#col-steps,
#col-ingredients {
  border: none !important;
  outline: none !important;
}

/* Iframe container background - SCOPED */
.single-diy_project #cs-viewer,
.single-diy_project .cs-viewer,
.single-diy_project #diy-viewer,
.single-diy_project .diy-viewer,
#cs-viewer iframe,
#diy-viewer iframe {
  background: #faf7f2 !important;
}

/* ========== COLUMN BACKGROUNDS ========== */
/* Left column - Instructions/Steps */
#col-steps,
.cs-steps-column,
[class*='col-steps'] {
  background: linear-gradient(180deg, #fdfaf5, #f8f4ed) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px !important;
}

/* Right column - Index/Supplies */
#col-ingredients,
#col-supplies,
.cs-supply-column,
[class*='col-ingredients'],
[class*='col-supplies'] {
  background: linear-gradient(180deg, #fdfaf5, #f8f4ed) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px !important;
}

/* Center column - Video */
#col-video,
[class*='col-video'] {
  background: #faf7f2 !important;
  border: none !important;
}

/* ========== COLUMN HEIGHT ALIGNMENT - SCOPED TO CUESYNC ========== */
/* Force all 3 columns to equal height */
.single-diy_project .elementor-section.elementor-section-height-full > .elementor-container,
.single-diy_project .e-con.e-flex,
.single-diy_project .elementor-row,
.single-diy_project [data-element_type="container"] {
  align-items: stretch !important;
}

/* Ensure columns stretch to match tallest - SCOPED */
.single-diy_project .elementor-column,
.single-diy_project .e-con-inner,
.single-diy_project .e-child {
  display: flex !important;
  flex-direction: column !important;
}

/* Fill remaining space in columns */
#col-steps > .elementor-widget-wrap,
#col-ingredients > .elementor-widget-wrap,
#col-supplies > .elementor-widget-wrap,
.cs-steps-column > .elementor-widget-wrap,
.cs-supply-column > .elementor-widget-wrap {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Remove any white gaps between sections - SCOPED */
.single-diy_project .elementor-section,
.single-diy_project .e-con {
  background: #faf7f2 !important;
}

/* Video column inner container */
#col-video .elementor-widget-wrap,
[class*='col-video'] .elementor-widget-wrap {
  background: #faf7f2 !important;
}

/* ========== THREE COLUMN ROW - SCOPED TO CUESYNC ========== */
/* Target the main 3-column container */
.single-diy_project .elementor-section-wrap,
.single-diy_project .elementor-section-boxed,
.single-diy_project .elementor-section-full_width {
  background: #faf7f2 !important;
}

/* Make the row a flexbox with stretch - SCOPED */
.single-diy_project .elementor-container {
  display: flex !important;
  align-items: stretch !important;
}

/* Each column fills the height - SCOPED */
.single-diy_project .elementor-column-wrap,
.single-diy_project .elementor-widget-wrap {
  height: 100% !important;
  min-height: 100% !important;
}

/* The three columns parent - often has ID like 'cuesync-main' or similar */
#col-steps,
#col-video, 
#col-ingredients,
#col-supplies {
  min-height: 100% !important;
  height: auto !important;
}

/* Background fills entire column height */
#col-steps,
.cs-steps-column {
  background: linear-gradient(180deg, #fdfaf5, #f8f4ed) !important;
  min-height: 600px !important;
}

#col-ingredients,
#col-supplies,
.cs-supply-column {
  background: linear-gradient(180deg, #fdfaf5, #f8f4ed) !important;
  min-height: 600px !important;
}

/* ========== COLUMN HEADERS ========== */
.cs-col-header,
.elementor-heading-title,
#col-steps h2,
#col-steps h3,
#col-ingredients h2,
#col-ingredients h3,
#col-supplies h2,
#col-supplies h3,
.cs-steps-column h2,
.cs-steps-column h3 {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #7a2e3a !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid #d0c8bc !important;
}

/* ========== TOGGLE SWITCHES ========== */
.cs-toggle,
.toggle-switch,
input[type="checkbox"].toggle {
  width: 42px !important;
  height: 22px !important;
  background: #d8d0c4 !important;
  border-radius: 11px !important;
  border: none !important;
}

.cs-toggle.on,
.toggle-switch.active,
input[type="checkbox"].toggle:checked {
  background: #7a2e3a !important;
}

/* ========== STEP ITEMS ========== */
.cs-step-item,
.step-item,
.cs-instruction-item,
[class*='instruction-item'],
.cs-steps-column > div > div {
  padding: 16px 18px !important;
  margin-bottom: 10px !important;
  background: #fff !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  border: 1px solid #ebe5dc !important;
  position: relative;
}

/* Step item section symbol */
.cs-step-item::before,
.step-item::before,
.cs-instruction-item::before {
  content: '§' !important;
  position: absolute !important;
  right: 12px !important;
  top: 12px !important;
  font-size: 14px !important;
  color: #d0c4b8 !important;
  font-family: Georgia, serif !important;
}

/* Step item hover */
.cs-step-item:hover,
.step-item:hover,
.cs-instruction-item:hover {
  border-color: #7a2e3a !important;
  background: #fffefa !important;
}

/* Step item active */
.cs-step-item.active,
.step-item.active,
.cs-instruction-item.active,
.cs-step-item.current,
.step-item.current {
  border-color: #7a2e3a !important;
  border-width: 2px !important;
  background: #fffcf8 !important;
}

/* Step titles */
.cs-step-title,
.step-title,
.cs-instruction-item h4,
.cs-instruction-item h5,
.cs-instruction-item strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #3a2020 !important;
  margin-bottom: 6px !important;
  font-family: Georgia, serif !important;
}

/* Step text/description */
.cs-step-text,
.step-text,
.cs-instruction-item p,
.cs-instruction-item span {
  font-size: 12px !important;
  color: #6a5a4a !important;
  line-height: 1.55 !important;
  font-family: Georgia, serif !important;
}

/* ========== INDEX ITEMS ========== */
.cs-index-item,
.index-item,
.cs-supply-item,
[class*='index-item'],
[class*='supply-item'] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  margin-bottom: 5px !important;
  cursor: pointer;
  transition: 0.15s ease !important;
}

/* Index count badges */
.cs-index-count,
.index-count,
.cs-hit-badge,
.hit-count {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #7a2e3a !important;
  min-width: 20px !important;
  font-family: Georgia, serif !important;
  background: transparent !important;
  border: none !important;
}

/* Index names */
.cs-index-name,
.index-name,
.cs-supply-name {
  font-size: 13px !important;
  color: #5a4a3a !important;
  font-family: Georgia, serif !important;
}

/* ========== VIDEO AREA ========== */
.cs-video-wrapper,
.video-wrapper,
#cs-iframe-container,
.cs-iframe-container,
[class*='video-container'] {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
}

/* YouTube iframe container */
iframe[src*="youtube"],
.cs-youtube-embed {
  border-radius: 8px !important;
}

/* ========== TIMESTAMP BUTTONS (below video) ========== */
/* v1.0.2: Added :not(.cs-qa-timestamp) to exclude Q&A tab buttons */
.cs-timestamp-btn,
.timestamp-btn,
[class*='timestamp']:not(.cs-qa-timestamp),
button[class*='time']:not(.cs-qa-timestamp),
.quiz-timestamp,
.review-btn,
[class*='review'] button {
  background: #fdfaf5 !important;
  border: none !important;
  border-radius: 20px !important;
  color: #7a2e3a !important;
  padding: 8px 16px !important;
  font-family: Georgia, serif !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
}

.cs-timestamp-btn:hover,
.timestamp-btn:hover,
[class*='timestamp']:not(.cs-qa-timestamp):hover,
button[class*='time']:not(.cs-qa-timestamp):hover,
.quiz-timestamp:hover,
.review-btn:hover,
[class*='review'] button:hover {
  background: rgba(122, 46, 58, 0.1) !important;
}

.cs-timestamp-btn:hover,
.timestamp-btn:hover,
[class*='timestamp']:not(.cs-qa-timestamp):hover,
button[class*='time']:not(.cs-qa-timestamp):hover,
.review-btn:hover {
  background: #7a2e3a !important;
  color: #fff !important;
}

/* Back to Review button */
[class*='back-to-review'],
.back-review-btn,
button:contains('Review') {
  background: #7a2e3a !important;
  color: #fff !important;
  border: 2px solid #7a2e3a !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
}

/* ========== MENU STYLING NOW IN CONSOLIDATED PLAYER v3.8.37 ========== */
/* All menu styling handled by Consolidated Player - no overrides here */

/* ========== BLUE ICON OVERRIDE - Target ALL blue elements ========== */
/* Force burgundy on any blue icons/buttons in video column */
/* v1.0.2: Added :not(.cs-qa-timestamp) exclusions */
#col-video button:not(.cs-qa-timestamp),
#col-video .elementor-button,
#col-video svg,
#col-video i,
#col-video [class*='icon'],
#col-video [class*='btn']:not(.cs-qa-timestamp),
[class*='col-video'] button:not(.cs-qa-timestamp),
[class*='col-video'] svg,
[class*='col-video'] i {
  color: #7a2e3a !important;
  fill: #7a2e3a !important;
}

/* Active state for video column buttons */
#col-video button.active:not(.cs-qa-timestamp),
#col-video .active:not(.cs-qa-timestamp),
[class*='col-video'] button.active:not(.cs-qa-timestamp) {
  background: #7a2e3a !important;
  color: #fff !important;
  fill: #fff !important;
}

#col-video button.active svg,
#col-video button.active i,
[class*='col-video'] button.active svg {
  color: #fff !important;
  fill: #fff !important;
}

/* Target specific icon classes that might be blue - SCOPED */
.single-diy_project .fa-play, 
.single-diy_project .fa-pause, 
.single-diy_project .fa-step-forward, 
.single-diy_project .fa-step-backward,
.single-diy_project .fa-redo, 
.single-diy_project .fa-expand, 
.single-diy_project .fa-lightbulb, 
.single-diy_project .fa-bars,
#col-video [class*='play'], 
#col-video [class*='pause'], 
#col-video [class*='forward'], 
#col-video [class*='backward'] {
  color: #7a2e3a !important;
}

/* Elementor icon widget - SCOPED */
.single-diy_project .elementor-icon,
#col-video .elementor-icon {
  color: #7a2e3a !important;
  fill: #7a2e3a !important;
}

.single-diy_project .elementor-icon svg,
#col-video .elementor-icon svg {
  fill: #7a2e3a !important;
}

/* Override any inline blue colors */
[style*="color: #3b82f6"],
[style*="color: blue"],
[style*="color: #2563eb"],
[style*="color:#3b82f6"],
[style*="background: #3b82f6"],
[style*="background-color: #3b82f6"] {
  color: #7a2e3a !important;
  background-color: transparent !important;
}

/* Speed indicator */
.anook-controls .speed-display,
.speed-btn span {
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  color: #7a2e3a !important;
}

/* ========== PLAY BUTTON (Big center one) ========== */
.cs-play-btn,
.play-button,
.ytp-large-play-button {
  background: #7a2e3a !important;
  border-radius: 50% !important;
}

/* ========== FOOTER ========== */
.cs-footer,
.cuesync-footer,
[class*='cuesync-footer'],
.powered-by-cuesync {
  background: linear-gradient(180deg, #f8f4ed, #f4f0e8) !important;
  padding: 16px !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #8a7a6a !important;
  border-top: 1px solid #e0d8cc !important;
  font-family: Georgia, serif !important;
  font-style: italic !important;
}

.cs-footer span,
.cuesync-footer span,
.powered-by-cuesync span,
.cs-footer strong,
.cuesync-footer strong {
  color: #7a2e3a !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* ========== SCROLLBARS - HIDE COMPLETELY ========== */
#col-steps,
#col-ingredients,
#col-supplies,
.cs-steps-column,
.cs-supply-column,
.anook-steps,
.anook-ingredients {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#col-steps::-webkit-scrollbar,
#col-ingredients::-webkit-scrollbar,
#col-supplies::-webkit-scrollbar,
.cs-steps-column::-webkit-scrollbar,
.cs-supply-column::-webkit-scrollbar,
.anook-steps::-webkit-scrollbar,
.anook-ingredients::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

/* ========== LINKS - SCOPED TO CUESYNC ========== */
.single-diy_project a,
#col-steps a,
#col-ingredients a,
#col-supplies a {
  color: #7a2e3a !important;
  text-decoration: none !important;
}

.single-diy_project a:hover,
#col-steps a:hover,
#col-ingredients a:hover,
#col-supplies a:hover {
  color: #5a1e2a !important;
  text-decoration: underline !important;
}

/* ========== SETTINGS GEAR (Already exists in cs-settings.js) ========== */
#cs-settings-gear {
  background: rgba(122, 46, 58, 0.9) !important;
}

#cs-settings-gear:hover {
  background: #7a2e3a !important;
}

#cs-settings-panel {
  border: 1px solid #d0c8bc !important;
  box-shadow: 0 8px 30px rgba(122, 46, 58, 0.15) !important;
}

.cs-settings-header {
  background: #7a2e3a !important;
}

.cs-position-btn.active {
  background: #7a2e3a !important;
  border-color: #7a2e3a !important;
}

.cs-reset-btn {
  background: #7a2e3a !important;
}

.cs-reset-btn:hover {
  background: #5a1e2a !important;
}

/* ========== QUIZ ELEMENTS (if present) ========== */
.cs-quiz-btn,
.quiz-button {
  background: #7a2e3a !important;
  border-color: #7a2e3a !important;
  font-family: Georgia, serif !important;
}

.cs-quiz-btn:hover,
.quiz-button:hover {
  background: #5a1e2a !important;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
  #col-steps,
  .cs-steps-column,
  #col-ingredients,
  #col-supplies,
  .cs-supply-column {
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid #e0d8cc !important;
  }
  
  .cs-step-item::before,
  .step-item::before {
    display: none !important;
  }
}