/* =========================
   DEFAULT (DESKTOP FIRST)
   ========================= */

/* Sticky header - keeps the nav fixed at the top on all pages including detail pages */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Hide mobile menu */
.navigation__mobile-menu {
  display: none; 
}


 


 
.navigation__help-menu {
    position: fixed;
    left: 0;
    top: 160px; /* header + filter height */   
    height: calc(100vh - 160px);
 
    background: #fff;
    z-index: 99999 !important;
    overflow-y: auto;
}
 
 
 

/* =========================
   OVERLAY PANEL (RIGHT SIDE)
   ========================= */
 
.vertical-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%; /* adjust if needed */
  height: 100%;
  background: #ffffff;
  z-index: 1500;
 
  /* hidden by default */
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
 
/*  When active → slide in */
.vertical-overlay.active {
  transform: translateX(0);
}
 
 
/* =========================
    BACKGROUND DIM
   ========================= */
 
.vertical-overlay__background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
 
 
/* =========================
    STRUCTURE FIX (IMPORTANT)
   ========================= */
 
/*  Fix layout so footer stays at bottom */
.vertical-overlay__holder {
  display: flex;
  flex-direction: column;
  height: 100%;
}
 
 
/*  Scrollable content area */
.vertical-overlay__content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
 
 
/*  Header styling */
.vertical-overlay__title {
  padding: 16px;
  border-bottom: 1px solid #eee;
}
 
 
/*  Footer always at bottom */
.vertical-overlay__footer {
  border-top: 1px solid #eee;
  padding: 16px;
}

 
.vertical-overlay__footer button span {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.vertical-overlay__footer button .icon {
    font-size: 14px;
}

 

/* =========================
   OPTIONAL POLISH
   ========================= */
 
.vertical-overlay__navi-item-holder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
}

.navigation__content {
  align-items: center !important;

}
 
 
/* Prevent background scroll */
.no-scroll {
  overflow: hidden;
}

.navigation__skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.navigation__skip-link:focus,
.navigation__skip-link:focus-visible {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);

    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;

    overflow: visible;
    clip: auto;
    white-space: nowrap;

    background: #ffffff;
    border: 2px solid #00793a;
    border-radius: 4px;
    color: #000;

    z-index: 99999;
} 
 
 
/* =========================
   MOBILE VIEW
   ========================= */
@media (max-width: 375px){
	 .navigation__off-grid-logo-background {
    width: 24px;
  }
}
 
@media (max-width: 300px) {
	
  /* Hide desktop nav */
  .navigation__item-section {
    display: none;
  }
 
  /* Show mobile nav */
  .navigation__mobile-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
 
  .navigation__mobile-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
 
  /*  Make full screen overlay for mobile */
  .vertical-overlay {
    width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .baseblock.is-navi.navigation .navigation__content {
    margin-left: 10px !important;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    gap: 0.4rem !important;
  }

  .baseblock.is-navi.navigation .navigation__search-section {
    gap: 0.8rem !important;
  }

  /* .baseblock.is-navi.navigation .navigation__logo-holder {
    padding: 1.2rem 1.6rem !important;
  } */

  .baseblock.is-navi.navigation .navigation__menu-trigger--map {
    min-width: 0 !important;
  }
}

@media screen and (min-width: 1601px) {
  .navigation .navigation__content {
    margin-right: calc(var(--content-padding) + (91dvw - var(--max-content-width)) / 2) !important;
  }
}

/* Keep active/hover nav underline visually closer to label text. */
.navigation .navigation__button.paragraph-xl::before {
  top: 0 !important;
  bottom: 5px !important;
}

/* @media screen and (max-width: 600px) {
  .navigation .navigation__off-grid-logo-background {
    display: none !important;
  }
} */