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

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

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

/* The fixed "Call | Book Now" mobile bar (css/sections/17-mobilebar.css, same
   820px breakpoint) sits on top of this bar's own dark background, so extend
   it downward rather than reserving space on body (which would expose a
   mismatched lighter background instead). */
@media (max-width: 820px) {
  .sec-14-footer .sec-14-footer__bottom-inner {
    padding-bottom: calc(1.5rem + 56px + env(safe-area-inset-bottom));
  }
}

.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;
  /* var(--accent-strong) at this client's lightness only gives white text a 2.86:1
     contrast ratio (fails WCAG AA's 4.5:1). --accent-strong is the same hue,
     already part of the token system as the designed darker variant, and
     gives 5.2:1. Scoped here rather than in base.css, which is master-only
     territory in a client build. */
  background: var(--accent-strong);
}

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

/* Five-column variant for a large site. A 42-page build cannot hang off the
   master's single "Explore" column, so the footer splits into Conditions /
   Services + Areas / Patient Info / Visit Us alongside the brand block. The
   tablet and mobile rules further down still target the base __grid class at
   equal specificity, and they come later in this file, so they keep winning
   below 900px: this modifier only applies at desktop widths. Gap is tightened
   because five columns at the master's gap leaves the middle columns cramped. */
.sec-14-footer .sec-14-footer__grid--cols5 {
  /* Column 5 carries the address and the opening hours, which are the longest
     unbreakable-ish strings in the footer. At an even 1fr it clipped
     "Washington, DC 20006" against the container edge and wrapped the hours to
     three lines, so it gets extra width and the link columns give it up. */
  grid-template-columns: 1.15fr 0.92fr 0.95fr 0.98fr 1.35fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Two of the five columns stack a second heading under a list (Services then
   Areas We Serve; the contact block then Hours). Without this the second
   heading sits flush against the last list item and reads as a bold list row
   rather than a new group. */
.sec-14-footer .sec-14-footer__list + .sec-14-footer__heading,
.sec-14-footer .sec-14-footer__contact-link + .sec-14-footer__heading,
.sec-14-footer .sec-14-footer__hours + .sec-14-footer__list {
  margin-top: 1.6rem;
}

.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-strong);
  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;
  }
}

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