/*
 * Small corrective stylesheet for the mirrored site.
 *
 * Static CSS rather than JS-injected styles, so it applies on first paint with
 * no flash and no dependency on hydration. Loaded on every page by
 * scripts/apply-local-edits.py.
 */

/* ---------------------------------------------------------------------------
 * 1. Kill the 18px horizontal scroll.
 *
 * Several pages scroll ~18px sideways at desktop widths. The cause is
 * inherited, not introduced by the mirror: scroll-triggered animations start
 * below-fold elements at translateX(50px), and until those elements animate in
 * they extend the document's scroll width. Verified identical on the live site
 * (scrollWidth 1298 vs clientWidth 1280 on /about, /courses and /contact).
 *
 * NOT FIXED HERE — deliberately. Three approaches were tried in a browser:
 *
 *   html { overflow-x: clip }    computed as clip, page still scrolled 18px.
 *                               Chromium does not propagate clip from the root
 *                               to the viewport.
 *   html { overflow-x: hidden }  computed as hidden, page still scrolled 18px.
 *   html, body { ... hidden }    DID stop the scroll — and broke the sticky
 *                               header, which scrolled away off-screen
 *                               (top: -1500px at scrollY 1500).
 *
 * A nav bar that disappears is a much worse defect than 18px of desktop
 * horizontal scroll, so this is left alone. The real fix is to stop animating
 * below-fold elements in from translateX(50px) without clipping their
 * container — a change to the components themselves, which belongs in the
 * rebuild rather than in a patch over compiled output.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 2. Tap-target sizing on the contact links added to the footer.
 *
 * WCAG 2.2 "Target Size (Minimum)" asks for 24x24 CSS px. The footer's link
 * rows render at 16-20px tall, which the added phone and WhatsApp links
 * inherited. Padding lifts them over the line without changing the layout,
 * since the rows are spaced by the surrounding flex gap.
 * ------------------------------------------------------------------------- */
footer a[href^="tel:"],
footer a[href*="wa.me"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* ---------------------------------------------------------------------------
 * 3. Contact page: five cards in one row.
 *
 * The grid is built for four cards; a WhatsApp card is added as a fifth. This
 * cannot be done by swapping in a Tailwind class — Tailwind only compiles the
 * classes its source used, so `lg:grid-cols-5` is absent from the bundle and
 * setting it silently does nothing. The attribute is set by site-enhance.js.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  [data-lds-wa] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  [data-lds-wa] {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Five columns are narrower than the original four — enough to clip the email
 * address. Let long unbroken strings wrap. */
[data-lds-wa] p {
  overflow-wrap: anywhere;
  word-break: break-word;
}