/* ==========================================================================
   VIC Theme — Base
   Font face, reset, element defaults, typography utilities, accessibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font — Inter, self-hosted variable font (SIL OFL, see fonts/inter/LICENSE.txt)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter/InterVariable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Keep anchor targets (e.g. /#products) clear of the sticky header. */
	scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

/* Smooth in-page anchor jumps (Hero → #products): Theme Options → Smooth Anchor
   Scroll adds .vic-smooth-scroll; never applied when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
	html.vic-smooth-scroll {
		scroll-behavior: smooth;
	}
}

/* Back-to-top target: focus lands at the very top of the page. */
.vic-top-anchor {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

body {
	min-height: 100vh;
	background-color: var(--color-background);
	color: var(--color-body);
	font-family: var(--font-sans);
	font-size: var(--text-body-size);
	font-weight: var(--weight-regular);
	line-height: var(--text-body-line);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Headings — semantic tags get default sizes; .h1–.h6 / .display decouple
   visual size from semantic level (CLAUDE.md §8).
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.display, .h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--color-heading);
	font-weight: var(--weight-semibold);
	text-wrap: balance;
}

.display {
	font-size: var(--text-display-size);
	line-height: var(--text-display-line);
	letter-spacing: var(--text-display-tracking);
	font-weight: var(--weight-bold);
}

h1, .h1 {
	font-size: var(--text-h1-size);
	line-height: var(--text-h1-line);
	letter-spacing: var(--text-h1-tracking);
	font-weight: var(--weight-bold);
}

h2, .h2 {
	font-size: var(--text-h2-size);
	line-height: var(--text-h2-line);
	letter-spacing: var(--text-h2-tracking);
	font-weight: var(--weight-bold);
}

h3, .h3 {
	font-size: var(--text-h3-size);
	line-height: var(--text-h3-line);
	letter-spacing: var(--text-h3-tracking);
}

h4, .h4 {
	font-size: var(--text-h4-size);
	line-height: var(--text-h4-line);
	letter-spacing: var(--text-h4-tracking);
}

h5, .h5 {
	font-size: var(--text-h5-size);
	line-height: var(--text-h5-line);
	letter-spacing: 0;
}

h6, .h6 {
	font-size: var(--text-h6-size);
	line-height: var(--text-h6-line);
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Text styles
   -------------------------------------------------------------------------- */
p {
	text-wrap: pretty;
}

.text-body-lg {
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
}

.text-body {
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
}

.text-body-sm {
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
}

.text-caption {
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-line);
}

.text-muted {
	color: var(--color-muted);
}

.eyebrow,
.vic-eyebrow {
	display: block;
	color: var(--vic-blue);
	font-size: var(--text-eyebrow-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-eyebrow-line);
	letter-spacing: var(--text-eyebrow-tracking);
	text-transform: uppercase;
}

.text-nav {
	font-size: var(--text-nav-size);
	font-weight: var(--weight-medium);
	line-height: var(--text-nav-line);
}

.text-button {
	font-size: var(--text-button-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-button-line);
}

/* Keeps short phrases (e.g. "Purpose-built") from breaking across lines. */
.nowrap {
	white-space: nowrap;
}

strong, b {
	font-weight: var(--weight-semibold);
}

/* --------------------------------------------------------------------------
   Links — underlined by default so links are not identified by colour alone.
   -------------------------------------------------------------------------- */
a {
	color: var(--color-link);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: var(--transition-colors);
}

a:hover {
	color: var(--color-link-hover);
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */
ul[role="list"],
ol[role="list"],
.list-reset {
	list-style: none;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Focus — visible on keyboard focus only. Dark surfaces flip the ring colour
   through --color-focus-ring (see .surface-dark in layout.css).
   -------------------------------------------------------------------------- */
:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus-ring);
	outline-offset: var(--focus-ring-offset);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* Programmatic focus targets (e.g. <main> after skip link) need no ring. */
[tabindex="-1"]:focus {
	outline: none;
}

::selection {
	background-color: var(--vic-blue);
	color: var(--color-on-dark);
}

/* --------------------------------------------------------------------------
   Screen-reader text (class name required by WordPress core)
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	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;
	word-wrap: normal !important;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: var(--z-skip-link);
	display: inline-flex;
	align-items: center;
	min-height: var(--button-height);
	padding-inline: var(--button-pad-x);
	border-radius: var(--radius-control);
	background-color: var(--vic-blue);
	color: var(--color-on-dark);
	font-size: var(--text-button-size);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	transform: translateY(calc(-100% - var(--space-6)));
}

.skip-link:focus {
	transform: none;
	color: var(--color-on-dark);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important; /* e.g. delayed visibility on menu close */
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   WordPress core classes
   -------------------------------------------------------------------------- */
.alignleft {
	float: left;
	margin-inline-end: var(--space-6);
	margin-block-end: var(--space-4);
}

.alignright {
	float: right;
	margin-inline-start: var(--space-6);
	margin-block-end: var(--space-4);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption,
figure {
	max-width: 100%;
}

.wp-caption-text,
figcaption {
	margin-block-start: var(--space-2);
	color: var(--color-muted);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
}