/*
  IMPORTANT:
  This file owns ONLY banner, title, and Zoom To overlays.
  It must NEVER move or size the map.
*/

/* ==========================================================================
   Banner + ZoomTo Layout System (FINAL, STABLE)
   Works with Classic / Text / Sidebar Themes
   ========================================================================== */

/* ---------------------------
   GLOBAL VARIABLES
---------------------------- */

:root {
  --banner-maxh: 120px;
  --banner-top-offset: 12px;

  /* How far Zoom To sits below banner */
  --zoomto-offset: calc(var(--banner-top-offset) + 72px);

  --menu-color: #0d6efd;
  --banner-text-color: #000;
}

/* Floating header system — z-index MUST be below #button-panel (1500)
   and .mapboxgl-ctrl-top-right (1500) so menu buttons and map controls
   render ABOVE the banner when they overlap (matches live/blue server). */
#wm-header-stack {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
}

#wm-header-stack * {
  pointer-events: auto;
}

/* ============================================================
   MAP — MUST START AT TOP (NO EXCEPTIONS)
   ============================================================ */

#map-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   FIXED BANNER (OVERLAYS MAP)
   ============================================================ */

/* Banner must FLOAT — never push map */
#banner-wrapper {
  position: relative;      /* Flow within #wm-header-stack */
  top: auto;
  left: auto;
  width: 100%;
  padding-top: 8px;        /* Offset from top of viewport */
  display: flex;
  justify-content: center;

  z-index: 2100;
  pointer-events: none;
}

/* Allow interaction with banner contents */
#banner-wrapper * {
  pointer-events: auto;
}

#banner-content {
  position: relative;        /* Override map-view.css fixed positioning */
  top: auto;                 /* Reset — flows naturally within header stack */
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;    /* Stack image + text fallback vertically */
  align-items: center;
  justify-content: center;
  width: 100%;
}

.banner-img {
  max-height: 80px;
  width: auto;
  display: block;
}
/* Mobile text fallback — hidden on desktop, shown on narrow screens.
   Must use .banner.banner--text.banner--mobile to beat .banner.banner--text's
   display:flex specificity. */
.banner.banner--text.banner--mobile {
  display: none;
}

/* ============================================================
   IMAGE BANNER
   ============================================================ */

.banner.banner--image img {
  width: auto;
  max-width: 90vw;
  max-height: var(--banner-maxh);
  height: auto;

  object-fit: contain;
  display: block;
}

/* ============================================================
   TEXT BANNER
   ============================================================ */

.banner.banner--text {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0.35rem 1.2rem;
  height: auto;

  background: var(--menu-color);
  color: var(--banner-text-color);

  border-radius: 999px;   /* Full pill — matches menu buttons */
  font-size: 1.2rem;
  font-weight: 600;

  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

/* ============================================================
   ZOOM TO — BANNER SLOT (ONLY ELEMENT THAT MOVES DOWN)
   ============================================================ */

#banner-zoomto-slot {
  position: relative;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  padding: 6px 0;

  /* 🔒 IMPORTANT: allow clicks to pass through empty areas */
  pointer-events: none;
}

/* ============================================================
   ZOOM TO — TOPBAR SLOT (SIDEBAR THEME)
   ============================================================ */

/* Topbar zoom-to slot — lives inside #topbar (sidebar theme).
   Topbar uses justify-content:space-between, so this sits on the right.
   Vertically centered by the topbar's align-items:center. */
#topbar-zoomto-slot {
  display: flex;
  align-items: center;
  padding-right: 4px;
}

/* Compact zoom-to styling when inside the topbar */
#topbar-zoomto-slot .zoomto-select {
  min-width: 144px;
  max-width: 224px;
  padding: 4px 10px;
  font-size: 13px;
  height: 34px;
}

/* ============================================================
   ZOOM TO CONTROL STYLING
   ============================================================ */

.zoomto-wrapper {
  display: flex;
  justify-content: center;

  /* 🔓 Re-enable interaction ONLY on the control */
  pointer-events: auto;
}

.zoomto-wrapper * {
  pointer-events: auto;
}

.zoomto-select {
  min-width: 220px;
  max-width: 320px;

  padding: 6px 12px;
  font-size: 14px;

  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;

  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ============================================================
   THEME VISIBILITY RULES
   ============================================================ */

/* Classic + Text → banner + banner ZoomTo, hide topbar */
html[data-ui-theme="classic"] #topbar,
html[data-ui-theme="text"] #topbar {
  display: none !important;
}

/* Sidebar → topbar visible, banner hidden (sidebar has its own topbar) */
html[data-ui-theme="sidebar"] #topbar {
  display: flex !important;
}

/* Sidebar theme: hide banner + banner zoom slot (topbar-zoomto-slot stays visible) */
html[data-ui-theme="sidebar"] #banner-wrapper {
  display: none !important;
}

html[data-ui-theme="sidebar"] #banner-zoomto-slot {
  display: none !important;
}

/* ============================================================
   MAPBOX CONTROLS (NO BANNER OFFSET)
   ============================================================ */

.mapboxgl-control-container {
  margin-top: 0 !important;
}

/* ============================================================
   MOBILE ADJUSTMENTS
   ============================================================ */

@media (max-width: 650px) {
  /* Hide the image banner on narrow screens */
  .banner.banner--image {
    display: none !important;
  }

  /* Show the text pill fallback when image banner hides */
  .banner.banner--text.banner--mobile {
    display: flex !important;
  }

  .banner.banner--text {
    font-size: 1.1rem;
  }

  :root {
    --zoomto-offset: calc(var(--banner-top-offset) + 56px);
  }

  /* Sidebar theme: move zoom-to below the topbar on mobile */
  #topbar-zoomto-slot {
    position: absolute;
    top: 50px;              /* Just below the 50px topbar */
    left: 0;
    right: 0;
    justify-content: center;
    padding: 6px 0;
  }

  #topbar-zoomto-slot .zoomto-select {
    min-width: 200px;
    max-width: 80vw;
  }
}