/*!
 * AppAgentix - global layout system.
 *
 * Loaded first on every page, ahead of every other stylesheet, so that
 * everything below it inherits one set of tokens rather than restating
 * them. This is the file to change when a site-wide value moves.
 *
 *   Global tokens
 *     -> Global layout / container
 *       -> Global typography
 *         -> Global spacing
 *           -> Reusable components
 *             -> Page-specific styling, only where genuinely required
 *
 * WHY THE CONTAINER USES width: min()
 *
 * The brief is that 1200px is the CONTENT width, with the page gutters
 * outside it. `max-width: 1200px; padding: 0 24px` does the opposite -
 * under border-box it yields 1152px of content, and under content-box it
 * yields a 1248px box. Both were happening on this site at once, because
 * the only global box-sizing reset lived inside the location-page
 * stylesheet, so the header measured 1240px of content on the homepage
 * and 1200px on a city page.
 *
 *   width: min(100% - (gutter * 2), 1200px)
 *
 * gives exactly 1200px of content with the gutters outside it, is
 * immune to box-sizing, and cannot double up when containers nest - a
 * nested one simply resolves to 100% of its parent.
 *
 * Contents
 *   1. Tokens
 *   2. Reset
 *   3. Container
 *   4. Section spacing
 *   5. Typography
 *   6. Utilities
 *   7. Reduced motion
 */

/* =====================================================================
 * 1. Tokens
 * ================================================================== */

:root {
	/* --- Layout ---------------------------------------------------- */
	--container: 1200px;
	--gutter: 20px;
	--section-space: 48px;

	/* Breakpoints, recorded for reference. Media queries cannot read
	   custom properties, so the values below are repeated literally in
	   the queries - these exist so the set is documented in one place.
	     sm  640px   phone landscape
	     md  768px   tablet
	     lg  1024px  desktop
	     xl  1280px  wide desktop */

	/* --- Brand ------------------------------------------------------ */
	--brand: #654dff;
	--brand-deep: #6a34d4;
	--brand-alt: #8347ec;
	--brand-warm: #ffa15c;
	--brand-fill-blue: #dfcdff;
	--brand-fill-orange: #ffeee1;

	--ink: #14121c;
	--ink-soft: #3f3d4d;
	--ink-muted: #6b7280;
	--surface: #ffffff;
	--surface-soft: #faf9ff;
	--line: rgba(20, 18, 28, .12);

	/* --- Radius ----------------------------------------------------- */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	/* --- Motion ----------------------------------------------------- */
	--dur-fast: .18s;
	--dur: .28s;
	--dur-slow: .45s;
	--ease: cubic-bezier(.4, 0, .2, 1);

	/* --- Typography -------------------------------------------------- */
	/* One ramp for the whole site. Each step scales between its mobile
	   and desktop size, so there is no separate tablet declaration to
	   keep in sync. */
	--h1-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);      /* 36 -> 52 */
	--h2-size: clamp(1.75rem, 1.25rem + 1.75vw, 2.5rem);     /* 28 -> 40 */
	--h3-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);        /* 20 -> 24 */
	--h4-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);      /* 17 -> 18 */

	--h1-weight: 700;
	--h2-weight: 700;
	--h3-weight: 600;
	--h4-weight: 600;

	--h1-lh: 1.1;
	--h2-lh: 1.15;
	--h3-lh: 1.25;
	--h4-lh: 1.35;

	--h1-ls: -.02em;
	--h2-ls: -.02em;
	--h3-ls: -.01em;
	--h4-ls: normal;

	/* Page-hero display type. Larger than the H1 ramp because a hero
	   heading is the page's opening statement, but shared, so the three
	   hero styles cannot drift apart again - they were 60px/700,
	   52px/700 and 54px/800 with three different line heights. */
	--display-size: clamp(2.25rem, 1.25rem + 3.4vw, 3.5rem);  /* 36 -> 56 */
	--display-weight: 700;
	--display-lh: 1.25;
	--display-ls: -.022em;

	/* The comfortable reading measure for long-form prose. */
	--measure: 68ch;
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
		--section-space: 64px;
	}
}

@media (min-width: 1024px) {
	:root {
		--gutter: 40px;
		--section-space: 80px;
	}
}

/* =====================================================================
 * 2. Reset
 * ================================================================== */

/* This was previously declared only inside the location-page
   stylesheet, which is why the same header measured two different
   widths depending on the page. It belongs here, once, for everything. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Form controls do not inherit type. A <button>, <input>, <select> or
 * <textarea> takes the browser's own face unless it is told otherwise,
 * so every button on the site was rendering in Arial while everything
 * around it was Poppins - the lead form's submit included. Individual
 * components had been fixing this one at a time with `font: inherit`;
 * this is the same correction, once, for all of them.
 *
 * Only the family is inherited. Size and weight are left to the UA and
 * to each component, because a global `font: inherit` would resize every
 * control on the site.
 */
button,
input,
select,
optgroup,
textarea {
	font-family: inherit;
}

/* =====================================================================
 * 3. Container
 * ================================================================== */

/*
 * One container. The legacy class names are listed alongside the new one
 * rather than being rewritten across 17 components, 4 legal templates,
 * the header and the footer - the markup keeps working, and every one of
 * them now resolves to the same measurement.
 *
 * New work should use .site-container.
 */
.site-container,
.lp-container,
.lg-container,
.tta-footer .tta-container,
.tta-header__inner,
.ao-section__inner,
.ao-hero__inner,
.ao-section__inner--full .ao-section__head {
	width: min(100% - (var(--gutter) * 2), var(--container));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* Opt-out for content that is meant to reach the viewport edge. The
   background stays full width either way; this is about the content. */
.site-container--full,
.ao-section__inner--full {
	width: 100%;
	max-width: none;
}

/* A narrower column for long-form reading, still centred in the page. */
.site-container--narrow {
	width: min(100% - (var(--gutter) * 2), 820px);
}

/* =====================================================================
 * 4. Section spacing
 * ================================================================== */

.site-section {
	padding-block: var(--section-space);
}

.site-section--tight {
	padding-block: calc(var(--section-space) * .7);
}

.site-section--loose {
	padding-block: calc(var(--section-space) * 1.4);
}

.site-section--flush {
	padding-block: 0;
}

/* =====================================================================
 * 5. Typography
 * ================================================================== */

/*
 * Applied to the bare elements so existing markup inherits the ramp
 * without a class, and mirrored onto .site-h* for cases where the
 * heading level has to differ from the visual size (a carousel whose
 * second slide is an H2 but must look like the H1, for instance).
 *
 * Components that deliberately set their own heading size - the hero
 * display type, the gradient section titles - are left alone: they
 * declare their own font-size later in the cascade and continue to win.
 */
h1,
.site-h1 {
	font-size: var(--h1-size);
	font-weight: var(--h1-weight);
	line-height: var(--h1-lh);
	letter-spacing: var(--h1-ls);
}

h2,
.site-h2 {
	font-size: var(--h2-size);
	font-weight: var(--h2-weight);
	line-height: var(--h2-lh);
	letter-spacing: var(--h2-ls);
}

h3,
.site-h3 {
	font-size: var(--h3-size);
	font-weight: var(--h3-weight);
	line-height: var(--h3-lh);
	letter-spacing: var(--h3-ls);
}

h4,
.site-h4 {
	font-size: var(--h4-size);
	font-weight: var(--h4-weight);
	line-height: var(--h4-lh);
	letter-spacing: var(--h4-ls);
}

/* Long headings read better broken evenly than with one orphaned word. */
h1,
h2,
.site-h1,
.site-h2 {
	text-wrap: balance;
}

/* =====================================================================
 * 6. Utilities
 * ================================================================== */

.site-measure {
	max-width: var(--measure);
}

.site-center {
	text-align: center;
}

.site-center .site-measure {
	margin-inline: auto;
}

/* Visually hidden, still announced. */
.site-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
 * 7. Reduced motion
 * ================================================================== */

/*
 * A site-wide floor. Individual components still describe their own
 * reduced-motion behaviour where stopping outright would hide content -
 * the marquees become scrollable rather than frozen, for instance - and
 * those rules come later in the cascade, so they win.
 */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}