/* footer: a full-width deep red band (picked 24 Oct, after Focal). The logo with LIRNEasia's address and funders, a
   column per section with its heading in the light red, then the copyright and the legal line with the pause control.
   White on --b-ember-2 is 17:1; the light red headings (--b-accent-on-dark) are 7.6:1. */
.site-foot { background: var(--b-ember-2, #30070b); color: #fff; --focus: var(--b-accent-on-dark); }
.ft-in { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(0, 5fr); gap: var(--sp-6) var(--sp-5); padding: clamp(var(--sp-7), 6vw, var(--sp-12)) var(--page-pad) var(--sp-4); }
.site-foot h2, .site-foot p { margin: 0; }
.site-foot ul { list-style: none; display: grid; gap: var(--sp-1-5); margin: 0; padding: 0; }
.site-foot a { color: #fff; font-size: 15px; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.ft-logo img { display: block; width: auto; height: 42px; }
.ft-brand address { margin: var(--sp-3) 0 0; font-style: normal; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.ft-fund { margin: var(--sp-2) 0 var(--sp-2) !important; max-width: 17em; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .74); }

.ft-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-4); }
.ft-cols h2 { margin: 0 0 var(--sp-2); font: 500 15px/1.3 var(--font-text); }
.site-foot .ft-cols h2 a { color: var(--b-accent-on-dark); }

.ft-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-1); padding-top: var(--sp-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.ft-copy { font-size: 14.5px; color: var(--b-accent-on-dark); }
.ft-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.site-foot .ft-legal a { color: rgba(255, 255, 255, .82); font-size: 14px; }
.foot-motion { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .82); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-motion:hover { color: #fff; }

@media (max-width: 1100px) {
  .ft-in { grid-template-columns: minmax(0, 1fr); }
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}