/* ============================================================
   CCSS Mobile Mockup — enhancement overlay (v2)
   ------------------------------------------------------------
   Injected AFTER style.css by build_mobile_mockup.py.
   DOES NOT modify desktop; this file is mobile-only.
============================================================ */

/* ==== UNIVERSAL MOBILE/TABLET tap optimisations ==== */
/* `touch-action: manipulation` is critical: it tells mobile browsers to fire
   click events IMMEDIATELY on tap, bypassing the 300 ms double-tap-to-zoom
   delay that can make nav links feel unresponsive on mobile. */
@media (max-width: 1100px) {
    .mobile-toggle,
    .nav-menu a,
    .dropdown-toggle,
    .dropdown-menu a,
    .btn,
    .btn-sm,
    .header-actions a,
    button {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(13, 43, 103, 0.12);
        cursor: pointer;
    }
    /* Force hamburger button to receive taps cleanly */
    .mobile-toggle {
        pointer-events: auto;
        position: relative;
        z-index: 1002;
    }
}

/* ==== SMARTPHONE breakpoint (≤430 px) ==== */
@media (max-width: 430px) {

    /* Typography */
    html { font-size: 15px; }
    body { line-height: 1.55; }
    h1, .hero-title-top { font-size: 2rem !important; line-height: 1.1 !important; }
    h2 { font-size: 1.55rem !important; line-height: 1.2 !important; }
    h3 { font-size: 1.2rem !important; line-height: 1.3 !important; }

    /* Buttons: 48 px tap target */
    .btn, .btn-sm {
        min-height: 48px;
        padding: 0.85rem 1.1rem;
        font-size: 1rem;
    }
    .header-actions .btn-sm {
        min-height: 44px;
        font-size: 0.88rem;
    }

    /* Nav menu items: 48 px and clear tap feedback */
    .nav-menu.open > li > a,
    .nav-menu.open .dropdown-toggle {
        min-height: 48px;
        padding: 0.9rem 1rem !important;
        font-size: 1.05rem;
    }
    /* Dropdown sub-links inside open nav menu — use block (not flex) to avoid
       interfering with click target geometry. */
    .nav-menu.open .dropdown-menu a {
        min-height: 44px;
        padding: 0.7rem 1rem 0.7rem 1.2rem;
        display: block;
    }

    /* PDF popup: full-screen */
    .sample-popup {
        width: calc(100vw - 16px) !important;
        height: calc(100vh - 70px) !important;
        left: 8px !important;
        top: 40px !important;
        max-width: none !important;
    }

    /* Sample chooser: full-width modal */
    .sample-chooser {
        position: fixed !important;
        top: 40px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }
    .sample-chooser-tile {
        min-height: 56px;
        padding: 0.85rem 1rem;
        font-size: 1.05rem;
    }
    .sample-chooser-tile img {
        width: 32px !important;
        height: 32px !important;
    }

    /* Report detail toggle */
    .report-detail-toggle {
        min-height: 52px;
        padding: 0.95rem 1.4rem;
        font-size: 1.05rem;
    }

    /* Card images */
    .card-with-image .card-img { max-height: 180px; }

    /* Testimonial */
    .testimonial-bandeau-item { padding: 1rem 1.2rem; }

    /* Section padding compact */
    .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .container { padding-left: 1rem; padding-right: 1rem; }

    /* Workplace sidebar collapsed */
    .wp-sidebar { display: none; }
    .wp-main { padding: 1rem !important; }

    /* Report hub: single column */
    .report-hub { grid-template-columns: 1fr !important; }
    .rail-seg { display: none; }

    /* Flag badges compact */
    .report-country-flags { padding: 0.25rem 0.5rem; gap: 0.3rem; }
    .report-country-flags img { width: 24px; height: 24px; }

    /* Pre-launch banner: prevent text wrapping on narrow screens */
    body > div[style*="z-index:2000"] {
        font-size: 0.72rem !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0.35rem 0.6rem !important;
    }
}

/* ==== TABLET breakpoint (431 – 900 px) ==== */
@media (min-width: 431px) and (max-width: 900px) {
    html { font-size: 15.5px; }

    .btn, .btn-sm, button { min-height: 44px; }

    /* PDF popup: large centered */
    .sample-popup {
        width: min(85vw, 620px) !important;
        height: min(85vh, 820px) !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: none !important;
    }
    .sample-popup.open {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    /* Sample chooser centered */
    .sample-chooser {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 320px !important;
        max-width: none !important;
    }
}

/* ==== POLISH ≤900 px ==== */
@media (max-width: 900px) {
    /* Workplace shortcuts stack and get big tap zones */
    .preview-shortcut-link {
        display: block !important;
        margin: 0.5rem 0 !important;
        min-height: 48px;
        padding: 0.9rem 1rem;
        font-size: 1rem;
        text-align: center;
    }

    /* Nav menu scroll on overflow */
    .nav-menu.open {
        max-height: calc(100vh - 60px) !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   Boutons : jamais de debordement horizontal  [btn-wrap-mobile]
   ------------------------------------------------------------
   .btn porte white-space: nowrap (style.css) — voulu sur grand
   ecran, ou les libelles courts doivent tenir sur une ligne.
   Les boutons de telechargement des notes pays sont longs
   ("Download the Hong Kong company establishment note (PDF)") :
   a 390 px ils poussaient la page a 488 px de large et
   ouvraient un defilement lateral sur Hong Kong, Vietnam et
   client-access. Sous 767 px le libelle passe a la ligne et la
   largeur est bornee au conteneur.                            */
@media (max-width: 767px) {
    .btn {
        white-space: normal;
        max-width: 100%;
    }
    /*  L'en-tete est l'exception : ses pastilles ont des libelles courts
        et calibres ("CONTACT US", "YOUR ACCESS"). Les laisser passer a la
        ligne double la hauteur de la barre et aggrave le chevauchement du
        logo. Elles gardent nowrap.                                      */
    .header .btn,
    .header-actions .btn,
    .lang-switcher .btn,
    .mockup-bar .btn {
        white-space: nowrap;
    }
}

/* Accessibilité sur téléphone (audit v4, 5 sept. 2026) : aucun corps sous 12 px, cibles d'au moins 32 px. */
@media (max-width: 700px) {
    .news-tag, .focus-eyebrow, .geo-credit, .focus-fig span, .news-source, .sub-note, .q-progress-item, .q-step-count,
    .guides-eyebrow, .ag-meta, .wp-dashboard-kpi-label, .wp-folder-tile-count, .wp-user-meta span, .footer-bottom p,
    .focus-panel table th, .focus-panel table td, .footer p[style] { font-size: 12px !important; }
    .footer li a, .breadcrumb-nav a, .section-anchors a, .card-body a:not(.btn), .news-filter button, .sub-consent a,
    .wp-dashboard-kpi a { display: inline-block; padding-top: 0.55rem; padding-bottom: 0.55rem; }   /* ≥ 33 px de haut avec la ligne de 16,5 px */
    .q-progress-item { min-height: 32px; }
    .news-filter button { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; }   /* la règle par identifiant du filtre l'emporte sinon */
}