/* MachSoft homepage header pilot v5
   Retains the original translucent grey header and white scroll indicator.
   Limited adjustments: white logo, stronger right-aligned menu, and a calmer Siemens-like cyan accent.
   All rules are scoped to the homepage pilot. Shared styles.css is unchanged.
*/

/* White logo: a little more presence without altering aspect ratio or placement. */
body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:first-child img {
  display: block !important;
  width: clamp(190px, 13vw, 210px) !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Match the homepage desktop logo's visual footprint to the approved detail-page header. */
@media (min-width: 769px) {
  body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:first-child {
    flex: 0 0 auto !important;
    min-width: clamp(190px, 13vw, 210px) !important;
  }
}

/* Desktop: keep the logo at the left, group menu items to the right,
   and reduce the excessive space between the navigation labels. */
@media (min-width: 1351px) {
  body.homepage-header-pilot > header > div.nav-bar > div.navigation {
    justify-content: flex-start;
    gap: clamp(1rem, 1.35vw, 1.45rem);
  }

  body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:first-child {
    margin-right: auto !important;
    flex: 0 0 auto;
  }

  body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:not(:first-child):not(.site-language-switcher) {
    flex: 0 0 auto;
    margin: 0;
    text-align: right;
  }
}

/* Menu typography is slightly larger; the original transparent grey bar remains untouched. */
body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:not(:first-child):not(.site-language-switcher) {
  font-size: clamp(1rem, 1vw, 1.08rem);
  font-weight: 550;
  transition: color 160ms ease;
}

body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:not(:first-child):not(.site-language-switcher):hover,
body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:not(:first-child):not(.site-language-switcher):focus-visible {
  color: #00A6B2;
}

/* Calmer cyan accent, closer to Siemens' blue-teal family than the previous mint tone.
   Apply only to the rotating hero phrase and hero action buttons. */
body.homepage-header-pilot .home .hero-services .typewrite {
  color: #00A6B2;
  font-weight: 700;
}

body.homepage-header-pilot .home .hero-actions .hero-action,
body.homepage-header-pilot .home .hero-actions .hero-action-primary,
body.homepage-header-pilot .home .hero-actions .hero-action-secondary {
  border-color: #00A6B2;
  background: #00A6B2;
  color: #07181A;
  box-shadow: 0 5px 18px rgba(0, 166, 178, 0.14);
}

body.homepage-header-pilot .home .hero-actions .hero-action:hover,
body.homepage-header-pilot .home .hero-actions .hero-action-primary:hover,
body.homepage-header-pilot .home .hero-actions .hero-action-secondary:hover {
  border-color: #008F9A;
  background: #008F9A;
  color: #fff;
  box-shadow: 0 7px 22px rgba(0, 143, 154, 0.22);
}

body.homepage-header-pilot .home .hero-actions .hero-action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Keep the same cyan family in the existing mobile navigation's hover state. */
body.homepage-header-pilot .mobile-nav .nav-links a:hover,
body.homepage-header-pilot .mobile-nav .nav-links a:focus-visible {
  color: #00A6B2;
}

/* Language control remains compact and keeps its existing placement. */
body.homepage-header-pilot > header > div.nav-bar > div.navigation > a.site-language-switcher {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0.36rem 0.58rem;
  font-size: 0.88rem;
}

body.homepage-header-pilot .site-language-switcher .flag-icon {
  width: 1.32em;
  height: 0.94em;
}

/* Mobile keeps the existing hamburger layout and background; only size the white logo. */
@media (max-width: 768px) {
  body.homepage-header-pilot .LogoForMobile img {
    display: block;
    width: auto;
    max-width: 156px;
    height: 38px;
    object-fit: contain;
  }

  body.homepage-header-pilot .mobile-nav .hamburger-icon span {
    background: #fff;
  }

  body.homepage-header-pilot .home .hero-actions .hero-action,
  body.homepage-header-pilot .home .hero-actions .hero-action-primary,
  body.homepage-header-pilot .home .hero-actions .hero-action-secondary {
    padding: 0.68em 0.9em;
    font-size: 0.9rem;
  }
}

@media (max-width: 380px) {
  body.homepage-header-pilot .home .hero-actions .hero-action,
  body.homepage-header-pilot .home .hero-actions .hero-action-primary,
  body.homepage-header-pilot .home .hero-actions .hero-action-secondary {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.homepage-header-pilot > header > div.nav-bar > div.navigation > a:not(:first-child),
  body.homepage-header-pilot .home .hero-actions .hero-action {
    transition: none;
  }
}

/* ============================================================
   HOMEPAGE MOBILE MENU — CONTENT-HEIGHT PANEL
   Match the verified detail-page menu: the black dropdown starts
   directly below the 40px mobile header and ends after the last item.
   Only the list itself scrolls if it ever becomes taller than the viewport.
   ============================================================ */
@media (max-width: 768px) {
  body.homepage-header-pilot .mobile-nav .nav-links {
    position: fixed !important;
    top: 40px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: auto !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #000 !important;
    border: 0 !important;
    transition: max-height 220ms ease !important;
    z-index: 12001 !important;
  }

  body.homepage-header-pilot .mobile-nav > #hamburger-toggle:checked ~ .nav-links {
    top: 40px !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: #000 !important;
  }

  body.homepage-header-pilot .mobile-nav .nav-links > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.homepage-header-pilot .mobile-nav .nav-links > li > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}