/* kofc-portal stylesheet — implements DESIGN.md. Read that file before editing.
   Hard rules enforced here: gold never body text on white; 48px touch targets
   on member pages; light mode only; 150ms transitions max. */

/* ---- Self-hosted fonts (no third-party requests on member pages) ---- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/sourcesans3-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Official KofC palette (Branding/graphics/color_spec.pdf) */
  --navy: #112866;
  --gold: #F7B718;
  --red: #CB0E0E;
  --blue: #0077D9;
  /* Extensions per DESIGN.md */
  --success: #1E7A3C;
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --ink: #1A2033;
  --ink-muted: #5A6178;
  --line: #DDE1EA;
  --navy-hover: #0C1D4D;
  --gold-deep: #B07C00;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-card: 0 1px 3px rgba(17,40,102,.08), 0 4px 16px rgba(17,40,102,.06);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--blue); }
h1, h2, h3, caption { font-family: var(--font-display); color: var(--navy); line-height: 1.2; }
h1 { font-size: 32px; font-weight: 700; }
h2 { font-size: 28px; font-weight: 600; }
h3 { font-size: 22px; font-weight: 600; }

/* ---- Header band: the trust signal, on every page ---- */
.band {
  background: var(--navy);
  border-bottom: 4px solid var(--gold);
  color: #fff;
  padding: var(--sp-4) var(--sp-6);
}
.band-inner {
  max-width: 640px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
}
.band-inner.wide { max-width: 1100px; }
.band-inner.review { max-width: 1600px; }
.band img { width: 48px; height: 48px; flex: none; }
.band .org { font-size: 17px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
.band .council { font-size: 14px; color: #C9D2EC; }
.band a { color: #fff; text-decoration: none; }

/* Signed-in indicator, upper-right of the header band (members and admin) */
.band-user { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); font-size: 14px; color: #C9D2EC; }
.band-user .name { color: #fff; font-weight: 700; }
.band-user form { margin: 0; }
/* Admin-only crossover link back to the console from member-facing pages. */
.band a.band-link {
  color: #fff; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap;
}
.band a.band-link:hover { text-decoration-thickness: 2px; }
.band a.band-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.band-signout {
  font: inherit; font-weight: 600; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,.5);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.band-signout:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.band-signout:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 600px) {
  .band-inner { flex-wrap: wrap; }
  .band-user { margin-left: 0; width: 100%; justify-content: space-between; }
}

main { width: 100%; max-width: 640px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-12); flex: 1; }
main.wide { max-width: 1100px; }
/* Review page: near-full-width so the document reads large. Slim side gutters. */
main.review { max-width: 1600px; padding: var(--sp-6) var(--sp-4) var(--sp-8); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
}

.event-title { font-size: clamp(26px, 6vw, 36px); margin-bottom: var(--sp-3); }
.event-when { color: var(--ink-muted); font-size: 16px; margin: var(--sp-2) 0 var(--sp-4); }
.event-blurb { margin-bottom: var(--sp-4); }

/* ---- Buttons: >=48px, gold focus ring ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 18px; font-weight: 600;
  min-height: 48px; padding: 0 var(--sp-6);
  border-radius: var(--radius-md); border: 2px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-hover); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: rgba(17,40,102,.06); }
.btn-danger { background: var(--red); color: #fff; }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* ---- Attending choice: big stacked toggles, not radio circles ---- */
.choice { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.choice input[type=radio] { position: absolute; opacity: 0; width: 0; }
.choice label {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--sp-2) var(--sp-4);
  font-size: 19px; font-weight: 600; text-align: center;
  border: 2px solid var(--navy); border-radius: var(--radius-md);
  color: var(--navy); background: var(--surface); cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.choice input[type=radio]:checked + label { background: var(--navy); color: #fff; }
.choice input[type=radio]:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---- Two-part event forms (ceremony + luncheon sections) ---- */
.form-section { margin-bottom: var(--sp-6); }
.form-section + .form-section { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.form-section h3 { margin-bottom: var(--sp-1); }
.venue { color: var(--ink-muted); font-size: 16px; line-height: 1.45; margin-bottom: var(--sp-3); }
.section-prompt { font-weight: 600; margin-bottom: var(--sp-2); }
.reveal { display: none; }
.reveal.show { display: block; }
.section-centered { text-align: center; }
.section-divided { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.event-time {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  color: var(--gold-deep); margin-bottom: 2px;
}
.event-day-heading {
  font-family: var(--font-display); font-weight: 700; font-size: 28px;
  color: var(--navy); text-align: center; margin: var(--sp-6) 0 var(--sp-4);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field-row .field { margin-bottom: var(--sp-4); }

/* ---- Forms ---- */
.field { margin-bottom: var(--sp-4); }
.field > label { display: block; font-weight: 600; font-size: 16px; margin-bottom: var(--sp-2); }
.hint { font-weight: 400; color: var(--ink-muted); }
.input, textarea.input, select.input {
  width: 100%; font: inherit; color: var(--ink);
  min-height: 48px; padding: var(--sp-3) var(--sp-4);
  border: 1px solid #B9C0D2; border-radius: var(--radius-md); background: #fff;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(17,40,102,.18); }
.stepper { display: flex; align-items: center; gap: var(--sp-3); }
.stepper input { max-width: 96px; text-align: center; font-variant-numeric: tabular-nums; }
.cutoff-note { font-size: 14px; color: var(--ink-muted); text-align: center; margin-top: var(--sp-3); }

/* ---- Alerts ---- */
.alert {
  border-radius: var(--radius-md); padding: var(--sp-4);
  font-size: 16px; border: 1px solid; border-left-width: 5px;
  margin-bottom: var(--sp-4); background: #fff;
}
.alert-success { border-color: var(--success); color: #14512A; background: #F0F7F2; }
.alert-error   { border-color: var(--red);     color: #8A0A0A; background: #FCF1F1; }
.alert-info    { border-color: var(--blue);    color: #0A4E88; background: #EFF6FD; }
.alert-warning { border-color: var(--gold-deep); color: #6E4E00; background: #FDF7E9; }

/* ---- Tables (admin) ---- */
table { width: 100%; border-collapse: collapse; font-size: 16px; }
caption { text-align: left; font-size: 22px; font-weight: 600; padding-bottom: var(--sp-4); }
th {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); text-align: left;
  border-bottom: 2px solid var(--navy); padding: var(--sp-2) var(--sp-3);
}
td { border-bottom: 1px solid var(--line); padding: var(--sp-3); font-variant-numeric: tabular-nums; vertical-align: top; }
.num { text-align: right; }
.pill { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .03em; border-radius: 999px; padding: 2px 12px; white-space: nowrap; }
.pill-yes { background: #F0F7F2; color: var(--success); }
.pill-no  { background: #FCF1F1; color: var(--red); }
/* "Changes requested" is not an error — red never decorates (DESIGN.md), so
   this borrows the warning tone rather than pill-no's red. */
.pill-warn { background: #FDF7E9; color: #6E4E00; }
.confirmed-check { color: var(--success); font-weight: 700; font-size: 20px; }

/* ---- Stat row (admin RSVP summary) ---- */
.stats { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-6); }
.stat b { display: block; font-size: 28px; font-family: var(--font-display); color: var(--navy); font-variant-numeric: tabular-nums; }
.stat span { font-size: 14px; color: var(--ink-muted); }

/* ---- Doc list ---- */
.doc-list { list-style: none; padding: 0; }
.doc-list li { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4) 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.doc-list li:first-child { border-top: none; }
.doc-ico { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(17,40,102,.07); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.doc-meta { min-width: 0; flex: 1; }
.doc-meta a { font-weight: 600; }
.doc-meta .sub { font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.doc-url { width: 100%; font-size: 14px; color: var(--ink-muted); }
/* Plain-text link plus a copy button — the URL stays selectable by hand, so
   the button is a shortcut rather than the only way to get it. */
.doc-url-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.doc-url-text {
  font-size: 13px; color: var(--ink); word-break: break-all; min-width: 0;
  font-variant-numeric: tabular-nums;
}
.copy-btn {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-1);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-muted); cursor: pointer; padding: 5px 7px; font: inherit; font-size: 13px;
  transition: color 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out;
}
.copy-btn:hover { color: var(--navy); border-color: var(--navy); background: rgba(17,40,102,.05); }
.copy-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.copy-btn svg { width: 15px; height: 15px; display: block; }
.copy-btn .copy-check, .copy-btn .copy-said { display: none; }
.copy-btn.copied { color: var(--success); border-color: var(--success); background: #F0F7F2; }
.copy-btn.copied .copy-icon { display: none; }
.copy-btn.copied .copy-check, .copy-btn.copied .copy-said { display: block; }
/* Member reviews collected on one document (admin document view) */
.review-list { list-style: none; padding: 0; }
.review-list li { padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.review-list li:first-child { border-top: none; padding-top: 0; }
.review-head { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.review-when { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.review-comments { font-size: 15px; margin-top: var(--sp-2); white-space: pre-wrap; }

/* ---- Document library sections ---- */
.doc-section-heading { font-size: 22px; margin: var(--sp-6) 0 var(--sp-3); }
.doc-section-heading:first-of-type { margin-top: var(--sp-2); }

/* ---- Document review page (PDF left, comments right) ---- */
.doc-review {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-6); align-items: start; margin-top: var(--sp-4);
}
.doc-viewer { min-width: 0; }
.pdf-frame {
  width: 100%; height: 85vh; min-height: 600px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff;
}
.doc-viewer-fallback { font-size: 14px; color: var(--ink-muted); margin-top: var(--sp-2); }
.doc-review-panel { position: sticky; top: var(--sp-4); }
.doc-review-actions { display: grid; gap: var(--sp-3); }
.doc-review-actions .btn { font-size: 16px; }
@media (max-width: 860px) {
  .doc-review { grid-template-columns: 1fr; }
  .doc-review-panel { position: static; }
  .pdf-frame { height: 65vh; }
}

/* ---- Admin nav ---- */
.admin-nav { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-8); flex-wrap: wrap; align-items: center; }
.admin-nav a { font-weight: 600; text-decoration: none; color: var(--navy); padding: var(--sp-2) 0; }
.admin-nav a.active { border-bottom: 3px solid var(--gold); }
.admin-nav .spacer { flex: 1; }

footer { border-top: 1px solid var(--line); padding: var(--sp-6); text-align: center; color: var(--ink-muted); font-size: 14px; }