/* Learnivia-2 — responsive + scroll polish */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height, 72px);
}

body {
    -webkit-overflow-scrolling: touch;
    overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Cross-page fixes from UI audit */

.about .values-area,
.values-area {
    margin-top: 4rem !important;
}

.about .footer,
.learnivia-footer + .footer,
.footer {
    margin-top: 3rem !important;
}

.learnivia-blog {
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.stories-grid {
    width: min(1180px, 92%) !important;
    margin: 0 auto !important;
}

.blog.css .author-avatar,
.author-avatar {
    background: var(--lv-teal, #39A6A3) !important;
}

.donate-hero {
    min-height: 0 !important;
    padding-top: calc(var(--nav-height, 72px) + 2rem) !important;
}

.signin-page,
.signup-page {
    margin-top: var(--nav-height, 72px) !important;
    padding-top: 2rem !important;
}

.signin-card,
.signup-card {
    border-radius: 1.25rem !important;
}

.next-button,
.message-button {
    text-decoration: none !important;
}

.faq-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    color: rgba(255, 249, 242, 0.9);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.faq-back:hover {
    color: #fff;
}

/* Override page CSS that hides nav/auth on mobile */
@media (max-width: 900px) {
    .top .index-1,
    .top .involve-1,
    .nav-main .index-1,
    .nav-main .involve-1 {
        display: inline-flex !important;
    }

    .nav-actions .signup-button {
        display: inline-flex !important;
    }
}

.faq-with-nav .faq-header {
    padding-top: calc(var(--nav-height, 72px) + 1.5rem);
}

.faq-with-nav .faq-back {
    display: none;
}

/* Parent volunteer section layout */
.Volunteer-content {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.1fr) !important;
    gap: 2rem 2.5rem !important;
    width: min(1180px, 92%) !important;
    margin-inline: auto !important;
    align-items: start !important;
}

.Volunteer-cards {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 1.25rem !important;
}

.Volunteer-item {
    position: relative !important;
    margin: 0 !important;
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    padding: 1.25rem !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(23, 50, 77, 0.08) !important;
    background: #fff !important;
}

.Volunteer-image img {
    width: 100% !important;
    max-height: 160px !important;
    object-fit: cover !important;
    border-radius: 0.75rem !important;
}

.learning-card .btn-primary,
.register-button,
.share-your-story-button,
.see-more-button,
.Volunteer-button {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

a.register-button {
    width: auto !important;
    min-width: 120px !important;
}

.space .for-parents,
.space .for-educator,
.front2 .for-parents,
.front2 .for-educator {
    position: static !important;
    margin: 0.5rem 0 0 !important;
    display: inline-flex !important;
}

.space .for-parents,
.front2 .for-parents {
    border-color: rgba(23, 50, 77, 0.25) !important;
    color: var(--lv-navy, #17324D) !important;
    background: rgba(255, 252, 248, 0.85) !important;
}

/* FAQ help center — full-bleed header band */
.faq-with-nav .faq-header {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.faq-with-nav .faq-header .faq-container {
    width: min(1150px, 92%) !important;
    margin-inline: auto !important;
}

/* Stories hero — center content under unified nav */
.hero-stories {
    margin-top: var(--nav-height, 72px) !important;
    padding: 3rem clamp(1.25rem, 5vw, 4rem) 2.5rem !important;
    text-align: center !important;
}

.hero-stories .community-text,
.hero-stories .Learnivia-Stories-text,
.hero-stories .Learnivia-stories-text,
.hero-stories .Learnivia-stories-world,
.hero-stories .Learnivia-Stories-world {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.hero-stories .Learnivia-stories-world,
.hero-stories .Learnivia-Stories-world {
    width: min(640px, 92%) !important;
    line-height: 1.6 !important;
}

.hero-stories .share-your-story-button {
    margin-top: 1.25rem !important;
}

/* Page heroes — consistent nav offset */
.workshops-hero,
.debate-hero,
.tutor-hero,
.partnerships-hero,
.become-tutor-hero {
    margin-top: var(--nav-height, 72px) !important;
}

.workshops-hero {
    color: #fff !important;
    background-color: #2c5c96 !important;
    min-height: 420px !important;
    height: auto !important;
    padding: 3rem clamp(1.25rem, 5vw, 4rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.workshops-hero-text,
.workshops-hero .join-dialogue,
.workshops-hero-text * {
    color: #fff !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: min(800px, 92%) !important;
    padding-top: 0 !important;
    text-align: center !important;
}

.workshops-hero .join-dialogue {
    width: min(640px, 92%) !important;
    line-height: 1.6 !important;
    opacity: 0.95 !important;
}

.workshops-hero .signup2-button {
    margin: 1.25rem auto 0 !important;
}

.tutor-hero {
    background-image: url("image_1.jpg/teaching.webp") !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Neutralize legacy absolute nav rules from page CSS */
body.page .top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

body.page .explore-menu {
    position: fixed !important;
    top: var(--nav-height, 72px) !important;
}

/* Polish.css still uses 75px in some heroes */
.space,
.front2,
.polish-hero {
    padding-top: calc(var(--nav-height, 72px) + 2rem) !important;
}