/* =========================================================
   Jhilik Portfolio — base front-end styles
   Milestone 01B
   Loaded on the front end only, after style.css.
   Component/visual system lives in components.css
   (which is also loaded in the editor).
   ---------------------------------------------------------
   1. Box sizing
   2. Overflow guards
   3. Media
   4. In-page navigation (motion-safe)
   5. Global reduced-motion fallback
   ========================================================= */

/* 1. Box sizing ------------------------------------------------------- */

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

/* 2. Overflow guards ------------------------------------------------ */

html {
	/* No overflow-x guard here (tested: neither `hidden` nor `clip` on
	   html/body is safe — both break `position: sticky` for every
	   descendant in this browser, including the site header and the
	   Journey section's sticky visual, regardless of the other axis's
	   value). Horizontal-overflow protection now lives on `main` instead
	   (see below), which sits beside the header rather than wrapping it. */
	/* Keep anchor jumps clear of the sticky header. */
	scroll-padding-top: 5.5rem;
}

body {
	max-width: 100%;
}

/* Horizontal-overflow guard, scoped to page content only — a sibling of
   the sticky header, not an ancestor, so it can't break its stickiness.
   `.jhilik-roadmap__visual` (Journey section) is the one sticky element
   that DOES live inside main; `clip` only activates if that section's own
   content would overflow horizontally, which it doesn't, so its sticky
   behavior is unaffected in practice. If a future section's sticky child
   stops working, verify this rule isn't the cause before re-adding it. */
main {
	overflow-x: clip;
}

/* 3. Media --------------------------------------------------------- */

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* 4. In-page navigation ------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* 5. Global reduced-motion fallback ------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}