/**
 * Design Variants CSS
 *
 * This file contains alternative design styles for the stage page.
 * Styles are scoped to body classes set by the design-theme-service.
 *
 * Usage:
 * - Test a variant: Add ?design=variant-a to the URL
 * - Production: Map program IDs to themes in design-theme-service.js
 *
 * Structure:
 * - Each variant has its own section
 * - Within each section, organize by component
 * - Use the body.design-[variant] prefix for all rules
 */

/* ==========================================================================
   VARIANT-A: First Alternative Design
   ========================================================================== */

/*
 * Example structure - uncomment and modify as you build out the design:
 *
 * body.design-variant-a {
 *   // Global overrides for this variant
 * }
 */

/* ---------------------------------------------------------------------------
   Variant-A: Global / Page Level
   --------------------------------------------------------------------------- */

/* Urban Design: Clean, solid dark background */
body.design-variant-a {
  background: #0F0F0F !important;
  background-attachment: fixed;

  /* =========================================================================
     CSS Custom Properties - These cascade into Shadow DOM components
     ========================================================================= */

  /* Page & Modal Backgrounds */
  --color-page-background: #0F0F0F;
  --color-page-gradient-top: rgba(255, 238, 92, 0.08);
  --color-page-gradient-bottom: rgba(15, 15, 15, 1);
  --color-bg: #0F0F0F;
  --color-modal-bg: #0F0F0F;

  /* Surfaces (cards, containers) */
  --color-surface-1: rgba(255, 255, 255, 0.04);
  --color-surface-2: rgba(255, 255, 255, 0.06);
  --color-surface-3: rgba(255, 255, 255, 0.08);

  /* Borders */
  --color-border-primary: rgba(255, 255, 255, 0.12);
  --color-border-interactive: rgba(255, 255, 255, 0.25);

  /* Text */
  --color-text-header: #ffffff;
  --color-text-body: rgba(255, 255, 255, 0.85);
  --color-text-muted: rgba(255, 255, 255, 0.5);

  /* Accents */
  --color-accent-primary: #FFEE5C;
  --color-accent-secondary: #43d675;

  /* Glassmorphism */
  --blur-intensity: 20px;
  --color-glass-background: rgba(255, 255, 255, 0.03);
  --color-glass-background-light: rgba(255, 255, 255, 0.05);

  /* Border Radius */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
}

/* Remove noise texture overlay */
body.design-variant-a::before {
  display: none !important;
}

/* Hide ambient glow effects */
body.design-variant-a .ambient-glow-container {
  display: none !important;
}

/* Adjust container for urban feel + flex for reordering */
body.design-variant-a .container {
  max-width: 1280px;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------------
   Variant-A: Stage Header
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-page-header-with-dropdown {
  // Header style overrides
}

body.design-variant-a .stage-header {
  // Example: More rounded corners
  border-radius: 20px;
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Stage Videos
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-videos {
  // Video component overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: CTA Buttons - Move below workouts
   --------------------------------------------------------------------------- */

/* Keep header at top */
body.design-variant-a stage-page-header-with-dropdown {
  order: 1;
}

/* Mobile tab menu */
body.design-variant-a mobile-tab-menu {
  order: 2;
}

/* Videos section */
body.design-variant-a .section.tab-content-section:has(stage-videos) {
  order: 3;
}

/* Workouts section - move before CTA */
body.design-variant-a .section.tab-content-section:has(stage-page-workouts-section) {
  order: 4;
}

/* CTA Buttons - move after workouts */
body.design-variant-a .cta-buttons-container {
  order: 5;
  margin-top: 16px;
  margin-bottom: 80px;
}

/* Study section */
body.design-variant-a .section.tab-content-section:has(stage-page-study-section) {
  order: 6;
}

/* Progress tab */
body.design-variant-a .tab-content-section[data-tab-content="progress"] {
  order: 7;
}

/* Overview tab */
body.design-variant-a .tab-content-section[data-tab-content="overview"] {
  order: 8;
}

/* Sidebar */
body.design-variant-a vision-sidebar {
  order: 9;
}

/* ---------------------------------------------------------------------------
   Variant-A: Workouts Section
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-page-workouts-section {
  // Workouts section overrides
}

body.design-variant-a .workout-card {
  // Example: Card style changes
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Study Section
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-page-study-section {
  // Study section overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Progress Summary
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-page-progress-summary {
  // Progress summary overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Program Overview
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-page-program-overview {
  // Program overview overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Sidebar
   --------------------------------------------------------------------------- */

/*
body.design-variant-a vision-sidebar {
  // Sidebar overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Mobile Tab Menu
   --------------------------------------------------------------------------- */

/*
body.design-variant-a mobile-tab-menu {
  // Mobile tab menu overrides
}

body.design-variant-a sidebar-bottom-menu {
  // Bottom menu overrides
}
*/


/* ---------------------------------------------------------------------------
   Variant-A: Blog Article Modal (Shadow DOM Component)
   CSS Custom Properties cascade into Shadow DOM automatically.
   For host-level styling, use the custom element selector.
   --------------------------------------------------------------------------- */

/* Urban Design: Blog Article Modal - host styling */
body.design-variant-a blog-article-modal {
  /* Host-level custom properties for the modal */
  --modal-overlay-bg: rgba(0, 0, 0, 0.9);
  --modal-container-bg: #0F0F0F;
}


/* ==========================================================================
   VARIANT-B: Second Alternative Design (Template)
   ========================================================================== */

/*
 * Copy the variant-a structure and replace 'variant-a' with 'variant-b'
 * to create another design variant.
 */


/* ==========================================================================
   UTILITY: Design Variant Indicator (Development Only)
   ========================================================================== */

/* Shows a small badge indicating which design variant is active */
body[class*="design-variant-"]::after {
  content: attr(class);
  position: fixed;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #43d675;
  padding: 4px 8px;
  font-size: 10px;
  font-family: monospace;
  border-radius: 4px;
  z-index: 99999;
  pointer-events: none;
  opacity: 0.7;
}

/* Hide the indicator on mobile to avoid cluttering the UI */
@media (max-width: 768px) {
  body[class*="design-variant-"]::after {
    display: none;
  }
}