/* ==========================================================================
   Devgun Family Law -- Chrome: Footer
   Figma Footer (7138:209, every page) -- Forest Green, 4-column grid, bottom
   bar. Uses section-bg--forest-green (foundation/base.css) for the fill +
   text-inversion + link color; this file styles the internal layout only.
   Replaces the old DS hours-of-operation/curve footer entirely (neutralized
   in site.css by these more-specific, later-loaded rules -- see the
   #footer overrides at the end of this file).
   ========================================================================== */

.site-footer__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--space-section-y) var(--space-page-gutter) 2rem;
}

.site-footer__grid {
  /* Mobile (Dave 2026-07-06, refined): a balanced 2x2 grid --
       col 1: logo   +  Practice Areas
       col 2: Office +  Contact Us
     grid-auto-flow: column fills two rows DOWN each column in DOM order
     (brand, Practice Areas -> col 1; Edmonton Office, Contact Us ->
     col 2), so Practice Areas lands directly under the logo. The two
     explicit rows are shared across both columns, so the columns are the
     same height and every block snaps to the same baselines. >=768px
     resets to the 4-col row (below).
     Column 1 is minmax(0, 1fr) so it may shrink below the logo
     (2026-10-14): column 2 keeps plain 1fr because its minimum is the
     email line, which cannot break, and the two minimums side by side
     (logo 111px + email 182px + gap) were wider than a 320px screen, so
     every page scrolled sideways by 14px. Below ~352px the logo now
     scales down with its column (.site-footer__logo); at 352px and up the
     columns size exactly as before. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}

.site-footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer__logo {
  /* Figma Footer 7138:209: devgun-logo-white-footer at 141x112.
     The height is a cap, not a fixed size (2026-10-14): wherever the
     column fits it the logo is 88px tall as before, and on narrow phones
     max-width shrinks it with its column, keeping its shape (see the
     grid note). */
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 88px;
}

@media (min-width: 992px) {
  .site-footer__logo {
    max-height: 112px;
  }
}

.site-footer__heading {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  margin-bottom: 1rem;
}

.site-footer__links,
.site-footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__links li,
.site-footer__contact-list li {
  margin-bottom: 0.625rem;
  font-size: var(--fs-body2);
  color: rgba(255, 255, 255, 0.85);
}

.site-footer__links a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body2);
  letter-spacing: 0;
  text-decoration: none;
}

@media (hover: hover) {
  .site-footer__links a:hover {
    color: var(--color-white);
    text-decoration: underline;
  }
}

.site-footer__links a:focus {
  color: var(--color-white);
  text-decoration: underline;
}

.site-footer__address {
  font-style: normal;
  font-size: var(--fs-body2);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--lh-body1);
}

.site-footer__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.site-footer__contact-list [class^="icon-"],
.site-footer__icon {
  flex: 0 0 auto;
  margin-top: 0.15em;
  color: var(--icon-accent-color, var(--color-blue-canopy));
}

.site-footer__contact-list a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body2);
  letter-spacing: 0;
  text-decoration: none;
  /* Tap target: the phone/email links have no padding of their own
     (~22px effective height, under the 44px touch target). Pad + equal
     negative margin grows only the tappable box, not the visual row
     rhythm -- same technique as chrome/breadcrumbs.css. */
  display: inline-block;
  padding: 0.6875rem 0;
  margin: -0.6875rem 0;
}

@media (hover: hover) {
  .site-footer__contact-list a:hover {
    color: var(--color-white);
    text-decoration: underline;
  }
}

.site-footer__contact-list a:focus {
  color: var(--color-white);
  text-decoration: underline;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1.5rem;
  /* Divider rule removed 2026-07-06 (Dave) -- spacing separates it. */
}

.site-footer__copyright {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.site-footer__legal-links {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__legal-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-decoration: none;
  /* Tap target: same idea as the contact list links above (grow the
     tappable box, not the visual row), but sized to land on exactly 44px.
     The padding + negative margin used there leaves this smaller link at
     35-40px, because its own line box is shorter. A fixed line-height gives
     the line box a known height (1.25em), min-height makes the box 44px, and
     the negative block margin takes back the difference so the row takes up
     no more room than a plain line of text. */
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
  min-height: 44px;
  margin-block: calc((1.25em - 44px) / 2);
}

@media (hover: hover) {
  .site-footer__legal-links a:hover {
    color: var(--color-white);
    text-decoration: underline;
  }
}

.site-footer__legal-links a:focus {
  color: var(--color-white);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 2rem;
  }
}

@media (min-width: 992px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ------------------------------------------------------------------ *
 * Neutralize old DS #footer chrome (curve, hours table, single contact
 * column) now that .site-footer replaces it. #footer no longer appears in
 * markup (Footer.ss was rebuilt), but this stays as a defensive override
 * in case a cached/legacy template path renders it during the transition.
 * ------------------------------------------------------------------ */

#footer .curve-container,
#footer .hours-of-operation {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 * Credential strip (2026-07-06 social-proof round): factual
 * memberships above the bottom bar. All three marks are mono/dark on
 * transparent, so each sits on a small white chip (the footer band is
 * dark green). Sized down 2026-07-06 (Dave: the logos "look out of
 * place... like an anchor") -- 28px logos in compact chips, tighter row.
 * ------------------------------------------------------------------ */
.site-footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  padding: 1.25rem 0 0.25rem;
  /* Divider rule removed 2026-07-06 (Dave) -- spacing separates it. */
  margin-top: 1.75rem;
}

.site-footer__trust-chip {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  border-radius: 5px;
  padding: 5px 8px;
}

.site-footer__trust-logo {
  display: block;
  height: 28px;
  width: auto;
}