/* =============================================================================
   responsive.css — sitewide mobile overlay
   Loaded AFTER all other stylesheets and per-template <style> blocks.
   Targets desktop-first markup written without mobile-first breakpoints.

   Strategy: blanket overrides at two breakpoints
     - <= 600px: covers the desktop-to-phone gap most templates miss
     - <= 414px: the iPhone-Pro-Max-or-smaller phone gap
   ============================================================================= */

/* -----------------------------------------------------------------------------
   GLOBAL HYGIENE — applies everywhere, no breakpoint
   ----------------------------------------------------------------------------- */

/* Prevent horizontal scroll caused by overflowing children */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Images and embedded media never overflow their parent */
img, video, iframe, svg {
    max-width: 100%;
    height: auto;
}

/* Long words / URLs wrap instead of forcing horizontal scroll */
p, li, dd, span, td, th, a, code, pre {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Tables become horizontally scrollable instead of breaking layout */
table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* -----------------------------------------------------------------------------
   PHONE BREAKPOINT  (<= 600px)
   Covers the 375–600px range that templates routinely skip.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {

    /* ----- Body / page wrappers ----- */
    body {
        margin-left: 0 !important;   /* parent_dashboard.html line 488 */
        margin-right: 0 !important;
    }

    /* Containers with desktop padding shrink to phone-friendly padding */
    .container,
    .dashboard-wrapper,
    .auth-box,
    .page,
    main,
    main.page,
    .footer-content,
    .cta-box,
    .academy-cta-box,
    .orbit-promo-cta-box,
    .founding-banner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .footer-content {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .founding-banner {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    /* ----- Headings → fluid sizes ----- */
    h1, .page-title, .hero-title {
        font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
        line-height: 1.15 !important;
        word-wrap: break-word;
    }
    .hero-title.hero-tagline {
        font-size: clamp(1.6rem, 7.5vw, 2.6rem) !important;
        line-height: 1.12 !important;
    }
    h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
    h3 { font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important; }
    h4 { font-size: clamp(1rem, 4vw, 1.25rem) !important; }

    /* ----- Subtitle / body ----- */
    .hero-subtitle {
        font-size: clamp(1rem, 3.5vw, 1.2rem) !important;
        line-height: 1.55 !important;
        padding: 0 4px;
    }

    /* ----- Hide decorative background orbs / shapes on mobile ----- */
    .orb-1, .orb-2, .orb-3,
    .floating-shape, .floating-shapes,
    .bg-decoration, .decoration,
    .hero-decoration {
        display: none !important;
    }

    /* ----- Grids → single column ----- */
    .planet-grid,
    .stats-grid,
    .action-grid,
    .missions-grid,
    .pricing-grid,
    .plan-options,
    .stat-row,
    .card-grid,
    .feature-grid,
    .upsell-grid,
    .quick-launch-grid,
    .academy-lessons-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Catch-all for inline grid styles using auto-fit/auto-fill minmax(N, 1fr) */
    [style*="grid-template-columns"][style*="minmax"] {
        grid-template-columns: 1fr !important;
    }

    /* ----- Fixed-width boxes → fluid ----- */
    .stat-box,
    .stat-mini,
    .help-box,
    .info-box,
    .plan-option,
    .upsell-card,
    .pricing-card,
    .mission-card,
    .feature-card,
    .character-img {
        width: auto !important;
        max-width: 100% !important;
    }

    /* ----- Flex rows that overflow → wrap ----- */
    .student-topbar-nav,
    .topbar-nav,
    .topbar,
    .hero-cta-group,
    .auth-actions,
    .nav-links,
    .button-row,
    .student-stats-mini {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ----- Buttons / links → comfortable tap targets ----- */
    .btn, button, .button,
    a.btn, a.button,
    .auth-submit,
    .nav-link,
    .topbar-nav a {
        min-height: 44px;
        padding-top: max(10px, var(--btn-pad-y, 10px));
        padding-bottom: max(10px, var(--btn-pad-y, 10px));
        white-space: normal !important;   /* allow wrap on narrow screens */
    }
    .btn-primary,
    .btn-secondary {
        width: auto;
        max-width: 100%;
    }

    /* ----- Form inputs → readable + tap-friendly ----- */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;   /* prevents iOS auto-zoom */
        min-height: 44px;
        max-width: 100%;
        box-sizing: border-box;
    }
    textarea { min-height: 88px; }

    /* ----- Modals / overlays → use full width ----- */
    .modal, .overlay-content, .modal-content,
    .lightbox-image, .lightbox-caption,
    #cozmoDemoOverlay > div {
        max-width: calc(100vw - 24px) !important;
        width: auto !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        box-sizing: border-box;
    }

    /* Cozmo lesson side panel (lesson_teach.html line 1424) */
    .cozmo-panel {
        width: calc(100vw - 24px) !important;
        max-height: 60vh !important;
    }

    /* ----- Sticky / fixed footers eat less vertical space ----- */
    .action-footer {
        padding: 12px 16px !important;
    }

    /* ----- Lesson progress steps: 4-col → 2-col on phone ----- */
    .progress-steps {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ----- Reduce big gaps ----- */
    .hero-cta-group { gap: 10px !important; }
    .stats-grid { gap: 16px !important; }

    /* ----- Meet Cozmo display: still nice on phone ----- */
    .meet-cozmo-display { margin: 0 0 22px !important; }
}

/* -----------------------------------------------------------------------------
   TIGHT PHONE BREAKPOINT  (<= 414px)
   The iPhone-and-smaller range; tightens up further.
   ----------------------------------------------------------------------------- */
@media (max-width: 414px) {

    .container,
    .dashboard-wrapper,
    .auth-box,
    main,
    main.page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    h1, .page-title { font-size: clamp(1.4rem, 7vw, 2rem) !important; }
    .hero-title.hero-tagline { font-size: clamp(1.5rem, 8vw, 2.2rem) !important; line-height: 1.15 !important; }

    /* Cozmo demo modal — full bleed on tiny phones */
    #cozmoDemoOverlay > div {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        padding: 18px 14px 14px !important;
    }

    /* Meet Cozmo pill stays readable */
    .meet-cozmo-btn { padding: 10px 16px 10px 12px !important; }
    .meet-cozmo-headline { font-size: 0.98rem !important; }
    .meet-cozmo-sub { font-size: 0.75rem !important; }

    /* Lesson progress: still 2-col fine; tighten spacing */
    .progress-steps { gap: 6px !important; font-size: 0.85rem !important; }

    /* Plan-selector toggle stacks if cramped */
    .billing-toggle { gap: 6px !important; }
    .billing-btn { padding: 8px !important; font-size: 0.9rem !important; }
}

/* -----------------------------------------------------------------------------
   ACCESSIBILITY — reduce motion if requested
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}