/* ===================================================================
   LAYOUT FIXES FOR LARGE CTA TEXT AND CONTENT SECTIONS
   ================================================================= */

/* ===================================================================
   CONTAINER AND SPACING FIXES
   ================================================================= */

/* Ensure proper container behavior */
.max-w-7xl {
    max-width: 80rem;
}

.max-w-6xl {
    max-width: 72rem;
}

.max-w-4xl {
    max-width: 56rem;
}

/* Fix for large text responsiveness */
.large-cta-text {
    font-size: clamp(24px, 5vw, 48px);
    line-height: 1.2;
    word-wrap: break-word;
    hyphens: auto;
}

/* ===================================================================
   CONTENT SECTION SPECIFIC FIXES
   ================================================================= */

/* Main content area */
.content-section-main {
    min-height: 400px;
}

/* Sidebar improvements */
.content-sidebar {
    min-height: 300px;
}

.sidebar-title {
    font-size: clamp(24px, 3vw, 32px);
}

/* Progress bar positioning */
.progress-bar-container {
    align-self: stretch;
    min-height: 400px;
}

/* ===================================================================
   IMAGE CONTAINER FIXES
   ================================================================= */

/* Featured content image responsive */
.featured-content-image {
    width: 100%;
    height: auto;
    min-height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .featured-content-image {
        min-height: 320px;
    }
}

@media (min-width: 1024px) {
    .featured-content-image {
        min-height: 428px;
    }
}

/* ===================================================================
   GRID AND FLEXBOX FIXES
   ================================================================= */

/* Remove problematic grid layouts - but preserve content section grids */
.inline-grid:not([data-node-id="1586:31678"]) {
    display: block !important;
}

.grid-cols-\[max-content\]:not([data-node-id="1586:31678"]) {
    display: block !important;
}

/* Improve flex layouts */
.content-flex-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 1024px) {
    .content-flex-container {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* ===================================================================
   TYPOGRAPHY FIXES
   ================================================================= */

/* Ensure text doesn't overflow */
.content-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Heading spacing */
.content-heading {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: clamp(18px, 2.5vw, 24px);
}

/* ===================================================================
   FOOTER FIXES
   ================================================================= */

/* Footer positioning and spacing */
footer {
    position: relative;
    width: 100%;
    margin-top: auto;
    clear: both;
}

.footer-content {
    max-width: 100%;
    padding: 0 1rem;
}

.footer-logo {
    max-width: 200px;
    height: auto;
}

@media (min-width: 768px) {
    .footer-logo {
        max-width: 346px;
    }
}

/* ===================================================================
   MOBILE SPECIFIC FIXES
   ================================================================= */

@media (max-width: 767px) {
    /* Ensure no horizontal overflow */
    body, html {
        overflow-x: hidden;
    }

    /* Fix for mobile viewport */
    .mobile-container {
        width: 100%;
        max-width: 100vw;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* Large CTA text mobile */
    .large-cta-text {
        font-size: 24px;
        padding: 0 16px;
        text-align: center;
    }

    /* Content section mobile */
    .content-section-main,
    .content-sidebar {
        width: 100%;
        margin-bottom: 24px;
    }

    /* Remove fixed heights on mobile */
    .content-section-main,
    .content-sidebar {
        height: auto !important;
        min-height: auto !important;
    }

    /* Sidebar mobile */
    .sidebar-title {
        text-align: center;
        font-size: 24px;
    }

    /* Featured image mobile */
    .featured-content-image {
        height: 200px;
        width: 100%;
    }
}

/* ===================================================================
   TABLET SPECIFIC FIXES
   ================================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
    .large-cta-text {
        font-size: 36px;
        padding: 0 32px;
    }

    .content-section-main {
        margin-bottom: 24px;
    }

    .sidebar-title {
        text-align: center;
        font-size: 28px;
    }

    .featured-content-image {
        height: 320px;
    }
}

/* ===================================================================
   DESKTOP OPTIMIZATIONS
   ================================================================= */

@media (min-width: 1024px) {
    .large-cta-text {
        font-size: 48px;
    }

    .content-flex-container {
        align-items: flex-start;
    }

    .content-section-main {
        flex: 1 1 65%;
    }

    .content-sidebar {
        flex: 1 1 35%;
        max-width: 424px;
    }

    .sidebar-title {
        text-align: right;
        font-size: 32px;
    }
}

/* ===================================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================================= */

/* Focus states */
.content-section-main:focus-within,
.content-sidebar:focus-within {
    outline: 2px solid #83ff65;
    outline-offset: 4px;
}

/* High contrast support */
@media (prefers-contrast: high) {
    .content-section-main,
    .content-sidebar {
        border: 1px solid #83ff65;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}