/* Kingstel Foundation motto: "Changing Lives, Empowering People".
   Palette follows the site: deep green #14261C, green #06752E / #1BAE70, gold #DD9E2F. */

.kf-motto {
  --kf-motto-color: #06752e;
  --kf-motto-rule: #dd9e2f;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', 'Lato', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700; /* Montserrat 700 is the weight bundled in astra-local-fonts */
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--kf-motto-color);
  text-wrap: balance;
}

/* Short gold rule above the motto, echoing the divider lines used elsewhere on the site. */
.kf-motto::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 0 auto 12px;
  border-radius: 2px;
  background: var(--kf-motto-rule);
}

/* On dark backgrounds the motto switches to gold. */
.kf-motto--on-dark { --kf-motto-color: #dd9e2f; }

/* Homepage hero: sits directly beneath the main heading. */
.kf-motto--hero {
  --kf-motto-color: #fff;
  margin: 18px auto 4px;
  padding: 0 16px;
  font-size: clamp(16px, 1.1vw + 12px, 26px);
  letter-spacing: 0.16em;
}

/* In-page banners and introductions. */
.kf-motto--banner { margin: 10px auto 0; padding: 0 16px; font-size: clamp(14px, 0.6vw + 12px, 18px); }
.kf-motto--intro { margin: 4px auto 22px; padding: 0 16px; font-size: clamp(13px, 0.5vw + 11px, 17px); }

/* Footer brand tagline, beneath the logo. */
.kf-motto--footer {
  margin: 10px auto 0;
  padding: 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.kf-motto--footer::before { width: 32px; height: 2px; margin-bottom: 10px; }

/* Wrapper used for the Elementor flex hero/banner containers so the motto stays centred. */
.kf-motto-wrap { width: 100%; max-width: 100%; text-align: center; }

@media (max-width: 480px) {
  .kf-motto { letter-spacing: 0.1em; }
  .kf-motto::before { margin-bottom: 10px; }
}

@media print {
  .kf-motto::before { display: none; }
}

/* The theme hides the primary footer row (logo + social) at 544px and below, so on phones the
   tagline is shown above the copyright line instead. Only one of the two is ever displayed. */
.kf-motto--footer-mobile { display: none; }
@media (max-width: 544px) {
  .kf-motto--footer-mobile { display: block; margin: 28px auto 4px; font-size: 12px; }
}