/* vup_2018_child — css/pages/location-single.css
 * Single Location: clean center card, tidy type, safe with your .vu-grid shell.
 * Uses "About" page styling (cloud/glass) with semantic class names.
 */

/* ===== Tokens (Copied from about.css) ===== */
body.single-location {
  --vu-sun-gold: #ffd900;
  --vu-night: #050713;
  --vu-space: #0f1834;
  --vu-ink: #1f2c57;
  --vu-slate: #141d3b;
  --vu-fog: #f4f6ff;
  --vu-cloud: #fffef7;
  --vu-paper: #ffffff;
  --vu-muted: #8d93b8;
  --vu-highlight: #fff173;
  --vu-pill: #fff8c3;
  --vu-pill-hover: #ffe347;
  --vu-shadow-strong: 0 40px 80px rgba(5, 7, 19, 0.45);
  --vu-shadow-soft: 0 20px 40px rgba(5, 7, 19, 0.18);
  --vu-card-shadow: 0 30px 60px rgba(5, 7, 19, 0.18);
  --vu-border-soft: rgba(255, 255, 255, 0.18);
  --vu-about-glass: rgba(255, 255, 255, 0.82);
  --vu-about-glass-soft: rgba(255, 255, 255, 0.72);
  --vu-about-glass-shadow: 0 20px 45px rgba(5, 7, 19, 0.12);
  --vu-about-glass-border: 1px solid rgba(255, 255, 255, 0.45);
  --vu-about-layer-offset: clamp(10px, 1.5vw, 18px);
  --vu-location-stripe-width: 70%;

  /* Legacy tokens mapped to new palette where appropriate */
  --loc-accent: var(--vu-sun-gold);
  --rule: 1px solid rgba(0, 0, 0, .08);
}

.location-content {
  padding: 0;
}

.location-page-title {
  margin: 0 auto clamp(14px, 3vw, 22px);
  text-align: center;
}

.location-hero__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vu-muted, #8d93b8);
}

.location-page-title h1 {
  margin: 0;
}

.vu-location-card-wrapper {
  border-radius: 30px;
  padding: clamp(0px, 0vw, 0px);
  position: relative;
  z-index: 1;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.vu-location-intro {
  margin-bottom: clamp(24px, 3vw, 36px);
  color: var(--vu-ink);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Centered column stripe background */
body.single-location #primary,
body.single-itl_loc #primary {
  background-image: linear-gradient(#ffffff, #ffffff);
  background-repeat: no-repeat;
  background-size: var(--vu-location-stripe-width, 70%) 100%;
  background-position: center top;
}

@media (max-width: 768px) {
  body.single-location #primary,
  body.single-itl_loc #primary {
    background-size: 100% 100%;
  }
}

.vu-location-featured-wrapper {
  margin: 0;
}

/* ===== Layout: Glass Card ===== */
.vu-location-card {
  position: relative;
  border-radius: 18px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--vu-paper);
  box-shadow: var(--vu-shadow-soft);
  border: 1px solid var(--vu-border-soft);
}

.vu-location-card::before {
  content: "";
  position: absolute;
  inset: calc(var(--vu-about-layer-offset) * -1);
  border-radius: 22px;
  background: var(--vu-about-glass-soft);
  box-shadow: var(--vu-about-glass-shadow);
  border: var(--vu-about-glass-border);
  z-index: 0;
}

.vu-location-card>* {
  position: relative;
  z-index: 1;
}

/* ===== Contact Band (Activity-style buttons) ===== */
.location-contact-band {
  padding: clamp(24px, 4vw, 40px) 0;
  border-top: 1px solid rgba(15, 24, 52, 0.1);
  text-align: center;
}

.location-contact-band__inner {
  display: flex;
  justify-content: center;
}

.location-contact-band__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 20px);
  justify-content: center;
  align-items: center;
}

.location-contact-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 2em;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 800;
  color: var(--vu-team-space, #0f1834);
  background: var(--grad-team-gold, linear-gradient(135deg, #ffd900, #fff6a5));
  text-decoration: none;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--vu-team-shadow-glow, 0 10px 24px rgba(255, 217, 0, 0.25));
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.location-contact-band__btn:hover,
.location-contact-band__btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--vu-team-shadow-glow-hover, 0 14px 30px rgba(255, 217, 0, 0.35));
  filter: brightness(1.05);
  color: var(--vu-team-space, #0f1834);
}

.location-contact-band__btn:focus-visible {
  outline: 2px solid var(--vu-team-gold, #ffd900);
  outline-offset: 3px;
}

.location-contact-band__btn:active {
  transform: translateY(-1px);
  box-shadow: var(--vu-team-shadow-glow, 0 10px 24px rgba(255, 217, 0, 0.25));
}

body.single-location #primary .cms-content h2,
body.single-location #primary .cms-content h3 {
  margin: 1.2em 0 .5em;
  line-height: 1.2;
}

body.single-location #primary .cms-content p {
  margin: .85em 0;
  line-height: 1.65;
}

body.single-location #primary .cms-content a {
  color: inherit;
  text-decoration-thickness: .1em;
  text-underline-offset: .18em;
}

body.single-location #primary .cms-content a:hover {
  background: rgba(0, 0, 0, .04);
}

.location-partners-card {
  padding: clamp(18px, 3vw, 28px);
}

.location-partners {
  display: block;
}

.location-partners__summary {
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--vu-slate);
  margin: 0 0 clamp(10px, 1.5vw, 14px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.location-partners__summary::-webkit-details-marker {
  display: none;
}

.location-partners__summary::after {
  content: '▾';
  font-size: 0.9em;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.location-partners[open] .location-partners__summary::after {
  transform: rotate(180deg);
}

.location-partners__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(12px, 2vw, 20px);
}

.location-partner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(5, 7, 19, 0.08);
  text-decoration: none;
  color: var(--vu-ink);
  transition: transform 0.16s ease, box-shadow 0.2s ease;
}

.location-partner:hover,
.location-partner:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(5, 7, 19, 0.14);
}

.location-partner__image {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  align-items: center;
  justify-content: center;
}

.location-partner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-partner__name {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Lists */
body.single-location #primary .cms-content ul,
body.single-location #primary .cms-content ol {
  margin: .8em 0 .8em 1.2em;
}

body.single-location #primary .cms-content li {
  margin: .25em 0;
}

/* Horizontal rules */
body.single-location #primary hr {
  border: none;
  border-top: var(--rule);
  margin: 1.5rem 0;
}

/* ===== Map block (your template uses .mapping) ===== */
body.single-location #primary .mapping,
#googleMap[data-place] {
  width: 100%;
  min-height: 320px;
  aspect-ratio: 16 / 9;
  max-height: 500px;
  border-radius: 10px;
  border: 2px solid var(--loc-accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
  overflow: hidden;
  margin: 1rem 0;
  contain: layout size; /* CLS prevention: reserve space before map JS loads */
}

/* ===== Fun Facts ===== */
.location-funfacts {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--vu-fog);
  border-radius: 12px;
  border: 1px solid rgba(4, 25, 78, 0.08);
}

.location-funfacts h2 {
  margin-top: 0 !important;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vu-slate);
}

.location-funfacts ol {
  margin: 0 0 0 1.2rem;
  padding: 0;
}

.location-funfacts li {
  margin-bottom: 0.5rem;
}

/* ===== Sidebar niceties (left/right) ===== */
#left-sidebar .vu-widget.vu-contact,
#right-sidebar .vu-widget.vu-contact {
  position: sticky;
  top: calc(var(--vu-hdr-h, 128px) + 16px);
}

/* Ensure galleries/widgets do not cap width */
#primary .wp-block-gallery,
#primary .gallery {
  max-width: none;
}

/* ===== FAQ Dropdown ===== */
.location-faq-card {
  padding: clamp(20px, 3vw, 32px);
}

/* Standalone FAQ button wrapper (no card) */
.location-faq-standalone {
  text-align: center;
  margin: clamp(16px, 3vw, 24px) 0;
}

/* Bluish green gradient with glass effect for standalone FAQ button */
.location-faq-btn {
  --faq-glass: rgba(255, 255, 255, 0.45);
  --faq-glass-border: rgba(255, 255, 255, 0.6);

  position: relative;
  background: linear-gradient(135deg, #0d9488, #14b8a6 50%, #22d3ee) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 3px var(--faq-glass-border),
    0 0 0 7px var(--faq-glass),
    0 12px 28px rgba(13, 148, 136, 0.35) !important;
}

/* Glass outset glow layer */
.location-faq-btn::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--faq-glass), rgba(255, 255, 255, 0.2));
  z-index: -1;
  pointer-events: none;
}

.location-faq-btn:hover,
.location-faq-btn:focus-visible {
  background: linear-gradient(135deg, #14b8a6, #2dd4bf 50%, #67e8f9) !important;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.8),
    0 0 0 8px rgba(255, 255, 255, 0.5),
    0 14px 32px rgba(13, 148, 136, 0.45) !important;
  color: #fff !important;
}

.location-faq-dropdown {
  display: block;
}

.location-faq-toggle {
  cursor: pointer;
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vu-space, #0f1834);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.5em 0;
  text-align: center;
}

.location-faq-toggle::-webkit-details-marker {
  display: none;
}

.location-faq-toggle::after {
  content: '▾';
  font-size: 0.85em;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.location-faq-dropdown[open] .location-faq-toggle::after {
  transform: rotate(180deg);
}

.location-faq-list {
  margin: clamp(16px, 2vw, 24px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
}

.location-faq-item {
  padding: clamp(14px, 2vw, 20px);
  background: var(--vu-fog, #f4f6ff);
  border-radius: 12px;
  border: 1px solid rgba(15, 24, 52, 0.06);
}

.location-faq-question {
  display: block;
  margin-bottom: 0.5em;
  color: var(--vu-space, #0f1834);
  font-size: 1rem;
  line-height: 1.4;
}

.location-faq-answer {
  margin: 0;
  color: var(--vu-ink, #1f2c57);
  font-size: 0.95rem;
  line-height: 1.6;
}

.location-faq-more {
  text-align: center;
  padding-top: clamp(12px, 2vw, 20px);
  border-top: 1px solid rgba(15, 24, 52, 0.08);
  margin-top: clamp(12px, 2vw, 20px);
}

/* ===== Animated FAQ Question Marks ===== */
.location-faq-toggle,
.location-faq-btn {
  position: relative;
  overflow: visible;
}

.location-faq-qmark {
  position: absolute;
  top: 50%;
  font-family: var(--vu-heading-font, 'Bebas Neue', sans-serif);
  font-size: 4em;
  font-weight: 900;
  color: var(--vu-black, #040606);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.location-faq-qmark--left {
  right: 100%;
  margin-right: -0.15em;
  transform: translateY(-50%) rotate(-90deg) scale(0);
  transform-origin: right center;
}

.location-faq-qmark--right {
  left: 100%;
  margin-left: -0.15em;
  transform: translateY(-50%) rotate(90deg) scale(0);
  transform-origin: left center;
}

.location-faq-toggle:hover .location-faq-qmark,
.location-faq-btn:hover .location-faq-qmark,
.location-faq-toggle:focus .location-faq-qmark,
.location-faq-btn:focus .location-faq-qmark {
  opacity: 1;
}

.location-faq-toggle:hover .location-faq-qmark--left,
.location-faq-btn:hover .location-faq-qmark--left,
.location-faq-toggle:focus .location-faq-qmark--left,
.location-faq-btn:focus .location-faq-qmark--left {
  transform: translateY(-50%) rotate(0deg) scale(1);
  animation: faqQmarkSwayLeft 0.8s ease-in-out 0.3s;
}

.location-faq-toggle:hover .location-faq-qmark--right,
.location-faq-btn:hover .location-faq-qmark--right,
.location-faq-toggle:focus .location-faq-qmark--right,
.location-faq-btn:focus .location-faq-qmark--right {
  transform: translateY(-50%) rotate(0deg) scale(1);
  animation: faqQmarkSwayRight 0.8s ease-in-out 0.3s;
}

@keyframes faqQmarkSwayLeft {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg) scale(1);
  }
  20% {
    transform: translateY(-50%) rotate(-15deg) scale(1);
  }
  40% {
    transform: translateY(-50%) rotate(12deg) scale(1);
  }
  60% {
    transform: translateY(-50%) rotate(-8deg) scale(1);
  }
  80% {
    transform: translateY(-50%) rotate(5deg) scale(1);
  }
}

@keyframes faqQmarkSwayRight {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg) scale(1);
  }
  20% {
    transform: translateY(-50%) rotate(15deg) scale(1);
  }
  40% {
    transform: translateY(-50%) rotate(-12deg) scale(1);
  }
  60% {
    transform: translateY(-50%) rotate(8deg) scale(1);
  }
  80% {
    transform: translateY(-50%) rotate(-5deg) scale(1);
  }
}

/* ===== Reduced Motion: FAQ Animations ===== */
@media (prefers-reduced-motion: reduce) {
  .location-faq-toggle::after,
  .location-faq-qmark {
    transition: none;
    animation: none;
  }

  .location-faq-toggle:hover .location-faq-qmark--left,
  .location-faq-btn:hover .location-faq-qmark--left,
  .location-faq-toggle:focus .location-faq-qmark--left,
  .location-faq-btn:focus .location-faq-qmark--left,
  .location-faq-toggle:hover .location-faq-qmark--right,
  .location-faq-btn:hover .location-faq-qmark--right,
  .location-faq-toggle:focus .location-faq-qmark--right,
  .location-faq-btn:focus .location-faq-qmark--right {
    animation: none;
  }
}

/* ===== Subtle State Link (SEO internal link) ===== */
.location-state-link {
  margin: clamp(24px, 3vw, 40px) 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--vu-muted, #8d93b8);
}

.location-state-link a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.2);
  text-underline-offset: 0.15em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.location-state-link a:hover,
.location-state-link a:focus {
  color: var(--vu-ink, #1f2c57);
  text-decoration-color: rgba(0, 0, 0, 0.4);
}

/* ===== Google Map - Hidden (TODO: fix API loading and footer sizing) ===== */
/*
 * Map injected via wp_footer creates dead space at page bottom.
 * Hidden until Google Maps API billing/loading issue is resolved.
 * Uses visually-hidden pattern so JS doesn't error.
 */
body.single-location #googleMap.mapping {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}