/* ==========================================================================
   CK Article Styler — on-brand long-read typography
   Only styles content inside .ckart (the article body). Uses logical
   properties, so it works for English (LTR) and Arabic (RTL) articles.
   Skip zones: .no-ckart, the WhatsApp CTA (.ckwa-cta) and the TOC.
   ========================================================================== */

.ckart {
	--ckart-c1: #0B3558;
	--ckart-c2: #16C6D1;
	--ckart-mid: #206892;
	--ckart-mid: color-mix(in srgb, var(--ckart-c1) 58%, var(--ckart-c2));
	--ckart-c2-soft: rgba(22, 198, 209, .26);
	--ckart-c2-soft: color-mix(in srgb, var(--ckart-c2) 28%, transparent);
	--ckart-c2-tint: #EAF8FA;
	--ckart-c2-tint: color-mix(in srgb, var(--ckart-c2) 9%, #fff);
	--ckart-text: #1E2B3A;
	--ckart-muted: #5B6B7C;
	--ckart-line: #E3EBF1;
	--ckart-head: var(--ck-font-heading, "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif);
	--ckart-ease: cubic-bezier(.22, 1, .36, 1);

	font-size: var(--ckart-fs, inherit);
	line-height: 1.8;
	color: var(--ckart-text);
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.ckart ::selection { background: var(--ckart-c2-soft); color: var(--ckart-c1); }

/* ---------- Paragraph rhythm ---------- */
.ckart :where(p):not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart, .no-ckart *)) {
	margin-block: 0 1.25em;
	text-wrap: pretty;
	unicode-bidi: plaintext;
}

/* Lead paragraph (intro) */
.ckart > p:first-child:not([class*="has-"][class*="font-size"]) {
	font-size: 1.12em;
	line-height: 1.75;
	color: var(--ckart-c1);
}

.ckart :where(strong, b):not(:where(.ckwa-cta *, .no-ckart *)) { font-weight: 700; color: var(--ckart-c1); }
.ckart :where(mark):not(:where(.no-ckart *)) {
	padding: .05em .3em;
	border-radius: 4px;
	color: var(--ckart-c1);
	background: var(--ckart-c2-soft);
}

/* ---------- Headings ---------- */
.ckart h2:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .elementor-heading-title)),
.ckart h3:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .elementor-heading-title)),
.ckart h4:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .elementor-heading-title)) {
	font-family: var(--ckart-head);
	text-wrap: balance;
	unicode-bidi: plaintext;
	scroll-margin-top: var(--ckart-offset, 110px);
}

.ckart h2:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .elementor-heading-title)) {
	position: relative;
	margin: 2.1em 0 .85em;
	padding-bottom: .5em;
	font-size: clamp(1.55rem, 1.15rem + 1.25vw, 2.05rem);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.02em;
	color: var(--ckart-c1);
}
/* turquoise → navy rule under every H2 */
.ckart h2:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .elementor-heading-title))::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--ckart-c2), var(--ckart-mid));
	transform-origin: left center;
	transition: width .6s var(--ckart-ease);
}
[dir="rtl"] .ckart h2::after,
.ckart[dir="rtl"] h2::after { background: linear-gradient(-90deg, var(--ckart-c2), var(--ckart-mid)); }
.ckart h2:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .elementor-heading-title)):hover::after { width: 96px; }

.ckart h3:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .elementor-heading-title)) {
	position: relative;
	margin: 1.75em 0 .6em;
	padding-inline-start: .9em;
	font-size: clamp(1.22rem, 1.05rem + .55vw, 1.45rem);
	font-weight: 750;
	line-height: 1.32;
	letter-spacing: -.01em;
	color: var(--ckart-mid);
}
/* vertical accent bar */
.ckart h3:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .elementor-heading-title))::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .2em;
	bottom: .2em;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--ckart-c2), var(--ckart-c1));
}

.ckart h4:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .elementor-heading-title)) {
	margin: 1.6em 0 .5em;
	font-size: 1.05em;
	font-weight: 800;
	line-height: 1.4;
	color: var(--ckart-c1);
}

/* first heading right after the TOC / at the top: less space */
.ckart > :is(h2, h3):first-child,
.ckart > .ckart-toc + h2 { margin-top: 1.2em; }

/* ---------- Links (external; internal links are highlighted by the inline rules) ---------- */
.ckart :is(p, li, td, th, dd, figcaption, blockquote) a:not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart *, [class*="button"], [class*="btn"])) {
	color: var(--ckart-mid);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--ckart-c2);
	text-decoration-thickness: 2px;
	text-underline-offset: .22em;
	transition: color .25s ease, background-size .35s var(--ckart-ease), text-decoration-color .25s ease;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.ckart :is(p, li, td, th, dd, figcaption, blockquote) a:not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart *, [class*="button"], [class*="btn"])):hover {
	color: var(--ckart-c1);
	text-decoration-color: var(--ckart-c1);
}
/* small ↗ after external links */
.ckart :is(p, li, td, th, dd, figcaption, blockquote) a[href^="http"]:not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart *, [class*="button"], [class*="btn"]))::after {
	content: "";
	display: inline-block;
	width: .62em;
	height: .62em;
	margin-inline-start: .22em;
	vertical-align: .08em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1.5h6.5V8M10.5 1.5 1.5 10.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1.5h6.5V8M10.5 1.5 1.5 10.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .7;
}
[dir="rtl"] .ckart a[href^="http"]::after { transform: scaleX(-1); }
.ckart a:has(> img)::after { content: none !important; }
.ckart a:focus-visible { outline: 2px solid var(--ckart-c2); outline-offset: 2px; border-radius: 3px; }

/* ---------- Lists ---------- */
.ckart :is(ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list):not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart, .no-ckart *)) {
	margin: 0 0 1.4em;
	padding-inline-start: 0;
	list-style: none;
}
.ckart :is(ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list):not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart, .no-ckart *)) > li {
	position: relative;
	margin: 0 0 .6em;
	padding-inline-start: 1.85em;
	unicode-bidi: plaintext;
}
.ckart :is(ul:not([class]), ul.wp-block-list):not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart, .no-ckart *)) > li::before {
	content: "";
	position: absolute;
	inset-inline-start: .35em;
	top: .62em;
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: var(--ckart-c2);
	box-shadow: 0 0 0 .22em var(--ckart-c2-soft);
}
/* nested bullets: hollow */
.ckart :is(ul, ol) :is(ul:not([class]), ul.wp-block-list):not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart *)) {
	margin: .55em 0 .2em;
}
.ckart :is(ul, ol) :is(ul:not([class]), ul.wp-block-list):not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart *)) > li::before {
	background: transparent;
	border: 2px solid var(--ckart-mid);
	box-shadow: none;
	width: .46em;
	height: .46em;
}

.ckart :is(ol:not([class]), ol.wp-block-list):not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart, .no-ckart *)) { counter-reset: ckart-ol; }
.ckart :is(ol:not([class]), ol.wp-block-list):not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart, .no-ckart *)) > li { counter-increment: ckart-ol; padding-inline-start: 2.35em; }
.ckart :is(ol:not([class]), ol.wp-block-list):not(:where(.ckwa-cta *, .ckart-toc *, .no-ckart, .no-ckart *)) > li::before {
	content: counter(ckart-ol);
	position: absolute;
	inset-inline-start: 0;
	top: .2em;
	width: 1.65em;
	height: 1.65em;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font: 800 .78em/1 var(--ckart-head);
	color: #fff;
	background: var(--ckart-c1);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.ckart li > p { margin-bottom: .4em; }
.ckart li::marker { content: none; }

/* ---------- Blockquote ---------- */
.ckart blockquote:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .twitter-tweet, .instagram-media, .tiktok-embed)) {
	position: relative;
	margin: 2em 0;
	padding: 1.3em 3.2em 1.3em 1.6em;
	padding-inline: 1.6em 3.2em;
	border: 0;
	border-inline-start: 4px solid var(--ckart-c2);
	border-radius: 0 18px 18px 0;
	background: linear-gradient(135deg, var(--ckart-c2-tint), #F6F9FC);
	font-family: var(--ckart-head);
	font-size: 1.08em;
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;
	color: var(--ckart-c1);
	quotes: none;
}
[dir="rtl"] .ckart blockquote { border-radius: 18px 0 0 18px; }
.ckart blockquote:not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .twitter-tweet, .instagram-media, .tiktok-embed))::before {
	content: "\201C";
	position: absolute;
	inset-inline-end: .35em;
	top: -.05em;
	font: 800 4.2em/1 Georgia, serif;
	color: var(--ckart-c2);
	opacity: .28;
	pointer-events: none;
}
.ckart blockquote p { margin-bottom: .6em; }
.ckart blockquote p:last-of-type { margin-bottom: 0; }
.ckart blockquote :is(cite, footer) {
	display: block;
	margin-top: .8em;
	font-family: inherit;
	font-size: .78em;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ckart-mid);
}

/* ---------- Tables ---------- */
.ckart .ckart-table-wrap,
.ckart figure.wp-block-table {
	margin: 2em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 16px;
	border: 1px solid var(--ckart-line);
	box-shadow: 0 10px 30px -18px rgba(11, 53, 88, .35);
}
.ckart figure.wp-block-table .ckart-table-wrap { margin: 0; border: 0; box-shadow: none; border-radius: 0; }
.ckart table:not(:where(.no-ckart, .no-ckart *)) {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: .92em;
	line-height: 1.55;
}
.ckart > table:not(:where(.no-ckart)) { margin: 2em 0; }
.ckart :is(th, td):not(:where(.no-ckart *)) {
	padding: .85em 1.05em;
	border: 0;
	border-bottom: 1px solid var(--ckart-line);
	text-align: start;
	vertical-align: top;
	unicode-bidi: plaintext;
}
.ckart :is(thead th, thead td, .ckart-table--head tr:first-child > *):not(:where(.no-ckart *)),
.ckart table:not(:has(thead)) tr:first-child > th:not(:where(.no-ckart *)) {
	background: var(--ckart-c1);
	color: #fff;
	font-family: var(--ckart-head);
	font-size: .92em;
	font-weight: 700;
	letter-spacing: .01em;
	border-bottom: 0;
	white-space: nowrap;
}
.ckart :is(thead, .ckart-table--head tr:first-child) :is(strong, b, em, a, code, span) { color: inherit !important; background: none; }
.ckart :is(td):not(:where(.no-ckart *)) { background: #fff; }
.ckart tbody tr:nth-child(even) > td:not(:where(.no-ckart *)) { background: #F6FAFC; }
.ckart tbody tr:hover > td:not(:where(.no-ckart *)) { background: var(--ckart-c2-tint); }
.ckart tbody tr:last-child > * { border-bottom: 0; }
.ckart tbody td:first-child { font-weight: 600; color: var(--ckart-c1); }
.ckart figure.wp-block-table figcaption { padding: .8em 1em; margin: 0; }

/* ---------- Images & media ---------- */
.ckart :is(figure, .wp-block-image):not(:where(.ckwa-cta *, .no-ckart, .no-ckart *, .wp-block-table, .wp-block-embed)) { margin-block: 2em; }
.ckart :is(figure img, p > img, p > a > img, .wp-block-image img):not(.emoji):not(:where(.no-ckart *, .wp-block-avatar *)) {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 18px 40px -26px rgba(11, 53, 88, .45);
}
.ckart :is(figcaption, .wp-element-caption):not(:where(.ckwa-cta *, .no-ckart *)) {
	margin-top: .75em;
	font-size: .82em;
	line-height: 1.5;
	text-align: center;
	color: var(--ckart-muted);
}
.ckart iframe { max-width: 100%; }
.ckart iframe:is([src*="youtube.com"], [src*="youtube-nocookie.com"], [src*="vimeo.com"]) {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 16px;
}
.ckart :is(video, embed, object) { max-width: 100%; }

/* ---------- Separator, code, misc ---------- */
.ckart hr:not(:where(.no-ckart)) {
	width: 64%;
	height: 1px;
	margin: 2.8em auto;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--ckart-c2), transparent);
	opacity: .8;
}
.ckart :is(p, li, td, h2, h3) code {
	padding: .12em .42em;
	border-radius: 6px;
	font-size: .88em;
	color: var(--ckart-c1);
	background: #EEF4F8;
}
.ckart pre:not(:where(.no-ckart)) {
	margin: 1.8em 0;
	padding: 1.2em 1.4em;
	overflow-x: auto;
	border-radius: 14px;
	font-size: .86em;
	line-height: 1.65;
	color: #E6F4F7;
	background: var(--ckart-c1);
	direction: ltr;
	text-align: left;
}
.ckart pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.ckart kbd {
	padding: .1em .45em;
	border: 1px solid var(--ckart-line);
	border-bottom-width: 2px;
	border-radius: 6px;
	font-size: .85em;
	background: #fff;
}
.ckart abbr[title] { text-decoration: underline dotted var(--ckart-c2); cursor: help; }
.ckart sup, .ckart sub { line-height: 0; }

/* ---------- Table of contents ---------- */
.ckart-toc {
	margin: 1.8em 0 2.2em;
	border-radius: 20px;
	background: linear-gradient(135deg, #F7FAFC 0%, var(--ckart-c2-tint) 100%);
	border: 1px solid var(--ckart-line);
	font-size: .94em;
	line-height: 1.5;
}
.ckart-toc details { padding: 0; }
.ckart-toc summary {
	display: flex;
	align-items: center;
	gap: .7em;
	padding: 1em 1.25em;
	list-style: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.ckart-toc summary::-webkit-details-marker { display: none; }
.ckart-toc summary:focus-visible { outline: 2px solid var(--ckart-c2); outline-offset: -2px; border-radius: 20px; }
.ckart-toc__icon {
	flex: 0 0 2.1em;
	width: 2.1em;
	height: 2.1em;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	padding: 0 .55em;
	background: var(--ckart-c1);
}
.ckart-toc__icon i { display: block; height: 2px; border-radius: 2px; background: var(--ckart-c2); }
.ckart-toc__icon i:nth-child(2) { width: 70%; background: #fff; }
.ckart-toc__icon i:nth-child(3) { width: 45%; }
.ckart-toc__title {
	font-family: var(--ckart-head);
	font-size: 1.05em;
	font-weight: 800;
	color: var(--ckart-c1);
}
.ckart-toc__count {
	padding: .2em .65em;
	border-radius: 999px;
	font-size: .75em;
	font-weight: 700;
	color: var(--ckart-mid);
	background: rgba(255, 255, 255, .8);
	border: 1px solid var(--ckart-line);
}
.ckart-toc__chev {
	margin-inline-start: auto;
	width: .6em;
	height: .6em;
	border-inline-end: 2px solid var(--ckart-c1);
	border-bottom: 2px solid var(--ckart-c1);
	transform: rotate(45deg) translateY(-25%);
	transition: transform .35s var(--ckart-ease);
}
.ckart-toc details[open] .ckart-toc__chev { transform: rotate(-135deg) translateY(-25%); }

.ckart-toc__list,
.ckart-toc__sub { margin: 0; padding: 0; list-style: none; }
.ckart-toc__list { padding: 0 .75em .9em; counter-reset: none; }
.ckart-toc__list li { margin: 0; padding: 0; }
.ckart-toc__list li::before { content: none; }
.ckart-toc a {
	display: flex;
	align-items: baseline;
	gap: .8em;
	padding: .5em .6em;
	border-radius: 10px;
	color: var(--ckart-text) !important;
	font-weight: 500;
	text-decoration: none !important;
	background: none !important;
	transition: background-color .2s ease, color .2s ease, transform .3s var(--ckart-ease);
}
.ckart-toc a::after { content: none !important; }
.ckart-toc a:hover { background-color: rgba(255, 255, 255, .85) !important; color: var(--ckart-c1) !important; }
.ckart-toc a.is-active { background-color: #fff !important; color: var(--ckart-c1) !important; font-weight: 700; box-shadow: 0 4px 14px -8px rgba(11, 53, 88, .35); }
.ckart-toc__n {
	flex: 0 0 auto;
	font: 800 .8em/1 var(--ckart-head);
	font-variant-numeric: tabular-nums;
	color: var(--ckart-c2);
	letter-spacing: .02em;
}
.ckart-toc a.is-active .ckart-toc__n { color: var(--ckart-c1); }
.ckart-toc__sub { margin: 0 0 .2em; padding-inline-start: 2.6em; }
.ckart-toc__sub a { padding-block: .3em; font-size: .92em; color: var(--ckart-muted) !important; }

/* ---------- Reading progress ---------- */
.ckart-progress {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 99999;
	height: 3px;
	pointer-events: none;
	background: transparent;
}
.admin-bar .ckart-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .ckart-progress { top: 46px; } }
.ckart-progress i {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--ckart-c1), var(--ckart-c2));
	box-shadow: 0 0 10px rgba(22, 198, 209, .45);
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}
[dir="rtl"] .ckart-progress i { transform-origin: 100% 50%; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.ckart { font-size: var(--ckart-fs-m, inherit); line-height: 1.75; }
	.ckart > p:first-child { font-size: 1.06em; }
	.ckart blockquote { padding: 1.1em 2.6em 1.1em 1.15em; padding-inline: 1.15em 2.6em; }
	.ckart :is(th, td) { padding: .7em .8em; }
	.ckart-toc summary { padding: .9em 1em; }
	.ckart-toc__count { display: none; }
}

@media print {
	.ckart-progress { display: none; }
	.ckart-toc details:not([open]) > ol { display: block; }
}

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