/* ============================================================
   FOOTER — deep blue #10445f
   ============================================================ */

.sh-footer {
  background: var(--color-footer);
  color: #fff;
  width: 100%;
}

.sh-footer__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  align-items: flex-start;
  padding: 6.25rem var(--gutter) 5rem;
}

/* --- Brand column --- */
.sh-footer__brand {
  width: 26.25rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2.125rem;
}

.sh-footer__brand-stack { display: flex; flex-direction: column; gap: 1.125rem; }

.sh-footer__logo img,
.sh-footer__logo .custom-logo { width: 12.125rem; height: auto; }

.sh-footer__logo-text {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  color: #fff;
}

.sh-footer__tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  font-weight: 500;
  color: #fff;
}

/* HIPAA reassurance panel
   Design gives the body a fixed 358px, which is just the brand column
   (420px) minus this panel's own padding. Left as a max-width so the
   panel still fits when the column narrows on tablet and mobile. */
.sh-footer__hipaa {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 0.875rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  max-width: 24.125rem;
}

.sh-footer__hipaa-heading {
  font-size: var(--text-md);
  font-weight: 600;
  /* Semantic amber, shared with the crisis notice — deliberately not a
     brand colour, so it reads as a callout rather than decoration. */
  color: var(--color-urgent);
}

.sh-footer__hipaa-body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.sh-footer__social {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.sh-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  color: #fff;
  transition: var(--transition-base);
}

.sh-footer__social-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sh-footer__disclaimer-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sh-footer__disclaimer-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

.sh-footer__disclaimer {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* --- Nav columns --- */
/* Four columns now (Company / Services / Locations / Get Started),
   not two — so they wrap rather than crushing each other once the
   brand column has taken its fixed width. */
/* Grid, not flex-wrap: flex-wrap only breaks a row once columns run
   out of room, which at 5-6 columns meant every column got squeezed
   thinner and thinner (down to ~127px, wrapping "Substance Use
   Treatment" to two lines) rather than ever moving a column to a
   second row. A fixed 4-column grid gives a firm max of 4 per row —
   a 5th or 6th column (Get Started, Insurance & Payment) drops to row
   two on its own, and the four columns that stay each get a full
   quarter of the row instead of a shrinking sixth of it. */
.sh-footer__nav-columns {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  min-width: 0;
}

.sh-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  min-width: 0;
}

.sh-footer__nav-heading {
  font-family: var(--font-serif-alt);
  font-size: 1.75rem;
  font-weight: 500;
  color: #fff;
}

.sh-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sh-footer__nav-list a {
  display: inline-block;
  padding: 6px 0;
  font-size: var(--text-base);
  color: var(--color-text-light);
}

.sh-footer__nav-list a:hover { color: #fff; }

/* --- Bottom bar --- */
.sh-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 var(--gutter);
}

.sh-footer__bottom-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 0;
}

.sh-footer__back-top {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
}

.sh-footer__back-top-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.875rem;
}

.sh-footer__back-top:hover .sh-footer__back-top-icon {
  background: rgba(255, 255, 255, 0.08);
}

/* Legal links share the bottom bar's line with Back To Top — the
   bar is already justify-content: space-between, so these sit at the
   opposite end without any positioning of their own. */
.sh-footer__legal-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.sh-footer__copyright {
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.sh-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-footer__legal-list li {
  display: flex;
  align-items: center;
}

/* Vertical divider between items — a border on the item rather than a
   gap-based ::before, so it stays centred whatever the two labels'
   line-heights do. */
.sh-footer__legal-list li + li {
  margin-left: 1.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.sh-footer__legal-list a {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
}

.sh-footer__copyright {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  white-space: nowrap;
}

/* Contact column: icon + text rows, same colour/size as the plain
   text links every other footer column uses — color: inherit here
   was cancelling.sh-footer__nav-list a's own colour instead of
   matching it, which is why this column read differently from the
   other four. */
.sh-footer__contact-list a.sh-footer__contact-item,
.sh-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 6px 0;
  font-size: var(--text-base);
  color: var(--color-text-light);
}

.sh-footer__contact-list a.sh-footer__contact-item:hover { color: #fff; }

.sh-footer__contact-item svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: rgba(255, 255, 255, 0.6);
}

.sh-footer__contact-item--static { cursor: default; }

.sh-footer__legal-list a:hover {
  color: #fff;
  text-decoration: underline;
}

/* --- Responsive --- */

/* Narrow desktop: slim the fixed brand column so the nav columns
   keep readable widths instead of being crushed. */
@media (max-width: 1400px) {
  .sh-footer__inner { gap: 2.5rem; }
  .sh-footer__brand { width: 20rem; }
}

@media (max-width: 1200px) {
  .sh-footer__inner { flex-wrap: wrap; }

  /* `flex: 1` lets the nav grid shrink beside the fixed brand column,
     so four menus can collapse into unusably narrow tracks before
     wrapping ever happens. Give it its own row at tablet widths. */
  .sh-footer__nav-columns { flex-basis: 100%; }
}

@media (max-width: 1100px) {
  .sh-footer__inner {
    gap: 3.5rem;
    padding: 5rem 3rem 4rem;
  }

  .sh-footer__brand {
    width: 100%;
    max-width: 32rem;
  }

  .sh-footer__nav-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2.5rem;
  }

  .sh-footer__bottom { margin: 0 3rem; }
  .sh-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .sh-footer__legal-group {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
  }

  .sh-footer__copyright {
    padding-left: 0;
    border-left: 0;
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .sh-footer__inner {
    flex-direction: column;
    gap: 3rem;
    padding: 4rem 1.5rem 3rem;
  }
  .sh-footer__brand { width: 100%; }
  .sh-footer__nav-columns { grid-template-columns: 1fr; width: 100%; }
  .sh-footer__bottom { margin: 0 1.5rem; }

  /* Back To Top and the legal links stop sharing a line here — side
     by side, "HIPAA Notice of Privacy Practices" alone is wider than
     a phone. */
  .sh-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem 0;
  }

  .sh-footer__legal-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .sh-footer__legal-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .sh-footer__legal-list li + li {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .sh-footer__copyright {
    padding-left: 0;
    border-left: 0;
    white-space: normal;
  }
}