/* ==========================================================================
   Standalone mobile menu (gcm-*)
   Self-contained: uses no Webflow (.w-nav*) classes, so Webflow's runtime
   never touches it. Only active at <= 1130px. Desktop nav is untouched.
   ========================================================================== */

.gcm-root {
  --gcm-brand: #2f4e78;
  --gcm-brand-dark: #223a5c;
  --gcm-accent: #f5a623;
  --gcm-text: #1f2937;
  --gcm-muted: #6b7280;
  --gcm-line: #eceef2;
  display: none;
}

/* Backdrop */
.gcm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 100000;
}

.gcm-root.gcm-open .gcm-overlay {
  opacity: 1;
  visibility: visible;
}

/* Sliding panel */
.gcm-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 400px);
  max-width: 400px;
  background: #fff;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
  will-change: transform;
}

.gcm-root.gcm-open .gcm-panel {
  transform: translateX(0);
}

/* Header row (logo + close) */
.gcm-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--gcm-line);
  background: #fff;
}

.gcm-header img {
  height: 38px;
  width: auto;
}

.gcm-close {
  appearance: none;
  border: none;
  background: var(--gcm-brand);
  color: #fff;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  padding: 0;
}

.gcm-close:hover {
  background: var(--gcm-brand-dark);
  transform: rotate(90deg);
}

.gcm-close svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Scrollable body */
.gcm-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 0 12px;
}

.gcm-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gcm-item {
  border-bottom: 1px solid var(--gcm-line);
}

/* Plain links + accordion toggles share the same row look */
.gcm-link,
.gcm-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  padding: 15px 22px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--gcm-text);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease, background 0.2s ease;
}

.gcm-link:hover,
.gcm-toggle:hover,
.gcm-toggle[aria-expanded="true"] {
  color: var(--gcm-brand);
  background: #f7f9fc;
}

.gcm-link i {
  color: var(--gcm-brand);
  margin-right: 8px;
}

/* Chevron */
.gcm-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--gcm-muted);
  transition: transform 0.3s ease, color 0.2s ease;
}

.gcm-toggle[aria-expanded="true"] .gcm-chevron {
  transform: rotate(180deg);
  color: var(--gcm-brand);
}

/* Sub-menu (accordion) */
.gcm-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  background: #f7f9fc;
  transition: max-height 0.35s ease;
}

.gcm-sub.gcm-sub-open {
  max-height: 640px;
}

.gcm-sub a {
  display: block;
  padding: 12px 22px 12px 40px;
  font-size: 15px;
  font-weight: 400;
  color: var(--gcm-muted);
  text-decoration: none;
  border-top: 1px solid #e6eaf0;
  transition: color 0.2s ease, background 0.2s ease;
}

.gcm-sub a:hover {
  color: var(--gcm-brand);
  background: #eef2f8;
}

/* Footer (apply + social) */
.gcm-footer {
  flex: 0 0 auto;
  padding: 16px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--gcm-line);
  background: #fff;
}

.gcm-apply {
  display: block;
  width: 100%;
  padding: 13px 16px;
  background: var(--gcm-brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease;
}

.gcm-apply:hover {
  background: var(--gcm-brand-dark);
}

.gcm-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.gcm-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gcm-social img {
  height: 18px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.gcm-social a:hover img {
  opacity: 1;
}

/* #menu-burger is now a <button> — strip the UA button chrome so it looks
   exactly like the old <div> icon (transparent, no border). */
#menu-burger.menu-button {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  outline: none;
}

/* Only render the standalone menu on mobile/tablet.
   Hide the burger-driven legacy overlay behavior there too. */
@media (max-width: 1130px) {
  .gcm-root {
    display: block;
  }
}

/* Prevent the legacy Webflow nav overlay from ever showing on mobile —
   the standalone menu fully replaces it. */
@media (max-width: 1130px) {
  .nav-menu-wrapper.w-nav-menu,
  .nav-menu-wrapper.w-nav-menu.open {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Desktop nav stability.
   The intermittent "menu items drop below the navbar on some page loads"
   came from the flex nav row being allowed to wrap. Lock the row so a
   borderline width (e.g. scrollbar appearing/disappearing between client-side
   navigations) can never push items onto a second line.
   -------------------------------------------------------------------------- */
@media (min-width: 1131px) {
  .navbar-wrapper,
  .nav-menu-wrapper.w-nav-menu,
  .nav-menu.w-list-unstyled {
    flex-wrap: nowrap !important;
  }
}

/* Reserve the scrollbar gutter so viewport width stays constant between
   pages that scroll and pages that don't — removes the width jitter that
   nudged the nav into wrapping. */
html {
  scrollbar-gutter: stable;
}