/* ================================================
   Apartments an der Uniklinik — RTL overrides (Arabic)
   Load AFTER design-system.css, only on /ar/ pages.
   design-system.css and the page <style> blocks are written for LTR;
   this file mirrors everything that is direction-dependent.
   ================================================ */

/* Noto Sans Arabic / Noto Naskh Arabic are self-hosted: @font-face rules in /assets/css/fonts.css */

html[dir="rtl"] body {
  direction: rtl;
  text-align: start;
  font-family: 'Noto Sans Arabic', 'Inter', Tahoma, 'Segoe UI', sans-serif;
  line-height: 1.75;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .brand, html[dir="rtl"] .footer-brand,
html[dir="rtl"] .review-badge .score {
  font-family: 'Noto Naskh Arabic', 'Merriweather', Georgia, serif;
  letter-spacing: 0;
  line-height: 1.4;
}
/* Arabic script must not be letter-spaced or uppercased */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .footer-grid h4,
html[dir="rtl"] .toc h4,
html[dir="rtl"] .placeholder-label { letter-spacing: 0; text-transform: none; }

/* ---------- Header / nav ----------
   With direction:rtl flex rows already run right-to-left, so the brand sits
   on the right and the booking button on the left. Undo the old
   row-reverse hack from design-system.css, which would flip it back. */
html[dir="rtl"] .nav-links,
html[dir="rtl"] .hero-cta { flex-direction: row; }
html[dir="rtl"] .card-body { text-align: start; }
/* Language codes (DE, EN, …) keep their usual LTR order */
html[dir="rtl"] .lang-switch { direction: ltr; }

/* ---------- Typography helpers ---------- */
html[dir="rtl"] .lead { margin-inline: 0; }
html[dir="rtl"] .text-center { text-align: center; }

/* ---------- USP lists (✓ / ×) ---------- */
html[dir="rtl"] .usp-col .yes::before,
html[dir="rtl"] .usp-col .no::before { margin-right: 0; margin-inline-end: 4px; }

/* ---------- Tables ---------- */
html[dir="rtl"] .dist-table th,
html[dir="rtl"] .dist-table td { text-align: start; }

/* ---------- Reviews ---------- */
html[dir="rtl"] .review-card::before { left: auto; right: 20px; content: '”'; }
/* Original-language review texts stay left-to-right */
html[dir="rtl"] blockquote[lang]:not([lang="ar"]) { direction: ltr; text-align: left; unicode-bidi: isolate; }

/* ---------- Footer ---------- */
html[dir="rtl"] .footer-bottom .lang-switch { direction: ltr; }

/* ---------- Gallery & lightbox ---------- */
html[dir="rtl"] .gallery .g-label { left: auto; right: 6px; }
html[dir="rtl"] .lightbox .lb-close { right: auto; left: 12px; }
html[dir="rtl"] .lightbox .lb-prev { left: auto; right: 8px; }
html[dir="rtl"] .lightbox .lb-next { right: auto; left: 8px; }

/* ---------- Page-level components (from the inline <style> blocks) ---------- */
html[dir="rtl"] .info-block {
  border-left: 0;
  border-right: 4px solid var(--brand);
}
html[dir="rtl"] .info-block.warn { border-right-color: var(--error); }
html[dir="rtl"] .info-block.tip { border-right-color: var(--ok); }
html[dir="rtl"] .info-block.accent { border-right-color: var(--accent); }

/* Lists: indent on the right side */
html[dir="rtl"] .info-block ul, html[dir="rtl"] .info-block ol,
html[dir="rtl"] .faq-list .answer ul,
html[dir="rtl"] .steps ul,
html[dir="rtl"] .waste-card ul { margin-left: 0; margin-right: 20px; }
html[dir="rtl"] .legal ol, html[dir="rtl"] .legal ul { margin: 8px 24px 16px 0; }

/* FAQ accordion: +/− marker on the left */
html[dir="rtl"] .faq-list summary { padding-right: 24px; padding-left: 52px; }
html[dir="rtl"] .faq-list summary::after { right: auto; left: 22px; }

/* Numbered steps: number badge on the right */
html[dir="rtl"] .steps li { padding: 24px 88px 24px 28px; }
html[dir="rtl"] .steps li::before { left: auto; right: 24px; }

/* Apartment feature checklist */
html[dir="rtl"] .apt-detail .apt-body .features li::before { margin-right: 0; margin-left: 8px; }

/* Forms: LTR values (e-mail, dates, numbers) stay readable */
html[dir="rtl"] .form-card input[type="email"],
html[dir="rtl"] .form-card input[type="tel"],
html[dir="rtl"] .form-card input[type="date"] { direction: ltr; text-align: right; }

/* ---------- LTR snippets ---------- */
html[dir="rtl"] bdi, html[dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; }
html[dir="rtl"] a[href^="mailto:"], html[dir="rtl"] a[href^="tel:"] { unicode-bidi: isolate; }

/* Inline list indents (style="margin-left: 20px…") on house-info / location */
html[dir="rtl"] [style*="margin-left: 20px"] { margin-left: 0 !important; margin-right: 20px !important; }