/* ============================================================
 * BAC Mobile-Fixes v2.6 — 5 May 2026 — IF YOU SEE THIS LINE THE FILE IS CORRECT
 * ============================================================
 *
 * Loaded LAST in <head> on every public + admin page so its rules
 * win over the theme CSS without modifying the theme files.
 *
 * VERSION HISTORY:
 *   v1 (1 May 2026)   — initial mobile fixes, only capped <img> tags
 *   v2 (2 May 2026)   — added SVG caps to fix iPad icon-fills-page bug
 *   v2.1 (2 May 2026) — added obvious version marker to detect cache/upload issues
 *   v2.2 (3 May 2026) — Tech Support column icons sized explicitly
 *   v2.3 (3 May 2026) — Tech Support icons pushed down 5px to centre on label
 *   v2.4 (3 May 2026) — phone icon nudged left 3px (didn't bite — superseded)
 *   v2.5 (3 May 2026) — STRUCTURAL alignment fix: every Tech Support icon
 *                        gets a fixed 24px wide box with the glyph centred,
 *                        so all three labels start at the same x regardless
 *                        of glyph offset inside its viewBox
 *   v2.6 (5 May 2026) — ROOT-CAUSE fix for footer Service Desk alignment.
 *                        Social-row rule's selector `footer .flex.gap-4`
 *                        was too broad: it also matched the Technical
 *                        Support contact wrapper `<div class="flex
 *                        flex-col gap-4">`, applying `align-items: center`
 *                        to it. With short Service Desk content this
 *                        centred the contact rows vertically. Adding
 *                        `:not(.flex-col)` excludes column-direction
 *                        wrappers and lets each section fall through to
 *                        its intended layout. Replaces the 7 inline
 *                        <style> overrides in index/services/about/
 *                        mot-testing/contact/cookie-policy/terms-and-
 *                        conditions/privacy-policy.
 *
 * Breakpoints:
 *   <= 1024px : tablet landscape / small laptops
 *   <=  768px : tablet portrait
 *   <=  480px : phones
 * ============================================================ */


/* ── 1. Universal anti-overflow guard ──────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

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

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


/* ── 2. SVG icon hard caps (THE iPad FIX) ─────────────────────
 * Tailwind-CDN-failure-proof. Prevents the "icon fills the
 * whole page" bug seen on iPad when Tailwind didn't run.
 */
a > svg,
button > svg,
[role="button"] > svg {
    max-width: 24px;
    max-height: 24px;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Footer-specific: tighter cap, with !important to override anything else */
footer a > svg,
footer button > svg {
    max-width: 28px !important;
    max-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
}

/* Technical Support column icons (phone/mail/map-pin) — these are
   Lucide-generated <svg> elements that sit at the top of multi-line
   info blocks (label + value). With items-start alignment, the icon
   top sits at the top of the column, but the label is small uppercase
   text, so the icon visually floats above the label.
   Push the icon down a few px so its centre roughly matches the
   centre of the small "SERVICE DESK" / "EMAIL" / "WORKSHOP HUB"
   label rather than the column top.
   3 May 2026: matches the look of the design across desktop / tablet
   / phone regardless of whether Tailwind's mt-0.5 has loaded.
   Sizing is overridden below by the more-specific Tech Support rule. */
footer svg.lucide,
footer svg[data-lucide],
footer .flex.items-start > svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    margin-top: 5px !important;
}

/* Fallback for when Lucide JS hasn't run yet (icon still <i>, no SVG) */
footer i[data-lucide] {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 5px;
}

/* Tech Support column row alignment — instead of nudging each icon
   individually (fragile, fights specificity, depends on cache), force
   every icon-row to start its text column at the same x-position by
   giving the icon a fixed-width container.
   The footer markup uses <div class="flex items-start gap-3"> for each
   row. The first child is the SVG icon (variable visual width — phone
   glyph sits in upper-right of viewBox, mail/map-pin fill more of it).
   By fixing the SVG to a 24px wide flex item with the glyph centred
   inside, every row's text column starts at exactly:
   row-left-edge + 24px + 12px gap = identical x for SERVICE DESK,
   EMAIL and WORKSHOP HUB.
   3 May 2026: replaces the v2.4 phone-only -3px hack. */
footer .flex.items-start.gap-3 > svg.lucide,
footer .flex.items-start.gap-3 > svg[data-lucide] {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-top: 5px !important;
    margin-left: 0 !important;
    /* SVG's preserveAspectRatio default centres the glyph, so a
       wider-than-glyph box gives equal padding left and right —
       exactly what we want to align all three labels. */
}

/* Catch any standalone <svg> in footer not inside an anchor */
footer svg {
    max-width: 32px;
    max-height: 32px;
}

/* Footer images (raster fallback) */
footer img,
footer .social img,
footer .social-icons img,
footer a img {
    max-width: 32px !important;
    max-height: 32px !important;
    width: auto;
    height: auto;
    vertical-align: middle;
}

/* Social row should be a flex row no matter what Tailwind does.
   5 May 2026 — added :not(.flex-col) to exclude column-direction
   wrappers like the Technical Support contact column, which also
   has class="flex flex-col gap-4" and was inheriting align-items:
   center from this rule. That centred the Service Desk contact
   rows vertically when content was short. With the negation, only
   the actual social icon row (which is row-direction by default)
   matches. */
footer .flex.gap-4:not(.flex-col),
footer .social,
footer .social-icons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}


/* ── 3. Tap targets ────────────────────────────────────────── */
@media (max-width: 1024px) {
    button,
    .btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    a.button {
        min-height: 44px;
        line-height: 1.2;
    }

    p a, td a, th a, .badge a, footer a {
        min-height: 0;
    }
}


/* ── 4. Form inputs — 16px to stop iOS zoom ────────────────── */
input,
select,
textarea {
    font-size: 16px !important;
}


/* ── 5. Tablet (≤1024px) layout adjustments ────────────────── */
@media (max-width: 1024px) {
    .row,
    .two-col,
    .grid-2,
    .columns-2 {
        flex-wrap: wrap;
    }

    .row > [class*="col-"],
    .two-col > *,
    .grid-2 > *,
    .columns-2 > * {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .container,
    .content,
    main,
    section {
        max-width: 100%;
    }
}


/* ── 6. Tablet portrait (≤768px) ───────────────────────────── */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; line-height: 1.25; }
    h2 { font-size: 1.4rem;  line-height: 1.3; }
    h3 { font-size: 1.2rem;  line-height: 1.35; }

    body {
        padding-left: 12px;
        padding-right: 12px;
    }

    .cards,
    .card-row {
        flex-direction: column;
    }

    header img,
    .logo img {
        max-height: 60px;
    }
}


/* ── 7. Phone (≤480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
    h1 { font-size: 1.5rem;  }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem;  }

    body {
        padding-left: 8px;
        padding-right: 8px;
    }

    label {
        display: block;
        margin-bottom: 4px;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    select,
    textarea {
        width: 100%;
        padding: 10px 12px;
    }

    button,
    .btn,
    input[type="submit"] {
        width: 100%;
    }

    footer .row,
    footer .columns,
    footer .footer-grid,
    footer .grid {
        grid-template-columns: 1fr !important;
    }
}


/* ── 8. Tables — horizontal scroll wrappers ────────────────── */
@media (max-width: 1024px) {
    .table-wrap,
    .responsive-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    table:not(.pricing-table):not(.no-mobile-fix) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }
}


/* ── 9. Modals / dialogs ───────────────────────────────────── */
@media (max-width: 1024px) {
    .modal,
    .dialog,
    [role="dialog"] {
        max-width: 95vw;
        max-height: 90vh;
        overflow-y: auto;
    }
}


/* ── 10. Misc utility ──────────────────────────────────────── */
.fixed-bottom,
.sticky-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ============================================================
 * END OF v2.6 — IF YOU SEE THIS LINE THE FILE IS CORRECT
 * ============================================================ */
