/* =====================================================
   BrightSpots Mobile Stylesheet
   Loaded on all pages. Only activates on small screens.
   Desktop (>768px) is completely unaffected.
   ===================================================== */

/* ── Hamburger button (hidden on desktop) ── */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}
.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile dropdown menu (hidden by default) ── */
.nav-mobile-menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(44, 95, 141, 0.99);
    padding: 12px 20px 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    z-index: 99;
    list-style: none;
}
.nav-mobile-menu.open { display: block; }
.nav-mobile-menu li { border-bottom: 1px solid rgba(255,255,255,0.1); }
.nav-mobile-menu li:last-child { border-bottom: none; }
.nav-mobile-menu a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 13px 4px;
    font-size: 1em;
}
.nav-mobile-menu .nav-cta {
    color: white !important;
    font-weight: 700;
    background: none !important;
    padding: 13px 4px !important;
    border-radius: 0 !important;
}

/* ── Logo short/full variants ── */
.nav-logo .logo-short { display: none; }
.nav-logo .logo-full  { display: inline; }

/* =====================================================
   MOBILE BREAKPOINT — 768px and below
   ===================================================== */
@media (max-width: 768px) {

    /* Nav: hide desktop links, show hamburger + short logo */
    .nav-links { display: none !important; }
    .nav-hamburger { display: flex; }
    .nav-logo .logo-full  { display: none; }
    .nav-logo .logo-short { display: inline; }

    /* Prevent horizontal overflow on every page */
    html, body { overflow-x: hidden; max-width: 100%; }
    * { max-width: 100%; }

    /* ── Hero (index page) ── */
    .hero { padding: 80px 16px 60px !important; }
    .hero-container { grid-template-columns: 1fr !important; text-align: center; }
    .hero-text h1 { font-size: 1.6em !important; line-height: 1.25; overflow-wrap: break-word; }
    .hero-text .tagline { font-size: 1.05em !important; }
    .hero-text p { font-size: 0.95em !important; }
    .hero-badges { justify-content: center; flex-wrap: wrap; gap: 8px; }
    .badge { font-size: 0.8em !important; padding: 7px 12px !important; }
    .hero-cta { flex-direction: column; align-items: center; gap: 12px; }
    .hero-cta .btn { width: 100%; max-width: 320px; text-align: center; }
    .tree-graphic-container { height: 240px !important; }

    /* ── Page hero (all inner pages) ── */
    .page-hero { padding: 48px 16px 36px !important; }
    .page-hero h1 { font-size: 1.5em !important; line-height: 1.25; overflow-wrap: break-word; }
    .page-hero .subtitle { font-size: 0.95em !important; }

    /* ── Section headings (all pages) ── */
    h2 { font-size: 1.5em !important; overflow-wrap: break-word; }
    h3 { font-size: 1.1em !important; overflow-wrap: break-word; }

    /* ── All grids → single column ── */
    .growth-grid,
    .philosophy-points,
    .different-grid,
    .team-grid,
    .resources-grid,
    .impact-stats,
    .perks-grid,
    .steps,
    .highlights-grid,
    .books-grid,
    .apps-grid { grid-template-columns: 1fr !important; }

    /* ── Contact page two-col layout ── */
    .content-wrapper { grid-template-columns: 1fr !important; padding: 28px 16px 36px !important; }

    /* ── Cards: reduce padding so they fit ── */
    .different-card,
    .philosophy-point,
    .resource-card,
    .perk-card,
    .policy-card,
    .step-card,
    .highlight-card,
    .app-card { padding: 20px 16px !important; }

    /* ── Step cards (getting-started) ── */
    .step-card { grid-template-columns: 1fr !important; }

    /* ── Buttons: full width on mobile ── */
    .cta-section .btn,
    .cta-buttons .btn { width: 100%; max-width: 320px; text-align: center; box-sizing: border-box; }

    /* ── CTA sections ── */
    .cta-section { padding: 48px 16px !important; }
    .cta-section h2 { font-size: 1.4em !important; }
    .cta-section p { font-size: 0.95em !important; }

    /* ── Testimonial ── */
    .testimonial { font-size: 1.05em !important; }
    .stat-number { font-size: 2.2em !important; }

    /* ── Footer ── */
    footer { padding: 36px 16px 20px !important; }
    .footer-container { grid-template-columns: 1fr !important; text-align: center !important; gap: 24px !important; }
    .contact-methods { flex-direction: column; align-items: center; gap: 16px; }
}