/* ============================================================
   shiftii — Responsive + i18n layer
   Mobile-first overrides on top of colors_and_type.css.
   Drives grids/typography via CSS variables so inline styles
   in our JSX components can read them with var(--...).
   ------------------------------------------------------------ */

/* Arabic webfont is loaded via next/font (Thmanyah Sans, all 5 weights) —
   see apps/web/lib/fonts.ts. Exposed here as var(--font-thmanyah). */

:root {
  /* Layout grids (default = desktop) */
  --col-3:        repeat(3, 1fr);
  --col-2:        repeat(2, 1fr);
  --col-hero:     1.05fr 1fr;
  --col-cta:      1.4fr 1fr;
  --col-footer:   1.4fr repeat(4, 1fr);
  --col-quote-h:  1fr 1.4fr;
  --col-benefits: 1.25fr 1fr 1fr;
  --col-stats:    repeat(4, 1fr);
  --col-schedule: 160px repeat(7, 1fr);
  --col-beforeafter: 1fr 1fr;

  /* Type scale (responsive) */
  --hero-size:    76px;
  --hero-center-size: 84px;
  --h2-size:      52px;
  --h2-md-size:   44px;
  --h3-size:      32px;
  --h3-sm-size:   28px;
  --step-num:     64px;
  --cta-size:     56px;

  /* Section rhythm */
  --section-py:   120px;
  --section-py-tight: 100px;
  --section-px:   32px;

  /* Page container widths */
  --container-max: 1200px;
  --nav-max:       1280px;
  --cta-max:       1100px;

  /* Element tweaks */
  --hero-rotate:  -0.6deg;
  --gap-cards:    20px;
  --gap-grid:     24px;
}

/* ---- Tablet (≤ 1024px) ------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --col-3:        repeat(2, 1fr);
    --col-benefits: 1fr 1fr;
    --col-stats:    repeat(2, 1fr);
    --col-footer:   1.4fr repeat(2, 1fr);
    --col-quote-h:  1fr;
    --hero-size:    56px;
    --hero-center-size: 60px;
    --h2-size:      42px;
    --h2-md-size:   36px;
    --section-py:   88px;
    --section-py-tight: 80px;
  }
}

/* ---- Mobile (≤ 720px) -------------------------------------- */
@media (max-width: 720px) {
  :root {
    --col-3:        1fr;
    --col-2:        1fr;
    --col-hero:     1fr;
    --col-cta:      1fr;
    --col-footer:   1fr 1fr;
    --col-quote-h:  1fr;
    --col-benefits: 1fr;
    --col-stats:    repeat(2, 1fr);
    --col-schedule: 92px repeat(7, 56px);
    --col-beforeafter: 1fr;

    --hero-size:    40px;
    --hero-center-size: 44px;
    --h2-size:      32px;
    --h2-md-size:   28px;
    --h3-size:      26px;
    --h3-sm-size:   24px;
    --step-num:     44px;
    --cta-size:     34px;

    --section-py:   64px;
    --section-py-tight: 56px;
    --section-px:   20px;

    --hero-rotate:  0deg;
    --gap-cards:    16px;
    --gap-grid:     16px;
  }

  h1 { font-size: var(--hero-size) !important; }

  /* Schedule grid scrolls horizontally on mobile so blocks stay legible */
  .schedule-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .schedule-scroller > * { min-width: 720px; }

  /* CTA buttons stack and stretch */
  .hero-cta-row { flex-direction: column !important; align-items: stretch !important; }
  .hero-cta-row > button { justify-content: center !important; width: 100% !important; }

  /* Nav: hide center links on mobile, show compact actions */
  .nav-links { display: none !important; }
  .nav-actions .sign-in { display: none !important; }
  .nav-inner { gap: 12px !important; padding-left: 16px !important; padding-right: 16px !important; }

  /* Hero card scales down */
  .hero-card { transform: none !important; padding: 18px !important; }

  /* CTA panel padding */
  .cta-panel { padding: 40px 28px !important; }

  /* Footer compact */
  .footer-bottom { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
}

/* ---- Very small (≤ 420px) ---------------------------------- */
@media (max-width: 420px) {
  :root {
    --col-stats:    1fr;
    --col-footer:   1fr;
    --hero-size:    34px;
    --hero-center-size: 38px;
    --h2-size:      28px;
    --section-px:   16px;
  }
}

/* ============================================================
   RTL (Arabic) treatments
   IBM Plex Arabic primary. The whole pass below is about Arabic
   typography quality — not just direction flipping.
   ------------------------------------------------------------ */

html[dir="rtl"] {
  --font-display: var(--font-thmanyah), system-ui, sans-serif;
  --font-sans:    var(--font-thmanyah), system-ui, sans-serif;
  --font-mono:    var(--font-thmanyah), ui-monospace, monospace;
}

html[dir="rtl"] body {
  font-feature-settings: "kern", "liga", "calt", "locl";
  font-size: 16px;
  line-height: 1.75; /* Arabic reads better with more line height */
  -webkit-font-smoothing: antialiased;
}

/* Headings: zero negative tracking (kills the diacritic clipping that
   western tight-tracked headlines cause in Arabic), softer weight
   distribution, slightly looser leading. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] blockquote {
  letter-spacing: 0 !important;
  font-weight: 600;
}
html[dir="rtl"] h1 { line-height: 1.25 !important; }
html[dir="rtl"] h2 { line-height: 1.3 !important; }
html[dir="rtl"] h3 { line-height: 1.35 !important; }
html[dir="rtl"] h4 { line-height: 1.4 !important; }
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] blockquote { line-height: 1.85 !important; }

/* Western numerals stay LTR — keeps "6.4 hr" / "1,200+" readable
   inside Arabic copy without manual unicode tricks. */
html[dir="rtl"] .num,
html[dir="rtl"] [data-num] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Flip the arrow-right icon to point left in RTL */
html[dir="rtl"] .icon-arrow-right { transform: scaleX(-1); }

/* Avatar stack overlap direction */
html[dir="rtl"] .avatar-stack > div + div {
  margin-right: -8px !important;
  margin-left: 0 !important;
}

/* Drop the playful hero-card tilt — looks unprofessional with Arabic. */
html[dir="rtl"] .hero-card { transform: none !important; }

/* Drop the brand-mark dot that sits awkwardly after "shiftii" in Arabic */
html[dir="rtl"] .brand-dot { display: none; }

/* Decorative open-quote glyph — use proper right-double-quotation-mark for RTL */
html[dir="rtl"] .quote-mark { transform: none; }
html[dir="rtl"] .quote-mark::before { content: "\201D"; }

/* Bullet list ticks: nudge the tick to the inline-end gap properly */
html[dir="rtl"] .tick-row { gap: 10px; }

/* Stat dividers: in LTR each cell has border-left; in RTL it should be border-right */
html[dir="rtl"] .stat-cell {
  border-left: none !important;
  border-right: 1px solid var(--border);
  padding-left: 0 !important;
  padding-right: 20px;
}
html[dir="rtl"] .stat-cell:first-child {
  border-right: none !important;
  padding-right: 0 !important;
}

/* Section headers stay centered (typographic convention works for both
   scripts), but body cards align text to the start — which is right in RTL. */
html[dir="rtl"] .text-start { text-align: right; }

/* Eyebrow letter-spacing: Arabic uppercase letterforms are the same as
   lowercase, so the 0.14em tracking from LTR looks broken — reset it. */
html[dir="rtl"] .eyebrow {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  font-size: 13px;
}

/* Schedule grid: day-of-week labels are short in Arabic so they read fine,
   but center them and bump the size a hair. */
html[dir="rtl"] .schedule-day { font-size: 12px; font-weight: 500; }

/* Quotes in figure cards — looser leading specifically inside cards */
html[dir="rtl"] blockquote { font-weight: 500; }