/*
 * Webylance brand layer.
 *
 * The shared plugin supplies structure, WooCommerce presentation, contrast and
 * RTL. This file supplies only what makes Webylance look like Webylance and not
 * like the other four brands on the same primitives: an Arabic-rooted serif
 * used at display sizes, tight editorial rhythm, hairlines instead of cards,
 * and square corners.
 *
 * Kept deliberately small. A rule useful to a second brand belongs upstream in
 * zad-shared-design, not here.
 */

:root {
	--wl-serif: 'Amiri', 'Iowan Old Style', Georgia, serif;
	--wl-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--wl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
	font-family: var(--wl-sans);
	background: var(--brand-bg, #F7F6F2);
	color: var(--brand-fg, #16160F);
}

/* Display type is the brand's signature. Amiri carries both scripts, which is
   why it is the one face used large — no second display family to fall out of
   sync between EN and AR. */
h1, h2, h3,
.entry-title,
.page-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--wl-serif);
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: 1.14;
	text-wrap: balance;
}

[dir="rtl"] :where(h1, h2, h3, .entry-title, .page-title, .product_title) {
	letter-spacing: 0;
	line-height: 1.3;
}

/* Square, not rounded — the fleet default is soft; Webylance is not. */
.entry-content :where(img, .wp-block-image img),
.woocommerce :where(.woocommerce-loop-product__link img, .woocommerce-product-gallery__image img),
.wp-block-button__link,
.button,
input, select, textarea {
	border-radius: 2px;
}

/* Blocksy chrome: quieter, tighter, editorial. */
.ct-header [data-row] { border-block-end: 1px solid color-mix(in srgb, var(--brand-fg, #16160F) 12%, transparent); }
.ct-header .site-title,
.site-title a { font-family: var(--wl-serif); letter-spacing: .01em; }
.ct-header .menu > li > a { font-size: .95rem; }

/* Breadcrumbs / meta / labels share the mono voice used across the agency
   pages, so plugin-rendered and theme-rendered chrome read as one system. */
.ct-breadcrumbs,
.woocommerce-breadcrumb,
.posted-on,
.ct-meta-element {
	font-family: var(--wl-mono);
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* WooCommerce: the shared layer owns the mechanics; this only sets the voice. */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.15rem; }
.woocommerce .price { font-family: var(--wl-mono); font-variant-numeric: tabular-nums; }
.woocommerce-product-gallery { background: transparent; }

/*
 * The studio components (About, Design Studio) are plugin-owned and ship a
 * system-font stack. Their display headings were getting the serif from the
 * outgoing theme's main.css; this keeps them on-brand after that file is gone,
 * without importing 112 KB of legacy CSS for it.
 */
.wl5-display,
.wl5-hero-title,
.wl5-heading,
[class*="studio-"] :where(h1, h2, h3) {
	font-family: var(--wl-serif);
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/*
 * Sticky journey bar (webylance-scenario-system).
 *
 * It is translucent by default, so page text reads through it, and nothing
 * reserves space for it — on mobile the last section sits underneath. Both are
 * fixed here rather than in the plugin so the plugin stays brand-neutral.
 */
.wl-sticky-journey {
	background: var(--brand-fg, #16160F);
	backdrop-filter: none;
}
.wl-sticky-journey a { color: #F4F3EF; }
.wl-sticky-journey strong { font-family: var(--wl-serif); }

body:has(.wl-sticky-journey) { padding-block-end: 6rem; }
@supports not (selector(:has(*))) {
	body { padding-block-end: 6rem; }
}