/* ═══════════════════════════════════════════════════════════
   WindowsHelper — Responsive layer (responsive.css)
   ───────────────────────────────────────────────────────────
   The marketing site is built desktop-first with FIXED pixel
   sizes set as INLINE styles (e.g. <h1 style="font-size:52px">).
   A normal stylesheet rule loses the cascade to an inline style,
   so every rule below uses !important to actually win on phones.

   Scope: ALL rules live inside (max-width: 640px) media queries.
   Desktop rendering (>640px) is therefore untouched. Rules only
   SHRINK type / tighten spacing on small screens — never grow.

   Offline/CSP-safe: no @import, no remote fonts, no JS of its own.
   (The homepage's mobile nav toggle below is driven by a small inline
   <script> in index.html — that page already loads JS for translations/
   accessibility, so wiring a class toggle there is consistent with the
   rest of the site. This file only supplies the CSS states.)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* --- Headings: scale the HOMEPAGE's oversized inline heading sizes
       (52/36/32px) down. Scoped to body.home because ONLY index.html uses
       big inline-px headings; the other pages use their own smaller
       class/rem headings and must NOT be forced up to these sizes
       (that would GROW e.g. the EULA's headings — the opposite of the
       intent). --- */
    body.home h1 {
        font-size: 32px !important;
        line-height: 1.15 !important;
        letter-spacing: -1px !important;
    }
    body.home h2 {
        font-size: 24px !important;
    }
    body.home h3 {
        font-size: 18px !important;
    }

    /* --- Hero lead paragraph: 20px is too large on a phone. Targeted
       by its data-translate hook (homepage only) so no other body text
       is affected. --- */
    body.home [data-translate="hero_subtitle"] {
        font-size: 16px !important;
    }

    /* --- Nav (homepage): the 6 links (Features, How It Works, Fixes,
       Get Help, Security, FAQ) no longer fit in the sticky header on a
       narrow phone, so they move into a hamburger dropdown instead of
       being hidden outright — hiding them left NO way to reach the Fixes
       or Get Help pages from a phone. Hidden by default; index.html's
       toggle script adds/removes the "open" class on click. The brand/
       logo and "Get Started" button stay outside .nav-links and always
       visible. --- */
    .nav-links {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2px !important;
        background: rgba(15,15,35,0.98) !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        padding: 8px 20px 14px !important;
        box-shadow: 0 16px 30px rgba(0,0,0,0.35) !important;
    }
    .nav-links.open {
        display: flex !important;
    }
    .nav-links a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        font-size: 16px !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }
    .nav-links a:last-child {
        border-bottom: none !important;
    }

    /* Hamburger toggle: hidden on desktop via the base inline style on the
       button itself, shown here on phones. */
    #wh-nav-toggle {
        display: inline-flex !important;
    }

    /* --- Header spacing (homepage): on narrow phones the brand (logo +
       "WindowsHelper" wordmark) and the right-hand action group (Get
       Started + hamburger) were wide enough to collide/overlap, and
       "Get Started" wrapped onto two lines. `gap` on a `justify-content:
       space-between` flex container guarantees a minimum gap between the
       two sides even when there isn't room for `space-between` to push
       them fully apart; letting the brand shrink (and truncate as a last
       resort) keeps that gap real instead of stealing space from the
       action group. --- */
    .wh-nav-inner {
        padding: 0 14px !important;
        gap: 10px !important;
    }
    .wh-brand {
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
    .wh-brand-text {
        font-size: 15px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }
    .wh-nav-actions {
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    .wh-nav-cta {
        padding: 7px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}