/**
 * @file trafford-venue-map
 * Styles for the Venue Map block: map container, popup, cluster icons,
 * and WCAG 2.2 AA accessible fallback list.
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.trafford-venue-map-wrapper {
  position: relative;
  display: flex;
  inline-size: 100%;
  block-size: 100%;
  justify-content: center;
}

/* ── Map container ────────────────────────────────────────────────────────── */
.trafford-venue-map {
  position: relative;
  inline-size: 100%;
  block-size: 32.5rem;
  background-color: transparent;
  overflow: hidden;

  @media screen and (min-width: 90rem) {
    inline-size: 100%;
    max-inline-size: var(--width-xxl);
  }

  @media (min-width: 73.75rem) and (max-width: 90rem) {
    inline-size: 100%;
    max-inline-size: var(--width-xxl)
  }

  @media (min-width: 48rem) and (max-width: 73.75rem) {
    inline-size: 100%;
  }

  @media (min-width: 48rem) and (max-width: 90rem) {
    inline-size: 100%;
  }

  @media (min-width: 30rem) and (max-width: 48rem) {
    inline-size: 100%;
  }

  @media (min-width: 26.875rem) and (max-width: 30rem) {
    padding-inline: 0;
    inline-size: 100%;
  }

  @media screen and (max-width: 26.875rem) {
    padding-inline: 0;
    inline-size: 100%;
  }
}

/* Focus ring for keyboard users */
.trafford-venue-map:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}


.trafford-venue-map__canvas {
  position: relative;
  inline-size: 100%;
  block-size: 100%;

  @media screen and (min-width: 90rem) {
    inline-size: 100%;
    max-inline-size: var(--width-xxl);
  }

  @media (min-width: 73.75rem) and (max-width: 90rem) {
    inline-size: 100%;
  }

  @media (min-width: 48rem) and (max-width: 73.75rem) {
    inline-size: 100%;
  }

  @media (min-width: 48rem) and (max-width: 90rem) {
    inline-size: 100%;
  }

  @media (min-width: 30rem) and (max-width: 48rem) {
    inline-size: 100%;
  }

  @media (min-width: 26.875rem) and (max-width: 30rem) {
    padding-inline: 0;
    inline-size: 100%;
  }

  @media screen and (max-width: 26.875rem) {
    padding-inline: 0;
    inline-size: 100%;
  }
}

/* ── Leaflet marker a11y ─────────────────────────────────────────────────── */
.leaflet-marker-icon:focus-visible {
  outline: var(--ti-focus-ring-width, 3px) solid var(--ti-focus-ring-color, var(--color-accent));
  outline-offset: var(--ti-focus-ring-offset, 2px);
}

@media (hover: hover) and (pointer: fine) {
  .leaflet-marker-icon:hover {
    filter: var(--ti-tile-image-hover-filter, brightness(1.1));
  }
}

/* ── Popup (replaces Google Maps InfoWindow) ──────────────────────────────── */
.trafford-popup .leaflet-popup-content-wrapper {
  background-color: var(--color-black, #1a1a2e);
  border-radius: 1.25rem;
  padding: 0;
  box-shadow: 0 3px 14px rgb(0 0 0 / 0.4);
}

.trafford-popup .leaflet-popup-content {
  margin: 1rem;
  color: var(--color-white, #fff);
}

.trafford-popup .leaflet-popup-tip {
  background-color: var(--color-black, #1a1a2e);
}

.trafford-popup .leaflet-popup-close-button {
  display: none;
}

.trafford-map-iw {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 260px;
  font-family: inherit;
}

.trafford-map-iw__body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.trafford-map-iw__title {
  margin: 0 0 .5rem;
  font-family: var(--font-family-primary), sans-serif;
  font-size: 1.25rem;
  font-weight: normal;
}

.trafford-map-iw__title a {
  color: var(--color-white, #fff);
  text-decoration: underline;
}

.trafford-map-iw__title a:hover,
.trafford-map-iw__title a:focus {
  color: var(--color-accent-2);
  text-decoration: none;
}

.trafford-map-iw__address {
  font-family: var(--font-family-primary), sans-serif;
  color: var(--color-white, #fff);
  font-size: .9375rem;
  font-weight: normal;
}

/* ── Cluster icons ───────────────────────────────────────────────────────── */
.trafford-cluster-wrapper {
  background: transparent !important;
}

.trafford-cluster-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #FFA3FF;
  border: 2px solid #fff;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
}

/* ── Fallback list ────────────────────────────────────────────────────────── */
/* Hidden by default; revealed by JS or when map fails */
.trafford-map-fallback.hidden {
  display: none;
}

.trafford-map-fallback {
  padding: 1.5rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 4px;
  background: #f9fafb;
}

.trafford-map-fallback__heading {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1b3a6b;
}

/* Receive programmatic focus without visible chrome */
.trafford-map-fallback__heading:focus {
  outline: none;
}

.trafford-map-fallback__notice {
  /* Visually hidden but available to screen readers */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.trafford-map-fallback__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trafford-map-fallback__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.trafford-map-fallback__item:last-child {
  border-bottom: none;
}

.trafford-map-fallback__link {
  font-weight: 600;
  color: #1b3a6b;
  text-decoration: underline;
}

.trafford-map-fallback__link:hover,
.trafford-map-fallback__link:focus {
  color: #2563eb;
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}

.trafford-map-fallback__address {
  font-size: 0.875rem;
  color: #6b7280;
}

.trafford-map-fallback__empty {
  color: #6b7280;
  font-style: italic;
}

/* ── Area map section ────────────────────────────────────────────────────── */
.area-map-section {
  inline-size: 100%;
  padding-block-start: var(--spacing-largest);
}

.area-map-section .trafford-venue-map {
  block-size: 28rem;
}

@media (min-width: 48rem) {
  .area-map-section .trafford-venue-map {
    block-size: 32.5rem;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .trafford-map-iw__cta {
    transition: none;
  }
}

/* ── Area filter bar (venues listing map) ─────────────────────────────────── */
.venue-map-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-small, 0.75rem);
  margin-block-end: var(--spacing, 1rem);
}

/* ── High contrast mode ───────────────────────────────────────────────────── */
@media (forced-colors: active) {
  .trafford-map-iw__cta {
    border: 2px solid ButtonText;
  }

  .trafford-map-fallback {
    border-color: ButtonText;
  }

  .trafford-map-fallback__link:focus {
    outline: 3px solid Highlight;
  }
}