/**
 * Atlas Africa typography system.
 *
 * Tokens live in theme.json and surface as --wp--preset--* variables.
 * This file defines semantic aliases, shared roles, and block type styles.
 */

:root {
	--atlas-font-display: var(--wp--preset--font-family--display);
	--atlas-font-body: var(--wp--preset--font-family--body);

	--atlas-text-meta: var(--wp--preset--font-size--step-meta);
	--atlas-text-tag: var(--wp--preset--font-size--step-tag);
	--atlas-text-ui-xs: var(--wp--preset--font-size--step-ui-xs);
	--atlas-text-ui-sm: var(--wp--preset--font-size--step-ui-sm);
	--atlas-text-ui: var(--wp--preset--font-size--step-0);
	--atlas-text-body: var(--wp--preset--font-size--step-1);
	--atlas-text-card-title: var(--wp--preset--font-size--step-2);
	--atlas-text-panel-title: var(--wp--preset--font-size--step-5);
	--atlas-text-stat: var(--wp--preset--font-size--step-8);
	--atlas-text-step-index: var(--wp--preset--font-size--step-9);
	--atlas-text-hero: var(--wp--preset--font-size--hero-title);
	--atlas-text-hero-lead: var(--wp--preset--font-size--hero-lead);
	--atlas-text-section-title: var(--wp--preset--font-size--section-title);
	--atlas-text-banner-title: var(--wp--preset--font-size--banner-title);

	--atlas-leading-body: 1.6;
	--atlas-leading-copy: 1.65;
	--atlas-leading-tight: 1.05;
	--atlas-leading-heading: 1.15;

	--atlas-tracking-eyebrow: 0.16em;
	--atlas-tracking-brand: 0.05em;
	--atlas-tracking-tag: 0.12em;
	--atlas-tracking-display: -0.03em;

	/* WCAG AA text on white (4.5:1+) */
	--atlas-amber-text: #946000;
}

/* —— Shared roles —— */

.block-atlas-eyebrow {
	display: inline-block;
	margin: 0 0 0.875rem;
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-meta);
	font-weight: 600;
	letter-spacing: var(--atlas-tracking-eyebrow);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--atlas-amber-text);
}

.block-atlas-eyebrow--on-dark {
	color: var(--wp--preset--color--cream);
}

.block-atlas-section__title,
.block-atlas-pillars__head h2,
.block-atlas-stories__head h2,
.block-atlas-steps__head h2,
.block-atlas-map__head h2 {
	margin: 0;
	font-family: var(--atlas-font-display);
	font-size: var(--atlas-text-section-title);
	font-weight: 700;
	line-height: var(--atlas-leading-heading);
	letter-spacing: normal;
	color: var(--wp--preset--color--ink);
}

.block-atlas-section__intro,
.block-atlas-pillars__intro,
.block-atlas-stories__intro,
.block-atlas-steps__intro,
.block-atlas-map__intro {
	margin: 0.625rem 0 0;
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-body);
	font-weight: 400;
	line-height: var(--atlas-leading-body);
	color: var(--wp--preset--color--muted);
}

.block-atlas-card__title,
.block-atlas-pillars__item h3,
.block-atlas-steps__item h3 {
	margin: 0 0 0.625rem;
	font-family: var(--atlas-font-display);
	font-size: var(--atlas-text-card-title);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.block-atlas-stories__card h3,
.block-atlas-stories__card.atlas-reveal__item h3 {
	margin: 0 0 0.625rem;
	font-family: var(--atlas-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.block-atlas-steps__item h3 {
	margin-bottom: 0.5rem;
	font-size: var(--atlas-text-body);
}

.block-atlas-copy,
.block-atlas-pillars__item p,
.block-atlas-stories__card p,
.block-atlas-steps__item p {
	margin: 0;
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui);
	font-weight: 400;
	line-height: var(--atlas-leading-copy);
	color: var(--wp--preset--color--muted);
}

.block-atlas-tag,
.block-atlas-stories__tag {
	margin: 0 0 0.625rem;
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-tag);
	font-weight: 600;
	letter-spacing: var(--atlas-tracking-tag);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--atlas-amber-text);
}

/* —— Hero —— */

.block-atlas-hero__heading {
	margin: 0 0 1.375rem;
	font-family: var(--atlas-font-display);
	font-size: var(--atlas-text-hero);
	font-weight: 700;
	line-height: var(--atlas-leading-tight);
	letter-spacing: var(--atlas-tracking-display);
	color: var(--wp--preset--color--ink);
}

.block-atlas-hero__sub {
	max-width: 38.25rem;
	margin: 0 0 2.25rem;
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-hero-lead);
	font-weight: 400;
	line-height: var(--atlas-leading-copy);
	color: var(--wp--preset--color--muted);
}

/* —— Stats —— */

.block-atlas-stats__value {
	margin: 0 0 0.25rem;
	font-family: var(--atlas-font-display);
	font-size: var(--atlas-text-stat);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--atlas-tracking-display);
	color: var(--wp--preset--color--forest);
}

.block-atlas-stats__label {
	margin: 0;
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-hero-lead);
	font-weight: 400;
	line-height: var(--atlas-leading-copy);
	color: var(--wp--preset--color--muted);
}

/* —— Commitment banner —— */

.block-atlas-commitment__heading {
	margin: 0;
	font-family: var(--atlas-font-display);
	font-size: var(--atlas-text-banner-title);
	font-weight: 700;
	line-height: var(--atlas-leading-heading);
	color: var(--wp--preset--color--cream);
}

.block-atlas-commitment__copy {
	margin: 1.125rem 0 0;
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-body);
	font-weight: 400;
	line-height: var(--atlas-leading-copy);
	color: rgba(237, 229, 208, 0.88);
}

/* —— Map panel —— */

.block-atlas-map__panel h3 {
	margin: 0;
	font-family: var(--atlas-font-display);
	font-size: var(--atlas-text-panel-title);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.block-atlas-map__model {
	margin: 0;
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui-sm);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--forest);
}

.block-atlas-map__panel p {
	margin: 0;
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui);
	font-weight: 400;
	line-height: var(--atlas-leading-copy);
	color: var(--wp--preset--color--muted);
}

.block-atlas-map__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	margin: 0;
	padding: 0.3125rem 0.6875rem;
	border-radius: 5px;
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui-xs);
	font-weight: 600;
	letter-spacing: var(--atlas-tracking-brand);
	line-height: 1.2;
	text-transform: uppercase;
}

.block-atlas-map__chip {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-meta);
	font-weight: 500;
	line-height: 1.3;
}

.block-atlas-map__sub-link {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui);
	font-weight: 600;
	line-height: 1.3;
}

.block-atlas-map__partners {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui-xs);
	font-weight: 400;
	line-height: var(--atlas-leading-body);
}

.block-atlas-map__legend,
.block-atlas-map__count {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui-sm);
	font-weight: 400;
	line-height: 1.3;
}

.block-atlas-map__count {
	font-weight: 600;
}

.block-atlas-map__tip {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui-xs);
	font-weight: 500;
	line-height: 1.3;
}

/* —— Supporters —— */

.block-atlas-supporters__logo {
	font-family: var(--atlas-font-display);
	font-size: var(--atlas-text-body);
	font-weight: 700;
	line-height: 1.2;
}

.block-atlas-supporters__logo small {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-meta);
	font-weight: 400;
	letter-spacing: var(--atlas-tracking-brand);
	line-height: 1.3;
	text-transform: uppercase;
}

.block-atlas-supporters__note {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui-sm);
	font-weight: 400;
	line-height: var(--atlas-leading-body);
}

/* —— Steps index —— */

.block-atlas-steps__item::before {
	font-family: var(--atlas-font-display);
	font-size: var(--atlas-text-step-index);
	font-weight: 800;
	line-height: 1;
}

/* —— Site chrome —— */

.atlas-header__brand {
	font-family: var(--atlas-font-display);
	font-size: var(--wp--preset--font-size--step-4);
	font-weight: 500;
	letter-spacing: var(--atlas-tracking-brand);
}

.atlas-footer__brand {
	font-family: var(--atlas-font-display);
	font-size: var(--atlas-text-body);
	font-weight: 500;
	letter-spacing: var(--atlas-tracking-brand);
}

.atlas-header__link,
.atlas-mobile-menu__link {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui);
	font-weight: 500;
	line-height: 1.3;
}

.atlas-footer__tagline {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui-sm);
	font-weight: 400;
	line-height: var(--atlas-leading-body);
}

.atlas-footer-disclaimer__text {
	font-family: var(--atlas-font-body);
	font-weight: 400;
}

.atlas-footer__nav a {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui);
	font-weight: 400;
	line-height: 1.3;
}

.atlas-skip-link,
.screen-reader-text:focus {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui);
	font-weight: 600;
	line-height: normal;
}

.btn {
	font-family: var(--atlas-font-body);
	font-size: var(--atlas-text-ui);
	font-weight: 600;
	line-height: 1.3;
}

/* —— Mobile legibility (≤760px) —— */

@media (max-width: 47.5rem) {
	:root {
		--atlas-text-meta: 0.75rem;
		--atlas-text-tag: 0.75rem;
		--atlas-text-ui-xs: 0.8125rem;
		--atlas-text-ui-sm: 0.9375rem;
		--atlas-text-ui: 1rem;
		--atlas-text-body: 1.0625rem;
		--atlas-text-card-title: 1.25rem;
	}

	.block-atlas-hero__sub,
	.block-atlas-stats__label,
	.block-atlas-section__intro,
	.block-atlas-pillars__intro,
	.block-atlas-stories__intro,
	.block-atlas-steps__intro,
	.block-atlas-map__intro {
		font-size: 1.0625rem;
		line-height: 1.65;
	}

	.block-atlas-copy,
	.block-atlas-pillars__item p,
	.block-atlas-stories__card p,
	.block-atlas-steps__item p,
	.block-atlas-map__panel p {
		font-size: 1rem;
		line-height: 1.65;
	}

	.block-atlas-stories__card h3,
	.block-atlas-stories__card.atlas-reveal__item h3 {
		font-size: 1.375rem;
	}

	.btn {
		font-size: 1rem;
	}
}