/* ar.css — Arabic pages (/ar/…), loaded after main.css and the page's own sheets.
   The pages are <html lang="ar" dir="rtl">, so flex and grid already flow right
   to left. What is left for this file:
     1. Arabic typefaces. Geist and Geist Mono have no Arabic glyphs, so the
        browser falls back per character: Latin stays in Geist, Arabic is set in
        IBM Plex Sans Arabic (body) and Noto Naskh Arabic (the serif accent).
     2. No letter-spacing and no uppercase: tracking pulls the joined script
        apart, and Arabic has no case. Arabic also needs more leading.
     3. Mirroring the physical left/right rules in main.css, projects.css and
        locations.css (paddings, borders, absolute offsets, hover nudges). */

/* ── 1 · Type ─────────────────────────────────────────────────────────────── */
html[lang="ar"]{
  --font-body:'Geist','IBM Plex Sans Arabic','Segoe UI','Geeza Pro',Tahoma,sans-serif;
  --font-display:'Geist','IBM Plex Sans Arabic','Segoe UI','Geeza Pro',Tahoma,sans-serif;
  --font-mono:'Geist Mono','IBM Plex Sans Arabic',ui-monospace,Consolas,monospace;
  --font-serif:'Instrument Serif','Noto Naskh Arabic',Georgia,serif;
}
html[lang="ar"] body{line-height:1.8}
html[lang="ar"] *{letter-spacing:0 !important}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{line-height:1.35}
html[lang="ar"] .hero-serif{font-style:normal;font-weight:600;padding-right:0}
html[lang="ar"] .section-label,html[lang="ar"] .card-tag,html[lang="ar"] .archive-stats dt,
html[lang="ar"] .loc-facts dt,html[lang="ar"] .hero-masthead dt,html[lang="ar"] .hero-kicker,
html[lang="ar"] .service-cols h4,html[lang="ar"] .step-optional,html[lang="ar"] .brief-title,
html[lang="ar"] .coverage-flag,html[lang="ar"] .back-link,html[lang="ar"] .contact-clock-label{
  text-transform:none;
}
/* The mono labels are small; Arabic at that size needs a step up to stay legible. */
html[lang="ar"] .section-label,html[lang="ar"] .card-tag,html[lang="ar"] .hero-masthead dt,
html[lang="ar"] .archive-stats dt,html[lang="ar"] .loc-facts dt,html[lang="ar"] .coverage-flag,
html[lang="ar"] .step-optional{font-size:.82rem}
html[lang="ar"] .back-link{font-size:.9rem}
/* Display sizes were tuned for tightly tracked Latin; Arabic sets wider and taller. */
html[lang="ar"] .hero-headline{line-height:1.25}
html[lang="ar"] .archive-title{line-height:1.2;font-size:clamp(2.3rem,5.4vw,4.6rem)}
html[lang="ar"] .faq-item > summary h3{line-height:1.6}
/* Latin islands (brand names, numbers, URLs) inside Arabic text */
html[lang="ar"] [dir="ltr"]{unicode-bidi:isolate}
/* The technology marquee is a list of Latin product names: keep it scrolling LTR,
   the direction hero.js measures and animates. */
html[lang="ar"] .hero-marquee{direction:ltr}
/* "3+" and the language chips are Latin/numeric: keep their order */
html[lang="ar"] .stat-number,html[lang="ar"] .stat-langs{direction:ltr}

/* ── 2 · Mirroring ────────────────────────────────────────────────────────── */
html[dir="rtl"] .skip-link{left:auto;right:16px}

/* Header: the mobile menu slides in from the left edge */
@media (max-width:768px){
  html[dir="rtl"] .nav-links{
    right:auto;left:0;border-left:0;border-right:1px solid var(--border);
    transform:translateX(-100%);
  }
  html[dir="rtl"] .nav-links.nav-active{transform:translateX(0)}
}
/* main.js animates the menu items with this keyframe name; mirrored here, where
   it only ever applies to Arabic pages. */
@keyframes navLinkFade{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}

/* Hover nudges point the way the arrows do */
html[dir="rtl"] .nav-cta:hover i,html[dir="rtl"] .btn-link:hover i,html[dir="rtl"] .service-link:hover i,
html[dir="rtl"] .method-card:hover .method-arrow,html[dir="rtl"] #submit-btn:hover i{transform:translateX(-4px)}
html[dir="rtl"] .back-link:hover i{transform:translateX(4px)}
html[dir="rtl"] .work-row:hover .work-title{transform:translateX(-5px)}
/* External-link arrows: main.css turns → into ↗ with rotate(-45deg); ← needs +45deg to read ↖ */
html[dir="rtl"] .work-arrow,html[dir="rtl"] .work-grid .arrow-btn i{transform:rotate(45deg)}
html[dir="rtl"] .work-row:hover .work-arrow{transform:rotate(45deg) translateX(-3px)}
html[dir="rtl"] .gh-profile .fa-arrow-left{font-size:.65rem;transform:rotate(45deg)}

/* Hero masthead */
html[dir="rtl"] .mast-cell:first-child{padding-left:18px;padding-right:0}
html[dir="rtl"] .mast-cell + .mast-cell{border-left:0;border-right:1px solid var(--border)}
html[dir="rtl"] .status-square{margin-right:0;margin-left:10px}
@media (max-width:900px){
  html[dir="rtl"] .mast-cell:nth-child(3){padding-right:0;border-right:0}
}

/* GitHub heatmap: the grid stays LTR (see the markup); Arabic weekday labels
   need a wider first column, the table reads right to left. */
html[lang="ar"] .gh-graph{grid-template-columns:42px repeat(var(--weeks,53),var(--cell))}
html[lang="ar"] .gh-day-label,html[lang="ar"] .gh-month{font-family:var(--font-body)}
html[lang="ar"] .gh-table th,html[lang="ar"] .gh-table td{text-align:right}
html[lang="ar"] .gh-table td:last-child,html[lang="ar"] .gh-table th:last-child{text-align:left}
html[lang="ar"] .gh-tooltip{font-family:var(--font-body);direction:rtl}

/* GitHub numbers */
html[dir="rtl"] .gh-stat + .gh-stat{padding-left:0;border-left:0;padding-right:24px;border-right:1px solid var(--border)}
@media (max-width:640px){
  html[dir="rtl"] .gh-stat + .gh-stat{padding-right:0;border-right:0}
}

/* Services accordion */
html[dir="rtl"] .service::before{left:auto;right:-1px}
html[dir="rtl"] .service-toggle{padding:24px 18px 24px 4px;text-align:right}
html[dir="rtl"] .service-toggle:hover .service-title{transform:translateX(-6px)}
html[dir="rtl"] .service-desc,html[dir="rtl"] .service-cols{margin-left:0;margin-right:86px}
@media (max-width:992px){
  html[dir="rtl"] .service-desc,html[dir="rtl"] .service-cols{margin-left:0;margin-right:46px}
}

/* Project cards */
html[dir="rtl"] .work-grid .project-content h3{padding-right:0;padding-left:52px;text-align:right}
html[dir="rtl"] .work-grid .arrow-btn,
html[dir="rtl"] .work-grid .project-card .project-image + .project-content .arrow-btn{right:auto;left:22px}
@media (min-width:993px){
  html[dir="rtl"] .work-grid .project-card.bento-full .project-image,
  html[dir="rtl"] .work-grid .project-card.bento-wide .project-image{border-right:0;border-left:1px solid var(--border)}
}

/* Contact brief */
html[dir="rtl"] .brief-step legend{float:right}
html[dir="rtl"] .step-optional{margin-left:0;margin-right:auto}
html[dir="rtl"] .choice span::after{margin-left:0;margin-right:auto}
html[dir="rtl"] .file-drop-zone,html[dir="rtl"] #file-size-info{text-align:right}
html[dir="rtl"] #submit-btn{margin-left:0;margin-right:auto}
@media (max-width:640px){
  html[dir="rtl"] #submit-btn{margin-right:0}
}
html[dir="rtl"] .input-group input[type="email"]{direction:ltr;text-align:right}

/* FAQ */
html[dir="rtl"] .faq-item > summary::after{margin-left:0;margin-right:auto}
html[dir="rtl"] .faq-answer{padding:0 38px 24px 0}
@media (max-width:480px){
  html[dir="rtl"] .faq-answer{padding-right:0}
}

/* Store notice card (popup.css) sits in the bottom-left corner */
html[dir="rtl"] .store-notice{right:auto;left:20px}
html[dir="rtl"] .store-notice-body{padding-right:0;padding-left:18px}
html[dir="rtl"] .close-popup{right:auto;left:10px}
@media (max-width:480px){
  html[dir="rtl"] .store-notice{right:16px;left:16px}
}

/* Archive header and stat strip (projects.css) */
html[dir="rtl"] .archive-stats div:first-child{padding-left:28px;padding-right:0}
html[dir="rtl"] .archive-stats div + div{border-left:0;border-right:1px solid var(--border)}
@media (max-width:768px){
  html[dir="rtl"] .loc-hero .archive-stats div:first-child{padding-right:0;padding-left:14px}
}

/* ── 3 · Arabic-only blocks ───────────────────────────────────────────────── */
/* /ar/projects/ lists projects under headings instead of the English filter bar */
.archive-group + .archive-group{margin-top:72px}
.archive-group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.archive-group-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.archive-group-count{font-family:var(--font-mono);font-size:.8rem;font-weight:400;color:var(--accent);vertical-align:middle}
.archive-group-head p{color:var(--muted);font-size:.98rem;max-width:60ch}

/* Character counter "0 / 4000" is a number pair: keep its order */
html[dir="rtl"] .input-meta{direction:ltr}
/* Latin values in the facts rail (the Latin name, the stack) still align with
   the Arabic ones on the right */
html[dir="rtl"] .loc-facts dd[dir="ltr"]{text-align:right}

/* Closing notes under the Arabic archive, as one quiet card */
.archive-foot{margin-top:8px;padding:22px 26px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.archive-foot .lang-note{margin-top:0}
.archive-foot .lang-note + .lang-note{margin-top:8px}

/* "Also in English" note at the foot of a section */
.lang-note{margin-top:22px;font-size:.92rem;color:var(--muted)}
.lang-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}