/* ============================================
   Educo EOR — Design Tokens (Solar Systems)
   Source of truth for color, type, spacing.
   Loaded site-wide ahead of every page/widget stylesheet.
============================================ */

:root {
  /* ─── Surfaces ─────────────────────────── */
  --edc-warm-white:  #FAF8F4;
  --edc-cream:       #F4F1EB;
  --edc-surface:     #FAF8F4;
  --edc-surface-container: #F4F1EB;
  --edc-white:       #ffffff;

  /* ─── Text / Ink ───────────────────────── */
  --edc-obsidian:    #292928;
  --edc-slate:       #5A5956;
  --edc-stone:       #8A8880;

  /* ─── Solar Gold (Primary) ─────────────── */
  --edc-solar-gold:  #F2B81B;
  --edc-pale-gold:   #F9D674;
  --edc-gold-tint:   rgba(242, 184, 27, 0.10);
  --edc-gold-ring:   rgba(242, 184, 27, 0.30);

  /* ─── Structure ────────────────────────── */
  --edc-border:      #E0DDD8;
  --edc-hairline:    0.5px solid rgba(41, 41, 40, 0.08);
  --edc-error:       #ba1a1a;

  /* ─── Typography ───────────────────────── */
  --edc-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --edc-font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Type scale — clamp() for smooth mobile↔desktop scaling */
  --edc-fs-hero:        clamp(40px, 6.4vw, 80px);
  --edc-fs-headline-lg: clamp(32px, 4.2vw, 52px);
  --edc-fs-headline-md: 20px;
  --edc-fs-body-lead:   18px;
  --edc-fs-body:        16px;
  --edc-fs-body-sm:     14px;
  --edc-fs-nav:         12px;
  --edc-fs-label:       10px;

  /* Tracking */
  --edc-track-hero:    -0.04em;
  --edc-track-headline:-0.03em;
  --edc-track-tight:   -0.02em;
  --edc-track-nav:     0.12em;
  --edc-track-label:   0.22em;

  /* Line heights */
  --edc-lh-hero:  1.1;
  --edc-lh-tight: 1.2;
  --edc-lh-body:  1.6;

  /* ─── Spacing (Solar Systems scale) ────── */
  --edc-space-base: 4px;
  --edc-space-xs:   8px;
  --edc-space-sm:   16px;
  --edc-space-gutter: 20px;
  --edc-space-md:   24px;
  --edc-space-lg:   40px;
  --edc-space-xl:   64px;
  --edc-section-v:  100px;
  --edc-section-h:  80px;

  /* ─── Radii ────────────────────────────── */
  --edc-radius-sm:   0.25rem;
  --edc-radius:      0.5rem;
  --edc-radius-md:   0.75rem;
  --edc-radius-lg:   1rem;
  --edc-radius-xl:   1.5rem;
  --edc-radius-2xl:  1.75rem;  /* rounded-3xl visual */
  --edc-radius-bento:40px;
  --edc-radius-full: 9999px;

  /* ─── Containers ───────────────────────── */
  --edc-container:   1200px;
  --edc-pad-x:       clamp(20px, 4vw, 80px);

  /* ─── Motion ───────────────────────────── */
  --edc-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --edc-ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --edc-dur-quick:  200ms;
  --edc-dur-medium: 300ms;
  --edc-dur-slow:   700ms;

  /* ─── Elevation ────────────────────────── */
  --edc-shadow-sm:  0 1px 2px rgba(41, 41, 40, 0.04);
  --edc-shadow-md:  0 4px 12px rgba(41, 41, 40, 0.06);
  --edc-shadow-lg:  0 12px 24px -8px rgba(41, 41, 40, 0.10);
  --edc-shadow-xl:  0 24px 48px -16px rgba(41, 41, 40, 0.16);
}

/* ============================================
   Base reset — brand-grounded
============================================ */
html {
  background: var(--edc-warm-white);
  color: var(--edc-obsidian);
  font-family: var(--edc-font-body);
  font-size: var(--edc-fs-body);
  line-height: var(--edc-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background: var(--edc-warm-white);
  color: var(--edc-obsidian);
  margin: 0;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--edc-font-heading);
  color: var(--edc-obsidian);
  font-weight: 800;
  margin: 0;
}

a {
  color: var(--edc-obsidian);
  transition: color var(--edc-dur-quick) var(--edc-ease);
}
a:hover { color: var(--edc-solar-gold); }

::selection { background: var(--edc-solar-gold); color: var(--edc-obsidian); }

img, svg { display: block; max-width: 100%; }

/* Material Symbols glyph baseline */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

/* Screen-reader-only utility */
.edc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.edc-sr-only:focus {
  position: static;
  width: auto; height: auto;
  clip: auto; white-space: normal;
}

/* Main content clearance is delegated to each first hero widget so
   the hero's background bleeds up to the fixed nav bottom. See the
   per-hero padding-top rules at the bottom of this file. */
.edc-main { padding-top: 0; min-height: 60vh; }
:root { --edc-nav-h: 72px; }

/* ============================================
   Shared hero chip — used as the eyebrow "pill" above hero headlines
   across every page hero widget so they share one visual language.
   Cream/warm-neutral fill + optional Solar Gold icon + uppercase label.
============================================ */
.edc-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 16px;
  border-radius: var(--edc-radius-full);
  background: var(--edc-cream);
  border: 1px solid var(--edc-border);
  color: var(--edc-slate);
  font-family: var(--edc-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: max-content;
  max-width: 100%;
}
.edc-hero-chip .material-symbols-outlined {
  font-size: 16px !important;
  color: var(--edc-solar-gold);
}

/* ============================================
   Elementor bleed — for any [edc_*] widget

   Each EDC widget's own <section> owns its horizontal padding and
   full-bleed background. But Elementor wraps every widget in
   .elementor-section > .elementor-container > .elementor-column >
   .elementor-widget-wrap, and by default .elementor-container clamps
   to a boxed max-width (Elementor's global "boxed" content width) plus
   adds its own vertical padding. Left alone that letterboxes our
   full-bleed bands and stripes the body's warm-white through as
   horizontal gutters between sections.

   Zero the wrapper padding, uncap the max-width, and let each widget
   render edge-to-edge. Editor-safe: `body:not(.elementor-editor-active)`
   scopes the reset to the front-end so drag handles and section
   controls remain usable inside the Elementor editor.
============================================ */
[class*="elementor-widget-edc_"],
[class*="elementor-widget-edc_"] > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}
body:not(.elementor-editor-active) .elementor-section:has([class*="elementor-widget-edc_"]),
body:not(.elementor-editor-active) .elementor-top-section:has([class*="elementor-widget-edc_"]) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
body:not(.elementor-editor-active) .elementor-section:has([class*="elementor-widget-edc_"]) > .elementor-container,
body:not(.elementor-editor-active) .elementor-section:has([class*="elementor-widget-edc_"]) .elementor-column,
body:not(.elementor-editor-active) .elementor-section:has([class*="elementor-widget-edc_"]) .elementor-widget-wrap {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Same reset for the newer Elementor "container" element (flexbox
   containers, introduced in Elementor 3.6). Some sites are configured
   to use containers by default instead of sections — this covers that
   path too. */
body:not(.elementor-editor-active) .e-con:has([class*="elementor-widget-edc_"]),
body:not(.elementor-editor-active) .e-con > .e-con-inner:has([class*="elementor-widget-edc_"]) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* The theme's default post wrapper (index.php's <article class="edc-entry">)
   must not clamp Elementor content either. */
.edc-entry { max-width: none; width: 100%; }

/* ============================================
   Uniform hero — nav clearance

   Every EDC hero section owns its own top padding that includes the
   fixed nav's height. This lets each hero's background (warm-white,
   dark image wash, gradient, etc.) bleed flush to the top of the
   viewport under the fixed nav — no strip of body background in
   between. `!important` is used because each hero's own stylesheet
   loads after this file and its `padding` shorthand would otherwise
   win.
============================================ */
.edc-hero,
.edc-mobility-hero,
.edc-hr-hero,
.edc-pillars-hero,
.edc-service-hero,
.edc-stats-hero,
.edc-hero-dark,
.edc-hero-immersive,
.edc-hero-dashboard,
.edc-hero-map,
.edc-hero-ticker,
.edc-hdf,
.edc-careers__hero,
.edc-about__hero {
  padding-top: calc(56px + var(--edc-nav-h)) !important;
}
@media (min-width: 1024px) {
  .edc-hero,
  .edc-mobility-hero,
  .edc-hr-hero,
  .edc-pillars-hero,
  .edc-service-hero,
  .edc-stats-hero,
  .edc-hero-dark,
  .edc-hero-immersive,
  .edc-hero-dashboard,
  .edc-hero-map,
  .edc-hero-ticker,
  .edc-hdf,
  .edc-careers__hero,
  .edc-about__hero {
    padding-top: calc(64px + var(--edc-nav-h)) !important;
  }
}

/* Discover-form banner ribbon isn't a hero but is still the first
   thing on that page — small nav clearance so it doesn't ride under
   the nav. */
.edc-df__banner-wrap {
  padding-top: calc(16px + var(--edc-nav-h)) !important;
}