/* ============================================================
   Stonewall Security — Mobile Optimization Layer
   Loaded LAST on every page. Every rule lives inside a
   max-width media query, so the desktop design is untouched.
   Improves: layout, typography, tap targets, forms, perf,
   hover→tap, and prevents horizontal scroll.
   ============================================================ */

/* ──────────────────────────────────────────────
   Global safety — no horizontal scroll
   (off-screen fixed drawer + nowrap CTAs were causing it)
   ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    html { overflow-x: hidden; }
    body { overflow-x: hidden; max-width: 100%; }
}

/* ──────────────────────────────────────────────
   TABLET (≤ 768px) — trim oversized vertical rhythm
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
    section[data-section] {
        padding-top: clamp(56px, 11vw, 88px);
        padding-bottom: clamp(56px, 11vw, 88px);
    }
    .section-head { margin-bottom: var(--s-6); }
}

/* ──────────────────────────────────────────────
   PHONES (≤ 640px) — primary mobile pass
   ────────────────────────────────────────────── */
@media (max-width: 640px) {

    /* — Performance: lighten expensive GPU effects — */
    .topbar { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .hero-services, .hero-stats { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .side-menu { backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); }
    .mission-block { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .mission-block::before { animation: none; }      /* stop infinite glow loop on phones */
    .service-card::before, .dossier-card::before, .career-card::before,
    .brief-card::before, .flow-panel::before, .profile-panel::before { opacity: 0.6; }

    /* — Typography & rhythm — */
    .lede { font-size: 15.5px; line-height: 1.62; }
    p { line-height: 1.65; }
    .section-head { margin-bottom: var(--s-6); }

    /* ── Heroes: small-viewport-height aware, allow growth, never clip ── */
    .hero { height: auto; min-height: 100vh; min-height: 100svh; }
    .about-hero, .contact-hero, .services-hero, .careers-hero, .solutions-hero {
        min-height: 88vh; min-height: 88svh;
        padding-top: clamp(104px, 22vh, 140px);
    }

    /* ── CTA buttons: full-width, wrapping labels (fixes overflow) ── */
    .hero-ctas,
    .sol-cta-buttons, .careers-cta-buttons, .about-cta-buttons, .svc-cta-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-ctas .btn,
    .sol-cta-buttons .btn, .careers-cta-buttons .btn, .about-cta-buttons .btn, .svc-cta-buttons .btn {
        width: 100%;
        min-height: 50px;
        white-space: normal;          /* long labels wrap instead of overflowing */
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    .contact-hero-assure { gap: 6px; }

    /* ── Section 2 that is mostly short content: relax forced 100vh ── */
    .services-intro, .sol-overview { min-height: 0; display: block; }

    /* ── Forms: 16px inputs prevent iOS zoom-on-focus; bigger tap targets ── */
    .form-row input, .form-row select, .form-row textarea { font-size: 16px; padding: 15px 16px; }
    .form-row label { font-size: 11px; }
    .seg-option label { padding: 16px 14px; }
    .check-row { padding: 13px 0; }
    .check-box { width: 22px; height: 22px; }
    .file-drop { padding: 26px 18px; }
    .check-grid { grid-template-columns: 1fr; }
    /* clearer required submit + confirmation already full-width via .btn-block */

    /* ── Hover-only content → always visible on touch ── */
    .standard-card .standard-reveal { max-height: none; opacity: 1; margin-top: var(--s-4); }
    .threat-card { min-height: 0; }
    .threat-card .threat-front { transform: none; opacity: 1; }
    .threat-card .threat-back { position: static; opacity: 1; transform: none; margin-top: var(--s-3); }
    /* The photography is the point, not decoration. Every other rule in this
       block reveals hover-only content on touch; this one alone hid it, so the
       four service photos never appeared on a phone at all. The card body sits
       at z-index 2 and the strip has none, so the text stays above it, and the
       strip's own left-to-right graphite fade keeps that text legible. */
    .service-card .service-photo-strip {
        display: block;
        opacity: 1;
        transform: none;
    }

    /* ── Tap targets: links get real padding ── */
    .footer-links a { padding: 7px 0; }
    .footer-contact-value, a.footer-contact-value { display: inline-block; padding: 4px 0; }
    .footer-col-title { padding-top: var(--s-2); }
    .link-arrow, .card-link { padding-top: 8px; padding-bottom: 8px; }
    .primary-nav { gap: 18px; }

    /* ── Expand/collapse heads: comfortable tap height ── */
    .dossier-file-head, .role-head, .sol-head, .faq-q, .why-q, .approach-head { min-height: 56px; }
    .finder-options li button { padding: 16px 18px; font-size: 15px; }

    /* ── Footer: clean stacking ── */
    .footer { padding-top: var(--s-8); }
    .footer-top { gap: var(--s-6); }
    .footer-bottom { gap: var(--s-3); }
    .footer-fineprint { align-items: flex-start; }

    /* ── Mobile menu CTA (added to markup) ── */
    .side-menu-cta { display: flex; }
}

/* ──────────────────────────────────────────────
   SMALL PHONES (≤ 380px) — 320–375 safety
   ────────────────────────────────────────────── */
@media (max-width: 380px) {
    .container { padding-left: 18px; padding-right: 18px; }
    .topbar { padding-left: 18px; padding-right: 18px; gap: var(--s-3); }
    .hero-wordmark { font-size: clamp(42px, 15vw, 60px); }
    .about-hero-title, .contact-hero-title, .services-hero-title,
    .careers-hero-title, .solutions-hero-title { font-size: clamp(32px, 9vw, 44px); }
    .section-title { font-size: clamp(32px, 9vw, 44px); }
    .brand-name { font-size: 19px; }
    /* keep the header phone button from crowding the logo */
    .topbar .btn-outline { padding: 10px 14px; font-size: 10px; letter-spacing: 0.14em; }
}

/* ──────────────────────────────────────────────
   Mobile menu CTA — base styling (shown ≤1100 with the menu)
   ────────────────────────────────────────────── */
.side-menu-cta { display: none; }
@media (max-width: 1100px) {
    .side-menu-cta {
        display: flex;
        width: 100%;
        margin: var(--s-6) 0 var(--s-2);
    }
}