/**
 * Agency Master — global stylesheet.
 *
 * theme.json carries the design system. This file covers only what theme.json
 * cannot express: script-aware typography, focus behaviour, logical-property
 * component styles, and the block style variations registered in
 * inc/block-styles.php.
 *
 * There is no left/right in this file. Logical properties make one stylesheet
 * correct in both RTL and LTR, so there is no rtl.css to keep in sync.
 */

/* ==========================================================================
   1. Script-aware typography
   ========================================================================== */

/*
 * Arabic is the primary script, so the tokens in theme.json are already
 * Arabic-first (headings 1.35, body 1.85). Latin needs tightening: at Arabic
 * line-heights, English paragraphs look loose and disconnected.
 *
 * The prototype specified 1.1 for display type. That is a Latin serif value —
 * applied to Arabic it clips descenders and the dots beneath ب ج ح.
 */
/*
 * Latin leading is applied by REBINDING the tokens, never by setting line-height
 * on elements.
 *
 * The first version wrote `line-height` onto `:lang(en) p`. That selector has
 * specificity 0,1,1, so it beat every component class at 0,1,0 — measured
 * consequence: `.brand-stat__value { line-height: 1.1 }` lost, and a 48px
 * statistic rendered inside a 76.8px line box, injecting 24px of space beneath
 * every figure on an English page.
 *
 * Writing `line-height` on `:where(h1…h6)` instead would fail the opposite way:
 * `:where()` contributes zero specificity, so theme.json's own
 * `:root :where(h1)` rule (0,1,0) would win and the tightening would never apply.
 *
 * Rebinding the custom properties sidesteps both problems. theme.json already
 * expresses every element and block leading as var(--wp--custom--leading--*), so
 * changing the values under :lang(en) updates the whole cascade at once, with no
 * specificity contest and nothing for a component to lose to.
 */
:lang(en),
[lang^="en"] {
	--wp--custom--leading--body: 1.6;
	--wp--custom--leading--heading: 1.2;
	--wp--custom--leading--display: 1.1;
}

/*
 * Uppercase is meaningless in Arabic — there is no case. Applying it produces
 * no visual change but does confuse some screen readers, which may spell out
 * what they read as an acronym. Restrict it to Latin.
 */
.is-style-eyebrow,
.wp-block-post-terms {
	text-transform: none;
}

/*
 * Keyed to the ELEMENT's language, not the document's.
 *
 * `:lang(en) .is-style-eyebrow` (the first version) matched any eyebrow inside an
 * English document — including Arabic text on a bilingual or English-locale site,
 * which was verified happening on the live demo. Attaching :lang directly to the
 * element means an Arabic run marked `lang="ar"` is left alone wherever it sits,
 * which is what a bilingual site needs.
 */
.is-style-eyebrow:lang(en),
.wp-block-post-terms:lang(en) {
	text-transform: uppercase;
}

/*
 * Arabic numerals, dates and Latin names inside Arabic text can visually
 * reorder a line. Isolation keeps each run in its own bidi context.
 */
.wp-block-post-date,
.brand-meta,
.is-style-meta {
	unicode-bidi: isolate;
}

/* ==========================================================================
   2. Focus and accessibility
   ========================================================================== */

/*
 * Never `outline: none`. A visible focus ring is the only way a keyboard user
 * knows where they are. :focus-visible keeps it off the mouse path.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-strong);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* On ink sections the dark accent has too little contrast — swap it. */
.is-style-section-ink :where(a, button, input, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--accent-on-dark);
}

/* WordPress prints the skip link for block themes; make it visible on focus. */
.skip-link:focus {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	padding: 1rem 1.5rem;
	inset-inline-start: 1rem;
	inset-block-start: 1rem;
	text-decoration: none;
	z-index: 100000;
}

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

/* Respect the user's contrast preference rather than overriding it. */
@media (prefers-contrast: more) {
	:root {
		--wp--preset--color--contrast-3: var(--wp--preset--color--contrast-2);
	}
}

/* ==========================================================================
   3. Icons
   ========================================================================== */

.brand-icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

/*
 * Arrows and chevrons point somewhere, so they must mirror in RTL. Mail and
 * phone icons must not — a mirrored envelope is simply a wrong envelope.
 * Only icons explicitly marked directional are flipped.
 */
[dir="rtl"] .brand-icon--dir {
	transform: scaleX(-1);
}

/* ==========================================================================
   4. Section rhythm
   ========================================================================== */

/*
 * The design's 120px section gap, made fluid so it does not eat a phone screen.
 * Applied by patterns via the `brand-section` class rather than per-block
 * padding, so the rhythm has one definition.
 */
.brand-section {
	padding-block: var(--wp--custom--section--gap);
}

.brand-section--tight {
	padding-block: var(--wp--preset--spacing--70);
}

.brand-section--flush-top {
	padding-block-start: 0;
}

.brand-section--flush-bottom {
	padding-block-end: 0;
}

/* ==========================================================================
   5. Block style variations
   ========================================================================== */

/* --- Headings ------------------------------------------------------------ */

.is-style-eyebrow {
	color: var(--brand-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
}

/*
 * The design underlines section headings with a hairline. border-block-end sits
 * on the correct edge in both directions; `fit-content` keeps the rule the width
 * of the text rather than the container.
 */
.is-style-ruled {
	border-block-end: var(--wp--custom--rule--width) solid var(--wp--preset--color--accent);
	padding-block-end: var(--wp--preset--spacing--30);
	width: fit-content;
	max-width: 100%;
}

/* --- Paragraphs --------------------------------------------------------- */

.is-style-lead {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--lg);
	line-height: var(--wp--custom--leading--body);
}

.is-style-meta {
	color: var(--brand-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* --- Separators --------------------------------------------------------- */

/*
 * The short accent rule used under centred section headings. Height, not
 * border, so the colour token applies directly.
 */
.wp-block-separator.is-style-rule-accent {
	background-color: var(--wp--preset--color--accent);
	border: 0;
	height: 3px;
	width: var(--wp--custom--rule--accentWidth);
	opacity: 1;
	margin-inline: 0;
}

.wp-block-separator.is-style-rule-accent.aligncenter,
.has-text-align-center .wp-block-separator.is-style-rule-accent {
	margin-inline: auto;
}

/* --- Cards -------------------------------------------------------------- */

/*
 * Depth is tonal, per the design brief: a hairline, not a shadow. Shadow is
 * reserved for the hover state so the resting page stays flat and print-like.
 */
.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--white);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--base-3);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--60);
	height: 100%;
}

.wp-block-group.is-style-card-editorial {
	background-color: var(--wp--preset--color--base-2);
	border-block-end: 2px solid var(--wp--preset--color--accent);
	padding: var(--wp--preset--spacing--60);
	height: 100%;
}

.wp-block-group.is-style-hover-lift,
.wp-block-group.is-style-card,
.wp-block-group.is-style-card-editorial {
	transition:
		transform var(--wp--custom--transition),
		box-shadow var(--wp--custom--transition),
		border-color var(--wp--custom--transition);
}

@media (hover: hover) {
	.wp-block-group.is-style-hover-lift:hover,
	.wp-block-group.is-style-card:hover,
	.wp-block-group.is-style-card-editorial:hover {
		box-shadow: var(--wp--preset--shadow--ambient);
		border-color: var(--wp--preset--color--accent);
		transform: translateY(-4px);
	}
}

/* --- Columns ------------------------------------------------------------ */

/*
 * Rules between columns, as used by the statistics row. border-inline-start on
 * every column but the first puts the rule on the correct side in both
 * directions without a single :first-child/left/right special case.
 */
@media (min-width: 782px) {
	.wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column {
		border-inline-start: var(--wp--custom--rule--width) solid var(--wp--preset--color--base-3);
		padding-inline-start: var(--wp--preset--spacing--50);
	}
}

/* --- Images ------------------------------------------------------------- */

/*
 * Images stay square-cornered by default — the "photographic print" quality the
 * brief calls for. `framed` adds the hairline used by editorial media.
 */
.wp-block-image.is-style-framed img {
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--base-3);
}

.wp-block-image img {
	height: auto;
}

/* --- Lists -------------------------------------------------------------- */

.wp-block-list.is-style-unstyled {
	list-style: none;
	padding-inline-start: 0;
}

/*
 * Numbered service list: a counter rather than list markers, so the number can
 * be styled as display type. `counter-increment` on the item keeps it robust
 * when an editor reorders.
 */
.wp-block-list.is-style-numbered-rules {
	counter-reset: brand-counter;
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-numbered-rules > li {
	counter-increment: brand-counter;
	border-block-start: var(--wp--custom--rule--width) solid var(--wp--preset--color--base-3);
	padding-block: var(--wp--preset--spacing--40);
	padding-inline-start: 3.5rem;
	position: relative;
}

.wp-block-list.is-style-numbered-rules > li::before {
	content: counter( brand-counter, decimal-leading-zero );
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--wp--preset--spacing--40);
	unicode-bidi: isolate;
}

.wp-block-list.is-style-numbered-rules > li:last-child {
	border-block-end: var(--wp--custom--rule--width) solid var(--wp--preset--color--base-3);
}

/* --- Quotes ------------------------------------------------------------- */

.wp-block-quote.is-style-editorial {
	border-inline-start: 2px solid var(--wp--preset--color--accent);
	border-block: 0;
	padding-inline-start: var(--wp--preset--spacing--50);
}

.wp-block-quote.is-style-editorial cite {
	color: var(--brand-muted);
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	font-weight: 400;
	margin-block-start: var(--wp--preset--spacing--30);
}

/* --- Buttons: text link with arrow -------------------------------------- */

/*
 * The design's "read more →" affordance. Drawn in CSS rather than as an icon in
 * markup: it costs no DOM, and the arrow direction follows the text direction
 * automatically because it is a border-based chevron on an inline-block.
 */
.wp-block-buttons.is-style-link-arrow .wp-block-button__link {
	background-color: transparent;
	border-block-end: var(--wp--custom--rule--width) solid currentColor;
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0 0.4rem;
}

.wp-block-buttons.is-style-link-arrow .wp-block-button__link::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-block-start: 1.5px solid currentColor;
	border-inline-end: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: translate var(--wp--custom--transition);
}

/* The chevron is built from logical borders, so RTL only needs the rotation. */
[dir="rtl"] .wp-block-buttons.is-style-link-arrow .wp-block-button__link::after {
	transform: rotate(-135deg);
}

.wp-block-buttons.is-style-link-arrow .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--wp--preset--color--accent-strong);
}

@media (hover: hover) {
	.wp-block-buttons.is-style-link-arrow .wp-block-button__link:hover::after {
		translate: 0.25rem 0;
	}

	[dir="rtl"] .wp-block-buttons.is-style-link-arrow .wp-block-button__link:hover::after {
		translate: -0.25rem 0;
	}
}

/* ==========================================================================
   6. Header
   ========================================================================== */

/*
 * Sticky rather than fixed. Fixed removes the header from flow, which means
 * every template needs a spacer element to compensate — the prototype needed
 * exactly that (`<div class="h-20">`). Sticky keeps it in flow, so no spacer,
 * and no risk of content hiding beneath it.
 */
.brand-header {
	background-color: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--wp--preset--color--base-3);
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
}

.brand-header__inner {
	min-height: 5rem;
	gap: var(--wp--preset--spacing--40);
}

.brand-header__brand a,
.brand-header__brand {
	text-decoration: none;
}

.brand-header__actions {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.brand-header__nav {
	gap: var(--wp--preset--spacing--40);
}

/*
 * The language switcher. Replace this paragraph with a multilingual plugin's
 * switcher block when one is installed — see PROVISIONING.md.
 */
.brand-header__lang {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
}

.brand-header__lang a {
	color: var(--brand-muted);
	text-decoration: none;
}

.brand-header__lang a:hover {
	color: var(--wp--preset--color--contrast);
}

/*
 * The CTA is the first thing to go when space is tight — brand and menu matter
 * more, and the contact page stays reachable from the curtain menu.
 *
 * The extra specificity is deliberate: core emits
 * `.wp-block-buttons.is-layout-flex { display: flex }` at 0,2,0, so a single
 * `.brand-header__cta` class loses and the button stays visible on a phone.
 */
@media (max-width: 900px) {
	.brand-header .brand-header__inner .brand-header__cta {
		display: none;
	}
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.brand-footer {
	margin-block-start: 0;
}

.brand-footer__top {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
}

.brand-footer__brand {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
}

.brand-footer__brand a {
	text-decoration: none;
}

.brand-footer__blurb {
	color: var(--wp--preset--color--base-3);
	max-width: 34ch;
}

.brand-footer__nav ul,
.brand-footer .wp-block-page-list {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
	display: grid;
	gap: 0.75rem;
}

/*
 * Standalone navigation links, not links inside a sentence, so WCAG 2.2 target
 * size applies with no inline exception. They measured 22px; padding lifts them
 * past the 24px minimum and gives a comfortable thumb target in the footer, where
 * links sit close together.
 */
.brand-footer .wp-block-page-list a,
.brand-footer__legal a {
	color: var(--wp--preset--color--base-3);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 28px;
}

.brand-footer .wp-block-page-list a:hover,
.brand-footer__legal a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.brand-footer__social {
	margin-block-start: var(--wp--preset--spacing--40);
}

.brand-footer__bottom {
	border-block-start: 1px solid rgba(255, 255, 255, 0.14);
	padding-block: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.brand-footer__bottom p {
	margin: 0;
	color: var(--wp--preset--color--base-3);
	font-size: var(--wp--preset--font-size--sm);
}

/* ==========================================================================
   8. Sidebar
   ========================================================================== */

/*
 * The divider between the article column and the sidebar sits on the inline
 * start edge, so it lands on the correct side in both RTL and LTR without a
 * direction-specific rule.
 */
.brand-sidebar {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-content: start;
}

@media (min-width: 782px) {
	.brand-sidebar {
		border-inline-start: 1px solid var(--wp--preset--color--base-3);
		padding-inline-start: var(--wp--preset--spacing--50);
	}
}

.brand-sidebar__block > * {
	margin-block: 0;
}

.brand-sidebar__block > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.brand-sidebar__categories ul,
.brand-sidebar .wp-block-categories {
	list-style: none;
	padding-inline-start: 0;
	display: grid;
	gap: 0.85rem;
}

.brand-sidebar .wp-block-categories li {
	border-block-end: 1px solid var(--wp--preset--color--base-3);
	padding-block-end: 0.85rem;
}

.brand-sidebar .wp-block-categories a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}

.brand-sidebar .wp-block-categories a:hover {
	color: var(--wp--preset--color--accent-strong);
}

.brand-sidebar .wp-block-latest-posts {
	list-style: none;
	padding-inline-start: 0;
}

.brand-sidebar .wp-block-latest-posts li {
	margin-block-end: var(--wp--preset--spacing--30);
}

.brand-sidebar .wp-block-latest-posts a {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
}

.brand-sidebar .wp-block-latest-posts__post-date {
	color: var(--brand-muted);
	font-size: var(--wp--preset--font-size--sm);
	unicode-bidi: isolate;
}

/* ==========================================================================
   9. Meta rows
   ========================================================================== */

/*
 * Muted text is an indirection, not a fixed token.
 *
 * `.brand-meta` originally hard-coded contrast-3, which is tuned for light
 * surfaces. Inside an ink section that hard-coded value overrode the inherited
 * light colour and produced 3.5:1 footer contact details — a real WCAG failure,
 * in every brand, that no amount of palette tuning would have fixed.
 *
 * Binding muted text to a custom property lets each section style rebind it, so
 * the *role* travels with the surface. Any future section style gets this for
 * free by setting one property.
 */
:root {
	--brand-muted: var(--wp--preset--color--contrast-3);
}

.is-style-section-ink {
	--brand-muted: var(--wp--preset--color--base-3);
}

.brand-meta-row {
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
}

.brand-meta-row > * {
	margin: 0;
}

.brand-meta {
	color: var(--brand-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

/* ==========================================================================
   10. Template-level layout
   ========================================================================== */

.brand-page-header > * {
	margin-block: 0;
}

.brand-page-header > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * A sidebar layout with a rule between columns. Core stacks columns below 782px;
 * the sidebar then loses its inline-start border (handled in the sidebar block)
 * and gains a top rule instead, so the separation survives the stack.
 */
.brand-with-sidebar {
	gap: var(--wp--preset--spacing--70);
}

@media (max-width: 781px) {
	.brand-with-sidebar > .wp-block-column:last-child {
		border-block-start: 1px solid var(--wp--preset--color--base-3);
		padding-block-start: var(--wp--preset--spacing--60);
	}
}

/* Featured article block: image and copy, media second on mobile. */
.brand-featured {
	gap: var(--wp--preset--spacing--60);
}

.brand-featured .wp-block-post-title a {
	text-decoration: none;
}

.brand-featured .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-strong);
}

.brand-featured img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/*
 * Project factsheet. Label/value pairs stacked, each separated by a hairline.
 * Sticky on desktop so the facts stay beside a long project description.
 */
.brand-factsheet > * {
	margin-block: 0;
}

.brand-factsheet > h2 {
	border-block-start: 1px solid var(--wp--preset--color--base-3);
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
}

.brand-factsheet > h2:first-child {
	border-block-start: 0;
	margin-block-start: 0;
	padding-block-start: 0;
}

.brand-factsheet > :not(h2) {
	color: var(--wp--preset--color--contrast);
	margin-block-start: 0.35rem;
	unicode-bidi: isolate;
}

/*
 * Optional fields must disappear as a PAIR.
 *
 * A factsheet is label-then-value. When a client leaves a field blank the bound
 * paragraph renders empty, and hiding only the value left a heading with nothing
 * beneath it — verified on a demo facility with no phone, email or hours, which
 * showed three orphaned labels. `:has()` lets the label hide itself when the value
 * that follows it is empty, so a partially-filled factsheet reads as if the absent
 * rows were never designed in.
 */
.brand-factsheet > p:empty,
.brand-factsheet > .wp-block-post-terms:empty {
	display: none;
}

.brand-factsheet > .is-style-eyebrow:has( + p:empty ),
.brand-factsheet > .is-style-eyebrow:has( + .wp-block-post-terms:empty ) {
	display: none;
}

/*
 * A button whose bound URL is empty is a control that goes nowhere — clicking it
 * reloads the page. The facility directions button is bound to an optional field,
 * so it must remove itself rather than mislead.
 */
.wp-block-buttons:has( > .wp-block-button > a[href="" ] ) .wp-block-button:has( > a[href="" ] ),
.wp-block-button:has( > a[href="" ] ) {
	display: none;
}

@media (min-width: 782px) {
	.brand-factsheet {
		position: sticky;
		inset-block-start: 7rem;
	}
}

.brand-project-detail {
	gap: var(--wp--preset--spacing--70);
}

/*
 * Ruled editorial rows. Used by the services list, the careers openings list and
 * anywhere a dense list reads better than a card grid. The rule sits on the block
 * start edge so consecutive rows share a single hairline rather than doubling it.
 */
.brand-row {
	border-block-start: 1px solid var(--wp--preset--color--base-3);
	padding-block: var(--wp--preset--spacing--50);
}

.brand-row:last-child {
	border-block-end: 1px solid var(--wp--preset--color--base-3);
}

.brand-row__inner {
	gap: var(--wp--preset--spacing--50);
	margin-block: 0;
}

.brand-row .wp-block-post-title {
	margin-block: 0;
}

.brand-row .wp-block-post-title a {
	text-decoration: none;
}

.brand-row .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-strong);
}

.brand-row .wp-block-post-excerpt {
	margin-block-start: 0;
}

/*
 * Sticky side column. Only sticks from tablet up: on a phone the column is stacked
 * above the content it accompanies, where sticking would pin it over the very
 * thing the reader is trying to reach.
 */
@media (min-width: 782px) {
	.brand-sticky {
		position: sticky;
		inset-block-start: 7rem;
	}
}

.brand-faq-split {
	gap: var(--wp--preset--spacing--70);
}

/* ---- People ------------------------------------------------------------- */

.brand-person > * {
	margin-block: 0;
}

.brand-person > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.brand-person__portrait {
	margin-block-end: var(--wp--preset--spacing--30);
}

/*
 * Portraits are cropped by object-fit rather than given a fixed height, so a
 * client uploading a landscape snapshot still gets a consistent grid instead of a
 * row of mismatched boxes.
 */
.brand-person__portrait img {
	object-fit: cover;
	width: 100%;
}

.brand-person .wp-block-post-title {
	line-height: var(--wp--custom--leading--heading);
}

.brand-person--compact {
	border-block-start: 1px solid var(--wp--preset--color--base-3);
	padding-block: var(--wp--preset--spacing--30);
}

/* ---- Facilities --------------------------------------------------------- */

/*
 * A directory, not a storefront. The card stays flat and tonal: no price, no
 * badge, no rating, no shadow at rest. Meta lines sit close together so an address
 * and a phone number read as one block of information.
 */
.brand-facility > * {
	margin-block: 0;
}

.brand-facility > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.brand-facility__image {
	margin-block-end: var(--wp--preset--spacing--30);
}

.brand-facility__image img {
	object-fit: cover;
	width: 100%;
}

/*
 * Addresses and phone numbers are the one place mixed-script content is
 * guaranteed: a Latin street number inside an Arabic address, or a +966 number
 * beside Arabic text. Isolation stops either reordering the line.
 */
.brand-facility .brand-meta {
	unicode-bidi: isolate;
}

/* An unset optional field must collapse, not leave a blank line in the card. */
.brand-facility .brand-meta:empty,
.brand-facility .wp-block-post-terms:empty {
	display: none;
}

/*
 * The secondary filter row sits tighter under the primary one and reads quieter,
 * so two filters do not compete for the same visual weight.
 */
.agency-term-filter--secondary {
	margin-block-start: var(--wp--preset--spacing--20);
}

.agency-term-filter--secondary .agency-term-filter__link {
	font-size: var(--wp--preset--font-size--xs);
	padding: 0.4rem 1rem;
}

/* ---- Partner logos ------------------------------------------------------ */

/*
 * Logos arrive in every conceivable aspect ratio. Equal boxes with contained,
 * centred images means a wide wordmark and a square crest sit on the same optical
 * line without anyone editing the files.
 */
.brand-logo-wall {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.brand-logo-wall__item {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 5 / 2;
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--base-3);
}

.brand-logo-wall__item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	/*
	 * Institutional logos are rarely monochrome and desaturating them is a common
	 * way to make a wall look tidy — but it also misrepresents a partner's brand.
	 * Left in full colour deliberately.
	 */
}

/* ---- Quotes ------------------------------------------------------------- */

.brand-quote > * {
	margin-block: 0;
}

.brand-quote__text {
	font-family: var(--wp--preset--font-family--heading);
	line-height: var(--wp--custom--leading--heading);
}

/* Quotation marks are added in CSS so the stored title stays clean text. */
.brand-quote__text::before {
	content: "\201D";
}

[dir="rtl"] .brand-quote__text::before {
	content: "\201C";
}

.brand-quote__author {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

.is-style-section-ink .brand-quote__author {
	color: var(--wp--preset--color--base);
}

.brand-quote .brand-meta:empty,
.brand-quote__author:empty {
	display: none;
}

/*
 * Event rows. The date is display type and must not reorder inside an Arabic
 * sentence, hence the bidi isolation — an ISO date beside Arabic text is exactly
 * the case that reorders without it.
 */
.brand-event__date {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	unicode-bidi: isolate;
}

.brand-event .brand-meta:empty {
	display: none;
}

/*
 * Vertical timeline.
 *
 * The spine is a border on the inline-start edge, so it moves to the correct side
 * in RTL and LTR with no direction-specific rule. Markers are pseudo-elements
 * positioned with inset-inline-start for the same reason.
 */
.brand-timeline {
	border-inline-start: 1px solid var(--wp--preset--color--base-3);
	padding-inline-start: var(--wp--preset--spacing--50);
}

.brand-timeline__item {
	position: relative;
	padding-block-end: var(--wp--preset--spacing--60);
}

.brand-timeline__item:last-child {
	padding-block-end: 0;
}

.brand-timeline__item > * {
	margin-block: 0;
}

.brand-timeline__item > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* The marker sits on the spine, centred on it regardless of direction. */
.brand-timeline__item::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(-1 * var(--wp--preset--spacing--50) - 4.5px);
	inset-block-start: 0.45em;
	width: 9px;
	height: 9px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
}

.brand-timeline__period {
	unicode-bidi: isolate;
}

/*
 * Alternating split bands. Flipping the media side is deliberately NOT automated
 * with :nth-of-type — sections are siblings among many others, so the count is
 * unpredictable. An editor reverses a band by dragging its two columns, which is a
 * native block-editor gesture and needs no CSS.
 */
.brand-split .wp-block-columns {
	gap: var(--wp--preset--spacing--70);
	margin-block: 0;
}

/* Search results: a list of ruled rows rather than cards. */
.brand-result {
	border-block-end: 1px solid var(--wp--preset--color--base-3);
	padding-block: var(--wp--preset--spacing--50);
}

.brand-result > * {
	margin-block: 0;
}

.brand-result > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.brand-result .wp-block-post-title a {
	text-decoration: none;
}

.brand-result .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-strong);
	text-decoration: underline;
}

/* ==========================================================================
   11. Utility
   ========================================================================== */

/*
 * Aspect-ratio media wrapper. The prototype used fixed heights (h-[600px]),
 * which overflow as soon as Arabic copy runs longer than the mockup's. A ratio
 * plus object-fit scales instead of clipping.
 */
.brand-media--portrait img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}

.brand-media--landscape img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.brand-media--square img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

/* Clamp card copy to keep grids visually even without fixing their height. */
.brand-clamp-2,
.brand-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.brand-clamp-2 {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.brand-clamp-3 {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Long unbroken strings — URLs, emails — must not force a horizontal scrollbar. */
:where(p, h1, h2, h3, h4, h5, h6, li, td, dd, figcaption) {
	overflow-wrap: break-word;
}