/* ==========================================================================
   Hello 19/29 — core: fonts, tokens, base layer
   --------------------------------------------------------------------------
   Breakpoints (mirror Elementor site settings; written mobile-first):
     base        0 – 767     mobile
     768         768 – 880   mobile landscape
     881         881 – 1024  tablet
     1025        1025 – 1200 tablet landscape
     1201        1201 – 1366 laptop
     1367        1367 – 2399 desktop
     2400        2400+       widescreen
   CSS custom properties can't be used inside media queries, so the values
   above are repeated literally: @media (min-width: 768px) etc.

   Base rules use :where() (zero specificity) so Elementor content keeps
   winning wherever it sets its own styles.
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------- */

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Legacy families still named in Elementor data (Poppins: cart, checkout, account,
   single post; Roboto: Elementor defaults; Mohave: an unused footer block).
   Google Fonts are no longer loaded, so map them onto Outfit instead of letting
   the browser fall back to a serif. Brand decision: Outfit everywhere. */
@font-face {
	font-family: "Poppins";
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Mohave";
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin.woff2") format("woff2");
}

/* ---- Tokens -------------------------------------------------------------- */

:root {
	/* Palette (Elementor kit). Dark is the shop's scheme; 1929agency.com will add [data-theme="light"]. */
	--c-black: #000000;
	--c-graphite: #242424;
	--c-charcoal: #272727;
	--c-white: #ffffff;
	--c-fridge: #f1da0e;
	--c-mist: #c8d5dc;

	/* Semantic roles — components use these, never the raw palette. */
	--c-bg: var(--c-black);
	--c-surface: var(--c-graphite);
	--c-surface-2: var(--c-charcoal);
	--c-text: var(--c-white);
	--c-text-muted: #b8b8b8;            /* 10.6:1 on black, 7.8:1 on surface */
	--c-accent: var(--c-fridge);         /* 14.8:1 on black, 10.9:1 on surface */
	--c-on-accent: var(--c-black);
	--c-link: var(--c-fridge);
	--c-link-hover: var(--c-white);
	--c-line: rgb(255 255 255 / 0.16);
	--c-line-strong: rgb(255 255 255 / 0.4);
	--c-overlay: rgb(0 0 0 / 0.8);
	--c-danger: #ff7a6b;                 /* 8.3:1 on black */
	--c-success: #7bd88f;                /* 12.1:1 on black */
	--c-focus: var(--c-fridge);

	/* Type — fluid sizes from the Elementor kit. */
	--font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-xs: 0.8125rem;                  /* 13px — legal/meta only */
	--fs-sm: 0.875rem;                   /* 14px — labels, never body copy */
	--fs-base: 1rem;                     /* 16px — body minimum */
	--fs-lg: 1.125rem;
	--fs-h6: clamp(1.125rem, 1.0703rem + 0.1752vw, 1.333rem);
	--fs-h5: clamp(1.266rem, 1.1315rem + 0.4303vw, 1.777rem);
	--fs-h4: clamp(1.424rem, 1.1753rem + 0.7958vw, 2.369rem);
	--fs-h3: clamp(1.602rem, 1.1928rem + 1.3095vw, 3.157rem);
	--fs-h2: clamp(1.802rem, 1.1686rem + 2.0269vw, 4.209rem);
	--fs-h1: clamp(2.027rem, 1.0841rem + 3.0173vw, 5.61rem);
	--fs-hero: clamp(3.125rem, 2.6316rem + 1.5789vw, 5rem);
	--fs-product-title: clamp(1.125rem, 1.0592rem + 0.2105vw, 1.375rem);
	--lh-tight: 1.1;
	--lh-heading: 1.2;
	--lh-body: 1.55;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Space — 4px base, 8px rhythm. */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--gutter: 1rem;                      /* 16px side gutter on phones */
	--container: 1650px;                 /* Elementor kit container width */
	--section-y: var(--sp-8);

	/* Shape */
	--r-sm: 4px;
	--r-md: 12px;
	--r-pill: 999px;

	/* Controls */
	--tap: 44px;                         /* minimum touch target */
	--control-h: 48px;

	/* Motion — short, functional. Entrance animations are off site-wide. */
	--dur-fast: 120ms;
	--dur: 200ms;
	--dur-slow: 320ms;
	--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);

	/* Layers */
	--z-sticky: 100;
	--z-drawer: 1000;
	--z-modal: 1100;
	--z-toast: 1200;
	--z-gate: 1300;

	/* iOS safe areas */
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);

	color-scheme: dark;
}

@media (min-width: 768px) {
	:root {
		--gutter: 1.5rem;
	}
}

@media (min-width: 1025px) {
	:root {
		--gutter: 2.5rem;
		--section-y: var(--sp-9);
	}
}

@media (min-width: 2400px) {
	:root {
		--gutter: 4rem;
	}
}

/* ---- Base ---------------------------------------------------------------- */

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

:where(html) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Plain `body` (not :where) so it beats Hello's reset, which loads before us.
   The Elementor kit class on <body> still wins for colours. */
body {
	margin: 0;
	min-height: 100dvh;
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	/* Safety net against sideways scroll (e.g. off-canvas menus parked off-screen).
	   `clip`, unlike `hidden`, keeps position: sticky working. */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-sans);
	line-height: var(--lh-heading);
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

:where(img, svg, video, picture) {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(a) {
	color: var(--c-link);
	text-underline-offset: 0.18em;
	transition: color var(--dur-fast) var(--ease-out);
}

:where(a:hover) {
	color: var(--c-link-hover);
}

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

:where(button, [role="button"], a, label, summary, input[type="checkbox"], input[type="radio"], select) {
	touch-action: manipulation;
}

:where(button, [role="button"], summary) {
	cursor: pointer;
}

/* Stop iOS zooming into form fields: inputs must render at 16px or larger.
   !important because builder widgets (e.g. the Pro checkout) set 14px with
   high-specificity selectors; this is an accessibility floor, not styling. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"]),
select,
textarea {
	font-size: max(16px, 1rem) !important;
}

/* Stripe's invisible style-probe field is wider than its box on phones and
   caused a 4px sideways scroll on checkout. It only reads font/colour. */
#wc-stripe-hidden-style-input {
	width: 1px !important;
	max-width: 1px;
}

::selection {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

/* ---- Focus --------------------------------------------------------------- */

:where(:focus-visible) {
	outline: 2px solid var(--c-focus);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

/* On yellow surfaces a yellow ring disappears; switch to white + black halo. */
:where(.c-btn--primary, .is-accent):focus-visible {
	outline-color: var(--c-white);
	box-shadow: 0 0 0 5px var(--c-black);
}

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

/* ---- Accessibility helpers ------------------------------------------------ */

.screen-reader-text,
.u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus,
.u-visually-hidden.is-focusable:focus {
	position: fixed !important;
	top: calc(var(--safe-top) + var(--sp-2));
	left: var(--sp-2);
	z-index: calc(var(--z-gate) + 1);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--sp-3) var(--sp-5);
	clip: auto;
	background: var(--c-accent);
	color: var(--c-on-accent);
	font-weight: var(--fw-semibold);
	border-radius: var(--r-pill);
	text-decoration: none;
}

/* ---- Layout primitives ---------------------------------------------------- */

.l-container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.l-section {
	padding-block: var(--section-y);
}

.l-stack > * + * {
	margin-block-start: var(--stack-gap, var(--sp-4));
}

/* ---- Buttons --------------------------------------------------------------
   Pill buttons per the approved design: yellow fill or yellow 1px outline. */

.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: var(--control-h);
	min-width: var(--tap);
	padding: var(--sp-3) var(--sp-6);
	border: 1px solid var(--c-accent);
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--c-accent);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.c-btn:hover {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

.c-btn:active {
	transform: scale(0.98);
}

.c-btn--primary {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

.c-btn--primary:hover {
	background: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-on-accent);
}

.c-btn--block {
	width: 100%;
}

.c-btn[disabled],
.c-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.c-btn.is-loading {
	color: transparent !important;
	position: relative;
	pointer-events: none;
}

.c-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid currentColor;
	border-color: var(--c-on-accent) transparent var(--c-on-accent) transparent;
	border-radius: 50%;
	animation: h1929-spin 700ms linear infinite;
}

@keyframes h1929-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---- Motion policy ---------------------------------------------------------
   Decision 2026-10-04: no entrance animations. Elementor hides animated
   elements until they scroll in (.elementor-invisible); show them at once. */

.elementor-invisible {
	visibility: visible !important;
}

.elementor-element.animated {
	animation: none !important;
}

@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;
	}
}