/*
 * Al Duffa design × Elementor.
 *
 * The design's layout relies on its sections being direct children of
 * #site-shell (a sticky header that stays for the whole page, a search bar that
 * overlaps the hero with a negative margin, full-width sections). Elementor
 * wraps every widget in a few <div>s; on the live site those wrappers are made
 * "transparent" so they add no box at all.
 */
body:not(.elementor-editor-active) .elementor,
body:not(.elementor-editor-active) .e-con,
body:not(.elementor-editor-active) .e-con-inner,
body:not(.elementor-editor-active) .elementor-widget,
body:not(.elementor-editor-active) .elementor-widget-container {
	display: contents;
}

/*
 * The one exception: a widget meant to be freely composed with Elementor's own
 * layout tools (currently just "Al Duffa · CTA tile(s)" — placed next to
 * another widget in a Container to make two or more columns) needs that
 * container to keep behaving like a normal container — flattening it away
 * like the fixed page sections above would stack its columns full-width
 * instead of side by side. Any container that holds one, anywhere inside it,
 * and everything inside that same container, gets its box back.
 *
 * Elementor's own per-element width/spacing CSS (its Style/Layout panel) is
 * also purged on this page (below), so it can't be used to size the columns —
 * these rules split them evenly instead, wrapping on narrow screens. If a
 * second free-layout widget is ever added, extend the :has() selector list.
 */
body:not(.elementor-editor-active) .e-con:has(.elementor-widget-alduffa_cta_tile),
body:not(.elementor-editor-active) .e-con-inner:has(.elementor-widget-alduffa_cta_tile) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}
/* The outer row itself (not its per-widget inner wrappers — those stay full
   width of their flex slot) gets the same side margins as every other
   section: without this it stretches edge to edge of the browser, flush
   left with no gutter and its widgets' own padding pushing past the right
   edge, while every fixed section around it sits inside .wrap (max 1240px,
   centered, 28px gutter). It also needs its own top/bottom margin to match —
   the row is a plain <div>, not a <section>, so it never got the
   `section{padding-block}` every fixed section uses for the gap between
   them, and the "Events + newsletter" widget's own <section> loses its own
   copy of that padding right below (so it top-aligns with the CTA tile) —
   leaving the row flush against whatever sits above and below it with zero
   gap otherwise. Matched only on the row whose direct children are
   themselves containers (the per-widget wrappers), never on those wrappers. */
body:not(.elementor-editor-active) .e-con:has(.elementor-widget-alduffa_cta_tile):has(> .elementor-element.e-con, > .elementor-element.e-con-inner),
body:not(.elementor-editor-active) .e-con-inner:has(.elementor-widget-alduffa_cta_tile):has(> .elementor-element.e-con, > .elementor-element.e-con-inner) {
	width: min(1240px, 100%);
	margin-block: 96px;
	margin-inline: auto;
	padding-inline: 28px;
}
@media (max-width: 820px) {
	body:not(.elementor-editor-active) .e-con:has(.elementor-widget-alduffa_cta_tile):has(> .elementor-element.e-con, > .elementor-element.e-con-inner),
	body:not(.elementor-editor-active) .e-con-inner:has(.elementor-widget-alduffa_cta_tile):has(> .elementor-element.e-con, > .elementor-element.e-con-inner) {
		margin-block: 72px;
	}
}
body:not(.elementor-editor-active) .e-con:has(.elementor-widget-alduffa_cta_tile) .e-con,
body:not(.elementor-editor-active) .e-con:has(.elementor-widget-alduffa_cta_tile) .e-con-inner,
body:not(.elementor-editor-active) .e-con:has(.elementor-widget-alduffa_cta_tile) .elementor-element,
body:not(.elementor-editor-active) .e-con:has(.elementor-widget-alduffa_cta_tile) .elementor-widget,
body:not(.elementor-editor-active) .e-con:has(.elementor-widget-alduffa_cta_tile) .elementor-widget-container,
body:not(.elementor-editor-active) .e-con-inner:has(.elementor-widget-alduffa_cta_tile) .e-con,
body:not(.elementor-editor-active) .e-con-inner:has(.elementor-widget-alduffa_cta_tile) .e-con-inner,
body:not(.elementor-editor-active) .e-con-inner:has(.elementor-widget-alduffa_cta_tile) .elementor-element,
body:not(.elementor-editor-active) .e-con-inner:has(.elementor-widget-alduffa_cta_tile) .elementor-widget,
body:not(.elementor-editor-active) .e-con-inner:has(.elementor-widget-alduffa_cta_tile) .elementor-widget-container {
	display: block;
}
/* direct children of such a row share it evenly (the row's own gap gives the
   spacing between them, so no extra column padding is added). */
body:not(.elementor-editor-active) .e-con:has(.elementor-widget-alduffa_cta_tile) > .elementor-element,
body:not(.elementor-editor-active) .e-con-inner:has(.elementor-widget-alduffa_cta_tile) > .elementor-element {
	flex: 1 1 280px;
	min-width: 0;
}
/* a full section widget (e.g. "Al Duffa · Events + newsletter") loses its own
   top/bottom section padding when it ends up sharing a row with a CTA tile
   like this, so its card top-aligns with the tile beside it instead of
   sitting lower. */
body:not(.elementor-editor-active) .e-con:has(.elementor-widget-alduffa_cta_tile) section,
body:not(.elementor-editor-active) .e-con-inner:has(.elementor-widget-alduffa_cta_tile) section {
	padding-block: 0;
}

/* Inside the editor the wrappers keep their boxes (Elementor draws its
   selection outlines on them) but must add no spacing. */
.elementor-editor-active .elementor-widget:not(:last-child) {
	margin-block-end: 0 !important;
}
.elementor-editor-active .e-con {
	padding: 0 !important;
	gap: 0 !important;
	--gap: 0px;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}
/* The Arabic companion fields in the widget panels. */
.alduffa-ar-control input,
.alduffa-ar-control textarea {
	direction: rtl;
	text-align: right;
}

/* A logo picked in Appearance → Customize keeps its proportions (the design's
   own logo mark is a 44px square). */
.brand img.brand-mark {
	width: auto;
	max-width: 200px;
	height: 46px;
	object-fit: contain;
}

/* ---- Layout adjustments requested for this site ---- */

/* The program search bar sits below the slider as its own block (the original
   design pulled it up over the bottom of the hero with a negative margin). */
.finder-bar {
	margin-top: 44px;
}
@media (max-width: 820px) {
	.finder-bar {
		margin-top: 30px;
	}
}

/* ---- Programs from WordPress ---- */

/* Finder with a keyword field, a program menu and the button (no Level / Mode menus). */
.finder-bar--2 form {
	grid-template-columns: 2fr 1.3fr auto;
}
@media (max-width: 820px) {
	.finder-bar--2 form {
		grid-template-columns: 1fr;
	}
	.finder-bar--2 button {
		grid-column: auto;
		padding: 14px;
	}
	.finder-bar--2 label:nth-child(1) {
		grid-column: auto;
	}
}

/* Program cards have no level / mode strip on top. */
.prog > h3:first-child {
	padding-top: 26px;
}

/* The disclaimer under the programs. */
.prog-note {
	margin-top: 30px;
	max-width: 72ch;
	padding-inline-start: 14px;
	border-inline-start: 3px solid var(--gold);
	color: var(--muted);
	font-size: .88rem;
	line-height: 1.65;
}