/* Bridge to Wealth — Mobile-first responsive layer */

:root {
    --section-pad-y: clamp(3rem, 8vw, 7.5rem);
    --page-pad-x: clamp(1rem, 4vw, 2.5rem);
    --nav-offset: calc(4.5rem + env(safe-area-inset-top, 0px));
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--nav-offset);
}

body.menu-open {
    overflow: hidden;
    touch-action: none;
}

/* Mobile menu: must stay display:none until .menu-open (JS also toggles Tailwind hidden) */
#mobile-menu-panel:not(.menu-panel-open),
#mobile-menu-backdrop:not(.menu-backdrop-open) {
    display: none !important;
}

@media (min-width: 1024px) {
    #mobile-menu-panel,
    #mobile-menu-backdrop {
        display: none !important;
    }
}

/* Responsive section spacing (replaces fixed 120px gaps on small screens) */
.py-section-gap,
.section-pad {
    padding-top: var(--section-pad-y) !important;
    padding-bottom: var(--section-pad-y) !important;
}

/* Fluid display headings */
.text-fluid-display {
    font-size: clamp(2rem, 8vw, 4rem);
    line-height: 1.1;
}

.text-fluid-hero {
    font-size: clamp(1.75rem, 7vw, 4rem);
    line-height: 1.15;
}

.text-fluid-h2 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    line-height: 1.2;
}

.text-balance {
    text-wrap: balance;
}

/* Stat / label readability on narrow screens */
.stat-card {
    padding: clamp(1rem, 4vw, 2rem);
}

.stat-value {
    font-size: clamp(1.75rem, 6vw, 3rem);
    line-height: 1.1;
}

.stat-label {
    font-size: clamp(0.625rem, 2.5vw, 0.875rem);
    letter-spacing: 0.08em;
    line-height: 1.35;
    word-break: break-word;
    hyphens: auto;
}

/* Touch-friendly controls */
@media (max-width: 1023px) {
    .btn-touch {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 639px) {
    .btn-stack-mobile {
        flex-direction: column !important;
        width: 100%;
        align-items: stretch !important;
    }

    .btn-stack-mobile > a,
    .btn-stack-mobile > button {
        width: 100%;
        text-align: center;
    }
}

@media (hover: none) {
    .group:hover {
        transform: none !important;
    }
}

footer {
    padding-bottom: calc(4rem + var(--safe-bottom));
}

/* Homepage hero — mobile layout (copy unchanged) */
#hero-section {
    padding-top: calc(5.5rem + env(safe-area-inset-top, 0px));
}

@media (min-width: 640px) {
    #hero-section {
        padding-top: calc(7rem + env(safe-area-inset-top, 0px));
    }
}

@media (min-width: 768px) {
    #hero-section {
        padding-top: calc(8rem + env(safe-area-inset-top, 0px));
    }
}

@media (max-width: 1023px) {
    #hero-section {
        min-height: auto;
        padding-bottom: clamp(2rem, 6vw, 4rem);
    }

    #hero-section .parallax-el,
    #hero-section .hero-visual {
        transform: none !important;
    }

    #hero-section .btn-stack-mobile > a {
        width: 100%;
    }

    #hero-section .hero-visual {
        padding-bottom: 2.5rem;
    }
}

@media (max-width: 639px) {
    #hero-section .inline-flex.items-center.gap-2.px-4 {
        max-width: 100%;
        font-size: 0.75rem;
    }

    #hero-section .tech-ornament {
        display: none !important;
    }

    #hero-section .hero-impact-badge {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin: 1rem auto 0;
    }

    #hero-section .rounded-\[40px\],
    #hero-section .rounded-\[32px\] {
        border-radius: 1.25rem;
    }
}

@media (min-width: 640px) {
    #hero-section .hero-impact-badge {
        left: auto;
        transform: none;
    }
}

/* Inner page heroes */
.page-hero-gradient,
#eduscholar-hero {
    padding-top: calc(6.5rem + env(safe-area-inset-top, 0px));
}

@media (max-width: 639px) {
    #eduscholar-hero h1 {
        font-size: clamp(1.625rem, 7vw, 2.5rem);
    }

    #eduscholar-hero .flex.flex-wrap {
        flex-direction: column;
        width: 100%;
    }

    #eduscholar-hero .flex.flex-wrap > a {
        width: 100%;
        text-align: center;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Cards & content blocks */
@media (max-width: 767px) {
    .glass-card {
        padding: clamp(1.25rem, 4vw, 2rem) !important;
    }

    .rounded-\[40px\],
    .rounded-\[48px\] {
        border-radius: 1.5rem !important;
    }

    .flex-row-mobile-col {
        flex-direction: column !important;
    }

    .gap-mobile-tight {
        gap: 1rem !important;
    }

    .mb-mobile-12 {
        margin-bottom: 3rem !important;
    }

    .p-mobile-6 {
        padding: 1.5rem !important;
    }
}

/* CTA sections */
@media (max-width: 639px) {
    .cta-box {
        padding: clamp(1.5rem, 5vw, 3rem) !important;
        border-radius: 1.5rem !important;
    }

    .cta-box h2 {
        font-size: clamp(1.375rem, 5vw, 2.25rem) !important;
    }
}

/* ITIS / value rows */
@media (max-width: 639px) {
    .value-row {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.25rem !important;
    }

    .value-row .font-display-xl {
        font-size: 2rem;
    }
}

/* Program / article icon rows */
.icon-content-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

@media (min-width: 768px) {
    .icon-content-row.md\:flex-row {
        flex-direction: row;
    }
}

@media (max-width: 639px) {
    .icon-content-row {
        flex-direction: column;
        align-items: stretch;
    }

    .icon-content-row .icon-wrap {
        align-self: flex-start;
    }
}

/* Footer */
@media (max-width: 767px) {
    footer .grid {
        gap: 2rem;
    }

    footer nav a {
        display: block;
        padding: 0.35rem 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Prevent horizontal scroll */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

.max-w-container-max-width {
    width: 100%;
    max-width: 1280px;
}

/* EduScholar FAQ */
details summary {
    -webkit-tap-highlight-color: transparent;
}

details summary::-webkit-details-marker {
    display: none;
}

/* Decorative blurs — scale down on mobile for performance */
@media (max-width: 767px) {
    .blur-decor-lg {
        width: 200px !important;
        height: 200px !important;
    }
}