/* map-header — styles for components/map-header.php

   Owned by that component. Nothing else should style these selectors: the
   map spent a long time with its rules split between map-style.css and an
   inline <style> in map.php, where the inline copy silently won and the
   responsive rules never applied. One selector, one file. */

.map-internal-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  flex: 0 0 auto;              /* never squeezed by the 100vh flex column */
  padding: 12px 20px;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.map-internal-header .legend { margin-left: auto; }

.map-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding-right: 18px;
  border-right: 1px solid rgba(0, 0, 0, .10);
  color: #6b7280;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;
  transition: color .15s;
}

.map-back:hover,
.map-back:focus-visible { color: var(--buy); }

.map-back i { font-size: 14px; line-height: 1; }

.map-internal-header .h-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.map-internal-header h1 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-internal-header p {
  font-size: 13px;
  color: #666;
  margin: 0;
  opacity: .8;
}

.map-internal-header .legend {
  display: flex;
  gap: 10px;
  align-items: center;
}

.map-internal-header .legend .li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, .03);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

.map-internal-header .legend .ld {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.map-internal-header p {
        font-size: 11px;
    }

.map-internal-header .legend .li {
        padding: 4px 8px;
        font-size: 10px;
    }

@media (max-width: 992px) {
  /* One rule, not the two the extraction left stacked here. Back link and
     title keep a shared centre line; the key wraps below on its own row. */
  .map-internal-header {
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px 14px;
  }

  .map-back {
    padding-right: 0;
    border-right: none;
  }

  /* No width: 100%. That forced the title onto its own row, leaving the back
     link stranded above it. Both are flex children of the header and share a
     centred line, which is all there is now that the subtitle is gone. */
  .map-internal-header .h-title {
    align-items: center;
    gap: 2px;
    min-width: 0;              /* lets the heading ellipsise rather than push wide */
  }

  .map-internal-header h1 {
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .map-internal-header p {
    width: 100%;
    text-align: left;
    font-size: 12px;
  }

  .map-internal-header .legend {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .map-internal-header .legend .li {
    padding: 5px 10px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  /* The key is gone on a phone. Two pills of legend text is more chrome than
     the screen can spare, and the colours are readable from the plan itself
     — a red parcel is available, a grey one is not. The statuses are still
     named in the count pills and in each stand's calculator. */
  .map-internal-header .legend {
    display: none;
  }

  .map-internal-header {
    padding: 10px 14px 12px;
    gap: 8px 12px;
  }
}media (max-width: 992px) {
  .map-internal-header {
          flex-direction: column;
          gap: 12px;
          padding: 12px 16px;
      }

  .map-internal-header {
          align-items: center;
          gap: 10px 14px;
          padding: 12px 16px 14px;
      }

  .map-internal-header .legend { width: 100%; }

  .map-back {
          padding-right: 0;
          border-right: none;
      }

  .map-internal-header .h-title {
          width: 100%;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
      }

  .map-internal-header h1,
  .map-internal-header p {
          width: 100%;
          text-align: left;
      }

  .map-internal-header .legend {
          margin-left: 0;
      }

  .map-internal-header h1 {
          font-size: 15px;
          flex-wrap: wrap;
      }

  .map-internal-header p {
          font-size: 12px;
      }

  .map-internal-header .legend {
          width: 100%;
          justify-content: flex-start;
          flex-wrap: wrap;
          gap: 8px;
      }

  .map-internal-header .legend .li {
          padding: 5px 10px;
          font-size: 11px;
      }
}

/* Extra small phones — the heading gives up a little more. */
@media (max-width: 480px) {
  .map-internal-header h1 {
    font-size: 14px;
  }
}