/*
 * Base styles of the wpsites theme: reset, type, layout primitives, buttons, header, footer, forms and shared components.
 * Rules: every colour, size, space, radius and shadow is a token from theme.json (var(--wp--preset--...) or
 * var(--wp--custom--...)); logical properties only (inline/block, start/end), so one stylesheet serves Arabic and English;
 * no letter-spacing (it breaks Arabic joining). A section's own styles are in sections/<layout>.css.
 */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-block-start: calc(var(--wp--custom--header--height) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	margin: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--custom--font--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--weight--body);
	line-height: var(--wp--custom--line-height--body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
	/* A page shorter than the window keeps its footer at the bottom (no strip of page background under it). */
	min-block-size: 100vh;
	display: flex;
	flex-direction: column;
}
.site-main { flex: 1 0 auto; }
html[lang^="ar"] body {
	font-size: var(--wp--custom--arabic--size);
	line-height: var(--wp--custom--arabic--line-height);
}
img, svg, video { max-inline-size: 100%; block-size: auto; }
img { display: inline-block; vertical-align: middle; }
img.is-svg { inline-size: 64px; block-size: 64px; object-fit: contain; aspect-ratio: 1; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--custom--font--heading);
	font-weight: var(--wp--custom--weight--heading);
	line-height: var(--wp--custom--line-height--heading);
	color: var(--wp--preset--color--ink);
	margin-block: 0 var(--wp--preset--spacing--20);
	text-wrap: balance;
}
html[lang^="ar"] :is(h1, h2, h3, h4, h5, h6) { line-height: var(--wp--custom--arabic--heading-line-height); }
h1 { font-size: var(--wp--preset--font-size--xx-large); }
h2 { font-size: var(--wp--preset--font-size--x-large); }
h3 { font-size: var(--wp--preset--font-size--large); }
p, ul, ol, dl, blockquote, figure { margin-block: 0 var(--wp--preset--spacing--20); }
p, li { text-wrap: pretty; }
a { color: var(--wp--preset--color--primary); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: var(--wp--custom--weight--heading); }

/* ---------- utilities ---------- */
.nowrap { white-space: nowrap; }
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	inset-inline-start: var(--wp--preset--spacing--20);
	inset-block-start: -10rem;
	z-index: 100;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--small);
}
.skip-link:focus { inset-block-start: var(--wp--preset--spacing--10); }
.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; vertical-align: middle; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

/* ---------- layout ---------- */
.container {
	inline-size: 100%;
	max-inline-size: calc(var(--wp--custom--container--width) + 2 * var(--wp--custom--container--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--gutter);
}
.container--narrow { max-inline-size: calc(var(--wp--custom--container--narrow) + 2 * var(--wp--custom--container--gutter)); }
.s { padding-block: var(--wp--preset--spacing--60); }
/* On a tablet and a phone a long one-page site breathes less between sections, and Latin text sits a little tighter. */
@media (min-width: 600px) and (max-width: 999px) {
	.s { padding-block: var(--wp--preset--spacing--50); }
	html:not([lang^="ar"]) body { line-height: 1.65; }
}
@media (max-width: 599px) {
	.s { padding-block: var(--wp--preset--spacing--40); }
	html:not([lang^="ar"]) body { line-height: 1.6; }
}
/* Two sections on the page's own background share one gap; a section with its own background (s--bg) keeps both. */
.s:not(.s--bg) + .s:not(.s--bg) { padding-block-start: 0; }
.section-head { max-inline-size: 44rem; margin-block-end: var(--wp--preset--spacing--40); }
.section-head__title { font-size: var(--wp--preset--font-size--x-large); }
.section-head__text { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--muted); }
.section-head__text:last-child { margin-block-end: 0; }
.grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A swipe row never widens the page: it is the positioning box of what it holds, so a screen-reader-only label (absolute)
   in a card scrolled out of view stays clipped inside the row instead of standing 1,000px out at its in-flow place. */
[data-swipe] { position: relative; }
/* On a phone every swipe row is one line of cards, the next one showing at the edge (a section may size its own). */
@media (max-width: 599px) {
	.s [data-swipe] {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 82%;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		padding-block-end: 0.5rem;
		scrollbar-width: thin;
	}
	.s [data-swipe] > * { scroll-snap-align: start; }
}
/* the arrows and dots that site.js puts under a row marked data-swipe; the row scrolls sideways on a phone only */
.swipe-nav { display: flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--20); margin-block-start: var(--wp--preset--spacing--10); }
@media (min-width: 600px) {
	.swipe-nav { display: none; }
}
.swipe-nav__arrow {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}
.swipe-nav__arrow:disabled { opacity: 0.35; cursor: default; }
.swipe-nav__arrow--prev .icon { transform: scaleX(-1); }
[dir="rtl"] .swipe-nav__arrow--prev .icon { transform: none; }
.swipe-nav__dots { display: flex; gap: 6px; }
.swipe-nav__dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--wp--preset--color--line); }
.swipe-nav__dots i.is-on { background: var(--wp--preset--color--primary); inline-size: 20px; border-radius: 4px; }
.card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--custom--shadow--small);
}
.prose { max-inline-size: 70ch; }
.prose :is(h2, h3) { margin-block-start: var(--wp--preset--spacing--40); }
.prose h2 { font-size: var(--wp--preset--font-size--large); }
.prose h3 { font-size: var(--wp--preset--font-size--medium); }
.prose :is(ul, ol) { padding-inline-start: 1.25em; }
.legal .s { padding-block: var(--wp--preset--spacing--40); }

/* ---------- buttons and links ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-block-size: 48px;
	padding: 0.7rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	font-weight: var(--wp--custom--weight--strong);
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* custom.button.background and custom.button.text let a brand whose buttons are its accent colour say so in theme.json. */
.btn--primary { background: var(--wp--custom--button--background, var(--wp--preset--color--primary)); color: var(--wp--custom--button--text, var(--wp--preset--color--primary-contrast)); }
.btn--primary:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); }
.btn--ghost { background: transparent; color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }
.btn--ghost:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-contrast); }
.btn--light { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--primary); }
.btn--light:hover { background: var(--wp--preset--color--surface-alt); }
/* on a dark band: the accent button and an outlined light one */
.btn--accent { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); }
.btn--accent:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }
.btn--outline-light { background: transparent; color: var(--wp--preset--color--primary-contrast); border-color: rgba(255, 255, 255, 0.55); }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--wp--preset--color--primary-contrast); }
.btn .icon { inline-size: 1.15em; block-size: 1.15em; }
.btn--small { min-block-size: 44px; padding: 0.45rem 1rem; font-size: var(--wp--preset--font-size--small); }
.link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: var(--wp--custom--weight--strong);
	text-decoration: none;
}
.link-more:hover { text-decoration: underline; }
.link-more--back .icon--dir { transform: scaleX(-1); }
[dir="rtl"] .link-more--back .icon--dir { transform: none; }

/* ---------- header ---------- */
.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: var(--wp--preset--color--surface);
	border-block-end: 1px solid var(--wp--preset--color--line);
}
.admin-bar .site-header { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { inset-block-start: 0; } }
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--header--height);
}
.site-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	max-inline-size: 60%;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
/* The logo's height is a token: a wide logo with a wordmark inside it is unreadable at 48px, and the direction stage sets
   custom.logo.height in theme.json (with header.height) for such a file. */
.site-brand__logo { max-block-size: var(--wp--custom--logo--height, 48px); inline-size: auto; }
/* An SVG logo is not an icon: it keeps its own proportions at the logo's height, not the 64px square of img.is-svg. */
.site-brand__logo.is-svg { inline-size: auto; block-size: var(--wp--custom--logo--height, 48px); aspect-ratio: auto; }
@media (max-width: 599px) {
	.site-brand__logo.is-svg { block-size: calc(var(--wp--custom--logo--height, 48px) * 0.8); }
	/* a wide wordmark, the language link, the call button and the menu toggle share a phone's width */
	.site-brand__logo { max-block-size: calc(var(--wp--custom--logo--height, 48px) * 0.68); }
	.site-header__inner { gap: var(--wp--preset--spacing--10); }
	.site-header__actions { gap: 0.25rem; }
	.lang-switch a { padding-inline: 0.4rem; }
}
.site-brand__name {
	/* a long name beside the logo breaks between its parts at tablet width, not leaving one word alone */
	text-wrap: balance;
	font-family: var(--wp--custom--font--heading);
	font-weight: var(--wp--custom--weight--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	margin-inline-start: auto;
}
.site-nav__list, .site-nav__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: var(--wp--custom--weight--strong);
	border-radius: var(--wp--custom--radius--small);
}
.site-nav__list a:hover { color: var(--wp--preset--color--primary); background: var(--wp--preset--color--surface-alt); }
.site-nav__list :is(.current-menu-item, .current-menu-ancestor, .current_page_item) > a { color: var(--wp--preset--color--primary); }
.nav-toggle {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--surface);
	cursor: pointer;
}
/* This site's menu needs 1200px on one line: below that, the toggle. */
@media (max-width: 1199px) {
	/* Without JavaScript the menu stays open under the header; the script closes it and drives the toggle. */
	html:not(.js) .nav-toggle { display: none; }
	html:not(.js) .site-header__inner { flex-wrap: wrap; }
	html:not(.js) .site-nav { order: 3; inline-size: 100%; }
	html:not(.js) .site-nav__list { display: flex; flex-wrap: wrap; }
	html.js .site-nav {
		display: none;
		position: fixed;
		inset-inline: 0;
		inset-block: var(--wp--custom--header--height) 0;
		overflow-y: auto;
		padding: var(--wp--preset--spacing--30) var(--wp--custom--container--gutter);
		background: var(--wp--preset--color--surface);
	}
	html.js .site-nav.is-open { display: block; }
	html.js .site-nav__list a { padding-block: 0.85rem; font-size: var(--wp--preset--font-size--medium); border-block-end: 1px solid var(--wp--preset--color--line); border-radius: 0; }
	.site-nav__list .sub-menu { padding-inline-start: var(--wp--preset--spacing--20); }
	.site-header__cta span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
	.site-header__cta { padding-inline: 0.75rem; }
}
/* From 600px the header has room for the call button's label again: only phones show the icon alone. */
@media (min-width: 600px) and (max-width: 1199px) {
	.site-header__cta span { position: static; inline-size: auto; block-size: auto; overflow: visible; clip: auto; }
	.site-header__cta { padding-inline: 1rem; }
}
@media (min-width: 1200px) {
	.nav-toggle { display: none; }
	.site-nav__list a, .site-header__cta { white-space: nowrap; }
	.site-nav__list a { padding-inline: 0.5rem; }
	.site-nav { margin-inline-start: auto; }
	.site-header__actions { margin-inline-start: 0; }
	.site-nav__list { display: flex; align-items: center; gap: 0.25rem; }
	.site-nav__list > li { position: relative; }
	.site-nav__list .sub-menu {
		display: none;
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 100%;
		min-inline-size: 14rem;
		padding: var(--wp--preset--spacing--10);
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius--medium);
		box-shadow: var(--wp--custom--shadow--medium);
	}
	.site-nav__list li:is(:hover, :focus-within) > .sub-menu { display: block; }
}
.lang-switch { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.lang-switch a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-block-size: 44px;
	padding-inline: 0.6rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--weight--strong);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--small);
}
.lang-switch a:hover { background: var(--wp--preset--color--surface-alt); }
/* Up to 1499px the full menu leaves the language link its globe only; its name stays for screen readers and as a tooltip. */
@media (min-width: 1200px) and (max-width: 1499px) {
	.lang-switch a span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
	.lang-switch a { position: relative; }
}
.lang-switch .icon { color: var(--wp--preset--color--primary); }

/* ---------- page header ---------- */
.page-header {
	background: var(--wp--preset--color--surface-alt);
	padding-block: var(--wp--preset--spacing--50);
}
.page-header__title { font-size: var(--wp--preset--font-size--x-large); margin: 0; }
.page-header__intro { margin: var(--wp--preset--spacing--10) 0 0; color: var(--wp--preset--color--muted); }
.not-found { padding-block: var(--wp--preset--spacing--50); }

/* ---------- contact details and form ---------- */
.contact-details { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--20); }
.contact-details__item { display: flex; gap: var(--wp--preset--spacing--20); align-items: flex-start; }
.contact-details__icon { color: var(--wp--preset--color--primary); margin-block-start: 0.2em; }
.contact-details__body { display: flex; flex-direction: column; min-inline-size: 0; }
.contact-details__label { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.contact-details__value { color: var(--wp--preset--color--ink); font-weight: var(--wp--custom--weight--strong); overflow-wrap: anywhere; text-wrap: balance; /* an address breaks between its parts, not inside a street name */ }
a.contact-details__value { text-decoration: none; }
a.contact-details__value:hover { text-decoration: underline; }
.contact-details--compact .contact-details__label { display: none; }
.contact-details--compact .contact-details__value { font-weight: var(--wp--custom--weight--body); }

.contact-form { display: grid; gap: var(--wp--preset--spacing--20); }
@media (min-width: 600px) {
	.contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contact-form__field--wide, .contact-form__actions, .contact-form__status { grid-column: 1 / -1; }
}
.contact-form__field { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.contact-form label { font-weight: var(--wp--custom--weight--strong); }
.contact-form__req { font-weight: var(--wp--custom--weight--body); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.contact-form :is(input, textarea) {
	inline-size: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--surface);
}
.contact-form :is(input, textarea):focus-visible { border-color: var(--wp--preset--color--primary); }
.contact-form__actions { margin: 0; }
.contact-form__status { margin: 0; font-weight: var(--wp--custom--weight--strong); color: var(--wp--preset--color--primary); }
.contact-form__status:empty { display: none; }
.contact-form__trap { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.site-footer {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}
.site-footer a, .site-footer .contact-details__value { color: var(--wp--preset--color--surface); }
.site-footer .contact-details__icon { color: var(--wp--preset--color--surface); opacity: 0.8; }
.site-footer__grid { display: grid; gap: var(--wp--preset--spacing--40); }
@media (min-width: 900px) {
	.site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer__name {
	font-family: var(--wp--custom--font--heading);
	font-weight: var(--wp--custom--weight--heading);
	font-size: var(--wp--preset--font-size--medium);
	margin-block-end: var(--wp--preset--spacing--10);
}
.site-footer__text { opacity: 0.85; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.site-footer__list a { text-decoration: none; }
.site-footer__list a:hover { text-decoration: underline; }
.site-footer__bottom {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.85;
}
/* the rule on the text, not the container, so it stops where the columns above stop */
.site-footer__bottom p { margin: 0; padding-block-start: var(--wp--preset--spacing--20); border-block-start: 1px solid rgba(255, 255, 255, 0.2); }
.social { list-style: none; margin: var(--wp--preset--spacing--20) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.social a {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgba(255, 255, 255, 0.35);
}
.social a:hover { background: rgba(255, 255, 255, 0.12); }

/* the WhatsApp button, at the end corner of the screen */
.wa-float {
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--20);
	inset-inline-end: var(--wp--preset--spacing--20);
	z-index: 40;
	display: grid;
	place-items: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	box-shadow: var(--wp--custom--shadow--medium);
}
.wa-float .icon { inline-size: 28px; block-size: 28px; }
/* Below 1280px the page margin is narrower than the button, which then sits over card text and the footer; the sticky header
   carries the same WhatsApp button there. */
@media (max-width: 1279px) {
	.wa-float { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}