/**
 * Mobile-only (<lg, matching app.css's own `max-width:1023.98px` "below lg"
 * breakpoint) overrides — loaded AFTER app.css (app/layout.tsx), so a plain
 * selector of equal-or-higher specificity wins the cascade without needing
 * `!important`. Deliberately kept separate from app.css itself (which stays
 * a byte-for-byte mirror of the live stylesheet) so every override here is
 * reviewable in one place instead of scattered edits to the mirrored file.
 *
 * Desktop (>=lg) rendering is untouched — every rule below is scoped inside
 * `@media (max-width: 1023.98px)`. All text/content stays verbatim; these
 * are layout/spacing-only changes.
 *
 * HIV — mobile-improvement round (post-full-crawl). Two real bugs found on
 * /security-services/private at 390px (see docs/clone-inventory.md §14 for
 * full root-cause writeup + scripts/check-mobile-overflow.mjs's own
 * DEVICE_WIDTH comment for how the existing overflow check missed it):
 *
 * 1. `.btn.btn-sm{white-space:nowrap}` (app.css) — fine for every OTHER CTA on
 *    the site (short labels), but /security-services/private's label
 *    ("Vraag een offerte en we bellen je vandaag of de volgende werkdag al
 *    om je noden te bespreken!") is long enough that the un-wrapped button
 *    became 818px wide, which then made the *whole page* silently grow its
 *    layout viewport to fit (no `overflow-x:hidden` anywhere contains it) —
 *    the exact mechanism a real mobile browser uses to avoid clipping
 *    content, but it just moves the clipping to "half the page is scrolled
 *    off the right edge" instead. Fix: let `.btn-sm` wrap onto multiple
 *    lines below `lg` instead of forcing one line — every other (short)
 *    button on the site is unaffected since its own text already fits on
 *    one line either way.
 *
 * 2. The header's own "Bestaande klant?" + 24/7-support pill + hamburger
 *    cluster is *not* actually wider on the SECURITY/COOLING/SMART-HOME
 *    sub-brand logo pages — measured directly (all 4 logo variants render
 *    at an identical ~90px width at the site's own fixed `height:50px`, see
 *    docs/clone-inventory.md §14) — the header only looked "squeezed" on
 *    /security-services/private as a knock-on effect of bug 1's page-wide
 *    viewport blow-up (the cluster's own text got wider too, mobile
 *    browsers' font-boost-on-wide-viewport behavior). Fixing bug 1 alone
 *    fixes that. What IS real and sitewide (every route, every logo
 *    variant, not new): the cluster fits its 390px row with only ~2px to
 *    spare — inside `check-mobile-overflow.mjs`'s existing 5px tolerance,
 *    so not a check failure, but fragile. Tightened the gap + pill padding
 *    below for real breathing room instead of a knife-edge fit.
 */

@media (max-width: 1023.98px) {
  /* Bug 1 — let long CTA labels wrap into a taller pill instead of running
     off the right edge. `max-width:100%` is what actually forces the wrap
     (an inline-block's preferred width is otherwise its unwrapped
     max-content width, gap-16/flex-wrap on the parent doesn't constrain a
     single item that's wider than the viewport by itself); line-height
     loosened slightly so wrapped lines don't feel cramped inside the pill's
     26px border-radius. Selector matches app.css's own `.btn.btn-sm`
     compound (two classes) — a plain `.btn-sm` here loses the specificity
     tie-break regardless of load order and silently no-ops. */
  .btn.btn-sm {
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
    line-height: 1.3;
  }

  /* Bug 2 (fragility, not a failure) — the header's right-hand cluster
     (`div.flex.items-center.gap-16`, "Bestaande klant?" + 24/7-support pill
     + hamburger — see lib/mirror-transform.ts for the hamburger markup)
     only had ~2px of margin to the viewport edge on every route. Selector
     is exact-class-match, not just `.gap-16` (which the flex-wrap CTA
     button rows below also use, unrelated to the header) — scoped to
     `header` so it can't affect the fixed-position mobile nav overlay's own
     spacing. */
  header div.flex.items-center.gap-16 {
    gap: 6px;
  }
  header a[href="/klantenservice"] {
    padding-left: 8px;
    padding-right: 14px;
  }

  /* Hamburger tap target: 24×24 icon + 8px padding = 40×40, just under the
     44×44 Apple HIG / Material baseline (WCAG 2.5.8 AA's own minimum is
     24×24, already met — this is a "make it comfortably tappable", not a
     conformance fix). The 2 extra px/side fit inside the margin the gap/
     padding trim above just freed up. */
  header button[aria-label="Toggle menu"] {
    padding: 10px;
  }
}