/* Fluid Design Overrides for TestAutism.ro */
/* This file overrides Bootstrap's container constraints for a more fluid, edge-to-edge design */

/* ========================================
   GLOBAL CONTAINER OVERRIDES
   ======================================== */

/* Override Bootstrap's .container class for fluid width */
.container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
}

/* Smaller padding on mobile */
@media (max-width: 576px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Slightly more padding on tablets */
@media (min-width: 768px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Comfortable padding on desktop while maintaining fluid width */
@media (min-width: 1200px) {
    .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ========================================
   SPECIFIC CONTAINER OVERRIDES
   ======================================== */

/* Features container - full width with minimal padding */
.features-container {
    max-width: 100% !important;
    padding: 20px 16px !important;
}

/* Test details container styling removed - uses custom-style.css max-width: 1200px */

/* FAQ section - fluid width */
.faq-section.container {
    max-width: 100% !important;
}

/* Services container - edge to edge */
.services-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 30px 16px !important;
}

/* Test actual container - full width for better test experience */
.test-actual-container {
    max-width: 100% !important;
    padding: 20px 16px !important;
}

/* Clinician section - fluid */
.clinician-section.container {
    max-width: 100% !important;
}

/* Scoring container - centered but fluid */
.scoring-container {
    max-width: 100% !important;
    padding: 0 16px !important;
}

/* ========================================
   NAVIGATION CONTAINERS
   ======================================== */

/*
   IMPORTANT: .quick-nav-container and .progress-container are NOT regular content containers.
   They are specialized navigation UI elements that should maintain their original constraints
   to prevent overflow and maintain proper functionality.
   These are intentionally EXCLUDED from fluid width treatment.
*/

/* ========================================
   SECTION SPACING ADJUSTMENTS
   ======================================== */

/* Reduce excessive margins on sections */
.my-5 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

@media (max-width: 768px) {
    .my-5 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Initial section - full width */
.initial-section {
    padding: 20px 16px !important;
    max-width: 100% !important;
}

/* ========================================
   CONTENT READABILITY CONSTRAINTS
   ======================================== */

/* For text-heavy content, add optional readable width */
.readable-content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Question cards should have some breathing room */
.question-card {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   MOBILE FAB CONTAINER
   ======================================== */

.mobile-fab-container {
    padding: 0 !important;
    width: auto !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Full width utility */
.w-100-fluid {
    width: 100% !important;
    max-width: 100% !important;
}

/* Edge to edge section */
.edge-to-edge {
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

@media (min-width: 768px) {
    .edge-to-edge {
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ========================================
   HERO/HEADER SECTIONS
   ======================================== */

/* Main content wrapper */
#main-content {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Ultra-wide screens - add some max-width for readability */
@media (min-width: 1920px) {
    /* Text content gets max-width for readability (75ch optimal line length) */
    p, .text-content, .faq-answer, .description, .question-text, .accordion-body {
        max-width: min(75ch, 1200px);
        margin-left: auto;
        margin-right: auto;
    }

    /* But containers stay fluid */
    .container,
    .features-container,
    .test-details-container,
    .services-container {
        max-width: 100% !important;
    }
}

/* ========================================
   BOOTSTRAP GRID ADJUSTMENTS
   ======================================== */

/* Remove container negative margins that cause horizontal scroll */
.row {
    margin-left: -8px !important;
    margin-right: -8px !important;
}

.row > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

@media (min-width: 768px) {
    .row {
        margin-left: -12px !important;
        margin-right: -12px !important;
    }

    .row > [class*="col-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ========================================
   CARD AND COMPONENT SPACING
   ======================================== */

/* Cards should have minimal but consistent padding */
.card {
    padding: 16px !important;
}

.card-body {
    padding: 16px !important;
}

@media (max-width: 576px) {
    .card,
    .card-body {
        padding: 12px !important;
    }
}

/* ========================================
   FINAL OVERRIDES
   ======================================== */

/* Ensure no horizontal scroll */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Main wrapper should be full width */
body > .container:first-child {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Remove any max-width constraints from main sections */
/* Removed .test-details-container to preserve 1200px centered design */
.features-container,
.faq-section,
.services-container,
.clinician-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}