/* =========================================================
   MASABIEH — global theme CSS
   Everything token-like lives in theme.json. This file holds
   only what theme.json cannot express: motion, focus, RTL fixes.
   ========================================================= */

:root {
	--masabieh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--masabieh-speed: 420ms;
	--masabieh-speed-fast: 220ms;
}

/* ---------------------------------------------------------
   Arabic typography safety
   Arabic is a joined script: letter-spacing tears the
   connections between letters. Never allow it to leak in.
   --------------------------------------------------------- */
:lang(ar),
[dir="rtl"] {
	letter-spacing: 0 !important;
}

/* Arabic sits lower in its em box than Latin and needs more
   leading to stay legible, especially at small sizes. */
[dir="rtl"] body {
	line-height: 1.9;
}

/* Arabic numerals in prices stay Latin for clarity on invoices. */
.woocommerce-Price-amount,
.wc-block-formatted-money-amount {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* ---------------------------------------------------------
   Accessibility
   --------------------------------------------------------- */
.skip-link:focus {
	position: fixed;
	inset-inline-start: 1rem;
	top: 1rem;
	z-index: 999999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--white);
}

/* A visible, brand-coloured focus ring on every interactive element.
   Never remove this — it is the only way keyboard users can navigate. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue-haven);
	outline-offset: 3px;
	border-radius: 1px;
}

/* ---------------------------------------------------------
   Motion — restrained by design
   --------------------------------------------------------- */

/* Navigation underline that grows from the reading edge.
   In RTL that is the right edge, which transform-origin handles. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block-end: 4px;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: inline-end;
	transition: transform var(--masabieh-speed-fast) var(--masabieh-ease);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: inline-start;
}

/* Buttons: colour only, no lift, no shadow. */
.wp-block-button__link,
.wc-block-components-button {
	transition:
		background-color var(--masabieh-speed-fast) var(--masabieh-ease),
		border-color var(--masabieh-speed-fast) var(--masabieh-ease),
		color var(--masabieh-speed-fast) var(--masabieh-ease);
}

/* Product and editorial imagery: a slow, barely-there scale.
   The wrapper clips so nothing shifts layout (protects CLS). */
.masabieh-media,
.wc-block-grid__product-image,
.woocommerce-loop-product__link img {
	overflow: hidden;
}

.masabieh-media img,
.wc-block-grid__product-image img,
.woocommerce-loop-product__link img {
	transition: transform var(--masabieh-speed) var(--masabieh-ease);
	will-change: transform;
}

.masabieh-media:hover img,
.wc-block-grid__product:hover .wc-block-grid__product-image img,
.woocommerce-loop-product__link:hover img {
	transform: scale(1.035);
}

/* Hero: a single, quiet entrance. No loops, no floating objects. */
.masabieh-hero__text > * {
	animation: masabieh-rise 900ms var(--masabieh-ease) both;
}

.masabieh-hero__text > *:nth-child(2) { animation-delay: 90ms; }
.masabieh-hero__text > *:nth-child(3) { animation-delay: 180ms; }
.masabieh-hero__text > *:nth-child(4) { animation-delay: 260ms; }

@keyframes masabieh-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* The single most important accessibility rule in this file.
   Users who ask their OS for less motion get none of it. */
@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;
	}

	.masabieh-hero__text > * {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* Motion is lighter and faster on phones, where it costs the most. */
@media (max-width: 781px) {
	:root {
		--masabieh-speed: 300ms;
	}

	.masabieh-media:hover img {
		transform: none; /* there is no hover on touch — do not pay for it */
	}
}

/* ---------------------------------------------------------
   Editorial helpers used by the block patterns
   --------------------------------------------------------- */

/* A small uppercase-ish label above section headings. */
.masabieh-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--blue-haven);
	margin-block-end: 0.5rem;
}

/* Hairline rule used between editorial sections. */
.masabieh-rule {
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
	margin: 0;
}

/* Constrain long Arabic paragraphs to a comfortable measure.
   Arabic reads best a little narrower than English. */
.masabieh-measure {
	max-width: 46ch;
}

/* Images never cause layout shift. */
img {
	max-width: 100%;
	height: auto;
}