/*
Theme Name: Avada Child — UN-Habitat Mongolia
Description: Child theme for the UN-Habitat Mongolia site. All custom code lives here, never in the Avada parent theme.
Author: UN-Habitat Mongolia
Template: Avada
Version: 1.1.0
Text Domain: Avada
*/

/* ==========================================================================
   Fonts — Roboto variable (wght 100–900), self-hosted, SIL OFL 1.1 (fonts/OFL.txt).
   Mongolian Cyrillic needs all three subsets: Ө ө Ү ү live in cyrillic-ext.
   Roboto has no ₮ (U+20AE); the fallback stack covers it (Segoe UI, Arial).
   ========================================================================== */

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/roboto-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/roboto-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/roboto-cyrillic-wght-normal.woff2") format("woff2-variations"), url("fonts/roboto-cyrillic-wght-normal.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/roboto-cyrillic-ext-wght-normal.woff2") format("woff2-variations"), url("fonts/roboto-cyrillic-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/roboto-latin-wght-italic.woff2") format("woff2-variations"), url("fonts/roboto-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/roboto-cyrillic-wght-italic.woff2") format("woff2-variations"), url("fonts/roboto-cyrillic-wght-italic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/roboto-cyrillic-ext-wght-italic.woff2") format("woff2-variations"), url("fonts/roboto-cyrillic-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ==========================================================================
   Design tokens (docs/DESIGN-PLAN.md §1–§3)
   Fluid sizes interpolate between 390px and 1440px viewports.
   `html:root` outranks Avada's own `:root` rules, which load after this file.
   ========================================================================== */

html:root {
	/* Color — UN-Habitat brand manual v2. Contrast ratios are against --c-surface. */
	--c-brand: #00b2e3;        /* 2.48:1 — surfaces, rules and logo only, never text on white */
	--c-brand-deep: #00538b;   /* 8.05:1 — links, buttons, focus ring */
	--c-brand-deep-hover: #003f6b;
	--c-ink: #15202b;          /* 16.49:1 — body text, headings */
	--c-ink-muted: #4a5866;    /* 7.29:1 — meta, captions */
	--c-surface: #ffffff;
	--c-surface-alt: #eef6fa;

	/* Type */
	--font-sans: "Roboto", "Segoe UI", Arial, sans-serif;
	--fs-h1: clamp(2rem, 1.7214rem + 1.1429vw, 2.75rem);        /* 32 → 44 */
	--fs-h2: clamp(1.6875rem, 1.5018rem + 0.7619vw, 2.1875rem); /* 27 → 35 */
	--fs-h3: clamp(1.375rem, 1.2357rem + 0.5714vw, 1.75rem);    /* 22 → 28 */
	--fs-h4: clamp(1.25rem, 1.2036rem + 0.1905vw, 1.375rem);    /* 20 → 22 */
	--fs-lead: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);  /* 18 → 20 */
	--fs-body: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18 */
	--fs-small: clamp(0.875rem, 0.8518rem + 0.0952vw, 0.9375rem); /* 14 → 15 */
	--lh-tight: 1.15;
	--lh-heading: 1.25;
	--lh-body: 1.65;
	--measure: 68ch;

	/* Space — 4px base */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	/* ------------------------------------------------------------------
	   Map tokens onto Avada's global typography variables (normally set in
	   Avada Global Options). Only fonts and sizes; colors stay with the
	   Avada palette until DESIGN-PLAN D-O1 is approved.
	   ------------------------------------------------------------------ */
	--awb-typography1-font-family: var(--font-sans);
	--awb-typography2-font-family: var(--font-sans);
	--awb-typography3-font-family: var(--font-sans);
	--awb-typography4-font-family: var(--font-sans);
	--awb-typography5-font-family: var(--font-sans);
	--awb-custom_typography_1-font-family: var(--font-sans);

	/* Typography 1 — headings */
	--awb-typography1-font-size: var(--fs-h2);
	--awb-typography1-line-height: var(--lh-heading);
	--awb-typography1-letter-spacing: 0;
	/* Typography 2 — sub-headings */
	--awb-typography2-font-size: var(--fs-h4);
	--awb-typography2-line-height: var(--lh-heading);
	/* Typography 3 — navigation, buttons */
	--awb-typography3-letter-spacing: 0;
	/* Typography 4 — body */
	--awb-typography4-font-size: var(--fs-body);
	--awb-typography4-line-height: var(--lh-body);
	--awb-typography4-letter-spacing: 0;
	/* Typography 5 — small */
	--awb-typography5-font-size: var(--fs-small);
	--awb-typography5-line-height: 1.5;
	--awb-typography5-letter-spacing: 0;

	--h1_typography-font-size: var(--fs-h1);
	--h1_typography-font-weight: 700;
	--h1_typography-line-height: var(--lh-tight);
	--h2_typography-font-size: var(--fs-h2);
	--h3_typography-font-size: var(--fs-h3);
	--h3_typography-line-height: 1.3;
	--h4_typography-font-size: var(--fs-h4);
	--h4_typography-line-height: 1.35;
	--h5_typography-font-size: var(--fs-body);
	--h6_typography-font-size: var(--fs-small);
}

/* ==========================================================================
   Base typography
   ========================================================================== */

body {
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
.fusion-title-heading {
	text-wrap: balance;
}

/* Justified text leaves wide gaps between long Mongolian words (AUDIT T-4). */
.fusion-body [style*="--awb-content-alignment:justify"] {
	--awb-content-alignment: start !important;
}

.fusion-body [style*="text-align: justify"],
.fusion-body [style*="text-align:justify"] {
	text-align: start !important;
}

/* Comfortable line length for article text. Set on the container because
   posts pasted from Facebook have no <p> elements, only nested divs. */
.single-post .fusion-content-tb {
	max-width: var(--measure);
}

/* ==========================================================================
   Legacy per-element fonts — TEMPORARY (AUDIT T-1, T-2).
   Page content still sets Tahoma, Marcellus, Syne, Lexend, Barlow, Arimo and
   DM Sans per element; several lack Cyrillic. Remove this block once the
   content cleanup (DESIGN-PLAN D-C2) has run.
   ========================================================================== */

.fusion-body * {
	--awb-font-family: var(--font-sans) !important;
	--awb-text-font-family: var(--font-sans) !important;
	--awb-title-font-family: var(--font-sans) !important;
	--awb-content-font-family: var(--font-sans) !important;
	--awb-caption-title-font-family: var(--font-sans) !important;
	--awb-caption-text-font-family: var(--font-sans) !important;
	--awb-fusion-font-family-typography: var(--font-sans) !important;
	--awb-fusion-font-family-submenu-typography: var(--font-sans) !important;
	--awb-fusion-font-family-mobile-typography: var(--font-sans) !important;
	--awb-item-font-family: var(--font-sans) !important;
	--awb-filters-font-family: var(--font-sans) !important;
	--awb-label-typography-font-family: var(--font-sans) !important;
	--awb-select-typography-font-family: var(--font-sans) !important;
	--awb-name-company-font-family: var(--font-sans) !important;
	--awb-popup-title-font-family: var(--font-sans) !important;
	--awb-popup-content-font-family: var(--font-sans) !important;
	--awb-step-typo-font-family: var(--font-sans) !important;
	--awb-testimonial-text-font-family: var(--font-sans) !important;
	--awb-timeline-title-font-family: var(--font-sans) !important;
	--button_typography-font-family: var(--font-sans) !important;
}

/* Inline font-family on headings and TinyMCE spans; icon fonts keep theirs. */
.fusion-body [style*="font-family"]:not(i):not([class*="fa-"]):not([class*="icon"]) {
	font-family: var(--font-sans) !important;
}

/* TinyMCE "12pt" spans shrink body text below the base size. */
.fusion-body [style*="font-size: 12pt"] {
	font-size: inherit !important;
}

/* ==========================================================================
   Button colors that the Avada palette cannot fix
   ========================================================================== */

/* Contact form submit: content hard-codes a #00b2e3 gradient (white text
   2.48:1) and a light-blue hover. Solid brand-deep instead. */
.fusion-button.form-form-submit {
	--button_gradient_top_color: var(--c-brand-deep) !important;
	--button_gradient_bottom_color: var(--c-brand-deep) !important;
	--button_gradient_top_color_hover: var(--c-brand-deep-hover) !important;
	--button_gradient_bottom_color_hover: var(--c-brand-deep-hover) !important;
}

/* ==========================================================================
   Keyboard focus (AUDIT A-4)
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--c-brand-deep) !important;
	outline-offset: 2px !important;
}

/* Dark footer: a light ring stays visible on blue. */
.fusion-tb-footer :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--c-surface) !important;
}

/* ==========================================================================
   Reduced motion (AUDIT A-6)
   Avada hides animated elements until its script reveals them, so they are
   made visible here rather than left waiting for an animation that never runs.
   ========================================================================== */

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

	[data-animationtype],
	.fusion-animated,
	.fusion-title-animated {
		visibility: visible !important;
		opacity: 1 !important;
		animation: none !important;
	}
}