/*
 * SedraPrime base — global foundation that Elementor and the core plugin share.
 * Rules:
 *  - Every selector is wrapped in :where() => ZERO specificity, so Elementor's own widget/kit CSS and
 *    any component CSS always wins. No !important (except the standard reduced-motion reset).
 *  - Logical properties only (inline/block/start/end) => correct in RTL and LTR without a second file.
 *  - Brand gold (#bcaf73) is decorative only (2.08:1 on the page background): never the only border,
 *    focus ring or state indicator. See docs/DESIGN_TOKENS_CONTRAST.md.
 *  - Breakpoints (hardcoded; CSS cannot put variables in @media): tablet <= 1024px, mobile <= 767px (Elementor defaults).
 */

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

:where(body) {
	background: var(--sp-color-bg);
	color: var(--sp-color-text);
	font-family: var(--sp-font-body);
	font-size: var(--sp-size-base);
	line-height: var(--sp-lh-body);
	font-weight: var(--sp-weight-regular);
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

/* Arabic needs more generous leading and no letter-spacing (it breaks joining). */
:where(body.sp-lang-ar) { letter-spacing: 0; line-height: 1.85; }
:where(body.sp-lang-en) { line-height: 1.7; }

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--sp-font-heading);
	color: var(--sp-color-text);
	font-weight: var(--sp-weight-bold);
	line-height: var(--sp-lh-tight);
	margin-block: 0 var(--sp-space-4);
	text-wrap: balance;
}
:where(h1) { font-size: var(--sp-size-h1); }
:where(h2) { font-size: var(--sp-size-h2); }
:where(h3) { font-size: var(--sp-size-h3); }
:where(h4) { font-size: var(--sp-size-h4); font-weight: var(--sp-weight-semibold); }
:where(h5) { font-size: var(--sp-size-h5); font-weight: var(--sp-weight-semibold); }
:where(h6) { font-size: var(--sp-size-h6); font-weight: var(--sp-weight-semibold); }

:where(p) { margin-block: 0 var(--sp-space-4); }
:where(small, .sp-caption) { font-size: var(--sp-size-xs); color: var(--sp-color-text-muted); }

/* Numbers: lining + tabular so prices and reference IDs align; digits left LTR inside RTL text. */
:where(.sp-num, [data-sp-num]) { font-variant-numeric: lining-nums tabular-nums; unicode-bidi: isolate; direction: ltr; display: inline-block; }

/* Links: bronze-700 passes 4.5:1 on both page and card backgrounds. */
:where(a) { color: var(--sp-color-bronze-700); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color var(--sp-motion-fast) var(--sp-motion-ease); }
:where(a:hover) { color: var(--sp-color-brand-bronze); }

/* Focus: visible, 3:1+, never colour-only reliance on gold. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sp-color-focus);
	outline-offset: 2px;
	border-radius: var(--sp-radius-sm);
}

:where(img, video, svg) { max-inline-size: 100%; block-size: auto; }
:where(img) { border-style: none; }
:where(hr) { border: 0; border-block-start: 1px solid var(--sp-color-border); margin-block: var(--sp-space-6); }
:where(::selection) { background: var(--sp-color-brand-gold); color: var(--sp-color-text); }

/* ---------- Buttons: native + Elementor + plugin share one look ---------- */
:where(.elementor-button, .button, button[type="submit"], input[type="submit"], input[type="button"], .wp-element-button) {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-space-2);
	min-block-size: var(--sp-control-touch-min);
	padding-block: .7rem; padding-inline: 1.6rem;
	font-family: var(--sp-font-heading); font-weight: var(--sp-weight-semibold); font-size: 1rem; line-height: 1.2;
	color: var(--sp-color-surface); background: var(--sp-color-brand-bronze);
	border: 1px solid var(--sp-color-brand-bronze); border-radius: var(--sp-radius-md);
	cursor: pointer; text-decoration: none;
	transition: background-color var(--sp-motion-base) var(--sp-motion-ease), border-color var(--sp-motion-base) var(--sp-motion-ease), box-shadow var(--sp-motion-base) var(--sp-motion-ease);
}
:where(.elementor-button, .button, button[type="submit"], input[type="submit"], .wp-element-button):hover { background: var(--sp-color-bronze-700); border-color: var(--sp-color-bronze-700); color: var(--sp-color-surface); box-shadow: var(--sp-shadow-sm); }
:where(.elementor-button, .button, button[type="submit"], input[type="submit"], .wp-element-button):active { transform: translateY(1px); }
:where(.elementor-button, .button, button, input[type="submit"], .wp-element-button):disabled,
:where([aria-disabled="true"]) { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---------- Forms (native controls; MetForm/Elementor fields inherit via the same tokens) ---------- */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select, textarea, .elementor-field-textual) {
	inline-size: 100%;
	min-block-size: var(--sp-control-height);
	padding-block: .55rem; padding-inline: 1rem;
	font: inherit; font-size: 1rem; color: var(--sp-color-text);
	background: var(--sp-color-surface);
	border: 1px solid var(--sp-color-border-strong); border-radius: var(--sp-radius-md);
	transition: border-color var(--sp-motion-fast) var(--sp-motion-ease), box-shadow var(--sp-motion-fast) var(--sp-motion-ease);
}
:where(textarea) { min-block-size: 8rem; resize: vertical; }
:where(select) { appearance: none; padding-inline-end: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--sp-color-text-muted) 50%), linear-gradient(135deg, var(--sp-color-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 55%, calc(100% - .9rem) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
:where(.sp-dir-rtl select) { background-position: 1.25rem 55%, .9rem 55%; }
:where(input, select, textarea)::placeholder { color: var(--sp-color-text-muted); opacity: 1; }
:where(input, select, textarea):hover { border-color: var(--sp-color-text-muted); }
:where(input, select, textarea):focus { outline: 3px solid var(--sp-color-focus); outline-offset: 1px; border-color: var(--sp-color-focus); }
:where(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]) { border-color: var(--sp-color-error); }
:where(label) { display: inline-block; margin-block-end: var(--sp-space-1); font-weight: var(--sp-weight-semibold); font-size: var(--sp-size-sm); color: var(--sp-color-text); }
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--sp-color-brand-bronze); inline-size: 1.15rem; block-size: 1.15rem; margin-inline-end: var(--sp-space-2); vertical-align: middle; }

/* ---------- Layout helpers shared with the plugin ---------- */
:where(.sp-container) { inline-size: 100%; max-inline-size: var(--sp-container); margin-inline: auto; padding-inline: var(--sp-gutter); }
:where(.sp-container--wide) { max-inline-size: var(--sp-container-wide); }
:where(.sp-section) { padding-block: var(--sp-section-y); }
:where(.sp-visually-hidden) { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:where(.sp-skip-link) { position: absolute; inset-inline-start: var(--sp-space-3); inset-block-start: -4rem; z-index: 1000; padding: var(--sp-space-2) var(--sp-space-4); background: var(--sp-color-surface); color: var(--sp-color-text); border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-md); }
:where(.sp-skip-link:focus) { inset-block-start: var(--sp-space-3); }

/* Directional icons flip in RTL */
:where(.sp-dir-rtl .sp-flip) { transform: scaleX(-1); }

/* Elementor boxed containers: keep inside the shared width token. */
:where(.e-con > .e-con-inner) { max-inline-size: var(--sp-container); }

/* ---------- Theme fallback header/footer/navigation ---------- */
:where(.sp-theme-header) {
	position: sticky;
	inset-block-start: 0;
	z-index: 90;
	background: color-mix(in srgb, var(--sp-color-surface) 92%, transparent);
	backdrop-filter: saturate(120%) blur(8px);
	border-block-end: 1px solid var(--sp-color-border);
}
:where(.sp-theme-header__bar) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sp-space-4);
	min-block-size: 4.75rem;
}
:where(.sp-theme-header__identity .custom-logo-link) { display: inline-flex; max-inline-size: min(220px, 100%); }
:where(.sp-site-title) {
	font-family: var(--sp-font-heading);
	font-size: var(--sp-size-h5);
	font-weight: var(--sp-weight-bold);
	text-decoration: none;
	color: var(--sp-color-text);
}
:where(.sp-theme-header__actions) { display: inline-flex; align-items: center; gap: var(--sp-space-3); }
:where(.sp-theme-header__contact) { margin: 0; color: var(--sp-color-text-muted); font-size: var(--sp-size-sm); }
:where(.sp-theme-header__cta) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--sp-control-touch-min);
	padding-inline: 1.1rem;
	border-radius: var(--sp-radius-md);
	background: var(--sp-color-brand-bronze);
	color: var(--sp-color-surface);
	text-decoration: none;
	font-family: var(--sp-font-heading);
	font-weight: var(--sp-weight-semibold);
}
:where(.sp-theme-header__toggle) {
	display: none;
	border: 1px solid var(--sp-color-border-strong);
	background: var(--sp-color-surface);
	color: var(--sp-color-text);
	border-radius: var(--sp-radius-md);
	inline-size: var(--sp-control-touch-min);
	block-size: var(--sp-control-touch-min);
}
:where(.sp-theme-nav) { border-block-start: 1px solid var(--sp-color-border); }
:where(.sp-theme-nav__menu) {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-space-4);
	margin: 0;
	padding: .85rem 0;
}
:where(.sp-theme-nav__menu a) {
	text-decoration: none;
	font-weight: var(--sp-weight-semibold);
	color: var(--sp-color-text);
}

:where(.sp-theme-footer) {
	margin-block-start: var(--sp-space-8);
	background: var(--sp-color-dark);
	color: var(--sp-color-on-dark);
}
:where(.sp-theme-footer a) { color: var(--sp-color-brand-gold-2); }
:where(.sp-theme-footer__grid) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-space-6);
	padding-block: var(--sp-space-7);
}
:where(.sp-theme-footer__section h2, .sp-theme-footer__certificates h2) {
	color: var(--sp-color-on-dark);
	font-size: var(--sp-size-h5);
	margin-block-end: var(--sp-space-3);
}
:where(.sp-theme-footer__section p) { margin: 0; color: color-mix(in srgb, var(--sp-color-on-dark) 86%, transparent); }
:where(.sp-theme-footer__menu) { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-space-2); }
:where(.sp-theme-footer__certificates) { padding-block-end: var(--sp-space-6); }
:where(.sp-theme-footer__certificate-list) {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-3);
	margin: 0;
	padding: 0;
}
:where(.sp-theme-footer__certificate-list li) {
	padding: .45rem .8rem;
	border-radius: var(--sp-radius-pill);
	border: 1px solid color-mix(in srgb, var(--sp-color-brand-gold) 45%, transparent);
	background: color-mix(in srgb, var(--sp-color-on-dark) 4%, transparent);
}
:where(.sp-theme-footer__bottom) {
	border-block-start: 1px solid color-mix(in srgb, var(--sp-color-on-dark) 18%, transparent);
	padding-block: var(--sp-space-4);
}
:where(.sp-theme-footer__bottom p) { margin: 0; font-size: var(--sp-size-sm); color: color-mix(in srgb, var(--sp-color-on-dark) 80%, transparent); }

/* ---------- Fallback template primitives ---------- */
:where(.sp-breadcrumbs) {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	align-items: center;
	font-size: var(--sp-size-sm);
	color: var(--sp-color-text-muted);
	margin-block-end: var(--sp-space-5);
}
:where(.sp-breadcrumbs a) { color: var(--sp-color-text-muted); text-decoration: none; }
:where(.sp-archive-header) { margin-block-end: var(--sp-space-5); }
:where(.sp-archive-header p) { margin: 0; color: var(--sp-color-text-muted); }
:where(.sp-archive-searchbar) { margin-block-end: var(--sp-space-6); }

:where(.sp-page-title) { margin-block-end: var(--sp-space-5); }
:where(.sp-prose p) { margin-block-end: var(--sp-space-4); }

@media (max-width: 1024px) { :where(html) { scroll-padding-block-start: 4rem; } }
@media (max-width: 767px)  {
	:where(.sp-theme-header__contact, .sp-theme-header__cta) { display: none; }
	:where(.sp-theme-header__toggle) { display: inline-flex; align-items: center; justify-content: center; }
	:where(.sp-theme-nav) { display: none; }
	:where(.sp-theme-nav[data-open="1"]) { display: block; }
	:where(.sp-theme-nav__menu) { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--sp-space-2); }
	:where(.sp-theme-nav__menu > li > a) { display: block; padding: .8rem 0; border-block-end: 1px solid var(--sp-color-border); }
	:where(.sp-theme-footer__grid) { grid-template-columns: 1fr; gap: var(--sp-space-5); }
	:where(body) { font-size: 1rem; }
	:where(.sp-section) { padding-block: var(--sp-space-7); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}