/* ===== MOBILE BASELINE =====================================================
   Corrective layer loaded LAST on every page, so it wins ties against the
   per-page <style> blocks it is meant to correct.

   Every rule here fixes a defect that was measured in a headless-Chrome pass
   over all 68 pages at 320 / 390 / 768 / 1280 px. Nothing speculative — if a
   rule is here, something was broken without it.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1) Text scaling
   iOS Safari inflates text in landscape unless this is pinned.
   ------------------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------------------------------------------------------------------------
   2) Long unbroken strings (URLs, e-mail addresses, reference codes) must not
   push a container wider than the viewport.
   ------------------------------------------------------------------------ */
body {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   3) Replaced elements never exceed their container.
   ------------------------------------------------------------------------ */
img,
svg,
video,
iframe,
embed,
object,
canvas {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   4) Anchor targets clear the sticky headers instead of hiding under them.
   ------------------------------------------------------------------------ */
:target,
[id] {
  scroll-margin-top: 90px;
}

/* ---------------------------------------------------------------------------
   5) FORM CONTROLS — iOS zoom-on-focus
   Safari on iOS zooms the whole page when a focused control's font-size is
   under 16px, and does not zoom back out. Measured on 404, admin,
   campaign-materials, growth-circle-international, sales funnel pages,
   speaking-inquiry, updates, ai-for-all and 18 article newsletter fields.
   !important is deliberate: the page rules being corrected are more specific
   (e.g. `.fld input`, `.form-group select`).
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Comfortable tap height for text entry. Honeypot fields live in
     off-screen, overflow-hidden wrappers, so this cannot reveal them. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    min-height: 44px;
  }

  textarea {
    min-height: 88px;
  }

  /* Checkboxes and radios ship at ~13px, which is well under any tap-target
     guideline. Consent checkboxes on the enrolment forms depend on this. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }
}

/* ---------------------------------------------------------------------------
   6) ARTICLE SHELL — grid items must be allowed to shrink
   `.article-shell` is a grid whose single mobile column is `1fr`. A grid item
   defaults to `min-width:auto`, so it refuses to go below its min-content
   width and punches out of the 20px page gutter. This clipped body copy on
   every article page at 320px.
   ------------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .article-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

.article-shell > *,
.art-main,
.art-main .prose {
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   7) TAP TARGETS — footer link rows
   Footer links render 13–23px tall across 37 pages. The pseudo-element grows
   the touch area to ~44px without moving anything visually.
   `padding: 5px 0` on `.foot-col a` leaves ~10px between adjacent baselines,
   so a 10px expansion meets neighbours without overlapping them.
   ------------------------------------------------------------------------ */
@media (max-width: 768px), (pointer: coarse) {

  footer a,
  .foot-col a,
  .foot-base a,
  .footer-link,
  .hero-crumbs a,
  .crumbs a,
  .breadcrumbs a,
  .nav-back,
  .back,
  .links a {
    position: relative;
  }

  footer a::after,
  .foot-col a::after,
  .foot-base a::after,
  .footer-link::after,
  .hero-crumbs a::after,
  .crumbs a::after,
  .breadcrumbs a::after,
  .nav-back::after,
  .back::after,
  .links a::after {
    content: "";
    position: absolute;
    inset: -12px -6px;
    /* Purely a hit area — must never paint or intercept text selection. */
    background: transparent;
    pointer-events: auto;
  }

  /* Links that are already buttons have their own comfortable box; the
     expansion would only bleed into neighbouring controls. */
  footer a.btn,
  footer a[class*="btn-"],
  footer a.nav-cta {
    position: static;
  }

  footer a.btn::after,
  footer a[class*="btn-"]::after,
  footer a.nav-cta::after {
    content: none;
  }
}

/* ---------------------------------------------------------------------------
   8) TABLES — never let one clip its own content
   `html, body { overflow-x: hidden }` means an over-wide table is silently
   cut off rather than scrollable. Any table wider than its container gets a
   scroll context of its own.
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {

  .table-scroll,
  .price-scroll,
  .article-body table,
  .content table,
  .prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* `display:block` alone is not enough. A block-level <table> still builds an
     anonymous table box whose min-content width propagates up to the grid
     item, so the article column was dragged 46px past the gutter on
     philsme-where-businesses-grow. Size containment stops that propagation;
     browsers without it simply behave as they already do today. */
  .article-body table,
  .content table,
  .prose table {
    contain: inline-size;
  }
}

/* ---------------------------------------------------------------------------
   9) Reduced motion — the reveal-on-scroll animations leave elements at
   opacity:0 if the observer never fires.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

  .reveal,
  [class*="reveal-delay"] {
    opacity: 1 !important;
    transform: none !important;
  }
}