/*
 * Pharmacy Locator (page-pharmacy-locator.php)
 * Section styles for template-parts/locator/*. Loaded after style.css, which
 * owns the tokens, base, buttons, tag, header and footer.
 *
 * Lengths are the Figma values converted to the theme's fluid scale
 * (px / 1920 * 100 = vw), so the page tracks the 1920px design canvas.
 *
 * One inner measure sits inside .container--wide (1686px of content):
 *   .locator-hero__inner / .locator-search__inner / .locator-help__inner
 *     — 1584px (168px page margins), the shared --measure-wide.
 */

/* ==========================================================================
   Hero
   ========================================================================== */
.locator-hero {
  background: var(--c-white);
  padding-block: clamp(2.25rem, calc(5.73 * var(--vw)), 6.876rem) clamp(1.75rem, calc(3.13 * var(--vw)), 3.75rem);
}
.locator-hero__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 49.81% 43.25%;
  column-gap: 6.94%;
  align-items: center;
}
.locator-eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.locator-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: currentColor;
}
.locator-hero__title {
  margin-top: clamp(1.25rem, calc(1.82 * var(--vw)), 2.1875rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-charcoal);
}
.locator-hero__title .accent {
  color: var(--c-orange);
}
.locator-hero__intro {
  margin-top: clamp(0.875rem, calc(1.3 * var(--vw)), 1.5625rem);
  max-width: 38ch;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-grey);
}
.locator-hero__art img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Search
   ========================================================================== */
.locator-search {
  background: var(--c-white);
  padding-block: clamp(1.5rem, calc(2.6 * var(--vw)), 3.125rem) clamp(2.5rem, calc(5.2 * var(--vw)), 6.25rem);
}
.locator-search__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
}
.locator-search__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-charcoal);
  margin-bottom: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
}

.locator-form {
  background: var(--c-ice);
  border-radius: min(24px, calc(1.25 * var(--vw-inset)));
  padding: clamp(1.25rem, calc(2.08 * var(--vw)), 2.5rem);
}
.locator-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
  gap: clamp(1rem, calc(1.25 * var(--vw)), 1.5rem);
  align-items: start;
}
.locator-form__label {
  display: block;
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-navy);
  margin-bottom: 0.5em;
}
.locator-form__input,
.locator-form__select {
  width: 100%;
  /* Matches the .btn height so the three columns share one baseline. */
  padding: 0.775em 1.1em;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-charcoal);
  background: var(--c-white);
  border: 1px solid #cfe6ef;
  border-radius: min(50px, calc(2.6042 * var(--vw-inset)));
  transition: border-color var(--motion-quick) ease;
}
.locator-form__select {
  /* The native arrow sits too close to a pill edge; pad it away from the curve. */
  padding-right: 2.4em;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23393939' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2em center;
}
.locator-form__input:focus,
.locator-form__select:focus {
  outline: 2px solid var(--c-blue);
  outline-offset: 1px;
  border-color: transparent;
}
.locator-form__input[aria-invalid="true"] {
  border-color: var(--c-orange);
}
.locator-form__help {
  margin-top: 0.5em;
  font-size: clamp(0.8125rem, calc(0.833 * var(--vw)), 1rem);
  line-height: 1.45;
  color: var(--c-grey);
}
.locator-form__field--submit {
  /* Push the button down past the label row so it lines up with the inputs. */
  padding-top: calc(var(--fs-ui) * 1.3 + 0.5em);
}
.locator-form__submit {
  width: 100%;
}
.locator-form__submit[disabled] {
  opacity: 0.65;
  cursor: progress;
}
.locator-form__error:empty {
  display: none;
}
.locator-form__error {
  margin-top: clamp(0.75rem, calc(1.04 * var(--vw)), 1.25rem);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--c-orange);
}

/* ==========================================================================
   Results
   ========================================================================== */
.locator-results:empty {
  display: none;
}
.locator-results {
  margin-top: clamp(1.5rem, calc(2.6 * var(--vw)), 3.125rem);
  scroll-margin-top: clamp(5rem, calc(7.8 * var(--vw)), 9.375rem);
}
.locator-results:focus {
  outline: none;
}
.locator-results__status {
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-navy);
  margin-bottom: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
}
.locator-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, calc(19.8 * var(--vw)), 380px), 1fr));
  gap: clamp(1rem, calc(1.25 * var(--vw)), 1.5rem);
}

.locator-card {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: clamp(1.125rem, calc(1.56 * var(--vw)), 1.875rem);
  background: var(--c-white);
  border: 1px solid #e3eef3;
  border-left: 4px solid var(--c-orange);
  border-radius: min(16px, calc(0.833 * var(--vw-inset)));
}
.locator-card__name {
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-navy);
}
.locator-card__address {
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--c-charcoal);
}
.locator-card__phone a {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--c-blue);
  text-decoration: none;
}
.locator-card__phone a:hover {
  text-decoration: underline;
}
.locator-card__meta {
  margin-top: auto;
  padding-top: 0.6em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
}
.locator-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.85em;
  font-size: clamp(0.75rem, calc(0.78 * var(--vw)), 0.9375rem);
  font-weight: 600;
  line-height: 1.5;
  color: #0f6b32;
  background: #e4f6ea;
  border-radius: 50px;
}
.locator-card__directions {
  font-size: clamp(0.8125rem, calc(0.833 * var(--vw)), 1rem);
  font-weight: 600;
  color: var(--c-blue);
  text-decoration: none;
}
.locator-card__directions:hover {
  text-decoration: underline;
}

/* Empty and failure states share a shape — a heading, a line of help, and the
   Member Services number, because both end with "call us". */
.locator-notice {
  padding: clamp(1.25rem, calc(2.08 * var(--vw)), 2.5rem);
  background: var(--c-cream);
  border-radius: min(16px, calc(0.833 * var(--vw-inset)));
  text-align: center;
}
.locator-notice__heading {
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-navy);
}
.locator-notice__body {
  margin-top: 0.6em;
  margin-inline: auto;
  max-width: 56ch;
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--c-grey);
}
/* A search still running reads as progress, not as a problem. */
.locator-notice--warming {
  background: var(--c-ice);
}
.locator-notice--warming .locator-notice__heading::before {
  content: "";
  display: inline-block;
  vertical-align: -0.15em;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.5em;
  border: 2px solid var(--c-sky);
  border-top-color: var(--c-blue);
  border-radius: 50%;
  animation: locator-spin 0.9s linear infinite;
}
@keyframes locator-spin {
  to {
    transform: rotate(360deg);
  }
}

.locator-notice__phone {
  margin-top: 0.8em;
}
.locator-notice__phone a {
  font-size: var(--fs-h6);
  font-weight: 700;
  color: var(--c-orange);
  text-decoration: none;
}
.locator-notice__phone a:hover {
  text-decoration: underline;
}

.locator-search__note {
  margin-top: clamp(1.25rem, calc(1.82 * var(--vw)), 2.1875rem);
  max-width: 82ch;
  font-size: clamp(0.8125rem, calc(0.833 * var(--vw)), 1rem);
  line-height: 1.6;
  color: var(--c-grey);
}

/* The portal's own search page (template-parts/locator/portal.php).
   Cross-origin, so its height is set rather than read. It opens just tall
   enough for the search form, and grows once a search has loaded results
   (main.js marks it .is-expanded). Expanded, it is one screen tall, so a
   frame that scrolls inside itself is never taller than the view, capped at
   what a page of ten desktop results needs at each width, so a tall monitor
   shows no dead space under it. */
.locator-embed {
  display: block;
  width: 100%;
  height: 440px; /* the form alone: 436px in any frame over ~600px */
  border: 0;
  border-radius: min(24px, calc(1.25 * var(--vw-inset)));
  transition: height var(--motion) ease;
}
.locator-embed.is-expanded {
  height: clamp(560px, calc(100vh - 2rem), 1340px);
  height: clamp(560px, calc(100svh - 2rem), 1340px); /* 1319px in 1188px */
}
@media (max-width: 1199px) {
  .locator-embed.is-expanded {
    height: clamp(560px, calc(100vh - 2rem), 1640px);
    height: clamp(560px, calc(100svh - 2rem), 1640px); /* 1607px in 845px */
  }
}
@media (max-width: 991px) {
  /* 1795px in 704px. Once the frame is under 576px the portal drops its paged
     table for a list of every result, so no cap fits — there the one-screen
     height is what holds, and the frame scrolls inside itself. */
  .locator-embed.is-expanded {
    height: clamp(560px, calc(100vh - 2rem), 1830px);
    height: clamp(560px, calc(100svh - 2rem), 1830px);
  }
}
/* The form's help line wraps as the frame narrows: 460-484px, then 508px. */
@media (max-width: 699px) {
  .locator-embed {
    height: 490px;
  }
}
@media (max-width: 359px) {
  .locator-embed {
    height: 512px;
  }
}

/* While a search is in flight the old results stay put but read as stale. */
.locator-form.is-loading ~ .locator-results {
  opacity: 0.45;
  transition: opacity var(--motion-quick) ease;
}

/* ==========================================================================
   Help
   ========================================================================== */
.locator-help {
  background: var(--c-ice);
  padding-block: clamp(2.5rem, calc(5.2 * var(--vw)), 6.25rem);
}
.locator-help__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  text-align: center;
}
.locator-help__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-charcoal);
}
.locator-help__title .accent {
  color: var(--c-orange);
}
.locator-help__body {
  margin: clamp(0.875rem, calc(1.3 * var(--vw)), 1.5625rem) auto 0;
  max-width: 60ch;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-grey);
}
.locator-help__contact {
  margin-top: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.6em;
}
.locator-help__label {
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-navy);
}
.locator-help__phone {
  font-size: var(--fs-h5);
  font-weight: 800;
  color: var(--c-orange);
  text-decoration: none;
}
.locator-help__phone:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Below the design canvas
   ========================================================================== */
@media (max-width: 1199px) {
  .locator-form__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .locator-form__field--submit {
    grid-column: 1 / -1;
    padding-top: 0;
  }
  .locator-form__submit {
    width: auto;
    min-width: 14rem;
  }
}

@media (max-width: 991px) {
  .locator-hero__inner {
    grid-template-columns: 1fr;
    row-gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  .locator-hero__art {
    order: -1;
    max-width: 26rem;
  }
  .locator-hero__intro {
    max-width: none;
  }
}

@media (max-width: 575px) {
  .locator-form__row {
    grid-template-columns: 1fr;
  }
  .locator-form__submit {
    width: 100%;
    min-width: 0;
  }
  .locator-card__meta {
    gap: 0.5em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .locator-form.is-loading ~ .locator-results,
  .locator-embed {
    transition: none;
  }
  .locator-notice--warming .locator-notice__heading::before {
    animation: none;
  }
}

/* Sits under the count line when an area has more pharmacies than we list. */
.locator-results__trimmed {
  margin-top: -0.6em;
  margin-bottom: clamp(1rem, calc(1.56 * var(--vw)), 1.875rem);
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--c-grey);
}