/* ============================================================
   Andresen Scholarships — site-wide stylesheet
   A warm, plainspoken design for a family scholarship:
   cream paper, prairie green, a little harvest gold.
   Replaces the old Minimaxing template CSS entirely.
   ============================================================ */

:root {
  --paper: #faf6ee;
  --paper-deep: #f2ecdd;
  --card: #fffdf8;
  --ink: #2d2a22;
  --ink-soft: #5d574a;
  --ink-faint: #8d8574;
  --green: #3e6b40;
  --green-deep: #2b4d2e;
  --green-wash: #e9efe4;
  --gold: #a97f24;
  --gold-wash: #f6ecd4;
  --red: #a5432e;
  --red-wash: #f9e8e2;
  --line: #e5ddc9;
  --line-strong: #cfc5aa;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(66, 56, 30, 0.06), 0 6px 24px -12px rgba(66, 56, 30, 0.25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.5em;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--green); text-decoration-color: color-mix(in srgb, var(--green) 40%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }

img { max-width: 100%; height: auto; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.4rem; }
.wrap.narrow { max-width: 820px; }

/* ---------- Header ---------- */

.site-head {
  border-bottom: 3px double var(--line-strong);
  background: var(--paper);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--ink); }
.brand svg { width: 40px; height: 40px; flex: none; }
.brand-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; line-height: 1.15; display: block; }
.brand-sub { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); display: block; }

.site-nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.site-nav a { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: 0.98rem; padding: 0.2em 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--green-deep); }
.site-nav a[aria-current="page"] { color: var(--green-deep); border-bottom-color: var(--gold); }
/* Button in the nav: keep the light button text (beats the grey .site-nav a rule). */
.site-nav .btn, .site-nav .btn:hover { color: #fdfbf4; border-bottom: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--green);
  color: #fdfbf4;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 0.62em 1.4em;
  border: 1px solid var(--green-deep);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--green-deep); color: #fdfbf4; }
.btn.ghost { background: transparent; color: var(--green-deep); border: 1.5px solid var(--green); }
.btn.ghost:hover { background: var(--green-wash); }
.btn.small { font-size: 0.85rem; padding: 0.45em 1.1em; }
.btn.disabled, .btn:disabled { background: var(--ink-faint); border-color: var(--ink-faint); cursor: not-allowed; pointer-events: none; }

/* ---------- Notice banner (applications closed) ---------- */

.notice {
  background: var(--gold-wash);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.notice .wrap { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.notice p { margin: 0; font-size: 0.95rem; color: #6d5417; text-align: center; }

/* ---------- Hero ---------- */

.hero { padding: 4.2rem 0 3.4rem; text-align: center; background:
  radial-gradient(1100px 420px at 50% -80px, #fdf9f0 0%, var(--paper) 70%); }
.hero h1 { font-size: clamp(2.3rem, 5.5vw, 3.4rem); font-weight: 600; margin-bottom: 0.35em; }
.hero .lede { font-size: 1.18rem; color: var(--ink-soft); max-width: 44em; margin: 0 auto 1.6em; }
.hero .actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1em;
}

/* ---------- Sections ---------- */

.section { padding: 3rem 0; }
.section.tint { background: var(--paper-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { text-align: center; max-width: 46em; margin: 0 auto 2.2rem; }
.section-head p { color: var(--ink-soft); }

/* ---------- Photo frames (memorial) ---------- */

.frame-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: start; }
.frame { text-align: center; }
.frame .mat {
  background: #fffef9;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 10px 10px 12px;
  box-shadow: var(--shadow);
  display: inline-block;
  max-width: 100%;
}
.frame img { display: block; border-radius: 2px; max-height: 340px; width: auto; max-width: 100%; margin: 0 auto; }
.frame h3 { margin: 0.9em 0 0.1em; }
.frame .caption { color: var(--ink-faint); font-size: 0.92rem; margin: 0; }

/* ---------- Story / prose ---------- */

.prose { max-width: 46em; margin: 0 auto; font-size: 1.08rem; }
.prose.center { text-align: center; }
.prose .drop { font-family: var(--serif); }

/* ---------- Cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.8rem;
  box-shadow: var(--shadow);
}
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: stretch; }

.schol-card { display: flex; flex-direction: column; border-top: 4px solid var(--green); }
.schol-card.gold-top { border-top-color: var(--gold); }
.schol-card h3 { font-size: 1.45rem; margin-bottom: 0.2em; }
.schol-card .award {
  display: inline-block;
  background: var(--green-wash);
  color: var(--green-deep);
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 999px;
  padding: 0.2em 0.9em;
  margin-bottom: 0.9em;
  align-self: flex-start;
}
.schol-card p { color: var(--ink-soft); }
.schol-card .controls { margin-top: auto; padding-top: 0.6rem; }

/* Two-up: photo + text */
.split { display: grid; grid-template-columns: 5fr 6fr; gap: 2.4rem; align-items: center; }
.split .mat { background: #fffef9; border: 1px solid var(--line-strong); border-radius: 4px; padding: 10px; box-shadow: var(--shadow); }
.split .mat img { display: block; border-radius: 2px; width: 100%; }

/* ---------- Scholarship detail pages ---------- */

.page-title { padding: 2.8rem 0 0.4rem; }
.page-title h1 { margin-bottom: 0.2em; }
.page-title .sub { color: var(--ink-soft); font-size: 1.1rem; margin: 0; }

.detail-layout { display: grid; grid-template-columns: 7fr 4fr; gap: 2.6rem; padding: 2.2rem 0 3.4rem; align-items: start; }
.detail-body h2 { font-size: 1.45rem; margin-top: 1.6em; padding-bottom: 0.3em; border-bottom: 1px solid var(--line); }
.detail-body h2:first-child { margin-top: 0; }
.detail-body ul { padding-left: 1.2em; margin: 0 0 1em; }
.detail-body li { margin-bottom: 0.35em; }

.aside-card { position: sticky; top: 1.4rem; }
.aside-card .deadline {
  background: var(--gold-wash);
  border: 1px solid #e5d3a4;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin: 1rem 0 1.2rem;
  font-size: 0.95rem;
}
.aside-card .deadline strong { display: block; font-size: 1.05rem; }
.facts { margin: 0 0 1.2rem; }
.facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5em 0; border-bottom: 1px dashed var(--line); font-size: 0.95rem; }
.facts dt { color: var(--ink-faint); font-weight: 600; margin: 0; }
.facts dd { margin: 0; text-align: right; font-weight: 600; }

/* ---------- Footer ---------- */

.site-foot { background: var(--green-deep); color: #e8e4d3; margin-top: 3rem; }
.site-foot .wrap { padding: 2.4rem 1.4rem 2rem; text-align: center; }
.site-foot .memorial { font-family: var(--serif); font-size: 1.05rem; font-style: italic; color: #f2eeda; margin-bottom: 0.4em; }
.site-foot .fine { font-size: 0.85rem; color: #b9c4ac; margin: 0; }
.site-foot a { color: #d8e0c8; }

/* ============================================================
   Forms (apply + recommendation)
   ============================================================ */

.app-form { max-width: 780px; margin: 0 auto; }

.app-form fieldset {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.8rem 1.8rem;
  margin: 0 0 1.6rem;
}
.app-form legend {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--green-deep);
  padding: 0 0.5em;
}
.app-form .field { margin: 0 0 1.15em; }
.app-form .field.two { display: flex; gap: 1.1em; }
.app-form .field.two > div { flex: 1; }

.app-form label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35em; color: var(--ink); }
.app-form .req { color: var(--red); }
.hint { font-weight: 400; font-size: 0.85em; color: var(--ink-faint); margin-top: 0.25em; }

.app-form input[type="text"],
.app-form input[type="email"],
.app-form input[type="tel"],
.app-form input[type="number"],
.app-form input[type="date"],
.app-form input[type="password"],
.app-form input[type="file"],
.app-form select,
.app-form textarea {
  width: 100%;
  padding: 0.6em 0.75em;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
  font-family: var(--sans);
  color: var(--ink);
}
.app-form textarea { min-height: 120px; resize: vertical; }
.app-form input:focus, .app-form select:focus, .app-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(62, 107, 64, 0.15);
}

.app-form .radio-row label,
.app-form .yn-row label { display: inline-flex; align-items: center; font-weight: 400; margin-right: 1.5em; }
.app-form .radio-row input, .app-form .yn-row input { width: auto; margin-right: 0.5em; accent-color: var(--green); }
.app-form .radio-row > label:first-child, .app-form .yn-row > label:first-child { display: block; font-weight: 600; margin-bottom: 0.4em; }

/* Signature pad */
.sig-wrap { position: relative; }
.sig-pad {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #fffef9;
  width: 100%;
  height: 140px;
  touch-action: none;
  display: block;
}
.sig-clear { background: none; border: none; color: var(--green); cursor: pointer; font-size: 0.9em; padding: 0.25em 0; font-family: var(--sans); }

/* Messages */
.form-message { padding: 0.9em 1.1em; border-radius: 8px; margin-bottom: 1.25em; display: none; }
.form-message.error { background: var(--red-wash); color: var(--red); border: 1px solid #e8c3b6; display: block; }
.form-message.success { background: var(--green-wash); color: var(--green-deep); border: 1px solid #c2d4b8; display: block; }

.word-count { font-size: 0.85em; color: var(--ink-faint); margin-top: 0.25em; }

.controls { margin: 0; }

/* ============================================================
   Admin dashboard
   ============================================================ */

.admin-body { background: #f6f3ea; }

.admin-top { background: var(--green-deep); color: #f2eeda; }
.admin-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.85rem; padding-bottom: 0.85rem; flex-wrap: wrap; }
.admin-top .brand { color: #f2eeda; }
.admin-top .brand-sub { color: #b9c4ac; }
.admin-top .brand svg { color: #e6d9a8; }
.admin-top nav { display: flex; align-items: center; gap: 1.2rem; }
.admin-top a { color: #d8e0c8; text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.admin-top a:hover { color: #fff; }

.admin-main { padding: 2rem 0 4rem; }

/* Login card */
.login-card { max-width: 420px; margin: 4rem auto; text-align: center; }
.login-card h2 { margin-bottom: 0.2em; }
.login-card .hint { margin-bottom: 1.4em; }
.login-card form { text-align: left; }

/* Show/hide password toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 4.4em; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.5em;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--green);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.3em 0.5em;
}
.pw-toggle:hover { color: var(--green-deep); text-decoration: underline; }

/* Stat cards */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.2rem;
  box-shadow: var(--shadow);
}
.stat .num { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--green-deep); }
.stat .lbl { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); }

/* Toolbar */
.toolbar { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem; }
.toolbar input[type="search"], .toolbar select {
  padding: 0.5em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
  font-family: var(--sans);
  color: var(--ink);
}
.toolbar input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.toolbar .spacer { flex: 1; }

/* Table */
.table-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.admin-table th, .admin-table td { text-align: left; padding: 0.7em 1em; border-bottom: 1px solid var(--line); font-size: 0.95rem; vertical-align: middle; }
.admin-table th { color: var(--ink-faint); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; background: #fbf8f0; white-space: nowrap; }
.admin-table th.sortable { cursor: pointer; user-select: none; }
.admin-table th.sortable:hover { color: var(--green-deep); }
.admin-table tbody tr { cursor: pointer; }
.admin-table tbody tr:hover td { background: #f5f7ef; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .subtle { color: var(--ink-faint); font-size: 0.85em; }

.list-foot { color: var(--ink-faint); font-size: 0.9rem; margin-top: 0.9rem; }

/* Badges */
.badge { display: inline-block; padding: 0.18em 0.75em; border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.badge.pending { background: var(--gold-wash); color: #8a6410; }
.badge.submitted { background: var(--green-wash); color: var(--green-deep); }
.badge.st-submitted { background: #e8ecf4; color: #3d5a86; }
.badge.st-in_review { background: var(--gold-wash); color: #8a6410; }
.badge.st-awarded { background: var(--green-wash); color: var(--green-deep); }
.badge.st-not_awarded { background: #eeeae1; color: var(--ink-faint); }

.score-pips { color: var(--gold); letter-spacing: 0.1em; font-size: 0.9rem; white-space: nowrap; }
.score-pips .off { color: var(--line-strong); }

/* Detail view */
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.detail-head h2 { margin: 0; }
.detail-head .meta { color: var(--ink-soft); margin: 0.2em 0 0; }
.detail-head .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.detail-cols { display: grid; grid-template-columns: 7fr 4fr; gap: 1.6rem; align-items: start; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.6rem; margin-bottom: 1.4rem; }
.panel h3 { font-size: 1.05rem; color: var(--green-deep); border-bottom: 1px solid var(--line); padding-bottom: 0.45em; margin-bottom: 0.9em; }

.detail-grid { display: grid; grid-template-columns: 180px 1fr; gap: 0.45em 1.2em; margin: 0; }
.detail-grid dt { font-weight: 600; color: var(--ink-faint); font-size: 0.92rem; }
.detail-grid dd { margin: 0; white-space: pre-wrap; }

.file-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Review panel */
.review-panel { border-top: 4px solid var(--gold); }
.review-panel label { display: block; font-weight: 600; font-size: 0.92rem; margin: 0.9em 0 0.3em; }
.review-panel select, .review-panel textarea {
  width: 100%;
  padding: 0.55em 0.7em;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
}
.review-panel textarea { min-height: 110px; resize: vertical; }
.score-picker { display: flex; gap: 0.3rem; }
.score-picker button {
  background: none; border: none; cursor: pointer; font-size: 1.5rem; padding: 0 0.1em;
  color: var(--line-strong); line-height: 1;
}
.score-picker button.on { color: var(--gold); }
.save-note { font-size: 0.85rem; color: var(--ink-faint); margin-top: 0.7em; min-height: 1.2em; }
.save-note.saved { color: var(--green-deep); }

.rec-quote {
  background: #fbf8f0;
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
  white-space: pre-wrap;
  font-size: 0.98rem;
}

.copy-link { font-size: 0.85rem; }

/* ---------- 404 ---------- */
.lost { text-align: center; padding: 5rem 1rem; }
.lost h1 { font-size: 3rem; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .detail-layout, .detail-cols { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .frame-row { grid-template-columns: 1fr; }
  /* Stacked on mobile, lead with the family photo instead of splitting the brothers around it */
  .frame-row .frame:nth-child(2) { order: -1; }
  .card-grid { grid-template-columns: 1fr; }
  .app-form .field.two { flex-direction: column; gap: 0; }
  .site-head .wrap { justify-content: center; text-align: center; }
  .site-nav { justify-content: center; }
  .detail-grid { grid-template-columns: 1fr; gap: 0 0; }
  .detail-grid dt { margin-top: 0.6em; }
}

/* ============================================================
   Print (board packets from the admin detail view)
   ============================================================ */

@media print {
  body { background: #fff; font-size: 12px; }
  .admin-top, .toolbar, .stat-row, .detail-head .actions, .review-panel .no-print,
  .back-link, .site-foot { display: none !important; }
  .panel, .table-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .detail-cols { grid-template-columns: 1fr; }
  a { color: inherit; text-decoration: none; }
}