/* ============================================================
   nodmekacademy — Mobile optimization layer (user-facing pages)
   Loaded last in _LayoutCodemy so it wins the cascade.
   Hardens every page against horizontal overflow, fixes touch
   targets, and stacks wide rows on small screens.
   Desktop (>= 992px) is intentionally untouched.
   ============================================================ */

/* ---------------- Tablets and below ---------------- */
@media (max-width: 991.98px) {

    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Contain any stray page-level overflow inside main */
    .codemy-main {
        overflow-x: clip;
    }

    /* Media can never force horizontal scroll */
    .codemy-main img,
    .codemy-main video,
    .codemy-main iframe,
    .codemy-main canvas,
    .codemy-main svg {
        max-width: 100%;
    }

    .codemy-main img {
        height: auto;
    }

    /* Long words, URLs and headings wrap instead of overflowing */
    .codemy-main h1,
    .codemy-main h2,
    .codemy-main h3,
    .codemy-main h4,
    .codemy-main p,
    .codemy-main li,
    .codemy-main td,
    .codemy-main th,
    .codemy-main a {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Code blocks scroll inside themselves, never the page */
    .codemy-main pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------- Phones ---------------- */
@media (max-width: 767.98px) {

    /* Data tables on user pages become horizontally scrollable
       instead of stretching the page (Privacy, My Payments,
       Manage Logins, comparison tables, lesson example tables) */
    .codemy-main table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 16px inputs prevent iOS Safari auto-zoom on focus */
    .codemy-main input[type="text"],
    .codemy-main input[type="email"],
    .codemy-main input[type="password"],
    .codemy-main input[type="search"],
    .codemy-main input[type="number"],
    .codemy-main input[type="tel"],
    .codemy-main select,
    .codemy-main textarea {
        font-size: 16px;
    }

    /* Comfortable touch targets for all buttons and CTAs */
    .codemy-main .btn,
    .codemy-main button[type="submit"],
    .courses-card-cta,
    .cp-load-more-btn {
        min-height: 44px;
    }

    /* Section headers built as title + "view all" rows:
       allow wrapping so the link drops below the title */
    .section-header {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    /* Generic filter/search bars stack full width.
       The desktop "pill" (border-radius 999px) becomes a huge oval
       arch once the controls stack, so use a normal card radius.
       !important is required to beat page-level inline style blocks. */
    .cp-filter-bar {
        border-radius: 1rem !important;
        padding: 1rem !important;
    }

    .cp-filter-bar form {
        flex-direction: column;
        align-items: stretch;
    }

    .cp-filter-bar .cp-search-wrap,
    .cp-filter-bar .cp-search-wrap input,
    .cp-filter-bar select,
    .cp-filter-bar .btn {
        width: 100%;
        min-width: 0;
    }

    .cp-filter-bar .btn {
        justify-content: center;
    }

    /* Hero blocks used across Courses/Learn/Dashboard pages: stack and center */
    .cp-hero-content,
    .lp-hero-content,
    .db-hero-inner {
        flex-direction: column;
        text-align: center;
    }

    .cp-hero-badges,
    .db-hero-badges {
        justify-content: center;
    }

    .cp-hero-text h1,
    .lp-hero-text h1 {
        justify-content: center;
        font-size: 1.6rem;
    }

    .db-hero-text h1 {
        font-size: 1.6rem;
    }

    /* Card grids collapse to a single column (safety net for
       pages without their own media queries) */
    .courses-card-grid {
        grid-template-columns: 1fr;
    }

    /* Grid children must be allowed to shrink below their content
       width (top performers / badges panels on the home page) */
    .performers-container {
        grid-template-columns: 1fr;
    }

    .performers-container > *,
    .leaderboard-panel,
    .badges-panel {
        min-width: 0;
        max-width: 100%;
    }

    .leaderboard-panel .leaderboard-item,
    .badges-panel .badge-item {
        min-width: 0;
    }

    /* Fixed-position toasts/feedback stay inside the viewport */
    .cta-feedback {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    /* Profile dropdown in the navbar must not exceed the screen */
    .profile-dropdown {
        max-width: calc(100vw - 1.5rem);
    }

    .notification-dropdown {
        max-width: calc(100vw - 1rem);
        min-width: 0 !important;
        width: min(360px, calc(100vw - 1rem));
    }
}

/* ---------------- Small phones ---------------- */
@media (max-width: 575.98px) {

    /* Tighter page gutters so content gets the width */
    .codemy-main section {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* Floating action buttons: keep clear of bottom bars and
       each other; slightly smaller so they cover less content */
    .live-mentor-fab {
        width: 48px;
        height: 48px;
        right: 1rem;
        bottom: 6.5rem;
    }

    .chatbot-fab-legacy {
        width: 48px;
        height: 48px;
        right: 1rem;
    }

    /* Fixed bottom streak/nudge bar: compact on phones */
    .nma-streak-bar {
        padding: 0.55rem 0.85rem;
        font-size: 0.8rem;
        gap: 0.5rem;
        padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
    }

    .nma-streak-btn {
        padding: 0.4rem 0.9rem;
        font-size: 0.78rem;
    }

    /* When the streak bar is on screen, lift page bottom so the
       last content and FABs are not hidden behind it */
    body.has-bottom-bar .codemy-main {
        padding-bottom: 5.5rem;
    }
}