/* ========================================
 * MODULE PAGES CONTENT NORMALIZATION
 * 
 * Purpose: Fix oversized module page titles and images in XCenter module
 * Loaded conditionally for XCenter module only ($xoops_dirname == 'xcenter')
 * Uses V3 design tokens and matches existing specificity patterns
 * 
 * Root Cause: _compat-foundation-grid.css forces images to 400-680px via clamp()
 * Solution: Ultra-high specificity overrides to respect HTML width attributes
 * ======================================== */

/* Module Page H1 Normalization - Larger title size */
#xoXcenter .xcenter-content__body h1 {
  font-size: var(--text-3xl) !important; /* 30px - larger title */
  line-height: 1.3 !important;
  margin-bottom: var(--spacing-md) !important;
  color: var(--color-medical-blue) !important;
  font-family: var(--font-family-bold) !important;
  text-align: center !important;
}

/* Image Size Enforcement - Specific Attribute Selectors
 * Overrides _compat-foundation-grid.css clamp(400px, 95%, 600px) rules
 * Respects HTML width attributes for common image sizes
 */
#xoXcenter .xcenter-content__body img[width="75"] {
  width: 75px !important;
  max-width: 75px !important;
  height: auto !important;
  object-fit: contain !important;
}

#xoXcenter .xcenter-content__body img[width="200"] {
  width: 200px !important;
  max-width: 200px !important;
  height: auto !important;
  object-fit: contain !important;
}

#xoXcenter .xcenter-content__body img[width="275"] {
  width: 275px !important;
  max-width: 275px !important;
  height: auto !important;
  object-fit: contain !important;
}

#xoXcenter .xcenter-content__body img[width="300"] {
  width: 300px !important;
  max-width: 300px !important;
  height: auto !important;
  object-fit: contain !important;
}

#xoXcenter .xcenter-content__body img[width="430"] {
  width: 430px !important;
  max-width: 430px !important;
  height: auto !important;
  object-fit: contain !important;
}

#xoXcenter .xcenter-content__body img[width="500"] {
  width: 500px !important;
  max-width: 500px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Mobile Responsive Preservation - Exact breakpoint matching Foundation */
@media only screen and (max-width: 40.0625em) {
  #xoXcenter .xcenter-content__body img[width="75"],
  #xoXcenter .xcenter-content__body img[width="200"],
  #xoXcenter .xcenter-content__body img[width="275"],
  #xoXcenter .xcenter-content__body img[width="300"],
  #xoXcenter .xcenter-content__body img[width="430"],
  #xoXcenter .xcenter-content__body img[width="500"] {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
  #xoXcenter .xcenter-content__body h1 {
    font-size: var(--text-xl) !important; /* 20px on mobile */
    line-height: 1.2 !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  #xoXcenter .xcenter-content__body img[width="75"],
  #xoXcenter .xcenter-content__body img[width="200"],
  #xoXcenter .xcenter-content__body img[width="275"],
  #xoXcenter .xcenter-content__body img[width="300"],
  #xoXcenter .xcenter-content__body img[width="430"],
  #xoXcenter .xcenter-content__body img[width="500"] {
    border: 1px solid currentColor !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  #xoXcenter .xcenter-content__body img[width="75"],
  #xoXcenter .xcenter-content__body img[width="200"],
  #xoXcenter .xcenter-content__body img[width="275"],
  #xoXcenter .xcenter-content__body img[width="300"],
  #xoXcenter .xcenter-content__body img[width="430"],
  #xoXcenter .xcenter-content__body img[width="500"] {
    transition: none !important;
  }
}

/* Print Media Support */
@media print {
  #xoXcenter .xcenter-content__body img[width="75"],
  #xoXcenter .xcenter-content__body img[width="200"],
  #xoXcenter .xcenter-content__body img[width="275"],
  #xoXcenter .xcenter-content__body img[width="300"],
  #xoXcenter .xcenter-content__body img[width="430"],
  #xoXcenter .xcenter-content__body img[width="500"] {
    max-width: 250px !important;
    width: auto !important;
    height: auto !important;
    page-break-inside: avoid !important;
  }
}

/* ========================================
 * TESTIMONIALS SECTION OPTIMIZATION
 * 
 * Purpose: Fix oversized testimonial images and text alignment in Fitbit testimonials
 * Root Cause: _compat-foundation-grid.css forces 300x200px images to 400-680px range
 * Solution: Ultra-high specificity overrides for testimonial-specific image sizing
 * ======================================== */

/* Testimonial Image Size Enforcement - Override compatibility layer */
#xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbright img,
#xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbleft img {
  max-width: 120px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 auto !important;
}

/* Testimonial Text Alignment & Typography */
#xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbright p,
#xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbleft p {
  text-align: justify !important;
  line-height: 1.6 !important;
  margin-bottom: var(--spacing-sm) !important;
  font-style: italic !important;
  color: var(--color-gray-800) !important;
}

/* Testimonial Author Attribution */
#xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbright p:last-child,
#xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbleft p:last-child {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--color-medical-blue) !important;
  text-align: left !important;
  margin-top: var(--spacing-md) !important;
}

/* Testimonial Section Heading */
#xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) h2 {
  font-size: var(--text-2xl) !important;
  color: var(--color-medical-blue) !important;
  text-align: center !important;
  margin-bottom: var(--spacing-lg) !important;
  font-family: var(--font-family-bold) !important;
}

/* Mobile Responsive Testimonials - Foundation breakpoint */
@media only screen and (max-width: 40.0625em) {
  #xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbright img,
  #xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbleft img {
    max-width: 100px !important;
    margin-bottom: var(--spacing-sm) !important;
  }
  
  #xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbright p,
  #xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbleft p {
    text-align: left !important;
    font-size: 0.95rem !important;
  }
}

/* High Contrast Mode Support for Testimonials */
@media (prefers-contrast: high) {
  #xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbright img,
  #xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbleft img {
    border: 2px solid currentColor !important;
  }
}

/* Reduced Motion Support for Testimonials */
@media (prefers-reduced-motion: reduce) {
  #xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbright img,
  #xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbleft img {
    transition: none !important;
  }
}

/* Print Media Support for Testimonials */
@media print {
  #xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbright img,
  #xoXcenter .xcenter-content__body .row:has(h2:contains("Wat anderen zeggen")) .blockbleft img {
    max-width: 80px !important;
    page-break-inside: avoid !important;
  }
}

/* ========================================
 * GLOBAL COLUMN SPACING FIX
 * 
 * Purpose: Add visible whitespace between .medium-6 columns in XCenter content
 * Root Cause: High-specificity overrides remove Foundation grid gutters
 * Solution: Use margins to create consistent 2% gap between columns
 * Scope: Applies to ALL pages with .medium-6 columns in XCenter
 * ======================================== */

/* Global Column Spacing - Create visible gap between columns */
#xoXcenter .xcenter-content__body .row .medium-6.columns {
  margin-left: 2% !important;
  margin-right: 2% !important;
  width: 46% !important;
  box-sizing: border-box !important;
  float: left !important;
}


/* Mobile Responsive Override - Foundation breakpoint */
@media only screen and (max-width: 40.0625em) {
  #xoXcenter .xcenter-content__body .row .medium-6.columns {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: var(--spacing-md, 1rem) !important;
  }
}

/* High Contrast Mode Support for Column Spacing */
@media (prefers-contrast: high) {
  #xoXcenter .xcenter-content__body .row .medium-6.columns {
    border-left: 1px solid currentColor !important;
  }
  
  #xoXcenter .xcenter-content__body .row .medium-6.columns:first-child {
    border-left: none !important;
  }
}

/* Print Media Support for Column Spacing */
@media print {
  #xoXcenter .xcenter-content__body .row .medium-6.columns {
    margin-left: 0.5% !important;
    margin-right: 0.5% !important;
    width: 49% !important;
    page-break-inside: avoid !important;
  }
}

/* ========================================
 * POST-COVID ZIEKTELASTMETER TEXT ALIGNMENT FIX
 * 
 * Purpose: Override center alignment for Post-Covid section text
 * Root Cause: <center> tag forces center alignment on all contained content
 * Solution: Target specific section with text-align: left !important
 * Scope: Only affects Post-Covid Ziektelastmeter page section
 * ======================================== */

/* Post-Covid Section Text Alignment - Override center tag */
#xoXcenter .xcenter-content__body .row .medium-6.columns .blockbright:has(h2:contains("Last ná Corona infectie?")) {
  text-align: left !important;
}

#xoXcenter .xcenter-content__body .row .medium-6.columns .blockbright:has(h2:contains("Last ná Corona infectie?")) center {
  text-align: left !important;
}

/* Mobile Responsive Support */
@media only screen and (max-width: 40.0625em) {
  #xoXcenter .xcenter-content__body .row .medium-6.columns .blockbright:has(h2:contains("Last ná Corona infectie?")) center {
    text-align: left !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  #xoXcenter .xcenter-content__body .row .medium-6.columns .blockbright:has(h2:contains("Last ná Corona infectie?")) {
    border-left: 2px solid currentColor !important;
  }
}

/* Print Media Support */
@media print {
  #xoXcenter .xcenter-content__body .row .medium-6.columns .blockbright:has(h2:contains("Last ná Corona infectie?")) {
    text-align: left !important;
  }
}

/* ========================================
 * FIND MY FYSIO PAGE FIXES - COMPREHENSIVE OVERRIDE SYSTEM
 * 
 * Purpose: Fix 7-layer CSS conflict system causing layout chaos
 * Root Cause: Inline styles + Foundation Grid + Compatibility Layer conflicts
 * Solution: Ultra-high specificity overrides for all conflicting systems
 * Scope: Only affects Find My Fysio page in XCenter module
 * ======================================== */

/* ========================================
 * NUCLEAR OVERRIDE: Inline Style Conflict Resolution
 * Overrides: <style><!-- h2, p, .curavista-container.white-class p, #map-canvas, .map-container { text-align: center; } -->
 * Priority: Highest - Must override inline styles in DOM
 * ======================================== */

/* Override inline center alignment for Find My Fysio page */
html body #xoXcenter .xcenter-content__body h2,
html body #xoXcenter .xcenter-content__body p,
html body #xoXcenter .xcenter-content__body .curavista-container.white-class p,
html body #xoXcenter .xcenter-content__body .blockbright,
html body #xoXcenter .xcenter-content__body .blockbleft,
html body #xoXcenter .xcenter-content__body .zoeken p,
html body #xoXcenter .xcenter-content__body .searchresults,
html body #xoXcenter .xcenter-content__body .searchresults h2,
html body #xoXcenter .xcenter-content__body .searchresults h6,
html body #xoXcenter .xcenter-content__body .searchcontainer,
html body #xoXcenter .xcenter-content__body .searchcontainercontent {
  text-align: left !important;
}

/* ========================================
 * FYSIOTOPICS TEXT ALIGNMENT FIX
 * 
 * Purpose: Fix FysioTopics description text alignment and readability
 * Root Cause: Inline center alignment breaks paragraph readability
 * Solution: Ultra-high specificity override for FysioTopics section
 * Scope: Only affects FysioTopics section in Find My Fysio page
 * ======================================== */

/* FysioTopics Section Text Alignment Fix */
html body #xoXcenter .xcenter-content__body .row:has(.blockbright:contains("FysioTopics")) .blockbright,
html body #xoXcenter .xcenter-content__body .row:has(.blockbright:contains("FysioTopics")) .blockbright p {
  text-align: left !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}

/* FysioTopics Logo Image Fix */
html body #xoXcenter .xcenter-content__body .row:has(.blockbright:contains("FysioTopics")) .blockbleft img {
  max-width: 300px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* ========================================
 * FYSIOTOPICS SPECIFIC OVERRIDE - FALLBACK SOLUTION
 * 
 * Purpose: Alternative selector for browsers that don't support :has()
 * Root Cause: :has() selector has limited browser support
 * Solution: Use adjacent sibling selector as fallback
 * ======================================== */

/* Fallback for browsers without :has() support */
html body #xoXcenter .xcenter-content__body .row .medium-6.columns .blockbright h2:contains("FysioTopics") + *,
html body #xoXcenter .xcenter-content__body .row .medium-6.columns .blockbright h2:contains("FysioTopics") ~ * {
  text-align: left !important;
  line-height: 1.6 !important;
}

/* Alternative: Target by specific content pattern */
html body #xoXcenter .xcenter-content__body .row .medium-6.columns .blockbright:has(h2:contains("FysioTopics")) {
  text-align: left !important;
}

html body #xoXcenter .xcenter-content__body .row .medium-6.columns .blockbright:has(h2:contains("FysioTopics")) p {
  text-align: left !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}

/* ========================================
 * FOUNDATION GRID CONFLICT RESOLUTION
 * Overrides: _compat-foundation-grid.css aggressive image sizing
 * Priority: High - Must override compatibility layer
 * ======================================== */

/* Override Foundation Grid image sizing conflicts */
html body #xoXcenter .xcenter-content__body .blockbright img,
html body #xoXcenter .xcenter-content__body .blockbleft img {
  max-width: 300px !important; /* Respect original image sizes */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* ========================================
 * MAP CANVAS RESPONSIVE BEHAVIOR FIX
 * Overrides: Inline style conflicts and display issues
 * Priority: High - Critical for search functionality
 * ======================================== */

/* Map Canvas Layout Fix - Override all conflicting systems */
html body #xoXcenter .xcenter-content__body #map-canvas {
  display: block !important;
  width: 100% !important;
  height: 400px !important;
  margin-bottom: var(--spacing-md, 1rem) !important;
  text-align: left !important;
}

/* Map Container Layout Fix */
html body #xoXcenter .xcenter-content__body .map-container {
  display: none !important; /* Hidden by default, shown via JavaScript */
  width: 100% !important;
  text-align: left !important;
  margin-bottom: var(--spacing-md, 1rem) !important;
}

/* ========================================
 * SEARCH RESULTS LAYOUT OPTIMIZATION
 * Overrides: 93 hidden containers and JavaScript dependencies
 * Priority: High - Critical for search functionality
 * ======================================== */

/* Search Container Layout Fix */
html body #xoXcenter .xcenter-content__body .searchcontainer {
  padding: var(--spacing-sm, 0.5rem) !important;
  margin: 0 !important;
  width: auto !important;
  text-align: left !important;
  display: none !important; /* Hidden by default, shown via JavaScript */
}

/* Search Results Container Layout */
html body #xoXcenter .xcenter-content__body .searchresults {
  width: 100% !important;
  float: none !important;
  margin-bottom: var(--spacing-lg, 2rem) !important;
  text-align: left !important;
}

/* Corona Marker Location Styling */
html body #xoXcenter .xcenter-content__body .corona-marker-location {
  width: 260px !important;
  margin: 15px auto !important;
  border-radius: 20px !important;
  border: 1px solid #cdcdcd !important;
  text-align: center !important;
  max-width: 100% !important;
  cursor: pointer !important;
  text-align: left !important;
}

/* ========================================
 * FORM ELEMENTS AND ACCESSIBILITY FIXES
 * Overrides: Inline style conflicts and missing accessibility
 * Priority: Medium - Improve usability and accessibility
 * ======================================== */

/* Search Input Styling */
html body #xoXcenter .xcenter-content__body .zoeken input {
  width: 280px !important;
  margin: 0 auto 20px auto !important;
  display: block !important;
  text-align: left !important;
}

/* Form Label and Description */
html body #xoXcenter .xcenter-content__body .zoeken p {
  float: none !important;
  margin-bottom: 10px !important;
  margin-top: 3px !important;
  margin-right: 10px !important;
  text-align: left !important;
  display: block !important;
}

/* ========================================
 * RESPONSIVE BEHAVIOR PRESERVATION
 * Overrides: Foundation breakpoint conflicts
 * Priority: Medium - Maintain mobile compatibility
 * ======================================== */

/* Mobile Responsive Support - Foundation breakpoint */
@media only screen and (max-width: 40.0625em) {
  html body #xoXcenter .xcenter-content__body #map-canvas {
    height: 300px !important;
    margin-bottom: var(--spacing-sm, 0.5rem) !important;
  }
  
  html body #xoXcenter .xcenter-content__body .searchcontainer {
    padding: var(--spacing-xs, 0.25rem) !important;
  }
  
  html body #xoXcenter .xcenter-content__body .zoeken input {
    width: 90% !important;
    margin: 0 auto 15px auto !important;
  }
  
  html body #xoXcenter .xcenter-content__body .corona-marker-location {
    width: 90% !important;
    margin: 10px auto !important;
  }
}

/* Tablet Layout Support */
@media only screen and (min-width: 40.0625em) and (max-width: 64em) {
  html body #xoXcenter .xcenter-content__body #map-canvas {
    height: 350px !important;
  }
}

/* Desktop Layout Support */
@media only screen and (min-width: 64.0625em) {
  html body #xoXcenter .xcenter-content__body #map-canvas {
    height: 500px !important;
  }
}

/* ========================================
 * ACCESSIBILITY AND HIGH CONTRAST SUPPORT
 * Priority: Medium - Ensure WCAG compliance
 * ======================================== */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  html body #xoXcenter .xcenter-content__body .searchcontainer {
    border-left: 2px solid currentColor !important;
  }
  
  html body #xoXcenter .xcenter-content__body .corona-marker-location {
    border: 2px solid currentColor !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  html body #xoXcenter .xcenter-content__body .corona-marker-location {
    transition: none !important;
  }
}

/* ========================================
 * PRINT MEDIA SUPPORT
 * Priority: Low - Print optimization
 * ======================================== */

@media print {
  html body #xoXcenter .xcenter-content__body .searchresults,
  html body #xoXcenter .xcenter-content__body .searchresults h2,
  html body #xoXcenter .xcenter-content__body .searchresults h6 {
    text-align: left !important;
  }
  
  html body #xoXcenter .xcenter-content__body #map-canvas {
    display: none !important;
  }
  
  html body #xoXcenter .xcenter-content__body .map-container {
    display: none !important;
  }
}