/* FLOWLINE primary navigation.
   Lives inside the existing Elementor header (.flh-navwrap), so this only
   describes the nav itself and its dropdowns — the bar, logo and sticky
   behaviour stay owned by the header template and its plugin. */

.flx-nav{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

.flx-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:0 22px;
}
.flx-item{position:relative;margin:0}

.flx-item > a{
  position:relative;
  display:inline-block;
  padding-bottom:5px;
  color:#C8D2D8;
  font-size:14px;
  line-height:1.2;
  text-decoration:none;
  transition:color .18s ease;
}
/* the same underline sweep the icon-list nav used, kept for continuity */
.flx-item > a::after{
  content:"";
  position:absolute;
  left:0; right:100%; bottom:0;
  height:1px;
  background:#35D1C4;
  transition:right .24s cubic-bezier(.22,.61,.36,1);
}
.flx-item > a:hover{color:#fff}
.flx-item > a:hover::after{right:0}
.flx-current > a{color:#fff}
.flx-current > a::after{right:0;background:rgba(53,209,196,.9)}

/* ------------------------------------------------------------- toggle */
.flx-toggle{
  background:none;
  border:0;
  padding:4px 2px 4px 5px;
  margin:0;
  color:#C8D2D8;
  cursor:pointer;
  line-height:0;
  vertical-align:middle;
}
.flx-chev{
  display:inline-block;
  width:7px; height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease;
}
.flx-toggle[aria-expanded="true"]{color:#35D1C4}
.flx-toggle[aria-expanded="true"] .flx-chev{transform:translateY(1px) rotate(-135deg)}

.flx-nav a:focus-visible,.flx-nav button:focus-visible{
  outline:1px solid #35D1C4;
  outline-offset:3px;
  border-radius:2px;
}

/* WordPress's own utility class is not guaranteed here, so define it. */
.flx-nav .screen-reader-text{
  position:absolute!important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------------------------------------------------------- dropdown */
.flx-sub{
  list-style:none;
  margin:0;
  padding:8px;
  display:none;
  position:absolute;
  top:calc(100% + 12px);
  left:-14px;
  min-width:232px;
  background:#0D2233;
  border:1px solid #294052;
  border-radius:10px;
  box-shadow:0 20px 44px rgba(0,0,0,.42);
  z-index:20;
}
.flx-sub::before{ /* keeps the pointer from falling through the gap */
  content:"";
  position:absolute;
  top:-12px; left:0; right:0;
  height:12px;
}
.flx-item.is-open > .flx-sub{display:block}
.flx-sub li{margin:0}
.flx-sub a{
  display:block;
  padding:9px 12px;
  border-radius:6px;
  color:#C8D2D8;
  font-size:14px;
  line-height:1.35;
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.flx-sub a:hover{background:rgba(53,209,196,.10);color:#fff}
.flx-sub a[aria-current="page"]{color:#fff;background:rgba(53,209,196,.14)}

/* tighten before anything can wrap */
@media (max-width:1199px){
  .flx-list{gap:0 16px}
  .flx-item > a{font-size:13px}
}

/* ------------------------------------------------- tablet + mobile panel */
/* The header plugin turns .flh-navwrap into a full-width dropdown panel below
   1024px. Inside it the nav becomes a stacked list and submenus open inline
   rather than floating. */
@media (max-width:1024px){
  .flx-list{flex-direction:column;align-items:stretch;gap:0}
  .flx-item{border-bottom:1px solid rgba(41,64,82,.55);display:flex;flex-wrap:wrap;align-items:center}
  .flx-item > a{flex:1 1 auto;padding:15px 2px;font-size:15px}
  .flx-item > a::after{display:none}
  .flx-toggle{
    flex:0 0 auto;
    padding:12px 6px;
    min-width:44px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .flx-sub{
    position:static;
    flex:1 1 100%;
    min-width:0;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0 0 10px 12px;
    border-left:1px solid rgba(53,209,196,.30);
    margin:0 0 12px;
  }
  .flx-sub::before{display:none}
  .flx-sub a{padding:11px 10px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .flx-nav *,.flx-nav *::before,.flx-nav *::after{transition:none!important}
}