/* ==========================================================================
   Nuclear Clean Air Energy — Responsive Fixes
   Breakpoint reference (Bootstrap 5):
     xs  < 576px
     sm  ≥ 576px
     md  ≥ 768px
     lg  ≥ 992px
     xl  ≥ 1200px
     xxl ≥ 1400px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navbar — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .navbar-logo-img  { height: 52px; }
    .footer-logo-img  { height: 56px; }
}

@media (max-width: 991.98px) {
    .navbar-custom .navbar-collapse {
        background: rgba(247, 245, 239, 0.98);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        padding: 1rem;
        margin-top: 0.75rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    }

    .navbar-nav-custom .nav-link {
        color: var(--color-text-secondary) !important;
        padding: 0.65rem 0.75rem !important;
    }

    .navbar-nav-custom .nav-link:hover,
    .navbar-nav-custom .nav-link.active {
        color: var(--color-accent-cyan) !important;
        background: var(--color-glow-cyan);
    }

    .nav-cta {
        padding-top: 0.5rem;
        border-top: 1px solid var(--color-border);
        margin-top: 0.25rem;
    }
}

/* --------------------------------------------------------------------------
   Hero Section — stack on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .hero-section {
        padding-top: 100px;
        min-height: auto;
        padding-bottom: 4rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-actions .btn-primary-custom,
    .hero-actions .btn-outline-custom {
        width: 100%;
        justify-content: center;
    }

    .hero-stats {
        gap: 1.25rem;
        margin-top: 2.5rem;
        padding-top: 2rem;
    }

    .hero-stat-value {
        font-size: 1.75rem;
    }

    .hero-float-card {
        position: static;
        margin-top: 1rem;
    }

    .hero-visual {
        margin-top: 3rem;
    }
}

/* --------------------------------------------------------------------------
   Section padding — reduce on smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    :root {
        --section-padding-y: 4rem;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --section-padding-y: 3rem;
    }
}

/* --------------------------------------------------------------------------
   Cards — full width on xs
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .card-custom {
        padding: 1.5rem;
    }

    .stat-block {
        padding: 1.5rem 1rem;
    }
}

/* --------------------------------------------------------------------------
   CTA Banner — tighter padding on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .cta-banner {
        padding: 3rem 1.5rem;
    }

    .cta-banner .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-banner .btn-primary-custom,
    .cta-banner .btn-outline-custom {
        width: 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Timeline — full width on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .timeline {
        padding-left: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Partner strip — center & wrap nicely
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .partner-strip {
        gap: 0.75rem;
    }

    .partner-logo-item {
        padding: 0.75rem 1.25rem;
        font-size: 0.82rem;
    }
}

/* --------------------------------------------------------------------------
   Footer — stack columns on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-description {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Typography scale — finer control on very small screens
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Page hero (inner pages) — padding fix
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .page-hero {
        padding-top: 7rem;
        padding-bottom: 4rem;
    }
}

/* --------------------------------------------------------------------------
   Accordion — reduce padding
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .accordion-custom .accordion-button {
        padding: 1rem;
        font-size: 0.95rem;
    }

    .accordion-custom .accordion-body {
        padding: 0 1rem 1rem;
    }
}