/*
 * Sarwz Technology — font-override.css v5.0
 * Loaded AFTER Elementor. Fixes fonts site-wide.
 *
 * COLOR RULES:
 *   Light backgrounds  → #0d0d0d (near-black) text
 *   Dark/blue bg       → #ffffff text  (NEVER override these with black)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap');

/* ─────────────────────────────────────────────────────────────
   1. INTER on everything — replaces Elementor's default font
      Does NOT touch color here (color is handled per-context)
   ───────────────────────────────────────────────────────────── */
html, body,
html body *,
html body p,
html body li,
html body span,
html body div,
html body a,
html body label,
html body input,
html body textarea,
html body select,
html body button,
html body td, html body th,
html body .elementor *,
html body .elementor-widget *,
html body .elementor-widget-container *,
html body .elementor-section *,
html body .e-con *,
html body .e-con-inner * {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ─────────────────────────────────────────────────────────────
   2. SYNE on headings only
   ───────────────────────────────────────────────────────────── */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .elementor-heading-title,
html body .elementor-widget-heading .elementor-heading-title,
html body .hero-title,
html body .stitle,
html body .brand-name,
html body .svc-page-hero h1,
html body .careers-hero h1,
html body .cta-section h2,
html body .vis-main h3,
html body .job-title,
html body .sidebar-cta h3,
html body .apply-banner-left h3,
html body .stat-num,
html body .vs-num,
html body .svc-feat h4,
html body .process-step h4,
html body .process-section-title,
html body .mega-head h3,
html body .jd-section h4,
html body .jd-apply-text h5 {
    font-family: 'Syne', 'Inter', system-ui, sans-serif !important;
}

/* ─────────────────────────────────────────────────────────────
   3. LIGHT BACKGROUND SECTIONS → dark text
      Only applies where background is white/light grey
   ───────────────────────────────────────────────────────────── */

/* White/light surface text */
html body .snav,
html body .snav *:not(.nav-cta):not(.nav-cta *) {
    color: #0d0d0d !important;
}
html body .nav-cta {
    color: #ffffff !important;
    background-color: #032d6d !important;
}

/* Mega menu text — on white background */
html body .mega-menu,
html body .mega-menu .mt,
html body .mega-menu .md,
html body .mega-menu .mega-foot span,
html body .mega-menu .mega-foot a:not(:hover),
html body .simple-drop,
html body .simple-drop a {
    color: #0d0d0d !important;
}
html body .mega-item.feat .mt,
html body .mega-item.feat .md {
    color: #ffffff !important;
}

/* Service cards on light grey bg */
html body .services,
html body .svc-card h3,
html body .svc-card p,
html body .svc-link {
    color: #0d0d0d !important;
}

/* Service feature cards */
html body .svc-feat h4 {
    color: #032d6d !important;
}
html body .svc-feat p {
    color: #222222 !important;
}

/* Sidebar info (light grey box) */
html body .sidebar-info,
html body .sidebar-info h4,
html body .sidebar-info-row span {
    color: #0d0d0d !important;
}

/* Process steps (light grey box) */
html body .process-step h4 {
    color: #032d6d !important;
}
html body .process-step p,
html body .process-section-title {
    color: #222222 !important;
}

/* Body section — white background */
html body .svc-body,
html body .svc-body .stitle,
html body .svc-body .sdesc,
html body .stitle {
    color: #032d6d !important;
}
html body .svc-body .sdesc,
html body .sdesc {
    color: #222222 !important;
}

/* Trusted by section */
html body .trusted-label {
    color: #0d0d0d !important;
}

/* Footer — white background */
html body footer,
html body .footer-brand p,
html body .footer-areas,
html body .footer-col h5,
html body .footer-col ul a,
html body .ci-val,
html body .footer-bottom {
    color: #0d0d0d !important;
}
html body .ci-label {
    color: #4db8d4 !important;
}

/* Careers — apply banner on white */
html body .apply-banner-left h3 {
    color: #032d6d !important;
}
html body .apply-banner-left p,
html body .apply-subj-note,
html body .apply-banner-right {
    color: #0d0d0d !important;
}

/* Job card on white */
html body .job-title {
    color: #032d6d !important;
}
html body .job-tag {
    color: #0d0d0d !important;
}
html body .job-tag.green {
    color: #1b5e20 !important;
}
html body .jd-section p,
html body .jd-list li {
    color: #0d0d0d !important;
}
html body .jd-section h4,
html body .jd-apply-text h5,
html body .jd-email {
    color: #032d6d !important;
}
html body .jd-subj {
    color: #444444 !important;
}

/* Industry pills on light bg */
html body .ind-pill {
    color: #0d0d0d !important;
}

/* ─────────────────────────────────────────────────────────────
   4. DARK/BLUE BACKGROUND SECTIONS → WHITE text
      These sections have --p (#032d6d) or dark backgrounds
   ───────────────────────────────────────────────────────────── */

/* Hero section (white bg — navy text is correct) */
html body .hero-title {
    color: #032d6d !important;
}
html body .hero-desc {
    color: #222222 !important;
}
html body .hero-badge {
    color: #032d6d !important;
}
html body .stat-num {
    color: #032d6d !important;
}
html body .stat-label {
    color: #0d0d0d !important;
}
html body .vis-main h3 {
    color: #032d6d !important;
}
html body .vis-main p {
    color: #333333 !important;
}

/* Service page hero — DARK BLUE background → WHITE text */
html body .svc-page-hero,
html body .svc-page-hero *,
html body .svc-page-hero h1,
html body .svc-page-hero p,
html body .svc-page-hero .seyebrow,
html body .svc-meta-chip,
html body .svc-meta-chip span,
html body .svc-page-back {
    color: #ffffff !important;
}
html body .svc-page-hero .seyebrow {
    color: #4db8d4 !important;
}
html body .svc-meta-chip svg,
html body .svc-page-back svg {
    color: #4db8d4 !important;
}

/* CTA section — DARK BLUE background → WHITE text */
html body .cta-section,
html body .cta-section h2,
html body .cta-section p {
    color: #ffffff !important;
}

/* Careers hero — DARK BLUE background → WHITE text */
html body .careers-hero,
html body .careers-hero h1,
html body .careers-hero p,
html body .careers-hero .seyebrow,
html body .careers-hero .svc-meta-chip,
html body .careers-hero .svc-meta-chip span {
    color: #ffffff !important;
}
html body .careers-hero .seyebrow {
    color: #4db8d4 !important;
}

/* Sidebar CTA box — DARK BLUE background → WHITE text */
html body .sidebar-cta,
html body .sidebar-cta h3,
html body .sidebar-cta p,
html body .sc-val {
    color: #ffffff !important;
}
html body .sc-label {
    color: rgba(255,255,255,0.6) !important;
}
html body .sidebar-cta-btn {
    color: #032d6d !important;
    background: #ffffff !important;
}

/* Tech stack callout — DARK BLUE background → WHITE text */
html body .tech-stack,
html body .tech-stack *,
html body .tech-stack-title,
html body .tech-stack-sub,
html body .tech-pill {
    color: #ffffff !important;
}

/* Azure stack head — DARK BLUE → WHITE */
html body .azure-head,
html body .azure-head *,
html body .azure-head-title,
html body .azure-head-sub,
html body .azure-pill {
    color: #ffffff !important;
}
/* Azure stack body — light bg → dark text */
html body .azure-body,
html body .azure-also-label {
    color: #0d0d0d !important;
}
html body .azure-also-pill {
    color: #333333 !important;
}

/* Vis stat card — DARK BLUE → WHITE */
html body .vis-stat,
html body .vs-label,
html body .vs-num,
html body .vs-sub {
    color: #ffffff !important;
}

/* Step numbers on blue bg */
html body .step-num {
    color: #ffffff !important;
}
html body .step-num.ac {
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   5. EYEBROW labels — always teal, both contexts
   ───────────────────────────────────────────────────────────── */
html body .seyebrow {
    color: #4db8d4 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-size: 10.5px !important;
}

/* ─────────────────────────────────────────────────────────────
   6. BUTTONS — correct colors per context
   ───────────────────────────────────────────────────────────── */
html body .btn-primary { color: #ffffff !important; }
html body .btn-outline { color: #032d6d !important; }
html body .btn-white   { color: #032d6d !important; background: #ffffff !important; }
html body .btn-ghost   { color: #ffffff !important; }
html body .job-apply-btn,
html body .jd-mailto-btn { color: #ffffff !important; background: #032d6d !important; }

/* ─────────────────────────────────────────────────────────────
   7. NAV BADGES & pills — context-aware
   ───────────────────────────────────────────────────────────── */
html body .mbadge { color: #4db8d4 !important; }
html body .vtag, html body .ctag { color: #032d6d !important; }
html body .svtag, html body .tech-pill.core { color: #ffffff !important; }
html body .azure-pill { color: #ffffff !important; }

/* ─────────────────────────────────────────────────────────────
   8. FONT SIZES — professional scale
   ───────────────────────────────────────────────────────────── */
html body p,
html body .elementor-widget-text-editor p,
html body li,
html body .sdesc {
    font-size: 15px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
}

html body .nav-links li > a {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

html body .svc-feat p,
html body .process-step p {
    font-size: 13px !important;
    line-height: 1.65 !important;
}

html body .tech-pill {
    font-size: 11px !important;
    font-weight: 500 !important;
}

html body .seyebrow {
    font-size: 10.5px !important;
}

/* ─────────────────────────────────────────────────────────────
   9. HOVER states — preserve them
   ───────────────────────────────────────────────────────────── */
html body .footer-col ul a:hover,
html body .nav-links li > a:hover,
html body .simple-drop a:hover,
html body .ind-pill:hover {
    color: #032d6d !important;
}
html body .mega-item.feat:hover .mt,
html body .mega-item.feat:hover .md {
    color: #ffffff !important;
}