/* 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 section: portrait photo beside the details (source photos are small portraits) */
.jknf-campaign-card { display:grid; grid-template-columns:clamp(140px,36%,240px) minmax(0,1fr); }
.jknf-campaign-photo { min-height:100%; }
@media (max-width:520px) {
  .jknf-campaign-card { grid-template-columns:1fr; }
  .jknf-campaign-photo { aspect-ratio:4/3; }
}
/* 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; } }

/* 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:#FAF8F3; 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 */
@media (min-width:1600px) {
  [style*="max-width:1180px"], [style*="max-width: 1180px"] { max-width:1320px !important; }
}
@media (min-width:2200px) {
  [style*="max-width:1180px"], [style*="max-width: 1180px"] { max-width:1480px !important; }
}