/* ==========================================================================
   Location page
   ========================================================================== */

/* --- Hero + gallery ---------------------------------------------------- */

/* --- Info card + map --------------------------------------------------- */

.ca-loc-info {
  display: grid;
  /* min(): on the narrowest phones a 280px column would be wider than the screen. */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}

.ca-loc-info__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ca-loc-info__address {
  color: var(--ca-ink);
  font-size: var(--ca-text-lg);
  font-weight: 600;
  line-height: 1.4;
}
.ca-loc-info__address:hover { color: var(--ca-orange-dark); }

.ca-loc-info__pair { display: flex; flex-wrap: wrap; gap: 22px; }
.ca-loc-info__pair > * { min-width: 0; max-width: 100%; }
/* A long store email breaks rather than widening the page past a small phone. */
.ca-loc-info__pair a { color: var(--ca-ink); font-size: var(--ca-text-md); font-weight: 600; overflow-wrap: anywhere; }
.ca-loc-info__pair a:hover { color: var(--ca-orange-dark); }

.ca-loc-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ca-loc-info__hours { color: var(--ca-ink); font-size: var(--ca-text-md); font-weight: 600; }

.ca-loc-info__directions { margin-top: auto; }

.ca-loc-info__disclaimer {
  text-align: center;
  color: var(--ca-faint);
  font-size: var(--ca-text-sm);
  font-family: var(--ca-font-mono);
  margin: -6px 0 0;
}

.ca-loc-map {
  position: relative;
  min-height: 300px;
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-lg);
  overflow: hidden;
}
.ca-loc-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Q&A search -------------------------------------------------------- */

.ca-qa {
  background: var(--ca-white);
  border: 1px solid var(--ca-teal-line);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 30px);
  box-shadow: var(--ca-shadow-md);
}

.ca-qa__list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ca-qa__question::-webkit-details-marker { display: none; }
.ca-qa__question::marker { content: ""; }

.ca-qa__empty {
  padding: 16px 18px;
  background: var(--ca-tint);
  border-radius: 14px;
  color: var(--ca-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

/* --- Admission table --------------------------------------------------- */

.ca-rates { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

.ca-rates__head,
.ca-rates__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.ca-rates__head {
  padding-inline: 4px;
  font-family: var(--ca-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-faint);
}
.ca-rates__head span + span { text-align: right; }

.ca-rates__row {
  background: var(--ca-cream);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-sm);
  padding: 14px;
  font-size: var(--ca-text-base);
}

.ca-rates__age { font-weight: 600; color: var(--ca-ink); }
.ca-rates__note { font-size: var(--ca-text-xs); color: var(--ca-teal); margin-top: 2px; }
.ca-rates__price {
  text-align: right;
  font-family: var(--ca-font-display);
  font-weight: 700;
  color: var(--ca-ink);
}

/* --- Specials ---------------------------------------------------------- */

.ca-special__headline {
  font-family: var(--ca-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ca-orange);
  letter-spacing: var(--ca-tracking-tight);
}
.ca-special__detail { color: var(--ca-muted); font-size: 14px; margin-top: 6px; }

/* --- Membership "coming soon" ------------------------------------------ */

.ca-coming-soon {
  background: var(--ca-sand);
  border: 1px solid rgba(242, 103, 43, 0.25);
  border-radius: var(--ca-r-md);
  padding: clamp(20px, 3vw, 26px);
  text-align: center;
}
.ca-coming-soon p {
  color: var(--ca-body);
  font-size: var(--ca-text-base);
  line-height: 1.6;
  max-width: 46ch;
  margin-inline: auto;
}

/* --- Sticky action bar -------------------------------------------------- */

/*
 * Pinned to the bottom of the screen, and kept there while Android's address
 * bar slides in and out.
 *
 * Chrome moves bottom-pinned elements with its toolbar on the compositor —
 * but only an element on a layer of its own. This one used to be painted with
 * the page and a blurred backdrop, so it was repositioned only after the
 * toolbar had finished moving: it rode up with the page, then snapped back.
 * `translateZ(0)` gives it its own layer; the blur (which re-samples the page
 * under it on every frame of that animation) is gone in favour of an almost
 * solid fill that looks the same.
 */
.ca-actionbar {
  position: fixed;
  right: 0; bottom: 0; left: 0;
  z-index: var(--ca-z-sticky);
  background: color-mix(in srgb, var(--ca-cream) 97%, transparent);
  border-top: 1px solid var(--ca-hairline-mid);
  /* Clear the home indicator on phones that have one. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.ca-actionbar__inner {
  max-width: 640px;
  margin-inline: auto;
  padding: 10px clamp(12px, 3vw, 20px);
  display: flex;
  gap: 10px;
}
.ca-actionbar__call {
  flex: none;
  width: 46px;
  padding: 12px 0;
  font-size: 18px;
}
/* Waiver and party share the room left after the phone button. */
.ca-actionbar__book {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 10px;
  white-space: nowrap;
}
@media (max-width: 370px) {
  .ca-actionbar__inner { gap: 8px; }
  .ca-actionbar__book { padding-inline: 6px; font-size: 14px; }
}

/* --- Locations archive -------------------------------------------------- */

.ca-loc-card__meta { color: var(--ca-muted); font-size: 14px; }
.ca-loc-card__actions { margin-top: auto; display: flex; gap: 8px; }
.ca-loc-card__actions > * { flex: 1; }

.ca-loc-state-heading {
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-xs);
  letter-spacing: var(--ca-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ca-orange-dark);
  margin: 32px 0 14px;
}

/* --- Locator results ---------------------------------------------------- */

/*
 * The list scrolls itself.
 *
 * It used to rely on the dialog being a flex column and the panel inside it
 * shrinking — which is the textbook pattern, and which I could not get to
 * actually scroll here. An explicit height on the list does not depend on how
 * anything above it is laid out, so there is nothing to get wrong.
 *
 * It also keeps the search box and "Use my location" in view while you scroll
 * the stores, which the previous arrangement did not.
 */
.ca-locator__results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;

  /*
   * Sized so the list can never push the dialog past its own 88vh cap — the
   * head, search box and note above it come to roughly 340px. That way the
   * list's scrollbar is always the one that moves, on a laptop and on a short
   * window alike, rather than the two of them taking turns.
   */
  max-height: clamp(200px, calc(88vh - 340px), 520px);
  overflow-y: auto;
  /* Reaching the end should not start scrolling the page behind the dialog. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* Room for the scrollbar so it does not sit on top of the buttons. */
  padding-right: 4px;
  scrollbar-width: thin;
}

/* ==========================================================================
   Always-visible panels
   Hours, admission and specials are no longer collapsed, so they need the
   same card treatment the accordions had.
   ========================================================================== */

.ca-panel {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline-mid);
  border-radius: 18px;
  padding: var(--ca-panel-pad);
  margin-bottom: 14px;
  box-shadow: var(--ca-shadow-sm);
}

.ca-panel--accent {
  border-color: var(--ca-orange-line);
  background: linear-gradient(180deg, var(--ca-peach), var(--ca-white));
}

.ca-panel__title {
  font-family: var(--ca-font-display);
  font-weight: 700;
  font-size: clamp(18px, 3vw, 24px);
  letter-spacing: var(--ca-tracking-tight);
  margin: 0 0 16px;
}

.ca-panel__image {
  width: 100%;
  height: auto;
  border-radius: var(--ca-r-md);
  margin-bottom: 18px;
}

.ca-note--mono { font-family: var(--ca-font-mono); }
.ca-disclaimer { max-width: 70ch; margin-top: 22px; }

/* Hidden only when there is genuinely nothing to report. */
.ca-status[data-state="unknown"] { display: none; }

.ca-special--flyer {
  border: 1px solid var(--ca-hairline);
  padding: 0;
  background: var(--ca-white);
  box-shadow: var(--ca-shadow-sm);
  margin: 0;
  border-radius: var(--ca-r-md);
  overflow: hidden;
}

/* --- Q&A head and popular searches -------------------------------------- */

.ca-qa__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ca-qa__mascot { width: 46px; height: auto; flex: none; }
.ca-qa__head .ca-eyebrow { margin-bottom: 0; }

.ca-qa__suggest-label {
  margin: 16px 0 8px;
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-xs);
  letter-spacing: var(--ca-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ca-faint);
}

/* --- Locator head and today's hours -------------------------------------- */

.ca-locator__head { display: flex; align-items: center; gap: 12px; }
.ca-locator__mascot { width: 48px; height: auto; flex: none; }
.ca-locator__head .ca-modal__title { margin: 0; }

/* Hours stack one range per line — easier to scan than a dot-separated run. */
.ca-loc-info__hours-line {
  display: block;
  font-variant-numeric: tabular-nums;
}
.ca-loc-info__hours-line + .ca-loc-info__hours-line { margin-top: 3px; }

/* Mascot reads as a badge rather than a cut-out. */
.ca-qa__mascot,
.ca-locator__mascot {
  border-radius: 50%;
  background: var(--ca-sand);
  object-fit: cover;
  aspect-ratio: 1;
}

/* Q&A answers are always visible now; the question is a heading, not a button. */
.ca-qa__item {
  border: 1px solid var(--ca-hairline-mid);
  border-radius: 14px;
  overflow: hidden;
  background: var(--ca-white);
}.ca-qa__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px 0;
  background: var(--ca-cream);
  cursor: pointer;
  font-size: var(--ca-text-base);
  font-weight: 700;
  color: var(--ca-ink);
  list-style: none;
  margin: 0;
  font-family: var(--ca-font-display);
}.ca-qa__answer {
  padding: 8px 18px 16px;
  background: var(--ca-white);
  color: var(--ca-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* --- Q&A: search-led ----------------------------------------------------- */

/*
 * Before JavaScript runs, every answer is visible — that is what keeps the
 * content indexable and usable without scripts. Once the box becomes
 * interactive the list collapses and the search drives it.
 */
.ca-qa.is-interactive .ca-qa__list { margin-top: 12px; }

.ca-qa__prompt {
  margin: 16px 0 0;
  padding: 16px 18px;
  background: var(--ca-tint);
  border-radius: 14px;
  color: var(--ca-muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.ca-qa__item[hidden] { display: none; }

/* --- Accordion actions --------------------------------------------------- */

/*
 * Buttons inside an expandable section are the point of the section, so they
 * are centred rather than left-hanging under a paragraph.
 */
.ca-accordion__body .ca-btn-row {
  justify-content: center;
  margin-top: 20px;
}

.ca-accordion__body > .ca-btn,
.ca-accordion__body > a.ca-btn,
.ca-accordion__body > button.ca-btn {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
}

.ca-accordion__body .ca-coming-soon .ca-btn { margin-inline: auto; }

/* --- Party package table -------------------------------------------------- */

/*
 * Reuses the admission table so the two read as the same thing. The two-column
 * variant is for stores that price per guest rather than by day.
 */
.ca-rates--party .ca-rates__age { font-size: var(--ca-text-lg); }
.ca-rates--party .ca-rates__note {
  color: var(--ca-muted);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 4px;
}

.ca-rates--two .ca-rates__head,
.ca-rates--two .ca-rates__row {
  grid-template-columns: 1.7fr 1fr;
}/*
 * The store card, used by the locator popup and the locations archive alike.
 * They were two different cards before, so a fix to one never reached the
 * other.
 */
.ca-loc-card {
  /*
   * Positioned, because the distance sits in its top-right corner.
   *
   * Without this the distance anchors to whatever *is* positioned — which in
   * the popup is the dialog, so it landed on the close button. The original
   * row had this and I lost it when the archive and the popup were unified
   * onto one card.
   */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-md);
  padding: 16px 18px;
}

/* The name reads as a heading first and a link second. */
.ca-loc-card__link {
  color: var(--ca-ink);
  text-decoration: none;
}
.ca-loc-card__link:hover { color: var(--ca-orange-dark); text-decoration: underline; }

/*
 * The distance, in the card's top-right corner as it always was.
 *
 * `right` clears the card's own padding; the name beside it wraps rather than
 * running underneath, because the heading is given room for it below.
 */
.ca-loc-card__dist {
  position: absolute;
  top: 16px;
  right: 18px;
  margin: 0;
  font-family: var(--ca-font-display);
  font-size: var(--ca-text-base);
  font-weight: 700;
  color: var(--ca-ink);
}

/* Room for the distance, so a long store name does not run under it. */
.ca-loc-card:has(> .ca-loc-card__dist:not([hidden])) .ca-loc-card__name {
  padding-right: 70px;
}.ca-loc-card__today {
  margin-top: 4px;
  font-family: var(--ca-font-body);
  font-size: var(--ca-text-base);
  color: var(--ca-body);
  font-weight: 700;
}.ca-loc-card__name {
  font-size: 20px;
  margin: 0;
  padding-right: 78px;
}/* The specials row is the shared carousel (components.css, .ca-carousel--specials). */

.ca-special {
  background: var(--ca-white);
  border: 1px solid var(--ca-hairline);
  border-radius: var(--ca-r-md);
  overflow: hidden;
  box-shadow: var(--ca-shadow-sm);
  display: flex;
  flex-direction: column;
}

.ca-special__body { padding: 16px 18px; }.ca-special__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ca-r-md);
  box-shadow: var(--ca-shadow-md);
}

/* ==========================================================================
   Store hero

   The banner above the gallery is the shared hero (hero.css, .ca-hero--store);
   it joins the gallery through .ca-hero--stacked. Only the gallery is here.
   ========================================================================== */

/* --- Gallery -------------------------------------------------------------- */

.ca-loc-gallery {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  border-radius: var(--ca-r-xl);
  overflow: hidden;
  background: var(--ca-peach);
  box-shadow: var(--ca-shadow-lg);
}

/* Standalone, under copy on the page: some air. Joined, hero.css pulls it up. */
.ca-loc-gallery { margin-top: clamp(16px, 3vw, 28px); }

/*
 * Slides are stacked and crossfaded rather than scrolled, which is what the
 * prototype does — opacity per slide, one transition.
 */
.ca-loc-gallery__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--ca-dur-slow) var(--ca-ease);
}
.ca-loc-gallery__slide.is-active { opacity: 1; }

.ca-loc-gallery__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 65%, rgba(20, 25, 43, 0.5) 100%);
}

.ca-loc-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 248, 238, 0.85);
  backdrop-filter: blur(6px);
  color: var(--ca-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ca-loc-gallery__nav--prev { left: 12px; }
.ca-loc-gallery__nav--next { right: 12px; }
.ca-loc-gallery__nav:hover { background: var(--ca-cream); }

.ca-loc-gallery__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.ca-loc-gallery__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 248, 238, 0.55);
  cursor: pointer;
}
.ca-loc-gallery__dot[aria-current="true"] {
  background: var(--ca-cream);
  transform: scale(1.25);
}

@media (max-width: 700px) {
  .ca-loc-gallery { aspect-ratio: 4 / 3; }
  .ca-loc-gallery__nav { width: 34px; height: 34px; font-size: 18px; }
}

/*
 * The archive lays the same cards out in a grid; the popup stacks them in a
 * column. Only the container differs.
 */
.ca-loc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

/* --- Section notes ------------------------------------------------------- */

/*
 * The three optional lines a section can carry. They sit inside the body, so
 * they inherit its padding and line up with the content rather than the edge.
 */
.ca-note--intro {
  margin: 0 0 14px;
  color: var(--ca-muted);
}

.ca-note--outro {
  margin: 14px 0 0;
  color: var(--ca-muted);
}