/* ============================================================
   FEKRA — Direction Overrides: LTR (English) and RTL (Arabic)
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   LANG-TOGGLE — always Trox regardless of lang
   ════════════════════════════════════════════════════════════ */
html[lang="en"] .lang-toggle,
html[lang="en"] .lang-toggle * {
  font-family: 'Trox', sans-serif !important;
  font-weight: 400 !important;
}

/* ════════════════════════════════════════════════════════════
   ENGLISH (LTR) MODE — ROOT & BODY
   ════════════════════════════════════════════════════════════ */
html[lang="en"] {
  direction: ltr;
  --font-display: 'NoorBold', sans-serif;
  --font-body:    'Noor', sans-serif;
}
html[lang="en"] body {
  font-family: var(--font-body);
  direction: ltr;
  text-align: left;
}

/* ════════════════════════════════════════════════════════════
   ENGLISH — NAVIGATION
   ════════════════════════════════════════════════════════════ */
/* Underline expands from left in LTR */
html[lang="en"] .nav-link::after { transform-origin: left; }

/* ════════════════════════════════════════════════════════════
   ENGLISH — HERO ALIGNMENT
   ════════════════════════════════════════════════════════════ */
html[lang="en"] .hero-desc,
html[lang="en"] .hero-cta,
html[lang="en"] .hero-badge    { text-align: left; }

html[lang="en"] .hero-content  { text-align: left !important; align-items: flex-start !important; }
html[lang="en"] .hero-badge,
html[lang="en"] .hero-title,
html[lang="en"] .hero-sub-line,
html[lang="en"] .hero-desc     { text-align: left !important; width: 100%; }
html[lang="en"] .hero-desc     { line-height: 1.8; }

/* ════════════════════════════════════════════════════════════
   ENGLISH — PAGE HEROES
   ════════════════════════════════════════════════════════════ */
html[lang="en"] .page-hero-label,
html[lang="en"] .page-hero-title,
html[lang="en"] .page-hero-text { text-align: left; }

/* ════════════════════════════════════════════════════════════
   ENGLISH — SERVICES: reset alternating LTR
   ════════════════════════════════════════════════════════════ */
html[lang="en"] .svc-block:nth-child(even) .svc-block-inner,
html[lang="en"] .svc-block:nth-child(even) .svc-block-content,
html[lang="en"] .svc-block:nth-child(even) .svc-block-visual {
  direction: ltr;
}

/* ════════════════════════════════════════════════════════════
   ENGLISH — CONTACT
   ════════════════════════════════════════════════════════════ */
html[lang="en"] .contact-info-value { text-align: left !important; }

/* ════════════════════════════════════════════════════════════
   ENGLISH — WHITE-SPACE / WRAPPING FIXES
   ════════════════════════════════════════════════════════════ */
html[lang="en"] .page-hero-title {
  white-space: normal !important;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem) !important;
  line-height: 1.22 !important;
}
html[lang="en"] .phil-card-title  { white-space: normal !important; }
html[lang="en"] .section-title    { white-space: normal !important; }
html[lang="en"] .final-cta-title  { white-space: normal !important; }
html[lang="en"] .svc-block-title  { white-space: normal !important; }

/* ════════════════════════════════════════════════════════════
   ENGLISH — TYPOGRAPHY SYSTEM
   ════════════════════════════════════════════════════════════ */

/* Headings → NoorBold */
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
html[lang="en"] .hero-title,
html[lang="en"] .page-hero-title,
html[lang="en"] .section-title,
html[lang="en"] .final-cta-title,
html[lang="en"] .about-preview-title,
html[lang="en"] .phil-card-title,
html[lang="en"] .value-card-title,
html[lang="en"] .why-card-title,
html[lang="en"] .portfolio-mini-title,
html[lang="en"] .svc-title,
html[lang="en"] .svc-block-title,
html[lang="en"] .folder-title {
  font-family: 'NoorBold', sans-serif !important;
  font-weight: 700 !important;
}

/* Labels / eyebrows → NoorBold */
html[lang="en"] .section-tag,
html[lang="en"] .page-hero-label,
html[lang="en"] .phil-card-label,
html[lang="en"] .eyebrow,
html[lang="en"] .footer-col h4,
html[lang="en"] .contact-info-label,
html[lang="en"] .portfolio-what-label,
html[lang="en"] .folder-cat,
html[lang="en"] .loader-text {
  font-family: 'NoorBold', sans-serif !important;
  font-weight: 700 !important;
}

/* Buttons → NoorBold */
html[lang="en"] .btn {
  font-family: 'NoorBold', sans-serif !important;
  font-weight: 700 !important;
}

/* Homepage hero main title & subtitle → Trox (display font, keeps the brand) */
html[lang="en"] .hero-title,
html[lang="en"] .hero-title-sub {
  font-family: 'Trox', sans-serif !important;
  font-weight: normal !important;
}

/* Hero subtitle weight contrast inside Trox override */
html[lang="en"] .hero-title-sub {
  font-family: 'Noor', sans-serif !important;
  font-weight: 300 !important;
}

/* Body / descriptive text → Noor Regular */
html[lang="en"] body,
html[lang="en"] p,
html[lang="en"] a,
html[lang="en"] li,
html[lang="en"] .nav-link,
html[lang="en"] .hero-desc,
html[lang="en"] .section-desc,
html[lang="en"] .about-preview-text,
html[lang="en"] .page-hero-text,
html[lang="en"] .svc-subtitle,
html[lang="en"] .why-card-text,
html[lang="en"] .value-card-text,
html[lang="en"] .final-cta-sub,
html[lang="en"] .svc-block-text,
html[lang="en"] .footer-brand p,
html[lang="en"] .footer-brand .footer-address,
html[lang="en"] .footer-col a,
html[lang="en"] .contact-info-value,
html[lang="en"] .social-link,
html[lang="en"] .service-tag,
html[lang="en"] .marquee-group span {
  font-family: 'Noor', sans-serif !important;
  font-weight: 400 !important;
}

/* ════════════════════════════════════════════════════════════
   ENGLISH — PORTFOLIO FOLDER CARD MIRRORING
   Arabic: tab on RIGHT (margin-left:auto in RTL layout)
   English: tab on LEFT (natural LTR start, remove auto margin)
   ════════════════════════════════════════════════════════════ */
html[lang="en"] .folder-tab {
  margin-left: 0 !important;
}
/* Flat corner moves to top-left where tab now sits */
html[lang="en"] .folder-body {
  border-radius: 0 28px 28px 28px !important;
}
html[lang="en"] .folder-back {
  border-radius: 0 28px 28px 28px !important;
}
/* Text overlay: LTR and left-aligned */
html[lang="en"] .folder-info,
html[lang="en"] .folder-cat,
html[lang="en"] .folder-title {
  direction: ltr !important;
  text-align: left !important;
}

/* ════════════════════════════════════════════════════════════
   ENGLISH — PORTFOLIO MODAL CLOSE: move to right side
   ════════════════════════════════════════════════════════════ */
html[lang="en"] .pf-modal-close,
html[lang="en"] .portfolio-modal-close,
html[lang="en"] .modal-close,
html[lang="en"] .project-modal-close {
  left: auto !important;
  right: 20px !important;
}

/* ════════════════════════════════════════════════════════════
   ENGLISH — RESPONSIVE OVERRIDES (inside darkmode to keep context)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html[lang="en"] .svc-block:nth-child(even) .svc-block-inner { direction: ltr; }
  html[lang="en"] .page-hero-title {
    font-size: 40px !important;
    line-height: 1.02 !important;
    letter-spacing: -1px !important;
    margin-bottom: 24px !important;
  }
  html[lang="en"] .hero-title,
  html[lang="en"] .hero-title-sub {
    font-size: clamp(2.6rem, 10vw, 3.8rem) !important;
    line-height: .95 !important;
    letter-spacing: .5px !important;
  }
  html[lang="en"] .hero-title  { font-size: 35px !important; line-height: 1.3 !important; letter-spacing: -1px !important; }
  html[lang="en"] .hero-title-sub { font-size: 35px !important; line-height: 1.3 !important; }
  html[lang="en"] .hero-sub-line  { font-size: 18px !important; }
  html[lang="en"] .about-hero .page-hero-title {
    font-size: 40px !important;
    line-height: 1.02 !important;
    letter-spacing: -1px !important;
    margin-bottom: 24px !important;
  }
}
@media (max-width: 430px) {
  html[lang="en"] .hero-title,
  html[lang="en"] .hero-title-sub { font-size: 2.9rem !important; }
}

/* ════════════════════════════════════════════════════════════
   ARABIC RTL — Letter-spacing reset
   Arabic is a connected script; letter-spacing breaks glyph joins.
   ════════════════════════════════════════════════════════════ */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .section-tag,
html[dir="rtl"] .page-hero-label,
html[dir="rtl"] .section-title,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .hero-title-sub,
html[dir="rtl"] .hero-badge,
html[dir="rtl"] .page-hero-title,
html[dir="rtl"] .about-preview-title,
html[dir="rtl"] .final-cta-title,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .btn,
html[dir="rtl"] .loader-text {
  letter-spacing: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   iOS Safari Arabic text rendering fix
   ════════════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {
  html[dir="rtl"],
  html[dir="rtl"] body,
  html[dir="rtl"] * {
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased;
    font-kerning: normal;
  }
  html[dir="rtl"] h1,
  html[dir="rtl"] h2,
  html[dir="rtl"] h3,
  html[dir="rtl"] h4,
  html[dir="rtl"] h5,
  html[dir="rtl"] h6,
  html[dir="rtl"] p,
  html[dir="rtl"] a,
  html[dir="rtl"] span,
  html[dir="rtl"] li,
  html[dir="rtl"] button {
    letter-spacing: 0 !important;
  }
  html[dir="rtl"] .eyebrow,
  html[dir="rtl"] .section-title,
  html[dir="rtl"] .hero-title,
  html[dir="rtl"] .inner-hero-title,
  html[dir="rtl"] .nav-link,
  html[dir="rtl"] .footer-link,
  html[dir="rtl"] .btn {
    letter-spacing: 0 !important;
  }
  html[lang="ar"] .service-card-title,
  html[lang="ar"] .service-title {
    line-height: 1.45 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}