/* ==================================================================
   02 - BASE
   Reset, page shell, and the cosmic background.

   Responsibility: make every browser start from the same place and
   set up the dark space canvas everything else sits on. No component
   styling here.
   ================================================================== */


/* ------------------------------------------------------------------
   RESET
   ------------------------------------------------------------------ */

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

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--wo-header-offset);
}

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


/* ------------------------------------------------------------------
   PAGE SHELL
   overflow-x on both html and body is what actually prevents the
   sideways scroll that dark full-bleed layouts are prone to.
   ------------------------------------------------------------------ */

html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

body {
	min-height: 100vh;
	min-height: 100svh;

	font-family: var(--wo-font-body);
	font-size: var(--wo-text-base);
	font-weight: var(--wo-weight-normal);
	line-height: var(--wo-leading-normal);
	color: var(--wo-text);

	background-color: var(--wo-bg);
	background-image:
		radial-gradient(1100px 620px at 78% 8%,  rgba(110, 92, 196, 0.30), transparent 62%),
		radial-gradient(900px 700px at 6% 42%,   rgba(76, 58, 140, 0.24),  transparent 60%),
		radial-gradient(1300px 900px at 50% 100%, rgba(58, 45, 120, 0.22), transparent 66%);
	background-attachment: fixed;
	background-repeat: no-repeat;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
}

/* Fixed background is expensive to repaint on touch devices. */
@media (hover: none) {
	body {
		background-attachment: scroll;
	}
}


/* ------------------------------------------------------------------
   STARFIELD
   A single fixed canvas painted by assets/js/stars.js. It sits
   behind everything and never intercepts clicks.
   ------------------------------------------------------------------ */

.wo-stars {
	position: fixed;
	inset: 0;
	z-index: var(--wo-z-stars);
	pointer-events: none;
	display: block;
	width: 100%;
	height: 100%;
}

/* Everything the user can actually interact with lives above it. */
.wo-site {
	position: relative;
	z-index: var(--wo-z-content);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

/* Push the footer down on short pages. */
.wo-main {
	flex: 1 0 auto;
	width: 100%;
}


/* ------------------------------------------------------------------
   MEDIA
   ------------------------------------------------------------------ */

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

img,
video {
	height: auto;
}

img {
	border-style: none;
	font-style: italic;      /* styles the alt text when an image fails */
	color: var(--wo-text-dim);
}

svg {
	fill: currentColor;
}

/* WordPress inserts width/height attributes; keep the ratio intact. */
img[width][height] {
	height: auto;
}


/* ------------------------------------------------------------------
   FORM ELEMENT DEFAULTS
   Full styling lives in 06-forms.css. This only normalises.
   ------------------------------------------------------------------ */

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

button,
[type='button'],
[type='submit'],
[type='reset'] {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

button:disabled,
[type='submit']:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

textarea {
	resize: vertical;
	min-height: 120px;
}


/* ------------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------------ */

/* Keyboard users get a clear ring. Mouse users never see it. */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--wo-primary-hover);
	outline-offset: 2px;
	border-radius: var(--wo-radius-xs);
}

/* Visually hidden but still read by screen readers. */
.wo-sr-only,
.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;
}

/* Skip link becomes visible when focused. */
.wo-skip-link {
	position: absolute;
	top: -100px;
	left: var(--wo-space-4);
	z-index: var(--wo-z-toast);
	padding: var(--wo-space-3) var(--wo-space-5);
	background: var(--wo-primary);
	color: var(--wo-text-on-primary);
	font-size: var(--wo-text-sm);
	font-weight: var(--wo-weight-semibold);
	border-radius: var(--wo-radius-pill);
	text-decoration: none;
	transition: top var(--wo-transition);
}

.wo-skip-link:focus {
	top: var(--wo-space-4);
}

/* Comfortable tap targets on touch devices. */
@media (pointer: coarse) {
	a,
	button,
	[role='button'],
	input[type='submit'] {
		min-height: 44px;
	}
}


/* ------------------------------------------------------------------
   SELECTION & SCROLLBAR
   ------------------------------------------------------------------ */

::selection {
	background: var(--wo-primary);
	color: var(--wo-text-on-primary);
}

::-moz-selection {
	background: var(--wo-primary);
	color: var(--wo-text-on-primary);
}

html {
	scrollbar-width: thin;
	scrollbar-color: var(--wo-surface-2) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--wo-bg-deep);
}

::-webkit-scrollbar-thumb {
	background: var(--wo-surface-2);
	border-radius: var(--wo-radius-pill);
	border: 2px solid var(--wo-bg-deep);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--wo-surface-3);
}


/* ------------------------------------------------------------------
   MISC ELEMENTS
   ------------------------------------------------------------------ */

hr {
	height: 1px;
	border: 0;
	background: var(--wo-line);
	margin: var(--wo-space-8) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

/* Prevent long URLs and product SKUs from breaking the layout. */
p,
li,
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Lock scroll when a drawer or modal is open (toggled by JS). */
body.wo-no-scroll {
	overflow: hidden;
	touch-action: none;
}

/* Kill motion for users who ask for it. */
@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;
	}
}


/* ------------------------------------------------------------------
   WORDPRESS ADMIN BAR
   Keeps the floating header clear of the toolbar when logged in.
   ------------------------------------------------------------------ */

body.admin-bar .wo-header {
	top: calc(var(--wo-space-4) + 32px);
}

@media (max-width: 782px) {
	body.admin-bar .wo-header {
		top: calc(var(--wo-space-4) + 46px);
	}
}


/* ------------------------------------------------------------------
   PRINT
   ------------------------------------------------------------------ */

@media print {
	.wo-stars,
	.wo-header,
	.wo-footer {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}
}