/**
 * AFAM base components. Everything is namespaced afam-* so it cannot restyle existing pages.
 * Author: Kiriago <kiryc0de@gmail.com> (https://github.com/kirycode/)
 */
.afam-scope {
	font-family: var(--afam-font-body);
	font-size: var(--afam-fs-body);
	line-height: var(--afam-lh-body);
	color: var(--afam-ink-900);
}

.afam-scope h1,
.afam-scope h2,
.afam-scope h3,
.afam-scope h4 {
	font-family: var(--afam-font-head);
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
	color: var(--afam-green-900);
	margin: 0 0 var(--afam-sp-4);
}

.afam-scope h1 { font-size: var(--afam-fs-h1); }
.afam-scope h2 { font-size: var(--afam-fs-h2); }
.afam-scope h3 { font-size: var(--afam-fs-h3); }
.afam-scope p { max-width: 70ch; margin: 0 0 var(--afam-sp-4); }

.afam-scope a:not(.afam-btn) {
	color: var(--afam-green-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.afam-scope a:not(.afam-btn):hover { color: var(--afam-green-500); }

/* Focus: visible on every interactive element, never hidden behind a sticky header. */
.afam-scope :focus-visible,
.afam-btn:focus-visible {
	outline: none;
	box-shadow: var(--afam-focus-ring);
}

html { scroll-padding-top: calc(var(--afam-hdr-main) + var(--afam-sp-4)); }

/* Buttons: 44 px minimum height. */
.afam-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--afam-sp-2);
	min-height: 44px;
	padding: 0 var(--afam-sp-5);
	border: 2px solid transparent;
	border-radius: var(--afam-hdr-cta-radius);
	font-family: var(--afam-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--afam-transition), color var(--afam-transition), border-color var(--afam-transition);
}

.afam-btn--primary { background: var(--afam-green-600); color: #fff; }
.afam-btn--primary:hover { background: var(--afam-green-500); color: #fff; }
.afam-btn--cta { background: var(--afam-cta-bg); color: var(--afam-cta-fg); }
.afam-btn--cta:hover { background: var(--afam-cta-bg-hover); color: var(--afam-cta-fg-hover); }
.afam-btn--ghost { background: transparent; color: var(--afam-green-600); border-color: var(--afam-green-600); }
.afam-btn--ghost:hover { background: var(--afam-green-600); color: #fff; }
.afam-btn[disabled],
.afam-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Cards */
.afam-card {
	background: var(--afam-white);
	border: 1px solid var(--afam-line);
	border-radius: var(--afam-radius-card);
	padding: var(--afam-sp-5);
	transition: transform var(--afam-transition), box-shadow var(--afam-transition);
}

.afam-card:hover { transform: translateY(-2px); box-shadow: var(--afam-shadow-card); }

/* Section header: small orange rule + heading. */
.afam-section-head::before {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-bottom: var(--afam-sp-3);
	background: var(--afam-orange-500);
	border-radius: 2px;
}

/* Stat tile */
.afam-stat { text-align: center; }
.afam-stat__num { font-family: var(--afam-font-head); font-size: 2.25rem; color: var(--afam-green-600); display: block; }
.afam-stat__label { font-size: var(--afam-fs-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--afam-ink-700); }

/* Pull quote and callout */
.afam-quote { border-left: 4px solid var(--afam-orange-500); padding: var(--afam-sp-2) var(--afam-sp-5); font-family: var(--afam-font-head); font-style: italic; color: var(--afam-green-900); }
.afam-callout { background: var(--afam-surface); border-left: 4px solid var(--afam-green-500); padding: var(--afam-sp-4) var(--afam-sp-5); border-radius: 0 var(--afam-radius-card) var(--afam-radius-card) 0; }

/* Badges and status pills (text plus colour, never colour alone). */
.afam-badge { display: inline-block; padding: 2px 10px; border-radius: var(--afam-radius-pill); font-size: var(--afam-fs-small); font-weight: 700; background: var(--afam-surface); color: var(--afam-green-900); border: 1px solid var(--afam-green-500); }
.afam-badge--gold { background: #fff; color: var(--afam-green-900); border-color: var(--afam-gold-500); box-shadow: inset 0 -3px 0 var(--afam-gold-500); }
.afam-badge--warn { color: var(--afam-orange-700); border-color: var(--afam-orange-700); }

/* Form fields: label above, 44 px high, error text with icon and aria-describedby. */
.afam-field { display: flex; flex-direction: column; gap: var(--afam-sp-1); margin-bottom: var(--afam-sp-4); }
.afam-field label { font-weight: 700; }
.afam-field input,
.afam-field select,
.afam-field textarea {
	min-height: 44px;
	padding: 0 var(--afam-sp-3);
	font: inherit;
	border: 1px solid var(--afam-ink-500);
	border-radius: var(--afam-radius-input);
	background: #fff;
	color: var(--afam-ink-900);
}
.afam-field textarea { padding: var(--afam-sp-3); min-height: 120px; }
.afam-field__error { color: var(--afam-orange-700); font-size: var(--afam-fs-small); }
.afam-field__error::before { content: "\26A0\00a0"; }

/* Tabs (ARIA tablist): markup supplied by the component. */
.afam-tabs { display: flex; flex-wrap: wrap; gap: var(--afam-sp-2); border-bottom: 2px solid var(--afam-line); }
.afam-tabs [role="tab"] { min-height: 44px; padding: 0 var(--afam-sp-4); background: none; border: 0; border-bottom: 4px solid transparent; font: inherit; font-weight: 700; cursor: pointer; color: var(--afam-ink-700); }
.afam-tabs [role="tab"][aria-selected="true"] { color: var(--afam-green-900); border-bottom-color: var(--afam-orange-500); }

/* Tables */
.afam-table-wrap { overflow-x: auto; }
.afam-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.afam-table th,
.afam-table td { padding: var(--afam-sp-3) var(--afam-sp-4); text-align: left; border-bottom: 1px solid var(--afam-line); }
.afam-table tbody tr:nth-child(even) { background: var(--afam-surface); }

/* Breadcrumb */
.afam-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--afam-sp-2); list-style: none; padding: 0; margin: 0 0 var(--afam-sp-4); font-size: var(--afam-fs-small); }
.afam-breadcrumb li + li::before { content: "/"; margin-right: var(--afam-sp-2); color: var(--afam-ink-500); }

/* Skip link */
.afam-skip { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--afam-green-900); color: #fff; padding: var(--afam-sp-3) var(--afam-sp-4); }
.afam-skip:focus { left: var(--afam-sp-4); top: var(--afam-sp-4); }

@media (prefers-reduced-motion: reduce) {
	.afam-card:hover { transform: none; }
}

/* Specificity guards: the legacy theme styles blockquote, th and buttons with high-specificity colours. */
.afam-scope .afam-btn--primary,
.afam-scope .afam-btn--primary:hover { color: #fff; }
.afam-scope .afam-btn--cta { background: var(--afam-cta-bg); color: var(--afam-cta-fg); }
.afam-scope .afam-btn--cta:hover { background: var(--afam-cta-bg-hover); color: var(--afam-cta-fg-hover); }
.afam-scope .afam-btn--ghost { color: var(--afam-green-600); }
.afam-scope .afam-btn--ghost:hover { color: #fff; }
.afam-scope blockquote.afam-quote,
.afam-scope blockquote.afam-quote p { color: var(--afam-green-900); background: transparent; }
.afam-scope .afam-table th { color: var(--afam-green-900); background: transparent; }
.afam-scope .afam-table td { color: var(--afam-ink-900); }
.afam-scope blockquote.afam-quote {
	display: block;
	width: auto;
	max-width: 70ch;
	margin: 0 0 var(--afam-sp-4);
	padding: var(--afam-sp-2) var(--afam-sp-5);
	border: 0;
	border-left: 4px solid var(--afam-orange-500);
	font-family: var(--afam-font-head);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.5;
	position: static;
}
.afam-scope blockquote.afam-quote::before,
.afam-scope blockquote.afam-quote::after { content: none; display: none; }
/* !important: the legacy theme forces white blockquote text with !important. */
.afam-scope blockquote.afam-quote,
.afam-scope blockquote.afam-quote p { color: var(--afam-green-900) !important; }