/* ════════════════════════════════════════════════════════════════════════
   AR.CSS — Arabic / RTL layer
   Linked LAST on every *-ar.html page, after that page's own stylesheet.

   dir="rtl" on <html> already flips flexbox, grid, text alignment and text
   direction, so this file only has to do two things:
     1. Swap in the Arabic font stacks
     2. Mirror the handful of rules that pin a physical side (left/right,
        directional padding/borders, translateX offsets, ← arrows)
   ════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════
   1. TYPOGRAPHY
   Arabic families sit SECOND in each stack on purpose. The browser resolves
   fonts per glyph, so Latin characters (jersey numbers, "Al Riffa SC",
   "+974", "2025/26") keep rendering in Bebas/Barlow exactly as on the
   English side, and only Arabic glyphs fall through to Noto Kufi / Tajawal.
   ══════════════════════════════════════════════════ */

/* Arabic is a cursive script: letters join into words, and any letter-spacing
   value prises those joins apart. WebKit (iOS Safari) is the harshest about it
   — tracked-out Arabic comes out as a row of isolated, unjoined letterforms —
   but every engine spaces the text wrongly. The English stylesheets track out
   almost every eyebrow, badge, heading and button, so instead of mirroring
   that list class by class (which kept missing new ones), the whole RTL page
   resets to normal.

   `*:not([lang="en"])` does two jobs: it carries enough specificity (0,2,0) to
   beat the page stylesheets' own rules, including the ones inside their mobile
   media queries, and it leaves runs explicitly tagged lang="en" — the Latin
   side of the language switcher — free to keep their tracking. */
[dir="rtl"] *:not([lang="en"]),
[dir="rtl"] *:not([lang="en"])::before,
[dir="rtl"] *:not([lang="en"])::after {
  letter-spacing: normal;
}

[dir="rtl"] body,
[dir="rtl"] .field-input {
  font-family: 'Barlow', 'Tajawal', sans-serif;
}

/* Display / heading faces — Bebas Neue first, Noto Kufi Arabic behind it */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .nav-club-name,
[dir="rtl"] .footer-club,
[dir="rtl"] .hero-title,
[dir="rtl"] .section-title,
[dir="rtl"] .section-heading,
[dir="rtl"] .hero-club-name,
[dir="rtl"] .hero-name-line1,
[dir="rtl"] .hero-name-line2,
[dir="rtl"] .hero-stat-num,
[dir="rtl"] .squad-section-heading h2,
[dir="rtl"] .panel-heading,
[dir="rtl"] .form-title,
[dir="rtl"] .success-title,
[dir="rtl"] .article-title,
[dir="rtl"] .timeline-card-title,
[dir="rtl"] .identity-title,
[dir="rtl"] .mgmt-name,
[dir="rtl"] .coach-name,
[dir="rtl"] .player-name,
[dir="rtl"] .modal-name,
[dir="rtl"] .squad-loading-text,
[dir="rtl"] .card-loading-text,
[dir="rtl"] .news-card-title {
  font-family: 'Bebas Neue', 'Noto Kufi Arabic', sans-serif;
}

/* Condensed UI faces — labels, nav, buttons, tags */
[dir="rtl"] .nav-links a,
[dir="rtl"] .nav-cta,
[dir="rtl"] .section-label,
[dir="rtl"] .section-eyebrow,
[dir="rtl"] .hero-eyebrow,
[dir="rtl"] .hero-cta,
[dir="rtl"] .hero-stat-lbl,
[dir="rtl"] .hero-tagline,
[dir="rtl"] .hero-founded-badge,
[dir="rtl"] .hero-scroll-cue,
[dir="rtl"] .page-header-eyebrow,
[dir="rtl"] .squad-section-heading .label,
[dir="rtl"] .phil-pillar span,
[dir="rtl"] .value-item strong,
[dir="rtl"] .live-badge,
[dir="rtl"] .coach-click-hint,
[dir="rtl"] .coach-nationality,
[dir="rtl"] .modal-pos,
[dir="rtl"] .match-competition,
[dir="rtl"] .match-team-name,
[dir="rtl"] .match-info-label,
[dir="rtl"] .countdown-label,
[dir="rtl"] .league-table th,
[dir="rtl"] .news-tag,
[dir="rtl"] .news-date,
[dir="rtl"] .article-tag,
[dir="rtl"] .article-date,
[dir="rtl"] .article-back,
[dir="rtl"] .timeline-card-tag,
[dir="rtl"] .identity-label,
[dir="rtl"] .value-num,
[dir="rtl"] .mgmt-role-badge,
[dir="rtl"] .filter-btn,
[dir="rtl"] .position-group-label,
[dir="rtl"] .coach-role-badge,
[dir="rtl"] .player-position,
[dir="rtl"] .player-pos-overlay,
[dir="rtl"] .modal-badge,
[dir="rtl"] .modal-detail-label,
[dir="rtl"] .field-label,
[dir="rtl"] .form-eyebrow,
[dir="rtl"] .success-eyebrow,
[dir="rtl"] .submit-btn,
[dir="rtl"] .contact-card-label,
[dir="rtl"] .perk span {
  font-family: 'Barlow Condensed', 'Tajawal', sans-serif;
}

/* Line-height gets a little room for Arabic's taller ascenders/descenders. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .hero-title,
[dir="rtl"] .section-title,
[dir="rtl"] .section-heading,
[dir="rtl"] .panel-heading,
[dir="rtl"] .form-title,
[dir="rtl"] .success-title,
[dir="rtl"] .article-title,
[dir="rtl"] .news-card-title {
  line-height: 1.35;
}
/* The club page's name block — "نادي الرفاع" over "الرياضي" — is two display lines in a
   flex column, which club.css sets at line-height 0.9: Bebas is all-caps with nothing
   below the baseline, so the Latin lines can sit that tight. Noto Kufi's final ي drops a
   long tail well past the line box, and a ratio can't fix that, because the ink reaches
   below whatever height the ratio computes — at 1.35 above, the tail still landed on top
   of the second line.

   So: let the font's own metrics size the line box rather than a number chosen for Latin,
   and reserve descender room that scales with the type, since the first line is clamped
   between 3rem and 9rem depending on the viewport. */
[dir="rtl"] .hero-club-name {
  line-height: normal;
}
[dir="rtl"] .hero-name-line1 {
  padding-bottom: 0.18em;
}

/* The hero headline is two big display lines. 1.35 is right for body-sized headings but
   makes it tall enough to overflow the hero on a short laptop screen, where the top line
   gets clipped by the nav — so it gets its own tighter figure. */
[dir="rtl"] .hero-title {
  line-height: 1.15;
}
[dir="rtl"] .article-body p,
[dir="rtl"] .article-lead,
[dir="rtl"] .timeline-card-body,
[dir="rtl"] .identity-body,
[dir="rtl"] .section-sub,
[dir="rtl"] .coach-bio {
  line-height: 1.95;
}

/* Latin-only runs inside an Arabic page (the +974 prefix, the email echoed back
   on the success screen, the contact channels) must not be re-ordered by the
   bidi algorithm. */
[dir="rtl"] .phone-prefix,
[dir="rtl"] .success-name,
[dir="rtl"] .contact-card-value {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The nav's club name is the full "نادي الرفاع الرياضي" in Arabic — longer than the
   English "Al Riffa SC" the English sizes were tuned for. Without this it wraps onto a
   second line below 360px wide, and the nav bar's fixed mobile height doesn't grow to
   fit that, so the wrapped line spills under the fixed nav and over the hero. Checked
   down to 320px (iPhone SE): nowrap alone is enough at every width, no smaller than the
   English sizes already go. */
[dir="rtl"] .nav-club-name {
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════
   2. LANGUAGE SWITCHER
   Each option is written in its own language, so "English" needs the Latin face
   while "العربية" needs the Arabic one — the lang attribute on each row decides.
   ══════════════════════════════════════════════════ */

[dir="rtl"] .nav-lang-opt[lang="en"] {
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 1.5px;
}
[dir="rtl"] .nav-lang-opt[lang="ar"] {
  font-family: 'Tajawal', 'Barlow Condensed', sans-serif;
}


/* ══════════════════════════════════════════════════
   3. MIRRORED LAYOUT — styles.css (home, news, article)
   ══════════════════════════════════════════════════ */

/* Hero crest watermark: pinned to the right on LTR → left on RTL */
[dir="rtl"] .hero-logo-watermark {
  right: auto;
  left: 4rem;
}

/* The hero wash is heaviest behind the headline. That headline sits on the right in
   Arabic, so the horizontal gradient runs the other way; the vertical one is unchanged. */
[dir="rtl"] .hero-overlay {
  background:
    linear-gradient(
      to left,
      rgba(8,42,43,0.88) 0%,
      rgba(8,42,43,0.62) 32%,
      rgba(8,42,43,0.22) 62%,
      rgba(8,42,43,0.05) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(8,42,43,0.35) 0%,
      rgba(8,42,43,0.10) 35%,
      rgba(8,42,43,0.25) 72%,
      rgba(8,42,43,0.55) 100%
    );
}

/* League table: the club-name column is the only left-aligned one */
[dir="rtl"] .league-table th:nth-child(2),
[dir="rtl"] .league-table td:nth-child(2) {
  text-align: right;
}
/* Accent bar marking the Al Riffa row */
[dir="rtl"] .league-table tr.alriffa td:first-child {
  border-left: none;
  border-right: 3px solid var(--primary);
}


/* ══════════════════════════════════════════════════
   4. MIRRORED LAYOUT — news.css / article.css
   ══════════════════════════════════════════════════ */

[dir="rtl"] .page-banner-watermark {
  right: auto;
  left: 3rem;
}

/* Pull-quote accent bar + its rounded corners */
[dir="rtl"] .article-quote {
  border-left: none;
  border-right: 3px solid var(--primary);
  border-radius: 4px 0 0 4px;
}

/* "Back to News" arrow must point the other way */
[dir="rtl"] .article-back::before {
  content: '→';
}


/* ══════════════════════════════════════════════════
   5. MIRRORED LAYOUT — club.css
   ══════════════════════════════════════════════════ */

/* Decorative hero corner brackets: top-left ↔ top-right, bottom-right ↔ bottom-left */
[dir="rtl"] .hero-corner--tl {
  left: auto;
  right: 3rem;
  border-width: 2px 2px 0 0;
}
[dir="rtl"] .hero-corner--br {
  right: auto;
  left: 3rem;
  border-width: 0 0 2px 2px;
}

/* Timeline — the spine stays centred, but each card's side and its slide-in
   direction have to swap so "left" cards sit on the right in RTL. */
[dir="rtl"] .timeline-item {
  padding-right: 0;
  padding-left: calc(50% + 2.5rem);
  transform: translateX(30px);
}
[dir="rtl"] .timeline-item[data-side="right"] {
  padding-left: 0;
  padding-right: calc(50% + 2.5rem);
  transform: translateX(-30px);
}
[dir="rtl"] .timeline-item.visible {
  transform: translateX(0);
}

/* Timeline below 900px — the spine moves to the edge and every card lines up
   beside it, so the whole stack flips to the right edge. */
@media (max-width: 900px) {
  [dir="rtl"] .timeline::before {
    left: auto;
    right: 1rem;
  }
  [dir="rtl"] .timeline-item,
  [dir="rtl"] .timeline-item[data-side="right"] {
    padding-left: 0;
    padding-right: 3rem;
    transform: translateX(20px);
  }
  [dir="rtl"] .timeline-item[data-side="right"] {
    transform: translateX(-20px);
  }
  [dir="rtl"] .timeline-item.visible {
    transform: translateX(0);
  }
  [dir="rtl"] .timeline-node {
    left: auto;
    right: 1rem;
  }
}


/* ══════════════════════════════════════════════════
   6. MIRRORED LAYOUT — squad.css
   ══════════════════════════════════════════════════ */

/* Giant page-header watermark — Latin "SQUAD" becomes Arabic, and moves side */
[dir="rtl"] .page-header::before {
  content: 'الرفاع';
  right: auto;
  left: 2rem;
  font-family: 'Noto Kufi Arabic', sans-serif;
}

/* Oversized shirt number behind the coach portrait */
[dir="rtl"] .coach-number {
  left: auto;
  right: 1rem;
}

/* Shirt-number chip on each player card */
[dir="rtl"] .player-number-overlay {
  left: auto;
  right: 0.7rem;
  border-left: none;
  border-right: 2px solid rgba(255,255,255,0.4);
}

/* Modal: watermark number and the close button */
[dir="rtl"] .modal-number-bg {
  left: auto;
  right: 0.5rem;
}
[dir="rtl"] .modal-close {
  right: auto;
  left: 1rem;
}

@media (max-width: 768px) {
  [dir="rtl"] .page-header::before {
    right: auto;
    left: 0.5rem;
  }
}


/* ══════════════════════════════════════════════════
   7. MIRRORED LAYOUT — membership.css
   ══════════════════════════════════════════════════ */

/* Divider between the branding panel and the form panel */
[dir="rtl"] .right-panel {
  border-left: none;
  border-right: 1px solid var(--border);
}

/* Field icons move to the leading (right) edge of the input */
[dir="rtl"] .field-group:not(#group-phone) .field-icon {
  left: auto;
  right: 1rem;
}
[dir="rtl"] .field-group:not(#group-phone) .field-input {
  padding-left: 1rem;
  padding-right: 2.8rem;
}

/* The phone field deliberately stays left-to-right. "+974 00000000" is a single
   LTR unit, and mirroring it strands the prefix on the opposite side of the box
   from the digits being typed. Everything outside the input wrap — the label and
   the hint below it — still reads right-to-left. */
[dir="rtl"] #group-phone .field-input-wrap {
  direction: ltr;
}

/* Directional arrows: the submit arrow and the "back to homepage" chevron */
[dir="rtl"] .submit-btn-arrow,
[dir="rtl"] .success-back-btn svg {
  transform: scaleX(-1);
}
[dir="rtl"] .submit-btn:hover .submit-btn-arrow {
  transform: scaleX(-1) translateX(4px);
}
[dir="rtl"] .success-back-btn:hover {
  transform: translateX(3px);
}

/* Panel entry animations slide in from the opposite edge */
@keyframes slideInLeftRTL {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRightRTL {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
[dir="rtl"] .left-panel {
  animation-name: slideInLeftRTL;
}
[dir="rtl"] .right-panel {
  animation-name: slideInRightRTL;
}

@media (max-width: 900px) {
  /* Stacked layout — the divider becomes a top border in both directions */
  [dir="rtl"] .right-panel {
    border-right: none;
    border-top: 1px solid var(--border);
  }
}