/* =========================================================
   /assets/css/map.css
   Styles for the Australia SVG map + popups
   ========================================================= */

/* Base SVG (shared) */
.aus-map{
  display: block;
  width: 100%;
  height: auto;
  isolation: isolate;                 /* popup compositing */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* State shapes */
.aus-map .state-group path{
  stroke: #fff;
  stroke-width: 2;
  transition: fill .25s ease, opacity .2s ease;
}
.aus-map .state-group path:hover{
  fill: #0078d7;
  cursor: pointer;
}

/* ==== Popup layer (appears after a state is clicked) ==== */
.state-popup-group .state-shape-popup{
  fill: #fff;
  stroke: #333;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;  /* keep border width under scale() */
  transform-origin: center;
  transform-box: fill-box;
  animation: popupGrowFade .28s ease-out forwards;
  opacity: .98;
}

@keyframes popupGrowFade{
  0%   { transform: scale(.86); opacity: 0; }
  100% { transform: scale(1.03); opacity: .98; }
}

/* Popup text defaults */
.state-popup-group text{
  user-select: none;
  -webkit-user-select: none;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* Title stays black */
.state-popup-group .state-title{
  fill: #000;
}

/* City labels: blue + hand cursor + optional underline on hover */
.state-popup-group .city-label{
  fill: #0078D7 !important;
  cursor: pointer;
}
@media (hover:hover){
  .state-popup-group .city-label:hover{
    text-decoration: underline;
  }
}

/* Invisible but tappable hitbox behind each city label */
.state-popup-group .city-hit{
  fill: transparent;
  cursor: pointer;
}
@media (hover:hover){
  .state-popup-group .city-hit:hover{
    fill: rgba(0,120,215,.08);
  }
}

/* =========================================================
   Size & spacing
   (Layout-level defaults exist in layout.css; these refine the map)
   ========================================================= */

/* Default map lane */
.map-wrap{
  width: min(1100px, 96vw);
  margin: 16px auto 12px;
}

/* Let the map get tall by default */
.map-stage,
.map-wrap svg{
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(520px, 72vh, 960px);
}

/* === Home: reduce space under the map === */
body.home main#content{
  gap: 10px;              /* was 24px */
  padding-bottom: 8px;    /* trim bottom padding */
}

body.home .home-hero{
  margin-bottom: 4px;     /* tighten title/hint block */
}

body.home .map-wrap{
  margin: 8px auto 6px;   /* was 16px auto 12px (default) */
}

body.home .site-footer .footer-inner{
  padding-top: 10px;      /* keep footer compact */
  padding-bottom: 10px;
}

/* === Home: make the map smaller (new) === */
body.home .map-wrap{
  width: min(980px, 92vw);                 /* narrower lane */
}

body.home .map-stage,
body.home .aus-map{
  max-height: clamp(440px, 58vh, 820px);   /* lower height ceiling */
}

/* Map container basics (no glow/shadow) */
body.has-hero-bg .map-wrap{
  position: relative;
  display: inline-block;
}

body.has-hero-bg .map-wrap .map-stage,
body.has-hero-bg .map-wrap #map,
body.has-hero-bg .map-wrap .leaflet-container{
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* =========================================================
   Callout + arrow (desktop + mobile)
   ========================================================= */

/* Base: ensure absolute children anchor to map container */
.map-wrap{
  position: relative;
}

/* ===== Desktop defaults (large screens) ===== */
.map-wrap .map-callout{
  position: absolute;
  top: 135px;        /* top-right */
  right: 0;
  margin: 0;
  text-align: right;
  color: #fff;      /* white text on desktop */
  z-index: 3;
}

.map-wrap .map-hint-arrow{
  position: absolute;
  top: 170px;        /* under the text */
  right: 60px;
  display: block;
  width: 180px;
  height: auto;
  margin: 0;
  z-index: 3;
  pointer-events: none; /* don’t block map taps/clicks */
}

/* Default: desktop shows long text, hides "Tap map" */
.map-wrap .map-callout .long {
  display: inline;
}
.map-wrap .map-callout .short {
  display: none;
}

/* ===== Mobile: bottom-left placement, 2 o'clock arrow, minimal label ===== */
@media (max-width: 740px){
  /* Show short label only (assuming .long / .short spans) */
  .map-wrap .map-callout .long { display: none; }
  .map-wrap .map-callout .short { display: inline; }

  /* Callout container — NO white box */
  .map-wrap .map-callout{
    position: absolute;
    left: 2px;
    bottom: 20px;
    top: auto;
    right: auto;
    text-align: left;

    background: transparent;  /* remove white box */
    color: #000;
    padding: 0;               /* remove padding so it’s just the text */
    border: 0;
    border-radius: 0;
    box-shadow: none;

    z-index: 3;
  }

  /* Arrow – small, bottom-left, pointing ~2 o’clock */
  .map-wrap .map-hint-arrow{
    position: absolute;
    left: 180px;
    bottom: 60px;
    top: auto;
    right: auto;

    width: 60px;
    height: auto;

    transform: scaleX(-1) rotate(50deg);
    transform-origin: bottom left;

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

  /* "Tap map" label: dyslexic font, black text with stronger white outline */
  .map-wrap .map-callout .short{
    font-family: "OpenDyslexic", Arial, sans-serif;
    color: #000;

    /* beef up the weight */
    font-weight: 900;

    /* stronger outline */
    -webkit-text-stroke: 0.1px #fff;    /* was 1px */
    text-shadow:
      1px 0 0 #fff, -1px 0 0 #fff,
      0 1px 0 #fff,  0 -1px 0 #fff,
      1px 1px 0 #fff, -1px 1px 0 #fff,
      1px -1px 0 #fff, -1px -1px 0 #fff;

    letter-spacing: .1px;
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}