/**
 * Add Your Drop brand styles: self-hosted fonts and semantic colour role selectors.
 *
 * Font files are bundled locally (no CDN) for Hostinger portability. Khmer
 * webfont files are expected in assets/fonts/khmer/ but are not bundled yet;
 * @font-face declarations below degrade to the listed system fallbacks until
 * those files are supplied. See README.md for the exact filenames expected.
 *
 * The --ayd-heading-color / --ayd-body-color / --ayd-accent-color /
 * --ayd-button-color / --ayd-link-color / --ayd-cream / --ayd-paper /
 * --ayd-utility-bar-color / --ayd-coral custom properties are NOT defaulted
 * here. Their values are printed by PHP (ayd_enqueue_brand_styles() in
 * includes/ayd-brand-styles.php) as an inline style block based on saved
 * Dashboard settings, so this file only defines the selectors that consume
 * them.
 *
 * Role mapping:
 * - --ayd-cream / --ayd-paper: the two beige page/section background roles
 *   ("Page background colour" and "Hero and card background colour"). Cream
 *   also drives the header bar and hero photo tint (colour-mix at their
 *   original opacities, since both were previously hardcoded rgba()).
 * - --ayd-utility-bar-color: the dark top ribbon only.
 * - --ayd-coral is overridden to the same value as --ayd-accent-color
 *   ("Accent colour"), since coral is the actual orange used throughout
 *   add-your-drop.css and its section stylesheets (tagline, nav underline,
 *   focus outlines, coral button, scroll-to-top button, mobile actions).
 * - --ayd-background-color ("Background colour") is saved but currently
 *   unused by any selector; reserved for future use.
 */

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins/poppins-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins/poppins-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Khmer OS Koulen';
	src: url('../fonts/khmer/khmer-os-koulen.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Khmer OS Battambang';
	src: url('../fonts/khmer/khmer-os-battambang.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Moul Light';
	src: url('../fonts/khmer/moul-light.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.ayd-page,
.ayd-page button,
.ayd-page input,
.ayd-page textarea {
	font-family: var(--ayd-font-body-en);
}

.ayd-page {
	color: var(--ayd-body-color);
}

.ayd-page__site-header {
	background: color-mix(in srgb, var(--ayd-cream) 94%, transparent);
}

.ayd-page__top-ribbon {
	background: var(--ayd-utility-bar-color);
}

.ayd-page__hero-shade {
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--ayd-cream) 98%, transparent) 0%,
		color-mix(in srgb, var(--ayd-cream) 91%, transparent) 31%,
		color-mix(in srgb, var(--ayd-cream) 25%, transparent) 52%,
		transparent 70%
	);
}

@media (max-width: 980px) {
	.ayd-page__hero-shade {
		background: linear-gradient(
			180deg,
			var(--ayd-cream) 0%,
			color-mix(in srgb, var(--ayd-cream) 97%, transparent) 46%,
			color-mix(in srgb, var(--ayd-cream) 20%, transparent) 75%,
			transparent 100%
		);
	}
}

.ayd-page a {
	color: var(--ayd-link-color);
}

.ayd-page__button {
	background: var(--ayd-button-color);
}

/*
 * All headings switch from the original Georgia serif system to the brand
 * Poppins Bold typeface. Colour is overridden only on light-background
 * sections, replacing their previous hardcoded --ayd-navy-deep colour (or
 * inherited --ayd-ink) with the brand heading role. Dark-background
 * sections (e.g. .ayd-page__final-cta) intentionally keep their own
 * contrast colour and are excluded from the colour override, but still
 * receive the Poppins font-family change.
 */
.ayd-page h1,
.ayd-page h2,
.ayd-page h3,
.ayd-page h4 {
	font-family: var(--ayd-font-heading-en);
	font-weight: 700;
}

.ayd-page__hero h1,
.ayd-page__manifesto h2,
.ayd-page__wins-copy h2,
.ayd-page__faq-section > h2,
.ayd-page .ayd-story__copy h2,
.ayd-page .ayd-owe__copy h2,
.ayd-page .ayd-partners h2,
.ayd-campaign-video__header h2,
.ayd-campaign-video__person h3,
.ayd-progress h2 {
	color: var(--ayd-heading-color);
}