/**
 * EIC FLEXIBLE SECTIONS WIDGET - PROFESSIONAL LAYOUT STYLING
 * 
 * This stylesheet defines the visual presentation for the flexible sections
 * widget that allows dynamic content sections with nested widget support.
 * 
 * Features:
 * - Professional header with title and subtitle layout
 * - Flexible section containers with consistent spacing
 * - Responsive design with mobile-first approach
 * - Corporate branding colors and typography
 * - Clean separation between sections
 * - Nested content support with proper styling inheritance
 * - Print-friendly styles
 * 
 * Layout Structure:
 * - Main Container: Overall widget wrapper
 * - Sections Header: Main title and subtitle area
 * - Sections Content: Container for all content sections
 * - Content Section: Individual section with title, description, and nested content
 * 
 * @package EIC-Toybox
 * @subpackage Widgets/FlexibleSections
 * @version 1.0
 * @author Zélie Leydert
 */

/**
 * MAIN CONTAINER
 * 
 * Primary wrapper for the entire flexible sections widget.
 */
.eic-flexible-sections-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 0 20px 0;
  box-sizing: border-box;
  border-radius: 20px;
  overflow: clip;
  box-shadow: 0 0 20px -5px;
}

/* Shortcode wrapper */
.eic-flexible-sections-container .eic-flexible-sections-shortcode {
  width: 100%;
  margin: 1.5rem 0;
}

/**
 * SECTIONS HEADER
 * 
 * Main title and subtitle area at the top of the widget.
 */
.eic-flexible-sections-container .sections-header {
  border-bottom: 2px solid #e9ecef;
  background: linear-gradient(90deg, #0067ed, #051d40);
  padding: 15px 50px;
}

.eic-flexible-sections-container .sections-title-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Main title styling */
.eic-flexible-sections-container .sections-main-title {
  color: #ffffff;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-transform: none;
  letter-spacing: 0.5px;
}

/* Main subtitle/description */
.eic-flexible-sections-container .sections-main-subtitle {
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.5;
  margin: 0;
  font-weight: 800;
  background: #487cbf;
  border-radius: 25px;
  color: white;
  padding: 7px 28px;
}

/* Responsive header layout */
@media (min-width: 768px) {
  .eic-flexible-sections-container .sections-title-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .eic-flexible-sections-container .sections-main-title {
    flex: 0 0 auto;
    max-width: 60%;
  }

  .eic-flexible-sections-container .sections-main-subtitle {
    text-align: right;
    margin-top: 0.25rem; /* Slight alignment adjustment */
  }
}

/**
 * SECTIONS CONTENT
 * 
 * Container for all content sections with consistent spacing.
 */
.eic-flexible-sections-container .sections-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* Space between sections */
  padding: 20px 50px;
}

/**
 * INDIVIDUAL CONTENT SECTIONS
 * 
 * Styling for each content section with title, description, and nested content.
 */
.eic-flexible-sections-container .content-section {
  position: relative;
  padding: 0;
  margin: 0;
}

/* Section header (title + description) */
.eic-flexible-sections-container .section-header {
  margin-bottom: 1.5rem;
}

.eic-flexible-sections-container .section-header:empty {
  display: none; /* Hide if no title or description */
}

/* Section title */
.eic-flexible-sections-container .section-title {
  color: #051d40; /* Corporate dark blue */
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 400; /* Semi-bold */
  line-height: 1.3;
  margin: 0 0 0.75rem 0;
  text-transform: none;
  width: fit-content;
}

.eic-flexible-sections-container .section-title-separator {
  height: 3px;
  background: linear-gradient(90deg, #0067ed, #051d40);
  width: 50%;
  border-radius: 30px;
}

/* Section description */
.eic-flexible-sections-container .section-description {
  color: #495057; /* Dark gray */
  font-size: 16px;
  line-height: 1.6;
  margin-top: 20px;
  font-weight: 400;
  margin-bottom: 50px;
  text-align: justify;
}

/* Section content (nested widgets/shortcodes) */
.eic-flexible-sections-container .section-content {
  position: relative;
  width: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
}

/* Ensure nested content has proper spacing */
.eic-flexible-sections-container .section-content > *:first-child {
  margin-top: 0;
}

.eic-flexible-sections-container .section-content > *:last-child {
  margin-bottom: 0;
}

/* Add subtle visual separation between sections */
.eic-flexible-sections-container .content-section:not(:last-child) {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #e9ecef;
}

/**
 * NESTED CONTENT STYLING
 * 
 * Ensure nested widgets and content integrate well with the section layout.
 */

/* Nested widget containers */
.eic-flexible-sections-container .section-content .widget,
.eic-flexible-sections-container .section-content .eic-offre-card,
.eic-flexible-sections-container .section-content .eic-offre-stage-widget,
.eic-flexible-sections-container
  .section-content
  .eic-offres-stage-carousel-widget {
  margin-bottom: 1.5rem;
}

.eic-flexible-sections-container .section-content .widget:last-child,
.eic-flexible-sections-container .section-content .eic-offre-card:last-child,
.eic-flexible-sections-container
  .section-content
  .eic-offre-stage-widget:last-child,
.eic-flexible-sections-container
  .section-content
  .eic-offres-stage-carousel-widget:last-child {
  margin-bottom: 0;
}

/* Nested text content */
.eic-flexible-sections-container .section-content p,
.eic-flexible-sections-container .section-content ul,
.eic-flexible-sections-container .section-content ol {
  margin-bottom: 1rem;
}

.eic-flexible-sections-container .section-content p:last-child,
.eic-flexible-sections-container .section-content ul:last-child,
.eic-flexible-sections-container .section-content ol:last-child {
  margin-bottom: 0;
}

/* Nested headings */
.eic-flexible-sections-container .section-content h1,
.eic-flexible-sections-container .section-content h2,
.eic-flexible-sections-container .section-content h3,
.eic-flexible-sections-container .section-content h4,
.eic-flexible-sections-container .section-content h5,
.eic-flexible-sections-container .section-content h6 {
  margin-top: 0;
  margin-bottom: 0;
}

.eic-flexible-sections-container .section-header h1,
.eic-flexible-sections-container .section-header h2,
.eic-flexible-sections-container .section-header h3,
.eic-flexible-sections-container .section-header h4,
.eic-flexible-sections-container .section-header h5,
.eic-flexible-sections-container .section-header h6 {
  margin-bottom: 5px;
}

.eic-flexible-sections-container .section-content h1:first-child,
.eic-flexible-sections-container .section-content h2:first-child,
.eic-flexible-sections-container .section-content h3:first-child,
.eic-flexible-sections-container .section-content h4:first-child,
.eic-flexible-sections-container .section-content h5:first-child,
.eic-flexible-sections-container .section-content h6:first-child {
  margin-top: 0;
}

/**
 * RESPONSIVE DESIGN
 * 
 * Mobile-first responsive adjustments for optimal display across devices.
 */
@media (max-width: 768px) {
  .eic-flexible-sections-container .section-description {
    margin-top: 0;
  }
}

/* Small mobile adjustments */
@media (max-width: 479px) {
  .eic-flexible-sections-container .sections-content {
    padding: 20px 5px;
  }

  .eic-flexible-sections-container .section-description {
    margin-bottom: 30px;
  }

  .eic-flexible-sections-container .sections-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }

  .eic-flexible-sections-container .sections-content {
    gap: 2rem; /* Tighter spacing on mobile */
  }

  .eic-flexible-sections-container .content-section:not(:last-child) {
    padding-bottom: 2rem;
  }

  .eic-flexible-sections-container .section-header {
    margin-bottom: 1rem;
  }

  .eic-flexible-sections-container .sections-main-subtitle {
    width: fit-content;
  }

  .eic-flexible-sections-container .sections-title-container {
    flex-direction: column;
    align-items: center;
  }
}

/* Large mobile and tablet */
@media (min-width: 480px) and (max-width: 767px) {
  .eic-flexible-sections-container .sections-title-container {
    gap: 1.5rem;
  }
}

/**
 * SPECIAL STATES AND MODIFIERS
 */

/* Empty section handling */
.eic-flexible-sections-container .content-section:empty {
  display: none;
}

/* Section without header */
.eic-flexible-sections-container
  .content-section
  .section-header:empty
  + .section-content {
  margin-top: 0;
}

/* Single section layout (no borders) */
.eic-flexible-sections-container .sections-content .content-section:only-child {
  border-bottom: none;
  padding-bottom: 0;
}

/**
 * ACCESSIBILITY AND INTERACTION
 */

/* Focus styles for keyboard navigation */
.eic-flexible-sections-container .section-content a:focus,
.eic-flexible-sections-container .section-content button:focus,
.eic-flexible-sections-container .section-content input:focus,
.eic-flexible-sections-container .section-content select:focus,
.eic-flexible-sections-container .section-content textarea:focus {
  outline: 2px solid #051d40;
  outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .eic-flexible-sections-container * {
    transition: none !important;
    animation: none !important;
  }
}

/**
 * PRINT STYLES
 */

@media print {
  .eic-flexible-sections-container {
    page-break-inside: avoid;
    margin: 0 0 1cm 0;
  }

  .eic-flexible-sections-container .sections-header {
    border-bottom: 1px solid #000;
    margin-bottom: 1cm;
    padding-bottom: 0.5cm;
  }

  .eic-flexible-sections-container .sections-main-title {
    font-size: 18pt;
    color: #000;
  }

  .eic-flexible-sections-container .sections-main-subtitle {
    font-size: 12pt;
    color: #333;
  }

  .eic-flexible-sections-container .content-section {
    page-break-inside: avoid;
    margin-bottom: 1cm;
  }

  .eic-flexible-sections-container .content-section:not(:last-child) {
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5cm;
  }

  .eic-flexible-sections-container .section-title {
    font-size: 14pt;
    color: #000;
  }

  .eic-flexible-sections-container .section-description {
    font-size: 10pt;
    color: #333;
  }
}

/**
 * WPBAKERY PAGE BUILDER INTEGRATION
 * 
 * Ensure the widget works well within WPBakery containers.
 */

/* WPBakery container integration */
.vc_row .eic-flexible-sections-container,
.vc_column .eic-flexible-sections-container {
  width: 100%;
}

/* WPBakery editing mode adjustments */
.vc_element .eic-flexible-sections-container {
  min-height: 50px;
  border: 1px dashed #ddd;
  position: relative;
}

.vc_element .eic-flexible-sections-container:before {
  content: "EIC Flexible Sections";
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  color: #666;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 10;
}