/*
 * Foundation.
 *
 * WHY THIS FILE EXISTS, AND WHY IT DID NOT
 *
 * DESIGN.md named `assets/css/base.css` as the foundation every workstream builds on — and it
 * was never written. Five streams then built in parallel with no shared box model, so each
 * spot-fixed the symptoms it happened to hit: `box-sizing: border-box` ended up declared in
 * four different files, and the home page's hero rendered 430px wide inside a 390px viewport
 * with its heading clipped. That was invisible to an overflow check because `overflow: hidden`
 * swallowed it.
 *
 * So this is the single place for rules that must be true everywhere. Anything specific to one
 * surface belongs in that surface's stylesheet, not here.
 *
 * Loaded before every other theme stylesheet — the others declare it as a dependency.
 */

/* --------------------------------------------------------------- box model */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------- media */
/*
 * One image treatment for the whole site, so a photograph behaves the same in a product card,
 * a category tile, a client logo and an article.
 *
 * `height: auto` is what keeps the intrinsic ratio when only a width is constrained. A trap
 * this project hit twice: setting `aspect-ratio` on a WRAPPER and `height: 100%` on the image
 * silently defeats `object-fit`, and the image crops instead of fitting. Put the ratio on the
 * image itself.
 */
img,
svg,
video,
iframe {
	max-inline-size: 100%;
	block-size: auto;
}

img {
	/* A photograph should never be stretched. Where a fixed frame is wanted, the surface
	   stylesheet sets aspect-ratio ON THE IMAGE and picks cover or contain deliberately. */
	object-fit: contain;
}

/* ------------------------------------------------------------------- focus */
/*
 * One focus treatment everywhere. Accessibility is part of "premium" — a keyboard user must
 * always be able to see where they are, and the old theme had no visible focus state at all.
 *
 * `:focus-visible`, so a pointer click does not leave a ring behind, and the browser decides
 * when the ring is warranted.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------- text */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Long product names, Ukrainian compounds and URLs must not push a card sideways. Ukrainian
   strings are frequently longer than their Russian counterparts, and a layout that only fits
   in Russian is broken. */
:where(h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt) {
	overflow-wrap: break-word;
}

/* Prose measure. Wide enough for a specification row, narrow enough to read. Surfaces that
   genuinely need full width (tables, grids) opt out. */
:where(.nv-prose) > * {
	max-inline-size: 70ch;
}

/* --------------------------------------------------------- screen-reader only */
/*
 * WordPress core ships `.screen-reader-text` and handles its focus state at a higher
 * specificity. It is NOT redeclared here: an earlier attempt to add a `:focus` rule for it was
 * dead weight that would have wrongly un-hidden other elements. Verified by reading the
 * page's own cssRules rather than grepping this theme.
 */