/* ════════════════════════════════════════════════════════════════════════
   Healthpunks — Listmonk public-pages theme (subscriber-facing)
   ------------------------------------------------------------------------
   Pages: subscription management, unsubscribe, opt-in confirmation, archive,
   and the public login. These are server-rendered templates (NOT Buefy); the
   selectors below match Listmonk's /public/static/style.css.

   Paste into: Listmonk admin → Settings → Appearance → Public → "Custom CSS".
   (Local artifact — gitignored, not deployed. Lives in Listmonk's DB once saved.)

   Web fonts load fine here (real browser, unlike email), so this also brings in
   the brand faces: Genos (headings) + IBM Plex Sans (body).
   Palette: Obsidian bg / Bone text / Toxic-green accent.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Genos:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --hp-bg:       #0a0a0a;
  --hp-surface:  #161616;
  --hp-surface2: #1d1f23;
  --hp-input:    #0d0d0d;
  --hp-border:   #2a2e35;
  --hp-border2:  #3b3f46;
  --hp-text:     #f2f0eb;
  --hp-muted:    #9da3ae;
  --hp-faint:    #6b7178;
  --hp-accent:   #60c127;
  --hp-accent-d: #4ea01f;
  --hp-danger:   #d72638;
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html, body {
  background-color: var(--hp-bg) !important;
  color: var(--hp-text) !important;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
::selection { background: var(--hp-accent); color: #0a0a0a; }

a { color: var(--hp-accent) !important; text-decoration: none; }
a:hover { color: var(--hp-accent-d) !important; text-decoration: underline; }

h1, h2, h3, h4, h5 {
  font-family: 'Genos', 'Arial Narrow', Arial, sans-serif !important;
  color: var(--hp-text) !important;
  letter-spacing: .01em;
}
hr { border-color: var(--hp-border) !important; background: var(--hp-border) !important; }
p, li, dd, td { color: var(--hp-text) !important; }

/* ── Layout / surfaces ────────────────────────────────────────────────── */
.container, .wrap { background-color: transparent !important; color: var(--hp-text) !important; }
/* Center content card (the form/message panel) */
.wrap, .box, .form, .login, .archive, .home-options, .unsub-all {
  background-color: var(--hp-surface) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 8px;
  color: var(--hp-text) !important;
}
/* The header/logo block and footer sit on the canvas, not the card */
.header, footer.container, .header .logo {
  background-color: transparent !important;
  border: 0 !important;
}
.header .logo img { filter: none; } /* upload a bone/green logo in Settings → Appearance */

/* ── Lists (subscription preferences) ─────────────────────────────────── */
.lists, .row, .section { background-color: transparent !important; border-color: var(--hp-border) !important; }
.lists li, .list { border-color: var(--hp-border) !important; color: var(--hp-text) !important; }
label { color: var(--hp-text) !important; }
.small, .center.small, footer .small, .right.small { color: var(--hp-muted) !important; }

/* ── Form controls ────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], select, textarea {
  background-color: var(--hp-input) !important;
  color: var(--hp-text) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: 6px;
}
input::placeholder, textarea::placeholder { color: var(--hp-faint) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--hp-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(96,193,39,.25) !important;
}
input:focus::placeholder { color: var(--hp-faint) !important; }
input[disabled], select[disabled], textarea[disabled] {
  background-color: #0d0d0d !important; color: var(--hp-faint) !important; opacity: .7;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--hp-accent); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.button, button, input[type="submit"], .login .submit {
  background-color: var(--hp-accent) !important;
  color: #0a0a0a !important;
  border: 1px solid var(--hp-accent) !important;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.button:hover, button:hover, input[type="submit"]:hover, .login .submit:hover {
  background-color: var(--hp-accent-d) !important;
  border-color: var(--hp-accent-d) !important;
  color: #0a0a0a !important;
}
.button.button-outline {
  background-color: transparent !important;
  color: var(--hp-text) !important;
  border: 1px solid var(--hp-border2) !important;
}
.button.button-outline:hover {
  background-color: var(--hp-surface2) !important;
  border-color: var(--hp-accent) !important;
  color: var(--hp-text) !important;
}

/* ── States ───────────────────────────────────────────────────────────── */
.error {
  background-color: #3a1117 !important;
  color: #ffd7dc !important;
  border: 1px solid var(--hp-danger) !important;
  border-radius: 6px;
}

/* ── Archive list + pagination ────────────────────────────────────────── */
.archive .row, .archive li { border-color: var(--hp-border) !important; }
.pagination, .pagination a, .pagination .right {
  color: var(--hp-text) !important; background-color: transparent !important;
}
.pagination a:hover { color: var(--hp-accent) !important; }