/*
Theme Name: John and Prisca Foundation
Theme URI: https://johnandpriscafoundation.org
Author: John and Prisca Foundation
Author URI: https://johnandpriscafoundation.org
Description: Bespoke theme for the John and Prisca Foundation — health, education and sustainable livelihoods in Malawi. Sticky mega-menu header, Swiper hero with Ken Burns effect, editorial story layouts, donation and reports templates.
Version: 1.8.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jpfoundation
Tags: custom-menu, custom-logo, featured-images, one-column, two-columns
*/

:root {
  --green:#67962E;
  --orange:#F0841F;
  --dark:#363732;
  --light:#f7f7f2;
  --grey:#754515;          /* hero backdrop (brand brown) */
  --footer-grey:#2E2E2E;   /* footer */
  --line:rgba(0,0,0,.12);
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:Inter, Arial, sans-serif;
  color:#222;
  line-height:1.6;
}

img { display:block; }

h1,h2,h3,h4 { margin:0 0 .6rem; line-height:1.15; }
p { margin:0 0 1rem; }

.eyebrow {
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:.75rem;
}

/* ============ HEADER ============ */

header {
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;
  background:white;
  transition:.3s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

header.shrink { padding:.2rem 0; }

.nav {
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.2rem 1rem;
  transition:.3s;
}

.shrink .nav { padding:.6rem 1rem; }

.logo {
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:#222;
}
.logo img, .logo svg {
  height:80px;
  width:auto;
  transition:.3s;
}
.shrink .logo img, .shrink .logo svg { height:36px; }
.logo-word {
  font-size:1.5rem;
  font-weight:800;
  color:var(--green);
}

.menu {
  display:flex;
  gap:.5rem;
  align-items:center;
}

.menu-item { position:relative; }

.menu-btn {
  background:none;
  border:0;
  font:inherit;
  font-size:1rem;
  cursor:pointer;
  padding:.8rem;
  color:#222;
}
.menu-btn:focus { outline:3px solid var(--orange); }

.megamenu {
  position:absolute;
  top:100%;
  left:0;
  width:650px;
  background:white;
  display:none;
  grid-template-columns:1fr 1.2fr;
  gap:1rem;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
  padding:1.5rem;
}
.menu-item.open .megamenu { display:grid; }

.links a {
  display:block;
  padding:.5rem;
  color:#333;
  text-decoration:none;
}
.links a:hover { color:var(--green); }

.description {
  background:#f3f6ed;
  padding:1rem;
  border-left:4px solid var(--green);
}
.description strong {
  display:block;
  margin-bottom:.35rem;
  color:#222;
}

.header-actions {
  display:flex;
  align-items:center;
  gap:.75rem;
}

.btn {
  display:inline-block;
  background:var(--orange);
  color:white;
  padding:.9rem 1.5rem;
  text-decoration:none;
  font-weight:bold;
  border:0;
  font-family:inherit;
  font-size:1rem;
  cursor:pointer;
  transition:background .2s;
}
.btn:hover { background:#d97314; }
.btn:focus { outline:3px solid var(--dark); }

.btn-outline {
  background:transparent;
  color:#222;
  border:2px solid #222;
}
.btn-outline:hover {
  background:#222;
  color:white;
}

.btn-white {
  background:white;
  color:#222;
}
.btn-white:hover { background:var(--light); }

.hamburger {
  display:none;
  background:none;
  border:0;
  font-size:1.6rem;
  cursor:pointer;
  padding:.4rem .6rem;
  color:#222;
}

.mobile-menu {
  display:none;
  background:white;
  border-top:1px solid var(--line);
  padding:.5rem 1rem 1.25rem;
}
.mobile-menu.open { display:block; }
.mobile-menu a {
  display:block;
  padding:.8rem .25rem;
  color:#222;
  text-decoration:none;
  font-weight:500;
  border-bottom:1px solid var(--line);
}
.mobile-menu .btn {
  display:block;
  text-align:center;
  margin-top:1rem;
}

/* ============ HOME HERO (slider) ============ */

.hero {
  padding-top:90px;
  background:var(--grey);
  padding-bottom:3rem;
}

.swiper { height:650px; }

.swiper-slide {
  position:relative;
  overflow:hidden;
}

.slide-bg {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}

.swiper-slide-active .slide-bg {
  animation:zoom 16s ease forwards;
}

@keyframes zoom {
  from { transform:scale(1); }
  to   { transform:scale(1.15); }
}

.overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(40,40,40,.70),
    rgba(40,40,40,.15)
  );
}

.caption {
  position:absolute;
  left:10%;
  top:50%;
  transform:translateY(-50%);
  color:white;
  max-width:550px;
}

.caption h1 { font-size:3.2rem; }

.caption .btn { margin-top:1rem; }

.swiper-pagination-bullet { background:white; opacity:.6; }
.swiper-pagination-bullet-active {
  opacity:1;
  background:var(--orange);
}
.swiper-button-prev,
.swiper-button-next { color:white; }

/* ============ PAGE HERO (inner pages) ============ */

.page-hero {
  padding-top:90px;
  background:var(--grey);
}
.page-hero .banner {
  position:relative;
  height:420px;
  overflow:hidden;
}
.page-hero .banner img {
  width:100%; height:100%;
  object-fit:cover;
}
.page-hero .banner .overlay { position:absolute; inset:0; }
.page-hero .banner .caption {
  max-width:700px;
}
.page-hero .caption h1 { font-size:2.8rem; }
.page-hero .caption p {
  font-size:1.1rem;
  color:rgba(255,255,255,.9);
}

.page-hero.plain {
  padding-bottom:0;
}
.page-hero.plain .plain-inner {
  max-width:1200px;
  margin:auto;
  padding:4rem 1rem 3.5rem;
  color:white;
}
.page-hero.plain .eyebrow { color:#f0d9c0; }
.page-hero.plain h1 { font-size:2.8rem; }
.page-hero.plain p {
  max-width:60ch;
  color:rgba(255,255,255,.9);
  font-size:1.1rem;
  margin-bottom:0;
}

.breadcrumbs {
  font-size:.85rem;
  margin-bottom:1.25rem;
  color:rgba(255,255,255,.75);
}
.breadcrumbs a {
  color:rgba(255,255,255,.75);
  text-decoration:none;
}
.breadcrumbs a:hover { color:white; }

/* ============ SECTIONS ============ */

section {
  max-width:1200px;
  margin:5rem auto;
  padding:0 1rem;
}

.section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2.5rem;
}
.section-head h2 { margin:0; font-size:2rem; }

/* Intro two-column */

.intro-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:4rem;
  align-items:center;
}
.intro-grid h2 { font-size:2.2rem; }
.intro-grid p { color:#444; }
.intro-grid .thumb {
  height:420px;
  overflow:hidden;
}
.intro-grid .thumb img {
  width:100%; height:100%;
  object-fit:cover;
}

/* Stats */

.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.stats-grid.two { grid-template-columns:1fr 1fr; }
.stat {
  background:white;
  padding:1.75rem 1.5rem;
}
.stat b {
  display:block;
  font-size:2rem;
  color:var(--green);
}
.stat span {
  font-size:.85rem;
  color:#666;
}

/* Program blocks (focus area pages) */

.program {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:center;
  padding:3rem 0;
  border-top:1px solid var(--line);
}
.program:last-child { border-bottom:1px solid var(--line); }
.program .thumb {
  height:340px;
  overflow:hidden;
}
.program .thumb img {
  width:100%; height:100%;
  object-fit:cover;
  transition:.5s;
}
.program:hover .thumb img { transform:scale(1.05); }
.program h3 { font-size:1.5rem; }
.program p { color:#444; }
.program ul {
  margin:0 0 1rem;
  padding-left:1.2rem;
  color:#444;
}
.program li { margin-bottom:.4rem; }
.program.flip .thumb { order:2; }

/* Values grid */

.values-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.value {
  background:var(--light);
  padding:2rem 1.75rem;
  border-top:4px solid var(--green);
}
.value h3 { font-size:1.15rem; }
.value p {
  font-size:.95rem;
  color:#555;
  margin:0;
}

/* Timeline — centered, milestones alternate left/right */

.timeline {
  position:relative;
  max-width:900px;
  margin:0 auto;
  border-left:0;
  padding-left:0;
}
.timeline::before {
  content:"";
  position:absolute;
  left:50%;
  top:.4rem;
  bottom:0;
  width:2px;
  background:var(--green);
  transform:translateX(-50%);
}
.milestone {
  position:relative;
  width:50%;
  padding:0 3rem 2.75rem 0;
  text-align:right;
}
.milestone:nth-child(even) {
  margin-left:50%;
  padding:0 0 2.75rem 3rem;
  text-align:left;
}
.milestone::before {
  content:"";
  position:absolute;
  top:.4rem;
  width:14px;
  height:14px;
  background:var(--orange);
  border:3px solid white;
  box-shadow:0 0 0 2px var(--green);
  left:auto;
}
.milestone:nth-child(odd)::before { right:-10px; }
.milestone:nth-child(even)::before { left:-10px; }
.milestone .year {
  font-weight:800;
  color:var(--green);
  letter-spacing:.05em;
}
.milestone h3 { font-size:1.15rem; margin:.25rem 0 .35rem; }
.milestone p {
  color:#555;
  font-size:.95rem;
  margin:0;
  max-width:none;
}
/* Lists inside right-aligned milestones: hug the line, read left */
.milestone ul {
  display:inline-block;
  text-align:left;
}

@media(max-width:800px){
  .timeline { max-width:none; }
  .timeline::before {
    left:.5rem;
    transform:none;
  }
  .milestone,
  .milestone:nth-child(even) {
    width:auto;
    margin-left:0;
    padding:0 0 2.25rem 2.5rem;
    text-align:left;
  }
  .milestone:nth-child(odd)::before,
  .milestone:nth-child(even)::before {
    left:-.05rem;
    right:auto;
  }
}

/* Centered section heading (used above the timeline) */
.section-head.center {
  justify-content:center;
  text-align:center;
}

/* Article (story pages) */

.article-wrap {
  max-width:800px;
}
.article-meta {
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:.75rem;
}
.article-wrap h1 {
  font-size:2.4rem;
  margin-bottom:1rem;
}
.article-lead {
  font-size:1.2rem;
  color:#444;
}
.article-body p { color:#333; }
.article-body h2 {
  font-size:1.5rem;
  margin-top:2.5rem;
}
.article-figure {
  margin:2.5rem 0;
}
.article-figure img {
  width:100%;
  height:460px;
  object-fit:cover;
}
.article-figure figcaption {
  font-size:.85rem;
  color:#777;
  padding-top:.6rem;
  border-bottom:1px solid var(--line);
  padding-bottom:.75rem;
}
blockquote.pull {
  margin:2.5rem 0;
  padding:1.5rem 2rem;
  border-left:4px solid var(--orange);
  background:var(--light);
  font-size:1.25rem;
  font-weight:600;
  color:#333;
}
blockquote.pull cite {
  display:block;
  font-size:.85rem;
  font-weight:400;
  font-style:normal;
  color:#666;
  margin-top:.5rem;
}
.article-share {
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.9rem;
  color:#666;
}

/* Story cards (related stories) */

.story-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.story-card {
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line);
}
.story-card .thumb {
  height:210px;
  overflow:hidden;
}
.story-card img {
  width:100%; height:100%;
  object-fit:cover;
  transition:.5s;
}
.story-card:hover img { transform:scale(1.06); }
.story-card .body { padding:1.25rem; }
.story-card .meta {
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:.35rem;
}
.story-card h3 {
  font-size:1.05rem;
  transition:color .2s;
}
.story-card:hover h3 { color:var(--green); }
.story-card .read-story { margin-top:.25rem; }

.read-story {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.9rem;
  font-weight:700;
  color:var(--orange);
}
.read-story .arrow {
  font-size:1.1rem;
  transition:transform .2s;
  color:var(--orange);
}
.story-card:hover .read-story .arrow { transform:translateX(4px); }

/* Reports */

.report-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
}
.report-card {
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
  border:1px solid var(--line);
  padding:1.75rem;
  transition:box-shadow .2s;
}
.report-card:hover { box-shadow:0 10px 30px rgba(0,0,0,.08); }
.report-card .doc {
  flex-shrink:0;
  width:64px; height:80px;
  background:var(--light);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:var(--green);
  font-size:.8rem;
}
.report-card h3 { font-size:1.15rem; }
.report-card p {
  font-size:.92rem;
  color:#555;
  margin-bottom:.75rem;
}
.report-card .meta {
  font-size:.8rem;
  color:#888;
  margin-bottom:.5rem;
}

/* Donate page */

.donate-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:3.5rem;
  align-items:start;
}
.donate-box {
  border:1px solid var(--line);
  padding:2rem;
}
.donate-box h3 { font-size:1.2rem; }
.freq-toggle {
  display:flex;
  margin:1rem 0 1.25rem;
  border:2px solid var(--dark);
  width:max-content;
}
.freq-toggle button {
  background:transparent;
  border:0;
  font:inherit;
  font-weight:700;
  padding:.7rem 1.5rem;
  cursor:pointer;
  color:var(--dark);
}
.freq-toggle button.selected {
  background:var(--dark);
  color:white;
}
.freq-toggle button:focus { outline:3px solid var(--orange); }

.support-amounts {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:1.25rem 0 1.5rem;
}
.amount {
  border:2px solid var(--line);
  background:transparent;
  color:#222;
  font:inherit;
  font-weight:700;
  padding:.7rem 1.3rem;
  cursor:pointer;
  transition:.2s;
}
.amount:hover, .amount.selected {
  background:var(--orange);
  border-color:var(--orange);
  color:white;
}
.amount:focus { outline:3px solid var(--dark); }

.pay-method {
  border-top:1px solid var(--line);
  padding:1.5rem 0;
}
.pay-method:last-child { border-bottom:1px solid var(--line); }
.pay-method h4 {
  font-size:1rem;
  margin-bottom:.35rem;
}
.pay-method p {
  font-size:.92rem;
  color:#555;
  margin:0;
}
.pay-method code {
  font-family:inherit;
  font-weight:700;
  color:#222;
}

.impact-list { border-top:1px solid var(--line); }
.impact-row {
  display:flex;
  gap:1.25rem;
  align-items:baseline;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line);
}
.impact-row b {
  flex-shrink:0;
  width:110px;
  font-size:1.3rem;
  color:var(--green);
}
.impact-row span {
  color:#555;
  font-size:.95rem;
}

.faq details {
  border-top:1px solid var(--line);
  padding:1rem 0;
}
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary {
  font-weight:700;
  cursor:pointer;
  padding:.25rem 0;
}
.faq summary:focus { outline:3px solid var(--orange); }
.faq p {
  margin:.75rem 0 0;
  color:#555;
  font-size:.95rem;
}

/* CTA band */

.cta-band {
  max-width:none;
  margin:5rem 0 0;
  padding:4.5rem 1rem;
  background:var(--green);
  color:white;
  text-align:center;
}
.cta-band h2 { font-size:2rem; }
.cta-band p {
  color:rgba(255,255,255,.9);
  max-width:55ch;
  margin:0 auto 1.5rem;
}

/* ============ FOOTER ============ */

footer {
  background:var(--footer-grey);
  color:rgba(255,255,255,.8);
  padding:4rem 1rem 0;
  margin-top:5rem;
}
.cta-band + footer { margin-top:0; }
.footer-inner {
  max-width:1200px;
  margin:auto;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.4fr;
  gap:3rem;
  padding-bottom:3rem;
}
footer h4 {
  color:white;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.footer-brand .logo img { height:56px; }
.footer-brand .logo-word { color:white; }
.footer-brand p {
  font-size:.92rem;
  margin-top:1rem;
  max-width:34ch;
}
.footer-links a,
.footer-contact a {
  display:block;
  color:rgba(255,255,255,.8);
  text-decoration:none;
  padding:.3rem 0;
  font-size:.95rem;
}
.footer-links a:hover,
.footer-contact a:hover { color:var(--orange); }
.footer-contact p {
  font-size:.95rem;
  margin:0;
  padding:.3rem 0;
}

.newsletter-form {
  display:flex;
  gap:.5rem;
  margin-top:.5rem;
}
.newsletter-form input {
  flex:1;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  padding:.8rem 1rem;
  color:white;
  font:inherit;
  font-size:.92rem;
}
.newsletter-form input::placeholder { color:rgba(255,255,255,.5); }
.newsletter-form input:focus { outline:3px solid var(--orange); }
.newsletter-form button {
  background:var(--orange);
  color:white;
  border:0;
  padding:.8rem 1.3rem;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.newsletter-note {
  font-size:.8rem;
  color:rgba(255,255,255,.5);
  margin-top:.6rem;
}

.social {
  display:flex;
  gap:.6rem;
  margin-top:1.25rem;
}
.social a {
  width:42px; height:42px;
  border:1px solid rgba(255,255,255,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  text-decoration:none;
  transition:.2s;
}
.social a:hover {
  background:var(--green);
  border-color:var(--green);
}
.social svg { width:18px; height:18px; fill:currentColor; }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.15);
  padding:1.5rem 0;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.85rem;
  color:rgba(255,255,255,.55);
}
.footer-bottom a {
  color:rgba(255,255,255,.55);
  text-decoration:none;
  margin-left:1.5rem;
}
.footer-bottom a:hover { color:white; }

/* ============ RESPONSIVE ============ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation:none !important;
    transition:none !important;
  }
}

@media(max-width:980px){
  .menu, .header-actions .btn-outline { display:none; }
  .hamburger { display:block; }
  .intro-grid, .stories-grid, .support-inner,
  .donate-grid, .program { grid-template-columns:1fr; }
  .program { gap:1.5rem; }
  .program.flip .thumb { order:0; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .story-cards, .values-grid { grid-template-columns:1fr; }
  .report-list { grid-template-columns:1fr; }
  .support .thumb { height:320px; order:-1; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media(max-width:800px){
  .focus-grid { grid-template-columns:1fr; }
  .caption h1 { font-size:2rem; }
  .page-hero .caption h1, .page-hero.plain h1 { font-size:2rem; }
  .article-wrap h1 { font-size:1.8rem; }
  .megamenu { width:90vw; }
  .swiper { height:520px; }
  .page-hero .banner { height:320px; }
}

@media(max-width:620px){
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .stats-grid { grid-template-columns:1fr; }
  .section-head {
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }
}

/* Homepage-only bits kept for index.html */

.about-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:4rem;
  align-items:center;
}
.about h2 { font-size:2.2rem; }
.about p { color:#444; }
.about .btn { margin-top:.5rem; }
.about-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.focus-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.focus {
  position:relative;
  height:350px;
  overflow:hidden;
  display:block;
  text-decoration:none;
}
.focus img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.5s;
}
.focus:hover img { transform:scale(1.08); }
.focus-content {
  position:absolute;
  bottom:0;
  color:white;
  width:100%;
  padding:2rem;
  background:linear-gradient(
    transparent,
    rgba(0,0,0,.8)
  );
}
.arrow {
  color:var(--orange);
  font-size:1.5rem;
}

.stories-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:3rem;
}
.story-featured {
  display:block;
  text-decoration:none;
  color:inherit;
}
.story-featured .thumb {
  position:relative;
  height:420px;
  overflow:hidden;
  margin-bottom:1.25rem;
}
.story-featured img {
  width:100%; height:100%;
  object-fit:cover;
  transition:.5s;
}
.story-featured:hover img { transform:scale(1.06); }
.story-tag {
  position:absolute;
  top:1rem; left:1rem;
  background:white;
  color:var(--green);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.45rem .85rem;
}
.story-featured h3 { font-size:1.6rem; }
.story-featured p { color:#555; }
.story-list { display:flex; flex-direction:column; }
.story-row {
  display:block;
  text-decoration:none;
  color:inherit;
  padding:1.4rem 0;
  border-top:1px solid var(--line);
}
.story-row:last-child { border-bottom:1px solid var(--line); }
.story-row .meta {
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:.35rem;
}
.story-row h3 { font-size:1.2rem; transition:color .2s; }
.story-row:hover h3 { color:var(--green); }
.story-row p {
  font-size:.92rem;
  color:#555;
  margin-bottom:.5rem;
}
.story-row:hover .read-story .arrow,
.story-featured:hover .read-story .arrow { transform:translateX(4px); }

.support {
  max-width:none;
  margin:5rem 0;
  padding:5rem 1rem;
  background:var(--green);
  color:white;
}
.support-inner {
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.support .thumb { height:460px; overflow:hidden; }
.support .thumb img { width:100%; height:100%; object-fit:cover; }
.support .eyebrow { color:#f0d9c0; }
.support h2 { font-size:2.2rem; }
.support p { color:rgba(255,255,255,.85); }

/* ============ WORDPRESS CORE COMPAT ============ */

.screen-reader-text {
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; word-wrap:normal !important;
}
.screen-reader-text:focus {
  background:#fff; clip:auto !important; clip-path:none;
  color:#222; display:block; font-size:1rem; height:auto;
  left:5px; top:5px; line-height:normal; padding:1rem 1.5rem;
  text-decoration:none; width:auto; z-index:100000;
  outline:3px solid var(--orange);
}
.skip-link { position:absolute; }

.entry-content img,
.entry-content figure { max-width:100%; height:auto; }
.entry-content a:not(.btn):not(.read-story):not(.story-card):not(.focus) {
  color:var(--green); font-weight:700; text-decoration:none;
}
.entry-content a:not(.btn):hover { text-decoration:underline; }
.entry-content ul, .entry-content ol { color:#444; }
.alignleft { float:left; margin:0 1.5rem 1rem 0; }
.alignright { float:right; margin:0 0 1rem 1.5rem; }
.aligncenter { margin-left:auto; margin-right:auto; }
.wp-caption { max-width:100%; }
.wp-caption-text {
  font-size:.85rem; color:#777; padding-top:.5rem;
}
.sticky { /* required class */ }
.bypostauthor { /* required class */ }
.gallery-caption { font-size:.85rem; color:#777; }

/* Custom logo (WP outputs a.custom-logo-link > img.custom-logo) */
.custom-logo-link {
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.custom-logo {
  height:80px;
  width:auto;
  transition:.3s;
}
.shrink .custom-logo { height:36px; }
footer .custom-logo { height:56px; }

/* Hero as full-bleed div (no inline overrides needed) */
.hero {
  max-width:none;
  margin:0;
  padding-left:0;
  padding-right:0;
}

/* Archive grid + pagination */
.archive-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
@media(max-width:980px){ .archive-grid { grid-template-columns:1fr; } }
.pagination-wrap { margin-top:3rem; }
.pagination-wrap .nav-links {
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.pagination-wrap .page-numbers {
  display:inline-block;
  padding:.6rem 1rem;
  border:2px solid var(--line);
  color:#222; text-decoration:none; font-weight:700;
}
.pagination-wrap .page-numbers.current,
.pagination-wrap .page-numbers:hover {
  background:var(--orange); border-color:var(--orange); color:white;
}

/* Search form */
.jpf-search-form { display:flex; gap:.5rem; max-width:480px; }
.jpf-search-form input[type=search] {
  flex:1; padding:.8rem 1rem; border:1px solid var(--line);
  font:inherit; font-size:.95rem;
}
.jpf-search-form input[type=search]:focus { outline:3px solid var(--orange); }

/* Post password form / misc */
.post-password-form input[type=password] {
  padding:.7rem 1rem; border:1px solid var(--line); font:inherit;
}

/* ============ PARTNERS MARQUEE ============ */

.partners {
  max-width:none;
  margin:0;
  padding:3.5rem 0 3.75rem;
  background:var(--light);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.partners .partners-head {
  max-width:1200px;
  margin:0 auto 2.25rem;
  padding:0 1rem;
  text-align:center;
}
.partners .partners-head .eyebrow { margin-bottom:.35rem; }
.partners .partners-head h2 { font-size:1.6rem; }

.marquee {
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display:flex;
  align-items:center;
  gap:5rem;
  width:max-content;
  padding:0 2.5rem;
  animation:jpf-marquee 35s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state:paused; }

@keyframes jpf-marquee {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

.partner {
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
  text-decoration:none;
}
.partner img {
  height:56px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.65;
  transition:.3s;
}
.partner:hover img {
  filter:none;
  opacity:1;
}
.partner .partner-name {
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:.02em;
  color:#9aa08f;
  white-space:nowrap;
  transition:color .3s;
}
.partner:hover .partner-name { color:var(--green); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .marquee-track[data-duplicate] { display:none; }
}

@media(max-width:800px){
  .partner img { height:42px; }
  .marquee-track { gap:3rem; }
}

/* ============ COOKIE CONSENT ============ */

.cookie-banner {
  position:fixed;
  left:1.25rem;
  bottom:1.25rem;
  z-index:2000;
  width:min(420px, calc(100vw - 2.5rem));
  background:white;
  border-top:4px solid var(--orange);
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  padding:1.5rem 1.5rem 1.4rem;
  opacity:0;
  transform:translateY(20px);
  visibility:hidden;
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.cookie-banner.visible {
  opacity:1;
  transform:translateY(0);
  visibility:visible;
}
.cookie-banner .cookie-head {
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:.6rem;
}
.cookie-banner .cookie-head svg {
  width:38px; height:38px;
  flex-shrink:0;
}
.cookie-banner h3 {
  margin:0;
  font-size:1.1rem;
}
.cookie-banner p {
  font-size:.9rem;
  color:#555;
  margin:0 0 1.1rem;
}
.cookie-banner p a {
  color:var(--green);
  font-weight:700;
  text-decoration:none;
}
.cookie-banner p a:hover { text-decoration:underline; }
.cookie-actions {
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.cookie-actions .btn {
  padding:.7rem 1.2rem;
  font-size:.92rem;
}
.cookie-actions .btn-outline { border-width:2px; }

/* Floating cookie icon (reopen preferences) */
.cookie-fab {
  position:fixed;
  left:1.25rem;
  bottom:1.25rem;
  z-index:1999;
  width:52px; height:52px;
  border-radius:50%;
  background:white;
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  opacity:0;
  transform:scale(.5);
  visibility:hidden;
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.cookie-fab.visible {
  opacity:1;
  transform:scale(1);
  visibility:visible;
}
.cookie-fab:hover { transform:scale(1.08); }
.cookie-fab:focus { outline:3px solid var(--orange); }
.cookie-fab svg { width:30px; height:30px; }

/* ============ COOKIE POLICY PAGE ============ */

.cookie-table {
  width:100%;
  border-collapse:collapse;
  margin:1.5rem 0 2.5rem;
  font-size:.92rem;
}
.cookie-table th {
  background:var(--dark);
  color:white;
  text-align:left;
  padding:.85rem 1rem;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.cookie-table td {
  padding:.85rem 1rem;
  border-bottom:1px solid var(--line);
  color:#444;
  vertical-align:top;
}
.cookie-table tr:nth-child(even) td { background:var(--light); }
.cookie-table code {
  font-family:inherit;
  font-weight:700;
  color:#222;
  background:rgba(103,150,46,.12);
  padding:.1rem .45rem;
}
.cookie-callout {
  background:#f3f6ed;
  border-left:4px solid var(--green);
  padding:1.25rem 1.5rem;
  margin:2rem 0;
}
.cookie-callout p { margin:0; color:#3a4433; }

/* ============ FOUNDERS STORY (Our Story) — approved ============ */

.founders-story {
  display:grid;
  grid-template-columns:240px 1fr 240px;
  gap:50px;
  align-items:center;
  margin-top:50px;
}
.founder { text-align:center; }
.founder img {
  width:220px;
  height:220px;
  object-fit:cover;
  border-radius:0px;
  box-shadow:0 15px 35px rgba(0,0,0,.12);
  transition:.35s;
  margin:0 auto;
}
.founder img:hover { transform:translateY(-6px); }
.founder h3 {
  margin:18px 0 5px;
  color:var(--green);
}
.founder span {
  color:#777;
  font-size:.95rem;
}
.story-text {
  background:#fff;
  padding:45px;
  border-radius:0px;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
}
.story-text p {
  margin:0;
  font-size:1.1rem;
  line-height:2;
  color:#444;
  text-align:justify;
}
.story-text p::first-letter {
  float:left;
  font-size:4rem;
  line-height:.8;
  padding-right:10px;
  color:var(--green);
  font-weight:bold;
}

.foundation-list {
  margin:.5rem 0 0;
  padding-left:1.2rem;
  color:#555;
  font-size:.95rem;
}
.foundation-list li { margin-bottom:.3rem; }

@media (max-width: 900px){
  .founders-story {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "john prisca"
      "story story";
    gap:20px;
    align-items:start;
  }
  .founder:first-child { grid-area:john; }
  .founder:last-child { grid-area:prisca; margin-top:0; }
  .story-text { grid-area:story; padding:30px; margin:0; }
  .founder { text-align:center; }
  .founder img {
    width:100%;
    max-width:160px;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:20px;
    display:block;
    margin:0 auto;
  }
  .story-text p {
    font-size:1rem;
    line-height:1.8;
    text-align:left;
  }
  .story-text p::first-letter { font-size:3rem; }
}


/* ============ MOBILE MENU ACCORDION ============ */

.m-group { border-bottom:1px solid var(--line); }
.m-group-btn {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:none;
  border:0;
  font:inherit;
  font-weight:500;
  font-size:1rem;
  color:#222;
  padding:.8rem .25rem;
  cursor:pointer;
  text-align:left;
}
.m-group-btn:focus { outline:3px solid var(--orange); }
.m-group-btn .caret {
  font-size:.65rem;
  transition:transform .25s;
}
.m-group.open .m-group-btn .caret { transform:rotate(180deg); }
.m-sub { display:none; padding:0 0 .5rem .9rem; }
.m-group.open .m-sub { display:block; }
.mobile-menu .m-sub a {
  border-bottom:0;
  padding:.55rem .25rem;
  color:#444;
  font-weight:400;
}
.mobile-menu .m-sub a:hover { color:var(--green); }

/* ============ VACANCIES ============ */

.vacancy-grid {
  display:grid;
  grid-template-columns:1.6fr .9fr;
  gap:3.5rem;
  align-items:start;
}
.vacancy-main { min-width:0; }

.vacancy-card {
  border:1px solid var(--line);
  padding:1.75rem;
  margin-bottom:1.25rem;
  transition:box-shadow .2s;
}
.vacancy-card:hover { box-shadow:0 10px 30px rgba(0,0,0,.08); }
.vacancy-card h3 { font-size:1.3rem; margin:.35rem 0 .5rem; }
.vacancy-card h3 a {
  color:#222;
  text-decoration:none;
  transition:color .2s;
}
.vacancy-card h3 a:hover { color:var(--green); }
.vacancy-card p {
  font-size:.95rem;
  color:#555;
  margin-bottom:1rem;
}
.vacancy-badges {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.badge {
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.35rem .75rem;
  background:var(--light);
  color:#555;
  border:1px solid var(--line);
}
.badge-type {
  background:rgba(103,150,46,.12);
  color:var(--green);
  border-color:transparent;
}
.badge-open {
  background:var(--green);
  color:white;
  border-color:transparent;
}
.badge-closed {
  background:#999;
  color:white;
  border-color:transparent;
}
.vacancy-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:1rem;
}
.vacancy-deadline {
  font-size:.88rem;
  color:#666;
}
.vacancy-deadline b { color:var(--orange); }

.vacancy-empty {
  border:2px dashed var(--line);
  padding:3rem 2.5rem;
  text-align:center;
  background:var(--light);
}
.vacancy-empty h3 { font-size:1.3rem; }
.vacancy-empty p {
  color:#555;
  max-width:48ch;
  margin:0 auto 1rem;
}

.spec-app {
  background:var(--light);
  border-top:4px solid var(--orange);
  padding:2rem 1.75rem;
  position:sticky;
  top:120px;
}
.spec-app h3 { font-size:1.25rem; }
.spec-app p {
  font-size:.95rem;
  color:#555;
}
.spec-app ol {
  padding-left:1.2rem;
  margin:1rem 0 1.5rem;
  color:#444;
  font-size:.92rem;
}
.spec-app ol li { margin-bottom:.8rem; }
.spec-app ol a {
  color:var(--green);
  font-weight:700;
  text-decoration:none;
}
.spec-app .btn {
  display:block;
  text-align:center;
  font-size:.92rem;
  padding:.8rem 1.2rem;
}
.spec-note {
  font-size:.8rem !important;
  color:#888 !important;
  margin:1rem 0 0;
}

.vacancy-side { min-width:0; }
.vacancy-meta-panel {
  border:1px solid var(--line);
  padding:1.75rem;
  position:sticky;
  top:120px;
}
.vacancy-meta-panel h3 {
  font-size:1.1rem;
  margin-bottom:1rem;
}
.vm-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.7rem 0;
  border-top:1px solid var(--line);
  font-size:.92rem;
}
.vm-label {
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#888;
}
.vm-row a {
  color:var(--green);
  font-weight:700;
  text-decoration:none;
  word-break:break-all;
}
.vacancy-apply {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:2.5rem;
  padding-top:1.75rem;
  border-top:1px solid var(--line);
}
.vacancy-closed-note {
  font-size:.85rem;
  color:#a33;
  margin:1rem 0 0;
}

@media(max-width:980px){
  .vacancy-grid { grid-template-columns:1fr; }
  .spec-app, .vacancy-meta-panel { position:static; }
}

/* ============ RESPONSIVE OVERRIDES (must stay last in this file) ============
   The homepage-only rules above are declared after the main media queries,
   which defeated the mobile stacking at equal specificity. These final
   overrides restore correct behaviour on small screens. */

@media(max-width:980px){
  .about-grid,
  .stories-grid,
  .support-inner { grid-template-columns:1fr; }
  .support .thumb { height:320px; order:-1; }
}

@media(max-width:800px){
  .focus-grid { grid-template-columns:1fr; }
  .focus { height:300px; }
  .caption h1 { font-size:2rem; }
}

@media(max-width:620px){
  .about-stats { grid-template-columns:1fr; }
}

/* ============ HEADINGS: TITLE CASE SITE-WIDE ============ */

h1, h2, h3, h4, h5, h6 { text-transform:capitalize; }