/*
 * Landing page design tokens and font loading.
 *
 * The landing templates render a complete, standalone HTML document
 * (their own `<head>`, header bar, hero and footer), so none of the site
 * chrome is present on the page. `inc/class-landing-templates.php`
 * dequeues the site theme's stylesheets on these pages and swaps in this
 * pair instead:
 *
 *   - `base.css`     : brand tokens, font stack, base element styles
 *   - `style-hcs.css`: the landing layout (header bar, hero, trust strip,
 *                       symptoms, services, steps, why, FAQ, final CTA)
 *
 * Ported from the standalone HCS design in
 * `Templates/HCS Heating and Cooling/Landing Pages/public/style.css`, which
 * was generated from `brand.json` + `pages.json` by `build.py`.
 *
 * @package HCS_Heating_and_Cooling
 */

/* ------------------------------------------------------------------
   Design tokens

   Kept as `:root` because the landing document is standalone — nothing
   else on these pages competes for these names. Values come from the
   HCS `brand.json` colour set.
------------------------------------------------------------------ */
:root {
	--navy: #14365a;
	--teal: #1f6aa5;
	--sea: #8fd3f4;
	--sand: #f6f8fb;
	--foam: #edf3f8;
	--red: #e8641b;
	--red-dark: #be5216;
	--cta-hi: #eb7736;
	--cta-lo: #cc5818;
	--cta-rgb: 232, 100, 27;
	--ink: #0d233a;
	--mute: #697785;
	--line: #e0eaf2;
	--radius: 12px;
	--on-dark: #d9dfe5;
	--on-dark-mute: #9cabba;
	--deepest: #0d233a;
	--font-display: 'Archivo', system-ui, sans-serif;
	--font-body: 'Figtree', system-ui, sans-serif;
}

/* ------------------------------------------------------------------
   Base
------------------------------------------------------------------ */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 18px;
	color: var(--ink);
	background: var(--sand);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-stretch: 90%;
	line-height: 1.05;
	letter-spacing: -0.015em;
}

a {
	color: inherit;
}

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

/* Visually-hidden but available to assistive technologies. The templates
   use this for the keyword paragraph that summarises each landing page. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}