/* ============================================================================
   Meridian — shared grouped/mega header (apex landing + blog)
   Ported 1:1 from the study pilot (web/src/app/globals.css nav block) so the
   apex marketing site and the Next.js pilot present ONE consistent header.
   CSS-only: hover + focus-within → mouse/keyboard/touch; checkbox hamburger →
   no JS. Colours are hard-coded hex (NOT page CSS vars) so this file is
   portable identically across index.html, tr/index.html and the 6 blog files,
   whose :root variable names differ. Classes are `m-nav-*` prefixed to avoid
   collisions with each page's legacy `.nav-*` style blocks.
   Palette (matches both pilot + landing): ink #0F172A · ink-soft #475569 ·
   ink-faint #94A3B8 · line #E2E8F0 · line-soft #EEF2F6 · accent #2563EB ·
   accent-deep #1D4ED8 · brand-orange #F97316 / hover #EA580C.
   ============================================================================ */

/* Shared locale visibility contract. The injected header/footer carry every
   locale even on older pages whose inline styles only knew TR/EN. Keeping this in
   the shared stylesheet prevents inactive languages from rendering side-by-side
   whenever the canonical chrome gains a locale.
   BOTH halves must gain a locale together: the hide rule without the show rule
   blanks every label. Measured on an Arabic probe page — 0 of 120 locale spans
   visible, nav triggers and footer headings empty. */
[data-lang-tr], [data-lang-en], [data-lang-es], [data-lang-ar] { display: none; }
html[lang="tr"] [data-lang-tr],
html[lang="en"] [data-lang-en],
html[lang="es"] [data-lang-es],
html[lang="ar"] [data-lang-ar] { display: revert; }

/* position:fixed — both landing variants (home hero `padding:10rem 0`, blog
   `.blog-hero padding:8rem 0`) are laid out to clear a FIXED header. The pilot
   uses sticky, but its pages have small top padding; copying sticky here would
   stack the in-flow 64px bar ON TOP of the landing's clearance padding and add
   ~64px of dead whitespace. Visually identical (pinned blur header) either way. */
#mainNav.m-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(248, 250, 252, 0.82);
  border-bottom: 1px solid #E2E8F0;
}
.m-nav-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 64px; max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.m-nav-logo { display: inline-flex; align-items: center; text-decoration: none; }
.m-nav-logo img { height: 30px; width: auto; display: block; }
.m-nav-wrap { display: flex; align-items: center; gap: 0.9rem; }

/* ---- grouped dropdown nav ---- */
.m-nav-links { display: flex; gap: 0.25rem; }
.m-nav-group { position: relative; }
.m-nav-trigger {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 0.8rem; border: 0; border-radius: 9px; background: transparent;
  font-family: inherit; font-size: 0.95rem; font-weight: 500; color: #475569;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.m-nav-trigger:hover, .m-nav-group:focus-within .m-nav-trigger { color: #0F172A; background: #EEF2F6; }
.m-nav-chev { transition: transform 0.2s ease; }
.m-nav-group:hover .m-nav-chev, .m-nav-group:focus-within .m-nav-chev { transform: rotate(180deg); }
.m-nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 196px;
  box-sizing: border-box; max-width: calc(100vw - 1.5rem);
  display: flex; flex-direction: column; gap: 2px; padding: 0.45rem;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 13px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  /* Asymmetric, for the same reason as .m-lang-panel below and .lang-panel in the
     pilot — this was the third instance of the shape in this branch. A symmetric
     `visibility 0.16s` leaves the menu `hidden` for 160ms after the trigger takes
     focus, so the very next Tab skips the whole submenu: measured 0/2 triggers
     admitting focus before this line, 2/2 after. Only the close stays delayed, so
     the fade-out is unchanged. */
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.m-nav-group:hover .m-nav-menu, .m-nav-group:focus-within .m-nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}
.m-nav-menu a {
  padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.92rem; font-weight: 500;
  color: #475569; white-space: nowrap; text-decoration: none; font-family: inherit;
}
.m-nav-menu a:hover { background: #EEF2F6; color: #0F172A; text-decoration: none; }
/* Wide 2-column panel with a Blog news sub-layer.
   Right-anchored (left:auto;right:0): the nav cluster sits on the right, so the
   wide panel grows LEFT to stay inside the viewport — left:0 clipped the promo. */
.m-nav-menu-wide { flex-direction: row; gap: 0.5rem; min-width: 460px; padding: 0.6rem; left: auto; right: 0; }
.m-nav-col { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.m-nav-col-news { border-left: 1px solid #E2E8F0; padding-left: 0.6rem; min-width: 250px; }
.m-nav-col-h { padding: 0.3rem 0.7rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #94A3B8; }
.m-nav-col-news a { display: flex; flex-direction: column; gap: 1px; padding: 0.45rem 0.7rem; border-radius: 8px; }
.m-nav-col-news a strong { font-size: 0.88rem; font-weight: 600; color: #0F172A; line-height: 1.3; white-space: normal; }
.m-nav-col-news a em { font-size: 0.74rem; font-style: normal; color: #94A3B8; }
.m-nav-col-news a:hover { background: #EEF2F6; }
.m-nav-col-news a:hover strong { color: #1D4ED8; }
.m-nav-col-all { font-size: 0.82rem !important; font-weight: 600; color: #2563EB !important; }
.m-nav-col-all:hover { color: #1D4ED8 !important; }

/* ---- Destinations mega-panel (Explore) — country grid + promo card ---- */
.m-nav-dest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 2px; }
.m-nav-dest-grid a {
  padding: 0.45rem 0.6rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500;
  color: #475569; white-space: nowrap; text-decoration: none; font-family: inherit;
}
.m-nav-dest-grid a:hover { background: #EEF2F6; color: #0F172A; text-decoration: none; }
/* Narrow-desktop guard (above the 860px mobile breakpoint, below ~1140px): the
   wide panel is right-anchored to its trigger which sits mid-bar, so a 2-col grid
   makes the panel wide enough to clip the viewport's LEFT edge. Collapse to one
   column there to shrink the footprint and keep the whole panel on-screen. */
@media (min-width: 861px) and (max-width: 1140px) {
  .m-nav-dest-grid { grid-template-columns: 1fr; }
}
.m-nav-menu-sub { font-size: 0.86rem !important; color: #64748B !important; }
.m-nav-promo {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0.6rem;
  min-width: 220px; padding: 1.05rem 1.1rem; border-radius: 12px; text-decoration: none;
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 58%, #F97316 240%);
}
.m-nav-promo:hover { text-decoration: none; filter: brightness(1.04); }
.m-nav-promo-top { display: flex; flex-direction: column; gap: 0.3rem; }
.m-nav-promo-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.m-nav-promo-h { font-size: 1.02rem; font-weight: 700; color: #fff; line-height: 1.25; }
.m-nav-promo-sub { font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.85); line-height: 1.35; }
.m-nav-promo-cta {
  position: relative; z-index: 1; align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.85rem; border-radius: 100px;
  background: #fff; color: #1D4ED8; font-size: 0.8rem; font-weight: 700;
  box-shadow: 0 4px 12px rgba(15,23,42,0.18);
}
.m-nav-promo:hover .m-nav-promo-cta { background: #F8FAFC; }
.m-nav-resource-promo { min-height: 220px; }
.m-nav-resource-promo .m-nav-promo-h { max-width: 260px; }
.m-nav-resource-promo .m-nav-promo-sub { max-width: 270px; }
.m-nav-promo::after {
  content: ""; position: absolute; right: -38px; bottom: -42px;
  width: 150px; height: 150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 70%);
}

/* Language picker — flag + endonym, replacing the old EN|TR|ES text toggle.
   Structure and behaviour mirror the pilot's LangSwitcher so the marketing site
   and the app pages feel like one product. Disclosure is CSS-only, exactly like
   .m-nav-group above: no aria-expanded, so there is no JS state that can desync
   from what is painted, and the panel still opens when scripts fail to load. */
.m-nav-lang { position: relative; display: inline-flex; }
.m-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.m-lang-trigger {
  display: inline-flex; align-items: center; gap: 0.34rem;
  padding: 0.3rem 0.5rem 0.3rem 0.55rem; font-family: inherit; font-size: 0.8rem;
  font-weight: 600; color: #475569; background: #fff;
  border: 1px solid #E2E8F0; border-radius: 9px; cursor: pointer;
}
.m-lang-trigger:hover, .m-nav-lang:focus-within .m-lang-trigger { color: #0F172A; background: #EEF2F6; }
.m-lang-flag { font-size: 0.95rem; line-height: 1; }
.m-lang-chev { width: 9px; height: 6px; color: #94A3B8; transition: transform 0.16s ease; }
.m-nav-lang:hover .m-lang-chev, .m-nav-lang:focus-within .m-lang-chev { transform: rotate(180deg); }
.m-lang-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  margin: 0; padding: 0.4rem; list-style: none; min-width: 170px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 13px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  /* Asymmetric on purpose. `visibility` must flip to visible INSTANTLY on open,
     or there is a frame where the panel is painted while its links are still
     unfocusable and a second Tab escapes past the picker. Measured in the pilot:
     0/6 successful focus-into-panel with a symmetric transition, 6/6 with this.
     Only the close is delayed, so the fade-out stays smooth. */
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.m-nav-lang:hover .m-lang-panel, .m-nav-lang:focus-within .m-lang-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}
.m-lang-panel a.m-lang-item {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.55rem;
  border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: #475569; text-decoration: none;
}
.m-lang-panel a.m-lang-item:hover { background: #EEF2F6; color: #0F172A; text-decoration: none; }
/* The current locale, marked with aria-current so the styling and the accessible
   name agree — the old toggle used a class the screen reader could not see. */
.m-lang-panel a.m-lang-item[aria-current="true"] { background: #EEF2F6; color: #0F172A; }

/* Unified brand CTA. Dark text on orange (#0F172A) — matches the apex's own
   button convention (--text-on-orange) and passes WCAG AA: dark/orange = 6.4:1,
   whereas the pilot's white/orange is only 2.8:1 (fails AA). */
.m-nav-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0.5rem 1rem; border-radius: 9px;
  background: #F97316; color: #0F172A; text-decoration: none;
  font-family: inherit; font-size: 0.9rem; font-weight: 700; transition: background 0.15s ease;
}
.m-nav-cta:hover { background: #EA580C; color: #0F172A; text-decoration: none; }

/* CSS-only responsive menu (checkbox hack) — no JS. */
.m-nav-toggle { display: none; }
.m-nav-burger { display: none; }
@media (max-width: 860px) {
  .m-nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 9px; cursor: pointer; border-radius: 8px;
  }
  .m-nav-burger span { display: block; height: 2px; width: 100%; background: #0F172A; border-radius: 2px; }
  .m-nav-wrap {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.9rem;
    padding: 1rem 1.25rem 1.4rem; background: #F8FAFC; border-bottom: 1px solid #E2E8F0;
    max-height: calc(100dvh - 64px); overflow-y: auto;
  }
  .m-nav-toggle:checked ~ .m-nav-wrap { display: flex; }
  .m-nav-links { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .m-nav-group { width: 100%; }
  .m-nav-trigger { width: 100%; justify-content: space-between; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #94A3B8; pointer-events: none; }
  .m-nav-chev { display: none; }
  /* On mobile the groups are always expanded (static list), not dropdowns. */
  .m-nav-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 0.4rem; min-width: 0; }
  .m-nav-menu a { padding: 0.5rem 0.4rem; font-size: 1rem; }
  .m-nav-menu-wide { flex-direction: column; min-width: 0; padding: 0; gap: 0.4rem; }
  .m-nav-col-news { border-left: 0; padding-left: 0; min-width: 0; }
  .m-nav-col-news a strong { font-size: 0.95rem; }
  .m-nav-dest-grid { grid-template-columns: 1fr; }
  .m-nav-promo { min-width: 0; margin-top: 0.4rem; }
  .m-nav-lang { align-self: flex-start; }
  /* Stacked nav: anchor the panel to the start edge so it cannot overflow. */
  .m-lang-panel { right: auto; left: 0; }
  .m-nav-cta { justify-content: center; }
}

/* ============================================================================
   Meridian — canonical brand footer (.m-footer*).
   Single source of truth for the landing footer, injected into every inner
   page by scripts/inject-landing-partials.mjs (see landing/_partials/footer.html).
   `.m-footer*` prefixed (like `.m-nav*`) so it never collides with each page's
   legacy `.footer-*` inline rules. Hard-coded hex for portability; matches the
   pilot's SiteFooter (web/src/app/globals.css .site-footer). Bilingual span
   visibility is handled by each page's existing [data-lang-*] CSS.
   ============================================================================ */
.m-footer { background: #0A0F1C; color: #94A3B8; padding: 4rem 0 1.75rem; margin-top: 4rem; }
.m-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.m-footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.2fr; gap: 2.5rem; margin-bottom: 2.75rem; }
.m-footer-logo { display: inline-block; }
.m-footer-logo img { height: 40px; width: auto; }
.m-footer-brand p { color: #94A3B8; font-size: 0.9rem; line-height: 1.6; margin: 0.95rem 0 0; max-width: 290px; }
.m-footer-social { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.m-footer-social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #CBD5E1; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s; text-decoration: none; }
.m-footer-social a:hover { background: #F97316; border-color: #F97316; color: #fff; transform: translateY(-2px); }
.m-footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.m-footer-col h4 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.8rem; font-weight: 700; margin: 0 0 1.1rem; text-transform: uppercase; letter-spacing: 0.06em; color: #FFFFFF; }
.m-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; margin: 0; padding: 0; }
.m-footer-col a { color: #94A3B8; text-decoration: none; font-size: 0.88rem; transition: color 0.25s, transform 0.25s; display: inline-block; }
.m-footer-col a:hover { color: #F97316; transform: translateX(3px); }
.m-footer-bottom { padding-top: 1.75rem; margin-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.08); color: #64748B; font-size: 0.78rem; }
.m-footer-legal-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.06); color: #64748B; font-size: 0.73rem; line-height: 1.6; opacity: 0.9; }
@media (max-width: 820px) { .m-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .m-footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ============================================================================
   Meridian — canonical inner-page nav (.m-navlite*).
   Single source of truth for blog + legal navs (see _partials/nav-inner.html).
   position:sticky so it needs no body clearance (legal pages flow this way;
   blog pages just gain a little hero whitespace). Bilingual via the page's
   setLang system. Hard-coded hex; matches the home mega-nav palette + CTA.
   ============================================================================ */
.m-navlite { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(248,250,252,0.82); border-bottom: 1px solid #E2E8F0; }
.m-navlite-bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.m-navlite-logo { display: inline-flex; }
.m-navlite-logo img { height: 30px; width: auto; display: block; }
.m-navlite-wrap { display: flex; align-items: center; gap: 1.5rem; }
.m-navlite-links { display: flex; gap: 1.5rem; }
.m-navlite-links a { color: #475569; font-weight: 500; font-size: 0.95rem; text-decoration: none; transition: color 0.2s; }
.m-navlite-links a:hover { color: #0F172A; }
.m-navlite-lang { display: flex; border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden; }
.m-navlite-lang .lang-btn { border: 0; background: transparent; padding: 0.3rem 0.62rem; font-size: 0.8rem; font-weight: 700; color: #94A3B8; cursor: pointer; font-family: inherit; line-height: 1.4; }
.m-navlite-cta { display: inline-flex; align-items: center; background: #F97316; color: #0F172A; font-weight: 700; font-size: 0.9rem; padding: 0.5rem 1.05rem; border-radius: 100px; text-decoration: none; white-space: nowrap; transition: background 0.2s; }
.m-navlite-cta:hover { background: #EA580C; color: #0F172A; text-decoration: none; }
.m-navlite-toggle, .m-navlite-burger { display: none; }
@media (max-width: 820px) {
  .m-navlite-burger { display: flex; flex-direction: column; gap: 5px; width: 26px; height: 20px; justify-content: center; cursor: pointer; }
  .m-navlite-burger span { display: block; height: 2px; width: 100%; background: #0F172A; border-radius: 2px; }
  .m-navlite-wrap { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #E2E8F0; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 1.25rem clamp(1.25rem, 4vw, 3rem); }
  .m-navlite-toggle:checked ~ .m-navlite-wrap { display: flex; }
  .m-navlite-links { flex-direction: column; gap: 1.1rem; }
}

/* Inner-page mega-nav — SAME bar as the home #mainNav.m-nav, but sticky (needs
   no per-page clearance on legal pages). Two-class specificity (0,2,0) beats the
   legal pages' bare `nav { position: sticky }` inline rule. All .m-nav-* child
   styling (bar, dropdowns, CTA) is shared, so this reads identically to home. */
.m-nav.m-nav-inner {
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(248, 250, 252, 0.82);
  border-bottom: 1px solid #E2E8F0;
}

/* ── Post FAQ (T3) ────────────────────────────────────────────────────────
   Blog yazılarındaki FAQPage JSON-LD'sinin GÖRÜNÜR karşılığı. Blog sayfaları
   kendi inline <style>'ında FAQ stili taşımaz ama hepsi /nav.css yükler
   (scripts/check-blog-parity.mjs bunu zorunlu kılar) → tek yer, kopya yok.
   Anasayfanın .faq-item kurallarıyla çakışmasın diye ayrı sınıf adı. */
.post-faq { max-width: 760px; margin: 0 auto; padding: 0 24px 32px; }
.post-faq h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 12px; color: #0F172A; }
.post-faq__item { border-bottom: 1px solid #E2E8F0; }
.post-faq__item:first-of-type { border-top: 1px solid #E2E8F0; }
.post-faq__item summary { cursor: pointer; font-weight: 600; font-size: 1rem; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; color: #0F172A; }
.post-faq__item summary::-webkit-details-marker { display: none; }
.post-faq__item summary::after { content: '+'; color: #64748B; font-weight: 500; }
.post-faq__item[open] summary::after { content: '\2212'; }
.post-faq__answer { padding: 0 0 16px; color: #475569; font-size: 0.95rem; line-height: 1.65; }
.post-faq__answer p { margin: 0; }

/* ============================================================================
   Arabic / RTL — landing chrome.
   Scoped to html[lang="ar"] (or [dir="rtl"]) so the LTR locales are untouched.
   Same discipline as the pilot's globals.css: a rule here means something was
   measured wrong in a browser, not that it looked risky. The landing stylesheet
   had no RTL support at all before Arabic, so this is the base every /ar landing
   page relies on.
   ========================================================================= */
html[lang="ar"] body,
html[lang="ar"] .m-nav,
html[lang="ar"] .m-footer { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
/* Headings were NOT covered, and body/.m-nav/.m-footer alone is not enough: the
   page's own `h1,h2,h3,h4,.display` rule sets 'Plus Jakarta Sans', which has no
   Arabic glyphs, so every Arabic heading fell out of the stack above and back to
   the platform face. The pilot already covers h1-h4 (web/src/app/globals.css) —
   this is the landing half of the same rule.
   letter-spacing is reset for the reason already recorded below for the eyebrows:
   the base rule applies -0.025em, and negative tracking on a cursive script pulls
   the joins apart. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .display {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0;
}
/* Arabic has no capital forms, so uppercase is a no-op that only costs
   letter-spacing — and tracking applied to a cursive script breaks the joins. */
html[lang="ar"] .m-footer-col h4,
html[lang="ar"] .m-nav-menu-eyebrow,
html[lang="ar"] .m-nav-promo-eyebrow { text-transform: none; letter-spacing: 0; }
/* The mega menus and the language panel are absolutely positioned against a
   physical edge, which does not mirror on its own. Each rule is the MIRROR of its
   LTR counterpart, and .m-nav-menu-wide must come after .m-nav-menu: equal
   specificity, so source order decides. Measured before this: 105px of
   horizontal overflow on an Arabic page, with .m-nav-menu-wide sitting at
   left:-105 — it uses right:0 in LTR to keep a 460px menu inside the right edge,
   and under RTL the trigger moves left, so the same physical anchor pushed it off
   the left edge instead. */
[dir="rtl"] .m-nav-menu { left: auto; right: 0; }
[dir="rtl"] .m-nav-menu-wide { right: auto; left: 0; }
[dir="rtl"] .m-lang-panel { right: auto; left: 0; }
/* .m-nav-col-news divides the wide menu with a physical left border. */
[dir="rtl"] .m-nav-col-news { border-left: 0; border-right: 1px solid #E2E8F0; padding-left: 0; padding-right: 0.6rem; }
/* =========================================================================
   Mobile text-expansion safety (all locales)
   Lives here because nav.css is the only stylesheet landing/ shares; the rules
   below are defined in each home page's inline <style>, so fixing them per page
   would mean four identical edits — and /ar/index.html is generated, so it would
   drift first.

   /es/ scrolled 35px horizontally at 390px. I first recorded this as "an unclipped
   .ticker-track marquee", which was WRONG: the ticker is 3854px but sits in an
   overflow-x:hidden section and contributes nothing — / and /tr/ carry the same
   marquee at 0px. Measured properly, html.scrollWidth was 425 and exactly two
   unclipped sections were over: .how at 425 and .features at 415. Both are Spanish
   text expansion, which the quality-gate doc lists as NOT enforced anywhere
   ("text expansion / layout overflow (no golden tests)").

   1. .node-label — the last roadmap node sits at left:328 of a 350px track, and its
      label is absolutely positioned and CENTRED on it (left:-58.5 for a 153px
      label), with white-space:nowrap. "Seguimiento del Visado" therefore ran from
      272 to 425. English/Turkish labels are short enough to fit, which is why only
      Spanish showed it. Allowing a wrap is the content-preserving fix — clipping
      the section would hide the label instead. max-width is 84px because the node
      centre is at ~348 and the viewport ends at 390, so a centred box wider than
      2 × (390 − 348) escapes again.
   2. .atlas-side / .matcher-side — grid items at min-width:auto, so they cannot
      shrink below min-content and pushed .features to 415. min-width:0 is the
      standard remedy and changes nothing at widths where they already fit.
   ========================================================================= */
@media (max-width: 640px) {
  /* Scoped to Spanish at the founder's call: en/tr/ar labels fit on one line and
     keep the look they shipped with. `:lang(es)` rather than [lang="es"] so a
     regional variant (es-419, es-MX) is covered too.
     The trade-off, stated so it is not rediscovered later: this is now a
     per-locale patch, not a guard. Any FUTURE translation whose label outgrows the
     node spacing re-breaks the page, and nothing in the build will notice —
     text expansion is the one thing the quality gate explicitly does not enforce.
     Verified after scoping that en/tr/ar are still 0px WITHOUT the wrap. */
  html:lang(es) .node-label { white-space: normal; max-width: 84px; text-align: center; }
  /* Left UNSCOPED on purpose: min-width:0 has no visual effect at widths where the
     item already fits, so there is nothing to preserve for the other locales and
     no reason to let them keep the min-content overflow. */
  .atlas-side, .matcher-side { min-width: 0; }
}

/* Latin-only runs inside Arabic chrome (brand name, "50+", store badges) keep
   their own direction so digits and names do not reorder. */
html[lang="ar"] .m-footer-legal,
html[lang="ar"] .m-footer-rights { unicode-bidi: isolate; }
/* Offscreen-hiding via `left: -9999px` is direction-dependent, and the landing
   site uses it in three places: the skip link (page <style>) and the two
   lead-capture honeypots injected by capture.js / app-promo.js. In LTR nothing
   scrolls to the left of the origin, so those pages measure clean. Under RTL the
   scroll origin flips and the same 9999px becomes real scrollable width —
   measured on /ar/: documentElement.scrollWidth - clientWidth = 9999 at BOTH
   390px and 1280px, with .skip-nav and .mrd-hp sitting at left:-9999.
   Re-hide them with a clip instead, which contributes no scrollable area in
   either direction. RTL-scoped on purpose: the LTR pages are not broken and this
   must not become a site-wide restyle of a working element. Specificity (0,2,0)
   beats the (0,1,0) page rules regardless of where capture.js injects its
   <style>, which is why this does not depend on cascade order. */
[dir="rtl"] .skip-nav,
[dir="rtl"] .mrd-hp,
[dir="rtl"] .mrd-promo-hp {
  left: auto;
  right: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The skip link is the one of the three that must come BACK on keyboard focus —
   at the inline start edge, which is the right under RTL. `left: auto` is
   restated here because the page's own `.skip-nav:focus { left: 0 }` has equal
   specificity to the block above, and left:0 alongside right:0 would stretch the
   link across the whole viewport. */
[dir="rtl"] .skip-nav:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  left: auto;
  right: 0;
  border-radius: 0 0 0 8px;
}