/* ============================================================
   The Consultants MEA — Live Site Overrides v1.0
   Drop-in stylesheet that aligns theconsultantsmea.com to
   the locked brand foundation. Load AFTER the inline <style>
   block in each page, e.g.:

     <link rel="stylesheet" href="/assets/css/tcmea-tokens.css">
     <link rel="stylesheet" href="/assets/css/tcmea-overrides.css">

   This file:
     1. Re-binds the legacy CSS variables (--white, --bg, --orange,
        --navy, --text, --mid, --light, --line, --bg2, --orange2,
        --navy2) to new brand tokens — this alone shifts ~80% of
        the visual layer because the site already uses vars.
     2. Swaps the display font from Syne to Fraunces, and the
        Arabic body from Noto Kufi Arabic to Readex Pro.
     3. Refines specific patterns that needed more than a variable
        swap (eyebrow line, hero span color, dark surface contrast,
        input focus, stat color, page header, etc.).

   Covers index.html, cases.html, articles.html, admin/index.html,
   404.shtml — every page that uses the site's CSS variables.
   ============================================================ */

/* ------------------------------------------------------------
   1. RE-BIND LEGACY SITE VARIABLES → BRAND TOKENS
   ------------------------------------------------------------ */
:root {
  /* Surfaces */
  --white:    var(--tc-paper);        /* #FFFFFF */
  --bg:       var(--tc-bone);         /* #F4F2EE — was #F7F5F2 */
  --bg2:      var(--tc-sand);         /* #D4C8B5 — was #EFECE8 */
  --line:     var(--tc-line);         /* #E5E0DA — was #E2DDD8 */

  /* Brand orange + deeper hover */
  --orange:   var(--tc-orange);       /* #DC6B1D — unchanged */
  --orange2:  #C25A12;                /* Deeper hover — was #F0874A (too bright) */

  /* Dark surface: charcoal replaces navy */
  --navy:     var(--tc-charcoal);     /* #1A1A1A — was #0E1F3D */
  --navy2:    var(--tc-graphite);     /* #3D3D3A — was #1A3260 */

  /* Text scale: neutral graphite/stone */
  --text:     var(--tc-charcoal);     /* #1A1A1A — was #1A1410 */
  --mid:      var(--tc-graphite);     /* #3D3D3A — was #6B5B52 */
  --light:    var(--tc-stone);        /* #7A7873 — was #9C8B82 */
}

/* ------------------------------------------------------------
   2. GLOBAL BODY + ARABIC
   ------------------------------------------------------------ */
body {
  font-family: var(--tc-font-body);
  line-height: var(--tc-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[lang="ar"] body { font-family: var(--tc-font-arabic); }


/* ------------------------------------------------------------
   3. SWAP DISPLAY FONT — Syne → Fraunces
   ------------------------------------------------------------ */

/* Display tier: hero, section heads, modal titles, etc. */
.nav-logo-fallback,
.hero-h1,
.sec-h,
.srv-modal-title,
.case-t,
.case-title,
.svc-title,
.ins-title,
.why-t,
.t-name,
.page-h,
.modal-title,
.art-title {
  font-family: var(--tc-font-display);
  font-weight: var(--tc-fw-medium);
  letter-spacing: var(--tc-tracking-h);
  font-variation-settings: 'opsz' 9;
}

/* Hero headline — mid-display tier, slightly more expression */
.hero-h1 {
  font-variation-settings: 'opsz' 36;
  font-weight: var(--tc-fw-regular);
}

/* Page header on cases/articles is heroic; mid-display tier */
.page-h {
  font-variation-settings: 'opsz' 36;
  font-weight: var(--tc-fw-medium);
}

/* Numerical accents: Fraunces semibold, text-tier opsz */
.metric-val,
.stat-n,
.case-num,
.modal-stat-n,
.srv-modal-body h4,
.modal-body h3,
.t-avatar,
.ft-logo-fallback {
  font-family: var(--tc-font-display);
  font-weight: var(--tc-fw-semibold);
  font-variation-settings: 'opsz' 9;
}

/* Micro UI labels stay sans-serif (Inter) */
.p-num,
.why-n,
.t-role,
.eyebrow,
.dc-label,
.hero-chip,
.case-pill,
.modal-pill,
.ins-badge,
.art-badge,
.modal-badge,
.c-label,
.f-grp label,
.f-sub,
.page-eyebrow,
.metric-lbl,
.stat-l,
.modal-stat-l {
  font-family: var(--tc-font-body);
}

/* ------------------------------------------------------------
   4. RTL — Arabic
   When html[lang="ar"] is set, display swaps to Readex Pro.
   ------------------------------------------------------------ */
html[lang="ar"] .hero-h1,
html[lang="ar"] .sec-h,
html[lang="ar"] .svc-title,
html[lang="ar"] .case-t,
html[lang="ar"] .case-title,
html[lang="ar"] .ins-title,
html[lang="ar"] .why-t,
html[lang="ar"] .t-name,
html[lang="ar"] .srv-modal-title,
html[lang="ar"] .modal-title,
html[lang="ar"] .page-h,
html[lang="ar"] .art-title,
html[lang="ar"] .nav-logo-fallback,
html[lang="ar"] .metric-val,
html[lang="ar"] .stat-n,
html[lang="ar"] .case-num,
html[lang="ar"] .modal-stat-n,
html[lang="ar"] .srv-modal-body h4,
html[lang="ar"] .modal-body h3,
html[lang="ar"] .t-avatar,
html[lang="ar"] .ft-logo-fallback {
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-weight: var(--tc-fw-bold);
  letter-spacing: 0;
  font-variation-settings: normal;
}

/* ------------------------------------------------------------
   5. HERO REFINEMENTS (index.html)
   Headline color → charcoal (not navy); inner <span> → italic
   charcoal (not orange). Orange stays reserved for accent moments.
   ------------------------------------------------------------ */
.hero-h1 {
  color: var(--tc-text);
}
.hero-h1 span {
  color: var(--tc-text);
  font-style: italic;
  font-weight: var(--tc-fw-regular);
}

.hero-sub {
  font-size: var(--tc-fs-lede);
  color: var(--tc-text-2);
  line-height: var(--tc-lh-body);
}

/* Hero dashboard surface — charcoal, not navy */
.hero-right { background: var(--tc-charcoal); }

/* ------------------------------------------------------------
   6. SECTION HEADERS
   ------------------------------------------------------------ */
.sec-h { color: var(--tc-text); }
.sec-p {
  color: var(--tc-text-2);
  font-size: var(--tc-fs-body);
  line-height: var(--tc-lh-body);
}

/* ------------------------------------------------------------
   7. DARK SECTIONS (#whyus, footer, hero-right, page-header dark)
   Bump white-on-dark contrast (was 0.45 — too low).
   ------------------------------------------------------------ */
#whyus .sec-p,
.why-d,
.ft-copy,
.dc-bar-name {
  color: rgba(255,255,255,0.72);
}

#whyus .why-card {
  background: var(--tc-charcoal);
  border-color: rgba(255,255,255,0.06);
}
#whyus .why-card:hover {
  background: var(--tc-graphite);
}

#whyus .why-t { color: var(--tc-paper); }
#whyus .sec-h { color: var(--tc-paper); }

/* Avatar — charcoal */
.t-avatar { background: var(--tc-charcoal); }

/* Footer */
footer { background: var(--tc-charcoal); }

/* cases.html .page-header sits on charcoal (after var rebind). Its .page-sub
   uses rgba(255,255,255,0.55) which is too low. Bump only when followed by
   .cases-wrap (cases.html structure), not articles.html (.filters/.articles-wrap). */
body:has(> .cases-wrap) .page-sub { color: rgba(255,255,255,0.72); }

/* ------------------------------------------------------------
   8. SERVICES CARDS — accent surface alignment
   ------------------------------------------------------------ */
.svc-icon-box,
.srv-modal-icon {
  background: var(--tc-accent-bg);
  border: 1px solid var(--tc-accent-bd);
}

/* ------------------------------------------------------------
   9. CASE STUDY ROWS
   ------------------------------------------------------------ */
.case-row:hover { background: var(--tc-bg); }

/* ------------------------------------------------------------
   10. NAV
   ------------------------------------------------------------ */
nav {
  background: rgba(255,255,255,0.94);
  border-bottom-color: var(--tc-line);
}
.nav-cta {
  font-weight: var(--tc-fw-semibold);
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   11. FORM — neutral focus (was orange)
   ------------------------------------------------------------ */
.f-grp input,
.f-grp textarea,
.f-grp select {
  background: var(--tc-paper);
  border-color: var(--tc-line);
  color: var(--tc-text);
  font-family: var(--tc-font-body);
}
.f-grp input:focus,
.f-grp textarea:focus,
.f-grp select:focus {
  border-color: var(--tc-text);
  background: var(--tc-paper);
}

/* ------------------------------------------------------------
   12. STATISTICS — numbers charcoal, not orange
   ------------------------------------------------------------ */
.stat-n {
  color: var(--tc-text);
  font-weight: var(--tc-fw-semibold);
}
/* For featured/highlighted stat: .stat-n--feature { color: var(--tc-orange) } */

/* ------------------------------------------------------------
   13. PILLARS — numbered list
   ------------------------------------------------------------ */
.p-num {
  color: var(--tc-orange);
  font-feature-settings: "tnum";
  font-weight: var(--tc-fw-semibold);
}
.p-title { color: var(--tc-text); }

/* ------------------------------------------------------------
   14. INSIGHTS BADGE — charcoal bg
   ------------------------------------------------------------ */
.ins-badge,
.art-badge,
.modal-badge {
  background: var(--tc-charcoal);
}

/* ------------------------------------------------------------
   15. METRICS — number charcoal, only span accents orange
   ------------------------------------------------------------ */
.metric-val { color: var(--tc-text); }
.metric-val span { color: var(--tc-orange); }

/* ------------------------------------------------------------
   16. MODAL CASE STATS (cases.html) — charcoal numbers
   ------------------------------------------------------------ */
.modal-stat-n {
  color: var(--tc-text);
  font-weight: var(--tc-fw-semibold);
}

/* ------------------------------------------------------------
   17. HAMBURGER bars — charcoal
   ------------------------------------------------------------ */
.hamburger span { background: var(--tc-charcoal); }

/* ------------------------------------------------------------
   18. FILTER PILLS (articles.html)
   ------------------------------------------------------------ */
.filter-btn {
  border-radius: var(--tc-radius-pill);
  font-family: var(--tc-font-body);
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--tc-orange);
  border-color: var(--tc-orange);
  color: var(--tc-paper);
}

/* ------------------------------------------------------------
   19. CASE NUM (cases.html) — subtler ghost
   ------------------------------------------------------------ */
.case-num { color: var(--tc-line); }

/* ------------------------------------------------------------
   20. EYEBROW — single source for the leading rule
   ------------------------------------------------------------ */
.eyebrow,
.page-eyebrow {
  color: var(--tc-orange);
}
.eyebrow::before,
.page-eyebrow::before {
  background: var(--tc-orange);
}

/* ------------------------------------------------------------
   21. WORDMARK / LOGO sizing
   ------------------------------------------------------------ */
.nav-logo img { height: 24px; }
.ft-logo img { height: 20px; opacity: 0.9; }

/* ------------------------------------------------------------
   22. CMS text blocks — preserve line breaks from admin textareas
   Renderers use .textContent or template literals that keep \n in
   the DOM, but default white-space collapses them. pre-wrap makes
   Enter in admin equal a visible paragraph break on the site, while
   still wrapping long lines normally.
   ------------------------------------------------------------ */
.hero-sub,
.about-body-text,
.sec-p,
.svc-desc,
.why-d,
.case-d,
.case-desc,
.t-bio,
.ins-desc,
.art-desc,
.p-desc,
.page-sub {
  white-space: pre-wrap;
}

/* ------------------------------------------------------------
   23. 404 page — Fraunces display, ghost number, charcoal title
   ------------------------------------------------------------ */
.err-num {
  font-family: var(--tc-font-display);
  font-weight: var(--tc-fw-regular);
  font-variation-settings: 'opsz' 144;
  color: var(--tc-line);
  letter-spacing: var(--tc-tracking-display);
}
.err-title {
  font-family: var(--tc-font-display);
  font-weight: var(--tc-fw-medium);
  font-variation-settings: 'opsz' 9;
  color: var(--tc-text);
  letter-spacing: var(--tc-tracking-h);
}
.err-sub { color: var(--tc-text-2); font-size: var(--tc-fs-body); }
.err-line { background: var(--tc-orange); }