/**
 * @file
 * Site footer and donor logo strip.
 *
 * v3: the legal bar carries the contact line. The donor row is now a flex row, not a grid. Each logo is sized to a
 * shared HEIGHT and takes its natural width — so a wide lockup (Sweden) and a
 * near-square mark (EU) read at the same optical weight. The previous grid
 * gave every logo an equal-width cell, which made square marks look small.
 *
 * Colours, faces and steps come from css/tokens.css. No new hex values belong
 * in this file.
 */

/* Shared shell
   ------------------------------------------------------------------------ */

.site-footer {
  font-family: var(--swalim-font-body, Inter, system-ui, sans-serif);
}

.site-footer__inner {
  width: min(100% - 2.5rem, var(--swalim-container, 76rem));
  margin-inline: auto;
}

/* Donor strip
   Logos sit on white: donor identity rules generally require a light ground
   and clear space, and greyscale-until-hover treatments breach several.
   ------------------------------------------------------------------------ */

.partner-strip {
  padding-block: var(--swalim-section-pad);
  background-color: var(--swalim-color-surface);
  border-block-start: 1px solid var(--swalim-color-rule);
}

/* Section header: label with a short brand rule beneath it, sitting on a
   full-width hairline — the same device the old site used. */
.partner-strip__header {
  margin-block-end: var(--swalim-space-lg, 1.5rem);
  border-block-end: 1px solid var(--swalim-color-rule);
}

.partner-strip__heading {
  display: inline-block;
  margin: 0;
  padding-block-end: var(--swalim-space-sm, 0.6rem);
  /* Overlaps the header's hairline by 2px so the accent sits on top of it. */
  margin-block-end: -1px;
  border-block-end: 3px solid var(--swalim-color-accent);
  font-family: var(--swalim-font-display, Archivo, system-ui, sans-serif);
  font-size: var(--swalim-text-base, 1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--swalim-color-blue);
}

/* The donor sentence. Names are emphasised rather than linked — the logos
   below already carry the links, and duplicating them doubles the tab stops. */
.partner-strip__sentence {
  margin: 0 0 var(--swalim-space-lg, 1.75rem);
  max-inline-size: 62rem;
  font-size: var(--swalim-text-base, 1rem);
  line-height: 1.6;
  color: var(--swalim-color-ink-body);
}

.partner-strip__sentence strong {
  font-weight: 600;
  color: var(--swalim-color-ink);
}

/* Logo row
   ------------------------------------------------------------------------ */

.partner-strip__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Generous horizontal gap doubles as each mark's exclusion zone. */
  gap: 0.75rem clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-strip__item {
  /* Natural width — this is what the old footer did and the grid did not. */
  flex: 0 0 auto;
}

.partner-strip__link {
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border: 1px solid transparent;
  border-radius: var(--swalim-radius-md, 4px);
  text-decoration: none;
  transition: opacity 160ms ease;
}

.partner-strip__link:hover {
  opacity: 0.72;
}

.partner-strip__link:focus-visible {
  outline: 2px solid var(--swalim-color-blue);
  outline-offset: 4px;
}

/* One shared height across every mark, width follows the artwork.
   THIS is the value to tune if the logos read too small or too large. */
.partner-strip__logo {
  block-size: clamp(2.5rem, 4vw, 3.75rem);
  inline-size: auto;
  /* Guard against a runaway wide lockup pushing the row apart. */
  max-inline-size: 14rem;
  object-fit: contain;
}

/* Shown when the logo file has not been uploaded yet. */
.partner-strip__wordmark {
  display: flex;
  align-items: center;
  block-size: clamp(2.5rem, 4vw, 3.75rem);
  padding-inline: var(--swalim-space-sm, 0.75rem);
  font-family: var(--swalim-font-display, Archivo, system-ui, sans-serif);
  font-size: var(--swalim-text-sm, 0.9375rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--swalim-color-ink);
}

/* Main footer
   ------------------------------------------------------------------------ */

.site-footer__main {
  padding-block: var(--swalim-section-pad);
  background-color: var(--swalim-color-blue-deep);
  color: var(--swalim-color-on-dark);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--swalim-space-lg, 1.75rem);
  align-items: start;
}

.site-footer__brand {
  grid-column: span 2;
  min-inline-size: 0;
}

@media (max-width: 40rem) {
  .site-footer__brand {
    grid-column: span 1;
  }
}

.site-footer__logo {
  max-block-size: 3rem;
  inline-size: auto;
}

.site-footer__tagline {
  margin: var(--swalim-space-md, 1rem) 0 0;
  max-inline-size: 22rem;
  font-size: var(--swalim-text-sm, 0.9375rem);
  line-height: 1.6;
  color: var(--swalim-color-on-dark-muted);
}

.footer-nav__title {
  margin: 0 0 var(--swalim-space-md, 1rem);
  padding-block-end: var(--swalim-space-xs, 0.5rem);
  border-block-end: 1px solid var(--swalim-color-on-dark-rule);
  font-family: var(--swalim-font-display, Archivo, system-ui, sans-serif);
  font-size: var(--swalim-text-sm, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--swalim-color-on-dark);
}

.footer-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav__item + .footer-nav__item {
  margin-block-start: var(--swalim-space-xs, 0.5rem);
}

.footer-nav__link {
  font-size: var(--swalim-text-sm, 0.9375rem);
  line-height: 1.5;
  color: var(--swalim-color-on-dark-muted);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}

.footer-nav__link:hover,
.footer-nav__link:focus-visible {
  color: var(--swalim-color-accent-on-dark);
  border-block-end-color: currentColor;
}

.footer-nav__link:focus-visible,
.site-footer__legal-links a:focus-visible {
  outline: 2px solid var(--swalim-color-accent-on-dark);
  outline-offset: 3px;
}

.footer-nav__link--external::after {
  content: '↗';
  margin-inline-start: 0.35em;
  font-size: 0.85em;
  opacity: 0.75;
}

/* Legal bar — single contact line
   Format follows the previous site: copyright, offices and email on one line,
   social icons pinned right. The addresses live here rather than in a column
   above, so they appear once on the page instead of twice.
   ------------------------------------------------------------------------ */

.site-footer__legal {
  padding-block: var(--swalim-space-md, 1.1rem);
  background-color: var(--swalim-color-blue-darkest);
  color: var(--swalim-color-on-dark-muted);
}

.site-footer__legal-main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--swalim-space-sm, 0.75rem) var(--swalim-space-lg, 1.5rem);
  align-items: center;
  justify-content: space-between;
}

/* The contact line wraps as a unit; separators are decorative and hidden
   from screen readers, which read the spans as separate phrases anyway. */
.site-footer__contact-line {
  margin: 0;
  font-size: var(--swalim-text-sm, 0.875rem);
  line-height: 1.7;
  color: var(--swalim-color-on-dark);
}

.site-footer__copyright {
  font-weight: 600;
}

.site-footer__sep {
  margin-inline: 0.5em;
  color: var(--swalim-color-on-dark-muted);
  opacity: 0.55;
}

.site-footer__office {
  color: var(--swalim-color-on-dark-muted);
}

.site-footer__email {
  font-family: var(--swalim-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.95em;
  color: var(--swalim-color-accent-on-dark);
  text-decoration: none;
  border-block-end: 1px solid currentColor;
}

/* Sub-line: FAO attribution and policy links, deliberately quieter. */
.site-footer__legal-sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--swalim-space-xs, 0.5rem) var(--swalim-space-lg, 1.5rem);
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--swalim-space-sm, 0.75rem);
  padding-block-start: var(--swalim-space-sm, 0.75rem);
  border-block-start: 1px solid rgb(255 255 255 / 0.1);
}

.site-footer__attribution {
  margin: 0;
  font-size: var(--swalim-text-xs, 0.75rem);
  color: var(--swalim-color-on-dark-muted);
  opacity: 0.8;
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--swalim-space-md, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--swalim-text-xs, 0.75rem);
}

.site-footer__legal-links a {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  opacity: 0.8;
}

.site-footer__legal-links a:hover {
  opacity: 1;
  border-block-end-color: currentColor;
}

/* Social icons
   Solid tiles, as on the old bar, but in the brand green rather than each
   platform's own colour — a row of red/blue/orange squares would undo the
   palette Ugo asked for.
   ------------------------------------------------------------------------ */

.footer-social {
  display: flex;
  gap: var(--swalim-space-sm, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  background-color: var(--swalim-color-blue);
  border-radius: var(--swalim-radius-md, 4px);
  color: var(--swalim-color-on-dark);
  transition: background-color 140ms ease;
}

.footer-social__link:hover {
  background-color: var(--swalim-color-accent);
  /* FAO orange needs dark ink — white on orange is 2.58:1 and fails AA. */
  color: var(--swalim-color-accent-ink);
}

.footer-social__link:focus-visible {
  outline: 2px solid var(--swalim-color-accent-on-dark);
  outline-offset: 3px;
}

.footer-social__link svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .partner-strip__link,
  .footer-nav__link,
  .footer-social__link {
    transition: none;
  }
}

/* ---------------------------------------------------------------------
 * Donor logos — one row.
 * Each logo takes an equal share of the width and scales to fit, so the
 * strip stays on a single line however many donors there are.
 * ------------------------------------------------------------------ */
.donors__logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.5rem, 1.8vw, 2rem);
}
.donors__logos > * {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.donors__logos img {
  width: 100%;
  height: auto;
  max-height: 46px;
  object-fit: contain;
}

/* Below tablet, keep them legible and scroll sideways instead of shrinking. */
@media (max-width: 760px) {
  .donors__logos {
    overflow-x: auto;
    padding-bottom: var(--space-2xs);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .donors__logos > * { flex: 0 0 auto; }
  .donors__logos img { width: auto; height: 34px; max-height: none; }
}