/* ============================================================
   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: 38px;
  height: 38px;
  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;
}

/* --- 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;
  }
}

/* The fixed mobile "Call | Book Now" bar (sections/17-mobilebar.html, <=820px) sits
   directly on top of whatever is last in flow -- on every page here, that is this
   footer's accessibility line. Reserve room for it so nothing is covered. Scoped to the
   footer (not body) so the footer's own dark background extends behind the reserved
   space instead of exposing a lighter body-color gap. */
@media (max-width: 820px) {
  .sec-14-footer .sec-14-footer__bottom-inner {
    padding-bottom: calc(1.5rem + 56px + env(safe-area-inset-bottom));
  }
}

/* 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 {
  height: 42px;
  width: auto;
  display: block;
}

@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); }
}