/* === Theme variables === */
:root{
  --olive:#565a36;
  --red:#c41a2f;
  --yellow:#e6b400;
  --bg:#0b0f14;
  --bg2:#121823;
  --text:#e6edf3;
  --muted:#a5adba;
  --card:#0f1622;
  --border:#1f2630;
  --paper:#f4f0e3;
}
[data-theme="light"]{
  --bg:#f7f8fb;
  --bg2:#ffffff;
  --text:#0f1220;
  --muted:#475569;
  --card:#ffffff;
  --border:#e5e7eb;
  --paper:#fffaf0;
}

/* === Base === */
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;}
a{color:var(--yellow);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
.muted{color:var(--muted)}
.section{padding:24px 16px}

/* Header / nav */
header.nav{position:sticky;top:0;z-index:3000;background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,0));backdrop-filter:saturate(150%) blur(6px);}
.nav-inner{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg2);position:relative;z-index:3001}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.5px;
  color:var(--text); text-decoration:none;
}
.brand:visited{ color:var(--text); }         /* beat global link color */
.brand:hover{ text-decoration:none; opacity:.9; }
.brand:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }
.brand img{ height:34px; width:34px; border-radius:8px; }
nav.links{display:flex;gap:14px;flex-wrap:wrap}
nav.links a{padding:8px 10px;border-radius:10px;color:var(--text);border:1px solid transparent}
nav.links a.active,nav.links a:hover{border-color:var(--border);background:var(--card)}
.spacer{flex:1}
#themeToggle{position:relative;z-index:3002;pointer-events:auto;cursor:pointer}

/* Light mode newsletter tune */
[data-theme="light"] .issue-card{background:#fff;border-color:#e5e7eb}
[data-theme="light"] .issue-card .issue-body{color:#0f1220}
[data-theme="light"] .issue-card .muted{color:#475569}
/* pad the inside so the month/cover text isn’t hugging the rounded corner */
.issue-card .issue-body { padding: 16px; }

/* make header bar look right in light mode (same as other pages) */
[data-theme="light"] .nav-inner{
  background: var(--bg2);
  border-bottom-color: var(--border);
}

/* Roster */
.roster-controls{display:flex;gap:12px;align-items:center;margin:6px 0 14px}
#rosterSearch{flex:1;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text)}
details.section-card{border:1px solid var(--border);border-radius:14px;margin-bottom:14px;background:var(--card);overflow:hidden}
details.section-card summary{list-style:none;cursor:pointer;padding:14px 14px 14px 46px;position:relative;font-weight:700;display:flex;align-items:center;justify-content:space-between;border-left:6px solid var(--accent,var(--olive))}
details.section-card[open] summary{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
details.section-card summary::-webkit-details-marker{display:none}
.section-count{font-weight:600;color:var(--muted)}
.member-list{margin:0;padding:10px 16px 16px;list-style:none;display:grid;gap:8px}
.member-list li{display:grid;grid-template-columns:220px 1fr;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg2)}
.member-left{display:flex;align-items:center;gap:10px}
.member-right{display:flex;align-items:center;gap:8px;justify-content:flex-end;white-space:nowrap}
.member-name{font-weight:600}
.role-pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--text);background:rgba(255,255,255,.03)}
.tag{display:inline-block;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;margin-left:6px;border:1px solid var(--border)}
.tag.loa{background:rgba(230,180,0,.12);color:#e6b400;border-color:rgba(230,180,0,.3)}
.tag.vacant{background:rgba(196,26,47,.12);color:#ff6b7a;border-color:rgba(196,26,47,.35)}
@media (max-width:700px){
  .member-list li{grid-template-columns:1fr}
  .member-right{justify-content:flex-start}
}

/* Donations */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.kpi .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.kpi .value{font-size:20px;font-weight:800;margin-top:4px}
.progress-wrap{margin-top:12px}
.progress-track{height:12px;background:#0e141c;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--olive),var(--yellow));transition:width .4s ease}
.progress-meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.progress-meta .pct{font-weight:700}
.progress-meta .updated{color:var(--muted);font-size:12px}
.over-goal{color:#7ee787;font-weight:700}
.under-goal{color:#ff6b7a;font-weight:700}

/* --- Newsletter: make issue-card behave like a normal .card --- */
.issue-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;              /* gives the top line breathing room */
  overflow: hidden;
}
/* Your markup already puts content inside .issue-body.
   We zero its padding so we don't double-pad after adding padding to the card. */
.issue-card .issue-body{ padding: 0; }
.issue-card img{ display:block; width:100%; height:auto; border-radius:12px; }
.issue-actions{ display:flex; gap:8px; margin-top:10px; }
/* Archive grid spacing (keeps cards consistent with other pages) */
.archive-list{ display:grid; grid-template-columns:1fr; gap:14px; }
/* Light mode match */
[data-theme="light"] .issue-card{
  background: #ffffff;
  border-color: #e5e7eb;
}
[data-theme="light"] .issue-card .issue-body{ color: #0f1220; }
[data-theme="light"] .issue-card .muted{ color: #475569; }

/* Footer (same look as Home) */
footer{
  border-top:1px solid var(--border);
  background:var(--bg2);
  margin-top:40px;
}
.footer-inner{
  display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
  padding:16px;
}

/* Newsletter card spacing (prevents text hugging rounded corners) */
.issue-card{border-radius:12px;overflow:hidden}
.issue-card img{
  display:block;width:100%;height:auto;
  border-bottom:1px solid var(--border);
}
.issue-card .issue-body{padding:16px}
.issue-card .kicker{
  display:inline-block;margin-bottom:4px;
  font-weight:800;letter-spacing:1px;color:var(--muted);
}

/* Newsletter thumbs */
.issue-card.thumb{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.issue-card.thumb img{
  width:160px;
  height:120px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--border);
  flex-shrink:0;
}
.issue-card.thumb .issue-body{
  padding:0; /* we already pad the card */
}

/* ===== Buttons — single source of truth ===== */
button { font: inherit; }

.btn {
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:0;
  font-weight:600;
  background:var(--yellow);
  color:#111;
  cursor:pointer;
}

.btn-ghost {
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px;                /* same on all pages */
  border-radius:12px;
  font-weight:600;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
  line-height:1;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover { background:var(--card); }
.btn-ghost:focus { outline:2px solid var(--yellow); outline-offset:2px; }

/* Header tweak so the toggle matches nav sizing everywhere */
.nav-inner #themeToggle { padding:8px 12px; border-radius:12px; }

/* Visually-hidden utility for accessibility */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* === Mobile nav (refined) === */
.nav-toggle{ display:none; }

@media (max-width: 900px){
  .nav-toggle{
    display:inline-flex;
    align-items:center; justify-content:center;
    width:42px; height:38px;
    padding:0;
    border-radius:10px;
    border:1px solid var(--border);
    background:transparent;
    color:inherit;
    cursor:pointer;
    transition: background .15s ease, border-color .15s ease;
  }
  .nav-toggle:hover{ background:var(--card); }

  /* Hamburger icon (3 bars) */
  .nav-toggle .bars{
    position:relative; display:block;
    width:22px; height:2px; background:var(--text);
    transition: background .2s ease;
  }
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{
    content:""; position:absolute; left:0; right:0;
    height:2px; background:var(--text);
    transition: transform .24s ease, top .24s ease, opacity .2s ease;
  }
  .nav-toggle .bars::before{ top:-7px; }
  .nav-toggle .bars::after { top: 7px; }

  /* X state */
  .nav-toggle.open .bars { background:transparent; }
  .nav-toggle.open .bars::before{ top:0; transform:rotate(45deg); }
  .nav-toggle.open .bars::after { top:0; transform:rotate(-45deg); }

  /* Dropdown panel */
  .nav-inner{ position:relative; }
  nav.links{
    position:absolute; left:16px; right:16px; top:100%;
    display:flex;                 /* FIX: use flex so flex-direction works */
    flex-direction:column; 
    flex-wrap:nowrap; 
    gap:8px;
    padding:10px;
    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:12px;
    z-index:3002;

    /* Start hidden but animatable */
    opacity:0; transform:translateY(6px);
    visibility:hidden; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  nav.links.open{
    opacity:1; transform:translateY(0);
    visibility:visible; pointer-events:auto;
    transition: opacity .18s ease, transform .18s ease;
  }

  /* Link styling in the panel */
  nav.links a{
    display:block;               /* FIX: block anchors so they stack cleanly */
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--card);
  }

  .spacer{ display:none; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .nav-toggle .bars::before,
  .nav-toggle .bars::after,
  nav.links{ transition:none !important; }
}

/* === Desktop reset (force normal top nav) === */
@media (min-width: 901px){
  .nav-toggle{ display:none; }
  .spacer{ display:flex; }

  .nav-inner{ position:relative; }

  nav.links{
    position:static;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:14px;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    opacity:1;
    transform:none;
    visibility:visible;
    pointer-events:auto;
  }

  nav.links a{
    padding:8px 10px;
    border:1px solid transparent;   /* hover/active still show your subtle border */
    background:transparent;
  }
}