/* ============================================================
   Tasmania Wine & Booze — Hero Map
   Scoped styles for the [tasdir_hero_map] shortcode.
   Targets markup wrapped in .tasdir-hero-scope so the same
   #tasdir-explore-wrap / #tasdir-explore-cesium IDs can be
   reused by explore-leaflet.js without clashing with the
   full-page /explore/ layout.
   ============================================================ */

/* === Outer scope — undo the full-bleed, full-height behaviour
       that explore.css applies to #tasdir-explore-wrap on the
       dedicated /explore/ page. The hero must sit INSIDE the
       normal page flow, not replace it. === */
.tasdir-hero-scope {
  /* Sits in content column; no 100vw break-out */
  position: relative;
  width: 100%;
  margin: 0 0 32px;                        /* KNOB: space below hero */
  border-radius: 18px;                     /* KNOB: corner radius */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);/* KNOB: drop shadow depth */
  background: #0b1924;                     /* fallback while tiles load */
}

/* === Inner wrap — the element the Leaflet map attaches to.
       Override the fullscreen values from explore.css. === */
.tasdir-hero-scope #tasdir-explore-wrap {
  position: relative;
  width: 100% !important;                  /* undo width: 100vw */
  height: clamp(979px, 110vh, 1452px) !important; /* KNOB: hero height range (desktop) */
  min-height: 979px !important;            /* KNOB: minimum height */
  margin-left: 0 !important;               /* undo negative 50vw margins */
  margin-right: 0 !important;
  margin-top: 0 !important;
  border-radius: inherit;
  overflow: hidden;
}

/* Also override the body.tasdir-explore-active rule just in case
   both modes somehow coexist on the same page. */
body.tasdir-hero-active .tasdir-hero-scope #tasdir-explore-wrap {
  height: clamp(979px, 110vh, 1452px) !important;
}

.tasdir-hero-scope #tasdir-explore-cesium {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* NO stacking context here — we used to trap Leaflet inside one
     to keep its tile/marker panes under the caption, but that also
     trapped the zoom controls where they could never rise above the
     overlay. Since .tasdir-hero-caption now uses z-index 1500 (above
     all Leaflet native z-indices up to ~1000), the overlay still
     wins over tiles/markers/popups WITHOUT isolation — and the
     zoom controls can escape to z-index 2000 and sit on top of the
     overlay. */
}

/* === Overlay caption — optional, rendered inside the shortcode.
       Sits over the map with a soft gradient backdrop so text
       stays legible over any tile variant. === */
.tasdir-hero-caption {
  position: absolute;
  /* Fill the whole hero — caption now acts as the 50% dark
     overlay ACROSS the map, not a strip at the top/bottom. */
  inset: 0;
  z-index: 1500;                           /* above Leaflet panes (≤1000) */
  /* Flexbox centres the heading + sub + CTA both vertically
     and horizontally within the overlay area. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;                               /* KNOB: vertical spacing between title/sub/CTA */
  padding: 40px;                           /* KNOB: edge padding */
  color: #FBF7EE;
  text-align: center;
  pointer-events: none;                    /* map clicks pass through */
  /* Dark overlay across the full map — darker so the heading pops. */
  background: rgba(11, 25, 36, 0.75);      /* KNOB: 0.75 = 75% dark — raise for darker, lower for lighter */
  /* Smooth fade when the user dismisses the overlay via the CTA */
  transition: opacity .4s ease, visibility .4s ease, transform .4s ease;
  /* The overlay itself is clickable so user can dismiss by clicking
     anywhere on the map, not just the CTA button. */
  cursor: pointer;
  pointer-events: auto;
}
.tasdir-hero-caption > * { pointer-events: auto; } /* re-enable for CTA */

/* Dismissed state — fade the overlay out and let map take over.
   Triggered by JS in explore-leaflet.js when the user clicks the
   Explore CTA. Caption slides down a touch as it fades for a
   cinematic hand-off feel. */
.tasdir-hero-scope.tasdir-hero-dismissed .tasdir-hero-caption {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);             /* KNOB: slide distance on dismiss */
}

.tasdir-hero-caption .tasdir-hero-title {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(56px, 8.4vw, 88px) !important; /* KNOB: headline size */
  line-height: 1.1 !important;
  margin: 0 !important;
  /* !important needed because the site-wide h1/h2 rule sets
     color: var(--tw-ink) !important — which would otherwise paint
     the heading near-black on the dark overlay. */
  color: #FFFFFF !important;               /* KNOB: heading colour */
  text-shadow: 0 2px 12px rgba(0,0,0,0.55) !important;
}
.tasdir-hero-caption .tasdir-hero-sub {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(28px, 3.2vw, 34px);     /* KNOB: subhead size (2x previous) */
  font-weight: 400;
  margin: 0;
  opacity: 0.92;
  max-width: 760px;                        /* KNOB: keep subhead from stretching too wide */
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.tasdir-hero-caption .tasdir-hero-cta {
  display: inline-block;
  padding: 44px 88px;                      /* KNOB: button padding — more breathing room around text */
  border-radius: 999px;
  background: #6D1F2C;                     /* burgundy — matches pin */
  color: #FBF7EE !important;
  font: 600 32px "DM Sans", sans-serif;    /* KNOB: CTA text size */
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  margin-top: 18px;                        /* KNOB: extra breathing room above CTA */
}
.tasdir-hero-caption .tasdir-hero-cta:hover {
  background: #8A2838;                     /* KNOB: hover colour */
  transform: translateY(-1px);
}

/* === Hide the /explore/-only chrome when hero mode is active.
       The filter chips, reset button, and style toggle belong to
       the full explore page — they shouldn't spill into the hero. */
.tasdir-hero-scope .tasdir-explore-controls,
.tasdir-hero-scope .tasdir-explore-reset,
.tasdir-hero-scope #tasdir-explore-style-toggle {
  display: none !important;
}

/* === Leaflet zoom controls — hero variant ===
   Leaflet's control CONTAINER panes (.leaflet-top / .leaflet-bottom)
   have z-index: 1000 which creates a stacking context — so the
   zoom control INSIDE them gets capped at 1000 in the outer layout
   no matter what z-index we give it. Bumping the pane itself to
   2000 lets it sit above the caption overlay (1500) so controls
   are always reachable. */
.tasdir-hero-scope .leaflet-control-container .leaflet-top,
.tasdir-hero-scope .leaflet-control-container .leaflet-bottom {
  z-index: 2000 !important;
}
.tasdir-hero-scope .leaflet-control-zoom {
  margin: 16px !important;                 /* KNOB: control inset from map edge */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.tasdir-hero-scope .leaflet-control-zoom a {
  width: 44px !important;                  /* KNOB: tap-target size */
  height: 44px !important;
  line-height: 44px !important;
  font-size: 22px !important;
  background: rgba(251, 247, 238, 0.95) !important;
  color: #2A1E16 !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
}
.tasdir-hero-scope .leaflet-control-attribution {
  font-size: 10px !important;
  background: rgba(251,247,238,0.8) !important;
}

/* Mobile: shift zoom controls to bottom-left (thumb-reachable on a
   one-handed phone hold) and bump tap-target size. We move the
   .leaflet-top.leaflet-left corner pane rather than the control
   itself so Leaflet's own positioning logic still works. */
@media (max-width: 640px) {
  .tasdir-hero-scope .leaflet-top.leaflet-left {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
  }
  .tasdir-hero-scope .leaflet-control-zoom {
    margin: 0 0 20px 16px !important;      /* KNOB: spacing from bottom-left corner */
    z-index: 2000 !important;
  }
  .tasdir-hero-scope .leaflet-control-zoom a {
    width: 48px !important;                /* KNOB: mobile tap-target size */
    height: 48px !important;
    line-height: 48px !important;
    font-size: 26px !important;
  }
}

/* === Mobile tweaks === */
@media (max-width: 640px) {
  .tasdir-hero-scope {
    border-radius: 12px;                   /* less rounding on small screens */
    margin-bottom: 20px;
  }
  .tasdir-hero-scope #tasdir-explore-wrap {
    height: clamp(832px, 110vh, 1133px) !important; /* shorter on mobile */
    min-height: 832px !important;
  }
  .tasdir-hero-caption { padding: 24px; gap: 16px; }
  .tasdir-hero-caption .tasdir-hero-cta { padding: 16px 28px; font-size: 20px; }
}