/*
 * Flerimo Foundation design layer
 * Ported from the static index.html mockup.
 *
 * Everything here is namespaced (body.flerimo / .fl-*) so it cannot collide
 * with the stock NGO Disaster Relief rules in style.css and css/media.css.
 * This file is enqueued LAST, with style.css + media.css as dependencies.
 */

:root {
  /* Brand palette, sampled straight out of images/logo.png:
     the leaf green #add144 and the navy #273d4a are the only two colours in
     the mark. Everything below is derived from those two.

     Green is very light (relative luminance 0.57), so it can never carry white
     text. It is the FILL and the on-dark accent; --fl-leaf-deep is the darker
     tint used whenever the green has to be legible on a light background. */
  --fl-leaf: #add144;
  --fl-leaf-deep: #5d731c;
  --fl-leaf-dark: #465614;
  --fl-navy: #273d4a;
  --fl-navy-mid: #4a6474;
  --fl-navy-deep: #17242c;

  /* Legacy aliases. The ported mockup named its colours forest/marigold/teal;
     the rules below still use those names, so they are kept pointing at the
     new brand tokens rather than renamed across 1800 lines. */
  --fl-forest: var(--fl-navy);
  --fl-forest-deep: var(--fl-navy-deep);
  --fl-marigold: var(--fl-leaf);
  --fl-marigold-dim: var(--fl-leaf-deep);
  --fl-teal: var(--fl-navy-mid);

  --fl-sand: #f5f8ee;
  --fl-sand-dim: #e9efd9;
  --fl-ink: #1d2f3a;
  --fl-white: #ffffff;
  --fl-line: rgba(29, 47, 58, 0.14);
  --fl-muted: rgba(29, 47, 58, 0.68);
  --fl-body-serif: 'Newsreader', Georgia, serif;
  --fl-body-sans: 'Work Sans', system-ui, -apple-system, sans-serif;
  --fl-body-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* The parent theme's own two globals (style.css ships #ED4A4B / #FCAC2F).
     They colour the stock components the ported pages don't cover -- offcanvas,
     WooCommerce buttons, achievement boxes -- so they are pulled onto the brand
     here. --first-color is used as a solid background under white text in
     style.css, hence the deep green rather than #add144.

     Customizer > Colors still wins: inline.php re-declares both with
     !important when ngo_disaster_relief_first_color / _second_color are set. */
  --first-color: #5d731c;
  --second-color: #273d4a;
}

html {
  scroll-behavior: smooth;
}

/* ---------- BASE ---------- */

body.flerimo {
  background: var(--fl-sand);
  color: var(--fl-ink);
  font-family: var(--fl-body-sans);
  font-weight: 400;
  overflow-x: hidden;
}

.flerimo h1,
.flerimo h2,
.flerimo h3,
.flerimo h4,
.flerimo .fl-display-serif {
  font-family: var(--fl-body-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fl-ink);
}

.flerimo h5,
.flerimo h6 {
  font-family: var(--fl-body-sans);
  font-weight: 600;
  color: var(--fl-ink);
}

.fl-mono {
  font-family: var(--fl-body-mono);
  letter-spacing: 0.03em;
}

.fl-eyebrow {
  font-family: var(--fl-body-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fl-marigold-dim);
}

/* Anchor colour reset, deliberately confined to the ported regions so blog
   and page content keep the theme's own link styling. */
.fl-home a,
.fl-nav a,
.fl-footer a,
.fl-page-header a {
  color: inherit;
}

/* Deep green, not the logo green: a 2px #add144 ring on a white page is only
   1.9:1 against it and effectively invisible. */
.flerimo :focus-visible {
  outline: 2px solid var(--fl-leaf-deep);
  outline-offset: 2px;
}

/* ---------- NAVBAR ---------- */

.fl-nav {
  background: rgba(255, 255, 255, 0);
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.fl-nav.fl-scrolled,
/* Inner pages have no hero behind the bar, so it is opaque from the start. */
.fl-nav.fl-nav-solid {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 24px rgba(29, 47, 58, 0.1);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.fl-nav .navbar-brand {
  font-family: var(--fl-body-serif);
  font-size: 1.4rem;
  color: var(--fl-ink);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fl-nav .fl-navbar-logo,
.fl-nav .custom-logo {
  width: auto;
  height: 70px !important;
  max-height: 90px;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

.fl-nav .navbar-brand .fl-brand-text span {
  color: var(--fl-leaf-deep);
}

.fl-nav .fl-brand-tagline {
  display: block;
  font-family: var(--fl-body-sans);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--fl-muted);
}

.fl-nav .nav-link {
  color: rgba(29, 47, 58, 0.75);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  margin: 0 0.55rem;
  position: relative;
}

.fl-nav .nav-link:hover,
.fl-nav .nav-link:focus,
.fl-nav .current-menu-item > .nav-link,
.fl-nav .current_page_item > .nav-link {
  color: var(--fl-forest);
}

.fl-nav .navbar-toggler {
  background: rgba(29, 47, 58, 0.08);
  border: none;
}

/* Sub-menus, in the theme's Bootstrap 5 dropdown markup. */
.fl-nav .dropdown-menu {
  border: 1px solid var(--fl-line);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(29, 47, 58, 0.12);
  padding: 0.4rem 0;
}

.fl-nav .dropdown-item {
  font-size: 0.86rem;
  color: rgba(29, 47, 58, 0.75);
  padding: 0.5rem 1.1rem;
}

.fl-nav .dropdown-item:hover,
.fl-nav .dropdown-item:focus {
  background: var(--fl-sand-dim);
  color: var(--fl-forest);
}

/* Kept its mockup class name so the section partials don't have to change.
   Green fill + navy label is the logo's own pairing (6.6:1); white on the
   green would be 1.9:1. Hover inverts to the navy fill with white on it. */
.fl-btn-marigold {
  background: var(--fl-leaf);
  color: var(--fl-white) !important;
  font-weight: 600;
  border: none;
  padding: 0.55rem 1.3rem;
  border-radius: 2px;
  font-size: 1.2rem;
  display: inline-block;
}

.fl-btn-marigold:hover,
.fl-btn-marigold:focus {
  background: var(--fl-navy);
  color: var(--fl-white) !important;
}

.fl-btn-outline {
  border: 1px solid rgba(29, 47, 58, 0.3);
  color: var(--fl-ink);
  border-radius: 2px;
  padding: 0.55rem 1.3rem;
  display: inline-block;
  font-size: 1.2rem;
}

.fl-btn-outline:hover,
.fl-btn-outline:focus {
  border-color: var(--fl-leaf-deep);
  color: var(--fl-leaf-deep);
}

/* The nav item flagged as the CTA in Appearance > Menus (CSS class: fl-cta). */
.fl-nav .fl-cta > .nav-link {
  background: var(--fl-leaf);
  color: var(--fl-white);
  font-weight: 600;
  border-radius: 2px;
  padding: 0.55rem 1.3rem;
  margin-left: 1rem;
}

.fl-nav .fl-cta > .nav-link:hover,
.fl-nav .fl-cta > .nav-link:focus {
  background: var(--fl-navy);
  color: var(--fl-white);
}

/* ---------- HERO ---------- */

.fl-hero {
  position: relative;
  background: radial-gradient(ellipse at 20% -10%, #eef4dc 0%, var(--fl-sand) 45%, var(--fl-white) 100%);
  color: var(--fl-ink);
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 5rem;
}

.fl-plot-field {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  pointer-events: none;
}

.fl-hero-headline {
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.04;
  color: var(--fl-ink);
}

.fl-hero-headline em {
  font-style: italic;
  color: var(--fl-leaf-deep);
}

.fl-hero-sub {
  max-width: 540px;
  color: rgba(29, 47, 58, 0.72);
  font-size: 1.08rem;
  line-height: 1.65;
}

.fl-hero-stats {
  border-top: 1px solid var(--fl-line);
  margin-top: 3rem;
  padding-top: 1.6rem;
}

.fl-hero-stats .fl-num {
  font-family: var(--fl-body-mono);
  font-size: 1.7rem;
  color: var(--fl-leaf-deep);
}

.fl-hero-stats .fl-lbl {
  font-size: 0.74rem;
  color: rgba(29, 47, 58, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.fl-scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(29, 47, 58, 0.5);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.fl-scroll-cue .fl-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(29, 47, 58, 0.5), transparent);
  animation: fl-scrolldown 1.8s infinite;
}

@keyframes fl-scrolldown {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- SECTION GENERIC ---------- */

.fl-home section {
  padding: 6.5rem 0;
}

.fl-home .fl-section-tight {
  padding: 4.5rem 0;
}

.fl-divider-line {
  height: 1px;
  background: var(--fl-line);
  border: none;
  margin: 0;
  opacity: 1;
}

.fl-section-heading {
  font-size: 2.2rem;
}

.fl-section-heading-lg {
  font-size: 2.4rem;
}

.fl-lede {
  color: #4a5a63;
}

/* ---------- LEADERSHIP ---------- */

.fl-leader-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, var(--fl-teal), var(--fl-forest));
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(23, 36, 44, 0.18);
}

.fl-leader-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  position: relative;
  z-index: 1;
}

.fl-leader-portrait .fl-initials {
  font-family: var(--fl-body-serif);
  font-size: 6.5rem;
  color: rgba(245, 249, 234, 0.92);
}

.fl-leader-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(245, 249, 234, 0.05) 0px, rgba(245, 249, 234, 0.05) 1px, transparent 1px, transparent 22px);
}

.fl-leader-portrait-frame {
  position: relative;
}

.fl-leader-portrait-frame::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  border: 1px solid var(--fl-marigold);
  border-radius: 4px;
  z-index: -1;
}

.fl-leader-tag {
  font-family: var(--fl-body-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fl-teal);
  border: 1px solid var(--fl-teal);
  padding: 0.3rem 0.7rem;
  display: inline-block;
  border-radius: 2px;
}

blockquote.fl-leader-quote {
  font-family: var(--fl-body-serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--fl-forest-deep);
  border-left: 2px solid var(--fl-leaf-deep);
  padding-left: 1.4rem;
  margin: 1.6rem 0;
  background: none;
}

.fl-leader-body {
  max-width: 640px;
  color: #3f4f58;
}

.fl-fact-card {
  background: var(--fl-white);
  border: 1px solid var(--fl-line);
  border-radius: 4px;
  height: 100%;
}

.fl-role {
  font-family: var(--fl-body-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fl-marigold-dim);
}

.fl-fact-card p {
  font-size: 0.92rem;
  color: #3f4f58;
}

/* ---------- FIELD PLOTS (pillars) ---------- */

.fl-home #fl-pillars {
  background-color: var(--fl-white);
}

.fl-field-map {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: 10px;
}

.fl-plot {
  position: relative;
  border-radius: 3px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--fl-white);
  overflow: hidden;
  transition: transform 0.3s ease;
  min-height: 100%;
  background: var(--fl-navy);
}

.fl-plot:hover {
  transform: translateY(-4px);
}

.fl-plot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 0;
}

.fl-plot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 0;
}

.fl-plot > * {
  position: relative;
  z-index: 1;
}

.fl-plot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.fl-plot .fl-plot-crop {
  font-family: var(--fl-body-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 0.3rem;
}

.flerimo .fl-plot h3 {
  font-size: 1.25rem;
  margin-bottom: 0;
  color: #f5f9ea;
  font-weight: 700;
  text-shadow: none;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
}

.fl-plot p {
  font-size: 0.86rem;
  color: rgba(245, 249, 234, 0.82);
  margin: 0;
}

/* Five steps along the logo's own navy-to-green axis, so the map reads as one
   family. Only shown where a pillar has no image; the ::before/::after scrims
   above keep the caption legible even on the lightest of them. */
.fl-plot-education { grid-column: span 3; grid-row: span 2; background: linear-gradient(150deg, #3a5566, #273d4a); }
.fl-plot-agri      { grid-column: span 3; grid-row: span 2; background: linear-gradient(150deg, #add144, #5d731c); }
.fl-plot-tech      { grid-column: span 2; grid-row: span 2; background: linear-gradient(150deg, #4f7a5c, #2c5340); }
.fl-plot-child     { grid-column: span 2; grid-row: span 2; background: linear-gradient(150deg, #8fb832, #465614); }
.fl-plot-community { grid-column: span 2; grid-row: span 2; background: linear-gradient(150deg, #33505f, #17242c); }

@media (max-width: 991px) {
  .fl-field-map {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
  }
  .fl-plot-education,
  .fl-plot-agri,
  .fl-plot-tech,
  .fl-plot-child,
  .fl-plot-community {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ---------- PLOT GALLERY (events per focus area) ---------- */

.flerimo .fl-plot-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 249, 234, 0.45);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.flerimo .fl-plot-link:hover,
.flerimo .fl-plot-link:focus {
  color: #f5f9ea;
  border-bottom-color: var(--fl-marigold);
  text-decoration: none;
}

.flerimo .fl-plot-link:focus-visible {
  outline: 2px solid var(--fl-marigold);
  outline-offset: 4px;
}

.fl-plot-count {
  display: block;
  font-family: var(--fl-body-mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 249, 234, 0.8);
  margin-top: 0.25rem;
}

.fl-plot-has-gallery::after {
  height: 74px;
}

/* Lightbox */

.fl-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.fl-gallery-modal[hidden] {
  display: none;
}

.fl-gallery-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 36, 44, 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Column layout so only .fl-gallery-body scrolls: the category name, the close
   button and the archive link stay put however long the gallery runs. */
.fl-gallery-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1040px;
  max-height: 88vh;
  overflow: hidden;
  background: var(--fl-white);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(23, 36, 44, 0.35);
}

.fl-gallery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--fl-line);
  padding: 1.75rem 1.75rem 1rem;
}

.flerimo .fl-gallery-title {
  font-size: 1.6rem;
  margin: 0;
}

.fl-gallery-meta {
  font-family: var(--fl-body-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fl-muted);
  margin: 0.35rem 0 0;
}

.fl-gallery-meta[hidden] {
  display: none;
}

.fl-gallery-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem 1.75rem;
}

.fl-gallery-close {
  border: 1px solid var(--fl-line);
  background: transparent;
  color: var(--fl-ink);
  border-radius: 3px;
  width: 38px;
  height: 38px;
  font-size: 1.4rem;
  line-height: 1;
  flex: 0 0 auto;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.fl-gallery-close:hover,
.fl-gallery-close:focus {
  background: var(--fl-leaf);
  border-color: var(--fl-leaf);
  color: var(--fl-navy);
}

/* ---------- one group per event ---------- */

.fl-gallery-group + .fl-gallery-group {
  margin-top: 2rem;
}

/* Sticky so the event name stays overhead while its own photos scroll past.
   top is measured from the scrollport edge, not from inside .fl-gallery-body's
   padding, so 0 is flush. The background must stay opaque or the thumbnails
   passing underneath show through. */
.fl-gallery-group-head {
  /* position: sticky; */
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--fl-white);
  border-bottom: 1px solid var(--fl-line);
  padding: 0.9rem 0 0.6rem;
  margin-bottom: 0.9rem;
}

.flerimo .fl-gallery-group-title {
  font-family: var(--fl-body-serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  color: var(--fl-ink);
}

.fl-gallery-group-count {
  font-family: var(--fl-body-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fl-navy-mid);
  flex: 0 0 auto;
}

.fl-gallery-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.fl-gallery-item {
  margin: 0;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: var(--fl-sand-dim);
}

.fl-gallery-item img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
}

/* Now the attachment's own caption, not the event name, so it is set as running
   text rather than a mono label. Absent on most images by design. */
.fl-gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 0.7rem 0.55rem;
  background: linear-gradient(180deg, rgba(23, 36, 44, 0) 0%, rgba(23, 36, 44, 0.85) 55%);
  font-size: 0.76rem;
  line-height: 1.4;
  color: #f5f9ea;
}

.fl-gallery-foot {
  flex: 0 0 auto;
  margin: 0;
  padding: 1rem 1.75rem 1.25rem;
  border-top: 1px solid var(--fl-line);
  font-family: var(--fl-body-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.fl-gallery-foot a {
  color: var(--fl-marigold-dim);
  text-decoration: none;
}

.fl-gallery-foot a:hover,
.fl-gallery-foot a:focus {
  text-decoration: underline;
}

body.fl-gallery-open {
  overflow: hidden;
}

@media (max-width: 575px) {
  .fl-gallery-modal {
    padding: 0;
  }

  .fl-gallery-dialog {
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }

  .fl-gallery-head {
    padding: 1.25rem 1.25rem 0.85rem;
  }

  .fl-gallery-body {
    padding: 1rem 1.25rem;
  }

  .fl-gallery-foot {
    padding: 0.85rem 1.25rem 1rem;
  }

  .fl-gallery-group-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .fl-gallery-item img {
    height: 140px;
  }
}

/* ---------- IMPACT STATS BAND ---------- */

.fl-impact-band {
  background: var(--fl-sand-dim);
  color: var(--fl-ink);
  border-top: 1px solid var(--fl-line);
  border-bottom: 1px solid var(--fl-line);
}

.fl-impact-num {
  font-family: var(--fl-body-mono);
  font-size: 2.6rem;
  color: var(--fl-leaf-deep);
  line-height: 1;
}

.fl-impact-lbl {
  font-size: 0.82rem;
  color: rgba(29, 47, 58, 0.62);
  margin-top: 0.5rem;
}

/* ---------- PROGRAMS ---------- */

.fl-program-row {
  border-bottom: 1px solid var(--fl-line);
  padding: 1.8rem 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: background 0.25s ease;
}

.fl-program-row:hover {
  background: rgba(173, 209, 68, 0.12);
}

.fl-program-tag {
  font-family: var(--fl-body-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fl-teal);
  min-width: 120px;
}

.fl-program-title {
  font-family: var(--fl-body-serif);
  font-size: 1.35rem;
  margin: 0;
}

.fl-program-title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--fl-marigold), var(--fl-marigold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.25s ease, color 0.25s ease;
}

.fl-program-row:hover .fl-program-title a,
.fl-program-title a:hover,
.fl-program-title a:focus {
  color: var(--fl-marigold-dim);
  background-size: 100% 1px;
  text-decoration: none;
}

.fl-program-title a:focus-visible {
  outline: 2px solid var(--fl-leaf-deep);
  outline-offset: 3px;
}

.fl-program-desc {
  color: #4a5a63;
  font-size: 0.92rem;
  margin: 0;
}

.fl-program-arrow {
  margin-left: auto;
  font-size: 1.4rem;
  color: var(--fl-marigold-dim);
}

.fl-program-arrow a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.25s ease, color 0.25s ease;
}

.fl-program-row:hover .fl-program-arrow a,
.fl-program-arrow a:hover,
.fl-program-arrow a:focus {
  color: var(--fl-leaf-dark);
  transform: translateX(5px);
  text-decoration: none;
}

.fl-program-arrow a:focus-visible {
  outline: 2px solid var(--fl-leaf-deep);
  outline-offset: 4px;
}

@media (max-width: 575px) {
  .fl-program-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .fl-program-arrow {
    margin-left: 0;
  }
}

/* ---------- GET INVOLVED ---------- */

.fl-involved {
  background: var(--fl-sand-dim);
}

.fl-involve-card {
  background: var(--fl-white);
  border: 1px solid var(--fl-line);
  border-radius: 4px;
  padding: 2rem 1.7rem;
  height: 100%;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.fl-involve-card:hover {
  border-color: var(--fl-leaf-deep);
  transform: translateY(-4px);
}

.fl-involve-card p {
  color: #4a5a63;
  font-size: 0.92rem;
}

/* ---------- PARTNERS ---------- */

/* Sits between .fl-involved (sand-dim) and the contact band, so it goes white
   to keep the section banding alternating. */
.fl-partners {
  background: var(--fl-white);
}

.fl-partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 991px) {
  .fl-partner-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .fl-partner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fl-partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  background: var(--fl-sand);
  border: 1px solid var(--fl-line);
  border-radius: 6px;
  padding: 1.8rem 1.4rem;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.fl-partner-card:hover,
.fl-partner-card:focus-visible {
  border-color: var(--fl-leaf-deep);
  background: var(--fl-sand-dim);
  transform: translateY(-4px);
}

/* Fixed-height box with contain: the supplied logos differ in aspect ratio and
   this is what keeps the row optically level without cropping any of them. */
.fl-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 66px;
}

.fl-partner-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Desaturated at rest so eight different brand palettes don't fight the
     page; full colour on hover. Delete these two lines for always-on colour. */
  filter: grayscale(1);
  opacity: 0.78;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.fl-partner-card:hover .fl-partner-logo img,
.fl-partner-card:focus-visible .fl-partner-logo img {
  filter: none;
  opacity: 1;
}

.fl-partner-name {
  font-family: var(--fl-body-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--fl-muted);
}

/* ---------- CTA / CONTACT ---------- */

.fl-cta-band {
  background: var(--fl-white);
  border: 1px solid var(--fl-line);
  box-shadow: 0 18px 48px rgba(29, 47, 58, 0.08);
  color: var(--fl-ink);
  border-radius: 6px;
  padding: 4.5rem 3rem;
  position: relative;
  overflow: hidden;
}

.fl-cta-band .fl-plot-field {
  opacity: 0.08;
}

.fl-contact-intro {
  max-width: 560px;
  margin: 0 auto 3rem;
  text-align: center;
}

.fl-contact-grid {
  display: grid;
  /* Address card gets the extra width so the two addresses wrap onto fewer
     lines, which keeps the whole row shorter. */
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .fl-contact-grid {
    grid-template-columns: 1fr;
  }
  .fl-cta-band {
    padding: 3rem 1.5rem;
  }
}

.fl-contact-card {
  background: var(--fl-sand);
  border: 1px solid var(--fl-line);
  border-radius: 6px;
  padding: 2.2rem 1.8rem;
  height: 100%;
  /* Cards stretch to the tallest sibling, so centre the contents instead of
     letting the leftover space pile up at the bottom. flex-start keeps the
     icon circle and the underlined links hugging their own content. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.fl-contact-card:hover {
  border-color: var(--fl-leaf-deep);
  background: var(--fl-sand-dim);
  transform: translateY(-4px);
}

.fl-contact-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.fl-contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(173, 209, 68, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Never squeeze the circle when the heading beside it wraps. */
  flex: 0 0 44px;
}

.fl-contact-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--fl-leaf-deep);
}

.flerimo .fl-contact-card h3 {
  color: var(--fl-ink);
  font-size: 1.3rem;
  margin: 0;
}

.fl-contact-card .fl-contact-link {
  display: inline-block;
  color: var(--fl-leaf-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(93, 115, 28, 0.45);
  padding-bottom: 2px;
  font-size: 1.02rem;
}

.fl-contact-card .fl-contact-link:hover,
.fl-contact-card .fl-contact-link:focus {
  color: var(--fl-forest-deep);
  border-color: var(--fl-forest-deep);
}

.fl-contact-card p {
  color: var(--fl-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.fl-contact-card .fl-addr-block {
  margin-bottom: 1rem;
}

.fl-contact-card .fl-addr-block:last-child {
  margin-bottom: 0;
}

.fl-contact-card .fl-addr-label {
  font-family: var(--fl-body-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fl-teal);
  display: block;
  margin-bottom: 0.3rem;
}

/* ---------- FOOTER ---------- */

.fl-footer {
  background: var(--fl-white);
  border-top: 1px solid var(--fl-line);
  color: var(--fl-muted);
  padding: 3.5rem 0 0;
  font-size: 0.9rem;
}

.fl-footer h6,
.fl-footer .fl-footer-title {
  font-family: var(--fl-body-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(29, 47, 58, 0.45);
  margin-bottom: 1rem;
  font-weight: 500;
}

.fl-footer p,
.fl-footer li,
.fl-footer td,
.fl-footer address {
  color: var(--fl-muted);
}

.fl-footer a {
  color: rgba(29, 47, 58, 0.72);
  text-decoration: none;
}

.fl-footer a:hover,
.fl-footer a:focus {
  color: var(--fl-leaf-deep);
}

.fl-footer-brand {
  font-family: var(--fl-body-serif);
  font-size: 1.5rem;
  color: var(--fl-ink);
}

.fl-footer-brand span {
  color: var(--fl-leaf-deep);
}

.fl-footer-blurb {
  max-width: 320px;
}

.fl-footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fl-footer-menu ul {
  list-style: none;
  padding-left: 0.9rem;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fl-footer-bottom {
  border-top: 1px solid var(--fl-line);
  margin-top: 2.5rem;
  padding: 1.4rem 0;
  font-size: 0.78rem;
  color: rgba(29, 47, 58, 0.45);
}

.fl-footer-bottom a {
  color: rgba(29, 47, 58, 0.55);
}

.fl-footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--fl-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fl-ink);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.fl-footer-social a:hover,
.fl-footer-social a:focus {
  border-color: var(--fl-leaf);
  color: var(--fl-leaf-deep);
  background: rgba(173, 209, 68, 0.18);
}

.fl-footer-social svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.fl-footer-social i {
  font-size: 15px;
}

/* Optional widget row, only rendered when the footer sidebar has widgets. */
.fl-footer .fl-footer-widgets {
  border-bottom: 1px solid var(--fl-line);
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
}

.fl-footer .fl-footer-widgets .title {
  font-family: var(--fl-body-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(29, 47, 58, 0.45);
  background: none;
  border: none;
  padding: 0;
}

.fl-footer .fl-footer-widgets ul {
  list-style: none;
  padding-left: 0;
}

/* Theme's scroll-to-top control, restyled. */
.flerimo .scroll-up a {
  background: var(--fl-leaf);
  color: var(--fl-navy);
  border-radius: 2px;
}

.flerimo .scroll-up a:hover {
  background: var(--fl-navy);
  color: var(--fl-white);
}

/* ---------- INNER PAGE HEADER ---------- */

.fl-page-header {
  position: relative;
  background: radial-gradient(ellipse at 20% -30%, #eef4dc 0%, var(--fl-sand) 55%, var(--fl-white) 100%);
  border-bottom: 1px solid var(--fl-line);
  padding: 9rem 0 3.5rem;
  overflow: hidden;
}

.fl-page-header .fl-plot-field {
  opacity: 0.1;
}

.flerimo .fl-page-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: 0;
  color: var(--fl-ink);
}

.fl-page-header .fl-eyebrow {
  margin-bottom: 0.5rem;
}

/* Theme breadcrumb, restyled. */
.fl-page-header .bread_crumb,
.fl-page-header .bread_crumb a,
.fl-page-header .bread_crumb span {
  font-family: var(--fl-body-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(29, 47, 58, 0.55);
  text-transform: uppercase;
}

.fl-page-header .bread_crumb {
  margin-top: 1rem;
}

.fl-page-header .bread_crumb a:hover {
  color: var(--fl-leaf-deep);
}

/* ---------- EVENT CATEGORY ARCHIVE ---------- */

.fl-events-intro {
  max-width: 640px;
  margin-top: 1rem;
  color: var(--fl-muted);
  line-height: 1.7;
}

.fl-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

.fl-event-card {
  background: var(--fl-white);
  border: 1px solid var(--fl-line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fl-event-media {
  background: var(--fl-sand-dim);
  line-height: 0;
  position: relative;
}

.fl-event-media img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: center;
}

/* Multi-image cards: a scroll-snap track, so touch swiping works with no JS. */

.fl-event-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fl-event-slides::-webkit-scrollbar {
  display: none;
}

.fl-event-slides:focus-visible {
  outline: 2px solid var(--fl-leaf-deep);
  outline-offset: -2px;
}

.fl-event-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.fl-event-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--fl-ink);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  box-shadow: 0 2px 8px rgba(23, 36, 44, 0.2);
}

.fl-event-prev { left: 10px; }
.fl-event-next { right: 10px; }

.fl-event-slider:hover .fl-event-nav,
.fl-event-nav:focus-visible {
  opacity: 1;
}

.fl-event-nav:hover {
  background: var(--fl-leaf);
  color: var(--fl-navy);
}

.fl-event-nav[disabled] {
  opacity: 0.25;
  cursor: default;
}

.fl-event-slider:hover .fl-event-nav[disabled] {
  opacity: 0.35;
}

.fl-event-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(23, 36, 44, 0.66);
  color: #f5f9ea;
  font-family: var(--fl-body-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.fl-event-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
  line-height: 0;
}

.fl-event-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(23, 36, 44, 0.4);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.fl-event-dot.is-active {
  background: var(--fl-marigold);
  transform: scale(1.3);
}

@media (hover: none) {
  .fl-event-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-event-slides {
    scroll-behavior: auto;
  }
}

.fl-event-body {
  padding: 1.4rem 1.5rem 1.6rem;
}

.flerimo .fl-event-title {
  font-size: 1.3rem;
  margin: 0 0 0.6rem;
  color: var(--fl-ink);
}

.fl-event-desc {
  margin: 0;
  color: var(--fl-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.fl-events-empty {
  color: var(--fl-muted);
  font-family: var(--fl-body-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

@media (max-width: 575px) {
  .fl-event-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .fl-event-media img {
    height: 200px;
  }
}

/* ---------- INNER CONTENT ---------- */

.fl-inner {
  padding: 4rem 0 5rem;
  background: var(--fl-sand);
}

.flerimo .fl-inner .post-title,
.flerimo .fl-inner h2.post-title {
  font-family: var(--fl-body-serif);
}

.fl-inner .post-content,
.fl-inner .page-content {
  color: var(--fl-muted);
  line-height: 1.7;
}

/* Post cards from template-parts/content*.php */
.fl-inner .post-single,
.fl-inner .page-single {
  background: var(--fl-white);
  border: 1px solid var(--fl-line);
  border-radius: 4px;
  padding: 1.6rem;
  height: 100%;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.fl-inner .post-single:hover {
  border-color: var(--fl-leaf-deep);
  transform: translateY(-3px);
}

.fl-inner .post-single img {
  border-radius: 3px;
}

.fl-inner .post-info,
.fl-inner .entry-meta,
.fl-inner .post-meta {
  font-family: var(--fl-body-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(29, 47, 58, 0.5);
}

.fl-inner .post-info a,
.fl-inner .entry-meta a {
  color: var(--fl-teal);
}

.fl-inner .read-more a,
.fl-inner .more-link,
.fl-inner .post-button a {
  display: inline-block;
  background: var(--fl-leaf);
  color: var(--fl-navy);
  border-radius: 2px;
  padding: 0.5rem 1.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.fl-inner .read-more a:hover,
.fl-inner .more-link:hover,
.fl-inner .post-button a:hover {
  background: var(--fl-navy);
  color: var(--fl-white);
}

/* Pagination */
.fl-inner .navigation .page-numbers,
.fl-inner .page-numbers {
  border: 1px solid var(--fl-line);
  border-radius: 2px;
  padding: 0.4rem 0.85rem;
  color: var(--fl-ink);
  font-family: var(--fl-body-mono);
  font-size: 0.8rem;
  margin: 0 0.15rem;
  display: inline-block;
  background: var(--fl-white);
}

.fl-inner .page-numbers.current,
.fl-inner .page-numbers:hover {
  background: var(--fl-leaf);
  border-color: var(--fl-leaf);
  color: var(--fl-navy);
}

/* Sidebar widgets */
.fl-inner .sidebar-widget {
  background: var(--fl-white);
  border: 1px solid var(--fl-line);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.flerimo .fl-inner .sidebar-widget .title {
  font-family: var(--fl-body-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(29, 47, 58, 0.45);
  background: none;
  border: none;
  border-bottom: 1px solid var(--fl-line);
  padding: 0 0 0.8rem;
  margin-bottom: 1rem;
}

.fl-inner .sidebar-widget ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.fl-inner .sidebar-widget li {
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--fl-line);
}

.fl-inner .sidebar-widget li:last-child {
  border-bottom: none;
}

/* Search form */
.fl-inner .searchform input[type="text"],
.fl-inner .searchform input[type="search"],
.fl-page-header .searchform input[type="text"] {
  border: 1px solid var(--fl-line);
  border-radius: 2px;
  padding: 0.6rem 0.9rem;
  background: var(--fl-white);
  color: var(--fl-ink);
  font-family: var(--fl-body-sans);
}

.fl-inner .searchform input[type="submit"],
.fl-inner .searchform button {
  background: var(--fl-leaf);
  color: var(--fl-navy);
  border: none;
  border-radius: 2px;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
}

/* Comments */
.fl-inner .comment-body,
.fl-inner .media-body-wrap.card {
  background: var(--fl-white);
  border: 1px solid var(--fl-line);
  border-radius: 4px;
}

.fl-inner .comment-reply-title,
.fl-inner .comments-title {
  font-family: var(--fl-body-serif);
}

.fl-inner .comment-form input[type="text"],
.fl-inner .comment-form input[type="email"],
.fl-inner .comment-form input[type="url"],
.fl-inner .comment-form textarea {
  border: 1px solid var(--fl-line);
  border-radius: 2px;
  padding: 0.7rem 0.9rem;
  width: 100%;
  font-family: var(--fl-body-sans);
}

.fl-inner .comment-form input[type="submit"] {
  background: var(--fl-leaf);
  color: var(--fl-navy);
  border: none;
  border-radius: 2px;
  padding: 0.65rem 1.5rem;
  font-weight: 600;
}

.fl-inner .comment-form input[type="submit"]:hover {
  background: var(--fl-navy);
  color: var(--fl-white);
}

/* 404 / nothing found */
.fl-inner .no-results,
.fl-inner .error-404 {
  background: var(--fl-white);
  border: 1px solid var(--fl-line);
  border-radius: 4px;
  padding: 3rem 2rem;
  text-align: center;
}

/* ---------- ADMIN BAR OFFSET ---------- */

.admin-bar .fl-nav {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .fl-nav {
    top: 46px;
  }
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 991px) {
  .fl-nav .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--fl-line);
    border-radius: 4px;
    margin-top: 0.6rem;
    padding: 0.8rem 1rem;
    box-shadow: 0 12px 32px rgba(29, 47, 58, 0.12);
  }
  .fl-nav .fl-cta > .nav-link {
    margin-left: 0;
    margin-top: 0.6rem;
    text-align: center;
  }
  .fl-nav .fl-navbar-logo,
  .fl-nav .custom-logo {
    height: 62px !important;
  }
  .fl-hero {
    min-height: auto;
    padding-top: 8rem;
    padding-bottom: 4rem;
  }
  .fl-home section {
    padding: 4.5rem 0;
  }
  .fl-page-header {
    padding: 7rem 0 3rem;
  }
}

@media (max-width: 575px) {
  .fl-cta-band {
    padding: 2.5rem 1.2rem;
  }
  .fl-impact-num {
    font-size: 2rem;
  }
  .fl-section-heading,
  .fl-section-heading-lg {
    font-size: 1.7rem;
  }
}

/* ---------- RTL ---------- */

body.rtl .fl-leader-portrait-frame::before {
  left: -16px;
  right: 16px;
}

body.rtl blockquote.fl-leader-quote {
  border-left: none;
  border-right: 2px solid var(--fl-leaf-deep);
  padding-left: 0;
  padding-right: 1.4rem;
}

body.rtl .fl-program-arrow {
  margin-left: 0;
  margin-right: auto;
  transform: scaleX(-1);
}

body.rtl .fl-footer-menu ul {
  padding-left: 0;
  padding-right: 0.9rem;
}

body.rtl .fl-nav .fl-cta > .nav-link {
  margin-left: 0;
  margin-right: 1rem;
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .fl-scroll-cue .fl-line {
    animation: none;
  }
  .fl-plot,
  .fl-involve-card,
  .fl-contact-card,
  .fl-partner-card,
  .fl-nav {
    transition: none;
  }
}