/* Site-specific styling on top of the WordPress/Elementor export.
   tools/build.py links this file last in every page, so it wins over the
   Elementor styles. The site has two header templates with the same layout
   (logo | menu | "Schedule a demo" button): template 20 (dark text, most
   pages) and template 1669 (white text on a colour band: About us, News,
   Solutions, Vacancies). The selectors below target "the menu/button/row in
   the header" rather than element IDs, so they work for both. */

:root {
  --menu-text: #003C7C;
  --menu-hover: #0058B6;
  --menu-hover-bg: #EEF4FB;
  --menu-shadow: 0 16px 40px rgba(0, 60, 124, .16), 0 2px 6px rgba(0, 60, 124, .08);
}

/* Desktop dropdowns: a white card with rounded corners and a soft shadow,
   items in the same font and weight as the menu. SmartMenus sets the size and
   offset inline, hence the !important on those. */
.elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu {
  width: max-content;
  min-width: 220px !important;
  max-width: none !important;
  margin-top: 10px !important;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 60, 124, .08);
  border-radius: 12px;
  box-shadow: var(--menu-shadow);
  animation: menu-dropdown-in .18s ease-out;
}

/* Invisible bridge over the gap, so the dropdown stays open while the mouse
   moves from the menu item down into it. */
.elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  color: var(--menu-text);
  background: transparent;
  font-family: "Alegreya Sans", Sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}

.elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
.elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus-visible,
.elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu a.elementor-sub-item.highlighted,
.elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active {
  color: var(--menu-hover);
  background: var(--menu-hover-bg);
}

@keyframes menu-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Mobile menu: a light panel instead of a dark blue block, same bold font,
   sub-items indented with a thin line so the structure stays clear. */
.elementor-location-header .elementor-element.elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  padding: 8px 12px 12px;
  background: #FFFFFF;
  border-radius: 0 0 16px 16px;
  box-shadow: var(--menu-shadow);
}

.elementor-location-header .elementor-element.elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu {
  margin: 0 0 4px 16px;
  padding: 0 0 0 8px;
  background: transparent;
  border-left: 2px solid var(--menu-hover-bg);
}

.elementor-location-header .elementor-element.elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a {
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  color: var(--menu-text);
  background: transparent;
  font-family: "Alegreya Sans", Sans-serif;
  font-weight: 700;
  line-height: 1.3;
}

.elementor-location-header .elementor-element.elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a:hover,
.elementor-location-header .elementor-element.elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a:focus-visible,
.elementor-location-header .elementor-element.elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a.highlighted,
.elementor-location-header .elementor-element.elementor-widget-nav-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-item-active {
  color: var(--menu-hover);
  background: var(--menu-hover-bg);
}

/* Desktop header: the menu is as wide as its items (Elementor gave it a fixed
   width that only fits three) and stays right-aligned next to the
   "Schedule a demo" button, which never wraps. Up to 1349px the gaps, and up
   to 1279px also the side padding and font size, are a bit smaller so the
   four menu items stay on one line (checked every 20px from 1060 to 1920). */
@media (min-width: 1025px) {
  .elementor-location-header .elementor-element.elementor-widget-nav-menu {
    flex: 0 1 auto !important;
    width: auto !important;
    --container-widget-width: auto;
    --container-widget-flex-grow: 0;
  }

  /* The dropdown indicator has no icon but still takes 10px, which made the
     gaps after Solutions and Case studies wider than the others. */
  .elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item > .sub-arrow {
    display: none;
  }

  .elementor-location-header .elementor-element.elementor-widget-button {
    flex: 0 0 auto !important;
  }

  .elementor-location-header .elementor-element.elementor-widget-button .elementor-button {
    white-space: nowrap;
  }
}

@media (min-width: 1025px) and (max-width: 1349px) {
  .elementor-location-header .elementor-element.elementor-widget-nav-menu {
    --e-nav-menu-horizontal-menu-item-margin: 12px;
  }

  /* The header column that holds the menu and the button. */
  .elementor-location-header .elementor-element.e-con:has(> .elementor-widget-nav-menu) {
    --column-gap: 24px;
    --gap: 0px 24px;
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  /* The header row (logo column + menu column). */
  .elementor-location-header > .elementor-element.e-con {
    --padding-left: 6%;
    --padding-right: 6%;
  }

  .elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-location-header .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--main .sub-menu {
    animation: none;
  }
}