/* Healing 💔heARTs💖 SOP Hub — shared styles for the register (index.html)
   and every SOP page (sops/*.html). Brand tokens match the other Healing
   heARTs apps. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --hh-ivory: #F7F2E9; --hh-maroon: #6B1A2A; --hh-gold: #C9A84C;
  --hh-gold-light: #E8D5A0; --hh-warm-text: #3D2016; --hh-muted: #7A6A61;
  --hh-soft-border: rgba(201,168,76,0.35); --hh-maroon-light: #F5ECED; --hh-rose: #AF4747;
  --hh-sage: #4E6B4A; --hh-sage-light: #EAF0E6;
}

body { background: var(--hh-ivory); color: var(--hh-warm-text); font-family: Georgia, 'Times New Roman', serif; font-size: 16.5px; line-height: 1.7; min-height: 100vh; }
a { color: var(--hh-maroon); }
:focus-visible { outline: 3px solid var(--hh-gold); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow { font-family: Arial, sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--hh-gold); }

/* ---------- App tabs (all pages) ---------- */

.app-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 12px; background: var(--hh-maroon); }
.app-tabs::-webkit-scrollbar { display: none; }
.app-tabs a { flex: none; display: flex; align-items: center; min-height: 46px; padding: 0 16px; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color: var(--hh-gold-light); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; opacity: 0.85; }
.app-tabs a:hover { opacity: 1; }
.app-tabs a[aria-current="page"] { color: #fff; border-bottom-color: var(--hh-gold); opacity: 1; }

/* ---------- Register (index.html) ---------- */

.hub-header { text-align: center; padding: 36px 16px 8px; }
.hub-header .emblem { width: 104px; height: auto; display: block; margin: 0 auto 10px; }
.hub-header .wordmark { width: min(320px, 80%); height: auto; display: block; margin: 0 auto 4px; }
.hub-header h1 { font-weight: normal; color: var(--hh-maroon); font-size: clamp(26px, 5vw, 34px); line-height: 1.25; margin: 6px 0 8px; }
.hub-header .lede { color: var(--hh-muted); font-style: italic; max-width: 34em; margin: 0 auto; }
.install-btn { margin-top: 16px; min-height: 44px; padding: 10px 22px; border: none; border-radius: 24px; background: var(--hh-maroon); color: var(--hh-gold-light); font-family: Georgia, serif; font-size: 15px; cursor: pointer; }
.install-btn[hidden], .install-tip[hidden] { display: none; }
.install-tip { max-width: 30em; margin: 12px auto 0; padding: 10px 14px; background: #fff; border: 1px solid var(--hh-soft-border); border-radius: 12px; font-size: 14.5px; color: var(--hh-warm-text); }

.wrap { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }

.toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.toolbar input { flex: 1 1 260px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--hh-soft-border); border-radius: 24px; background: #fff; font: inherit; font-size: 15.5px; color: var(--hh-warm-text); }
.toolbar input:focus { outline: none; border-color: var(--hh-gold); box-shadow: 0 0 0 3px rgba(201,168,76,0.25); }
#count { font-family: Arial, sans-serif; font-size: 12.5px; color: var(--hh-muted); }

.portfolio { margin-bottom: 30px; }
.portfolio h2 { font-family: Arial, sans-serif; font-weight: normal; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--hh-gold); border-bottom: 1px solid var(--hh-soft-border); padding-bottom: 6px; margin-bottom: 10px; }
.sop-list { list-style: none; display: grid; gap: 10px; }

.sop-row { display: grid; grid-template-columns: 8.5em 1fr auto; align-items: center; gap: 4px 18px; padding: 14px 18px; min-height: 56px; background: #fff; border: 1px solid var(--hh-soft-border); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.sop-row:hover { border-color: var(--hh-gold); box-shadow: 0 2px 10px rgba(107,26,42,0.08); }
.sop-no { font-family: Arial, sans-serif; font-size: 13px; letter-spacing: 0.5px; color: var(--hh-maroon); font-weight: bold; white-space: nowrap; }
.sop-title { font-size: 17px; color: var(--hh-warm-text); }
.sop-meta { grid-column: 2; font-family: Arial, sans-serif; font-size: 12px; color: var(--hh-muted); }
.sop-badges { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sop-row.retired { opacity: 0.6; }
.sop-row.retired .sop-title { text-decoration: line-through; text-decoration-color: rgba(61,32,22,0.35); }

.badge { font-family: Arial, sans-serif; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; white-space: nowrap; border: 1px solid transparent; }
.badge.active { background: var(--hh-sage-light); color: var(--hh-sage); border-color: rgba(78,107,74,0.3); }
.badge.draft { background: #FBF5E4; color: #7A5E12; border-color: rgba(201,168,76,0.5); }
.badge.under-review { background: var(--hh-maroon-light); color: var(--hh-maroon); border-color: rgba(107,26,42,0.25); }
.badge.retired { background: #EEE9E4; color: var(--hh-muted); }
.badge.due { background: #fff; color: var(--hh-rose); border-color: var(--hh-rose); }

.empty { text-align: center; color: var(--hh-muted); font-style: italic; padding: 24px 0; }

.hub-footer { text-align: center; padding: 8px 16px 32px; font-family: Arial, sans-serif; font-size: 11.5px; color: var(--hh-muted); }
.hub-footer p { margin: 2px 0; }
.hub-footer a { color: var(--hh-muted); }
#check-updates { color: var(--hh-maroon); font-weight: bold; }

@media (max-width: 600px) {
  .sop-row { grid-template-columns: 1fr auto; padding: 14px 16px; }
  .sop-no { grid-column: 1; }
  .sop-title, .sop-meta { grid-column: 1 / -1; }
  .sop-badges { grid-column: 2; grid-row: 1; }
}

/* ---------- SOP pages (sops/*.html) ---------- */

.sop-bar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(247,242,233,0.94); border-bottom: 1px solid var(--hh-soft-border); backdrop-filter: blur(4px); }
.sop-bar a, .sop-bar button { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 22px; font-family: Georgia, serif; font-size: 14px; text-decoration: none; cursor: pointer; }
.sop-bar a { color: var(--hh-maroon); border: 1px solid rgba(107,26,42,0.3); background: #fff; }
.sop-bar button { color: var(--hh-gold-light); background: var(--hh-maroon); border: none; }

.sop { max-width: 820px; margin: 0 auto; padding: 28px 16px 56px; }

.sop-header { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.sop-header img { width: 84px; height: auto; flex: none; }
.sop-header .kind { font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--hh-gold); }
.sop-header h1 { font-weight: normal; color: var(--hh-maroon); font-size: clamp(24px, 4.5vw, 31px); line-height: 1.25; margin-top: 4px; }

.doc-control { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 30px; border: 1px solid var(--hh-soft-border); border-radius: 12px; overflow: hidden; background: #fff; font-size: 15px; }
.doc-control th, .doc-control td { text-align: left; vertical-align: top; padding: 9px 14px; border-bottom: 1px solid var(--hh-soft-border); }
.doc-control tr:last-child th, .doc-control tr:last-child td { border-bottom: none; }
.doc-control th { width: 34%; font-family: Arial, sans-serif; font-weight: normal; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--hh-maroon); background: var(--hh-maroon-light); }

.sop section { margin-bottom: 26px; }
.sop h2 { font-weight: normal; color: var(--hh-maroon); font-size: 21px; border-bottom: 1px solid var(--hh-soft-border); padding-bottom: 4px; margin-bottom: 12px; }
.sop h2 .n { color: var(--hh-gold); margin-right: 8px; }
.sop h3 { font-weight: normal; color: var(--hh-warm-text); font-size: 17.5px; margin: 18px 0 8px; }
.sop h3 .n { color: var(--hh-maroon); margin-right: 6px; }
.sop p, .sop ul, .sop ol { margin-bottom: 10px; }
.sop ul, .sop ol { padding-left: 1.4em; }
.sop li { margin-bottom: 5px; }
.sop code { font-family: Consolas, Menlo, monospace; font-size: 0.86em; background: var(--hh-maroon-light); padding: 1px 5px; border-radius: 4px; }
.sop li::marker { color: var(--hh-gold); }

.sop table.data { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14.5px; background: #fff; }
.sop table.data th { text-align: left; font-family: Arial, sans-serif; font-weight: normal; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--hh-gold-light); background: var(--hh-maroon); padding: 8px 10px; }
.sop table.data td { padding: 8px 10px; border-bottom: 1px solid var(--hh-soft-border); vertical-align: top; }
.table-scroll { overflow-x: auto; }

.callout { border: 1px solid var(--hh-soft-border); border-left: 4px solid var(--hh-gold); background: #fff; border-radius: 10px; padding: 12px 16px; margin: 12px 0 16px; }
.callout .callout-title { font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--hh-maroon); margin-bottom: 4px; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout.info-required { border-left-color: #D9822B; background: #FDF6EE; }
.callout.info-required .callout-title { color: #9A5512; }
.callout.rule { border-left-color: var(--hh-maroon); background: var(--hh-maroon-light); }
.callout.tip { border-left-color: var(--hh-sage); background: var(--hh-sage-light); }
.callout.tip .callout-title { color: var(--hh-sage); }

.checklist { list-style: none; padding-left: 0 !important; }
.checklist li { position: relative; padding-left: 1.8em; }
.checklist li::before { content: "☐"; position: absolute; left: 0; color: var(--hh-maroon); }

.sop-scripture { text-align: center; font-style: italic; color: var(--hh-maroon); max-width: 36em; margin: -6px auto 26px; padding: 0 8px; }
.sop-scripture strong { font-weight: bold; }
.sop-scripture .ref { font-weight: normal; color: var(--hh-muted); white-space: nowrap; }

.flowchart { text-align: center; margin: 8px 0 16px; }
.flowchart img, .flowchart svg { max-width: 100%; height: auto; }
.flowchart figcaption { font-family: Arial, sans-serif; font-size: 12px; color: var(--hh-muted); margin-top: 6px; }

.sop-end { text-align: center; color: var(--hh-muted); font-family: Arial, sans-serif; font-size: 12px; margin-top: 34px; }

@media (max-width: 600px) {
  .sop-header img { width: 64px; }
  .doc-control th { width: 40%; }
}

/* ---------- Print / Save as PDF ---------- */

@media print {
  @page { size: A4; margin: 18mm 18mm 20mm; }
  body { background: #fff; font-size: 11pt; line-height: 1.5; }
  .app-tabs, .sop-bar, .no-print { display: none !important; }
  .sop { max-width: none; padding: 0; }
  .sop h2, .sop h3 { break-after: avoid; }
  .callout, .doc-control, .sop table.data tr, .flowchart { break-inside: avoid; }
  .sop a { color: inherit; text-decoration: none; }
}