/**
 * Eliaa Threads — component styles.
 *
 * Rules:
 *  - Colours, fonts and spacing come from theme.json presets (var(--wp--preset--*)).
 *    Rebranding = edit theme.json, never this file.
 *  - Logical properties only (margin-inline-start, padding-block, inset-inline-end…)
 *    so the Arabic RTL layout mirrors automatically. RTL-only fixes live in rtl.css.
 *  - Mobile first; enhancements behind min-width queries.
 */

:root {
	--eliaa-radius: var(--wp--custom--radius--small, 2px);
	--eliaa-radius-md: var(--wp--custom--radius--medium, 6px);
	--eliaa-transition: var(--wp--custom--transition, 180ms ease-out);
	--eliaa-focus-color: var(--wp--preset--color--primary);
	--eliaa-border: var(--wp--preset--color--border);
	--eliaa-arrow: "\2192"; /* → ; flipped in rtl.css */
}

/* ---------- Base ---------- */

html {
	scroll-padding-block-start: 5rem;
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	block-size: 1px;
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

/* ---------- Focus & skip link (WCAG 2.4.7) ---------- */

:where(a, button, input, select, textarea, summary, [tabindex], .wp-element-button):focus-visible {
	outline: var(--wp--custom--focus--width, 2px) solid var(--eliaa-focus-color);
	outline-offset: var(--wp--custom--focus--offset, 3px);
	border-radius: var(--eliaa-radius);
}

:where(.has-primary-background-color, .has-secondary-strong-background-color, .has-contrast-background-color, .eliaa-site-footer) {
	--eliaa-focus-color: var(--wp--preset--color--base);
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.75rem 1.25rem;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 100000;
	text-decoration: none;
}

/* ---------- Forms ---------- */

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="password"], input[type="url"], select, textarea) {
	border: 1px solid var(--eliaa-border);
	border-radius: var(--eliaa-radius);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

:where(input, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--primary);
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--eliaa-transition), color var(--eliaa-transition), border-color var(--eliaa-transition);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border-color: currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.eliaa-site-footer .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Block style variations ---------- */

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-strong);
	margin-block-end: var(--wp--preset--spacing--20);
}

.has-primary-background-color .is-style-eyebrow,
.has-secondary-strong-background-color .is-style-eyebrow,
.has-contrast-background-color .is-style-eyebrow {
	color: var(--wp--preset--color--subtle);
}

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--eliaa-radius-md);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--50);
}

.eliaa-arrow-link a {
	font-weight: 500;
	text-decoration: none;
	border-block-end: 1px solid currentColor;
	padding-block-end: 2px;
}

.eliaa-arrow-link a::after {
	content: var(--eliaa-arrow);
	display: inline-block;
	margin-inline-start: 0.4em;
	transition: transform var(--eliaa-transition);
}

.eliaa-arrow-link a:hover::after {
	transform: translateX(0.2em);
}

/* ---------- Header ---------- */

.eliaa-announcement p {
	margin: 0;
	letter-spacing: 0.04em;
}

.eliaa-site-header {
	border-block-end: 1px solid var(--eliaa-border);
}

.eliaa-site-header__row {
	gap: var(--wp--preset--spacing--30);
}

.eliaa-site-header .wp-block-site-logo img {
	display: block;
	max-inline-size: clamp(120px, 32vw, 170px);
	block-size: auto;
}

.eliaa-main-nav {
	flex: 1 1 auto;
}

.eliaa-header-actions {
	flex: 0 0 auto;
	align-items: center;
}

.eliaa-header-search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 0;
	padding: 0.4rem;
}

.eliaa-header-search .wp-block-search__input {
	min-inline-size: 12rem;
}

.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--base) !important;
}

/* Mobile: hamburger first, then logo, then icons. */
@media (max-width: 599px) {
	.eliaa-main-nav {
		order: -1;
		flex: 0 0 auto;
	}

	.eliaa-site-header .wp-block-site-logo {
		flex: 1 1 auto;
	}

	.eliaa-header-actions {
		gap: var(--wp--preset--spacing--20) !important;
	}
}

/* ---------- Language switcher ---------- */

.eliaa-lang-switcher__list {
	display: flex;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.eliaa-lang-switcher__item + .eliaa-lang-switcher__item::before {
	content: "/";
	margin-inline-end: 0.25rem;
	color: var(--wp--preset--color--muted);
}

.eliaa-lang-switcher a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	padding-block: 0.25rem;
}

.eliaa-lang-switcher .is-current a,
.eliaa-lang-switcher a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* ---------- Sections ---------- */

.eliaa-hero__image img,
.eliaa-collection-card img,
.eliaa-story img {
	border-radius: var(--eliaa-radius-md);
}

.eliaa-collection-card .wp-block-image {
	overflow: hidden;
	border-radius: var(--eliaa-radius-md);
	margin-block-end: var(--wp--preset--spacing--30);
}

.eliaa-collection-card .wp-block-image img {
	transition: transform 600ms ease-out;
}

.eliaa-collection-card:hover .wp-block-image img {
	transform: scale(1.03);
}

.eliaa-collection-card h3 a {
	color: inherit;
	text-decoration: none;
}

.eliaa-trust-bar {
	border-block: 1px solid var(--eliaa-border);
}

.eliaa-trust-item {
	position: relative;
	padding-inline-start: 3rem;
}

.eliaa-trust-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.2rem;
	inline-size: 2rem;
	block-size: 2rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--eliaa-icon) no-repeat center / contain;
	mask: var(--eliaa-icon) no-repeat center / contain;
}

.eliaa-trust-item--shipping { --eliaa-icon: url(../images/icons/shipping.svg); }
.eliaa-trust-item--secure { --eliaa-icon: url(../images/icons/secure.svg); }
.eliaa-trust-item--handmade { --eliaa-icon: url(../images/icons/handmade.svg); }

.eliaa-trust-item h3,
.eliaa-trust-item p {
	margin-block: 0 0.25rem;
}

.eliaa-story a:not(.wp-element-button) {
	color: inherit;
}

/* Arabic tagline shown under the English hero title. */
.eliaa-ar-line {
	font-family: "Amiri", "Noto Naskh Arabic", serif;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.eliaa-founder-quote {
	margin: var(--wp--preset--spacing--40) 0;
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 2px solid var(--wp--preset--color--accent);
}

.eliaa-founder-quote p {
	margin: 0;
}

.eliaa-founder-quote [lang="ar"] {
	font-family: "Amiri", "Noto Naskh Arabic", serif;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.6;
}

.eliaa-founder-quote__translation {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	opacity: 0.9;
}

.eliaa-craft__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	color: var(--wp--preset--color--accent);
	margin-block-end: var(--wp--preset--spacing--20);
}

.eliaa-craft__step {
	border-block-start: 1px solid var(--eliaa-border);
	padding-block-start: var(--wp--preset--spacing--40);
}

/* ELIAA EDIT: curated line, visually distinct (olive, no tatreez ornament). */
.eliaa-edit-label {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	border: 1px solid currentColor;
	padding: 0.35em 0.9em;
	margin-block-end: var(--wp--preset--spacing--30);
}

.eliaa-edit-note {
	opacity: 0.9;
	font-style: italic;
}

.eliaa-product-facts .eliaa-edit-label {
	color: var(--wp--preset--color--secondary-strong);
}

body.eliaa-is-edit {
	--eliaa-focus-color: var(--wp--preset--color--secondary-strong);
}

body.eliaa-is-edit .wp-block-query-title,
body.eliaa-is-edit .eliaa-product-summary .wp-block-post-title {
	color: var(--wp--preset--color--secondary-strong);
}

body.eliaa-is-edit .wp-block-query-title::before {
	content: "ELIAA EDIT";
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.24em;
	margin-block-end: var(--wp--preset--spacing--20);
}

.eliaa-review {
	block-size: 100%;
}

.eliaa-review__stars {
	color: var(--wp--preset--color--accent-strong);
	letter-spacing: 0.15em;
	margin-block-end: var(--wp--preset--spacing--20);
}

.eliaa-events__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.eliaa-events__list li {
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--eliaa-border);
}

/* ---------- Products ---------- */

.eliaa-product-grid .wc-block-product-template,
.eliaa-product-grid .wp-block-woocommerce-product-template {
	/* Row gap only: WooCommerce sizes columns from its own column gap. */
	row-gap: var(--wp--preset--spacing--50);
}

.eliaa-product-grid .wc-block-components-product-image img {
	border-radius: var(--eliaa-radius-md);
	background: var(--wp--preset--color--subtle);
}

.eliaa-product-grid .wp-block-post-title {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
	font-weight: 500;
	line-height: 1.25;
}

.eliaa-product-grid .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.eliaa-product-grid .wp-block-post-title a:hover {
	text-decoration: underline;
}

.eliaa-shop-toolbar {
	margin-block: var(--wp--preset--spacing--30);
	align-items: center;
}

.eliaa-shop-toolbar .woocommerce-ordering select {
	padding-block: 0.5rem;
	padding-inline: 0.75rem 2rem;
}

.eliaa-product-summary > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.eliaa-product-assurances {
	list-style: none;
	padding: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--eliaa-border);
	border-radius: var(--eliaa-radius-md);
	font-size: var(--wp--preset--font-size--small);
}

.eliaa-product-assurances li {
	position: relative;
	padding-inline-start: 1.6rem;
}

.eliaa-product-assurances li + li {
	margin-block-start: 0.4rem;
}

.eliaa-product-assurances li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.2rem;
	inset-block-start: 0.35em;
	inline-size: 0.45rem;
	block-size: 0.8rem;
	/* Tick mark glyph: intentionally physical, a check mark is not mirrored in RTL. */
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
}

.eliaa-product-details {
	margin-block-start: var(--wp--preset--spacing--60);
}

.eliaa-related {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wc-block-components-notice-banner {
	border-radius: var(--eliaa-radius);
}

.eliaa-product-facts__list {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--small);
	border-block-start: 1px solid var(--eliaa-border);
}

.eliaa-product-facts__row {
	display: grid;
	grid-template-columns: minmax(7rem, 30%) 1fr;
	gap: var(--wp--preset--spacing--30);
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--eliaa-border);
}

.eliaa-product-facts__row dt {
	font-weight: 600;
}

.eliaa-product-facts__row dd {
	margin: 0;
}

/* ---------- Checkout ---------- */

.eliaa-secure-note {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.eliaa-secure-note::before {
	content: "";
	inline-size: 1rem;
	block-size: 1rem;
	background-color: currentColor;
	-webkit-mask: url(../images/icons/secure.svg) no-repeat center / contain;
	mask: url(../images/icons/secure.svg) no-repeat center / contain;
}

.eliaa-checkout-footer .wp-block-list,
.eliaa-site-footer .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.eliaa-footer-policies {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}

/* ---------- Footer ---------- */

.eliaa-site-footer a {
	color: inherit;
	text-decoration: none;
}

.eliaa-site-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.eliaa-site-footer .eliaa-footer-heading {
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--x-small) !important;
}

.eliaa-footer-logo img {
	max-inline-size: 180px;
	block-size: auto;
}

.eliaa-footer-tagline {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	color: var(--wp--preset--color--accent);
	margin-block: var(--wp--preset--spacing--30) 0.5rem;
}

.eliaa-footer-links li + li {
	margin-block-start: 0.5rem;
}

.eliaa-footer-instagram a {
	border-block-end: 1px solid var(--wp--preset--color--accent);
}

.eliaa-footer-separator {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 20%, transparent) !important;
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) !important;
	opacity: 1;
}

.eliaa-footer-bottom {
	align-items: center;
}

.eliaa-footer-bottom p {
	margin: 0;
}

.eliaa-payment-methods {
	opacity: 0.85;
	margin-block-start: var(--wp--preset--spacing--30);
}

.eliaa-payment-methods__label {
	font-weight: 600;
}

/* ---------- Blog ---------- */

.eliaa-post-card {
	border-block-end: 1px solid var(--eliaa-border);
}

/* ---------- Motion ---------- */

@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;
	}
}