/* =========================================================
   UNESCO-IFCD-UNIOSUN · Footer (shared by index.html and resources.html)
   ========================================================= */
.sf {
  --sf-navy: #115A9E; --sf-blue: #0077D4; --sf-green: #019041; --sf-gold: #ffb539;
  position: relative; background: var(--sf-navy); color: rgba(255, 255, 255, .88);
  font-family: var(--body-font); font-size: 15.5px; line-height: 1.65;
}
.sf::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--sf-blue) 0 33%, var(--sf-green) 33% 66%, var(--sf-gold) 66% 100%);
}
/* The theme sets a grey colour on every <p>; keep footer text white and legible on blue. */
.sf p { color: rgba(255, 255, 255, .9); }
.sf a { color: inherit; text-decoration: none; transition: color .2s; }
.sf a:hover { color: #fff; }
.sf a:focus-visible { outline: 3px solid var(--sf-gold); outline-offset: 3px; border-radius: 4px; }

/* Lead row */
.sf-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding: 96px 0 56px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.sf-lead h2 { font-family: var(--title-font); font-weight: 800; color: #fff; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; margin: 0 0 14px; max-width: 720px; }
.sf-lead p { margin: 0; max-width: 620px; font-size: 17.5px; color: #fff; }
.sf-lead__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sf-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 50px;
  font-family: var(--title-font); font-weight: 800; font-size: 15px; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.sf .sf-btn--gold { background: var(--sf-gold); color: #1f1f1f; }
.sf .sf-btn--gold:hover { background: #fff; color: var(--sf-navy); }
.sf .sf-btn--line { border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; }
.sf .sf-btn--line:hover { background: #fff; color: var(--sf-navy); border-color: #fff; }

/* Columns */
.sf-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding: 56px 0 64px; }
.sf-brand__logo { display: inline-flex; background: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 22px; }
.sf-brand__logo img { width: 260px; max-width: 100%; height: auto; display: block; }
.sf-brand p { margin: 0 0 18px; max-width: 380px; }
.sf-grant { font-size: 14px; color: rgba(255, 255, 255, .88); }
.sf-grant strong { color: #fff; font-weight: 700; }
.sf h3 {
  font-family: var(--title-font); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sf-gold); margin: 6px 0 20px;
}
.sf ul { list-style: none; margin: 0; padding: 0; }
.sf ul li + li { margin-top: 10px; }
.sf-links a { font-family: var(--title-font); font-weight: 700; font-size: 15.5px; color: rgba(255, 255, 255, .82); }
.sf-links a:hover { color: var(--sf-gold); }
.sf-contact li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.sf-contact i { color: var(--sf-gold); font-size: 14px; }
.sf-contact a { color: rgba(255, 255, 255, .88); font-weight: 600; word-break: break-word; }
.sf-social { display: flex; gap: 10px; margin-top: 22px; }
.sf-social a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, .25); color: #fff; font-size: 15px; transition: background .2s, border-color .2s, color .2s;
}
.sf-social a:hover { background: #fff; color: var(--sf-navy); border-color: #fff; }

/* Bottom bar */
.sf-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.sf-bottom__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; padding: 24px 0 28px; font-size: 14px; color: rgba(255, 255, 255, .88); }
.sf-bottom p { margin: 0; }
.sf-bottom a { color: #fff; font-weight: 700; }
.sf-top { display: inline-flex; align-items: center; gap: 8px; font-family: var(--title-font); font-weight: 800; }

@media (max-width: 1199px) {
  .sf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 40px; align-items: start; }
  .sf-brand__logo { margin-bottom: 0; }
}
@media (max-width: 991px) {
  .sf-lead { grid-template-columns: 1fr; align-items: start; padding: 80px 0 48px; }
}
@media (max-width: 767px) {
  .sf-cols { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .sf-brand { display: block; }
  .sf-brand__logo { margin-bottom: 20px; }
  .sf-col--contact { grid-column: 1 / -1; }
  .sf-lead__actions .sf-btn { flex: 1 1 100%; justify-content: center; }
  .sf-bottom__inner { flex-direction: column; align-items: flex-start; }
}