/* Tandem Guru Retro Pink Navigation v1.7.9
   Loaded after Gantry's compiled CSS. Changes only the navigation colour mood;
   layout, dropdown geometry and mobile menu mechanics stay untouched. */

:root {
  --tg-nav-pink-deep: #7f3048;
  --tg-nav-pink-rust: #a9445d;
  --tg-nav-pink-retro: #c75c76;
  --tg-nav-pink-coral: #df7887;
  --tg-nav-pink-cream: #fff8e8;
  --tg-nav-pink-ink: #08262a;
}

#g-navigation,
#g-navigation.headroom-bg-section,
#g-navigation.headroom--top,
#g-navigation.headroom--not-top,
#g-navigation.headroom--pinned,
#g-navigation.headroom--unpinned {
  color: var(--tg-nav-pink-cream) !important;
  background:
    radial-gradient(circle at 10% -45%, rgba(255, 206, 117, .24) 0 4.7rem, transparent 4.9rem),
    radial-gradient(circle at 91% 135%, rgba(239, 128, 169, .28) 0 7.2rem, transparent 7.4rem),
    linear-gradient(98deg, rgba(86, 23, 48, .18), transparent 29%, rgba(255, 231, 196, .09) 56%, transparent 78%),
    repeating-linear-gradient(104deg, transparent 0 4.4rem, rgba(255, 248, 232, .045) 4.45rem 4.52rem),
    linear-gradient(112deg, var(--tg-nav-pink-deep) 0%, var(--tg-nav-pink-rust) 30%, var(--tg-nav-pink-retro) 63%, #b44b64 82%, #8d354f 100%) !important;
  border-top-color: rgba(255, 248, 232, .22) !important;
  box-shadow:
    0 .24rem 0 rgba(8, 38, 42, .9),
    0 .72rem 1.8rem rgba(63, 24, 42, .27) !important;
}

/* Replace the older rusty overlay with a lighter faded-poster pattern. */
#g-navigation::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 210, 116, .18) 0 2.8rem, transparent 3rem),
    radial-gradient(circle at 89% 112%, rgba(244, 142, 174, .22) 0 5.6rem, transparent 5.8rem),
    repeating-linear-gradient(102deg, transparent 0 3.8rem, rgba(255, 248, 232, .035) 3.86rem 3.96rem) !important;
  mix-blend-mode: screen;
}

#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
  color: var(--tg-nav-pink-cream) !important;
  text-shadow: 0 2px 0 rgba(91, 28, 53, .58) !important;
}

#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container,
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container {
  color: #fffdf7 !important;
}

#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container {
  background: rgba(255, 248, 232, .11) !important;
}

#g-navigation .g-logo img {
  background: rgba(65, 20, 39, .28) !important;
  border-color: rgba(255, 248, 232, .48) !important;
  box-shadow: .18rem .22rem 0 rgba(57, 18, 34, .72) !important;
}

/* Keep the already successful dropdown design intact. Only the mobile panel gets
   a matching berry-pink background, without changing submenu positioning. */
@media only all and (max-width: 50.99rem) {
  #g-navigation,
  #g-navigation.headroom-bg-section,
  #g-navigation.headroom--top,
  #g-navigation.headroom--not-top,
  #g-navigation.headroom--pinned,
  #g-navigation.headroom--unpinned {
    background:
      radial-gradient(circle at 8% -35%, rgba(255, 210, 116, .2) 0 4.2rem, transparent 4.4rem),
      linear-gradient(110deg, rgba(255,255,255,.08), transparent 44%),
      linear-gradient(112deg, #84324b 0%, #b64d67 56%, #ce647b 78%, #963b56 100%) !important;
  }

  #g-offcanvas,
  .g-offcanvas-open #g-offcanvas {
    background:
      radial-gradient(circle at 13% 7%, rgba(255, 210, 116, .18) 0 5.8rem, transparent 6rem),
      radial-gradient(circle at 88% 94%, rgba(126, 103, 202, .2) 0 8rem, transparent 8.2rem),
      linear-gradient(145deg, #6f2944 0%, #9f405c 54%, #7b304c 100%) !important;
  }
}