@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
}

:root {
  /* The approved build resolves both type tokens to the native system stack.
     Keeping that exact stack also preserves the header measurements. */
  --font-inter: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-manrope: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html, body { margin: 0 !important; }
body.easy-dental-design-system { background: var(--ivory) !important; }

/* Elementor remains the editing surface, while these wrappers are made
   layout-transparent so the rendered DOM matches the approved Sites build. */
body.easy-dental-native-elementor .elementor-location-header,
body.easy-dental-native-elementor .elementor-location-footer,
body.easy-dental-native-elementor .elementor-location-header > .elementor,
body.easy-dental-native-elementor .elementor-location-footer > .elementor,
body.easy-dental-native-elementor .easy-reference-template,
body.easy-dental-native-elementor .easy-reference-template > .e-con-inner,
body.easy-dental-native-elementor .easy-reference-template .elementor-widget-html,
body.easy-dental-native-elementor .easy-reference-template .elementor-widget-container,
body.easy-dental-native-elementor main#main-content + .elementor-widget-container,
body.easy-dental-native-elementor .elementor-widget-html:has(main#main-content),
body.easy-dental-native-elementor .elementor-widget-html:has(main#main-content) > .elementor-widget-container {
  display: contents !important;
}

body.easy-dental-native-elementor .elementor-location-header,
body.easy-dental-native-elementor .elementor-location-footer,
body.easy-dental-native-elementor .site-main,
body.easy-dental-native-elementor main { width: 100%; }

body.easy-dental-native-elementor > .site-header,
body.easy-dental-native-elementor > header.site-header:not(.elementor-location-header .site-header),
body.easy-dental-native-elementor > .site-footer,
body.easy-dental-native-elementor > footer.site-footer:not(.elementor-location-footer .site-footer) {
  display: none !important;
}

body.easy-dental-native-elementor .elementor-element,
body.easy-dental-native-elementor .elementor-widget-html,
body.easy-dental-native-elementor .elementor-widget-html > .elementor-widget-container {
  margin: 0;
  padding: 0;
}

body.admin-bar .announcement { top: 32px; }
body.admin-bar .site-header { top: 64px; }
body.admin-bar .mobile-nav { top: 118px; }

@media (max-width: 782px) {
  body.admin-bar .announcement { top: 46px; }
  body.admin-bar .site-header { top: 78px; }
  body.admin-bar .mobile-nav { top: 164px; }
}

/* The approved reference has no blocking Elementor consent takeover. */
body.easy-dental-design-system :where(.e-floating-bars, #e-floating-bars, .e-cookie-consent, .elementor-popup-modal) {
  display: none !important;
}

body.easy-dental-design-system :where(.cc-dialog-container, .cc-dialog-backdrop, .cc-dialog-overlay) {
  display: none !important;
}

/* Elementor's consent and accessibility add-ons mount inside shadow roots.
   Hide their hosts so they cannot cover or alter the approved public layout. */
body.easy-dental-design-system :where(#cookiez-banner, #ea11y-root) {
  display: none !important;
}

/* Elementor's generic button reset adds 16px on both sides of each dropdown
   trigger, which pushes the phone and Schedule actions off-screen. */
body.easy-dental-design-system .nav-dropdown > button,
body.easy-dental-design-system .mobile-toggle {
  padding: 0 !important;
}

body.easy-dental-design-system .mobile-nav summary,
body.easy-dental-design-system .mobile-nav .mobile-single {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* Hello Elementor ships magenta link/button defaults. Lock every public
   interaction to the Easy Dental light-on-dark / dark-on-light system. */
body.easy-dental-design-system a {
  color: inherit !important;
}

body.easy-dental-design-system button,
body.easy-dental-design-system [type="button"] {
  color: inherit !important;
}

body.easy-dental-design-system button:hover,
body.easy-dental-design-system button:focus,
body.easy-dental-design-system button:active,
body.easy-dental-design-system [type="button"]:hover,
body.easy-dental-design-system [type="button"]:focus,
body.easy-dental-design-system [type="button"]:active {
  background-color: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
}

body.easy-dental-design-system .desktop-nav > a,
body.easy-dental-design-system .nav-dropdown > button,
body.easy-dental-design-system .nav-dropdown > button:hover,
body.easy-dental-design-system .nav-dropdown > button:focus,
body.easy-dental-design-system .nav-dropdown > button:active {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ink) !important;
}

body.easy-dental-design-system .primary-button,
body.easy-dental-design-system .primary-button:visited {
  background: var(--deep) !important;
  border-color: var(--deep) !important;
  color: #fff !important;
}

body.easy-dental-design-system .primary-button:hover,
body.easy-dental-design-system .primary-button:focus,
body.easy-dental-design-system .primary-button:active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}

body.easy-dental-design-system .primary-button.light,
body.easy-dental-design-system .primary-button.light:visited {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--deep) !important;
}

body.easy-dental-design-system .primary-button.light:hover,
body.easy-dental-design-system .primary-button.light:focus,
body.easy-dental-design-system .primary-button.light:active {
  background: var(--mint) !important;
  border-color: var(--mint) !important;
  color: var(--night) !important;
}

body.easy-dental-design-system .secondary-button,
body.easy-dental-design-system .phone-button,
body.easy-dental-design-system .text-link {
  color: var(--deep) !important;
}

body.easy-dental-design-system .solution-card,
body.easy-dental-design-system .solution-card:hover,
body.easy-dental-design-system .mega-feature,
body.easy-dental-design-system .mega-feature:hover,
body.easy-dental-design-system .site-footer a,
body.easy-dental-design-system .reviews-section a {
  color: #fff !important;
}

body.easy-dental-design-system .result-switcher button,
body.easy-dental-design-system .result-switcher button:hover,
body.easy-dental-design-system .result-switcher button:focus,
body.easy-dental-design-system .result-switcher button:active {
  background: #fff !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

body.easy-dental-design-system .result-switcher button.is-active,
body.easy-dental-design-system .result-switcher button.is-active:hover,
body.easy-dental-design-system .result-switcher button.is-active:focus {
  background: #fff !important;
  border-color: var(--teal) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 -3px 0 var(--teal) !important;
}

body.easy-dental-design-system .hero-arrows button,
body.easy-dental-design-system .review-controls button {
  background: rgba(5, 28, 27, .3) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  color: #fff !important;
}

body.easy-dental-design-system .hero-arrows button:hover,
body.easy-dental-design-system .hero-arrows button:focus,
body.easy-dental-design-system .review-controls button:hover,
body.easy-dental-design-system .review-controls button:focus {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--deep) !important;
}

body.easy-dental-design-system .hero-dots button,
body.easy-dental-design-system .hero-dots button:hover,
body.easy-dental-design-system .hero-dots button:focus {
  background: rgba(255, 255, 255, .35) !important;
  border-color: transparent !important;
}

body.easy-dental-design-system .hero-dots button.is-active {
  background: var(--mint) !important;
}

/* Keep the mega panel physically connected to the sticky header so moving
   from the trigger into the dropdown never crosses a dead hover zone. */
body.easy-dental-design-system .mega-menu {
  top: 100% !important;
}

body.easy-dental-design-system .mega-menu::before {
  top: -2px !important;
  height: 2px !important;
}

body.easy-dental-design-system .mega-label p,
body.easy-dental-design-system .mega-feature strong {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

body.easy-dental-design-system .hero-content h1 { font-size: clamp(64px, 7vw, 104px) !important; line-height: .94 !important; font-weight: 520 !important; }

@media (max-width: 900px) {
  body.easy-dental-design-system h1 { font-size: clamp(54px, 15vw, 76px) !important; }
  body.easy-dental-design-system .hero-content h1 { font-size: clamp(53px, 14.7vw, 72px) !important; }
}

@media (max-width: 560px) {
  body.easy-dental-design-system .hero-content h1 { font-size: 53px !important; }
}

.easy-skip-link { display: none !important; }

/* WordPress admin chrome must never affect the public layout calculation. */
body:not(.admin-bar) #wpadminbar { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
