/* ==========================================================================
   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). */
  display: grid;
  grid-template-columns: 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. */
  display: block;
  height: 88px;
  width: auto;
}

@media (min-width: 992px) {
  .site-footer__logo {
    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;
}

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