/********** Header menu on inner pages (same style as the home page) ************/
/* A dark strip with the logo in a white notch top-left, the outlined pill menu
   in the middle and round contact buttons on the right. */

.site-nav {
  --nav-side: clamp(16px, 3vw, 36px);
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 18px var(--nav-side);
  background: #090979;
  background: radial-gradient(circle, rgba(9, 9, 121, 1) 0%, rgba(156, 0, 65, 1) 0%, rgba(9, 9, 121, 1) 100%);
  font-family: 'Inter Tight', 'Rubik', sans-serif;
}

.site-nav .fx-nav-wrap .navbar {
  display: flex;
  padding: 0 !important;
}

/* Logo in a white notch, with curved inner corners where it meets the strip */
.site-nav .navbar-brand {
  position: relative;
  display: flex;
  align-items: center;
  margin: -18px 0 -18px calc(-1 * var(--nav-side));
  padding: 18px 28px 18px var(--nav-side);
  border-bottom-right-radius: 28px;
  background: #ffffff;
}

.site-nav .navbar-brand::before,
.site-nav .navbar-brand::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 100% 100%, transparent 27.5px, #ffffff 28px);
  pointer-events: none;
}

.site-nav .navbar-brand::before { top: 0; left: 100%; }
.site-nav .navbar-brand::after { display: none; }

.site-nav .navbar-brand img.fx-brand-logo { width: 210px; }
.site-nav .gpw-logo { width: 36px; margin-left: 8px; }

@media (min-width: 1280px) {
  .site-nav .navbar-brand img.fx-brand-logo { width: 240px; }
  .site-nav .gpw-logo { width: 42px; }
}

@media (max-width: 1399.98px) {
  .site-nav .gpw-logo { display: none; }
}

/* Outlined pill menu */
.site-nav .navbar-nav.fx-pill {
  margin: 0 auto;
  padding: 4px;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
}

html body .site-nav .navbar-light .navbar-nav .nav-link {
  padding: 8px 10px;
  border-radius: 999px;
  font-family: 'Inter Tight', 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  color: #ffffff;
}

html body .site-nav .navbar-light .navbar-nav .nav-link:hover,
html body .site-nav .navbar-light .navbar-nav .nav-link:focus { color: #ffffff; background: rgba(255, 255, 255, .15); }

html body .site-nav .navbar-light .navbar-nav .nav-link.active { background: #FBF3E6; color: #1d120c; }

/* Submenus */
html body .site-nav .dropdown-menu {
  margin-top: 8px !important;
  padding: 8px;
  border: 0;
  border-radius: 16px !important;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(20, 8, 40, .25);
}

html body .site-nav .dropdown-item {
  border-radius: 10px;
  font-family: 'Inter Tight', 'Rubik', sans-serif;
  font-size: 14px;
  color: #1d120c;
}

html body .site-nav .dropdown-item:hover,
html body .site-nav .dropdown-item:focus { background: rgba(244, 120, 32, .14); color: #E2531A; }

@media (min-width: 992px) {
  .site-nav .dropdown-menu {
    display: block;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .site-nav .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .site-nav .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
  }
}

/* Round contact buttons */
.site-nav .fx-social { display: flex; gap: 8px; margin-left: 12px; }

.site-nav a.fx-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  font-size: 15px;
  color: #E2531A;
  text-decoration: none;
  transition: transform .2s;
}

.site-nav a.fx-social-btn:hover { transform: translateY(-2px); color: #E2531A; }

/* Mobile toggler and collapsed menu */
.site-nav .navbar-toggler { width: auto; margin-left: auto; padding: 6px 10px; border-color: rgba(255, 255, 255, .6); }
html body .site-nav .navbar-toggler-icon { filter: brightness(0) invert(1); }

@media (min-width: 992px) and (max-width: 1279.98px) {
  .site-nav .navbar-brand img.fx-brand-logo { width: 165px; }
  html body .site-nav .navbar-light .navbar-nav .nav-link { padding: 8px 7px; font-size: 12px; }
  .site-nav .fx-social { gap: 6px; margin-left: 8px; }
  .site-nav a.fx-social-btn { width: 32px; height: 32px; font-size: 13px; }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
  .site-nav .fx-social { display: none; }
}

@media (max-width: 991.98px) {
  .site-nav .fx-nav-wrap .navbar { flex-wrap: wrap; }
  .site-nav .navbar-brand { padding: 14px 20px 14px var(--nav-side); border-bottom-right-radius: 22px; }
  .site-nav .navbar-brand::before { width: 22px; height: 22px; background: radial-gradient(circle at 100% 100%, transparent 21.5px, #ffffff 22px); }
  .site-nav .navbar-brand img.fx-brand-logo { width: 160px; }
  .site-nav .navbar-collapse { flex-basis: 100%; margin-top: 16px; padding: 10px; border-radius: 22px; background: rgba(0, 0, 30, .35); }
  .site-nav .navbar-nav.fx-pill { margin: 0; border: 0; border-radius: 0; }
  html body .site-nav .navbar-light .navbar-nav .nav-link { padding: 10px 12px; }
  .site-nav .fx-social { margin: 10px 4px 4px; }
}


/* Submenus: white background, and white behind the hovered item (same as the home page) */
html body .site-nav .dropdown-menu { background: #ffffff; }
html body .site-nav .dropdown-item:hover,
html body .site-nav .dropdown-item:focus { background: #ffffff; }

/* Same colour as the home page header banner (no image) */
.site-nav {
  background: #0b0a3c;
  background: linear-gradient(90deg, #0b0a3c 0%, #1a0f5c 45%, #3a1680 75%, #1e0f62 100%);
}

/* Dark theme: dark header strip */
html[data-theme="dark"] .site-nav {
  background: #121318;
  border-bottom: 1px solid #2f333d;
}

html[data-theme="dark"] body .site-nav .dropdown-menu {
  background: #1b1d24;
  border: 1px solid #2f333d;
}

html[data-theme="dark"] body .site-nav .dropdown-item { color: #e6e7eb; }

html[data-theme="dark"] body .site-nav .dropdown-item:hover,
html[data-theme="dark"] body .site-nav .dropdown-item:focus {
  background: #F47820;
  color: #ffffff;
}