/* ============================================================
   PW-MOBILE — site-wide mobile polish (loaded last on every page)
   ------------------------------------------------------------
   Most site sizes (fonts, paddings, margins, gaps) are in rem,
   so stepping the html base font down on small screens shrinks
   the whole rhythm proportionally. Targeted fixes follow.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

@media (max-width: 767px) {
    /* Global scale-down: every rem-based font / padding / margin shrinks ~6% */
    html { font-size: 15px; }

    body { overflow-x: hidden; }

    img { max-width: 100%; height: auto; }
    iframe, video, embed, object { max-width: 100%; }

    /* Tighter section rhythm everywhere (hero, cards, footer) */
    .pw-section { padding-top: 3.25rem; padding-bottom: 3.25rem; }

    /* Buttons: slightly smaller hit area, still >44px tall */
    .pw-btn { padding: .7rem 1.4rem; font-size: .9rem; }

    /* Headings: keep line lengths comfortable */
    .pw-h3 { font-size: 1.35rem; }
    .pw-h4 { font-size: 1.15rem; }

    /* Cards breathe less on phones */
    .pw-perk { padding: 1.4rem 1.2rem; }
    .pw-course-content { padding: 1rem 1rem 1.1rem; }

    /* Forms: full-width inputs, larger touch targets */
    input, select, textarea, button { font-size: 1rem; }
}

@media (max-width: 480px) {
    /* Second step-down for small phones */
    html { font-size: 14px; }

    .pw-pad { padding-left: 4.5%; padding-right: 4.5%; }
    .pw-section { padding-top: 2.75rem; padding-bottom: 2.75rem; }

    .pw-h1 { font-size: 1.75rem; }
    .pw-h2 { font-size: 1.45rem; }
    .pw-text-md { font-size: .95rem; }

    /* Hero: tighter, media edge-to-edge */
    .pw-hero .pw-section { padding-top: 2.5rem; padding-bottom: 3rem; }
    .pw-hero-chip { font-size: .7rem; padding: .45rem .7rem; }

    /* Newsletter CTA card */
    .pw-cta-inner { padding: 2.25rem 1.15rem; }

    /* Footer: tighter columns */
    .pw-footer-top { gap: 2.25rem; }
    .pw-footer-copy { font-size: .78rem; }

    /* Topbar: keep to a single compact line */
    .pw-topbar { font-size: .68rem; }
    .pw-topbar a i, .pw-topbar-note i { font-size: .8rem; }

    /* Navbar: tighter shell so logo + lang + CTA + burger fit one row */
    .pw-navbar { min-height: 4.25rem; padding-left: 3.5%; padding-right: 3.5%; }
    .pw-navbar-inner { gap: .5rem; min-width: 0; }

    /* Navbar logo: exempt from the global img max-width cap so it scales
       at a fixed height instead of getting squashed in the tight grid */
    .pw-navbar-logo img { height: 2.35rem; width: auto; max-width: none; }

    /* Navbar right side: never let buttons wrap onto two lines */
    .pw-navbar-right { gap: .35rem; flex-wrap: nowrap; }
    .pw-navbar-right .pw-btn {
        white-space: nowrap;
        padding: .55rem .75rem;
        font-size: .78rem;
    }
    .pw-nav-toggle { font-size: 1.25rem; padding: .4rem .1rem .4rem .2rem; }

    /* Language dropdown: compact icon-only pill, caret kept inside the border */
    .pw-lang-btn { padding: .45rem .5rem; gap: .25rem; border-radius: .6rem; }
    .pw-lang-btn img { width: 18px; height: auto; }
    .pw-lang-btn i { font-size: .75rem; }

    /* Menu stays comfortable to tap */
    .pw-lang-menu button { padding: .75rem .8rem; }
}