/* Main menu: Home + drop-downs (desktop), fold-out sections (phones). */

/* Desktop menu shows from 1024px wide; below that the menu button is used */
.site-nav-wrap { display: none; }
@media (min-width: 1024px) {
  .site-nav-wrap { display: block; }
  .site-menu-btn, #mobile-menu { display: none !important; }
}

.site-nav { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.site-nav-top {
  display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .85rem; border: 0; border-radius: .55rem;
  background: none; color: #9C9CA8; font: 500 .95rem/1.2 Figtree, system-ui, sans-serif; text-decoration: none; cursor: pointer;
  transition: color .15s, background-color .15s;
}
.site-nav-top:hover, .site-nav-group.is-open > .site-nav-top { color: #fff; background: rgba(255,255,255,.05); }
.site-nav-top.is-active { color: #fff; text-decoration: underline; text-decoration-color: #ED1B24; text-decoration-thickness: 2px; text-underline-offset: 10px; }
.site-nav-top svg { width: .8rem; height: .8rem; opacity: .7; transition: transform .2s; }
.site-nav-group.is-open > .site-nav-top svg { transform: rotate(180deg); }
.site-nav-top:focus-visible, .site-nav-menu a:focus-visible { outline: 2px solid #FF3A42; outline-offset: 2px; }

.site-nav-group { position: relative; }
.site-nav-menu {
  position: absolute; top: calc(100% + .7rem); left: -.4rem; z-index: 50; min-width: 15.5rem; padding: .45rem;
  border: 1px solid #2A2A33; border-radius: .9rem; background: #141419; box-shadow: 0 24px 60px -12px rgba(0,0,0,.85);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.site-nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem; } /* keeps it open while the mouse moves down */
.site-nav-group.is-open > .site-nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.site-nav-menu ul { margin: 0; padding: 0; list-style: none; }
.site-nav-menu a {
  display: block; padding: .6rem .8rem; border-radius: .55rem; color: #F2F2F4;
  font-size: .95rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .12s, color .12s;
}
.site-nav-menu a:hover { background: #1F1F27; color: #fff; }
.site-nav-menu a[aria-current="page"] { color: #FF3A42; }
.site-nav-menu a.all { color: #9C9CA8; font-size: .88rem; }
.site-nav-menu a.all:hover { color: #fff; }
.site-nav-menu .sep { height: 1px; margin: .4rem .55rem; background: #24242C; }

/* Small laptops and landscape tablets: a little tighter so everything fits on one line */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav-top { padding: .5rem .55rem; font-size: .9rem; }
  .site-logo img { height: 2.25rem; }
}

/* Phones and tablets */
.m-nav { border-top: 1px solid rgba(36,36,44,.6); max-height: calc(100svh - 4rem); overflow-y: auto; }
.m-nav-link {
  display: flex; align-items: center; justify-content: space-between; padding: .85rem .75rem; border-radius: .6rem;
  color: #F2F2F4; font-size: 1.12rem; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none;
}
.m-nav-link::-webkit-details-marker { display: none; }
.m-nav-link:hover { background: #141419; }
.m-nav-link.is-active { color: #FF3A42; }
.m-nav-link svg { width: 1.1rem; height: 1.1rem; opacity: .7; transition: transform .2s; }
.m-nav-group[open] > .m-nav-link svg { transform: rotate(180deg); }
.m-nav-group ul { margin: 0 0 .4rem; padding: 0 0 0 .75rem; list-style: none; border-left: 2px solid #24242C; margin-left: .75rem; }
.m-nav-group a { display: block; padding: .6rem .75rem; border-radius: .5rem; color: #C9CDD6; font-size: 1.02rem; text-decoration: none; }
.m-nav-group a:hover { background: #141419; color: #fff; }
.m-nav-group a[aria-current="page"] { color: #FF3A42; }
.m-nav-call { display: block; margin-top: .5rem; padding: .85rem .75rem; color: #FF3A42; font-size: 1.12rem; font-weight: 700; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .site-nav-menu, .site-nav-top svg, .m-nav-link svg { transition: none; }
}