/**
 * Global page-level base styles.
 *
 * `--page-gutter` is the single horizontal spacing unit reused across the
 * whole theme (content + footer). Values mirror react-src/common/units:
 *   - mobile  sm.margin            = 6.03vw
 *   - desktop md.horizontalMargin  = 3.02vw
 *
 * Anything with `position: fixed` (header, burger, nav panel) is outside
 * the document flow and ignores this padding — that's intentional.
 */

/* Mirror react-src/src/index.css: clip horizontal overflow at the root,
 * always show the vertical scrollbar. Full-bleed elements
 * (.work-cover, .work-content::before, future scrolling-text blocks)
 * use `width: 100vw`, which includes the vertical scrollbar's width —
 * without `overflow-x: hidden` here, those elements overshoot the visible
 * viewport by ~17px and trigger a horizontal scrollbar. The `scroll` on
 * Y is intentional too: it reserves the gutter even on short pages so
 * vw-based widths don't shift between pages. */
html {
    overflow: hidden scroll;
    overscroll-behavior-y: none;
}

/* Match react-src/index.css:26-31. On Retina / 2dppx+, default subpixel
 * rendering makes Sharp Grotesk look noticeably heavier than the
 * grayscale-antialiased pass used by the original SPA. Without this,
 * weight-400 paragraphs visibly drift toward weight-500 territory. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Mirror react-src/index.css:62-65: no underline, inherits text color so
 * dark/inverted sections keep their contrast. react-src used `color: black`
 * + component-level overrides; `inherit` collapses both rules into one and
 * Just Works inside has-inverted-color blocks. */
a {
    text-decoration: none;
    color: inherit;
}

:root,
body {
    /* Desktop default — matches unit.md.horizontalMargin.
       Declared on both :root and body so WP-injected per-page <style>
       blocks targeting :root (notably from core-block-supports / global-
       styles after a Swup head-diff) can't accidentally null the gutter
       on the body inheritance chain.
       Pure vw scaling (no clamp) so the gutter always matches the
       .site-rail width (3.02vw, also linear) — otherwise rail and
       content drift apart at extreme viewports and content slips
       under the rail. */
    --page-gutter: 3.02vw;
    --page-gutter-vertical: 1.84vw;
}

@media (max-width: 768px) {
    :root,
    body {
        /* Mobile — matches unit.sm.margin. */
        --page-gutter: 6.03vw;
        --page-gutter-vertical: 6.03vw;
    }
}

/* Higher specificity than plain `body` so WP global-styles / block-supports
   inline CSS that target `body { ... }` cannot override the gutter padding
   on soft-navigated pages. Pad = --page-gutter = rail width, mirroring
   react-src SinglePageContainer / SingleWorkContainer which used pure
   `unit.sm.margin` / `unit.md.horizontalMargin` for their inline padding
   (= rail width). Visual buffer between rail text and body text comes
   from the rail centring (rotated text sits in the middle of the rail
   container, leaving ~half-rail of empty space on each side). */
html body {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

/* ---------- Interactive element resets ----------
 * The theme uses editorial press feedback (scale, transform, color
 * transitions) on links/buttons. We mute the default browser chrome
 * entirely:
 *
 * - `-webkit-tap-highlight-color: transparent` mutes the iOS tap overlay.
 * - `outline: none` on every focused element kills the blue focus ring
 *   for both keyboard (:focus-visible) and pointer focus.
 *
 * ⚠️ Accessibility caveat: keyboard users lose the visual focus indicator
 * across the whole site. If we ever want it back, the canonical pattern
 * is to scope `outline: none` to `:focus:not(:focus-visible)` only —
 * which keeps the ring on keyboard nav but hides it on click.
 *
 * `:where(...)` keeps the selector specificity at 0 so any component-
 * level rule can override these defaults without arms-race specificity. */
:where(a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
    -webkit-tap-highlight-color: transparent;
}

*:focus,
*:focus-visible {
    outline: none;
}