/* Modern header and dropdown styles */

/* fixed header polish */
.navigation-bar{
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  backdrop-filter: saturate(1.2) blur(3px);
}

/* base navigation container (mobile default visible via toggle) */
.navigation-bar .navigation{
  background: #fff;
}

/* spacing for list */
.navigation-bar .navigation .menu{ gap: 4px; }

/* top-level items */
.navigation-bar .navigation .menu > li.menu-item > a{
  padding: 10px 14px !important;
  border-radius: 8px;
}
.navigation-bar .navigation .menu > li > a:hover,
.navigation-bar .navigation .menu > li > a:focus{
  background: #F3F6FF !important;
  color: #0f1144 !important;
}
.navigation-bar .navigation .menu > li:hover > a{
  background: #F3F6FF;
  color: #0f1144;
}

/* caret for items with children */
.navigation-bar .navigation .menu > li.menu-item-has-children > a::after{
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.navigation-bar .navigation .menu > li.menu-item-has-children:hover > a::after{
  transform: rotate(225deg);
}

/* dropdown base */
.navigation-bar .navigation .menu .sub-menu,
.navigation-bar .navigation .menu .menu-item > ul{
  background: #1B1C5C !important;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  z-index: 1052;
}

/* make behavior consistent on all pages (override legacy .block rule) */
.block .navigation-bar .navigation .current-menu-parent > .sub-menu,
.block .navigation-bar .navigation .current-menu-parent > ul{
  display: block !important; /* keep layout context for positioning */
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 8px !important;
}
.navigation-bar .navigation .menu .sub-menu a{
  color: #fff;
  padding: 10px 14px;
  display: block;
  border-radius: 6px;
  white-space: nowrap;
}
.navigation-bar .navigation .menu .sub-menu a:hover,
.navigation-bar .navigation .menu .sub-menu a:focus{
  background: rgba(255,255,255,.15) !important;
}

/* desktop hover behavior */
@media (min-width: 992px){
  .navigation-bar .navigation{visibility: visible; opacity: 1; box-shadow: none; background: transparent;}
  .navigation-bar .navigation .menu{flex-direction: row !important; justify-content: center; padding-top: 0}
  .navigation-bar .navigation .menu > li > a{display:block}
  .navigation-bar .navigation .menu > li{position: relative}
  .navigation-bar .navigation .menu > li > .sub-menu,
  .navigation-bar .navigation .menu > li > ul{
  display: block;
    position: absolute;
    top: 100%; left: 0;
  right: auto; /* override previous right:0 */
  width: auto; /* override previous width:100% */
  text-align: left; /* override previous text-align:center */
  min-width: 220px;
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: all .2s ease;
  }
  .navigation-bar .navigation .menu > li:hover > .sub-menu,
  .navigation-bar .navigation .menu > li:hover > ul{
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  /* third level flyout */
  .navigation-bar .navigation .menu > li > .sub-menu > li.menu-item-has-children{position: relative}
  .navigation-bar .navigation .menu > li > .sub-menu > li.menu-item-has-children > .sub-menu,
  .navigation-bar .navigation .menu > li > ul > li.menu-item-has-children > ul{
  display: block;
    top: 0; left: 100%; min-width: 220px; position: absolute;
    opacity: 0; visibility: hidden; transform: translateX(8px); transition: all .2s ease;
  }
  .navigation-bar .navigation .menu > li > .sub-menu > li.menu-item-has-children:hover > .sub-menu,
  .navigation-bar .navigation .menu > li > ul > li.menu-item-has-children:hover > ul{
    opacity: 1; visibility: visible; transform: translateX(0);
  }
}

/* mobile/touch: collapsed submenus with .open class */
@media (max-width: 991.98px){
  .navigation-bar .navigation{
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,.16) inset;
  }
  .navigation-bar .navigation .menu .sub-menu,
  .navigation-bar .navigation .menu .menu-item > ul{
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; padding: 0; transition: all .2s ease;
  }
  .navigation-bar .navigation .menu .sub-menu.open,
  .navigation-bar .navigation .menu .menu-item > ul.open{
    max-height: 1000px; opacity: 1; visibility: visible; padding: 8px;
  }
  .navigation-bar .navigation .menu > li.menu-item-has-children > a{position: relative}
  .navigation-bar .navigation .menu > li.menu-item-has-children > a::after{position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(45deg)}
  /* show background while submenu is open (mobile) */
  .navigation-bar .navigation .menu > li.menu-item-has-children > a[aria-expanded="true"]{
    background: #F3F6FF !important;
    color: #0f1144 !important;
  }
}

/* --- Header social icons & CTA button polish --- */
.navigation-bar .navigation .header-button-wrapper{display:flex; align-items:center; gap:10px; padding:8px 0}
.navigation-bar .navigation .header-button-wrapper .btn.teamviewer-download-button{
  background:#00B8F0 !important;
  color:#fff !important;
  border:1px solid #00A0D0;
  border-radius:999px;
  padding:8px 14px !important;
  font-weight:600;
  line-height:1;
  box-shadow: 0 6px 16px rgba(0,184,240,.25);
}
.navigation-bar .navigation .header-button-wrapper .btn.teamviewer-download-button:hover{
  background:#00AEE0 !important;
  border-color:#0099C8;
  box-shadow: 0 8px 18px rgba(0,184,240,.35);
}

.navigation-bar .navigation .social-menu{display:flex; gap:8px; align-items:center; justify-content:center; padding:8px 0}
.navigation-bar .navigation .social-menu li{display:inline-flex}
.navigation-bar .navigation .social-menu a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:#F3F6FF; color:#1B1C5C;
  box-shadow: inset 0 0 0 1px rgba(27,28,92,.08);
  transition: all .2s ease;
}
.navigation-bar .navigation .social-menu a:hover{
  background:#00B8F0; color:#fff;
  box-shadow:none;
}

@media (min-width: 992px){
  .navigation-bar .navigation .header-button-wrapper{padding:0}
}