/*
 * Heavy Duty Commercial base stylesheet, loaded on every page.
 *
 * Layers, lowest priority first. inc/assets.php prints the same statement in
 * a <style> before any stylesheet, and every file in components/ wraps its
 * rules in @layer components.
 *
 * Unlayered CSS beats every layer, whatever its specificity. WordPress prints
 * theme.json global styles unlayered, so theme.json reads link values from
 * custom properties defined here:
 *   --link, --link-hover            link color, normal and hover
 *   --link-line, --link-hover-line  text-decoration, normal and hover
 * Restyle links by setting these on a container or on the link. A plain
 * "a { color }" inside a layer loses to the global styles.
 *
 * Breakpoints (media queries cannot read custom properties):
 *   40rem (640px) tablet, 64rem (1024px) desktop, 80rem (1280px) wide.
 *
 * Rules: hex values only in the tokens layer and theme.json, !important only in
 * utilities, no nesting (older Safari drops nested rules), no shadows, no pills.
 */
@layer reset, tokens, base, layout, components, utilities;

/*
 * Brand font slot (docs/OWNER-DECISIONS.md #3). Until the owner picks the
 * font, text uses the system stack in theme.json. When it is picked: put one
 * variable WOFF2 in assets/fonts/, uncomment both faces, put the family and
 * its fallback at the front of the "sans" fontFamily in theme.json, measure the
 * fallback overrides for that font, and preload the file in inc/assets.php.
 *
 * @font-face {
 *   font-family: "Archivo";
 *   src: url("../fonts/archivo-wght-latin.woff2") format("woff2");
 *   font-weight: 400 800;
 *   font-style: normal;
 *   font-display: swap;
 * }
 * @font-face {
 *   font-family: "Archivo Fallback";
 *   src: local("Arial");
 *   size-adjust: 100%;
 *   ascent-override: 90%;
 *   descent-override: 22%;
 *   line-gap-override: 0%;
 * }
 */

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

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

	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	figure,
	blockquote,
	dl,
	dd {
		margin: 0;
	}

	ul[role="list"],
	ol[role="list"] {
		margin: 0;
		padding: 0;
		list-style: none;
	}

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

	img,
	video {
		height: auto;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
		letter-spacing: inherit;
	}

	button {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	table {
		border-collapse: collapse;
	}
}

@layer tokens {
	:root {
		/* Palette from theme.json, so the editor and the front end share one source. */
		--ink: var(--wp--preset--color--ink);
		--body: var(--wp--preset--color--body);
		--mute: var(--wp--preset--color--mute); /* On white only. On --panel use --body. */
		--panel: var(--wp--preset--color--panel);
		--white: var(--wp--preset--color--white);
		--accent: var(--wp--preset--color--accent); /* Primary action and links. */
		--accent-strong: var(--wp--preset--color--accent-strong); /* Hover and focus. */
		--success: var(--wp--preset--color--success); /* Success text only. */
		--error: var(--wp--preset--color--error); /* Error text only. */

		/* Colors editors never pick. */
		--line: #e1e4e9; /* Decorative hairlines. */
		--control: #8a929c; /* Field and control borders, 3.15:1 on white (WCAG 1.4.11). */
		--green: #37b44a; /* Logo mark and graphics only. Never text, never under white text (2.70:1). */
		--scrim: rgb(17 20 24 / 0.55); /* Behind the open drawer. */
		--focus: var(--accent-strong);

		/* Type. */
		--font-sans: var(--wp--preset--font-family--sans);
		--text-sm: var(--wp--preset--font-size--small);
		--text-base: var(--wp--preset--font-size--base);
		--text-md: var(--wp--preset--font-size--medium);
		--text-lg: var(--wp--preset--font-size--large);
		--text-xl: var(--wp--preset--font-size--x-large);
		--text-2xl: var(--wp--preset--font-size--xx-large);
		--text-display: var(--wp--preset--font-size--display);

		/* Space: 4, 8, 12, 16, 24, 32, 48, 80 px. */
		--space-1: var(--wp--preset--spacing--10);
		--space-2: var(--wp--preset--spacing--20);
		--space-3: var(--wp--preset--spacing--30);
		--space-4: var(--wp--preset--spacing--40);
		--space-5: var(--wp--preset--spacing--50);
		--space-6: var(--wp--preset--spacing--60);
		--space-7: var(--wp--preset--spacing--70);
		--space-8: var(--wp--preset--spacing--80);
		--gutter: 1rem;
		--section: 3rem;

		/* Shape and size. */
		--wrap: 75rem;
		--prose: 45rem;
		--radius: 4px; /* Controls and buttons. */
		--radius-media: 6px; /* Image panels. */
		--target: 3rem; /* 48px touch targets. */
		--focus-ring: 3px solid var(--focus);
		--focus-offset: 2px;
		--phone-bar: 4rem;

		/* Links, read by theme.json global styles (see the top of this file). */
		--link: var(--accent);
		--link-hover: var(--accent-strong);
		--link-line: underline;
		--link-hover-line: underline;
	}

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

	@media (min-width: 64rem) {
		:root {
			--gutter: 2rem;
			--section: 5rem;
		}
	}
}

@layer base {
	html {
		color-scheme: light;
	}

	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100dvh;
		background: var(--white);
		color: var(--body);
		font-family: var(--font-sans);
		font-size: var(--text-base);
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--ink);
		font-weight: 700;
		line-height: 1.15;
		letter-spacing: -0.015em;
		text-wrap: balance;
	}

	h1 {
		font-size: var(--text-xl);
		font-weight: 750;
	}

	h2 {
		font-size: var(--text-lg);
	}

	h3 {
		font-size: var(--text-md);
	}

	h4,
	h5,
	h6 {
		font-size: var(--text-base);
	}

	@media (min-width: 40rem) {
		h1 {
			font-size: var(--text-2xl);
		}

		h2 {
			font-size: var(--text-xl);
		}

		h3 {
			font-size: var(--text-lg);
		}
	}

	p,
	li,
	dd,
	figcaption {
		text-wrap: pretty;
	}

	a {
		color: var(--link);
		text-decoration-line: var(--link-line);
		text-underline-offset: 0.18em;
	}

	a:hover {
		color: var(--link-hover);
		text-decoration-line: var(--link-hover-line);
	}

	:focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--focus-offset);
	}

	b,
	strong {
		font-weight: 650;
	}

	small {
		font-size: var(--text-sm);
	}

	hr {
		margin-block: var(--space-6);
		border: 0;
		border-top: 1px solid var(--line);
	}

	blockquote {
		padding-inline-start: var(--space-5);
		border-inline-start: 3px solid var(--line);
	}

	figcaption {
		margin-top: var(--space-2);
		color: var(--mute);
		font-size: var(--text-sm);
	}

	code,
	kbd,
	pre,
	samp {
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 0.9em;
	}

	label {
		color: var(--ink);
		font-weight: 600;
	}

	input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"]),
	select,
	textarea {
		width: 100%;
		min-height: var(--target);
		padding: 0.625rem 0.75rem;
		border: 1px solid var(--control);
		border-radius: var(--radius);
		background: var(--white);
		color: var(--ink);
	}

	textarea {
		min-height: 8rem;
	}

	::placeholder {
		color: var(--mute);
		opacity: 1;
	}

	table {
		width: 100%;
	}

	th,
	td {
		padding: 0.75rem;
		border-top: 1px solid var(--line);
		text-align: left;
		vertical-align: top;
	}

	th {
		color: var(--ink);
		font-weight: 650;
	}

	/* Block buttons get color and padding from theme.json; this adds the target size. */
	.wp-element-button,
	.wp-block-button__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--target);
	}

	@media (max-width: 39.99rem) {
		html {
			scroll-padding-bottom: calc(var(--phone-bar) + 1rem); /* Focus never hides under the phone bar (WCAG 2.4.11). */
		}
	}
}

@layer layout {
	.hdc-main {
		flex: 1 0 auto;
	}

	.hdc-main:focus {
		outline: none; /* Focus lands here from the skip link; <main> is not a control. */
	}

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

	.hdc-wrap--prose {
		max-width: calc(var(--prose) + 2 * var(--gutter));
	}

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

	/*
	 * Post content. Templates give .hdc-prose WordPress's own class
	 * is-layout-constrained, so core's unlayered layout rules size and space
	 * the blocks from theme.json (contentSize, wideSize, blockGap) exactly as
	 * the editor does. Core's figure margins would beat any layered spacing.
	 * These sizes keep a gutter on phones; nested groups reset them so the
	 * gutter is not applied twice.
	 */
	.hdc-prose {
		--wp--style--global--content-size: min(var(--prose), 100% - 2 * var(--gutter));
		--wp--style--global--wide-size: min(var(--wrap), 100% - 2 * var(--gutter));
	}

	.hdc-prose--wide {
		--wp--style--global--content-size: min(var(--wrap), 100% - 2 * var(--gutter));
	}

	.hdc-prose .is-layout-constrained:not(.alignfull) {
		--wp--style--global--content-size: var(--prose);
		--wp--style--global--wide-size: var(--wrap);
	}

	.hdc-prose .wp-block-group.has-background {
		padding-block: var(--space-6);
	}

	.hdc-prose :is(ul, ol):not([role="list"]) {
		padding-inline-start: 1.25em;
	}

	.hdc-prose li + li {
		margin-block-start: 0.375em;
	}

	.hdc-stack > * + * {
		margin-block-start: var(--stack, var(--space-4));
	}

	.hdc-cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--cluster, var(--space-3));
	}
}

/*
 * Site-wide primitives: icons, buttons and the content/* parts. The site/* parts
 * are in components/site.css; other components have their own file there.
 */
@layer components {
	.hdc-icon {
		flex: none;
		width: 1.25em;
		height: 1.25em;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* Buttons. Variants change the --button-* properties only. */
	.hdc-button {
		--button-bg: var(--accent);
		--button-fg: var(--white);
		--button-edge: var(--accent);
		--button-bg-hover: var(--accent-strong);
		--button-fg-hover: var(--white);
		--button-edge-hover: var(--accent-strong);
		--link: var(--button-fg);
		--link-hover: var(--button-fg-hover);
		--link-line: none;
		--link-hover-line: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		min-height: var(--target);
		padding: var(--space-2) var(--space-5);
		border: 2px solid var(--button-edge);
		border-radius: var(--radius);
		background: var(--button-bg);
		color: var(--button-fg);
		font-weight: 650;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	}

	.hdc-button:hover {
		border-color: var(--button-edge-hover);
		background: var(--button-bg-hover);
		color: var(--button-fg-hover);
	}

	.hdc-button--secondary {
		--button-bg: var(--white);
		--button-fg: var(--ink);
		--button-edge: var(--ink);
		--button-bg-hover: var(--ink);
		--button-fg-hover: var(--white);
		--button-edge-hover: var(--ink);
	}

	/* Search form (parts/content/search-form.php). */
	.hdc-content-search-form {
		display: grid;
		gap: var(--space-2);
	}

	.hdc-content-search-form__row {
		display: flex;
		gap: var(--space-2);
	}

	.hdc-content-search-form__input {
		flex: 1;
		min-width: 0;
	}

	/* Listing page title (parts/content/page-header.php). */
	.hdc-content-page-header {
		margin-bottom: var(--space-6);
	}

	.hdc-content-page-header__intro {
		margin-top: var(--space-3);
		font-size: var(--text-md);
	}

	.hdc-content-page-header__intro > * + * {
		margin-top: 0.75em;
	}

	/* Article (parts/content/article.php). */
	.hdc-content-article {
		padding-block: var(--section);
	}

	.hdc-content-article__header {
		margin-bottom: var(--space-6);
	}

	.hdc-content-article__meta {
		margin-top: var(--space-2);
		color: var(--mute);
		font-size: var(--text-sm);
	}

	.hdc-content-article__media {
		margin-bottom: var(--space-6);
	}

	.hdc-content-article__media img {
		width: 100%;
		border-radius: var(--radius-media);
		background: var(--panel);
	}

	/* Ruled list (parts/content/list.php). */
	.hdc-content-list {
		margin-top: var(--space-6);
		border-top: 1px solid var(--line);
	}

	.hdc-content-list__item {
		padding-block: var(--space-5);
		border-bottom: 1px solid var(--line);
	}

	.hdc-content-list__title {
		font-size: var(--text-md);
	}

	.hdc-content-list__title a {
		--link: var(--ink);
		--link-line: none;
	}

	.hdc-content-list__meta {
		margin-top: var(--space-1);
		color: var(--mute);
		font-size: var(--text-sm);
	}

	.hdc-content-list__excerpt {
		margin-top: var(--space-2);
	}

	.hdc-content-list__empty,
	.hdc-empty {
		margin-top: var(--space-6);
	}

	.hdc-empty > * + * {
		margin-top: var(--space-4);
	}

	/* Pagination, core markup from the_posts_pagination(). */
	.hdc-content-list__pagination {
		margin-top: var(--space-6);
	}

	.hdc-content-list__pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.hdc-content-list__pagination .page-numbers {
		--link-line: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--target);
		min-height: var(--target);
		padding-inline: var(--space-3);
		border: 1px solid var(--line);
		border-radius: var(--radius);
	}

	.hdc-content-list__pagination .current {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--white);
	}

	.hdc-content-article__pages {
		margin-top: var(--space-6);
	}
}

@layer utilities {
	.hdc-visually-hidden,
	.screen-reader-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip-path: inset(50%) !important;
		border: 0 !important;
		white-space: nowrap !important;
	}

	[hidden]:not([hidden="until-found"]) {
		display: none !important;
	}

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