/*
 * Tarot Arabi — global shell
 *
 * Site header, primary navigation, editorial mega panels, compact dropdown,
 * mobile drawer, breadcrumbs, notice slot and footer.
 *
 * This layer composes the P03 tokens and primitives. It never redefines
 * typography, buttons, forms, cards, arrows or motion — only the palette was
 * migrated (gold/brass replacing apricot) because the owner changed it.
 *
 * Colour roles used here:
 *   Deep Green  structure, headings, the global CTA, nav interaction
 *   Gold/Brass  restrained editorial accents only (group labels, tile arrows)
 *
 * Stacking order (a future overlay layer must sit above the shell):
 *   header      100   --z-header
 *   mega panel  150   --z-menu
 *   nav overlay 190   --z-overlay
 *   nav drawer  200   --z-drawer
 *   reserved    300+  modals, video lightboxes, WooCommerce dialogs
 */

:root {
	--z-header: 100;
	--z-menu: 150;
	--z-overlay: 190;
	--z-drawer: 200;
	--header-height: 80px;
	--nav-underline: 2px;
}

/* ================================================================ Header */

.ta-site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--z-header);
	background-color: var(--color-surface);
	border-block-end: var(--border-neutral);
	/* Crisp, not heavy: one soft lift so the shell separates from the page. */
	box-shadow: 0 6px 14px rgba(23, 79, 58, 0.035);
}

body.admin-bar .ta-site-header {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

/* The drawer is fixed to the top too, so it needs the same offset: without it the
   admin bar covers the close button for a signed-in administrator. */
body.admin-bar .ta-mobile-nav {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

/* Three balanced regions: equal side tracks keep the navigation as the true
   central axis, with the brand anchored inline-start and the actions inline-end. */
.ta-site-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-6);
	min-block-size: var(--header-height);
}

.ta-site-header__brand {
	display: flex;
	align-items: center;
	justify-self: start;
}

.ta-site-header__nav {
	display: flex;
	justify-self: center;
}

.ta-site-header__actions {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: var(--space-3);
}

/* Header-sized CTA: belongs to the bar rather than looking like a page button. */
.ta-site-header .ta-shell-cta {
	min-block-size: 46px;
	padding-inline: 22px;
	font-size: var(--text-body);
}

/* ---------------------------------------------------------- Brand lockup */
/* Arabic-only wordmark: Janna LT Bold 700, Deep Green. No English brand text is
   rendered publicly. Replacing it with the final logo means replacing only the
   inner markup of .ta-brand__lockup. Never mirrored, never underlined. */

.ta-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--color-green-900);
}

.ta-brand:hover,
.ta-brand:focus-visible {
	color: var(--color-green-900);
}

.ta-brand__lockup {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.ta-brand__ar {
	color: var(--color-green-900);
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: var(--weight-bold);
	line-height: 1;
	letter-spacing: normal;
}

/* The approved lockup, used only on light surfaces (header, drawer head).
   Proportional sizing: the height is capped so the 80px header keeps its
   rhythm, and both max constraints scale the artwork without ever stretching
   or cropping it. Below 1200px the compact emblem stands in where the desktop
   navigation leaves the brand track too narrow for the full lockup. */
.ta-brand__picture {
	display: inline-flex;
	align-items: center;
}

.ta-brand__logo {
	display: block;
	block-size: auto;
	inline-size: auto;
	max-block-size: clamp(44px, 3.8vw, 56px);
	max-inline-size: 100%;
}

/* =================================================== Primary navigation */

.ta-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}

.ta-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-block-size: 48px;
	padding-block: var(--space-4);
	padding-inline: var(--space-3);
	border: 0;
	background-color: transparent;
	color: var(--color-charcoal);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	text-decoration: none;
	cursor: pointer;
	transition: color var(--duration-interaction) var(--ease-interaction);
}

/* Label + chevron are one inline unit with an explicit 5px gap. Never
   space-between: the chevron must read as part of its own label. */
.ta-nav__trigger-content {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

html[dir="rtl"] {
	--ta-underline-origin: right;
}

html[dir="ltr"] {
	--ta-underline-origin: left;
}

/* The underline hangs off the label, so its width tracks the text (≈68%). It
   sits 9px below the text with clear breathing room, in Deep Green — the header
   never uses gold for interaction. */
.ta-nav__label {
	position: relative;
	display: inline-block;
}

.ta-nav__label::after {
	content: "";
	position: absolute;
	inset-block-start: calc(100% + 9px);
	inset-inline-start: 16%;
	inline-size: 68%;
	block-size: var(--nav-underline);
	border-radius: var(--radius-pill);
	background-color: var(--color-green-900);
	transform: scaleX(0);
	transform-origin: var(--ta-underline-origin, right);
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-nav__link:hover {
	color: var(--color-green-900);
}

.ta-nav__link:hover .ta-nav__label::after,
.ta-nav__item--panel.is-open .ta-nav__label::after {
	transform: scaleX(1);
}

.ta-nav__link:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

/* Current page: the same Deep Green line stays visible, with slightly stronger
   text. Never a background, pill or highlight rectangle. */
.ta-nav__link.is-current {
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
}

.ta-nav__link.is-current .ta-nav__label::after {
	transform: scaleX(1);
}

.ta-nav__chevron-wrap,
.ta-acc__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ta-nav__chevron {
	inline-size: 15px;
	block-size: 15px;
	stroke-width: 1.9;
	color: var(--color-text-muted);
	transition:
		color var(--duration-interaction) var(--ease-interaction),
		transform var(--duration-interaction) var(--ease-interaction);
}

.ta-nav__item--panel:hover .ta-nav__chevron,
.ta-nav__item--panel.is-open .ta-nav__chevron {
	color: var(--color-green-900);
}

.ta-nav__item--panel.is-open .ta-nav__chevron {
	transform: rotate(180deg);
}

/* ======================================================= Mega panel shell */
/* One editorial pattern for Learn, Cards, Courses and Books: a feature card on
   the inline-start (~32%) and compact navigation tiles beside it (~68%). */

.ta-mega {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-start: 50%;
	z-index: var(--z-menu);
	inline-size: min(1120px, calc(100vw - (var(--container-pad) * 2)));
	animation: ta-mega-in var(--duration-interaction) var(--ease-interaction);
}

html[dir="rtl"] .ta-mega {
	transform: translateX(50%);
}

html[dir="ltr"] .ta-mega {
	transform: translateX(-50%);
}

.ta-mega[hidden] {
	display: none;
}

@keyframes ta-mega-in {
	from {
		opacity: 0;
		transform: translateX(50%) translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateX(50%) translateY(0);
	}
}

html[dir="ltr"] .ta-mega {
	animation-name: ta-mega-in-ltr;
}

@keyframes ta-mega-in-ltr {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.ta-mega__panel {
	display: grid;
	/* Feature card ≈33% of the panel content, navigation area ≈67%. */
	grid-template-columns: minmax(0, 6.7fr) minmax(0, 13.3fr);
	gap: var(--space-6);
	padding: 26px;
	border: var(--border-neutral);
	border-radius: 20px;
	background-color: var(--color-surface);
	box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------- Feature card */

.ta-mega__feature {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-inline-size: 0;
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background-color: var(--color-bg);
	transition: background-color var(--duration-interaction) var(--ease-interaction);
}

.ta-mega__feature:hover {
	background-color: var(--color-surface-alt);
}

/* Media: one reusable component, 16:10, placeholder or owner artwork. */
.ta-mega__media {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid rgba(23, 79, 58, 0.1);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-alt);
	background-image:
		radial-gradient(circle at 20% 16%, rgba(198, 161, 91, 0.2), transparent 58%),
		radial-gradient(circle at 84% 90%, rgba(23, 79, 58, 0.09), transparent 60%);
}

.ta-mega__media-image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ta-mega__media-mark {
	display: inline-flex;
	color: rgba(23, 79, 58, 0.5);
}

.ta-mega__media-label {
	color: var(--color-green-900);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--leading-meta);
	text-align: center;
}

.ta-mega__feature-eyebrow {
	margin-block-start: var(--space-1);
	color: var(--color-gold-action);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--leading-meta);
}

.ta-mega__feature-title {
	color: var(--color-green-900);
	font-family: var(--font-heading);
	font-size: var(--text-card);
	font-weight: var(--weight-bold);
	line-height: var(--leading-heading);
}

.ta-mega__feature-desc {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-body);
}

/* Standalone CTA: no underline, arrow shifts toward the inline-start. */
.ta-mega__feature-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: auto;
	padding-block-start: var(--space-3);
	color: var(--color-green-900);
	font-size: var(--text-body);
	font-weight: var(--weight-bold);
	text-decoration: none;
}

.ta-mega__feature-cta:hover {
	color: var(--color-action-hover);
}

.ta-mega__feature-cta-arrow {
	display: inline-flex;
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-mega__feature-cta:hover .ta-mega__feature-cta-arrow {
	transform: translateX(-4px);
}

html[dir="ltr"] .ta-mega__feature-cta:hover .ta-mega__feature-cta-arrow {
	transform: translateX(4px);
}

/* ---------------------------------------------------- Navigation area */

.ta-mega__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4) var(--space-6);
	min-inline-size: 0;
}

.ta-mega__group {
	min-inline-size: 0;
}

/* Compact group label: a tiny marker plus text. No full-width rule. */
.ta-mega__group-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-2);
	padding-inline-start: var(--space-3);
	color: var(--color-gold-action);
	font-size: 13px;
	font-weight: var(--weight-bold);
	line-height: var(--leading-meta);
}

/* The marker is a flex item, not an absolutely positioned dot, so it cannot
   escape its label. */
.ta-mega__group-label::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background-color: currentcolor;
}

.ta-mega__tiles {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-mega__tile-item {
	margin: 0;
}

/* Lightweight link tile: transparent by default, soft sage on hover with a 1px
   lift and a left-shifting arrow. No heavy border, no card. */
.ta-mega__tile {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
	padding: 11px 12px;
	border-radius: 12px;
	color: var(--color-charcoal);
	text-decoration: none;
	transition:
		background-color var(--duration-micro) var(--ease-standard),
		transform var(--duration-interaction) var(--ease-interaction);
}

.ta-mega__tile:hover {
	background-color: rgba(221, 233, 225, 0.6);
	transform: translateY(-1px);
}

.ta-mega__tile:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: -2px;
}

.ta-mega__tile-text {
	min-inline-size: 0;
}

.ta-mega__tile-title {
	display: block;
	color: var(--color-green-900);
	font-size: var(--text-body);
	font-weight: var(--weight-bold);
	line-height: var(--leading-meta);
}

.ta-mega__tile-desc {
	display: block;
	margin-block-start: 2px;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-meta);
}

.ta-mega__tile-arrow {
	display: inline-flex;
	flex: 0 0 auto;
	margin-block-start: 3px;
	color: var(--color-gold-action);
	opacity: 0;
	transition:
		opacity var(--duration-micro) var(--ease-standard),
		transform var(--duration-interaction) var(--ease-interaction);
}

.ta-mega__tile:hover .ta-mega__tile-arrow,
.ta-mega__tile:focus-visible .ta-mega__tile-arrow {
	opacity: 1;
	transform: translateX(-4px);
}

html[dir="ltr"] .ta-mega__tile:hover .ta-mega__tile-arrow,
html[dir="ltr"] .ta-mega__tile:focus-visible .ta-mega__tile-arrow {
	transform: translateX(4px);
}

/* ================================================== Compact dropdown */
/* About/Sarah uses the same engine with a small popover instead of a panel. */

.ta-mega--compact {
	inline-size: 290px;
}

.ta-dropdown {
	margin: 0;
	padding: var(--space-2);
	list-style: none;
	border: var(--border-neutral);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
	box-shadow: var(--shadow-md);
}

.ta-dropdown__item {
	margin: 0;
}

.ta-dropdown__link {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: var(--space-3);
	border-radius: var(--radius-xs);
	color: var(--color-charcoal);
	font-size: var(--text-body);
	font-weight: var(--weight-medium);
	text-decoration: none;
	transition: background-color var(--duration-micro) var(--ease-standard);
}

.ta-dropdown__link:hover {
	background-color: rgba(221, 233, 225, 0.6);
	color: var(--color-green-900);
}

.ta-dropdown__link:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: -2px;
}

/* =========================================================== Mobile bits */

.ta-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: var(--border-neutral);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	color: var(--color-green-900);
	cursor: pointer;
	transition: border-color var(--duration-interaction) var(--ease-interaction);
}

.ta-nav-toggle:hover {
	border-color: var(--color-green-900);
}

.ta-nav-toggle:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: var(--focus-outline-offset);
	box-shadow: var(--focus-ring);
}

.ta-nav-toggle__icon {
	display: inline-flex;
}

.ta-nav-toggle__glyph--close,
.ta-nav-toggle[aria-expanded="true"] .ta-nav-toggle__glyph--open {
	display: none;
}

.ta-nav-toggle[aria-expanded="true"] .ta-nav-toggle__glyph--close {
	display: inline-flex;
}

/* ======================================================== Mobile drawer */

.ta-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background-color: rgba(23, 29, 28, 0.45);
	animation: ta-overlay-in var(--duration-standard) var(--ease-interaction);
}

@keyframes ta-overlay-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.ta-mobile-nav {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
	inline-size: min(92vw, 420px);
	max-inline-size: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--color-bg);
	box-shadow: var(--shadow-lg);
	animation: ta-drawer-in var(--duration-standard) var(--ease-interaction);
}

/* A closed drawer must be genuinely absent, not merely translated off-screen:
   otherwise its links stay in the tab order. A layout `display` would otherwise
   beat the UA `[hidden]` rule. */
.ta-mobile-nav[hidden],
.ta-nav-overlay[hidden],
.ta-acc__panel[hidden] {
	display: none;
}

@keyframes ta-drawer-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

html[dir="ltr"] .ta-mobile-nav {
	animation-name: ta-drawer-in-ltr;
}

@keyframes ta-drawer-in-ltr {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}

html.ta-nav-open {
	overflow: hidden;
}

.ta-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-5);
	padding-inline: var(--space-5);
	border-block-end: var(--border-neutral);
	background-color: var(--color-surface);
}

.ta-mobile-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: var(--border-neutral);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	color: var(--color-green-900);
	cursor: pointer;
}

.ta-mobile-nav__close:hover {
	border-color: var(--color-green-900);
}

.ta-mobile-nav__close:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: var(--focus-outline-offset);
	box-shadow: var(--focus-ring);
}

.ta-mobile-nav__body {
	flex: 1 1 auto;
	padding-block: var(--space-4);
}

.ta-mobile-nav__foot {
	padding-block: var(--space-5);
	padding-inline: var(--space-5);
	border-block-start: var(--border-neutral);
	background-color: var(--color-surface);
}

/* Mobile navigation: large top-level destinations grouped as accordions. */
.ta-nav--mobile .ta-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.ta-nav--mobile .ta-nav__item {
	display: block;
	border-block-end: var(--border-neutral);
}

.ta-nav--mobile .ta-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ta-nav--mobile .ta-nav__link {
	display: flex;
	flex: 1 1 auto;
	inline-size: 100%;
	min-block-size: 56px;
	padding-inline: var(--space-5);
	font-size: var(--text-body-lg);
	font-weight: var(--weight-medium);
}

.ta-nav--mobile .ta-nav__label::after {
	display: none;
}

.ta-acc__toggle {
	inline-size: 56px;
	block-size: 56px;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
	transition:
		color var(--duration-interaction) var(--ease-interaction),
		transform var(--duration-interaction) var(--ease-interaction);
}

.ta-acc__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
	color: var(--color-green-900);
}

.ta-acc__toggle .ta-nav__chevron {
	color: inherit;
}

.ta-acc__toggle:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: -3px;
}

.ta-acc__panel {
	padding-block: var(--space-2) var(--space-5);
	padding-inline: var(--space-5);
	border-block-start: 1px solid rgba(23, 79, 58, 0.06);
	background-color: var(--color-surface);
}

.ta-acc__label {
	margin: var(--space-4) 0 var(--space-2);
	color: var(--color-gold-action);
	font-size: 13px;
	font-weight: var(--weight-bold);
}

.ta-acc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-acc__item + .ta-acc__item {
	margin-block-start: var(--space-1);
}

.ta-acc__link {
	display: block;
	padding-block: var(--space-3);
	padding-inline: var(--space-3);
	border-radius: var(--radius-sm);
	color: var(--color-charcoal);
	text-decoration: none;
}

.ta-acc__link:hover {
	background-color: rgba(221, 233, 225, 0.6);
}

.ta-acc__link:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: -2px;
}

.ta-acc__link-label {
	display: block;
	color: var(--color-green-900);
	font-size: var(--text-body);
	font-weight: var(--weight-bold);
	line-height: var(--leading-meta);
}

.ta-acc__link-desc {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-meta);
}

/* No-JS fallback list */
.ta-nav--fallback .ta-nav__list {
	flex-direction: column;
	align-items: stretch;
	padding-block: var(--space-4);
}

/* Breakpoints: mega panels and the desktop row are desktop-only. */
@media (max-width: 1279px) {
	/* Narrow desktops stack the feature card above the tiles instead of cramping. */
	.ta-mega__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-mega__media {
		aspect-ratio: 16 / 6;
	}
}

@media (max-width: 1023px) {
	.ta-nav--desktop,
	.ta-site-header__cta,
	.ta-mega {
		display: none;
	}

	.ta-nav-toggle {
		display: inline-flex;
	}
}

@media (min-width: 1024px) {
	.ta-nav-overlay,
	.ta-mobile-nav {
		display: none;
	}
}

/* ============================================================ Breadcrumbs */

.ta-breadcrumbs {
	margin: 0;
	padding-block: var(--space-4);
}

.ta-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-meta);
}

.ta-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

.ta-breadcrumbs__link {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
	text-decoration: none;
	transition: color var(--duration-micro) var(--ease-standard);
}

.ta-breadcrumbs__link:hover {
	color: var(--color-green-900);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ta-breadcrumbs__current {
	color: var(--color-heading);
	font-weight: var(--weight-bold);
}

.ta-breadcrumbs__sep {
	color: rgba(23, 79, 58, 0.28);
	font-size: var(--text-body);
}

/* ================================================================= Notice */

.ta-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
	padding-inline: var(--container-pad);
	border-block-end: var(--border-neutral);
	background-color: var(--color-surface-alt);
	color: var(--color-charcoal);
}

.ta-notice__message {
	flex: 1 1 260px;
	margin: 0;
	font-size: var(--text-body);
}

.ta-notice--warning {
	background-color: var(--color-accent-soft);
}

.ta-notice__action {
	font-weight: var(--weight-bold);
	text-decoration: none;
}

.ta-notice__dismiss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-xs);
	background-color: transparent;
	color: inherit;
	cursor: pointer;
}

.ta-notice__dismiss:hover {
	background-color: rgba(23, 79, 58, 0.08);
}

.ta-notice__dismiss:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: var(--focus-outline-offset);
}

/* ================================================================= Footer */
/* Editorial footer: Deep Green, one large Arabic wordmark, a short gold rule,
   then a brand/info region beside one clean links region and a compact bottom
   bar separated by a fading hairline. */

.ta-site-footer {
	background-color: var(--color-surface-deep);
	color: var(--color-on-deep);
}

.ta-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
	gap: var(--space-10) var(--space-16);
	align-items: start;
	padding-block: var(--space-16) var(--space-10);
}

.ta-footer__brand-area {
	min-inline-size: 0;
}

.ta-footer__links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6) var(--space-8);
	min-inline-size: 0;
}

.ta-footer__brand .ta-brand__ar {
	color: var(--color-white);
	font-size: 36px;
}

.ta-footer__statement {
	margin-block: var(--space-4) 0;
	max-inline-size: 44ch;
	color: var(--color-on-deep-muted);
	font-size: var(--text-body-lg);
	line-height: var(--leading-body);
}

/* Decorative gold rule — short, thin, aligned to the brand block. Never text. */
.ta-footer__rule {
	margin-block: var(--space-6) 0;
	block-size: 1px;
	inline-size: 64px;
	border: 0;
	background-color: rgba(198, 161, 91, 0.7);
}

/* Kept for compatibility with any template that still wraps columns in it. */
.ta-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6) var(--space-8);
	padding-block: 0 var(--space-10);
}

.ta-footer__col {
	min-inline-size: 0;
}

.ta-footer__heading {
	margin: 0 0 var(--space-4);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-bold);
}

.ta-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-footer__item + .ta-footer__item {
	margin-block-start: var(--space-2);
}

/* Standalone action links: no paragraph underline, subtle hover, brass focus. */
.ta-footer__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 32px;
	color: var(--color-on-deep-muted);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	text-decoration: none;
	transition: color var(--duration-micro) var(--ease-standard);
}

.ta-footer__link:hover {
	color: var(--color-white);
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}

.ta-footer__link:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-gold);
	outline-offset: 2px;
}

/* Elegant divider: a hairline that fades out rather than a flat rule. */
.ta-footer__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-6);
	padding-block: var(--space-5) var(--space-6);
}

.ta-footer__bottom::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background-image: linear-gradient(
		to var(--ta-divider-direction, left),
		rgba(255, 255, 255, 0.22),
		rgba(255, 255, 255, 0.02)
	);
}

html[dir="rtl"] {
	--ta-divider-direction: left;
}

html[dir="ltr"] {
	--ta-divider-direction: right;
}

.ta-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-footer__legal-item {
	margin: 0;
}

.ta-footer__link--legal {
	font-size: var(--text-sm);
}

.ta-footer__copy {
	margin: 0;
	color: var(--color-on-deep-muted);
	font-size: var(--text-sm);
}

/* ------------------------------------------------------------ Newsletter */
/* DORMANT CAPABILITY. The block is intentionally not rendered anywhere: the
   footer no longer includes it and no handler exists. The styles stay so the
   component can be re-enabled with one get_template_part() plus the
   `ta_newsletter_enabled` filter — no redesign needed. */

.ta-newsletter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4) var(--space-8);
	max-inline-size: 860px;
	margin-block: var(--space-6) var(--space-10);
	padding-block: var(--space-5);
	padding-inline: var(--space-6);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-xl);
	background-color: rgba(255, 255, 255, 0.04);
}

.ta-newsletter__title {
	margin: 0 0 var(--space-1);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--text-body-lg);
	font-weight: var(--weight-bold);
}

.ta-newsletter__text {
	margin: 0;
	color: var(--color-on-deep-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-body);
}

.ta-newsletter__form {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-2);
}

.ta-newsletter__input {
	flex: 1 1 200px;
	min-inline-size: 0;
	min-block-size: 46px;
	border-color: rgba(255, 255, 255, 0.24);
	background-color: var(--color-surface);
}

.ta-newsletter__submit {
	flex: 0 0 auto;
	min-block-size: 46px;
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-green-900);
}

.ta-newsletter__submit:hover {
	background-color: var(--color-ivory);
	border-color: var(--color-ivory);
	color: var(--color-green-900);
}

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

@media (max-width: 1023px) {
	.ta-footer__main {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
		padding-block: var(--space-12) var(--space-8);
	}

	.ta-footer__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ta-footer__brand .ta-brand__ar {
		font-size: 32px;
	}

	.ta-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ta-footer__links,
	.ta-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
	}

	.ta-footer__main {
		padding-block: var(--space-12) var(--space-6);
	}

	.ta-newsletter {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
		padding-inline: var(--space-5);
	}

	.ta-footer__bottom {
		justify-content: flex-start;
	}
}

/* ------------------------------------------------- Footer, phones (390) */

/*
 * The mobile footer was one tall single-column list per group, which pushed the
 * legal row far below the fold. Each group's links now pair up two per line,
 * the brand block is tighter, and the bottom row wraps as a compact strip.
 * Nothing is removed.
 */
@media (max-width: 767px) {
	.ta-footer__main {
		gap: 28px;
		padding-block: 36px 24px;
	}

	.ta-footer__brand .ta-brand__ar {
		font-size: 28px;
	}

	.ta-footer__statement {
		margin-block-start: 10px;
		max-inline-size: none;
		font-size: 15px;
		line-height: 1.7;
	}

	.ta-footer__rule {
		margin-block-start: 18px;
	}

	.ta-footer__links {
		gap: 30px;
	}

	.ta-footer__heading {
		margin-block-end: 8px;
	}

	.ta-footer__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}

	.ta-footer__item + .ta-footer__item {
		margin-block-start: 0;
	}

	/* A real touch target without turning each link into a pill. */
	.ta-footer__link {
		min-block-size: 42px;
	}

	.ta-footer__bottom {
		gap: 6px 16px;
		padding-block: 18px 22px;
	}

	.ta-footer__legal-list {
		gap: 4px 18px;
	}
}

@media (max-width: 359px) {
	.ta-footer__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ================================================ Floating WhatsApp contact */

/*
 * The owner wants this on the physical bottom-right even though the site is RTL,
 * so every offset here is physical (`right`), never logical (`inset-inline-end`).
 *
 * The project's z-scale is header 100 / mega panel 150 / overlay 190 / drawer 200.
 * 90 keeps the button above page content but below the header and, crucially,
 * below the mobile drawer overlay — 999 would float over an open drawer.
 */
.ta-floating-whatsapp {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 58px;
	block-size: 58px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 50%;
	background-color: #128c7e;
	color: #fff;
	text-decoration: none;
	box-shadow:
		0 10px 24px rgba(18, 140, 126, 0.3),
		0 2px 6px rgba(23, 79, 58, 0.18);
	animation: ta-floating-whatsapp-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
	transition:
		transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 180ms ease,
		box-shadow 200ms ease;
}

.ta-floating-whatsapp:hover {
	background-color: #0e7466;
	transform: translateY(-2px);
	box-shadow:
		0 14px 30px rgba(18, 140, 126, 0.34),
		0 3px 8px rgba(23, 79, 58, 0.2);
}

.ta-floating-whatsapp:focus-visible {
	outline: 3px solid var(--color-gold-action);
	outline-offset: 3px;
}

.ta-floating-whatsapp__icon {
	display: inline-flex;
	inline-size: 27px;
	block-size: 27px;
}

.ta-floating-whatsapp__icon svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* Desktop hover/focus label; never permanently open. */
.ta-floating-whatsapp__label {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	padding: 8px 13px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-pill);
	background-color: var(--color-green-900);
	color: var(--color-white);
	font-size: 13px;
	font-weight: var(--weight-bold);
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(4px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.ta-floating-whatsapp:hover .ta-floating-whatsapp__label,
.ta-floating-whatsapp:focus-visible .ta-floating-whatsapp__label {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

@keyframes ta-floating-whatsapp-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * The footer's legal row sits at the physical right edge. Reserve enough space
 * below it that the fixed button never covers a legal link when the page is
 * scrolled to the very bottom.
 */
.ta-footer__bottom {
	padding-block-end: calc(var(--space-6) + 62px);
}

@media (max-width: 767px) {
	.ta-floating-whatsapp {
		right: calc(16px + env(safe-area-inset-right, 0px));
		bottom: calc(18px + env(safe-area-inset-bottom, 0px));
		inline-size: 54px;
		block-size: 54px;
	}

	.ta-floating-whatsapp__icon {
		inline-size: 25px;
		block-size: 25px;
	}

	.ta-floating-whatsapp__label {
		display: none;
	}

	.ta-footer__bottom {
		padding-block-end: calc(22px + 58px);
	}
}

/* Checkout hides the button, so its footer does not need the reserved strip. */
body.woocommerce-cart .ta-footer__bottom,
body.woocommerce-checkout .ta-footer__bottom,
body.woocommerce-order-received .ta-footer__bottom {
	padding-block-end: var(--space-6);
}

@media (max-width: 767px) {
	body.woocommerce-cart .ta-footer__bottom,
	body.woocommerce-checkout .ta-footer__bottom,
	body.woocommerce-order-received .ta-footer__bottom {
		padding-block-end: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ta-floating-whatsapp {
		animation: none;
		transition: none;
	}
}