/*
  Footer.

  Four bands stacked under one dark panel, following the approved
  reference's order: a standing statement, the physical locations, the link
  columns, then legal under a hairline. Each band is separated by a rule
  rather than by whitespace alone, so the footer reads as a document
  section rather than as a dumped list of links.
*/

.theme-meridian .m-footer{
  background:var(--accent-dark);
  color:var(--panel-dark-text-soft);
  padding-block:clamp(var(--s-8), 7vw, var(--s-10)) var(--s-7);
  border-top:0;
}

/* ---------- Band 1: standing statement ---------- */
.m-footer-statement{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--s-6) var(--s-9);align-items:start;
  padding-bottom:var(--s-8);
}
.m-footer-brand{display:flex;align-items:center;gap:var(--s-5);}
.m-footer-brand img{
  /* Scales with the viewport — the footer brand is the last impression a
     visitor gets, and 56px was a thumbnail on a desktop screen.

     `contain` rather than `cover`, and no circular clip: the SREF mark is
     an emblem with the wordmark set beneath it, so cropping to fill was
     cutting the lettering off the bottom edge. A logo is never cropped. */
  width:clamp(64px, 6.5vw, 104px);
  height:auto;
  aspect-ratio:1115 / 1143;
  object-fit:contain;
  border-radius:0;
  flex:none;
}
.m-footer-brand strong{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 2.1vw, 2.4rem);
  font-weight:600;line-height:1;
  letter-spacing:-.02em;color:var(--panel-dark-text);
}
.m-footer-statement p{
  margin:0;color:var(--panel-dark-text);
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.1rem, .9rem + .85vw, 1.7rem);
  line-height:1.38;letter-spacing:-.015em;
  max-width:46ch;text-wrap:pretty;
}

/* ---------- Band 2: locations ----------
   Ahead of the link columns on purpose: for a nonprofit registered in three
   countries, where it physically operates is stronger proof than its nav. */
.m-footer-offices{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s-6);
  padding-block:var(--s-7);
  border-top:1px solid rgba(236,239,230,.14);
  border-bottom:1px solid rgba(236,239,230,.14);
}
.m-footer-office{display:flex;flex-direction:column;gap:var(--s-2);}
.m-footer-office-label{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);
}
.m-footer-office strong{
  font-family:var(--font-display);font-size:var(--t-h4);font-weight:600;
  color:var(--panel-dark-text);letter-spacing:-.01em;
}
.m-footer-office p{
  margin:0;font-size:var(--t-sm);line-height:1.55;
  color:var(--panel-dark-text-soft);max-width:32ch;
}
.m-footer-office a{
  font-family:var(--font-mono);font-size:var(--t-sm);
  color:var(--panel-dark-text);text-decoration:none;
  margin-top:var(--s-2);width:fit-content;
  border-bottom:1px solid rgba(236,239,230,.3);padding-bottom:2px;
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.m-footer-office a:hover{color:var(--accent-2);border-color:var(--accent-2);}

/* ---------- Band 3: link columns ---------- */
.m-footer-links{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s-7) var(--s-6);
  padding-block:var(--s-8);
}
.m-footer-col h5{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);
  margin:0 0 var(--s-5);
}
.m-footer-col ul{list-style:none;margin:0;padding:0;}
.m-footer-col li{margin-bottom:var(--s-3);}
.m-footer-col a{
  color:var(--panel-dark-text-soft);text-decoration:none;font-size:var(--t-sm);
  transition:color var(--dur-fast) var(--ease-out);
}
.m-footer-col a:hover{color:var(--accent-2);}
.m-footer-cta p{
  margin:0 0 var(--s-5);font-size:var(--t-sm);line-height:1.55;
  color:var(--panel-dark-text-soft);max-width:28ch;
}

.m-footer-widgets{
  padding-bottom:var(--s-7);
  border-top:1px solid rgba(236,239,230,.14);
  padding-top:var(--s-7);
}

/* ---------- Band 4: legal ---------- */
.m-footer-legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--s-4) var(--s-7);
  padding-top:var(--s-6);
  border-top:1px solid rgba(236,239,230,.14);
}
.m-footer-registrations,
.m-footer-copy{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  font-family:var(--font-mono);font-size:var(--t-mono);
  letter-spacing:.06em;color:rgba(236,239,230,.5);
  font-variant-numeric:tabular-nums;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .m-footer-statement{grid-template-columns:1fr;gap:var(--s-5);}
  .m-footer-offices{grid-template-columns:1fr 1fr;gap:var(--s-7) var(--s-6);}
  .m-footer-links{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .m-footer-offices{grid-template-columns:1fr;}
  /* Link columns stay two-up on phones. Collapsing four short lists to one
     column turned the footer into a ~1000px scroll of single links; two
     columns keep it scannable and roughly halve its height. */
  .m-footer-links{grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--s-7) var(--s-5);}
  .m-footer-col a{font-size:var(--t-sm);}
  /* The CTA column has a button and prose, so it needs the full width. */
  .m-footer-cta{grid-column:1 / -1;}
  .m-footer-legal{flex-direction:column;gap:var(--s-3);}
}
@media (max-width:360px){
  .m-footer-links{grid-template-columns:1fr;}
}

/* ---------- Footer socials ---------- */
.m-footer-social{
  padding-top:var(--s-6);
  border-top:1px solid rgba(236,239,230,.14);
  margin-bottom:var(--s-5);
}
.m-social-footer a{
  width:42px;height:42px;
  border:1px solid rgba(236,239,230,.22);
  color:var(--panel-dark-text);opacity:.85;
}
.m-social-footer svg{width:18px;height:18px;}
.m-social-footer a:hover{
  background:var(--accent-2);border-color:var(--accent-2);
  color:var(--accent-dark);opacity:1;
}


/* ---------- Country flags ----------
   Rendered next to each office label. A built-in set covers the three
   countries SREF operates in; any future country can have a flag uploaded
   in the Customizer instead, so adding one never needs a developer. */
.m-footer-office-label{display:inline-flex;align-items:center;gap:var(--s-2);}
.m-flag{
  width:20px;height:14px;flex:none;border-radius:2px;
  display:inline-block;overflow:hidden;
  box-shadow:0 0 0 1px rgba(236,239,230,.25);
  object-fit:cover;
}
.m-flag svg{display:block;width:100%;height:100%;}

/* Soft top corners on the footer, so the dark panel reads as a rounded
   slab sitting under the page rather than a hard band across it —
   consistent with every other surface in the theme. */
.theme-meridian .m-footer{
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  margin-top:var(--s-6);
}