/**
 * Dar D'Art Luz — RTL overrides for Arabic.
 * Loaded after base.css + page-<slug>.css when lang === 'ar'.
 *
 * Strategy: minimal global flip via `direction: rtl` on html/body, then
 * targeted overrides for components that rely on physical left/right.
 */

html[dir="rtl"],
html[lang="ar"],
body.lang-ar {
	direction: rtl;
	text-align: right;
}

/* Arabic fonts — Amiri for serif (display/headers), Cairo for sans (body/UI) */
html[lang="ar"] body,
body.lang-ar {
	font-family: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .hero-title,
html[lang="ar"] .welcome-title,
html[lang="ar"] .section-title,
body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar .hero-title,
body.lang-ar .section-title {
	font-family: 'Amiri', 'Playfair Display', Georgia, serif;
	font-weight: 700;
}

/* Hero: keep content alignment switched to right */
html[lang="ar"] .hero-content,
body.lang-ar .hero-content {
	text-align: right;
}

html[lang="ar"] .hero-title em,
body.lang-ar .hero-title em {
	font-family: 'Amiri', serif;
	font-style: normal; /* italic doesn't render well in Arabic */
}

/* Eyebrow text + decorative line */
html[lang="ar"] .hero-eyebrow,
body.lang-ar .hero-eyebrow {
	flex-direction: row;
}

html[lang="ar"] .hero-scroll,
body.lang-ar .hero-scroll {
	right: auto;
	left: 2rem;
}

/* Navigation: flip nav-list */
html[lang="ar"] .nav-list,
body.lang-ar .nav-list {
	flex-direction: row-reverse;
}

html[lang="ar"] .nav-actions,
body.lang-ar .nav-actions {
	flex-direction: row-reverse;
}

html[lang="ar"] .nav-logo-text,
body.lang-ar .nav-logo-text {
	text-align: right;
}

/* Buttons with icons → flip icon position */
html[lang="ar"] .btn svg,
body.lang-ar .btn svg {
	transform: scaleX(-1);
}

html[lang="ar"] .btn-primary svg,
html[lang="ar"] .btn-ghost svg,
body.lang-ar .btn-primary svg,
body.lang-ar .btn-ghost svg {
	margin-right: 0;
	margin-left: 0.5rem;
}

/* Welcome page (used on /ar/welcome/ if added later) */
html[lang="ar"] .welcome-card-head,
body.lang-ar .welcome-card-head {
	flex-direction: row-reverse;
}

html[lang="ar"] .welcome-wifi-row,
body.lang-ar .welcome-wifi-row {
	flex-direction: row-reverse;
}

html[lang="ar"] .welcome-menu-list li,
body.lang-ar .welcome-menu-list li {
	flex-direction: row-reverse;
}

html[lang="ar"] .welcome-number,
body.lang-ar .welcome-number {
	flex-direction: row-reverse;
}

/* Lang switcher (floating) — flip to bottom-left for AR */
html[lang="ar"] .darluz-lang-switcher,
body.lang-ar .darluz-lang-switcher {
	right: auto;
	left: 1.2rem;
}

/* Cards grids with explicit margins */
html[lang="ar"] .hero-eyebrow-line,
body.lang-ar .hero-eyebrow-line {
	margin-right: 0;
	margin-left: 1rem;
}

/* Footer */
html[lang="ar"] .footer-inner,
body.lang-ar .footer-inner {
	text-align: right;
}

/* List bullets: keep on right side */
html[lang="ar"] ul,
html[lang="ar"] ol,
body.lang-ar ul,
body.lang-ar ol {
	padding-right: 1.2rem;
	padding-left: 0;
}

/* Form inputs: align right */
html[lang="ar"] input[type="text"],
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[type="number"],
html[lang="ar"] textarea,
html[lang="ar"] select,
body.lang-ar input[type="text"],
body.lang-ar input[type="email"],
body.lang-ar input[type="tel"],
body.lang-ar input[type="number"],
body.lang-ar textarea,
body.lang-ar select {
	text-align: right;
	direction: rtl;
}

/* Phone / numbers stay LTR even in RTL context */
html[lang="ar"] .ltr,
html[lang="ar"] [dir="ltr"],
html[lang="ar"] a[href^="tel:"],
html[lang="ar"] a[href^="mailto:"],
body.lang-ar .ltr,
body.lang-ar [dir="ltr"],
body.lang-ar a[href^="tel:"],
body.lang-ar a[href^="mailto:"] {
	direction: ltr;
	unicode-bidi: embed;
	display: inline-block;
}

/* Mobile menu */
html[lang="ar"] .mobile-nav,
body.lang-ar .mobile-nav {
	right: auto;
	left: 0;
}

/* Reset text-align inside .welcome-prose so multi-line text reads right-to-left */
html[lang="ar"] .welcome-prose,
body.lang-ar .welcome-prose {
	text-align: right;
}