@charset "UTF-8";
/**
 * Fullscreen Locations Layout
 * Minimal styles to achieve full-screen page layout
 */
.fullscreen-locations-wrapper {
  display: flex;
  width: 100%;
  /* Fill whatever viewport space is left below the in-flow numenu. The page
     body is a flex column (see below), so this needs no header-height math —
     it adapts to the numenu's real height. The list scrolls inside. */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Full-screen columns */
.fullscreen-locations-wrapper .wp-block-columns {
  width: 100%;
  height: 100%;
  margin: 0;
  gap: 0;
}

.fullscreen-locations-wrapper .wp-block-column {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Left column - Map (60%) */
.fullscreen-locations-wrapper .wp-block-column:first-child {
  flex: 0 0 60%;
  border-right: 1px solid #e0e0e0;
}

/* Right column - List (40%) */
.fullscreen-locations-wrapper .wp-block-column:last-child {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Map container — fill the pane. Cancel the map block's optional sticky offset
   (.retail-locations-map--sticky sets position:sticky; top:1.25em), which here
   just pushes the map down out of its column; the fixed pane already holds it. */
.fullscreen-locations-wrapper .retail-locations-map {
  width: 100%;
  height: 100%;
  position: static;
  top: auto;
}

/* Stores list scrollable container.
   min-height:0 is essential: a flex item defaults to min-height:auto (its
   content), which would make it grow instead of scroll. */
.fullscreen-locations-wrapper .retail-locations-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
}

/* Full-viewport app layout: the body is a locked flex column, so the numenu
   keeps its natural height at the top and the wrapper fills the rest exactly.
   The site footer isn't rendered on this template (see the page template). */
body.page-template-page-fullscreen-locations {
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1024px) {
  .fullscreen-locations-wrapper {
    flex-direction: column;
  }
  .fullscreen-locations-wrapper .wp-block-column:first-child {
    flex: 0 0 50%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }
  .fullscreen-locations-wrapper .wp-block-column:last-child {
    flex: 0 0 50%;
  }
}
/* Map canvas height - only full viewport on larger screens */
@media (min-width: 768px) {
  .retail-locations-map-canvas {
    height: 100vh;
  }
}
@media (max-width: 767px) {
  /* App-like fullscreen: reclaim the top header, keep the numenu bottom nav.
     Available height = viewport minus the fixed bottom nav
     (56px inner + 1px top border + notch-safe padding). */
  /* Hide the mobile top header. The numenu bottom nav (.bottomnav) stays. */
  .numenu > .mobile-header {
    display: none;
  }
  /* Lock the page — the list scrolls, not the body */
  body.page-template-page-fullscreen-locations {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }
  .fullscreen-locations-wrapper {
    /* Reserve space for the fixed bottom nav with an explicit height, so
       don't let the body's flex column stretch us over it. */
    flex: none;
    margin-top: 0;
    height: calc(100vh - 57px - max(20px, env(safe-area-inset-bottom, 0px) + 4px));
    height: calc(100dvh - 57px - max(20px, env(safe-area-inset-bottom, 0px) + 4px));
    overflow: hidden;
    /* Stack the two blocks vertically. WP's is-layout-flex sets
       flex-wrap:wrap — force nowrap so the tall map canvas can't wrap the
       list into a second column. */
  }
  .fullscreen-locations-wrapper .wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .fullscreen-locations-wrapper {
    /* Trailing spacer paragraph must not eat into the split */
  }
  .fullscreen-locations-wrapper > .wp-block-paragraph {
    display: none;
  }
  .fullscreen-locations-wrapper {
    /* WP's layout support caps direct children at the fluid content-size
       (≈ 335px here) and centers them. Neutralize it so the map and list
       fill the full width of their pane. */
  }
  .fullscreen-locations-wrapper .wp-block-column > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }
  .fullscreen-locations-wrapper {
    /* Top half — map, fixed (does not scroll) */
  }
  .fullscreen-locations-wrapper .wp-block-column:first-child {
    flex: 0 0 50% !important;
    flex-basis: 50% !important;
    width: 100%;
    min-height: 0;
    max-height: 50%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    overflow: hidden;
  }
  .fullscreen-locations-wrapper {
    /* Bottom half — the list pane. The list itself scrolls, so its own
       corner brackets would scroll away; anchor them to this
       non-scrolling pane instead so they frame the visible panel. */
  }
  .fullscreen-locations-wrapper .wp-block-column:last-child {
    position: relative;
    flex: 0 0 50% !important;
    flex-basis: 50% !important;
    width: 100%;
    min-height: 0;
    max-height: 50%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .fullscreen-locations-wrapper .wp-block-column:last-child::before, .fullscreen-locations-wrapper .wp-block-column:last-child::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    opacity: 0.25;
    pointer-events: none;
  }
  .fullscreen-locations-wrapper .wp-block-column:last-child::before {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
  }
  .fullscreen-locations-wrapper .wp-block-column:last-child::after {
    right: 8px;
    bottom: 8px;
    border-left: none;
    border-top: none;
  }
  .fullscreen-locations-wrapper {
    /* Pin the map (and its canvas) to the column — the plugin's JS sizes
       the canvas to the viewport, so override the inline height. */
  }
  .fullscreen-locations-wrapper .retail-locations-map,
  .fullscreen-locations-wrapper .retail-locations-map-canvas {
    height: 100% !important;
  }
  .fullscreen-locations-wrapper {
    /* The list is the only scrollable element; hide its own brackets. */
  }
  .fullscreen-locations-wrapper .retail-locations-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    padding-bottom: 24px;
    width: 100%;
  }
  .fullscreen-locations-wrapper .retail-locations-list::before, .fullscreen-locations-wrapper .retail-locations-list::after {
    display: none;
  }
}

/*# sourceMappingURL=fullscreen-locations.css.map */