/* ══════════════════════════════════════
   SerVme RTL Overrides
   Loaded via is_rtl() in functions.php
══════════════════════════════════════ */

/* ── ARABIC WEBFONTS ──
   Declared here so they load on every Polylang Arabic page (rtl.css is only
   enqueued when is_rtl()). NotoKufiArabic = body, ThmanyahSerifDisplay = display.
   Files already ship in the theme (also used by the standalone KSA pages). */
@font-face {
  font-family: 'NotoKufiArabic';
  src: url('../fonts/noto-kufi/NotoKufiArabic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ThmanyahSerifDisplay';
  src: url('../fonts/thmanyah-serif/thmanyahserifdisplay-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ThmanyahSerifDisplay';
  src: url('../fonts/thmanyah-serif/thmanyahserifdisplay-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ThmanyahSerifDisplay';
  src: url('../fonts/thmanyah-serif/thmanyahserifdisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ThmanyahSerifDisplay';
  src: url('../fonts/thmanyah-serif/thmanyahserifdisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ThmanyahSerifDisplay';
  src: url('../fonts/thmanyah-serif/thmanyahserifdisplay-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ── TYPOGRAPHY ── */
body,
.hp-lead,
.hp-section-sub,
.compound-intro,
.pillar-card-desc,
.oc-pillar-intro,
.oc-module-desc,
.hp-cc-b,
.hp-footer-brand-desc {
  font-family: 'NotoKufiArabic', Inter, system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.hp-h1, .hp-h2, .hp-h3,
.eyebrow,
.sm-btn,
.hp-nav-link,
.hp-footer-cols b {
  font-family: 'ThmanyahSerifDisplay', 'NotoKufiArabic', 'Cormorant Garamond', Georgia, serif;
}

/* ── ARABIC TYPE SCALE ──
   ThmanyahSerifDisplay glyphs are taller/heavier than Cormorant at the same px,
   so headings must be scaled down (~0.68x) with more generous line-height to
   match the English visual weight and stop the hero from overflowing. */
.hp-h1 {
  font-size: 52px !important;
  line-height: 1.35 !important;
}
.hp-h2 { font-size: 36px !important; line-height: 1.4 !important; }
.hp-h3 { font-size: 26px !important; line-height: 1.45 !important; }
.hp-hero-video .hp-h1 { margin-top: 8px !important; }
/* hero lead / body a touch smaller too */
.hp-lead { line-height: 1.9 !important; }

@media (max-width: 1200px) {
  .hp-h1 { font-size: 44px !important; line-height: 1.4 !important; }
}
@media (max-width: 960px) {
  .hp-h1 { font-size: 34px !important; line-height: 1.45 !important; }
  .hp-h2 { font-size: 28px !important; }
}

/* ── NAVIGATION ── */
.hp-nav-dd-menu {
  left: auto;
  right: -16px;
}
.hp-nav-dd-menu::before {
  left: auto;
  right: 30px;
}

/* ── HERO VIDEO SECTION ── */
/* Copy is the first grid child, so in RTL it sits in the RIGHT column while the
   video sits LEFT. The EN layout gives .hp-hv-copy a large padding-left (a calc
   that aligns text to the page edge when copy is on the right) and a small
   padding-right. In RTL that puts the big gap on the video side. Mirror it:
   big padding on the RIGHT (page edge), small on the LEFT (hug the video). */
.hp-hv-copy,
.hp-hero-video .hp-hv-copy {
  padding-right: max(32px, calc((100vw - 1320px) / 2 + 32px)) !important;
  padding-left: 32px !important;
}
.hp-hv-copy-inner {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.hp-hv-logo-wrap {
  right: auto;
  left: 0;
}

/* ── HERO SPLIT ── */
.hp-hero-split .hp-hero-copy {
  padding-left: 0;
  padding-right: 32px;
  border-left: none;
  border-right: 4px solid var(--servme-accent);
}

/* ── BLOCKQUOTE ── */
blockquote {
  border-left: none;
  border-right: 2px solid;
  padding-left: 0;
  padding-right: var(--space-5);
}

/* ── TEXT ALIGNMENT SWAPS ── */
.hp-ij > .hp-section-head .hp-eyebrow,
.hp-ij > .hp-section-head .hp-h2,
.sm-pillars-grid,
.hp-ij-step,
.hp-ij-stage-instant,
.hp-ij-step-label {
  text-align: right;
}
.hp-wa-bubble em {
  text-align: left;
}

/* ── MARGIN SWAPS ── */
.sm-vip {
  margin-left: 0;
  margin-right: 8px;
}
.hp-hv-play-ic i,
.hp-stat-v span {
  margin-left: 0;
  margin-right: 2px;
}
.hp-stat-v span {
  margin-right: 6px;
}
.hp-preview-label,
.hp-mock-label {
  margin-left: 0;
  margin-right: auto;
}

/* ── PADDING SWAPS ── */
.hp-ij-step-label {
  padding-left: 0;
  padding-right: 2px;
}

/* ── BORDER SWAPS ── */
.hp-ij-metric {
  border-left: none;
  border-right: 3px solid var(--servme-accent);
}

/* ── POSITIONING SWAPS ── */
.hp-nav-dd-chev {
  margin-left: 0;
  margin-right: 4px;
}
.hp-vs i {
  right: auto;
  left: 16px;
}
.hp-ij::before {
  right: auto;
  left: -200px;
}

/* ── FLEX ALIGNMENT ── */
@media (max-width: 960px) {
  .hp-hv-badges {
    justify-content: flex-end;
  }
  .hp-footer-fine {
    text-align: right !important;
  }
}

/* ── COMPARISON ── */
.hp-compare-list .hp-cc {
  direction: rtl;
}

/* ══════════════════════════════════════
   PLATFORM PAGE RTL
══════════════════════════════════════ */
.oc-feat:hover {
  padding-left: 0;
  padding-right: 20px;
}
.oc-feat .feat-icon {
  margin-left: 0;
  margin-right: 0;
}
.oc-metric {
  border-left: none;
  border-right: 3px solid var(--servme-gold);
}
.oc-pillar-tag-overlay {
  left: auto;
  right: 16px;
}
.oc-pillar-tag-overlay-bottom {
  left: auto;
  right: 14px;
}
.oc-feat-accent {
  left: auto;
  right: 0;
}

@media (max-width: 960px) {
  .oc-feat:hover {
    padding-left: 24px;
    padding-right: 24px;
  }
  #other-pillars .oc-pillar-head,
  #other-pillars .oc-pillar-title {
    text-align: right;
  }
}

/* ══════════════════════════════════════
   COMPANY PAGE RTL
══════════════════════════════════════ */
.cp-story-quote {
  border-left: none;
  border-right: 3px solid var(--servme-accent);
  padding-left: 0;
  padding-right: 24px;
}

/* ══════════════════════════════════════
   BLOG SINGLE RTL
══════════════════════════════════════ */
.blog-post-body blockquote {
  border-left: none;
  border-right: 4px solid var(--servme-accent);
  padding-left: 0;
  padding-right: 24px;
}
.blog-post-body ul,
.blog-post-body ol {
  padding-left: 0;
  padding-right: 1.5em;
}
.blog-toc-list {
  padding-left: 0;
  padding-right: 0;
}

/* ══════════════════════════════════════
   FAQ PAGE RTL
══════════════════════════════════════ */
.faq-item summary::after {
  right: auto;
  left: 0;
  margin-left: 0;
  margin-right: auto;
}

/* ══════════════════════════════════════
   PRICING PAGE RTL
══════════════════════════════════════ */
.pricing-check {
  margin-right: 0;
  margin-left: 8px;
}
.pricing-feature-list li {
  padding-left: 0;
  padding-right: 28px;
}
.pricing-feature-list li::before {
  left: auto;
  right: 0;
}

/* ══════════════════════════════════════
   RESOURCES PAGE RTL
══════════════════════════════════════ */
.resource-card-meta {
  text-align: right;
}

/* ══════════════════════════════════════
   FOOTER RTL
══════════════════════════════════════ */
.hp-footer-brand-col .hp-footer-logo {
  margin-right: 0;
}

/* ══════════════════════════════════════
   MOBILE OVERRIDES
══════════════════════════════════════ */
@media (max-width: 768px) {
  .hp-nav-links {
    text-align: right;
  }
}