/* base.css -- /build-site baseline. Copy into every new project and load it first.
   Encodes the recurring mobile / RTL / CSS-lint fixes so they cannot recur. No em dashes. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }

/* Grid/flex children must be allowed to shrink, or one wide row widens the ICB and
   every inset:0 overlay sustains the overflow on mobile. Adjust the selectors per project. */
[class*="grid"] > *, .row > *, [data-col] { min-width: 0; }

/* Media in a grid/flex cell: contain, never height:100% (which resolves to auto and letterboxes). */
.media, .card__media { overflow: hidden; }
.media > img, .card__media > img { width: 100%; height: 100%; object-fit: cover; }

/* Buttons: kill the UA default border (renders as a dark ring on glass buttons). */
button { border: none; background: none; font: inherit; color: inherit; cursor: pointer; }

/* Selects: background-color, never the background shorthand (shorthand resets
   background-repeat/position and tiles the chevron SVG into a hatch). */
select { background-color: transparent; -webkit-appearance: none; appearance: none; }

/* Screen-reader-only / honeypot: clip, never left:-9999px (that creates scrollable
   leftward overflow that blows out RTL mobile). */
.sr-only, .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Loader: must not intercept nav clicks once it has played. Add .is-gone on exit. */
.loader { position: fixed; inset: 0; z-index: 9999; }
.loader.is-gone { opacity: 0; pointer-events: none; visibility: hidden; }

/* Arabic / RTL. Letter-spacing breaks connected Arabic glyphs; reset it and raise line-height.
   Isolate Latin words and numbers so they do not reorder. */
[lang="ar"], [dir="rtl"] { letter-spacing: 0 !important; line-height: 1.7; }
[dir="rtl"] .wordmark, .wordmark[data-latin] { direction: ltr; unicode-bidi: isolate; }
bdi,
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[inputmode="numeric"] { direction: ltr; unicode-bidi: isolate; }

/* Compositing helpers. White-bg cutout over LIGHT: darken inside an isolate container.
   Black-bg cutout over DARK: screen. Real edges (bottle/portal) still need true alpha. */
.blend-isolate { isolation: isolate; }
.blend-darken { mix-blend-mode: darken; }
.blend-screen { mix-blend-mode: screen; }

/* Reduced motion: a full alternate, not just muted transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* No-JS: reveal content that JS would otherwise animate in. */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

/* Design-critical content visible at base state; animate transform only.
   Scope the shown rule under html.js so specificity beats html.js .reveal. */
.reveal { will-change: transform; }
html.js .reveal { opacity: 0; }
html.js .reveal.in { opacity: 1; }