/* Shared responsive rules for every JKNF page (phone, tablet, laptop, large screens) */

img { max-width:100%; }

/* Form fields: never wider than their column (long <option> text used to push phones sideways) */
form > label, form > div { min-width:0; }
select, input, textarea { min-width:0; max-width:100%; }
select { width:100%; }

/* Homepage hero: fill the whole screen below the header; the active-campaigns band follows it */
.jknf-hero { min-height:calc(100vh - 112px) !important; min-height:calc(100svh - 112px) !important; }
@media (max-width:960px) {
  .jknf-hero { min-height:calc(100vh - 87px) !important; min-height:calc(100svh - 87px) !important; }
}

/* Active campaigns: pulsing green dot */
.jknf-live-dot { position:relative; width:9px; height:9px; border-radius:50%; background:#2FD06B; box-shadow:0 0 8px 1px rgba(47,208,107,0.85); flex:none; }
.jknf-live-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:#2FD06B; animation:jknf-live-pulse 1.8s ease-out infinite; }
@keyframes jknf-live-pulse { 0% { transform:scale(1); opacity:0.7; } 100% { transform:scale(3); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .jknf-live-dot::after { animation:none; } }

/* Active campaigns: name, city and impact sit in fixed columns so every row lines up */
.jknf-camp-line { display:grid; grid-template-columns:minmax(0,190px) minmax(0,120px) minmax(0,190px) minmax(0,108px) auto; align-items:baseline; column-gap:24px; margin-top:2px; }
.jknf-camp-count { font-size:14px; color:rgba(15,42,92,0.68); white-space:nowrap; }
.jknf-camp-pct { display:inline-flex; align-items:center; gap:10px; font-size:14px; color:rgba(15,42,92,0.68); white-space:nowrap; }
.jknf-camp-bar { flex:none; display:inline-block; width:60px; height:5px; border-radius:3px; background:rgba(15,42,92,0.1); overflow:hidden; }
.jknf-camp-bar > span { display:block; height:100%; border-radius:3px; background:#C9A14A; }
@media (max-width:1100px) { .jknf-camp-line { display:flex; flex-wrap:wrap; gap:2px 20px; } .jknf-camp-impact:empty, .jknf-camp-count:empty, .jknf-camp-pct:empty { display:none; } }

/* Programme status: "Currently active" / "No upcoming campaign" badges; inactive cards show a grey image */
.jknf-badge { display:inline-flex; align-items:center; gap:9px; align-self:flex-start; padding:7px 12px; border:1px solid rgba(47,160,90,0.55); border-radius:2px; font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:#1E7A46; background:#FFFFFF; }
.jknf-badge .jknf-live-dot { width:7px; height:7px; }
.jknf-badge-off { border-color:rgba(15,42,92,0.2); color:rgba(15,42,92,0.62); }
.jknf-img-off { filter:grayscale(1); opacity:0.85; }

/* Donate page programme cards: when three to a row leaves one card alone on the last row, centre it */
@media (min-width:1045px) { .jknf-prog-grid > article:last-child:nth-child(3n+1) { grid-column:2; } }

/* About: Board of Trustees in rows of three (two on small phones) */
.jknf-trustees { display:grid; grid-template-columns:repeat(3, minmax(0,230px)); justify-content:center; gap:40px 28px; }
@media (max-width:480px) { .jknf-trustees { grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 20px; } }

/* Compact menu for phones and tablets */
.jknf-menu { display:none; }
.jknf-menu summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:10px 0; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#0F2A5C; }
.jknf-menu summary::-webkit-details-marker { display:none; }
.jknf-menu-icon { position:relative; width:20px; height:1px; background:#0F2A5C; box-shadow:0 -6px 0 #0F2A5C, 0 6px 0 #0F2A5C; }
.jknf-menu[open] .jknf-menu-icon { background:transparent; box-shadow:none; }
.jknf-menu[open] .jknf-menu-icon::before,
.jknf-menu[open] .jknf-menu-icon::after { content:""; position:absolute; left:0; top:0; width:20px; height:1px; background:#0F2A5C; transform:rotate(45deg); }
.jknf-menu[open] .jknf-menu-icon::after { transform:rotate(-45deg); }
.jknf-menu .jknf-menu-close { display:none; }
.jknf-menu[open] .jknf-menu-open { display:none; }
.jknf-menu[open] .jknf-menu-close { display:inline; }
.jknf-menu nav { position:absolute; left:0; right:0; top:100%; display:flex; flex-direction:column; padding:4px clamp(20px,4vw,40px) 28px; background:#FFFFFF; border-bottom:1px solid rgba(15,42,92,0.12); box-shadow:0 18px 30px -24px rgba(15,42,92,0.35); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; }
.jknf-menu nav a { padding:15px 0; border-top:1px solid rgba(15,42,92,0.08); }
.jknf-menu nav a:first-child { border-top:0; }
.jknf-menu nav a:last-child { margin-top:18px; align-self:flex-start; }

@media (max-width:960px) {
  .jknf-nav { display:none !important; }
  .jknf-menu { display:block; }
  header > div { flex-wrap:nowrap !important; padding-top:12px !important; padding-bottom:12px !important; }
  header > div > a img { width:124px !important; }
}

/* Large screens: let the content column breathe instead of staying at laptop width */
/* (hero text boxes are 80px wider because of their side padding, so their text lines up with the sections below) */
@media (min-width:1600px) {
  [style*="max-width:1180px"], [style*="max-width: 1180px"] { max-width:1320px !important; }
  [style*="max-width:1260px"], [style*="max-width: 1260px"] { max-width:1400px !important; }
}
@media (min-width:2200px) {
  [style*="max-width:1180px"], [style*="max-width: 1180px"] { max-width:1480px !important; }
  [style*="max-width:1260px"], [style*="max-width: 1260px"] { max-width:1560px !important; }
}