/* EduCalcPro design tokens + base styles (same system as the original site).
   Elementor's Site Settings carry the same colors/fonts, so editors can keep
   changing things from the panel; these rules cover what the panel cannot. */
:root {
  --ecp-canvas: #fbfaf8;
  --ecp-surface: #ffffff;
  --ecp-surface-muted: #f4f1ec;
  --ecp-ink: #1a1714;
  --ecp-muted: #5c564f;
  --ecp-subtle: #787067;
  --ecp-line: #ece8e2;
  --ecp-line-strong: #d6cfc4;
  --ecp-green: #16a34a;
  --ecp-blue: #2563eb;
  --ecp-purple: #7c3aed;
  --ecp-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ecp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ecp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --ecp-radius: 16px;
  --ecp-shadow: 0 1px 2px rgba(26, 23, 20, 0.04), 0 8px 24px rgba(26, 23, 20, 0.06);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background-color: var(--ecp-canvas);
  color: var(--ecp-ink);
  font-family: var(--ecp-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ecp-ink); color: var(--ecp-canvas); }
:focus-visible { outline: 2px solid var(--ecp-blue); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* Opt-in soft optical-size display style for Elementor-built headings
   (add the CSS class "ecp-display"); never applied globally. */
.ecp-display, .ecp-display .elementor-heading-title {
  font-variation-settings: "opsz" 96, "SOFT" 50;
}

/* Gradient accent words (e.g. "Done in seconds."), used sparingly. */
.ecp-gradient {
  background: linear-gradient(90deg, var(--ecp-green), var(--ecp-blue) 55%, var(--ecp-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  padding-right: 0.06em;
}

/* Eyebrow label: small mono caps with hairlines (used above section titles). */
.ecp-eyebrow {
  font-family: var(--ecp-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ecp-muted);
}

/* Images never jump or zoom on hover. */
.elementor img, .elementor-widget-image img { transition: none; transform: none !important; }

/* Back-to-top button. */
.ecp-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--ecp-line-strong);
  background: var(--ecp-surface);
  color: var(--ecp-ink);
  box-shadow: var(--ecp-shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.ecp-top.is-visible { opacity: 1; transform: none; }
.ecp-top:hover { background: var(--ecp-ink); color: var(--ecp-canvas); }
.ecp-top[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ecp-top { transition: none; }
}

/* Migrated content wrapper: own stacking context so the hero's -z-10 grid
   paints above the wrapper background (as on the original site). */
.ecp-next { isolation: isolate; }

/* Header: transparent at the top, hairline + frosted canvas once scrolled. */
.ecp-header { transition: background-color 0.3s ease, border-color 0.3s ease; }
.ecp-header.elementor-sticky--effects {
  background-color: rgba(251, 250, 248, 0.9) !important;
  border-bottom-color: #ece8e2 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.ecp-header .elementor-widget-heading a { color: inherit; }
/* Logo group keeps its natural width so the menu sits on the right. */
.e-con.ecp-logo { --width: auto !important; width: auto !important; flex: 0 0 auto !important; }
.ecp-header .elementor-widget-nav-menu { flex: 0 0 auto; }

/* Footer shortcodes (language switcher, contact, socials) reuse the original
   markup inside an inline .ecp-next wrapper. */
.ecp-next.ecp-inline { background: transparent; display: block; isolation: auto; }
.ecp-lang > summary { list-style: none; cursor: pointer; }
.ecp-lang > summary::-webkit-details-marker { display: none; }
.ecp-lang:not([open]) > [role="menu"] { display: none; }
.ecp-lang[open] > summary svg:last-child { transform: rotate(180deg); }

/* Footer menus: underline only on hover (not for the current page). */
.ecp-footer .elementor-nav-menu .elementor-item-active:not(:hover):after,
.ecp-footer .elementor-nav-menu .elementor-item-active:not(:hover):before { opacity: 0 !important; width: 0 !important; }
.ecp-footer .elementor-nav-menu .elementor-item-active:not(:hover) { color: #5c564f !important; }
.ecp-auto { flex: 0 0 auto !important; width: auto !important; max-width: 100%; }
@media (min-width: 768px) { .e-con.ecp-push-right { margin-inline-start: auto !important; } }

/* Header bar is exactly 64px + 1px hairline on every breakpoint (as before). */
.ecp-header > .e-con-inner { height: 64px; min-height: 64px; }
.ecp-header .elementor-menu-toggle { padding: 6px; margin: 0; }
.ecp-header .elementor-menu-toggle svg, .ecp-header .elementor-menu-toggle i { width: 22px; height: 22px; font-size: 22px; }
/* Mobile/tablet menu opens as an overlay panel under the bar (no layout jump). */
.ecp-header { position: relative; }
.ecp-header .elementor-widget-nav-menu { position: static; }
.ecp-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  position: absolute; top: 64px !important; left: 0 !important; right: 0; width: 100% !important;
  margin-top: 0 !important; z-index: 60;
  border-bottom: 1px solid #ece8e2; box-shadow: 0 12px 32px rgba(26, 23, 20, 0.08);
}