/**
 * acf-locations-map — interface.pen “locations map” (intro + scroll list + map).
 */

.acf-locations-map.alignfull,
.acf-locations-map.alignwide {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.acf-locations-map {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Hash / ZIP search lands below the fixed nav + yellow locator bar. */
  scroll-margin-top: calc(var(--stack-header-height) + var(--space-md));
  /* Same header clearance as acf-hero (tokens.css --block-pad-hero-top). */
  padding-top: var(--block-pad-hero-top);
  padding-bottom: var(--block-pad-block);
  padding-right: var(--block-pad-inline);
  padding-left: var(--block-pad-inline);
  font-family: var(--font-family-base);
  color: var(--color-brand-slate);
  background-color: var(--color-brand-shape);
}

.acf-locations-map__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
}

.acf-locations-map__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
  width: 100%;
  text-align: center;
}

.acf-locations-map__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .acf-locations-map__layout {
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
    gap: var(--space-lg);
  }
}

/* Left panel — search fixed; cards scroll (80vh scales with viewport). */
.acf-locations-map__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: 80vh;
  min-height: 0;
}

.acf-locations-map h1.acf-locations-map__title,
.entry-content .acf-locations-map h1.acf-locations-map__title,
.wp-block-post-content .acf-locations-map h1.acf-locations-map__title,
.editor-styles-wrapper .acf-locations-map h1.acf-locations-map__title {
  margin: 0;
  max-width: var(--container-wide-content);
  font-family: var(--font-family-base);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-brand-slate);
}

.acf-locations-map__intro {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-brand-slate);
}

.acf-locations-map__intro p {
  margin: 0;
}

.acf-locations-map__intro p + p {
  margin-top: var(--space-sm);
}

/* Search */
.acf-locations-map__search {
  flex-shrink: 0;
}

.acf-locations-map__search-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 100%;
}

.acf-locations-map__search-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.75rem var(--block-content-gap);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-brand-slate);
  background-color: var(--color-brand-shape);
  border: 2px solid var(--color-brand-cyan);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.acf-locations-map__search-input:focus {
  outline: 2px solid var(--color-brand-cyan);
  outline-offset: 2px;
}

.acf-locations-map__search-button {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.75rem var(--space-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-light);
  background-color: var(--color-brand-cyan);
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
}

.acf-locations-map__search-button:hover,
.acf-locations-map__search-button:focus-visible {
  filter: brightness(1.08);
}

/* Scrollable list */
.acf-locations-map__list-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1 1 auto;
  min-height: 0;
}

.acf-locations-map__results {
  margin: 0;
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-slate);
}

.acf-locations-map__cards.bpa-locations-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-right: 0.25rem;
  scroll-behavior: smooth;
}

.acf-locations-map__cards.bpa-locations-container::-webkit-scrollbar {
  width: 6px;
}

.acf-locations-map__cards.bpa-locations-container::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.acf-locations-map__empty {
  margin: 0;
  padding: var(--space-md);
  font-size: var(--font-size-base);
  color: var(--color-muted-text);
  background: var(--color-light);
  border-radius: var(--radius-md);
}

/* Location card */
.acf-locations-map__card {
  position: relative;
  margin: 0;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* Block cards reuse .bpa-location-card for BPA Maps JS — override plugin hover/active chrome. */
.acf-locations-map__card.bpa-location-card {
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}

.acf-locations-map__card.bpa-location-card:hover {
  transform: none;
  border-color: var(--color-border);
  box-shadow: none;
}

.acf-locations-map__card.border-primary,
.acf-locations-map__card.is-active {
  border-color: var(--color-border);
  box-shadow: none;
}

.acf-locations-map__card-accent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: linear-gradient(
    180deg,
    var(--color-brand-cyan) 0%,
    var(--color-brand-green) 100%
  );
}

.acf-locations-map__card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 1.75rem 1.75rem 1.75rem 2.25rem;
}

.acf-locations-map__card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.acf-locations-map__card-pin {
  flex: 0 0 auto;
  line-height: 0;
}

.acf-locations-map__card-pin .bpa-inline-svg,
.acf-locations-map__card-pin svg {
  display: block;
  width: 1.0625rem;
  height: auto;
}

.acf-locations-map h3.acf-locations-map__card-title,
.entry-content .acf-locations-map h3.acf-locations-map__card-title {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-brand-slate);
}

.acf-locations-map__card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem var(--space-md);
}

.acf-locations-map__card-address {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-brand-slate);
}

.acf-locations-map__card-services-label {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted-text);
}

.acf-locations-map__service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.acf-locations-map__service-item {
  margin: 0;
}

.acf-locations-map__service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-brand-shape);
  border: 1px solid var(--color-icon-border);
  border-radius: var(--radius-sm);
  line-height: 0;
}

.acf-locations-map__service-icon .bpa-inline-svg,
.acf-locations-map__service-icon svg {
  display: block;
  width: 1.25rem;
  height: auto;
}

.acf-locations-map__card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: 0.25rem;
}

.acf-locations-map__card-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.acf-locations-map__card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-brand-cyan);
  text-decoration: none;
}

.acf-locations-map__card-link-icon {
  flex: 0 0 auto;
  line-height: 0;
}

.acf-locations-map__card-link-icon .bpa-inline-svg,
.acf-locations-map__card-link-icon svg {
  display: block;
  width: 1.125rem;
  height: auto;
}

.acf-locations-map__card-link:hover,
.acf-locations-map__card-link:focus-visible {
  text-decoration: underline;
}

.acf-locations-map__card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem var(--space-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-light);
  background-color: var(--color-brand-green);
  border: 2px solid var(--color-light);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
}

.acf-locations-map__card-cta:hover,
.acf-locations-map__card-cta:focus-visible {
  filter: brightness(1.08);
  color: var(--color-light);
}

/*
 * BPA Maps marker popup (InfoWindow HTML template in plugin admin).
 * Template uses .contact-meta for the city/state/zip line — default plugin
 * CSS only spaces .contact-address, so add gap before the Visit Page button.
 */
.gm-style-iw .acf-locations-map__infowindow .contact-meta {
  margin-bottom: var(--space-md);
}

/* Map column — match panel height on desktop */
.acf-locations-map__map {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (min-width: 1024px) {
  .acf-locations-map__map {
    height: 80vh;
  }
}

.acf-locations-map__map .bpa-map-container {
  flex: 1 1 auto;
  width: 100%;
  height: 100% !important;
  min-height: 0;
  background: var(--color-brand-shape);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  overflow: hidden;
}

.acf-locations-map__map .bpa-map-canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.acf-locations-map__map-placeholder {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  background-color: var(--color-muted-bg);
  background-image:
    linear-gradient(45deg, var(--color-border) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-border) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-border) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-border) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

@media (max-width: 1023px) {
  .acf-locations-map h1.acf-locations-map__title,
  .entry-content .acf-locations-map h1.acf-locations-map__title {
    font-size: var(--font-size-4xl);
  }

  .acf-locations-map__map {
    min-height: 20rem;
  }

  .acf-locations-map__map .bpa-map-container {
    min-height: 20rem;
  }

  .acf-locations-map__search-form {
    flex-direction: column;
    gap: 0.75rem;
  }

  .acf-locations-map__search-input {
    border-radius: var(--radius-md);
  }

  .acf-locations-map__search-button {
    width: 100%;
    border-radius: var(--radius-sm);
  }
}

/* Local Locations page band — Figma 7230:5121 (off-white, green-bordered cards). */
.acf-locations-map--layout-local {
  position: relative;
  overflow: hidden;
  padding: 0;
  background-color: var(--color-off-white);
}

.acf-locations-map--layout-local[class*="bpa-local-grass-color--"] {
  background-color: inherit;
}

.acf-locations-map--layout-local.bpa-local-grass-color--white { background-color: var(--color-light); }
.acf-locations-map--layout-local.bpa-local-grass-color--off-white { background-color: var(--color-off-white); }
.acf-locations-map--layout-local.bpa-local-grass-color--brand-shape { background-color: var(--color-brand-shape); }
.acf-locations-map--layout-local.bpa-local-grass-color--muted-bg { background-color: var(--color-muted-bg); }
.acf-locations-map--layout-local.bpa-local-grass-color--franchise-green { background-color: var(--color-franchise-green, #11733f); }
.acf-locations-map--layout-local.bpa-local-grass-color--brand-forest { background-color: var(--color-brand-forest); }

.acf-locations-map--layout-local .acf-locations-map__body {
  position: relative;
  padding-block: var(--block-pad-block);
  padding-inline: var(--block-pad-inline);
  overflow: hidden;
  background-color: inherit;
}

/* Hidden BPA Maps ZIP sync — never show corporate cyan search chrome in local layout. */
.acf-locations-map--layout-local .acf-locations-map__search--sync {
  display: none !important;
  block-size: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}

.acf-locations-map__wave {
  display: block;
  line-height: 0;
}

.acf-locations-map__wave--top {
  margin-inline: 0;
  inline-size: 100%;
}

.acf-locations-map__wave--top svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 50px; /* styleguide-exception: wave decorative min */
  transform: none;
}

.acf-locations-map__wave--bottom {
  margin-inline: calc(-1 * var(--block-pad-inline));
  inline-size: calc(100% + (2 * var(--block-pad-inline)));
}

.acf-locations-map__wave--bottom svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 50px; /* styleguide-exception: wave decorative min */
  transform: scaleY(-1);
}

.acf-locations-map--layout-local.acf-locations-map--has-top-wave .acf-locations-map__body {
  padding-block-start: var(--space-2xl);
}

.acf-locations-map--layout-local.acf-locations-map--has-bottom-wave .acf-locations-map__body {
  padding-block-end: var(--space-2xl);
}

.acf-locations-map--layout-local:has(> .bpa-local-grass-divider):not(.acf-locations-map--has-bottom-wave) .acf-locations-map__body {
  padding-block-end: var(--space-xl);
}

.acf-locations-map--layout-local.acf-locations-map--has-bottom-wave:has(> .bpa-local-grass-divider) > .bpa-local-grass-divider {
  margin-block-start: 0;
}

.acf-locations-map--layout-local .acf-locations-map__container {
  gap: 0;
}

.acf-locations-map--layout-local .acf-locations-map__layout {
  gap: var(--spacing-8);
  align-items: start; /* Map column grows for fallback notice below image */
}

@media (min-width: 1024px) {
  /* Live map needs a definite height on first paint. height: 100% of auto = 0. */
  .acf-locations-map--layout-local .acf-locations-map__map {
    height: 46.375rem;
    block-size: 46.375rem;
  }

  /* Static fallback may still grow for the API notice under the image. */
  .acf-locations-map--layout-local .acf-locations-map__static-map-fallback {
    block-size: auto;
    height: auto;
  }

  .acf-locations-map--layout-local .acf-locations-map__layout {
    /* Figma 7230:5122 — 640px list + 32px gap + 608px map = 1280px */
    grid-template-columns: 40rem 38rem;
    gap: var(--spacing-8);
    justify-content: center;
  }

  .acf-locations-map--layout-local .acf-locations-map__panel {
    inline-size: 40rem;
    max-block-size: 46.375rem; /* Figma 742px */
  }

  .acf-locations-map--layout-local .acf-locations-map__map,
  .acf-locations-map--layout-local .acf-locations-map__static-map-fallback {
    inline-size: 38rem; /* Figma 608px */
    flex: 0 0 auto;
  }

  .acf-locations-map--layout-local .acf-locations-map__static-map,
  .acf-locations-map--layout-local .acf-locations-map__map .bpa-map-container,
  .acf-locations-map--layout-local .acf-locations-map__map .bpa-map-canvas {
    height: 46.375rem !important; /* Beat .bpa-map-container { height: 100% !important } */
    min-height: 46.375rem;
    block-size: 46.375rem;
  }
}

.acf-locations-map--layout-local .acf-locations-map__panel {
  height: auto;
  max-block-size: 46.375rem;
}

.acf-locations-map--layout-local .acf-locations-map__cards.bpa-locations-container {
  gap: var(--spacing-8); /* Figma 32px between 226px cards */
  padding-right: var(--spacing-3);
  align-items: stretch;
}

.acf-locations-map--layout-local .acf-locations-map__cards.bpa-locations-container::-webkit-scrollbar {
  width: 12px;
}

.acf-locations-map--layout-local .acf-locations-map__cards.bpa-locations-container::-webkit-scrollbar-track {
  background: #e5ebe7;
  border-radius: var(--radius-sm);
}

.acf-locations-map--layout-local .acf-locations-map__cards.bpa-locations-container::-webkit-scrollbar-thumb {
  background: var(--color-brand-forest);
  border-radius: var(--radius-sm);
}

.acf-locations-map--layout-local .acf-locations-map__card--local {
  flex: 0 0 auto;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 14.125rem; /* Figma 226px */
  min-block-size: 14.125rem;
  max-block-size: 14.125rem;
  margin: 0;
  background: var(--color-light);
  border: var(--border-card-accent);
  border-radius: var(--radius-leaf-sm);
  overflow: hidden;
  cursor: pointer;
}

.acf-locations-map--layout-local .acf-locations-map__card--local.bpa-location-card {
  padding: 0;
}

/* Beat .entry-content — leaf petal must not render square on location cards. */
.entry-content .acf-locations-map--layout-local .acf-locations-map__card--local,
.wp-block-post-content .acf-locations-map--layout-local .acf-locations-map__card--local,
.editor-styles-wrapper .acf-locations-map--layout-local .acf-locations-map__card--local {
  border-radius: var(--radius-leaf-sm);
}

.acf-locations-map--layout-local .acf-locations-map__card--local .acf-locations-map__card-inner {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: var(--spacing-6); /* Figma 24px */
  padding: var(--spacing-5); /* Figma 20px */
  block-size: 100%;
  min-block-size: 0;
}

.acf-locations-map--layout-local h3.acf-locations-map__card-title,
.acf-locations-map--layout-local .acf-locations-map__card--local .acf-locations-map__card-title,
.entry-content .acf-locations-map--layout-local h3.acf-locations-map__card-title,
.wp-block-post-content .acf-locations-map--layout-local h3.acf-locations-map__card-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-brand-forest);
}

.acf-locations-map--layout-local .acf-locations-map__card-address {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-dark);
}

.acf-locations-map--layout-local .acf-locations-map__card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-6);
  margin-block-start: auto;
}

.acf-locations-map--layout-local .acf-locations-map__card-link {
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
  text-decoration: none;
}

.acf-locations-map--layout-local .acf-locations-map__card-link--schedule {
  color: var(--color-franchise-green-bright);
}

.acf-locations-map--layout-local .acf-locations-map__card-link:hover,
.acf-locations-map--layout-local .acf-locations-map__card-link:focus-visible {
  text-decoration: underline;
}

.acf-locations-map--layout-local .acf-locations-map__card-cta--local.bpa-button {
  margin-inline-start: auto;
  flex-shrink: 0;
}

.acf-locations-map--layout-local .acf-locations-map__empty {
  border: var(--border-card-accent);
  border-radius: var(--radius-leaf-sm);
}

.acf-locations-map--layout-local .acf-locations-map__map .bpa-map-container {
  border: none;
  border-radius: var(--radius-leaf-lg);
  background: var(--color-light);
  overflow: hidden;
}

.entry-content .acf-locations-map--layout-local .acf-locations-map__map .bpa-map-container,
.wp-block-post-content .acf-locations-map--layout-local .acf-locations-map__map .bpa-map-container,
.editor-styles-wrapper .acf-locations-map--layout-local .acf-locations-map__map .bpa-map-container {
  border-radius: var(--radius-leaf-lg);
}

.acf-locations-map--layout-local .acf-locations-map__map .bpa-map-canvas {
  border-radius: inherit;
}

/* Static map fallback — Figma 7230:5161 (608×742, Radius/Large = --radius-leaf-lg). */
.acf-locations-map__static-map-fallback {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  inline-size: 100%;
}

.acf-locations-map__static-map {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-light);
  border-radius: var(--radius-leaf-lg);
}

.acf-locations-map__static-map-note {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-muted-text);
  text-align: center;
  background-color: var(--color-muted-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.entry-content .acf-locations-map--layout-local .acf-locations-map__static-map,
.wp-block-post-content .acf-locations-map--layout-local .acf-locations-map__static-map,
.editor-styles-wrapper .acf-locations-map--layout-local .acf-locations-map__static-map {
  border-radius: var(--radius-leaf-lg);
}

.acf-locations-map__static-map-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}

@media (max-width: 1023px) {
  .acf-locations-map--layout-local .acf-locations-map__static-map,
  .acf-locations-map--layout-local .acf-locations-map__map .bpa-map-container,
  .acf-locations-map--layout-local .acf-locations-map__map .bpa-map-canvas {
    height: 20rem !important;
    min-height: 20rem;
    min-block-size: 20rem;
  }

  .acf-locations-map--layout-local .acf-locations-map__panel {
    max-block-size: none;
  }

  .acf-locations-map--layout-local .acf-locations-map__card-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .acf-locations-map--layout-local .acf-locations-map__card-cta--local.bpa-button {
    margin-inline-start: 0;
    inline-size: 100%;
    justify-content: center;
  }
}

.acf-locations-map--layout-local .acf-locations-map__map-placeholder {
  border-radius: var(--radius-leaf-lg);
  overflow: hidden;
}

/* Seam into browse-by-state section below (Locations page stack). */
.acf-locations-map--layout-local + .acf-locations-browse-by-state-section {
  margin-block-start: -4px;
}