/* Locations Map — location directory beside an interactive Google map.

   Everything is tokenised. Two module-scoped custom properties:

   --ar-locations-accent-text  the secondary blue measures 3.44:1 on white, below the 4.5:1
       needed for the 12–15px eyebrow and "Get Directions" text, so those two use the secondary
       mixed 35% toward --ar-color-dark (≈5.4:1 on white, ≥4.5:1 on every light surface).

   --ar-locations-marker       set inline from the Marker colour field (default
       var(--ar-color-primary)). It colours the map pins and the selected card's bar, list pin
       and chevron, so a selection reads as one colour across list and map. These are non-text;
       orange is 2.19:1 on white, so each pin also carries an edge stroke mixed toward
       --ar-color-dark (≈4.6:1 against white for the default orange), and selection never rests
       on the colour alone (tint fill, aria-current, 1.25× marker scale).

   Fixed brand-orange touches, independent of the marker field: the rule under the heading,
   and the "Get Directions" arrow and hover underline (the theme's --ar-color-link-decoration).

   Render modes (see module.html): --interactive shows the list + map; --static hides the map
   panel and lays the cards out as a directory grid with their details visible. */

.ar-locations {
  --ar-locations-accent-text: var(--ar-color-dark);
  --ar-locations-marker: var(--ar-color-primary);
  padding: var(--ar-section-spacing) 0;
  background: var(--ar-surface-page);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ar-locations {
    --ar-locations-accent-text: color-mix(in srgb, var(--ar-color-secondary) 65%, var(--ar-color-dark));
    --ar-locations-marker-edge: color-mix(in srgb, var(--ar-locations-marker) 55%, var(--ar-color-dark));
  }
}

.ar-locations--surface-alt { background: var(--ar-surface-alt); }
.ar-locations--surface-tint { background: var(--ar-surface-tint); }

/* The section owns its gutters so it can sit in a full-width dnd_section, as FAQ, Benefits
   Grid and Values Path do; .content-wrapper only caps the width. */
.ar-locations__inner { padding-inline: var(--ar-container-pad); }

/* ---------------------------------------------------------------- header */

.ar-locations__header { text-align: center; }

.ar-locations__eyebrow {
  margin: 0 0 var(--ar-space-2xs);
  color: var(--ar-locations-accent-text);
}

.ar-locations__heading {
  margin: 0;
  font-size: var(--ar-text-section-display);
  line-height: var(--ar-leading-heading);
}

/* Brand-orange accent rule under the heading — decorative, so no contrast floor applies.
   Same primary-rule idiom as Feature List's split layout. */
.ar-locations__heading::after {
  content: "";
  display: block;
  width: var(--ar-space-sm);
  height: 3px;
  margin: var(--ar-space-xs) auto 0;
  border-radius: var(--ar-radius-xs);
  background: var(--ar-color-primary);
}

.ar-locations__description {
  max-width: 46em;
  margin: var(--ar-space-2xs) auto 0;
  color: var(--ar-color-muted);
  white-space: pre-line;
}

.ar-locations__heading + .ar-locations__description { margin-top: var(--ar-space-xs); }

.ar-locations__editor-note {
  margin: var(--ar-space-xs) 0 0;
  padding: var(--ar-space-2xs) var(--ar-space-xs);
  border-left: 4px solid var(--ar-color-primary);
  background: var(--ar-surface-card);
  color: var(--ar-color-body);
  font-size: var(--ar-text-small);
}

/* ---------------------------------------------------------------- layout */

.ar-locations__layout {
  display: grid;
  /* The mockup's 29% list was drawn on a ~1460px canvas; on the 1128px content width a
     typical "123 Example Street, New York, NY 10001" line needs ~35% not to wrap. */
  grid-template-columns: minmax(300px, 35%) minmax(0, 1fr);
  gap: var(--ar-space-xs);
  /* The list column takes the map's height, so the two panels end flush as in the mockup. */
  align-items: stretch;
  margin-top: var(--ar-space-sm);
}

/* ---------------------------------------------------------------- list */

/* A flex column capped at the map height. Cards grow to share any spare height, so a typical
   four-to-six location list ends flush with the map, and the list scrolls once they no
   longer fit (flex-shrink 0 keeps a card from being squashed instead). */
.ar-locations__list {
  display: flex;
  flex-direction: column;
  max-height: var(--ar-locations-map-h);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border-radius: var(--ar-radius-lg);
  background: var(--ar-surface-card);
  box-shadow: var(--ar-shadow-card);
}

.ar-locations__item {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin: 0;
}

.ar-locations__item + .ar-locations__item { border-top: 1px solid var(--ar-color-border); }

/* THE BUTTON TRAP. theme-overrides.css §4 styles the bare `button` element as the orange
   uppercase CTA, with :hover and :active rules of its own. A location card is not a CTA, so
   every one of those properties is pinned back here on all three states — a class plus
   pseudo-class (0,2,0) beats `button:hover` (0,1,1) whatever the load order. :focus-visible
   keeps the global outline; only its offset moves inside the scrolling list. The static
   <div> variant shares the rule so both modes lay out identically. */
.ar-locations__select,
.ar-locations__select:hover,
.ar-locations__select:active {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--ar-space-xs);
  align-content: center;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: var(--ar-space-xs);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ar-color-body);
  font-family: inherit;
  font-size: var(--ar-text-body);
  font-weight: var(--ar-weight-body);
  line-height: var(--ar-leading-body);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  transform: none;
  transition: background-color var(--ar-transition), box-shadow var(--ar-transition);
}

button.ar-locations__select { cursor: pointer; }
button.ar-locations__select:focus-visible { outline-offset: -4px; }

.ar-locations__item:not(.ar-locations__item--active) button.ar-locations__select:hover,
.ar-locations__item--hover:not(.ar-locations__item--active) button.ar-locations__select {
  background: var(--ar-surface-page);
}

/* Active: tint fill, a 4px inset bar in the marker colour, the marker-coloured pin and
   chevron, and aria-current — the bar is the shape cue, so selection never rests on colour
   alone. */
.ar-locations__item--active button.ar-locations__select,
.ar-locations__item--active button.ar-locations__select:hover,
.ar-locations__item--active button.ar-locations__select:active {
  background: var(--ar-surface-tint);
  box-shadow: inset 4px 0 0 var(--ar-locations-marker);
}

.ar-locations__pin {
  display: flex;
  padding-top: 1px;
  color: var(--ar-color-muted);
  transition: color var(--ar-transition);
}

.ar-locations__pin svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.ar-locations__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ar-locations__name {
  margin-bottom: var(--ar-space-2xs);
  color: var(--ar-color-h3);
  font-size: var(--ar-text-h5);
  font-weight: var(--ar-weight-strong);
  line-height: var(--ar-leading-heading);
}

.ar-locations__office { color: var(--ar-color-muted); }
.ar-locations__address { color: var(--ar-color-body); }

.ar-locations__chevron {
  display: flex;
  align-self: center;
  color: var(--ar-color-muted);
  transition: color var(--ar-transition), transform var(--ar-transition);
}

.ar-locations__chevron svg {
  display: block;
  width: 18px;
  height: 18px;
}

.ar-locations__item--active .ar-locations__pin,
.ar-locations__item--active .ar-locations__chevron { color: var(--ar-locations-marker); }

.ar-locations__item--active .ar-locations__chevron { transform: translateX(2px); }

/* ---------------------------------------------------------------- details (list + popup) */

/* In the list the details sit under the text column. On an interactive map they are hidden
   there and only surface, cloned, inside the popup; unmapped cards keep them visible. */
.ar-locations__list .ar-locations__details {
  padding: 0 var(--ar-space-xs) var(--ar-space-xs) calc(28px + 2 * var(--ar-space-xs));
  margin-top: calc(-1 * var(--ar-space-2xs));
}

.ar-locations--interactive .ar-locations__list .ar-locations__item:not(.ar-locations__item--unmapped) .ar-locations__details {
  display: none;
}

.ar-locations__summary {
  margin: 0 0 var(--ar-space-2xs);
  color: var(--ar-color-body);
  font-size: var(--ar-text-body);
  line-height: var(--ar-leading-body);
  white-space: pre-line;
}

.ar-locations__directions,
.ar-locations__directions:visited,
.ar-locations__directions:active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ar-locations-accent-text);
  font-size: var(--ar-text-body);
  font-weight: var(--ar-weight-strong);
  line-height: var(--ar-leading-body);
  text-decoration: none;
}

/* Pointer hover keeps the accessible blue text and adds the theme's orange link underline
   (--ar-color-link-decoration) — not the global orange TEXT hover, which is a documented
   2.19:1 exception the popup does not need to inherit. */
.ar-locations__directions:hover,
.ar-locations__directions:focus-visible {
  color: var(--ar-locations-accent-text);
  text-decoration: underline;
  text-decoration-color: var(--ar-color-link-decoration, var(--ar-color-primary));
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* The arrow is decorative (the text carries the meaning), so it can take the brand orange. */
.ar-locations__directions svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ar-color-primary);
  transition: transform var(--ar-transition);
}

.ar-locations__directions:hover svg { transform: translateX(2px); }

/* ---------------------------------------------------------------- map panel */

.ar-locations__map-panel {
  position: relative;
  height: var(--ar-locations-map-h);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--ar-radius-lg);
  background: var(--ar-surface-alt);
  box-shadow: var(--ar-shadow-card);
}

.ar-locations__map-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--ar-color-muted);
  font-size: var(--ar-text-small);
}

.ar-locations__map-status[hidden] { display: none; }

.ar-locations__map {
  position: absolute;
  inset: 0;
}

/* Google's own controls are real <button>s too, so the global CTA rule reaches them. Google
   sets most of their geometry inline; this restores the rest to its resting look, scoped to
   the map so nothing outside the module is touched. */
.ar-locations__map button,
.ar-locations__map button:hover,
.ar-locations__map button:active {
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  transform: none;
}

/* ---------------------------------------------------------------- markers */

/* Advanced Marker content. The label is absolutely positioned so the marker box is the pin
   alone — Google anchors a marker at the bottom centre of its content box, and a label in
   flow would pull that point off the pin's tip. */
.ar-locations-marker {
  position: relative;
  display: block;
  transform-origin: 50% 100%;
  transition: transform var(--ar-transition);
}

.ar-locations-marker__pin {
  display: block;
  width: 30px;
  height: 40px;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

/* The edge stroke keeps a light pin (the default orange) readable against pale map tiles; it
   is absent where color-mix is unsupported, leaving the plain fill. */
.ar-locations-marker__pin path {
  fill: var(--ar-locations-marker);
  stroke: var(--ar-locations-marker-edge, none);
  stroke-width: 1.5;
}

.ar-locations-marker__pin circle { fill: var(--ar-color-inverse); }

.ar-locations-marker__image {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.ar-locations-marker__label {
  position: absolute;
  top: 55%;
  left: 100%;
  margin-left: 4px;
  color: var(--ar-color-dark);
  font-family: var(--ar-font-body), sans-serif;
  font-size: var(--ar-text-body);
  font-weight: var(--ar-weight-body);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 3px var(--ar-color-inverse), 0 0 3px var(--ar-color-inverse), 0 0 2px var(--ar-color-inverse);
  pointer-events: none;
}

.ar-locations-marker.is-hover { transform: scale(1.12); }
.ar-locations-marker.is-active { transform: scale(1.25); }
.ar-locations-marker.is-active .ar-locations-marker__label { font-weight: var(--ar-weight-strong); }

/* ---------------------------------------------------------------- popup (InfoWindow content) */

.ar-locations-popup__title {
  margin: 0;
  color: var(--ar-color-h5);
  font-family: var(--ar-font-body), sans-serif;
  font-size: var(--ar-text-h5);
  font-weight: var(--ar-weight-strong);
  line-height: var(--ar-leading-heading);
}

.ar-locations-popup {
  max-width: 280px;
  color: var(--ar-color-body);
  font-family: var(--ar-font-body), sans-serif;
}

.ar-locations-popup__address {
  margin: 0;
  color: var(--ar-color-muted);
  font-size: var(--ar-text-small);
  line-height: var(--ar-leading-body);
}

.ar-locations-popup .ar-locations__details { margin-top: var(--ar-space-2xs); }

/* ---------------------------------------------------------------- highlights */

/* Icons stay on the secondary blue: per the guide (§3) blue is informational, orange is
   conversion. */
.ar-locations__highlights {
  display: grid;
  grid-template-columns: repeat(var(--ar-locations-highlights, 3), minmax(0, 1fr));
  gap: var(--ar-space-sm);
  margin: var(--ar-space-sm) 0 0;
  padding: calc(var(--ar-space-xs) + var(--ar-space-2xs)) var(--ar-space-md);
  list-style: none;
  border-radius: var(--ar-radius-lg);
  background: var(--ar-surface-card);
  box-shadow: var(--ar-shadow-card);
}

.ar-locations__highlight {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--ar-space-xs);
  align-items: center;
  margin: 0;
}

.ar-locations__highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ar-surface-tint);
  color: var(--ar-color-secondary);
}

/* The HubL icon tag's SVG inherits neither size nor colour — the Benefits Grid convention. */
.ar-locations__highlight-glyph {
  display: block;
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.ar-locations__highlight-title {
  margin: 0;
  font-size: var(--ar-text-h5);
  line-height: var(--ar-leading-heading);
}

.ar-locations__highlight-text {
  margin: 4px 0 0;
  color: var(--ar-color-muted);
  font-size: var(--ar-text-body);
  line-height: var(--ar-leading-body);
}

/* ---------------------------------------------------------------- static directory */

.ar-locations--static .ar-locations__layout { grid-template-columns: minmax(0, 1fr); }
.ar-locations--static .ar-locations__map-panel { display: none; }

.ar-locations--static .ar-locations__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ar-space-xs);
  max-height: none;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ar-locations--static .ar-locations__item {
  border-radius: var(--ar-radius-lg);
  background: var(--ar-surface-card);
  box-shadow: var(--ar-shadow-card);
}

.ar-locations--static .ar-locations__item + .ar-locations__item { border-top: 0; }

/* ---------------------------------------------------------------- responsive */

/* 959px is the audited production breakpoint (guide §8): below it the list is too narrow to
   sit beside a usable map, so the two stack, list first as in the desktop reading order. */
@media (max-width: 959px) {
  .ar-locations__layout { grid-template-columns: minmax(0, 1fr); }

  .ar-locations__list {
    max-height: none;
    overflow: visible;
  }

  .ar-locations__map-panel { height: var(--ar-locations-map-h-mobile); }

  .ar-locations__highlights {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ar-space-xs);
    padding: var(--ar-space-xs) var(--ar-space-sm);
  }
}

@media (max-width: 800px) {
  .ar-locations__heading { font-size: var(--ar-text-h1); }
}

@media (max-width: 575px) {
  .ar-locations__select,
  .ar-locations__select:hover,
  .ar-locations__select:active {
    gap: var(--ar-space-2xs) var(--ar-space-xs);
    padding: var(--ar-space-xs);
  }

  .ar-locations__list .ar-locations__details {
    padding-left: calc(28px + 2 * var(--ar-space-xs));
  }

  .ar-locations__highlights { padding: var(--ar-space-xs); }

  .ar-locations__highlight {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .ar-locations__highlight-icon {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-locations__select,
  .ar-locations__pin,
  .ar-locations__chevron,
  .ar-locations__directions svg,
  .ar-locations-marker { transition: none; }

  .ar-locations__item--active .ar-locations__chevron,
  .ar-locations__directions:hover svg { transform: none; }
}