/* =========================================================================
   Custom styling for the Elementor rebuild (homepage id 7 + HFE header/footer).
   Scoped to reliable hooks: .elementor-page-7, icon-box position classes,
   and the HFE header/footer wrappers.

   Colours come from Elementor Global Colors (Site Settings → Global Colors):
     --e-global-color-primary    (brand accent / highlight)
     --e-global-color-secondary  (brand dark / navy)
     --e-global-color-text       (body text)
   Change them there and the whole theme follows — no hardcoded brand colours.
   ========================================================================= */

/* Full-width for every Elementor "Full Width" page: Astra's container caps at
   1240px (plain-container) leaving side gaps. Stretch it so section backgrounds
   reach the screen edges; section content stays centered via Elementor's own
   inner container. */
body.elementor-template-full-width .site-content > .ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Aliases must live on `body` (not :root) — Elementor defines its global
   color vars on body.elementor-kit-N, so they are empty at :root. */
body {
  --vz-primary:   var(--e-global-color-primary);
  --vz-secondary: var(--e-global-color-secondary);
  --vz-text:      var(--e-global-color-text);
  /* dark gradient derived from the secondary global */
  --vz-secondary-grad: linear-gradient(135deg,
      color-mix(in srgb, var(--e-global-color-secondary) 82%, #ffffff),
      var(--e-global-color-secondary));
  /* light tint derived from the secondary global (icon backdrops) */
  --vz-secondary-tint: color-mix(in srgb, var(--e-global-color-secondary) 10%, #ffffff);
}

/* Astra "scroll to top" button -> brand primary (was Astra's default blue). */
#ast-scroll-top {
  background-color: var(--e-global-color-primary) !important;
  color: #ffffff !important;
}
#ast-scroll-top svg { fill: #ffffff !important; }
#ast-scroll-top:hover {
  background-color: color-mix(in srgb, var(--e-global-color-primary) 88%, #000) !important;
}

/* ============================ HEADER NAV ============================ */
/* Default = secondary (navy); hover/active = primary. */
.ehf-header .hfe-nav-menu a.hfe-menu-item,
.ehf-header .hfe-nav-menu a.hfe-sub-menu-item,
.ehf-header .elementor-widget-navigation-menu .menu-item a,
header .hfe-nav-menu .menu-item > a {
  color: var(--vz-secondary) !important;
  font-weight: 500;
  transition: color .2s ease;
}
.ehf-header .hfe-nav-menu a.hfe-menu-item:hover,
.ehf-header .hfe-nav-menu .menu-item a:hover,
.ehf-header .hfe-nav-menu .current-menu-item > a,
.ehf-header .hfe-nav-menu .current-menu-ancestor > a,
header .hfe-nav-menu .menu-item a[aria-current] {
  color: var(--vz-primary) !important;
}
.ehf-header .hfe-nav-menu .menu-item a:before,
.ehf-header .hfe-nav-menu .menu-item a:after {
  background-color: var(--vz-primary) !important;
  border-color: var(--vz-primary) !important;
}

/* ============================ FOOTER ============================ */
.ehf-footer .hfe-site-title a,
footer .hfe-site-title a {
  color: var(--vz-secondary) !important;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}
footer .elementor-widget-heading .elementor-heading-title {
  color: var(--vz-secondary);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  margin-bottom: 6px;
}
footer .elementor-section:first-of-type .hfe-nav-menu .menu-item a {
  color: var(--vz-text) !important;
  padding: 6px 0 !important;
  font-size: 14.5px;
  font-weight: 400;
  transition: color .2s ease;
}
footer .hfe-nav-menu .menu-item a:hover {
  color: var(--vz-primary) !important;
}
footer .hfe-nav-menu .menu-item a:before,
footer .hfe-nav-menu .menu-item a:after {
  background-color: transparent !important;
}
footer .elementor-section:last-of-type .hfe-nav-menu .menu-item a {
  color: var(--vz-text) !important;
}

/* ============================ SERVICE CARDS (page 7) ============================ */
/* Service icon-boxes use position "top" => .elementor-position-block-start */
.elementor-page-7 .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-icon {
  margin-bottom: 16px;
}
.elementor-page-7 .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-icon .elementor-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 60px !important;
  height: 60px !important;
  padding: 0 !important;
  border-radius: 15px !important;
  background: var(--vz-secondary-grad) !important;
  box-shadow: 0 10px 22px rgba(18, 48, 107, .18);
}
.elementor-page-7 .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-icon .elementor-icon svg {
  width: 27px !important;
  height: 27px !important;
  fill: #fff !important;
}
.elementor-page-7 .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--vz-secondary);
  margin-bottom: 8px;
}
.elementor-page-7 .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-description {
  color: var(--vz-text);
  font-size: 14.5px;
  line-height: 1.7;
}

/* Card columns (services + testimonials): equal height + hover lift. */
.elementor-page-7 .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box.elementor-position-block-start),
.elementor-page-7 .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-testimonial) {
  transition: transform .3s ease, box-shadow .3s ease;
}
.elementor-page-7 .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box.elementor-position-block-start):hover,
.elementor-page-7 .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-testimonial):hover {
  transform: translateY(-6px);
  
}
.elementor-page-7 .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-wrapper {
  text-align: center;
}

/* ============================ FEATURE ICONS (why-choose, page 7) ============================ */
/* Features use position "left" => .elementor-position-inline-start */
.elementor-page-7 .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-icon .elementor-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: var(--vz-secondary-tint) !important;
}
.elementor-page-7 .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-icon .elementor-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: var(--vz-secondary) !important;
}
.elementor-page-7 .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--vz-secondary);
}
.elementor-page-7 .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-description {
  color: var(--vz-text);
  font-size: 13.5px;
}

/* ============================ BUTTONS + DARK SECTIONS ============================ */
/* Keep every page-7 button + dark section tied to the globals, even if the
   Elementor widget data still holds old hardcoded hex after an editor save. */
.elementor-page-7 .elementor-widget-button .elementor-button {
  background-color: var(--vz-primary) !important;
  color: #ffffff !important;
}
.elementor-page-7 .elementor-widget-button .elementor-button:hover {
  background-color: color-mix(in srgb, var(--vz-primary) 88%, #000) !important;
}
/* Stats + CTA dark sections -> secondary global */
.elementor-page-7 .elementor-section:has(.elementor-counter),
.elementor-page-7 .elementor-section:has(#contact) {
  background-color: var(--vz-secondary) !important;
}

/* ============================ MISC ============================ */
.elementor-page-7 a:not(.elementor-button):hover {
  color: var(--vz-primary);
}