/*
 * Base layer: normalisation, typography, layout system, surfaces, and
 * accessibility utilities.
 *
 * Nothing here is component specific. Components live in components.css and
 * cards.css, motion lives in motion.css.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Keeps an in page anchor from landing underneath the sticky header. */
	scroll-padding-block-start: 7rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

body {
	margin: 0;
	background: var(--afc-color-surface);
	color: var(--afc-color-text);
	font-family: var(--afc-font-body);
	font-size: var(--afc-text-body);
	font-weight: var(--afc-weight-body);
	line-height: var(--afc-leading-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	/* Nothing in the system may push the page sideways. */
	overflow-x: clip;
}

img,
picture,
svg,
video,
canvas {
	max-inline-size: 100%;
	block-size: auto;
}

svg {
	flex: 0 0 auto;
}

a {
	color: var(--afc-color-brand-red);
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--afc-color-brand-red-dark);
}

/* ---------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 var(--afc-space-sm);
	color: var(--afc-color-text-strong);
	font-family: var(--afc-font-display);
	font-weight: var(--afc-weight-bold);
	font-variation-settings: var(--afc-display-variation);
	line-height: var(--afc-leading-heading);
	letter-spacing: var(--afc-tracking-heading);
	text-wrap: balance;
}

h1,
.afc-h1 {
	font-size: var(--afc-text-h1);
	line-height: var(--afc-leading-tight);
	letter-spacing: var(--afc-tracking-display);
}

h2,
.afc-h2 {
	font-size: var(--afc-text-h2);
}

h3,
.afc-h3 {
	font-size: var(--afc-text-h3);
}

h4,
.afc-h4 {
	font-size: var(--afc-text-h4);
}

.afc-display {
	font-family: var(--afc-font-display);
	font-size: var(--afc-text-display);
	font-weight: var(--afc-weight-bold);
	font-variation-settings: var(--afc-display-variation);
	line-height: var(--afc-leading-tight);
	letter-spacing: var(--afc-tracking-display);
	text-wrap: balance;
}

p,
ul,
ol,
dl,
figure,
blockquote,
table {
	margin-block: 0 var(--afc-space-sm);
}

/*
 * The user agent gives figure and blockquote a 40 pixel margin on both sides, and
 * setting only margin-block above leaves it in place. Left alone it insets every
 * card photograph and every quotation by 40 pixels, which reads as a mistake rather
 * than as a margin.
 */
figure,
blockquote {
	margin-inline: 0;
}

address {
	font-style: normal;
}

strong,
b {
	font-weight: var(--afc-weight-bold);
}

small,
.afc-text-small {
	font-size: var(--afc-text-body-sm);
}

.afc-text-lead {
	font-size: var(--afc-text-body-lg);
	line-height: var(--afc-leading-snug);
	color: var(--afc-color-text);
	text-wrap: pretty;
}

.afc-text-muted {
	color: var(--afc-color-text-muted);
}

.afc-caption {
	font-size: var(--afc-text-caption);
	color: var(--afc-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Layout system
 * ------------------------------------------------------------------------ */

.afc-container {
	inline-size: 100%;
	max-inline-size: var(--afc-width-content);
	margin-inline: auto;
	padding-inline: var(--afc-gutter);
}

.afc-container--narrow {
	max-inline-size: var(--afc-width-narrow);
}

.afc-container--wide {
	max-inline-size: var(--afc-width-wide);
}

.afc-container--full {
	max-inline-size: var(--afc-width-full);
	padding-inline: 0;
}

.afc-main {
	display: block;
}

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

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

.afc-section--flush-top {
	padding-block-start: 0;
}

.afc-section--flush-bottom {
	padding-block-end: 0;
}

/* Surfaces */

.afc-surface--subtle {
	background: var(--afc-color-surface-subtle);
}

.afc-surface--stone {
	background: var(--afc-color-surface-stone);
}

.afc-surface--dark,
.afc-surface--darker {
	background: var(--afc-color-surface-dark);
	color: var(--afc-color-text-on-dark);
}

.afc-surface--darker {
	background: var(--afc-color-surface-darker);
}

.afc-surface--dark :where(h1, h2, h3, h4, h5, h6),
.afc-surface--darker :where(h1, h2, h3, h4, h5, h6) {
	color: var(--afc-color-text-on-dark);
}

.afc-surface--dark :where(.afc-text-muted, .afc-caption),
.afc-surface--darker :where(.afc-text-muted, .afc-caption) {
	color: var(--afc-color-text-muted-on-dark);
}

.afc-surface--dark a:not(.afc-btn),
.afc-surface--darker a:not(.afc-btn) {
	color: var(--afc-color-text-on-dark);
}

/* Grids */

.afc-grid {
	display: grid;
	gap: var(--afc-gap-grid);
}

/* Several components return a list item, so a grid is sometimes a list. It stays
   a list for assistive technology and loses only the marker and the indent. */
ul.afc-grid,
ol.afc-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

.afc-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.afc-grid--auto-wide {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.afc-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.afc-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.afc-grid--4 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.afc-grid--tight {
	gap: var(--afc-gap-tight);
}

/* Split layout, used for residential and commercial style sections */

.afc-split {
	display: grid;
	gap: var(--afc-gap-grid);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	align-items: center;
}

.afc-split--top {
	align-items: start;
}

/* Small composition helpers */

.afc-stack > * + * {
	margin-block-start: var(--afc-space-sm);
}

.afc-stack--lg > * + * {
	margin-block-start: var(--afc-space-lg);
}

.afc-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--afc-space-xs);
}

.afc-cluster--between {
	justify-content: space-between;
}

/* ---------------------------------------------------------------------------
 * Entry layout
 *
 * A reconstructed page is core blocks, and core blocks expect three widths to be
 * available: the reading measure, wide, and full. A classic template does not get
 * the block editor's layout wrappers, so the widths are provided here with a named
 * line grid. Every child lands on the reading measure unless it asks for more.
 *
 * The gutter columns are the outer two. A full width child spans the whole grid,
 * which is how a dark section reaches the edge of the viewport while the paragraph
 * above it stays comfortable to read.
 * ------------------------------------------------------------------------ */

.afc-entry {
	--afc-entry-reading: var(--afc-width-narrow);
	--afc-entry-flank: calc((var(--afc-width-content) - var(--afc-entry-reading)) / 2);

	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--afc-gutter), 1fr)
		[wide-start] minmax(0, var(--afc-entry-flank))
		[content-start] minmax(0, var(--afc-entry-reading)) [content-end]
		minmax(0, var(--afc-entry-flank)) [wide-end]
		minmax(var(--afc-gutter), 1fr) [full-end];
}

.afc-entry > * {
	grid-column: content;
	min-inline-size: 0;
}

/*
 * Rhythm. A grid gap cannot be used, because the gap would apply between a
 * paragraph and the next paragraph as well as between a paragraph and a full width
 * section, and those two need very different amounts of room. Margins are used
 * instead so each element can state its own.
 */
.afc-entry > * + * {
	margin-block-start: var(--afc-space-sm);
}

.afc-entry > :where(h2, h3, h4) + * {
	margin-block-start: var(--afc-space-xs);
}

.afc-entry > * + :where(h2) {
	margin-block-start: var(--afc-space-xl);
}

.afc-entry > * + :where(h3, h4) {
	margin-block-start: var(--afc-space-lg);
}

/* A full width section supplies its own vertical padding, so the margin only has
   to separate it from the prose rather than space it internally. */
.afc-entry > * + .alignfull,
.afc-entry > .alignfull + * {
	margin-block-start: var(--afc-space-xl);
}

.afc-entry > .alignfull + .alignfull {
	margin-block-start: 0;
}

.afc-entry > :first-child {
	margin-block-start: 0;
}

.afc-entry > :last-child {
	margin-block-end: 0;
}

.afc-entry :where(ul, ol) {
	padding-inline-start: 1.25em;
}

.afc-entry li + li {
	margin-block-start: 0.35em;
}

.afc-entry > .alignwide {
	grid-column: wide;
}

.afc-entry > .alignfull {
	grid-column: full;
	max-inline-size: none;
}

/* A full width child supplies its own container, so it must not inherit a
   horizontal margin from the block editor's alignment defaults. */
.afc-entry > .alignfull:where(.wp-block-group, .wp-block-cover, .wp-block-columns) {
	margin-inline: 0;
}

/* Left and right aligned floats still need a measure to float within. */
.afc-entry > .alignleft {
	grid-column: content;
	float: inline-start;
	margin-inline-end: var(--afc-space-md);
}

.afc-entry > .alignright {
	grid-column: content;
	float: inline-end;
	margin-inline-start: var(--afc-space-md);
}

.afc-prose {
	max-inline-size: var(--afc-width-narrow);
}

.afc-prose > :last-child {
	margin-block-end: 0;
}

.afc-prose :where(h2, h3, h4) {
	margin-block-start: var(--afc-space-lg);
}

.afc-prose :where(ul, ol) {
	padding-inline-start: 1.25em;
}

.afc-prose li + li {
	margin-block-start: 0.35em;
}

/* Architectural rule, a restrained brand accent used above headings */

.afc-rule {
	display: block;
	inline-size: 56px;
	block-size: var(--afc-rule-weight);
	background: var(--afc-color-rule-accent);
	border: 0;
	margin-block: 0 var(--afc-space-sm);
}

.afc-rule--center {
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Accessibility utilities
 * ------------------------------------------------------------------------ */

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.afc-skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: var(--afc-z-skip-link);
	padding: 0.75rem 1.25rem;
	background: var(--afc-color-surface-darker);
	color: var(--afc-white);
	font-weight: var(--afc-weight-bold);
	text-decoration: none;
	transform: translateY(-120%);
	transition: transform var(--afc-duration-fast) var(--afc-ease-standard);
}

.afc-skip-link:focus {
	transform: translateY(0);
	color: var(--afc-white);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--afc-focus-ring-width) solid var(--afc-color-focus);
	outline-offset: var(--afc-focus-ring-offset);
	border-radius: var(--afc-radius-xs);
}

/* Dark surfaces need a light ring. The header bar is light, so it keeps the
   default navy ring. */
.afc-utility :where(a, button):focus-visible,
.afc-footer :where(a, button):focus-visible,
.afc-cta--dark :where(a, button):focus-visible,
.afc-call-bar :where(a, button):focus-visible,
.afc-surface--dark :where(a, button, summary):focus-visible,
.afc-surface--darker :where(a, button, summary):focus-visible {
	outline-color: var(--afc-color-focus-on-dark);
}

/* Editor only affordances. The body class is added for users who can edit. */

.afc-editor-note {
	margin-block: var(--afc-space-sm);
	padding: var(--afc-space-sm);
	border-inline-start: var(--afc-rule-weight) solid var(--afc-color-heritage-red);
	background: var(--afc-color-surface-stone);
	color: var(--afc-color-text);
	font-size: var(--afc-text-body-sm);
}

.afc-editor-note__legacy {
	margin-block-start: var(--afc-space-xs);
	padding: var(--afc-space-xs);
	background: var(--afc-white);
	max-block-size: 22rem;
	overflow-y: auto;
}

/* ---------------------------------------------------------------------------
 * Floating call FAB — mobile hide
 *
 * floating-call-fab.css loads only at min-width: 900px. The FAB markup still
 * ships in the footer for desktop, so this rule must live in base.css to keep
 * the icon from appearing unstyled below the footer on small screens.
 * ------------------------------------------------------------------------ */

@media (max-width: 899px) {
	.afc-floating-call {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Print
 * ------------------------------------------------------------------------ */

@media print {
	.afc-header,
	.afc-call-bar,
	.afc-floating-call,
	.afc-skip-link,
	.afc-breadcrumbs {
		display: none !important;
	}

	/* Collapsed answers must still print. The script also opens every details
	   element on beforeprint, which is the reliable path. */
	details {
		display: block !important;
	}

	details > *:not(summary) {
		display: block !important;
	}

	::details-content {
		content-visibility: visible !important;
		block-size: auto !important;
	}

	body {
		background: #ffffff;
		color: #000000;
		font-size: 12pt;
	}
}