/* ============================================================
   Section 14 — Footer
   Slim conversion CTA bar + mega footer w/ ghost watermark on
   --ink. All selectors scoped under .sec-14-footer.
   ============================================================ */

.sec-14-footer {
  background: var(--ink);
  color: var(--text-on-ink);
  font-family: var(--font-body);
}

/* --- Slim CTA bar --- */
.sec-14-footer .sec-14-footer__cta {
  background: var(--ink-3);
}

.sec-14-footer .sec-14-footer__cta-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding-block: 1.35rem;
  text-align: center;
}

/* Pulse-line micro-delight: renders flat by default, "comes alive" on hover
   of the CTA bar or once it scrolls into view (data-reveal.is-visible). */
.sec-14-footer .sec-14-footer__cta-pulse {
  flex-shrink: 0;
  width: 180px;
  height: 30px;
  opacity: 0.7;
  pointer-events: none;
}

.sec-14-footer .sec-14-footer__cta-pulse path {
  stroke: hsl(0 0% 100% / 0.28);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(0.05);
  transition: transform 500ms var(--ease-out), stroke 500ms var(--ease-out);
}

.sec-14-footer .sec-14-footer__cta:hover .sec-14-footer__cta-pulse path,
.sec-14-footer .sec-14-footer__cta.is-visible .sec-14-footer__cta-pulse path {
  transform: scaleY(1);
  stroke: var(--accent);
}

html.reduced-motion .sec-14-footer .sec-14-footer__cta-pulse path {
  transform: scaleY(1);
  stroke: var(--accent);
  transition: none;
}

@media (max-width: 820px) {
  .sec-14-footer .sec-14-footer__cta-pulse { display: none; }
}

.sec-14-footer .sec-14-footer__cta-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  color: var(--text-on-ink);
  margin: 0;
}

.sec-14-footer .sec-14-footer__cta-btn {
  padding-block: 0.7rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* --- Mega footer --- */
.sec-14-footer .sec-14-footer__main {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-section);
}

.sec-14-footer .sec-14-footer__watermark {
  position: absolute;
  left: 50%;
  bottom: -0.18em;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100vw;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 15vw, 13rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: hsl(0 0% 100% / 0.045);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.sec-14-footer .sec-14-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.sec-14-footer .sec-14-footer__col {
  min-width: 0;
}

.sec-14-footer .sec-14-footer__logo {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-on-ink);
  text-decoration: none;
  margin-bottom: 0.9rem;
}

.sec-14-footer .sec-14-footer__blurb {
  color: var(--text-on-ink-dim);
  max-width: 32ch;
  margin-bottom: 1.5rem;
}

.sec-14-footer .sec-14-footer__social {
  display: flex;
  gap: 0.65rem;
}

.sec-14-footer .sec-14-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.06);
  color: var(--text-on-ink-dim);
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out), transform 300ms var(--ease-spring);
}

.sec-14-footer .sec-14-footer__social-link svg {
  width: 18px;
  height: 18px;
}

.sec-14-footer .sec-14-footer__social-link:hover {
  background: var(--accent);
  color: var(--accent-on);
  transform: translateY(-2px);
}

.sec-14-footer .sec-14-footer__heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-on-ink);
  margin-bottom: 1.1rem;
}

.sec-14-footer .sec-14-footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.sec-14-footer .sec-14-footer__list a {
  color: var(--text-on-ink-dim);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}

.sec-14-footer .sec-14-footer__list a:hover {
  color: var(--text-on-ink);
}

.sec-14-footer .sec-14-footer__address {
  font-style: normal;
  color: var(--text-on-ink-dim);
  margin-bottom: 0.85rem;
  line-height: 1.5;
}

.sec-14-footer .sec-14-footer__contact-link {
  display: block;
  color: var(--text-on-ink-dim);
  text-decoration: none;
  margin-bottom: 0.4rem;
  transition: color 200ms var(--ease-out);
  word-break: break-word;
}

.sec-14-footer .sec-14-footer__contact-link:hover {
  color: var(--text-on-ink);
}

.sec-14-footer .sec-14-footer__hours {
  color: var(--text-on-ink-dim);
  white-space: pre-line;
  line-height: 1.6;
}

/* --- Bottom bar --- */
.sec-14-footer .sec-14-footer__bottom {
  border-top: 1px solid hsl(0 0% 100% / 0.08);
}

.sec-14-footer .sec-14-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  font-size: var(--fs-small);
  color: var(--text-on-ink-dim);
}

.sec-14-footer .sec-14-footer__copy a {
  color: var(--text-on-ink-dim);
  text-decoration: underline;
  text-decoration-color: hsl(0 0% 100% / 0.3);
  transition: color 200ms var(--ease-out);
}

.sec-14-footer .sec-14-footer__copy a:hover {
  color: var(--text-on-ink);
}

.sec-14-footer .sec-14-footer__a11y {
  max-width: 46ch;
  margin: 0;
}

/* The fixed mobile Call|Book bar (17-mobilebar, <=820px) sits on top of the
   page with no space reserved for it, covering this accessibility line unless
   we pad for it here (not on body, so the footer's own dark background still
   extends behind the reserved space). */
@media (max-width: 820px) {
  .sec-14-footer .sec-14-footer__bottom-inner {
    padding-bottom: calc(1.5rem + 56px + env(safe-area-inset-bottom));
  }
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .sec-14-footer .sec-14-footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5rem;
  }
}

@media (max-width: 560px) {
  .sec-14-footer .sec-14-footer__grid {
    grid-template-columns: 1fr;
  }
  .sec-14-footer .sec-14-footer__cta-inner {
    text-align: center;
    flex-direction: column;
  }
  .sec-14-footer .sec-14-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Image logo (optional). Swap the text wordmark in sections/14-footer.html for:
     <a href="/" class="sec-14-footer__logo" aria-label="[CLINIC_NAME_PLACEHOLDER] home">
       <img class="sec-14-footer__logo-img" src="assets/images/logo.webp" alt="[CLINIC_NAME_PLACEHOLDER]">
     </a> */
.sec-14-footer .sec-14-footer__logo-img {
  /* Footer carries the full lockup including the tagline row, so it runs taller
     than the nav mark. */
  height: 74px;
  width: auto;
  max-width: 100%;
  display: block;
  margin-bottom: 0.2rem;
}

@media (max-width: 640px) {
  .sec-14-footer .sec-14-footer__logo-img { height: 62px; }
}

@media (max-width: 640px) {
  /* nowrap + a large floor ran the watermark far wider than a phone, cutting the last word. */
  .sec-14-footer .sec-14-footer__watermark { font-size: clamp(2.1rem, 8.6vw, 8rem); }
}