/* ===========================================================================
   World maps — house skin for Interactive Geo Maps (MapGeo).

   The map replaces the drawing inside an existing box: .ggimap on the home
   and about pages, .officemap on the contact page. Those boxes already carry
   the look — paper ground, 44/46px grid, crimson radial wash, hairline border,
   aspect ratio — and their caption and tag sit on top. So this file does one
   thing: it makes the plugin's markup fill that box exactly, and gets its own
   chrome out of the way. The colours live in includes/koksal-maps-config.php,
   because amCharts paints into SVG attributes and never reads CSS variables.
   =========================================================================== */

/* The plugin sizes itself with an inline padding-top ratio on a zero-height
   box. Ours is already the right shape, so the map is stretched to fill it
   instead — the placeholder's aspect-ratio and min-height stay in charge and
   the map matches the box at every viewport. */
.ggimap--live,
.officemap--live { position: relative; overflow: hidden; }

.ggimap--live .map_wrapper,
.officemap--live .map_wrapper { position: absolute; inset: 0; z-index: 1; }

.ggimap--live .map_box,
.officemap--live .map_box { height: 100%; max-width: none !important; }

/* height/padding-top are set inline by the plugin. */
.ggimap--live .map_aspect_ratio,
.officemap--live .map_aspect_ratio { height: 100% !important; padding-top: 0 !important; }

/* The caption and the tag are labels over the map, not targets — let hover
   reach the countries underneath them. */
.ggimap--live .ggimap__caption,
.ggimap--live .ggimap__tag,
.officemap--live .officemap__tag { pointer-events: none; }

/* The placeholder's caption sat on an empty ground; over real coastlines it
   loses contrast (it lands on North America). Give it the same paper lozenge
   the tag pill already uses, so both overlays read the same way. */
.ggimap--live .ggimap__caption {
  background: rgba(251, 250, 246, .86);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  padding: 10px 14px 12px;
  backdrop-filter: blur(3px);
  max-width: 260px;
}

/* Plugin chrome we do not use: zoom buttons, the mobile control row, the
   export menu. Zoom is off in the config; this covers the markup anyway. */
.ggimap--live .imapsZoomControl-group,
.officemap--live .imapsZoomControl-group,
.ggimap--live .map_controls,
.officemap--live .map_controls,
.ggimap--live .imapsExportMenu,
.officemap--live .imapsExportMenu { display: none !important; }

/* amCharts fades the container in; without this the grid ground flashes
   empty on a slow first paint. */
.ggimap--live .map_render,
.officemap--live .map_render { transition: opacity var(--dur, .3s) var(--ease, ease); }
.ggimap--live .map_render.map_loading,
.officemap--live .map_render.map_loading { opacity: 0; }

/* Narrow screens.

   amCharts fills its container and lets the overflow crop, so a box taller
   than the map's own proportions loses the edges rather than letterboxing.
   .ggimap's min-height:300px does exactly that on a phone: at 390px wide the
   box is 1.3:1 against a world that is about 2.5:1, and the map crops back to
   the Americas — İstanbul, the whole point of it, falls off the side.

   Releasing the min-height lets the box keep its 100/40 ratio, which is what
   the world wants, so the entire map stays on screen. That leaves a band only
   ~155px tall at phone width, which the caption and the tag would cover half
   of — so on these screens they stop being overlays and stack above and below
   the map instead. Nothing overlaps, and nothing is cropped. */
@media (max-width: 600px) {
  .ggimap--live {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .ggimap--live .map_wrapper { position: relative; inset: auto; order: 1; }
  .ggimap--live .map_box { height: auto; }
  /* Back to the plugin's own ratio box, now that the map is in normal flow. */
  .ggimap--live .map_aspect_ratio { height: 0 !important; padding-top: 40% !important; }

  .ggimap--live .ggimap__caption {
    position: static;
    order: 0;
    max-width: none;
    margin: 0;
    padding: var(--sp-4) var(--sp-4) 12px;
    background: none;
    border: 0;
    backdrop-filter: none;
  }

  .ggimap--live .ggimap__tag {
    position: static;
    order: 2;
    align-self: flex-start;
    margin: 12px var(--sp-4) var(--sp-4);
  }
}