/* ==========================================================================
 * Webylance Brand Layer
 * Applies the Webylance Brand Asset Kit on top of the active theme.
 *
 * Identity direction: premium web delivery · deployment runway ·
 * client-ready web frames. "From build to launch."
 *
 * Presentation only. Every rule below is additive and decorative: no layout
 * system, no component, and no page content is redefined. Delete the
 * brand-webylance mu-plugin to revert the whole layer.
 *
 * Depends on tokens.css for --brand-* custom properties.
 * ========================================================================== */

:root {
	/* Asset handles — resolved relative to /assets/brand/. */
	--wb-hero: url("./hero-background.svg");
	--wb-pattern: url("./pattern.svg");
	--wb-mark: url("./logo-mark.svg");

	/* Runway trail: the deployment gradient used for brand accents. */
	--wb-runway: linear-gradient(
		to right,
		transparent 0%,
		var(--brand-accent) 24%,
		var(--brand-accent-2) 62%,
		transparent 100%
	);
}

/* --------------------------------------------------------------------------
 * 1. Runway accent — a single deployment trail under the site header.
 * ------------------------------------------------------------------------ */

.site-header::after {
	background: var(--wb-runway);
	bottom: -1px;
	content: "";
	height: 2px;
	inset-inline: 0;
	opacity: .8;
	pointer-events: none;
	position: absolute;
}

/* --------------------------------------------------------------------------
 * 2. Hero — hero-background.svg as a client-ready web frame backdrop.
 *    Anchored to the trailing edge and zoomed so only the runway trails and
 *    the frame mark read through; the kit's baked-in wordmark stays cropped
 *    out so it never competes with the page's own headline.
 * ------------------------------------------------------------------------ */

.wl5-hero {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.wl5-hero::before {
	background-image: var(--wb-hero);
	background-position: 100% 50%;
	background-repeat: no-repeat;
	background-size: auto 160%;
	content: "";
	inset-block: 0;
	inset-inline-end: 0;
	-webkit-mask-image: linear-gradient(to left, rgb(0 0 0 / 100%) 38%, rgb(0 0 0 / 0%) 100%);
	mask-image: linear-gradient(to left, rgb(0 0 0 / 100%) 38%, rgb(0 0 0 / 0%) 100%);
	opacity: .62;
	pointer-events: none;
	position: absolute;
	width: min(62%, 960px);
	z-index: 0;
}

/* RTL: the panel already moves to the leading edge via inset-inline-end;
   mirroring the box carries the crop and the fade with it. */
[dir="rtl"] .wl5-hero::before {
	transform: scaleX(-1);
}

.wl5-hero > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	.wl5-hero::before {
		opacity: .28;
		width: 100%;
	}
}

@media (prefers-color-scheme: dark) {
	.wl5-hero::before {
		opacity: .2;
	}
}

/* --------------------------------------------------------------------------
 * 3. Hero kicker — logo-mark.svg as a small brand frame chip.
 * ------------------------------------------------------------------------ */

.wl5-kicker {
	align-items: center;
	display: inline-flex;
	gap: .5rem;
}

.wl5-kicker::before {
	background: var(--wb-mark) center / contain no-repeat;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-muted) 32%, transparent);
	content: "";
	flex: 0 0 auto;
	height: 1.25em;
	width: 1.25em;
}

/* --------------------------------------------------------------------------
 * 4. Brand pattern — pattern.svg as the deployment-runway grid on the
 *    process and closing sections.
 * ------------------------------------------------------------------------ */

.wl5-flow,
.final-cta {
	isolation: isolate;
	position: relative;
}

.wl5-flow::before,
.final-cta::before {
	background: var(--wb-pattern) center top / 560px 560px repeat;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.wl5-flow::before {
	-webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 100%) 55%, rgb(0 0 0 / 0%) 100%);
	mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 100%) 55%, rgb(0 0 0 / 0%) 100%);
	opacity: .26;
}

.final-cta::before {
	-webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0%) 92%);
	mask-image: linear-gradient(to bottom, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0%) 92%);
	opacity: .38;
}

.wl5-flow > *,
.final-cta > * {
	position: relative;
	z-index: 1;
}

@media (prefers-color-scheme: dark) {
	.wl5-flow::before,
	.final-cta::before {
		opacity: .05;
	}
}

/* --------------------------------------------------------------------------
 * 5. Kicker and chip plates — one ink for every green chip.
 *
 * Every `.eyebrow` / `.card-kicker` on the site renders on the same plate
 * (measured: background rgb(23,98,74) on 178 of 178 instances across the 39
 * surfaces). Five different inks had accumulated on that one plate, two of
 * them unreadable: #173026 (1.50:1) and #164A39 (1.39:1), plus a gold
 * #C9902C (2.61:1). All of them resolve to the kit's on-accent paper here,
 * which measures 7.17:1 on the plate.
 * ------------------------------------------------------------------------ */

.eyebrow,
.card-kicker,
.wl-home-label,
.wl-home-product-route {
	color: var(--brand-on-accent) !important;
}

/* The chip hugs its own text instead of stretching across its grid cell.
   `!important` because the portfolio hero pins the chip to the copy column's
   width, which drew a 566px green bar behind a seven-character word. */
p.eyebrow,
span.card-kicker,
.wl-home-label,
.wl-home-product-route {
	max-width: fit-content !important;
}

/* --------------------------------------------------------------------------
 * 6. Sticky journey bar — the bar sits inside `.site-footer`, so the
 *    footer's `strong { color: var(--wl5-ink) }` rule was painting its
 *    labels near-black on the bar's near-black surface (1.43:1).
 * ------------------------------------------------------------------------ */

.site-footer .wl-sticky-journey strong {
	color: var(--brand-on-accent) !important;
}

/* --------------------------------------------------------------------------
 * 7. Text alignment follows the document direction.
 *
 * `main.css` pins `body { text-align: right }`, which is correct only while
 * the document is Arabic. On the English side the same rule right-aligns
 * every paragraph and list while `direction` stays `ltr`, which is what
 * detaches list markers from their text. `start` resolves to right in RTL
 * and left in LTR, so the Arabic rendering is unchanged.
 * ------------------------------------------------------------------------ */

body {
	text-align: start;
}

/* --------------------------------------------------------------------------
 * 8. Footer lockup — follows the footer's actual surface.
 *
 * The mu-plugin adds `wb-footer-dark` / `wb-footer-light` to the body from
 * `wp_style_is( 'agency-os-storefront-v5' )`, which is the same condition
 * that decides the footer colour. The lockup swap itself is printed by the
 * mu-plugin at wp_head:130.
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
 * 8b. One focus ring, and one language switcher, across both design systems.
 *
 * The site ships two parallel stylesheets, and each brought its own version of
 * these two: a 2px #0A7A54 ring on 16 surfaces and a 3px #2A7D5D ring on the
 * other 23; a designed 34x32 EN/AR chip pair on 16 surfaces and raw 21x26 text
 * links on the other 23. Both now resolve to the kit ramp on every surface.
 *
 * The heading typeface and the footer colour also fork between the two
 * stylesheets. Those are brand decisions rather than defects, so they are
 * left alone and written up instead.
 * ------------------------------------------------------------------------ */

:focus-visible,
body.agency-os :focus-visible {
	outline: 3px solid var(--brand-accent-strong) !important;
	outline-offset: 3px !important;
}

.language-switcher {
	align-items: center;
	border: 1px solid color-mix(in srgb, var(--brand-muted) 42%, transparent);
	border-radius: 6px;
	display: inline-flex;
	overflow: hidden;
}

.language-switcher a {
	align-items: center;
	color: var(--brand-muted-ink);
	display: inline-flex;
	font-size: .7rem;
	font-weight: 800;
	justify-content: center;
	min-height: 32px;
	min-width: 34px;
	text-decoration: none;
}

.language-switcher a.is-active {
	background: var(--brand-fg);
	color: var(--brand-on-accent);
}

/* --------------------------------------------------------------------------
 * 9. Touch targets — every secondary control reaches 44px.
 * ------------------------------------------------------------------------ */

.pagination .page-numbers,
.pagination a.page-numbers {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding-inline: .5rem;
}

.skip-link {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

/* WCAG 2.2 AA floor (24px) with a pointer, the full 44px without one.
   The language switcher is not listed here; it keeps its own 32px above. */
.footer-links a,
.footer-bottom a,
.breadcrumbs a {
	align-items: center;
	display: inline-flex;
	min-height: 24px;
}

.footer-links a {
	display: flex;
}

@media (max-width: 900px), (pointer: coarse) {
	.footer-links a {
		align-items: center;
		display: flex;
		min-height: 44px;
	}

	.footer-bottom a,
	.breadcrumbs a,
	.breadcrumbs span,
	.language-switcher a {
		align-items: center;
		display: inline-flex;
		min-height: 44px;
	}

	.language-switcher a {
		justify-content: center;
		min-width: 44px;
	}
}

/* Breadcrumbs: the separator and the current-page leaf were painted cream on
   the light page grey (1.08:1) on `/brand-kit/`, and 4.55:1 elsewhere. One
   readable muted ink for both, on every surface (5.71:1 on the page grey). */
.breadcrumbs span {
	color: var(--brand-muted-ink) !important;
}

/* The kicker on the near-black bands needs the light end of the ramp; the
   darkened accent above is correct on paper and wrong here (2.85:1 -> 7.44:1). */
.wl5-intent .wl5-kicker,
.final-cta .wl5-kicker,
.wl5-intent .wl-scenario-kicker {
	color: var(--brand-accent-on-dark) !important;
}

/* --------------------------------------------------------------------------
 * 10. Archive filter — the empty state the filter script always expected.
 *
 * `main.js` already looks for `[data-filter-empty]` and toggles its `hidden`
 * attribute from the live filter; no element ever carried that attribute, so
 * a search matching nothing emptied the grid in silence. The node is injected
 * by the mu-plugin before `main.js` runs.
 * ------------------------------------------------------------------------ */

.wb-filter-empty {
	background: color-mix(in srgb, var(--brand-on-accent) 82%, transparent);
	border: 1px solid color-mix(in srgb, var(--brand-muted) 34%, transparent);
	border-inline-start: 3px solid var(--brand-accent-strong);
	color: var(--brand-fg);
	display: grid;
	gap: .75rem;
	justify-items: start;
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.4rem;
}

.wb-filter-empty[hidden] {
	display: none;
}

.wb-filter-empty p {
	margin: 0;
}

.wb-filter-empty strong {
	display: block;
	font-size: 1.05rem;
	margin-bottom: .35rem;
}

.wb-filter-empty button {
	align-items: center;
	background: var(--brand-accent-strong);
	border: 0;
	color: var(--brand-on-accent);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 700;
	min-height: 44px;
	padding-inline: 1.1rem;
}

.wb-filter-empty button:hover,
.wb-filter-empty button:focus-visible {
	background: var(--brand-accent-ink);
}

/* --------------------------------------------------------------------------
 * 10b. Dead ends that suggest a next step.
 *
 * The 404 and the empty search result used to offer a single "back to home"
 * link and nothing else. The templates now print a search field and four
 * destination links; this is the styling for that row.
 * ------------------------------------------------------------------------ */

.not-found-links {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.4rem;
	margin-top: 1.5rem;
}

.not-found-links a:not(.button) {
	align-items: center;
	border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	display: inline-flex;
	min-height: 44px;
}

.page-hero.not-found form,
.card-grid + .not-found-links {
	margin-top: 1.25rem;
}

.page-hero.not-found input[type="search"],
.page-hero.not-found .search-field {
	background: var(--brand-on-accent);
	border: 1px solid color-mix(in srgb, var(--brand-muted) 45%, transparent);
	color: var(--brand-fg);
	min-height: 44px;
	padding: .35rem .8rem;
}

/* --------------------------------------------------------------------------
 * 11. Design Studio — the studio collapses on narrow viewports.
 *
 * `storefront-v5.css` re-declares `.wlpod-layout`'s two-column grid with
 * `!important` and outside any media query, which cancels the plugin's own
 * and `storefront-v4.css`'s collapse rules. At 390px that left the whole
 * design stage 115px wide with a 640px canvas inside it, clipped by the
 * wrapper's `overflow: hidden`. These rules restore the collapse and let the
 * fixed 640x820 artboard scale down inside its wrapper.
 * ------------------------------------------------------------------------ */

@media (max-width: 1080px) {
	.wlpod-layout {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.wlpod-controls {
		border-inline-end: 0 !important;
	}
}

@media (max-width: 900px) {
	.wlpod-stage {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* The wrapper's grid track was being sized by the 640px canvas container
   instead of by the wrapper, so `max-width: 100%` had nothing to clamp to. */
.wlpod-canvas-wrap {
	grid-template-columns: minmax(0, 1fr) !important;
}

.wlpod-canvas-wrap .canvas-container {
	height: auto !important;
	margin-inline: auto;
	max-width: 100% !important;
	width: auto !important;
}

/* The file drop zone overlapped the tool row at 768px: FilePond keeps its drop
   label absolutely positioned and drives the root's height from its panel, so
   whenever that height lands short the label spills onto the buttons below.
   Reserving the label's own height on the root stops the spill without
   touching FilePond's sizing (`min-height`, so FilePond can still grow it). */
.wlpod-upload,
.wlpod-dropzone,
.filepond--root {
	min-width: 0;
}

.filepond--root {
	min-height: 5.25rem;
}

.filepond--drop-label {
	position: relative;
}

@media print {
	.site-header::after,
	.wl5-hero::before,
	.wl5-flow::before,
	.final-cta::before {
		display: none;
	}
}