/* ==========================================================================
   German Learning Center — RTL layer (Arabic)
   Loaded only when is_rtl() is true, AFTER main.css.

   main.css is written with CSS logical properties (inset-inline,
   margin-inline, padding-inline, border-inline-start), so the box model
   mirrors on its own. This file only handles what logical properties cannot
   do: the Arabic font stack, directional glyphs, gradient directions and the
   handful of places where a physical value was unavoidable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Arabic typography
   -------------------------------------------------------------------------- */

[dir="rtl"] {
	--glc-font-heading: "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--glc-font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;

	/* Arabic glyphs carry more vertical weight than Latin at the same size, so
	   the hero is stepped down slightly and line-height is opened up. */
	--glc-fs-hero: clamp(2.25rem, 1.3rem + 4.3vw, 4.75rem);

	/* Flips the nav underline so it grows from the right edge */
	--glc-origin: right;
}

[dir="rtl"] .glc h1,
[dir="rtl"] .glc h2,
[dir="rtl"] .glc h3,
[dir="rtl"] .glc h4 {
	line-height: 1.4;
	/* Arabic does not use synthetic italics or tight tracking */
	letter-spacing: normal;
}

[dir="rtl"] .glc-hero__title {
	letter-spacing: normal;
}

[dir="rtl"] .glc,
[dir="rtl"] .glc p,
[dir="rtl"] .glc li {
	line-height: 1.9;
}

/* Arabic has no uppercase — the eyebrow keeps its size instead of transforming */
[dir="rtl"] .glc-brand__sub {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.68rem;
}

[dir="rtl"] .glc-level__badge {
	letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   2. Directional glyphs
   -------------------------------------------------------------------------- */

/* The Arabic page content already uses a left-pointing arrow character (←),
   so the glyph itself is NOT flipped — flipping it here would turn it back
   into →. Only the hover nudge needs to reverse, so the arrow still moves in
   the reading direction. */
[dir="rtl"] .glc-arrow-link:hover .glc-arrow {
	transform: translateX(-4px);
}

/* --------------------------------------------------------------------------
   3. Gradients — direction is physical, not logical
   -------------------------------------------------------------------------- */

[dir="rtl"] .glc-ornament::before {
	background: linear-gradient(to left, transparent, var(--glc-gold-200), var(--glc-gold));
}

[dir="rtl"] .glc-ornament::after {
	background: linear-gradient(to right, transparent, var(--glc-gold-200), var(--glc-gold));
}

/* --------------------------------------------------------------------------
   4. Hero image crop
   -------------------------------------------------------------------------- */

/* The reference Arabic hero mirrors the composition: the pyramids sit on the
   left of the frame. The photo itself is not flipped (that would mirror real
   landmarks and read as a fake) — only the focal point of the crop shifts so
   the headline block and the pyramids do not collide. */
[dir="rtl"] .glc-hero__media img {
	object-position: center 78%;
}

@media (max-width: 767px) {
	[dir="rtl"] .glc-hero__media img {
		object-position: 38% 72%;
	}
}

/* --------------------------------------------------------------------------
   5. Latin content inside Arabic pages
   -------------------------------------------------------------------------- */

/* Phone numbers, e-mail addresses, level codes (A1–C2) and exam names
   (telc, TestDaF, DSH, Goethe) must not be re-ordered by the bidi algorithm.
   .glc-ltr in main.css isolates them; these keep alignment sane too. */
[dir="rtl"] .glc-ltr {
	text-align: right;
}

[dir="rtl"] .glc-footer__item .glc-ltr,
[dir="rtl"] .glc-form input[type="tel"],
[dir="rtl"] .glc-form input[type="email"] {
	direction: ltr;
	text-align: right;
	unicode-bidi: isolate;
}

[dir="rtl"] .glc-level__badge {
	direction: ltr;
	unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   6. Component-level corrections
   -------------------------------------------------------------------------- */

/* Feature dividers: the "first" item is on the right in RTL, and
   border-inline-start already handles that. But at the 2-column tablet
   breakpoint the odd/even reset needs to match the mirrored order. */
@media (max-width: 1024px) {
	[dir="rtl"] .glc-feature:nth-child(odd) {
		border-inline-start: 0;
	}
}

/* The mobile sub-menu indent is logical, but list markers need mirroring */
[dir="rtl"] .glc-level__meta li,
[dir="rtl"] .glc-feature {
	text-align: right;
}

/* Burger lines are symmetric, but the rotation reads better mirrored */
[dir="rtl"] .glc-burger[aria-expanded="true"] .glc-burger__box span:nth-child(1) {
	transform: translateY(6px) rotate(-45deg);
}

[dir="rtl"] .glc-burger[aria-expanded="true"] .glc-burger__box span:nth-child(3) {
	transform: translateY(-6px) rotate(45deg);
}

/* Card text is centred in the reference for the title, start-aligned for body —
   both are logical already, this only guards against Astra/Gutenberg defaults. */
[dir="rtl"] .glc-card__text,
[dir="rtl"] .glc-prose {
	text-align: right;
}

[dir="rtl"] .glc-card__title,
[dir="rtl"] .glc-section__head,
[dir="rtl"] .glc-hero {
	text-align: center;
}

/* --------------------------------------------------------------------------
   7. Gutenberg / Astra escapes
   -------------------------------------------------------------------------- */

/* Editor-authored content occasionally emits has-text-align-left, which is
   physical and wrong in Arabic. Only correct it inside our own containers. */
[dir="rtl"] .glc-prose .has-text-align-left,
[dir="rtl"] .glc-services .has-text-align-left,
[dir="rtl"] .glc-features .has-text-align-left {
	text-align: right;
}