/* ============================================ */
/* GENERAL (unchanged)                          */
/* ============================================ */
.sticky-top {
  height: 140em !important;          /* NOTE: 140em is about 2240px tall. Check this is intended (maybe px?). */
}

.upcmg-resp {
  width: 100px !important;
  height: 100px !important;
  display: inline-block;
}


/* ============================================ */
/* PHONE / TABLET (max 991.98px)                */
/* ============================================ */
@media screen and (max-width: 991.98px) {

  /* Hamburger + opened menu stay fixed at the top-left */
  .fixed-top-icon {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
  }

  .sticky-top {
    height: 110em !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .fs-4 {
    font-size: 1rem !important;
  }

  .underline-hover-effect {
    width: 100%;
  }

  /* REMOVED: ".nav-link { background-color:#666666; padding:5px }"  <- this was the grey box behind every menu link
     REMOVED: ".dropdown-item { color:#006666 }"                      <- always overridden by the dark dropdown below */
}


/* ============================================ */
/* NAVBAR                                       */
/* ============================================ */

/* ---- Hamburger button ---- */
.site-nav .navbar-toggler {
  font-size: 14px;
  color: #fff;
  border: 1px solid #fff;
  box-shadow: none;
}
@media (max-width: 991.98px) {
  .site-nav .navbar-toggler {
    padding-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 992px) {
  .site-nav .navbar-toggler { display: none !important; }      /* hidden on large screens */
}

/* ---- Links ---- */
.site-nav .navbar-nav { gap: 2px 8px; }

.site-nav .nav-link {
  position: relative;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: color .2s;
}

/* One underline only: the gold bar. Switch off the browser's own underline (this was the double underline). */
.site-nav .nav-link,
.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link:focus-visible,
.site-nav .nav-link.active {
  text-decoration: none !important;
}

.site-nav .nav-link::after {             /* gold underline on hover / current page */
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: 2px;
  height: 2px;
  background: #e0b866;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible,
.site-nav .nav-link.active,
.site-nav .nav-link.show { color: #e0b866; }
.site-nav .nav-link:hover::after,
.site-nav .nav-link:focus-visible::after,
.site-nav .nav-link.active::after { transform: scaleX(1); }

.site-nav a:focus-visible,
.site-nav .navbar-toggler:focus-visible { outline: 2px solid #e0b866; outline-offset: 2px; border-radius: 4px; }

/* ---- Dropdown ---- */
.site-nav .dropdown-menu {
  min-width: 280px;
  padding: 6px;
  background: rgba(8, 18, 38, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.site-nav .dropdown-header { color: #e0b866; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.site-nav .dropdown-item { color: #fff; border-radius: 6px; padding: 8px 12px; white-space: normal; }
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus { background: rgba(181, 143, 74, 0.22); color: #e0b866; }
.site-nav .dropdown-divider { border-color: rgba(255, 255, 255, 0.12); }

/* ---- Desktop ---- */
@media (min-width: 992px) {
  .site-nav .nav-link { padding: 6px 1rem 10px; font-size: 17px; }
  .site-nav .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }   /* open on hover */
}
@media (min-width: 1200px) {
  .site-nav .nav-link { font-size: 18px; }
}

/* ---- Phone / tablet: opened menu is a dark panel ---- */
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(8, 18, 38, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
  }

  /* Links fill the panel from the left edge */
  .site-nav .navbar-nav {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .site-nav .nav-item {
    width: 100%;
    margin: 0 !important;
  }
  .site-nav .nav-link {
    padding: 10px 4px;
    font-size: 16px;
    text-shadow: none;
  }
  .site-nav .nav-link::after { display: none; }       /* no bar in the mobile list */

  .site-nav .dropdown-menu {
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-link, .site-nav .nav-link::after { transition: none; }
}


/* ============================================ */
/* OLD HEADER (kept as it was)                  */
/* ============================================ */
@media (max-width: 768px) {
  .head-nav {
    max-height: 60px;
    display: flex;
    align-items: center;               /* keeps content centred vertically */
  }
}