/* Warriors of the Blessed Son — Distributed Ordination Portal
   Palette per lore/symbols/ndrc/wbs-iconography.md:
   midnight blue, orange (the Blessed Son's glasses), ledger grey. */

:root {
  --midnight: #1b2a4a;
  --midnight-2: #243660;
  --orange: #e8862b;
  --orange-2: #f0a44e;
  --ledger: #d9d9d6;
  --paper: #f6f6f3;
  --ink: #1a1a1a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "GDS Transport", Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}

a { color: var(--midnight); }
a:hover { color: var(--orange); }

/* Header */
.wbs-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  background: var(--midnight); color: #fff;
  padding: 14px 24px; border-bottom: 4px solid var(--orange);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand .emblem { display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.05rem; }
.brand-text em { font-size: .8rem; color: var(--orange-2); font-style: normal; }
.wbs-top nav a { color: #cdd6e6; text-decoration: none; margin-left: 18px; font-size: .95rem; }
.wbs-top nav a:hover, .wbs-top nav a.active { color: #fff; border-bottom: 2px solid var(--orange); }

/* Main */
.wbs-main { max-width: 980px; margin: 0 auto; padding: 32px 24px 56px; }

.hero h1 { color: var(--midnight); font-size: 2.1rem; margin: 0 0 .3em; }
.lede { font-size: 1.12rem; color: #333; }
.counter { font-size: 1.15rem; }
.counter strong { color: var(--orange); font-size: 1.4rem; }

.btn {
  display: inline-block; background: var(--orange); color: #fff;
  padding: 11px 20px; border: 0; border-radius: 4px; cursor: pointer;
  text-decoration: none; font-size: 1rem; font-weight: 600;
}
.btn:hover { background: var(--orange-2); color: #fff; }
.btn.alt { background: var(--midnight); }
.btn.alt:hover { background: var(--midnight-2); }
.btn.ghost { background: transparent; color: var(--midnight); border: 1px solid var(--midnight); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 32px 0; }
.card { background: #fff; border: 1px solid var(--ledger); border-top: 4px solid var(--midnight); border-radius: 4px; padding: 18px 20px; }
.card h2 { margin: 0 0 .4em; font-size: 1.1rem; color: var(--midnight); }

.note, .plan { background: #fff; border: 1px solid var(--ledger); border-left: 4px solid var(--orange); padding: 16px 20px; border-radius: 4px; }

/* Forms */
.form-wrap { max-width: 640px; }
.wbs-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.wbs-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--midnight); }
.wbs-form input[type=text], .wbs-form input[type=email], .wbs-form input[type=password],
.wbs-form input[type=search], .wbs-form select, .wbs-form textarea {
  font: inherit; padding: 9px 11px; border: 1px solid #8a8a8a; border-radius: 3px; font-weight: 400; color: var(--ink);
}
.wbs-form .opt { font-weight: 400; color: #666; font-size: .85em; }
.wbs-form .vow { font-weight: 400; flex-direction: row; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--ledger); padding: 14px; border-radius: 4px; }
.wbs-form .vow em { color: var(--midnight); }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.errors { background: #fbe9e7; border: 1px solid #c1121f; color: #8a0f17; padding: 12px 16px; border-radius: 4px; }
.errors ul { margin: 0; padding-left: 18px; }

/* Roll / tables */
.search { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.search input { flex: 1; min-width: 200px; font: inherit; padding: 9px 11px; border: 1px solid #8a8a8a; border-radius: 3px; }
.roll-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--ledger); }
.roll-table th, .roll-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #ececec; font-size: .94rem; }
.roll-table th { background: var(--midnight); color: #fff; }
.roll-table .empty { text-align: center; color: #888; padding: 22px; }
.mono { font-family: "Courier New", monospace; font-size: .9rem; }
.dim { color: #999; }
.pager { display: flex; gap: 14px; align-items: center; margin-top: 16px; }

.record { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; background: #fff; border: 1px solid var(--ledger); padding: 18px; border-radius: 4px; }
.record dt { font-weight: 700; color: var(--midnight); }
.record dd { margin: 0; }

.plan pre { white-space: pre-wrap; font-family: "Courier New", monospace; font-size: .92rem; }

/* Certificate (printable) */
.certificate-page .confirm h1 { color: var(--midnight); }
.certificate {
  background: #fff; border: 3px solid var(--midnight); border-radius: 6px;
  padding: 34px 30px; margin: 24px 0; text-align: center;
  box-shadow: inset 0 0 0 2px var(--orange-2);
}
.cert-org { letter-spacing: .12em; text-transform: uppercase; color: var(--midnight); font-size: .8rem; margin: 0 0 .5em; }
.cert-head { font-size: 1.8rem; font-weight: 700; color: var(--midnight); margin: .2em 0; }
.cert-name { font-size: 1.9rem; font-weight: 700; color: var(--orange); margin: .3em 0 .1em; }
.cert-rank, .cert-ministry { margin: .1em 0; font-size: 1.05rem; }
.cert-meta { margin: .8em 0; color: #444; }
.cert-chart { width: 320px; max-width: 80%; height: auto; margin: .4em auto 0; display: block; }
.cert-halonote { font-size: .72rem; color: #888; margin: .1em 0 1em; }
.cert-vow { font-style: italic; color: var(--midnight); font-size: 1.1rem; }
.cert-sign { color: #666; font-size: .85rem; margin-top: 1em; }
.downloads { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }

/* Footer */
.wbs-foot { background: var(--midnight); color: #cdd6e6; padding: 24px; margin-top: 40px; text-align: center; }
.wbs-foot .motto { color: var(--orange-2); font-style: italic; margin: 0 0 .5em; }
.wbs-foot .small { font-size: .82rem; margin: .3em 0; }
.wbs-foot .disclaimer { color: #9aa6bd; }
.small { font-size: .85rem; color: #555; }

@media print {
  .wbs-top, .wbs-foot, .downloads, .confirm, .note { display: none !important; }
  body { background: #fff; }
  .certificate { box-shadow: none; }
}