/* =============================================================================
   hitze-in-schulen — component styles
   Loaded alongside https://taz.de/lib/taz-verlag-node/css/styles__news.min.css
   which provides typography, colour tokens, and spacing utilities.
   This file covers structural layout, the search component, info box states,
   chart container sizing, and responsive breakpoints.
   ============================================================================= */


/* ── Page layout ──────────────────────────────────────────────────────────────
   Override taz.de's grey body background — this is an embedded widget,
   not a full page. margin: auto centers the body in the viewport.
   max-width keeps the layout readable on wide screens.
   padding provides horizontal spacing instead of margin so that
   margin: auto can center the body correctly. */
body {
  margin: 20px auto;
  max-width: 900px;
  background: #fff;
  padding: 0 20px;
}


/* ── Search frame ─────────────────────────────────────────────────────────────
   Fixed dimensions from Figma spec. position: relative is required so the
   absolutely-positioned autocomplete dropdown is anchored to this element. */
.search-frame {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: 351px;
  height: 50px;
  gap: 10px;
}


/* ── Search input ─────────────────────────────────────────────────────────────
   Width/height are Figma-spec values. Typography and colour come from taz
   utility classes applied in HTML (typo-form-input-entry, has-text-text,
   has-background-white, ph-gap). border-radius: 0 overrides any browser
   default rounding. */
#search {
  width: 291px;
  height: 50px;
  border: 1px solid rgba(31, 31, 31, 1);
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
}


/* ── Search button ────────────────────────────────────────────────────────────
   The taz stylesheet resets all button backgrounds to transparent globally,
   so we must explicitly restore the dark background here with a full rule.
   No border-radius — matches the sharp-cornered Figma design. */
#search-button {
  width: 50px;
  height: 50px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: rgba(31, 31, 31, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#search-button:hover {
  /* taz .has-background-tzi-hover value */
  background: #ad0924;
}

#search-button svg {
  width: 22px;
  height: 22px;
}


/* ── Autocomplete dropdown ────────────────────────────────────────────────────
   Absolutely positioned below the search frame. z-index: 9999 ensures it
   sits above the Datawrapper chart container. display: none on :empty removes
   the element entirely when there are no suggestions, preventing a ghost
   border line from showing when the input is empty or cleared. */
#autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 351px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 9999;
  border: 1px solid #a6a6a6;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#autocomplete-list:empty {
  display: none;
}

#autocomplete-list div {
  border-bottom: 1px solid #e3e3e3;
  color: #1f1f1f;
  padding: 10px 15px;
}

#autocomplete-list div:last-child {
  border-bottom: none;
}

#autocomplete-list div:hover {
  /* taz light red highlight + primary red text */
  background: #fceef0;
  color: #d50d2e;
}


/* ── Info box ─────────────────────────────────────────────────────────────────
   The info box has two states: placeholder (idle) and has-content (region
   selected). Switching between them is done by toggling the .has-content class
   in JavaScript. Background, padding, margin, and typography come from taz
   utility classes in HTML (has-background-form, p-medium, mgb-medium,
   typo-head-xxs, typo-short-text).

   The border and display rules are set inline on the element in HTML since
   they need to coexist with the taz utility classes — this rule only handles
   the has-content state override and the show/hide toggle logic. */
#info-box {
  min-height: 110px;
  box-sizing: border-box;
}

#info-box .content {
  display: none;
  width: 100%;
}

#info-box.has-content .placeholder {
  display: none;
}

#info-box.has-content .content {
  display: block;
}

#info-box.has-content {
  /* Switch border colour to taz primary red when a region is selected */
  border-color: #d50d2e;
}


/* ── Lazy load placeholder ────────────────────────────────────────────────────
   Covers the chart container with a blurred preview image and a centred
   load button until the user opts in. Once clicked, the placeholder is
   hidden and the Datawrapper embed is injected and shown.

   The placeholder fills the chart container exactly, so it inherits the
   fixed width/height from #chart-container at each breakpoint. */
#chart-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chart-preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  /* Slight blur signals that this is a static preview, not the live map */
  filter: blur(2px);
  opacity: 0.85;
}

/* Load button — uses taz .button.primary-button classes for base styles.
   Positioned over the preview image via z-index. The taz primary-button
   gives us #1f1f1f background → #ad0924 on hover, which matches our
   search button hover colour. max-width override needed since taz caps
   .button at 480px, which is fine here. */
#load-chart-button {
  position: relative;
  z-index: 10;
  /* Override taz .button margin-top since we're centering via flexbox */
  margin-top: 0;
}


/* ── Chart container ──────────────────────────────────────────────────────────
   Width and height are fixed to match Datawrapper's preview dimensions.
   Datawrapper derives height from width for choropleth maps, so both must
   be set explicitly. margin: auto centers the fixed-width container within
   the page body.

   Measured preview dimensions:
     320px wide → 548px tall
     400px wide → 653px tall
     600px wide → 799px tall

   Adjust the width to find the best fit per breakpoint, then update the
   height to the corresponding measured value above. */
#chart-container {
  position: relative;
  width: 400px;
  height: 653px;
  margin-left: auto;
  margin-right: auto;
}


/* =============================================================================
   BREAKPOINT: 768px — tablet
   ============================================================================= */
@media screen and (max-width: 768px) {
  body {
    margin: 15px auto;
    padding: 0 15px;
  }

  #chart-container {
    width: 500px;
    height: 625px;
  }
}


/* =============================================================================
   BREAKPOINT: 480px — mobile
   Search frame stretches to full page width.
   Info box padding reduces to save vertical space.
   ============================================================================= */
@media screen and (max-width: 480px) {
  body {
    margin: 10px auto;
    padding: 0 10px;
  }

  /* Search frame stretches to fill available page width */
  .search-frame {
    width: 100%;
    display: flex;
  }

  /* Input fills all remaining space after the fixed 50px button + 10px gap */
  #search {
    flex: 1;
    width: auto;
  }

  /* Autocomplete dropdown matches the stretched search frame width */
  #autocomplete-list {
    width: 100%;
  }

  /* Reduce padding to reclaim vertical space for the map */
  #info-box {
    padding: 12px !important;
    min-height: 90px;
  }

  #chart-container {
    width: 280px;
    height: 480px;
  }
}


/* ── Load placeholder ─────────────────────────────────────────────────────────
   Shown before the user clicks to load the interactive map. The placeholder
   fills the full chart container so layout doesn't shift when the map loads.
   The button is centered over the preview image using flexbox. */
#load-placeholder {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: white;  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#map-preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.6;
}

#load-map-button {
  /* position: relative sits above the absolutely-positioned image */
  position: relative;
  z-index: 10;
  padding: 14px 28px;
  max-width: 260px;
  /* taz dark background — matches the search button colour */
  background: rgba(31, 31, 31, 0.85) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0;
  cursor: pointer;
  /* taz bold font stack */
  font-family: AktivGrotesk_Bd, AktivGrotesk_BdExt, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

#load-map-button:hover {
  /* taz red on hover — matches the search button hover colour */
  background: rgba(170, 9, 36, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

#load-map-button:disabled {
  opacity: 0.7;
  cursor: default;
}

/* #map-controls is hidden until onMapReady() sets display: block via JS */
#map-controls {
  display: none;
}

/* #datawrapper-embed fills the full chart container once revealed */
#datawrapper-embed {
  width: 100%;
  height: 100%;
}