/*
 * EW Site — brand tokens and RTL-safe components.
 *
 * Rules for this file (so the Arabic/RTL version needs no rebuild):
 *  - logical properties only: margin-inline-*, padding-inline-*, inset-inline-*,
 *    border-inline-*, text-align: start|end — never left/right;
 *  - spacing between items with gap, not side margins;
 *  - directional icons flip under [dir="rtl"].
 * Colours come from the brand PDF (navy #093054, gold #BE9130). Gold is never used
 * for text on white (2.9:1); white on navy and navy on gold both pass WCAG AA.
 */

/*
 * Spacing: one rhythm on every page, both languages (values per desktop / tablet ≤1024 / mobile ≤767).
 * Elementor pages keep theirs in Elementor's own padding settings, editable in the editor:
 * gutters 32/28/20, sections 112/88/64, hero 136/112/80, navy bands 96/80/56.
 * The variables below drive what Elementor does not draw: Tutor's pages and the theme page template.
 */
:root {
	--ew-content: 1140px; /* the kit's boxed container width */
	--ew-gutter: 32px; /* side padding of every page area */
	--ew-page-y: 88px; /* header → content and content → footer */
	--ew-stack: 40px; /* page title → content */
	--ew-card-pad: 32px;
	--ew-app-y: 40px; /* inside Tutor's dashboard / learning area */
	--ew-app-x: 32px;
}
@media (max-width: 1024px) {
	:root {
		--ew-gutter: 28px;
		--ew-page-y: 72px;
		--ew-stack: 32px;
		--ew-card-pad: 28px;
		--ew-app-y: 32px;
		--ew-app-x: 24px;
	}
}
@media (max-width: 767px) {
	:root {
		--ew-gutter: 20px;
		--ew-page-y: 48px;
		--ew-stack: 24px;
		--ew-card-pad: 22px;
		--ew-app-y: 24px;
		--ew-app-x: 16px;
	}
}

:root {
	--ew-navy: #093054;
	--ew-navy-2: #1f3755;
	--ew-gold: #be9130;
	--ew-panel: #eff4f8;
	--ew-border: #cdd6de;
	--ew-steel: #26698c;
	--ew-steel-2: #5084a0;
	--ew-amber: #f9c14f;
	--ew-red: #d62b37;
	--ew-orange: #eb601d;
	--ew-text: #1a2533;
	--ew-white: #ffffff;
	--ew-radius: 14px;
	--ew-shadow: 0 6px 20px rgba(9, 48, 84, 0.08);
	--ew-font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* ---------- headings with the brand's short gold rule (inline-start side) ---------- */
.ew-rule {
	position: relative;
	padding-block-end: 0.6em;
}
.ew-rule::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 3.5rem;
	block-size: 3px;
	border-radius: 2px;
	background: var(--ew-gold);
}
.ew-rule--center {
	text-align: center;
}
.ew-rule--center::after {
	inset-inline: 0;
	margin-inline: auto;
}

/* ---------- cards ---------- */
.ew-card {
	background: var(--ew-panel);
	border: 1px solid var(--ew-border);
	border-radius: var(--ew-radius);
	box-shadow: var(--ew-shadow);
	padding: var(--ew-card-pad);
}
/* Elementor containers draw their padding from these variables; the card's own editor setting still wins. */
.e-con.ew-card {
	--padding-top: var(--ew-card-pad);
	--padding-bottom: var(--ew-card-pad);
	--padding-left: var(--ew-card-pad);
	--padding-right: var(--ew-card-pad);
}

/* ---------- buttons ---------- */
.ew-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding-block: 0.75em;
	padding-inline: 1.5em;
	border-radius: 999px;
	font-family: var(--ew-font);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.ew-btn--primary {
	background: var(--ew-navy);
	color: var(--ew-white);
}
.ew-btn--primary:hover,
.ew-btn--primary:focus-visible {
	background: var(--ew-navy-2);
	color: var(--ew-white);
}
.ew-btn--gold {
	background: var(--ew-gold);
	color: var(--ew-navy);
}
.ew-btn--gold:hover,
.ew-btn--gold:focus-visible {
	background: #d0a23f;
	color: var(--ew-navy);
}
[dir="rtl"] .ew-flip {
	transform: scaleX(-1);
}

/* Tutor's custom select shows its current value with text-align: left; follow the page direction. */
[dir="rtl"] .tutor-form-select-label {
	text-align: right;
}

/* ---------- registration / profile fields added to Tutor forms ---------- */
.ew-field select.tutor-form-select {
	inline-size: 100%;
}

/* ---------- lesson content migrated from LearnWorlds ebooks ---------- */
.ew-lesson figure.ew-figure {
	margin-block: 1.5rem;
	margin-inline: 0;
}
.ew-lesson figure.ew-figure img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--ew-radius);
}
.ew-lesson blockquote {
	margin-inline: 0;
	padding-inline-start: 1rem;
	border-inline-start: 4px solid var(--ew-gold);
	background: var(--ew-panel);
	padding-block: 0.75rem;
}
.ew-lesson .ew-pdf {
	inline-size: 100%;
	block-size: 80vh;
	border: 1px solid var(--ew-border);
	border-radius: var(--ew-radius);
}
.ew-lesson .ew-empty-note {
	padding: 1rem;
	border-inline-start: 4px solid var(--ew-steel);
	background: var(--ew-panel);
	border-radius: 8px;
}

/* ---------- "My Development Report" panel (dashboard + [ew_development_report]) ---------- */
.ew-report {
	display: grid;
	gap: 1.5rem;
	font-family: var(--ew-font);
	color: var(--ew-text);
}
.ew-report h3 {
	color: var(--ew-navy);
	margin-block: 0 0.75rem;
}
.ew-report__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
}
.ew-report__score {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	padding-block: 0.75rem;
	padding-inline: 1.25rem;
	border-radius: 12px;
	background: var(--ew-amber);
	color: var(--ew-text);
}
.ew-report__score-value {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
}
.ew-report__score-max {
	font-weight: 700;
}
.ew-report__meta {
	flex: 1 1 14rem;
}
.ew-report__eyebrow,
.ew-report__date {
	margin: 0;
	color: var(--ew-navy-2);
	font-size: 0.9rem;
}
.ew-report__actions {
	flex: 0 1 auto;
}
.ew-report__pending {
	display: block;
	max-inline-size: 22rem;
	color: var(--ew-navy-2);
}
.ew-report__summary {
	margin: 0;
	line-height: 1.8;
}
.ew-level {
	display: inline-block;
	margin-block: 0.35rem;
	padding-block: 0.3em;
	padding-inline: 1em;
	border-radius: 999px;
	color: var(--ew-white);
	font-weight: 700;
	background: var(--ew-navy);
}
.ew-level--needs_development {
	background: var(--ew-red);
}
.ew-level--average {
	background: #b3470f; /* darker orange: white text passes AA */
}
.ew-axes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}
.ew-axes__row {
	display: grid;
	grid-template-columns: minmax(10rem, 16rem) 1fr 2.5rem;
	align-items: center;
	gap: 0.75rem;
}
.ew-axes__bar {
	display: block;
	block-size: 0.7rem;
	border-radius: 999px;
	background: var(--ew-panel);
	border: 1px solid var(--ew-border);
	overflow: hidden;
}
.ew-axes__bar > span {
	display: block;
	block-size: 100%;
	background: var(--ew-navy);
}
.ew-axes__value {
	font-weight: 700;
	text-align: end;
}
.ew-report__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.25rem;
}
.ew-report__cols ul {
	margin: 0;
	padding-inline-start: 1.2rem;
	display: grid;
	gap: 0.5rem;
}
.ew-table-wrap {
	overflow-x: auto;
}
.ew-table {
	inline-size: 100%;
	border-collapse: collapse;
}
.ew-table th {
	background: var(--ew-navy);
	color: var(--ew-white);
	text-align: start;
	padding-block: 0.6rem;
	padding-inline: 0.75rem;
}
.ew-table td {
	border-block-end: 1px solid var(--ew-border);
	padding-block: 0.6rem;
	padding-inline: 0.75rem;
	vertical-align: top;
}
.ew-table tbody tr:nth-child(even) td {
	background: var(--ew-panel);
}
.ew-path {
	border-block-start: 4px solid var(--ew-gold);
}
.ew-path__list {
	margin-block: 0 1rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}
.ew-path__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
}
.ew-path__num {
	min-inline-size: 5.5rem;
	color: var(--ew-navy-2);
	font-weight: 700;
}
.ew-path__list a {
	color: var(--ew-steel);
	font-weight: 700;
}
.ew-path__why {
	color: #5b6b7c;
	font-size: 0.9rem;
}
.ew-report__retake {
	margin: 0;
}
@media (max-width: 600px) {
	.ew-axes__row {
		grid-template-columns: 1fr 2.5rem;
	}
	.ew-axes__bar {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* ---------- site header / footer (Theme Builder templates) ---------- */
.ew-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem 1rem;
	font-family: var(--ew-font);
}
.ew-account__link {
	color: var(--ew-navy);
	font-weight: 700;
	text-decoration: none;
}
.ew-account__link:hover,
.ew-account__link:focus-visible {
	color: var(--ew-steel);
}
.ew-account .ew-account__cta {
	padding-block: 0.55em;
	padding-inline: 1.25em;
}
.ew-site-header {
	border-block-end: 3px solid var(--ew-gold);
}
.ew-logo-badge {
	display: inline-block;
	background: var(--ew-white);
	border-radius: 12px;
	padding: 0.6rem 0.9rem;
}
.ew-site-footer a {
	color: var(--ew-white);
	text-decoration: none;
}
.ew-site-footer a:hover,
.ew-site-footer a:focus-visible {
	color: #e6c77e;
}

/* Mobile top bar (header templates, shown ≤767px): Call / Email icon buttons, language, account. */
.ew-topbar {
	font-family: var(--ew-font);
}
.ew-topbar .ew-topbar__contact {
	flex-shrink: 0; /* keep both icon buttons on the line */
}
.ew-topbar > .e-con {
	--width: auto; /* nested containers default to 100% of the bar */
	flex: 0 1 auto;
	min-inline-size: 0;
}
.ew-topbar .ew-topbar__contact .elementor-icon-list-items {
	flex-wrap: nowrap;
	gap: 8px;
}
.ew-topbar .ew-topbar__contact .elementor-icon-list-item {
	margin: 0 !important; /* Elementor's inline-item spacing; the gap above replaces it */
	padding: 0 !important;
}
.ew-topbar .ew-topbar__contact .elementor-icon-list-item::after {
	display: none; /* inline-list divider */
}
.ew-topbar .ew-topbar__contact .elementor-icon-list-item > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
}
.ew-topbar .ew-topbar__contact .elementor-icon-list-icon {
	padding: 0 !important; /* Elementor's text indent */
	margin: 0;
}
.ew-topbar .ew-topbar__contact .elementor-icon-list-text {
	/* visible to screen readers only: the icon is the button */
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.ew-topbar .ew-account {
	flex-wrap: nowrap;
	gap: 0.75rem;
	font-size: 13px;
}
.ew-topbar .ew-account__link {
	color: var(--ew-white);
	white-space: nowrap;
}
.ew-topbar .ew-account__link:hover,
.ew-topbar .ew-account__link:focus-visible {
	color: #e6c77e;
}
.ew-topbar .ew-account .ew-account__cta {
	padding-block: 0.45em;
	padding-inline: 1em;
	font-size: 13px;
	white-space: nowrap;
}

@media (max-width: 400px) {
	/* small phones (360px): Arabic "تسجيل الدخول" + "إنشاء حساب" must still fit on one line */
	.ew-topbar .ew-account {
		gap: 0.5rem;
		font-size: 12px;
	}
	.ew-topbar .ew-account .ew-account__cta {
		padding-inline: 0.75em;
		font-size: 12px;
	}
	.ew-topbar .ew-topbar__contact .elementor-icon-list-item > a {
		inline-size: 30px;
		block-size: 30px;
	}
	.ew-topbar .elementor-widget-polylang-language-switcher a {
		font-size: 12px !important; /* widget setting is 13px */
	}
}

/* ---------- footer (multi-column) ---------- */
.ew-site-footer .ew-footer-heading .elementor-heading-title {
	position: relative;
	padding-block-end: 0.6em;
}
.ew-site-footer .ew-footer-heading .elementor-heading-title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 2.25rem;
	block-size: 2px;
	border-radius: 2px;
	background: var(--ew-gold);
}
.ew-site-footer .elementor-icon-list-item > a {
	transition: color 0.2s ease;
}
.ew-site-footer .ew-footer-contact .elementor-icon-list-text {
	direction: ltr; /* email and phone read left to right in Arabic too */
	unicode-bidi: isolate;
}
.ew-site-footer .elementor-widget-text-editor p {
	margin: 0;
}
@media (max-width: 767px) {
	.ew-site-footer .ew-footer-copy,
	.ew-site-footer .ew-footer-copy + .elementor-widget-text-editor {
		text-align: center;
	}
}

/* ---------- Tutor LMS: brand font (colours come from Tutor's brand_color = navy) ---------- */
body {
	--tutor-font-family-heading: var(--ew-font);
	--tutor-font-family-body: var(--ew-font);
	/* Tutor generates bright blues around the navy brand colour; replace the scale with a navy ramp. */
	--tutor-brand-100: #eef3f8;
	--tutor-brand-200: #dbe5ef;
	--tutor-brand-300: #c2d2e2;
	--tutor-brand-400: #8fa9c4;
	--tutor-brand-450: #7593b3;
	--tutor-brand-500: #3e6a93;
	--tutor-brand-600: #093054;
	--tutor-brand-700: #1f3755;
	--tutor-brand-800: #0a243d;
	--tutor-brand-900: #081d31;
	--tutor-brand-950: #061626;
	--tutor-color-primary-hover: #1f3755;
	--tutor-color-primary-hover-rgb: 31, 55, 84;
}

/* ---------- page components used by the Elementor pages ---------- */
.ew-card--white {
	background: var(--ew-white);
}
.ew-tag .elementor-heading-title {
	display: inline-block;
	border: 1.5px solid var(--ew-gold);
	border-radius: 999px;
	padding-block: 0.45em;
	padding-inline: 1.3em;
}
.ew-card .elementor-icon-box-title {
	margin-block-end: 0.4em;
}

/* ---------- legal pages (LearnWorlds templates) ---------- */
.ew-legal {
	max-inline-size: 860px;
	margin-inline: auto;
	line-height: 1.8;
	color: var(--ew-text);
	font-family: var(--ew-font);
}
.ew-legal h3 {
	color: var(--ew-navy);
	margin-block: 1.6em 0.6em;
}
.ew-legal a {
	color: var(--ew-steel);
}
.page .entry-title {
	color: var(--ew-navy);
	font-family: var(--ew-font);
}

/* ---------- page spacing outside Elementor ---------- */
/* Theme page template (registration, cart, checkout, privacy): title + content under the header.
   Hello's own rule is body:not([class*="elementor-page-"]) .site-main (it narrows the column to 500–800px). */
body:not([class*="elementor-page-"]) main.site-main {
	max-inline-size: calc(var(--ew-content) + 2 * var(--ew-gutter));
	margin-inline: auto;
	padding-block: var(--ew-page-y);
	padding-inline: var(--ew-gutter);
}
main.site-main .page-header .entry-title {
	position: relative;
	max-inline-size: none;
	margin-block: 0 var(--ew-stack);
	padding-inline: 0;
	padding-block-end: 0.6em;
}
main.site-main .page-header .entry-title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 3.5rem;
	block-size: 3px;
	border-radius: 2px;
	background: var(--ew-gold);
}
/* Registration: the form card is centred, so is its title; the card's inline margins give way to the rhythm. */
main.site-main:has(#tutor-registration-wrap) .page-header .entry-title {
	text-align: center;
}
main.site-main:has(#tutor-registration-wrap) .page-header .entry-title::after {
	inset-inline: 0;
	margin-inline: auto;
}
#tutor-registration-wrap {
	margin-block: 0 !important; /* overrides Tutor's inline margin */
}
/* Cart and checkout already sit inside the padded page: drop Tutor's own outer padding. */
main.site-main .tutor-cart-page,
main.site-main .tutor-checkout-page {
	padding-block: 0;
}
main.site-main .tutor-container {
	max-inline-size: none;
	padding-inline: 0;
}

/* Tutor pages drawn straight under the header: course list, course page. */
.tutor-wrap-parent {
	padding-block: var(--ew-page-y);
}
/* Certificate verification: a centred 480px card with its own 80px margin; use the page rhythm instead. */
body .tutor-certificate-verification {
	margin-block: var(--ew-page-y);
	padding-inline: var(--ew-gutter);
}
.tutor-container.tutor-wrap-parent,
.tutor-wrap-parent .tutor-container {
	max-inline-size: calc(var(--ew-content) + 2 * var(--ew-gutter));
	padding-inline: var(--ew-gutter);
}
/* Signed-out dashboard / lesson / quiz: Tutor's login card (inline margin 70px auto). */
.tutor-page-wrap:has(> .tutor-login-wrap) {
	padding-inline: var(--ew-gutter);
}
.tutor-page-wrap > .tutor-login-wrap {
	margin-block: var(--ew-page-y) !important; /* overrides Tutor's inline margin */
}

/* Signed-in app screens: the dashboard is Tutor's own full-screen app (no site header/footer), the learning
   area is pinned under the header with a sidebar sized to the screen. No outer gap; a roomier content area. */
body .tutor-dashboard-layout .tutor-dashboard-page {
	padding-block-start: var(--ew-app-y);
	padding-inline: var(--ew-app-x);
}
@media (min-width: 577px) {
	/* below 577px Tutor keeps 88px at the bottom for its fixed mobile navigation bar */
	body .tutor-dashboard-layout .tutor-dashboard-page {
		padding-block-end: var(--ew-app-y);
	}
}
body .tutor-learning-area.tutor-has-site-shell .tutor-learning-area-content {
	padding-block: var(--ew-app-y);
	padding-inline: var(--ew-app-x);
}

/* Learning paths (EW_Program): notice shown instead of a lesson or quiz the trainee's administrator has not opened yet. */
.ew-path-locked {
	max-width: 640px;
	margin: 48px auto;
	padding: 32px 28px;
	border: 1px solid #d6dde6;
	border-radius: 12px;
	background: #f7f9fb;
	text-align: center;
	color: #1d2733;
}
.ew-path-locked-icon {
	display: block;
	font-size: 34px;
	line-height: 1;
	margin-bottom: 12px;
}
.ew-path-locked-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: #093054;
}
.ew-path-locked p {
	margin: 0;
	line-height: 1.7;
}
@media (max-width: 600px) {
	.ew-path-locked { margin: 24px 16px; padding: 24px 18px; }
}