/**
 * Document direction + LTR/RTL layout hooks for Kutby.
 * Relies on WordPress language_attributes() (html[dir]) and body.kutby-rtl / body.kutby-ltr.
 */

html {
	scroll-behavior: smooth;
}

html[dir="rtl"],
body.kutby-rtl {
	direction: rtl;
}

html[dir="ltr"],
body.kutby-ltr {
	direction: ltr;
	font-family: Inter, Tajawal, system-ui, sans-serif !important;
}

/* Article / guide body: Inter reads cleanly in English (local font files) */
html[dir="ltr"] .blog-article-body,
html[dir="ltr"] .blog-article-lead,
html[dir="ltr"] .blog-article-title,
html[dir="ltr"] .blog-hero-title,
html[dir="ltr"] .review-body,
html[dir="ltr"] .edu-rich-content,
html[dir="ltr"] .appd-article,
html[dir="ltr"] .appd-article__section p,
html[dir="ltr"] .appd-article__heading,
html[dir="ltr"] .appd-article__checks li,
body.kutby-ltr .blog-article-body,
body.kutby-ltr .blog-article-lead,
body.kutby-ltr .blog-article-title,
body.kutby-ltr .blog-hero-title,
body.kutby-ltr .review-body,
body.kutby-ltr .edu-rich-content,
body.kutby-ltr .appd-article,
body.kutby-ltr .appd-article__section p,
body.kutby-ltr .appd-article__heading,
body.kutby-ltr .appd-article__checks li {
	font-family: Inter, Tajawal, system-ui, sans-serif !important;
}

/* Prefer logical alignment over hardcoded physical sides */
body.kutby-ltr .edu-faq-trigger {
	text-align: start;
	direction: inherit;
}

body.kutby-ltr .edu-breadcrumb {
	direction: inherit;
}

/* Softonic-style cards: inherit document direction (do not force RTL) */
body.kutby-ltr .sol-card-top,
body.kutby-ltr .sol-card-bottom,
body.kutby-rtl .sol-card-top,
body.kutby-rtl .sol-card-bottom {
	direction: inherit;
}

/* Language switcher: scrollable list for up to 14 locales */
.kutby-lang-switcher__list--dropdown {
	max-height: min(70vh, 22rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.kutby-lang-switcher__list--dropdown .kutby-lang-switcher__link--soon {
	justify-content: flex-start;
	gap: 6px;
}

/* Unified breadcrumb — Mobizil scheme on every front surface
 * Match: https://mobizil-next1-ac36.vercel.app (11px, ›, blue-600 links, gray-500 current)
 *
 * Vertical rhythm: crumb padding (12px) is the only air above/below the trail.
 * Neutralize container .py-6 top pad so app single / platform / static pages match.
 */
.container-slim.py-6:has(> .edu-breadcrumb:first-child) {
	padding-top: 0 !important;
}

/* Flex stacks (gap-5 = 1.25rem) — cancel gap after crumb so bottom air = padding only */
.container-slim.flex.gap-5 > .edu-breadcrumb:first-child {
	margin-bottom: -1.25rem;
}

.edu-breadcrumb,
nav.edu-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 28px;
	margin: 0;
	padding: 12px 0;
	font-family: Tajawal, Tahoma, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	color: #9ca3af;
	line-height: 1.4;
	box-sizing: border-box;
}

.edu-breadcrumb-link,
.edu-breadcrumb-current,
.edu-breadcrumb-sep {
	flex-shrink: 0;
	white-space: nowrap;
	font-size: 11px;
	line-height: 1.4;
}

.edu-breadcrumb-link {
	color: #2563eb;
	font-weight: 600;
	text-decoration: none;
}

.edu-breadcrumb-link:hover {
	text-decoration: underline;
}

.edu-breadcrumb-sep {
	color: #9ca3af;
	font-weight: 400;
	line-height: 1;
}

.edu-breadcrumb-current,
.edu-breadcrumb-current.is-current {
	color: #6b7280;
	font-weight: 400;
}

/* Legacy blog class → same Mobizil metrics */
.blog-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 12px 0;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	color: #9ca3af;
}

.blog-breadcrumb a {
	color: #2563eb;
	font-weight: 600;
	text-decoration: none;
}

.blog-breadcrumb a:hover {
	text-decoration: underline;
}