/**
 * HomesArchives design system.
 *
 * Tokens and reusable editorial primitives for the homepage. This file carries
 * the visual language (colour, type, rhythm, shape) and the unstyled building
 * blocks that future homepage sections compose from. It renders nothing on its
 * own: every class here waits for markup that does not exist yet.
 *
 * Structural container rules (.ha-home, .ha-home__section, .ha-container) live
 * in homepage.css and are deliberately left untouched.
 *
 * Scoped to .ha-homepage so no other template on the site inherits any of it.
 * Loaded on the homepage only, enqueued by inc/design-system.php.
 *
 * @package GeneratePress_Child
 */

/* The page ground. Sections paint their own bands over this. */
.ha-homepage,
.ha-archive,
.ha-az-page {
	background-color: var(--ha-bg);
}

/* Text selection uses the light mint from the brand palette. */
.ha-homepage ::selection,
.ha-archive ::selection,
.ha-az-page ::selection {
	background-color: var(--ha-accent-soft);
	color: var(--ha-ink);
}

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

.ha-homepage,
.ha-archive,
.ha-az-page {
	/* --- Colour ------------------------------------------------------------
	   Emerald Odyssey. Four brand greens carry the palette: #00674F is the
	   resting accent, #3EBB9E lifts hover and focus states, #73E6CB is a
	   light ground for tinted blocks, and #0A3C30 serves as both the deepest
	   accent and the ink. Neutrals are tinted toward the same green so they
	   read as chosen rather than as default grey. No pure black anywhere. */

	--ha-bg: #E8F3EF;
	--ha-surface: #FFFFFF;

	--ha-ink: #0A3C30;
	--ha-ink-muted: #3D5B52;
	--ha-ink-soft: #557166;

	--ha-rule: #D3E8E1;
	--ha-rule-strong: #A9D2C6;

	--ha-accent: #00674F;
	--ha-accent-mid: #3EBB9E;
	--ha-accent-deep: #0A3C30;
	--ha-accent-soft: #73E6CB;

	/* --- Type families -----------------------------------------------------
	   System stacks only. The site loads no webfont today and this adds none,
	   so there is no external request and no third-party dependency. The
	   display stack resolves to an old-style editorial serif on every major
	   platform; the body stack resolves to the native UI sans. */

	--ha-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--ha-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* --- Type scale --------------------------------------------------------
	   Fluid between mobile and desktop. Display and headings sit tight;
	   body stays comfortable. */

	--ha-size-display: clamp(2.5rem, 5.6vw, 4.25rem);
	--ha-size-h1: clamp(2rem, 4.2vw, 3.125rem);
	--ha-size-h2: clamp(1.5rem, 2.9vw, 2.125rem);
	--ha-size-h3: clamp(1.125rem, 1.8vw, 1.4375rem);
	--ha-size-body: 1.0625rem;
	--ha-size-small: 0.875rem;
	--ha-size-label: 0.75rem;

	--ha-leading-display: 1.04;
	--ha-leading-h1: 1.08;
	--ha-leading-h2: 1.14;
	--ha-leading-h3: 1.28;
	--ha-leading-body: 1.65;

	--ha-track-tight: -0.014em;
	--ha-track-label: 0.12em;

	/* Running text measure, keeps lines in the comfortable reading band. */
	--ha-measure: 68ch;

	/* --- Rhythm ------------------------------------------------------------
	   Section and gutter tokens already exist in homepage.css. These add the
	   gaps used between cards, rows and grid cells. */

	--ha-gap: clamp(1.25rem, 2.4vw, 2rem);
	--ha-gap-lg: clamp(2rem, 4vw, 3.5rem);
	--ha-gap-sm: 0.75rem;

	/* --- Shape -------------------------------------------------------------
	   One radius, locked at zero. Editorial surfaces are square. Elevation is
	   a hairline rule, not a shadow; the shadow token exists for the rare case
	   where something genuinely floats, and is tinted to the ground. */

	--ha-radius: 0;
	--ha-border-width: 1px;
	--ha-shadow: 0 1px 2px rgba(28, 26, 23, 0.05), 0 10px 28px rgba(28, 26, 23, 0.05);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

.ha-homepage,
.ha-archive,
.ha-az-page {
	background-color: var(--ha-bg);
	color: var(--ha-ink);
	font-family: var(--ha-font-body);
	font-size: var(--ha-size-body);
	line-height: var(--ha-leading-body);
	-webkit-font-smoothing: antialiased;
}

/* Media never exceeds its column, which is what keeps mobile free of
   horizontal overflow. .ha-media > img overrides this where a fixed ratio
   box is in use. */
.ha-home img,
.ha-home svg,
.ha-home video,
.ha-archive img,
.ha-archive svg,
.ha-archive video {
	max-width: 100%;
	height: auto;
}

.ha-homepage :focus-visible,
.ha-archive :focus-visible {
	outline: 2px solid var(--ha-accent-deep);
	outline-offset: 3px;
}

/* ==========================================================================
   3. Typography primitives
   ========================================================================== */

.ha-h1,
.ha-h2,
.ha-h3 {
	font-family: var(--ha-font-display);
	font-weight: 600;
	color: var(--ha-ink);
	margin: 0;
	text-wrap: balance;
}

.ha-h1 {
	font-size: var(--ha-size-h1);
	line-height: var(--ha-leading-h1);
	letter-spacing: var(--ha-track-tight);
}

.ha-h2 {
	font-size: var(--ha-size-h2);
	line-height: var(--ha-leading-h2);
	letter-spacing: -0.008em;
}

.ha-h3 {
	font-size: var(--ha-size-h3);
	line-height: var(--ha-leading-h3);
}

/* Running text. Capped to a readable measure. */
.ha-body {
	font-family: var(--ha-font-body);
	font-size: var(--ha-size-body);
	line-height: var(--ha-leading-body);
	color: var(--ha-ink-muted);
	max-width: var(--ha-measure);
	margin: 0;
}

.ha-body--lead {
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--ha-ink-muted);
}

/* Metadata, captions, timestamps. */
.ha-small {
	font-family: var(--ha-font-body);
	font-size: var(--ha-size-small);
	line-height: 1.5;
	color: var(--ha-ink-soft);
	margin: 0;
}

/* Eyebrow / label. Use sparingly: at most one per few sections. */
.ha-eyebrow {
	display: inline-block;
	font-family: var(--ha-font-body);
	font-size: var(--ha-size-label);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--ha-track-label);
	text-transform: uppercase;
	color: var(--ha-accent-deep);
	margin: 0;
}

/* ==========================================================================
   4. Section heading
   ========================================================================== */

.ha-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ha-gap-sm) var(--ha-gap);
	padding-bottom: 0.9rem;
	margin-bottom: var(--ha-gap-lg);
	border-bottom: var(--ha-border-width) solid var(--ha-rule-strong);
}

.ha-section-head__text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

/* ==========================================================================
   5. Layout primitives
   ========================================================================== */

/* Card grid. min() stops the track floor exceeding the viewport on mobile,
   which is the usual cause of horizontal overflow in auto-fit grids. */
.ha-grid {
	display: grid;
	gap: var(--ha-gap-lg) var(--ha-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ha-grid-min, 17rem)), 1fr));
}

.ha-grid--3 {
	--ha-grid-min: 17rem;
}

/* ==========================================================================
   6. Image wrapper
   ========================================================================== */

/* Fixed-ratio box. The accent tint is a declared placeholder ground so an
   empty or slow-loading slot still reads as on-brand rather than blank. */
.ha-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background-color: var(--ha-rule);
	border-radius: var(--ha-radius);
}

.ha-media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ha-media--square {
	aspect-ratio: 1 / 1;
}

/* ==========================================================================
   7. Article card
   ========================================================================== */

/* No card chrome by default: no box, no shadow, no radius. A card is a stack
   of content separated by whitespace. Chrome is opt-in via --framed, and only
   where a raised surface means something. */
.ha-card {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-width: 0;
}

.ha-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.ha-card__title {
	margin: 0;
}

.ha-card__title a {
	color: inherit;
	text-decoration: none;
}

.ha-card__title a:hover,
.ha-card__title a:focus-visible {
	color: var(--ha-accent-deep);
}

.ha-card__excerpt {
	color: var(--ha-ink-muted);
	margin: 0;
}

/* ==========================================================================
   8. Metadata row
   ========================================================================== */

.ha-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem var(--ha-gap-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--ha-font-body);
	font-size: var(--ha-size-small);
	line-height: 1.4;
	color: var(--ha-ink-soft);
}

.ha-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
}

/* ==========================================================================
   11. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ha-homepage *,
	.ha-homepage *::before,
	.ha-homepage *::after,
	.ha-archive *,
	.ha-archive *::before,
	.ha-archive *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}