/**
 * ==========================================================================
 * Shared CSS for Cryptoatics Value Proposition Sections
 * --------------------------------------------------------------------------
 * This file contains foundational styles for the 'for-investors' and 
 * 'for-owners' sections, including:
 *  - Global resets and variables
 *  - General page and content layout
 *  - Shared typography
 *  - Styles for the tabbed navigation (left-options)
 *  - Decorative shimmer effects
 *  - Base responsive adjustments
 * 
 * Interactive component-specific styles (tables, charts, chat, etc.) 
 * are located in 'interactive.css'.
 * ==========================================================================
 */

/*
 * ==========================================================================
 * I. GLOBALS & ROOT VARIABLES
 * ==========================================================================
 */

/* --- Global Box Sizing --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --- Root CSS Variables --- */
:root {
  /* Layout & Sizing */
  --content-max-width: 970px;
  --container-max-width: 1200px;
  --logo-size: 40px; /* Example: shared logo size */
  --section-padding: 60px 0; /* Default padding for main sections */
  
  /* Common Theme Colors (ensure these are defined in your global theme styles) */
  --investor-color: var(--primary-color, #FF008A);  /* Fallback if --primary-color isn't set */
  --investor-bg: rgba(255, 0, 138, 0.1);
  --owner-color: var(--secondary-color, #FCB900);   /* Fallback if --secondary-color isn't set */
  --owner-bg: rgba(252, 185, 0, 0.1);
  
  /* Other Shared Variables */
  --hover-opacity: 0.05; /* Example: for hover effects */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 30px;
  --border-color: #333; /* Default border color */
  --dark-bg: #121212;
  --darker-bg: #0A0A0A;
  --light-text: #FFFFFF;
  --gray-text: #B0B3B8; /* Adjusted from #aaa for better contrast/modern feel */
}

/*
 * ==========================================================================
 * II. GENERAL PAGE & SECTION LAYOUT
 * ==========================================================================
 */

/* --- Main Value Proposition Sections (.for-investors, .for-owners) --- */
.value-prop > section { 
    padding: var(--section-padding);
}

/* --- Content Container (within sections) --- */
.value-prop-widget > section > .container {
    max-width: var(--container-max-width);
  margin: 0 auto;
    padding: 0; /* Children will handle their own padding */
}

/* --- Shared Two-Column Content Layout (.value-prop-content) --- */
.value-prop-content {
    display: flex;
    gap: 20px;
    margin: 0 auto 30px; /* Centered with bottom margin */
    min-height: 400px;
    max-width: var(--content-max-width);
    border-radius: 0 !important; /* Overrides any potential inherited radius */
    overflow: hidden; /* Prevents children from breaking layout if too wide */
}

/* Left Pane (Navigation / Options) */
.value-prop .value-prop-content > .left-options {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 300px;
    max-width: 300px;
    padding-right: 20px; /* Space between left and right panes */
    display: flex;
    flex-direction: column;
}

/* Right Pane (Interactive Component Display Area) */
.value-prop .value-prop-content > .right-content {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Critical: Prevents scrollbars on this panel if content overflows */
}

/* --- Content Panes (within .right-content, switched by tabs) --- */
.value-prop .right-content .content-pane {
    display: none; /* Hidden by default */
    animation: fadeIn 0.5s ease; /* Shared fade-in animation */
    text-align: left; /* Default text alignment for panes */
}

.value-prop .right-content .content-pane.active {
    display: block; /* Shown when active */
}

/* --- General Container for Interactive Components (.content-image) --- */
/* This container holds interactive components (tables, chat, etc.)
   and is designed to have a fixed height for consistent layout of those components.
   Its properties are primarily defined here, with height specifically set
   to ensure predictable space for the interactive elements it contains. */
.content-image { /* This holds the actual interactive component (table, chat, etc.) */
    max-width: 100%;
    /* Explicit height for flex calculations and consistent component display. */
    /* Uses --component-container-height, falling back to 480px. This was consolidated from interactive.css. */
    height: var(--component-container-height, 480px);
    max-height: var(--component-container-height, 480px); /* Enforce maximum height, consistent with the fixed height. */
    border-radius: var(--radius-md, 8px);
    overflow: hidden; /* Hide component overflow if it exceeds max-height */
    display: flex; /* Often useful for internal component layout */
    flex-direction: column; /* Default for components stacking elements vertically */
    background-color: var(--darker-bg, #0A0A0A);
    position: relative; /* For shimmer pseudo-elements and other positioning contexts */
    border: 1px solid var(--border-color, #333);
}

/*
 * ==========================================================================
 * III. SHARED TYPOGRAPHY
 * ==========================================================================
 */

/* --- Main Section Header (e.g., "For Investors", "For Owners") --- */
.value-prop-widget > section > .container > h2 { /* Corrected selector based on active HTML */
  display: block;
  font-size: 3rem;
  font-weight: 700; /* Added for emphasis */
  margin-bottom: 30px;
  color: var(--light-text, white);
  max-width: var(--content-max-width); /* Align with content block */
  text-align: left;
  margin-left: auto; /* Centering max-width block */
  margin-right: auto; /* Centering max-width block */
  margin-top: 0; /* Explicitly set top margin */
  padding: 0; /* Explicitly set all padding to 0, rely on margin for spacing */
}

/* General h2 styling within value-prop sections (less specific) */
/* This provides a default for h2s within sections if not further specified */
.value-prop section > h2 {
  text-align: center; /* From original style.css */
  margin-bottom: 50px; /* From original style.css */
  color: var(--light-text, white); /* Assuming similar color to other headers */
  font-weight: 600; /* Consistent with .content-header h3 */
}

/* --- Content Subheader (e.g., title of the left-options block) --- */
.content-header h3 {
  font-size: 2rem;
  font-weight: 600; /* Added for emphasis */
  color: var(--light-text, white);
  margin-bottom: 15px;
}

/* --- General Content Description Paragraphs --- */
.content-description p {
  color: var(--gray-text, #B0B3B8);
  line-height: 1.6;
  max-width: 600px; /* Constrain line length for readability */
  margin-bottom: 10px; /* Spacing between paragraphs */
}
.content-description {
  margin-bottom: 30px; /* Space after a block of description text */
}


/* --- Text Highlight Classes (Investor/Owner Colors) --- */
.highlight.investor,
.for-investors h3 .highlight { /* Added for h3 highlights */
  color: var(--investor-color);
}

.highlight.owner,
.for-owners h3 .highlight { /* Added for h3 highlights */
  color: var(--owner-color);
}

/* --- User Tags (Currently hidden, kept for potential future use) --- */
.user-tags {
  display: none; /* Hidden by default */
}

.user-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 10px;
  /* display: none !important; /* Redundant if parent .user-tags is display:none */
}

.user-tag.investor {
  background-color: var(--investor-bg);
  color: var(--investor-color);
}

.user-tag.owner {
  background-color: var(--owner-bg);
  color: var(--owner-color);
}


/*
 * ==========================================================================
 * IV. TAB NAVIGATION (.left-options) & CONTROLS
 * ==========================================================================
 */

/* --- Tab Option List --- */
.value-prop .left-options .option-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    width: 100%;
}

/* Reset border radius for ALL descendants within option-list for consistency */
.value-prop .left-options .option-list * {
    border-radius: initial; /* Overrides user-agent or other styles */
}

/* --- Individual Tab Option --- */
.value-prop .left-options .option {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative; /* For indicator positioning or pseudo-elements */
    width: 100%;
    box-sizing: border-box;
}

.value-prop .left-options .option span { /* Text within the tab */
    color: var(--gray-text);
    font-weight: 500;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

/* --- Active Tab State (Common & Section-Specific) --- */
.value-prop .left-options .option.active, /* Common active styles */
.for-investors .option.active, /* Ensure specificity for overrides */
.for-owners .option.active {
    width: 100%; /* Ensure full width even if overridden */
    box-sizing: border-box;
}

/* Investor Active Tab */
.for-investors .option.active {
    background-color: var(--investor-bg);
}
.for-investors .option.active span {
    color: var(--investor-color);
    font-weight: 600;
}
.for-investors .option.active .option-indicator::before {
    background-color: var(--investor-color);
    height: 100%; /* Fill indicator on active */
}

/* Owner Active Tab */
.for-owners .option.active { 
    background-color: var(--owner-bg);
}
.for-owners .option.active span { 
    color: var(--owner-color);
    font-weight: 600;
}
.for-owners .option.active .option-indicator::before {
    background-color: var(--owner-color);
    height: 100%; /* Fill indicator on active */
}


/* --- Tab Option Indicator (Vertical Progress Bar) --- */
.value-prop .left-options .option-indicator {
    width: 4px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.1); /* Track color */
    margin-right: 15px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* Prevent indicator from shrinking */
}

.value-prop .left-options .option-indicator::before { /* The fill element */
    content: '';
    position: absolute;
    left: 0;
    bottom: 0; /* Fill from the bottom up */
    width: 100%;
    height: 0%; /* Start at 0 height, animated by JS or .active state */
    background-color: var(--investor-color); /* Default fill color (investor) */
}

/* Animation Class for Indicator (applied by JS) */
.value-prop .left-options .option-indicator.is-animating::before {
    animation-name: valuePropProgressBarFillVertical;
    animation-duration: var(--animation-duration, 5s); 
    animation-timing-function: linear;
    animation-fill-mode: forwards; 
}


/* --- Gradient Buttons (within .left-options) --- */
.left-options .gradient-btn {
  margin-top: 20px;
    width: 100%;
  border-radius: var(--radius-lg) !important; /* Ensure high border-radius */
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease; /* Shared transition for gradient buttons */
}

.left-options .gradient-btn.owner-gradient {
  color: var(--owner-color);
  border: 2px solid var(--owner-color);
  background: transparent;
}
.left-options .gradient-btn.owner-gradient:hover {
  color: var(--light-text);
  background: var(--owner-bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(252, 185, 0, 0.3);
}

.left-options .gradient-btn.investor-gradient {
  color: var(--investor-color);
  border: 2px solid var(--investor-color);
    background: transparent;
}
.left-options .gradient-btn.investor-gradient:hover {
  color: var(--light-text);
  background: var(--investor-bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(255, 0, 138, 0.3);
}

.left-options .gradient-btn:active { /* Active (click) state */
  transform: scale(0.98);
}

/*
 * ==========================================================================
 * V. SHARED ANIMATIONS & DECORATIVE EFFECTS
 * ==========================================================================
 */

/* --- Fade-In Animation (for content panes) --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Progress Bar Fill Animation (for tab indicator) --- */
@keyframes valuePropProgressBarFillVertical {
    from { height: 0%; }
    to { height: 100%; }
}

/* --- Subtle Gradient Animation (Example for buttons, if used) --- */
@keyframes subtleGradient {
  0% {
    background-position: 0% 50%;
    filter: brightness(1);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.2);
  }
  100% {
    background-position: 0% 50%;
    filter: brightness(1);
  }
} 

/* --- Shimmer Effect (for .content-image backgrounds) --- */
/* Owner-specific content image shimmer */
.for-owners .content-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--owner-color), transparent);
    animation: shimmer 2s infinite;
    z-index: 1; /* Default z-index for owner shimmer */
}

/* Investor-specific content image shimmer */
.for-investors .content-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--investor-color), transparent);
    animation: shimmer 2s infinite;
    z-index: 3; /* Higher z-index to be above project ranking header */
}

/* Shimmer Animation Definition */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); } 
    100% { transform: translateX(-100%); } 
} 

/*
 * ==========================================================================
 * VI. RESPONSIVE STYLES
 * ==========================================================================
 */

/* --- Tablet & Smaller Desktop (<= 992px) --- */
@media (max-width: 992px) {
  .value-prop-widget > section > .container > h2 { /* Corrected selector */
    font-size: 2.5rem;
  }

  /* General h2 within value-prop sections at this breakpoint */
  .value-prop section > h2 {
    font-size: 2.5rem; /* Defaulting to match the main h2 at this breakpoint */
    /* margin-bottom will inherit or can be set if different from base */
  }

  .content-header h3 {
    font-size: 1.75rem;
  }

  /* Adjust two-column layout for smaller screens if needed */
  /* Example: Stacking left/right panes or reducing left-options width */
  /* .value-prop-content {
    flex-direction: column;
  }
  .value-prop .value-prop-content > .left-options {
    max-width: 100%;
    padding-right: 0;
    margin-bottom: 20px;
  } */
}

/* --- Mobile Devices & Tablets (<= 768px) --- */
@media (max-width: 768px) {
  .value-prop-widget > section > .container > h2 { /* Corrected selector */
    font-size: 2.2rem;
    margin-bottom: 20px;
  }
  
  /* General h2 within value-prop sections at this breakpoint */
  .value-prop section > h2 {
    font-size: 2rem; /* From original style.css */
    margin-bottom: 30px; /* From original style.css */
  }
  
  .content-header h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }
  
  .content-description {
    margin-bottom: 20px;
  }

  /* Stack two-column layout */
  .value-prop-content {
    flex-direction: column; /* Stack panes on mobile */
    gap: 15px;
  }
  .value-prop .value-prop-content > .left-options {
    max-width: 100%; /* Allow left options to take full width */
    flex-basis: auto; /* Reset flex-basis */
    padding-right: 0;
    margin-bottom: 0px;
  }
  .value-prop .value-prop-content > .right-content {
     /* min-height: 400px; */ /* Removed: Allow height to be determined by content */
     max-height: none; /* Ensure no max-height constraint on the wrapper */
     overflow: visible; /* Allow content (like full .content-image) to be visible */
  }
  .content-image {
    max-height: 400px; /* Set max-height for the component container itself */
    /* Consider min-height for content-image if its children don't provide enough */
  }

  /* Hide gradient buttons in left options on mobile */
  .value-prop .left-options .gradient-btn {
    display: none;
  }

  /* Remove side padding from .container on mobile */
  .value-prop-widget > section > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --- Smaller Mobile Devices (<= 480px) --- */
@media (max-width: 480px) {
  .value-prop-widget > section > .container > h2 { /* Corrected selector */
    font-size: 1.8rem;
    margin-bottom: 15px;
    padding: 0; /* Explicitly set all padding to 0 for mobile too */
  }
  
  /* General h2 within value-prop sections at this breakpoint */
  .value-prop section > h2 {
    font-size: 1.6rem; /* From original style.css */
    margin-bottom: 20px; /* From original style.css */
  }
  
  .content-header h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }
  
  .value-prop .left-options .option {
    padding: 8px 12px; /* Slightly reduce tab padding */
  }

  .left-options .gradient-btn {
    padding: 10px 20px; /* Adjust button padding */
    font-size: 0.9rem;
  }
} 

/*
 * ==========================================================================
 * VII. STYLES MOVED FROM STYLE.CSS (Global Overrides for Value Prop)
 * ==========================================================================
 */

/* Base overrides for section.value-prop and direct children */
section.value-prop {
    background: #000; /* This was in style.css, you may want to reconcile with --dark-bg potentially */
    padding-top: 80px;
    padding-bottom: 80px !important; /* Added !important */
}

section.value-prop > section {
    /* Overrides default --section-padding for bottom, keeps top at 0 if this is desired */
    /* Original valueprop.css: padding: var(--section-padding); which is 60px 0 */
    /* style.css (being moved): padding-bottom: 80px; padding-top: 0; */
    /* Consider if you want to keep padding-top: 0 or respect the variable */
    padding-top: 0; 
    padding-bottom: 0; /* Changed from 80px to 0 */
}

/* Responsive adjustments from style.css */
@media (max-width: 768px) {
    section.value-prop {
        padding-top: 40px; /* Maintains the 40px top padding from base override */
    }

    section.value-prop > section {
        padding-bottom: 0; /* Changed from 40px to 0, was Adjusts bottom padding */
    }
}

@media (max-width: 480px) {
    section.value-prop {
        padding: 0 16px !important; /* Reduces top padding */
    }

    section.value-prop > section {
        padding-bottom: 0; /* Changed from 20px to 0, was Further adjusts bottom padding */
    }
} 

/*
 * ==========================================================================
 * VA. DESKTOP-SPECIFIC LAYOUT ADJUSTMENTS FOR VALUE PROP WIDGETS
 * ==========================================================================
 */
@media (min-width: 993px) {
    #investor-widget.value-prop-widget { /* Apply to the investor widget specifically */
        margin-bottom: 100px;
    }
}