/**
 * Atlas Labs — Base Styles
 *
 * Element-level defaults only — html, body, headings, links, focus,
 * selection, scrollbars. No component classes live here; those are
 * built in a future sprint under UI_COMPONENT_SPECIFICATIONS.md and
 * follow the al-[block]__[element]--[modifier] naming convention
 * defined there. This file only ever references tokens.css custom
 * properties, never a raw value — see
 * DESIGN_SYSTEM.md#section-20-design-rules.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	/* Anchor targets land clear of the sticky header (72px desktop
	   height, see layout.css) plus one spacing step of breathing room. */
	scroll-padding-top: calc(72px + var(--space-24));
	/* Horizontal-scroll guard, mainly for phone widths: any element
	   that slips past the viewport (an unbroken string, a stray
	   negative margin) clips instead of widening the page. `clip` (not
	   `hidden`) on purpose — it does NOT create a scroll container, so
	   the sticky header keeps working. */
	overflow-x: clip;
}

body {
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
	font-family: var(--font-family-base);
	font-size: var(--type-body-size);
	font-weight: var(--weight-regular);
	line-height: var(--type-body-line-height);
	letter-spacing: var(--type-body-letter-spacing);
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-family-base);
	font-weight: var(--weight-semibold);
	color: var(--color-text-primary);
	/* Even out ragged multi-line headings; progressive enhancement —
	   browsers without text-wrap support simply keep normal wrapping. */
	text-wrap: balance;
}

/* Kadence (parent theme) outputs its own default Global Palette text
   color rules for body/h1-h6 in a <style id="global-styles-inline-css">
   block that loads after this stylesheet. Those rules share the exact
   specificity of the ones above, so Kadence's later-loaded, never-
   customized default palette wins the cascade tie and silently
   replaces our tokens. This selector is deliberately bumped by one
   element (html body / html body h1-h6) so Atlas Labs text tokens win
   without requiring !important. `color` AND `background-color` are
   restated here: on the light palette a Kadence-won white background
   was invisible, but on the dark palette Kadence's default light body
   background would silently replace the near-black page — so the
   background is now part of the same specificity bump. */
html body {
	color: var(--color-text-primary);
	background-color: var(--color-bg-primary);
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
	color: var(--color-text-primary);
}

h1 {
	font-size: var(--type-h1-size);
	letter-spacing: var(--type-h1-letter-spacing);
	line-height: var(--type-h1-line-height);
}

h2 {
	font-size: var(--type-h2-size);
	letter-spacing: var(--type-h2-letter-spacing);
	line-height: var(--type-h2-line-height);
}

h3 {
	font-size: var(--type-h3-size);
	letter-spacing: var(--type-h3-letter-spacing);
	line-height: var(--type-h3-line-height);
}

h4,
h5,
h6 {
	font-size: var(--type-h4-size);
	letter-spacing: var(--type-h4-letter-spacing);
	line-height: var(--type-h4-line-height);
}

p {
	margin: 0 0 var(--space-16);
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-fast) var(--easing-standard);
}

/* Third instance of the same Kadence cascade-tie: `a { color:
   var(--global-palette-highlight) }` in global.min.css beats the
   `inherit` rule above at equal specificity. Any link that doesn't
   set its own explicit color (e.g. a plain text link inside a card)
   silently picks up Kadence's blue instead of inheriting its
   container's Atlas Labs color. Same fix as body/h1-h6 and buttons —
   bumped by one element, no !important. */
html body a {
	color: inherit;
}

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

/* Visually hidden but available to assistive tech — the standard
   WordPress screen-reader-text pattern, used by header.php's search
   labels and mobile-menu labels. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Required on every page per BRAND_GUIDELINES.md#accessibility
   ("A skip to content link is provided at the top of every page").
   Off-screen until focused, then revealed above everything else. */
.al-skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-16);
	z-index: 100;
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
	padding: var(--space-12) var(--space-16);
	border-radius: var(--radius-md);
	border: var(--border-width-standard) solid var(--color-border-primary);
	font-family: var(--font-family-base);
	font-size: var(--type-body-small-size);
}

.al-skip-link:focus {
	top: var(--space-16);
}

/* Every focusable element gets the same visible focus ring; never
   suppressed without a compliant replacement, per
   BRAND_GUIDELINES.md#accessibility. */
:focus-visible {
	outline: var(--border-width-focus) solid var(--color-focus-ring);
	outline-offset: 2px;
}

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

/* Scrollbar tokens (WebKit + Firefox) — DESIGN_SYSTEM.md's scrollbar
   colors have no effect in browsers that support neither API; this
   degrades gracefully to the browser default. */
* {
	scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

*::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

*::-webkit-scrollbar-track {
	background-color: var(--color-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
	background-color: var(--color-scrollbar-thumb);
	border-radius: var(--radius-full);
	border: 3px solid var(--color-scrollbar-track);
}

*::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-scrollbar-thumb-hover);
}

/* 404 page — Kadence renders it as a white .content-bg card with its
   own light search field, illegible on the dark palette. Too small
   for its own module and unreachable by the WooCommerce conditional
   in enqueue.php, so it lives here, scoped to body.error404. Same
   `html body` bump as everything above (Kadence's later-loaded rules
   win bare-class ties). */
html body.error404 .content-bg,
html body.error404 .entry-content-wrap,
html body.error404 .content-area {
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
}

html body.error404 .entry-hero,
html body.error404 .entry-hero-container-inner {
	background-color: var(--color-bg-hero);
}

html body.error404 .entry-hero .entry-title,
html body.error404 .entry-title {
	color: var(--color-text-primary);
}

/* Kadence's search-field keeps its own padding-right: 60px to clear
   the icon overlay described below — restating only the sides we
   actually need to change (not `padding` shorthand) so that reserved
   space survives. */
html body.error404 .search-form input.search-field {
	background-color: var(--color-input-background);
	color: var(--color-text-primary);
	border: var(--border-width-standard) solid var(--color-border-secondary);
	border-radius: var(--radius-md);
	padding-block: var(--space-12);
	padding-inline-start: var(--space-16);
	font-family: var(--font-family-base);
	font-size: var(--type-body-size);
}

html body.error404 .search-form input.search-field::placeholder {
	color: var(--color-text-muted);
}

/* `.search-submit` is Kadence's invisible 50-70px click-target overlay
   (transparent by design, `overflow: hidden`) — the earlier version of
   this rule painted it as a visible silver pill, which clipped the
   button's own text inside that narrow width. The actually-visible
   layer is the separate `.kadence-search-icon-wrap` icon; that's the
   one that needs a dark-palette color, not the invisible submit. */
html body.error404 .search-form .kadence-search-icon-wrap {
	color: var(--color-text-secondary);
}

html body.error404 .search-form .search-submit[type="submit"]:hover ~ .kadence-search-icon-wrap,
html body.error404 .search-form .search-submit[type="submit"]:focus ~ .kadence-search-icon-wrap {
	color: var(--color-text-primary);
}

/* Motion respects user preference without exception, per
   DESIGN_SYSTEM.md#section-8-transition-system. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
}