/* ==========================================================================
   STILLMIND MENTAL HEALTH · FOOTER
   The crisis notice sits at the top of the footer rather than buried at the
   bottom, because it is the one block here that someone might genuinely
   need. Everything else is navigation.
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--c-ink);
  /* Compact vertical padding */
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem) var(--s-4);
  /* Sits above the fixed atmosphere layer */
  z-index: var(--z-raised);

  /* THE ONE RULE THAT CLOSES EVERY PAGE */
  margin-top: calc(var(--seam-lift) * -1);
  border-radius: var(--seam-radius) var(--seam-radius) 0 0;
  box-shadow: 0 -16px 48px rgba(15, 35, 31, 0.12), inset 0 1px 0 rgba(214, 228, 224, 0.16);
}

/* The sage glow was centered at 12% 24% rather than 12% 0% because the
   old gradient resolved the page to flat --c-ink and the glow then
   stepped in at full strength on the footer's first row.
   Centered at 50% 0% across the arch, it creates a soft halo along the
   entire lifted crest so the transition from paper feels illuminated. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(85% 65% at 50% 0%, rgba(71, 110, 100, 0.26), transparent 72%),
    radial-gradient(60% 50% at 95% 100%, rgba(39, 100, 70, 0.20), transparent 60%);
  pointer-events: none;
}

.site-footer > .container { position: relative; }

/* --------------------------------------------------------------------
   Crisis notice (Prominent Outpatient Practice Emergency Card)
   -------------------------------------------------------------------- */

.footer-crisis {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  border-radius: var(--r-xl);
  background: rgba(249, 236, 233, 0.11);
  border: 1px solid rgba(232, 193, 187, 0.38);
  border-left: 5px solid #F2C9C2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (min-width: 820px) {
  .footer-crisis {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding: var(--s-4) var(--s-6);
  }
}

.footer-crisis__body {
  max-width: 64ch;
}

.footer-crisis__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #F2C9C2;
  margin-bottom: 0.25rem;
}

.footer-crisis__text {
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--c-text-invert);
  margin: 0;
}

.footer-crisis__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  flex: none;
}

/* On dark the crisis pill inverts, so it still reads as urgent without
   becoming the brightest thing on the page. */
.site-footer .crisis-pill {
  background: rgba(249, 236, 233, 0.18);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(232, 193, 187, 0.55);
  min-height: 2.65rem;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 0.35rem 0.95rem;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background var(--d-base) var(--ease-out-expo), transform var(--d-base) var(--ease-out-expo);
}

.site-footer .crisis-pill:hover {
  background: rgba(249, 236, 233, 0.28);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------
   Columns: 2 balanced columns
   -------------------------------------------------------------------- */

.footer-grid {
  display: grid;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}

@media (min-width: 960px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.3fr);
    gap: var(--s-6) var(--s-6);
    align-items: start;
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5) var(--s-6);
  }
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer-nav-list a {
  font-size: var(--t-sm);
  color: var(--c-text-invert-2);
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  transition: color var(--d-base) var(--ease-out-expo);
}

.footer-nav-list a:hover {
  color: var(--c-text-invert);
}

.footer-licensure {
  margin: var(--s-3) 0 0;
  font-size: var(--t-xs);
  line-height: var(--lh-relaxed);
  color: var(--c-text-3);
  max-width: 48ch;
}

.footer-brand .lockup { font-size: 1.65rem; margin-bottom: var(--s-2); }

.footer-brand p {
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-invert-2);
  max-width: 44ch;
  margin: 0;
}

.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-h4);
  color: var(--c-sage-tint);
  margin-bottom: 0.2rem;
}

.footer-col h3 {
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(195, 210, 205, 0.65);
  margin-bottom: var(--s-2);
}

/* --------------------------------------------------------------------
   Compact Contact & Action layout
   -------------------------------------------------------------------- */

.footer-contact-compact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-text-invert-2);
  margin-bottom: var(--s-4);
}

.footer-contact-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}

.footer-contact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

.footer-contact-label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(195, 210, 205, 0.85);
  min-width: 3.5rem;
}

.footer-contact-meta .footer-contact-label {
  min-width: auto;
}

.footer-contact-compact a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  transition: color var(--d-base) var(--ease-out-expo);
}
.footer-contact-compact a:hover { color: var(--c-text-invert); }

.footer-directions {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(214, 228, 224, 0.45);
}

.footer-directions:hover { text-decoration-color: currentColor; }

/* Paired Action Buttons */
.footer-action-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.footer-btn--new-patient {
  background: rgba(39, 100, 70, 0.35);
  border-color: rgba(214, 228, 224, 0.38);
  color: #EDF5F2;
  font-weight: 600;
}

.footer-btn--new-patient:hover {
  background: rgba(39, 100, 70, 0.55);
  border-color: rgba(214, 228, 224, 0.6);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------
   Bottom bar
   -------------------------------------------------------------------- */

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  box-shadow: inset 0 1px 0 rgba(214, 228, 224, 0.13);
  font-size: var(--t-xs);
  color: rgba(195, 210, 205, 0.66);
}

@media (min-width: 760px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-copyright {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.footer-credit {
  color: rgba(195, 210, 205, 0.55);
}

.footer-credit__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(214, 228, 224, 0.35);
  transition: color var(--d-base) var(--ease-out-expo), text-decoration-color var(--d-base) var(--ease-out-expo);
}

.footer-credit__link:hover {
  color: var(--c-text-invert);
  text-decoration-color: var(--c-text-invert);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}

.footer-legal a {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(214, 228, 224, 0.35);
  transition: color var(--d-base) var(--ease-out-expo);
}

.footer-legal a:hover { color: var(--c-text-invert); }

/* --------------------------------------------------------------------
   Touch targets
   A mouse does not need 44px and the extra height would only loosen the
   list. A finger does, so it is given only where the pointer is coarse.
   -------------------------------------------------------------------- */

@media (pointer: coarse) {
  .footer-links a,
  .footer-legal a,
  .footer-credit__link,
  .footer-contact a,
  .footer-contact-compact a { min-height: 2.75rem; }

  .footer-links { gap: 0; }
}