/* ==========================================================================
   FOOTER.CSS — DAP site footer only.
   Extracted from the homepage blocks plugin (components.css section 11 +
   homepage.css mobile overrides) so the footer is global and lives in one
   place. Ships ONLY the rules the footer uses: the .footer* block, the two
   shared helpers it depends on (.container, .text-accent), and the mobile
   refinements.

   Consumes variables from the shared layer:
     primitives.css  (raw values + fonts)
     tokens.css      (semantic variables)
   Load order:  primitives.css -> tokens.css -> footer.css

   Zero hex values. No em-dashes anywhere in this codebase, per brand guardrails.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Shared helpers the footer markup depends on
   -------------------------------------------------------------------------- */
.container {
  width:     100%;
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--container-padding-x);
}

.text-accent { color: var(--accent-main); }


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg-section-dark);
  border-top: 1px solid var(--border-on-dark);
  padding:    var(--section-padding-y) 0 var(--space-12);
}

.footer__grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-12);
  margin-bottom:         var(--space-16);
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 2fr repeat(3, 1fr); }
}

.footer__brand {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
}

.footer__tagline {
  font-size:   var(--t-small);
  color:       var(--text-on-dark-muted);
  line-height: var(--t-leading-body);
  max-width:   280px;
}

.footer__col-title {
  font-size:      var(--t-caption);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--text-on-dark);
  margin-bottom:  var(--space-4);
}

.footer__links {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.footer__link {
  font-size:  var(--t-small);
  color:      var(--white-50);
  transition: color var(--transition-fast);
}

.footer__link:hover { color: var(--accent-main); }

.footer__bottom {
  padding-top:     var(--space-8);
  border-top:      1px solid var(--border-on-dark);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-4);
}

.footer__copy {
  font-size: var(--t-caption);
  color:     var(--white-40);
}


/* --------------------------------------------------------------------------
   Mobile refinements (migrated from homepage.css)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .footer__link, .footer__tagline, .footer__copy { font-size: 14px !important; }
  .footer__grid   { text-align: center; }
  .footer__links  { align-items: center; }
  .footer__brand  { align-items: center; }
  .footer__bottom { justify-content: center; text-align: center; }
}