/**
 * The Africa Missions Initiative — scoped front-end styles.
 *
 * RULES THIS FILE MUST NEVER BREAK
 * -------------------------------------------------------------------------
 * 1. Every selector is scoped under .tami. No bare element selectors.
 *    Anything that escapes this scope leaks into the whole TAMI site.
 *
 * 2. LOGICAL PROPERTIES ONLY. Use margin-inline-start, padding-inline,
 *    border-inline-end, inset-inline. NEVER margin-left / margin-right /
 *    padding-left / padding-right / left / right.
 *
 *    The site runs six locales and fa_IR (Farsi) is RIGHT-TO-LEFT. Logical
 *    properties mean /fa/ mirrors correctly with no separate RTL stylesheet.
 *    A physical property here is a bug that only shows up in Farsi.
 *
 * 3. Custom properties are namespaced --tami-*.
 *
 * 4. No !important unless overriding Divi is genuinely unavoidable, and then
 *    only with a comment naming the selector being countered.
 * -------------------------------------------------------------------------
 */

.tami {
	/* Colour tokens. Populated from site defaults or admin settings at render
	   time; these are the fallbacks when nothing has been configured. */
	--tami-color-text: #2b2b2b;
	--tami-color-text-muted: #5f6b6d;
	--tami-color-heading: #1a1a1a;
	--tami-color-bg: transparent;
	--tami-color-surface: #ffffff;
	--tami-color-border: #e3e6e8;
	--tami-color-accent: #7cbb42;

	/*
	 * THE ACCENT'S TWO COMPANIONS. Change them together or not at all.
	 *
	 * `accent-contrast` is the text colour that goes ON the accent, and
	 * `accent-strong` is the accent darkened until it is readable on white.
	 * Frontend\StyleInheritance computes both from whichever accent is in
	 * effect and emits them on `.tami` for every render, so in practice
	 * these three lines are overridden together. They are stated here so the
	 * sheet is still self-consistent on its own — the pair below is measured
	 * against the #7cbb42 above, not assumed:
	 *
	 *   #1a1a1a on #7cbb42   7.5:1   label text on an accent fill (AA needs 4.5)
	 *   #ffffff on #7cbb42   2.3:1   which is why the contrast colour is NOT white
	 *   #50792a on #ffffff   5.1:1   link and focus-ring colour
	 *
	 * White is the right answer for a DARK accent and the wrong one for a
	 * light one; that is a decision only the computation can make, which is
	 * why hardcoding #ffffff here previously failed AA on every page the
	 * computed block did not reach.
	 */
	--tami-color-accent-contrast: #1a1a1a;
	--tami-color-accent-strong: #50792a;

	/* Typography. inherit keeps us inside Divi's type system by default. */
	--tami-font-body: inherit;
	--tami-font-heading: inherit;
	--tami-size-body: 1rem;
	--tami-line-height: 1.7;

	/* Layout. */
	--tami-container: 1200px;
	--tami-gap: 1.5rem;
	--tami-radius: 10px;
	--tami-shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 8px 24px rgba(16, 24, 32, 0.08);

	box-sizing: border-box;
	color: var(--tami-color-text);
	font-family: var(--tami-font-body);
	font-size: var(--tami-size-body);
	line-height: var(--tami-line-height);

	/*
	 * THE DIRECTION FIREWALL. Read rule 2 above, then read this.
	 *
	 * Logical properties handle everything the plugin DECLARES. They do
	 * nothing about what the plugin INHERITS, and text-align is inherited.
	 * Divi declares `text-align: left` on `.container`, every plugin page
	 * renders inside one, and `left` is physical: it does not flip when the
	 * document turns right-to-left. So in Farsi the whole plugin subtree —
	 * headings, cards, breadcrumbs, form labels, table cells, all of it —
	 * stayed pinned to the left edge while the page around it read
	 * right-to-left.
	 *
	 * This one declaration ends it. An inherited value loses to ANY value
	 * declared on the element itself, whatever the specificity of the rule
	 * that produced it, so `.tami` re-anchoring text-align here severs the
	 * theme's chain at the plugin boundary and every descendant that does not
	 * set its own alignment inherits `start` — which is left in English and
	 * right in Farsi, by definition.
	 *
	 * It must live at the ROOT and it must live in THIS sheet. At the root,
	 * because patching components one at a time only ever fixes the
	 * components someone thought to look at (six such patches accumulated
	 * before this rule existed). In this sheet, because this is the sheet
	 * that establishes the `.tami` box; a page that somehow gets the base
	 * stylesheet without the presentation one must still be direction-safe.
	 *
	 * `start`, never `left`: a physical value here would simply reinstate the
	 * bug with our name on it.
	 */
	text-align: start;
}

.tami *,
.tami *::before,
.tami *::after {
	box-sizing: inherit;
}

/*
 * Per-script font fallbacks.
 *
 * Three of the six locales use non-Latin scripts: Devanagari (hi, ne), Tamil
 * (ta) and Perso-Arabic (fa). A Latin-only stack renders tofu for these, so
 * each gets an explicit fallback chain. :lang() rather than a body class so
 * this holds regardless of how TranslatePress marks the document.
 *
 * TWO SELECTORS PER SCRIPT, because there are two ways a script arrives.
 *
 *   .tami:lang(xx)      the whole PAGE is in that language — the visitor
 *                          is browsing /fa/ and TranslatePress has marked the
 *                          document.
 *   .tami [lang|="xx"]  one BLOCK is, inside a page that is not: a Farsi
 *                          story displayed on the English region page, which
 *                          story-single.php marks with the story's own stored
 *                          authoring locale. Without this half, that story
 *                          renders as tofu on five of the six locales.
 *
 * The attribute selector rather than a second :lang() is deliberate. :lang()
 * matches by INHERITED language, so `.tami :lang(fa)` would match every
 * descendant on a Farsi page and drop a font-family declaration at 0,2,0 onto
 * elements whose own rules sit lower than that — silently overriding the
 * heading stack, among others. `[lang|="fa"]` matches only the element that
 * actually declares the attribute, so exactly one block is touched and
 * everything inside it inherits normally. The |= form covers both "fa" and
 * any "fa-*" tag.
 *
 * font-family is restated alongside the token because font-family resolves at
 * the element that declares it: `.tami` already read the token higher up,
 * and its children inherit that RESOLVED value. Redefining the variable
 * further down changes nothing on its own. (On the root selector the
 * declaration is a harmless no-op — it computes to what `.tami` already
 * says — which is what lets both halves share one rule.)
 */
.tami:lang(hi),
.tami:lang(ne),
.tami [lang|="hi"],
.tami [lang|="ne"] {
	--tami-font-body: "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif;
	--tami-font-heading: var(--tami-font-body);
	font-family: var(--tami-font-body);
}

.tami:lang(ta),
.tami [lang|="ta"] {
	--tami-font-body: "Noto Sans Tamil", "Nirmala UI", "Latha", sans-serif;
	--tami-font-heading: var(--tami-font-body);
	font-family: var(--tami-font-body);
}

.tami:lang(fa),
.tami [lang|="fa"] {
	--tami-font-body: "Noto Naskh Arabic", "Vazirmatn", "Tahoma", sans-serif;
	--tami-font-heading: var(--tami-font-body);
	/* Perso-Arabic needs more leading than Latin at the same size. */
	--tami-line-height: 1.9;
	font-family: var(--tami-font-body);
}

/* -------------------------------------------------------------------------
 * Layout primitives
 * ------------------------------------------------------------------------- */

.tami__container {
	inline-size: 100%;
	max-inline-size: var(--tami-container);
	margin-inline: auto;
	padding-inline: 1rem;
}

.tami__grid {
	display: grid;
	gap: var(--tami-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* -------------------------------------------------------------------------
 * Surfaces
 * ------------------------------------------------------------------------- */

.tami__card {
	background: var(--tami-color-surface);
	border: 1px solid var(--tami-color-border);
	border-radius: var(--tami-radius);
	box-shadow: var(--tami-shadow);
	overflow: hidden;
	padding: 1.25rem;
}

.tami__card-title {
	color: var(--tami-color-heading);
	font-family: var(--tami-font-heading);
	margin-block: 0 0.5rem;
}

.tami__meta {
	color: var(--tami-color-text-muted);
	font-size: 0.875em;
}

/* -------------------------------------------------------------------------
 * Notices and empty states
 * ------------------------------------------------------------------------- */

.tami__notice {
	border-inline-start: 4px solid var(--tami-color-accent);
	background: var(--tami-color-surface);
	border-radius: var(--tami-radius);
	padding-block: 0.875rem;
	padding-inline: 1rem;
}

.tami__empty {
	border: 1px dashed var(--tami-color-border);
	border-radius: var(--tami-radius);
	color: var(--tami-color-text-muted);
	padding: 2.5rem 1.25rem;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Directional affordances
 *
 * Only genuinely directional glyphs flip. Icons that carry no direction
 * (a camera, a calendar) must not be mirrored.
 * ------------------------------------------------------------------------- */

.tami__icon--directional:dir(rtl) {
	transform: scaleX(-1);
}

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

.tami__visually-hidden {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/*
 * The ring is drawn in accent-STRONG, not the raw accent.
 *
 * WCAG 1.4.11 asks a focus indicator for 3:1 against what surrounds it, and
 * the raw accent is only there to be looked at, not to be read — the default
 * #7cbb42 is 2.3:1 on a white page, so a ring drawn in it is a focus state a
 * low-vision user cannot find. accent-strong is the same hue darkened until it
 * clears 4.5:1 on white, so the ring keeps the region's colour and is still
 * visible. The frontend sheet's per-component rings use its own alias of this
 * same token (--tami-accent-ink); they must not disagree.
 */
.tami :focus-visible {
	outline: 2px solid var(--tami-color-accent-strong, #50792a);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.tami *,
	.tami *::before,
	.tami *::after {
		animation-duration: 0.01ms !important; /* countering author animations for reduced-motion users */
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}