/* ============================================================
   FLOW3D 2026 — NAVIGATION
   /assets/css/navigation.css

   Depends on: tokens.css

   Sections:
   1.  Desktop Navigation
   2.  Nav Logo
   3.  Nav Links
   4.  Dropdown Menus
   5.  Mobile Navigation
   6.  Footer
   7.  Elementor Nav Menu Widget Overrides
   ============================================================ */


/* ------------------------------------------------------------
   1. DESKTOP NAVIGATION
   ------------------------------------------------------------ */

.site-header,
.elementor-nav-menu--main,
header.elementor-section {
  background-color: var(--fs-color-dark);
}

nav,
.site-navigation,
.elementor-nav-menu {
  display: flex;
  align-items: center;
  max-width: var(--fs-max-width);
  margin: 0 auto;
  padding: 0 var(--fs-space-md);
}


/* ------------------------------------------------------------
   2. NAV LOGO
   ------------------------------------------------------------ */

.site-logo a,
.elementor-nav-menu .site-logo,
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* SVG/inline logo color */
.site-logo svg,
.custom-logo-link svg {
  fill: var(--fs-color-accent);
}

/* Image logo — constrain height, let width scale */
.custom-logo,
.site-logo img {
  height: 40px;
  width: auto;
  border-radius: 0;           /* override global image border-radius */
}


/* ------------------------------------------------------------
   3. NAV LINKS
   ------------------------------------------------------------ */

.site-navigation a,
.elementor-nav-menu--main .elementor-item {
  font-family: var(--fs-font);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-semibold);
  color: var(--fs-color-field-bg);         /* #d0d6d5 — links default */
  text-decoration: none;
  padding: var(--fs-space-sm) var(--fs-space-sm);
  transition: color var(--fs-transition-base);
  position: relative;
}

/* Hover */
.site-navigation a:hover,
.elementor-nav-menu--main .elementor-item:hover {
  color: var(--fs-color-accent);           /* #178496 */
}

/* Active / current page */
.site-navigation a.current-menu-item,
.site-navigation a[aria-current="page"],
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--fs-color-page-bg);          /* #FCFBFA — brighter white */
}

/* Active underline */
.site-navigation a.current-menu-item::after,
.elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--fs-space-sm);
  right: var(--fs-space-sm);
  height: 2px;
  background-color: var(--fs-color-page-bg);
  border-radius: 1px;
}


/* ------------------------------------------------------------
   4. DROPDOWN MENUS
   ------------------------------------------------------------ */

.sub-menu,
.elementor-nav-menu--dropdown {
  background-color: var(--fs-color-dark);
  border-top: 2px solid var(--fs-color-primary);
  border-radius: 0 0 var(--fs-radius) var(--fs-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  min-width: 220px;
  padding: var(--fs-space-xs) 0;
}

.sub-menu a,
.elementor-nav-menu--dropdown .elementor-item {
  font-size: var(--fs-font-size-sm);
  font-weight: var(--fs-font-weight-regular);
  color: var(--fs-color-field-bg);
  padding: var(--fs-space-xs) var(--fs-space-md);
  display: block;
  transition: 
    color var(--fs-transition-base),
    background-color var(--fs-transition-base);
}

.sub-menu a:hover,
.elementor-nav-menu--dropdown .elementor-item:hover {
  color: var(--fs-color-accent);
  background-color: rgba(255, 255, 255, 0.05);
}


/* ------------------------------------------------------------
   5. MOBILE NAVIGATION
   Dropdown from top per design spec.
   ------------------------------------------------------------ */

@media (max-width: 1024px) {

  /* Hamburger toggle button */
  .elementor-menu-toggle,
  .nav-toggle {
    color: var(--fs-color-field-bg);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--fs-space-xs);
  }

  .elementor-menu-toggle:hover,
  .nav-toggle:hover {
    color: var(--fs-color-accent);
  }

  /* Mobile menu panel — drops from top */
  .elementor-nav-menu--mobile .elementor-nav-menu,
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background-color: var(--fs-color-dark);
    width: 100%;
    padding: var(--fs-space-sm) 0;
    border-top: 2px solid var(--fs-color-primary);
  }

  /* Mobile menu links */
  .elementor-nav-menu--mobile .elementor-item,
  .elementor-nav-menu--dropdown .elementor-item {
    font-family: var(--fs-font);
    font-size: var(--fs-font-size-base);
    font-weight: var(--fs-font-weight-semibold);
    color: var(--fs-color-field-bg);
    padding: var(--fs-space-sm) var(--fs-space-md);
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color var(--fs-transition-base);
  }

  .elementor-nav-menu--mobile .elementor-item:hover,
  .elementor-nav-menu--dropdown .elementor-item:hover {
    color: var(--fs-color-accent);
  }

  .elementor-nav-menu--mobile .elementor-item.elementor-item-active {
    color: var(--fs-color-page-bg);
  }

  /* Mobile sub-menu indent */
  .elementor-nav-menu--mobile .sub-menu .elementor-item,
  .elementor-nav-menu--dropdown .sub-menu .elementor-item {
    padding-left: var(--fs-space-lg);
    font-weight: var(--fs-font-weight-regular);
    font-size: var(--fs-font-size-sm);
  }

}


/* ------------------------------------------------------------
   6. FOOTER
   ------------------------------------------------------------ */

.site-footer,
footer.elementor-section {
  background-color: var(--fs-color-dark);
  padding: var(--fs-space-2xl) var(--fs-space-md) var(--fs-space-lg);
}

/* Footer inner max width */
.site-footer .footer-inner,
.site-footer .elementor-container {
  max-width: var(--fs-max-width);
  margin: 0 auto;
}

/* Footer headings */
.site-footer h3,
.site-footer h4,
.site-footer .elementor-heading-title {
  font-family: var(--fs-font);
  font-weight: var(--fs-font-weight-bold);
  color: var(--fs-color-page-bg);          /* #FCFBFA */
  margin-bottom: var(--fs-space-sm);
}

/* Footer body text */
.site-footer p,
.site-footer li,
.site-footer .elementor-text-editor {
  font-family: var(--fs-font);
  font-size: var(--fs-font-size-sm);
  color: var(--fs-color-field-bg);         /* #d0d6d5 */
  line-height: var(--fs-line-height-base);
}

/* Footer links */
.site-footer a {
  color: var(--fs-color-field-bg);
  text-decoration: none;
  transition: color var(--fs-transition-base);
}

.site-footer a:hover {
  color: var(--fs-color-accent);
}

/* Footer divider */
.site-footer hr,
.footer-divider {
  border: none;
  border-top: 1px solid var(--fs-color-text);  /* #545e5e */
  margin: var(--fs-space-lg) 0;
}

/* Footer bottom bar */
.footer-bottom {
  font-size: var(--fs-font-size-sm);
  color: var(--fs-color-text-muted);
  text-align: center;
  padding-top: var(--fs-space-sm);
}


/* ------------------------------------------------------------
   7. ELEMENTOR NAV MENU WIDGET OVERRIDES
   Targets Elementor's nav menu widget specifically to ensure
   design system values apply regardless of widget settings.
   ------------------------------------------------------------ */

/* Nav menu container background */
.elementor-widget-nav-menu .elementor-nav-menu--main {
  background-color: transparent;          /* inherits from header section */
}

/* Override any Elementor inline color on nav items */
.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu--main .elementor-item:visited {
  color: var(--fs-color-field-bg);
}

.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item:focus {
  color: var(--fs-color-accent);
}

/* Remove Elementor's default indicator line if present */
.elementor-nav-menu--main .elementor-item::after {
  display: none;
}

/* Restore our custom active underline */
.elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  display: block;
}