@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;1,500&family=Inter:wght@400;500;600&display=swap');

:root {
  --white: #FFFFFF;
  --panel: #EEF2F8;
  --ink: #0F2A52;
  --blue: #14315C;
  --blue-deep: #0B1F3D;
  --red: #B3242A;
  --red-deep: #8C1B20;
  --gold: #C9A227;
  --stone: #56607A;
  --line: rgba(15, 42, 82, 0.15);

  --serif: 'Playfair Display', Georgia, serif;
  --serif-italic: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

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

h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 600; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: 0.01em; }
h3 { font-size: 1.15rem; }

p { max-width: 62ch; }

a { color: var(--red); }

/* -------- Layout shell: fixed spine + main column -------- */
.shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.spine {
  background: var(--ink);
  color: var(--white);
  padding: 2.5rem 2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.spine .crest {
  font-family: var(--serif);
}

.spine .crest .mark {
  display: block;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  margin-bottom: 1.2rem;
  position: relative;
}
.spine .crest .mark::after {
  content: "†";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.3rem;
}

.spine .crest h2 {
  color: var(--white);
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
}

.spine .crest .parish-sub {
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.spine nav {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 3rem;
}

.spine nav a {
  color: var(--white);
  opacity: 0.75;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  width: fit-content;
}
.spine nav a:hover, .spine nav a.active {
  opacity: 1;
  border-bottom-color: var(--gold);
}

.spine .foot {
  font-size: 0.78rem;
  opacity: 0.55;
}

.main {
  padding: 4rem 5vw 5rem;
  max-width: 980px;
}

@media (max-width: 780px) {
  .shell { grid-template-columns: 1fr; }
  .spine { position: relative; height: auto; }
  .main { padding: 2.5rem 6vw 4rem; }
}

/* -------- Hero -------- */
.hero { margin-bottom: 4rem; }
.hero .eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.hero h1 { max-width: 18ch; }
.hero p.lede {
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--stone);
  margin-top: 1.1rem;
  max-width: 48ch;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.9rem 1.8rem;
  border: 1px solid var(--red);
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  border-radius: 1px;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--red-deep); }

.btn.outline {
  background: transparent;
  color: var(--red);
}
.btn.outline:hover { background: var(--red); color: var(--white); }

/* -------- Ledger-style numbered process -------- */
.process {
  border-top: 1px double var(--line);
  margin-top: 3rem;
  padding-top: 2.5rem;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.step {
  border-left: 2px solid var(--gold);
  padding-left: 1rem;
}

.step .num {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold);
  display: block;
  margin-bottom: 0.3rem;
}

.step h3 { margin-bottom: 0.3rem; }
.step p { font-size: 0.92rem; color: var(--stone); margin: 0; }

/* -------- Requirements ledger list -------- */
.ledger-list {
  border-top: 3px double var(--line);
  margin-top: 3rem;
  padding-top: 2rem;
}

.ledger-list ul {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
}

.ledger-list li {
  border-bottom: 1px dashed var(--line);
  padding: 0.75rem 0;
  display: flex;
  gap: 0.8rem;
}

.ledger-list li::before {
  content: "—";
  color: var(--gold);
}

/* -------- Forms -------- */
.form-page { max-width: 640px; }

.field { margin-bottom: 1.4rem; }

.field label {
  display: block;
  font-size: 0.88rem;
  color: var(--stone);
  margin-bottom: 0.4rem;
}

.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 2px;
  color: var(--ink);
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.4rem;
}
fieldset legend {
  font-size: 0.88rem;
  color: var(--stone);
  margin-bottom: 0.5rem;
  padding: 0;
}
.radio-group, .checkbox-group {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.radio-group label, .checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--ink);
}

.hint { font-size: 0.82rem; color: var(--stone); margin-top: 0.3rem; }

.form-section-title {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  margin: 2rem 0 1.4rem;
}

/* -------- Status / badges -------- */
.status-badge {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}
.status-badge.verified { background: var(--red); color: var(--white); border-color: var(--red); }
.status-badge.warn { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* -------- Table (admin) -------- */
table.ledger-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.92rem;
}
table.ledger-table th {
  text-align: left;
  font-weight: 500;
  color: var(--stone);
  border-bottom: 1px solid var(--ink);
  padding: 0.6rem 0.8rem;
}
table.ledger-table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--line);
}
table.ledger-table tr:hover td { background: var(--panel); }

.notice {
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--red);
  background: var(--white);
  font-size: 0.92rem;
  margin: 1.2rem 0;
}
.notice.success { border-left-color: #3a6b4f; }
.notice.error { border-left-color: #b03a2e; }

/* hides text that will be swapped in from the database, so the page
   never flashes the wrong/default wording before the real content loads */
body.pending-content [data-key],
body.pending-content [data-chrome] {
  visibility: hidden;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.6rem;
  margin-bottom: 1.5rem;
}

.greeting {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin-bottom: 0.3rem;
}

/* ============================================================
   SLC PRE-MARRIAGE CONSENT DOCUMENT
   ============================================================ */
.consent-document{
  display:grid;
  gap:1.25rem;
  margin-top:1.25rem;
}
.consent-page{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(67,55,40,.13);
  box-shadow:0 18px 50px rgba(40,30,20,.07);
  padding:2.4rem 2.5rem;
  min-height:520px;
}
.consent-page:after{
  content:"SLC";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
  font-family:var(--serif);
  font-size:8rem;
  letter-spacing:.12em;
  color:rgba(151,119,58,.035);
  pointer-events:none;
}
.consent-kicker,.eyebrow{
  font-family:var(--serif);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  color:var(--gold);
  margin-bottom:.7rem;
}
.consent-page h2{
  font-family:var(--serif);
  font-size:clamp(1.55rem,3vw,2.15rem);
  font-weight:500;
  margin:.1rem 0 .25rem;
  max-width:78%;
}
.consent-page h3{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  margin:1.65rem 0 .65rem;
}
.consent-lead{color:var(--stone);margin:0 0 1.2rem}
.consent-stamp{
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  width:72px;height:72px;border:1px solid rgba(151,119,58,.45);
  border-radius:50%;display:grid;place-items:center;text-align:center;
  color:var(--gold);font-family:var(--serif);font-size:.75rem;
  line-height:1.05;letter-spacing:.08em;transform:rotate(-12deg);
  z-index:2;
}
.consent-stamp small{font-size:.45rem;letter-spacing:.13em}
.consent-meta,.consent-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid rgba(67,55,40,.12);
  border-bottom:1px solid rgba(67,55,40,.12);
  margin:1.4rem 0;padding:.2rem 0;
}
.consent-meta>div,.consent-grid>div{padding:.75rem 0}
.consent-meta span,.consent-grid span{
  display:block;color:var(--stone);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.18rem;
}
.consent-meta strong,.consent-grid strong{font-size:.9rem;font-weight:600}
.consent-notice{
  padding:1rem 1.1rem;background:rgba(151,119,58,.06);
  border-left:3px solid var(--gold);font-size:.86rem;line-height:1.65;color:var(--stone);
}
.consent-question{
  color:var(--ink);font-size:.92rem;line-height:1.7;margin:.75rem 0 .65rem;
}
.accept-row{
  display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1rem;
}
.accept-row label{
  display:flex;align-items:center;gap:.45rem;
  border:1px solid rgba(67,55,40,.15);border-radius:999px;
  padding:.58rem .85rem;background:#fff;font-size:.82rem;cursor:pointer;
}
.accept-row input{accent-color:var(--gold)}
.consent-page .field label{display:block;font-size:.78rem;font-weight:600;margin-bottom:.4rem}
.consent-page .field label span{font-weight:400;color:var(--stone)}
.consent-page input,.consent-page select,.consent-page textarea{
  width:100%;box-sizing:border-box;
}
.consent-page textarea{resize:vertical;min-height:80px}
.signature-panel{
  margin-top:1.5rem;padding:1rem;border:1px solid rgba(67,55,40,.14);
  background:rgba(0,0,0,.012);
}
.signature-panel>div:first-child>label{
  display:block;font-size:.78rem;font-weight:600;margin-bottom:.4rem;
}
.signature-box{
  background:#fff;border:1px dashed rgba(67,55,40,.3);
  border-radius:8px;overflow:hidden;touch-action:none;
}
.signature-box canvas{display:block;width:100%;height:180px;touch-action:none}
.small-btn{font-size:.72rem!important;padding:.45rem .7rem!important;margin-top:.45rem}
.consent-attestation{
  margin:1.25rem 0;padding:1rem;border-top:1px solid rgba(67,55,40,.13);
  border-bottom:1px solid rgba(67,55,40,.13);font-size:.8rem;line-height:1.6;color:var(--stone);
}
.consent-status-card{
  display:flex;gap:1rem;align-items:flex-start;border-left:3px solid var(--gold);
}
.consent-status-card.approved{border-left-color:#4d7658}
.consent-status-icon{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(77,118,88,.1);color:#4d7658;font-size:1.15rem;flex:none;
}
.consent-payment-divider{height:.25rem}
@media (max-width:700px){
  .consent-page{padding:1.5rem 1.1rem;min-height:0}
  .consent-stamp{width:58px;height:58px;right:1rem;top:1rem;font-size:.62rem}
  .consent-page h2{max-width:72%;font-size:1.4rem}
  .consent-meta,.consent-grid{grid-template-columns:1fr}
  .consent-meta>div,.consent-grid>div{padding:.55rem 0}
  .accept-row{display:grid;grid-template-columns:1fr}
  .accept-row label{border-radius:9px}
}
@media print{
  .spine,.btn,#logout-link,.consent-status-card{display:none!important}
  body,.shell,.main{background:#fff!important}
  .consent-document{display:block}
  .consent-page{box-shadow:none;break-after:page;page-break-after:always;min-height:0;border:0}
  .consent-page:last-child{break-after:auto;page-break-after:auto}
}

.admin-consent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:1rem 0}
.admin-consent-grid>div{padding:.65rem .75rem;background:rgba(0,0,0,.025);border:1px solid rgba(67,55,40,.08);border-radius:7px}
.admin-consent-grid strong,.admin-consent-grid span{display:block}
.admin-consent-grid span{margin-top:.2rem;color:var(--stone);font-size:.85rem}
@media(max-width:700px){.admin-consent-grid{grid-template-columns:1fr}}
.consent-question-block{margin:0 0 1.15rem}
.consent-question-text{color:var(--stone);font-size:.88rem;line-height:1.7;margin:.35rem 0 .7rem}
.consent-required{font-size:.68rem!important;color:var(--red)!important;text-transform:uppercase;letter-spacing:.05em;margin-left:.35rem}
.consent-optional{font-size:.68rem!important;color:var(--stone)!important;text-transform:uppercase;letter-spacing:.05em;margin-left:.35rem}
.consent-page .field label small{display:block;color:var(--stone);font-weight:400;line-height:1.5;margin-top:.3rem}

/* Mobile-native linear consent form */
.consent-mobile-form{max-width:760px;margin:1rem auto 3rem;display:block}
.consent-form-topbar{position:sticky;top:0;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;margin:0 0 1rem;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid rgba(67,55,40,.1);border-radius:12px;box-shadow:0 8px 24px rgba(40,30,20,.06)}
.consent-progress-label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--stone)}
.consent-form-topbar strong{font-size:.88rem}
.consent-draft-status{font-size:.7rem;color:var(--stone);text-align:right}
.consent-intro-page{min-height:0;padding:1.5rem 0 1rem;background:transparent;border:0;box-shadow:none}
.consent-intro-page:after{display:none}
.consent-intro-page .consent-stamp{right:.1rem;top:1rem}
.consent-intro-page h2{max-width:70%;font-size:clamp(1.65rem,6vw,2.25rem)}
.consent-meta-simple{grid-template-columns:1fr 1fr;margin:1.2rem 0;border-top:0}
.consent-identity-line{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid rgba(67,55,40,.12);font-size:.88rem}
.consent-identity-line span{color:var(--stone)}
.consent-intro-copy{margin-top:1.1rem}
.consent-linear-questions{border-top:1px solid rgba(67,55,40,.14)}
.consent-linear-questions .consent-question-block{position:relative;padding:1.35rem 0 1.5rem;margin:0;border-bottom:1px solid rgba(67,55,40,.12)}
.consent-number{position:absolute;left:0;top:1.35rem;width:1.65rem;height:1.65rem;border-radius:50%;display:grid;place-items:center;background:rgba(151,119,58,.1);color:var(--gold);font-size:.72rem;font-weight:700}
.consent-linear-questions .consent-label,.consent-linear-questions .consent-question-text,.consent-linear-questions input,.consent-linear-questions select,.consent-linear-questions textarea,.consent-linear-questions .accept-row{margin-left:2.5rem;width:calc(100% - 2.5rem)}
.consent-label{display:block;font-size:.96rem;font-weight:600;margin-bottom:.35rem}
.consent-question-text{font-size:.88rem;line-height:1.65;color:var(--stone);margin-top:.2rem;margin-bottom:.75rem}
.consent-linear-questions input,.consent-linear-questions select,.consent-linear-questions textarea{font-size:1rem;min-height:50px;border-radius:10px;padding:.8rem .9rem}
.consent-linear-questions textarea{min-height:110px;line-height:1.55}
.consent-choice-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.consent-linear-questions .consent-choice-row{margin-top:.75rem}
.consent-choice{display:flex;align-items:center;gap:.65rem;min-height:52px;padding:.75rem .85rem;border:1px solid rgba(67,55,40,.16);border-radius:10px;background:#fff;cursor:pointer}
.consent-choice:has(input:checked){border-color:var(--gold);background:rgba(151,119,58,.07)}
.consent-choice input{width:auto!important;min-height:0;margin:0;accent-color:var(--gold)}
.consent-final{margin-top:1.25rem;min-height:0;padding:1.5rem 0;background:transparent;border-left:0;border-right:0;box-shadow:none}
.consent-final:after{display:none}
.signature-help{font-size:.8rem;color:var(--stone);margin:.3rem 0 .7rem}
.signature-panel{padding:0;border:0;background:transparent}
.signature-box{min-height:170px;border-radius:12px;border:1px dashed rgba(67,55,40,.35)}
.signature-box canvas{height:190px;background:#fff}
.consent-signature-name{margin-top:1rem}
.consent-submit-btn{width:100%;min-height:54px;font-size:.96rem}
@media(max-width:700px){
  .consent-mobile-form{margin:0 -0.2rem 2rem}
  .consent-form-topbar{top:0;border-radius:0;margin:0 -1rem 1rem;padding:.7rem 1rem}
  .consent-draft-status{max-width:48%;font-size:.65rem}
  .consent-intro-page{padding:1rem 0}
  .consent-intro-page .consent-stamp{right:0;top:.8rem}
  .consent-meta-simple{grid-template-columns:1fr;gap:0}
  .consent-identity-line{display:block}
  .consent-identity-line strong{display:block;margin-top:.2rem}
  .consent-choice-row{grid-template-columns:1fr}
  .consent-linear-questions .consent-label,.consent-linear-questions .consent-question-text,.consent-linear-questions input,.consent-linear-questions select,.consent-linear-questions textarea,.consent-linear-questions .accept-row{margin-left:2.15rem;width:calc(100% - 2.15rem)}
  .consent-number{width:1.5rem;height:1.5rem;font-size:.68rem}
  .consent-linear-questions .consent-question-block{padding:1.15rem 0 1.3rem}
}

.answer-field + .answer-field{margin-top:1rem}.answer-field-declaration{padding-top:.2rem}.answer-type-picker{gap:.65rem;flex-wrap:wrap}.answer-type-picker label{font-size:.9rem}.consent-builder-item .card{background:rgba(255,255,255,.45)}