/* ==========================================================================
   Huntbase — Listmonk PUBLIC custom CSS
   Paste into: Settings → Appearance → Public → Custom CSS
   Covers the subscription / preferences / opt-in / unsubscribe pages and
   the public archive. Same tokens as src/themes/default.css.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("https://huntbase.io/assets/fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("https://huntbase.io/assets/fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --hb-primary-900: #3d157e;
  --hb-primary-600: #6f2cdc;
  --hb-primary-500: #7f34fa;
  --hb-primary-300: #dfc8fe;
  --hb-primary-200: #efe3fe;
  --hb-indigo-500: #4b2bfa;
  --hb-paper: #fcfbfe;
  --hb-ink: #14112b;
  --hb-ink-muted: #4a4560;
  --hb-rule: #e6e2f0;
  --hb-signal-ink: #0a6b45;
  --hb-error: #fa3d40;
  --hb-white: #ffffff;
  --hb-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hb-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  --hb-gradient: linear-gradient(135deg, var(--hb-primary-500) 0%, var(--hb-indigo-500) 100%);
}

/* --- Page ---------------------------------------------------------------- */
html { box-sizing: border-box; }
body {
  font-family: var(--hb-sans);
  background: var(--hb-paper);
  color: var(--hb-ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* A single soft violet bloom behind the card, echoing the site hero. */
  background-image: radial-gradient(60rem 32rem at 50% -12rem, rgba(127, 52, 250, 0.10), transparent 70%);
  background-repeat: no-repeat;
  min-height: 100vh;
}

.container, .wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25rem 3.5rem;
}

h1, h2, h3 {
  color: var(--hb-ink);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p { color: var(--hb-ink-muted); }
a { color: var(--hb-primary-600); text-decoration: none; }
a:hover { color: var(--hb-primary-500); text-decoration: underline; }
code, pre { font-family: var(--hb-mono); letter-spacing: -0.02em; }
hr { border: 0; border-top: 1px solid var(--hb-rule); margin: 2rem 0; }
::selection { background: var(--hb-primary-300); color: var(--hb-primary-900); }

/* --- Header / logo ------------------------------------------------------- */
.header {
  padding: 3rem 0 1.5rem;
  text-align: center;
  border: 0;
  background: transparent;
}
.header .logo img, .logo img, img.logo {
  max-height: 34px;
  width: auto;
}

/* --- The card ------------------------------------------------------------ */
.wrap > section,
.box, .content, form.subscription-form, .subscription-form {
  background: var(--hb-white);
  border: 1px solid var(--hb-rule);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 30px 80px -30px rgba(61, 21, 126, 0.25), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* --- Forms --------------------------------------------------------------- */
label { color: var(--hb-ink); font-weight: 600; letter-spacing: -0.01em; }
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  font-family: var(--hb-sans);
  font-size: 1rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  color: var(--hb-ink);
  background: var(--hb-white);
  border: 1px solid var(--hb-rule);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input[type="text"]:hover, input[type="email"]:hover, textarea:hover, select:hover {
  border-color: var(--hb-primary-300);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  outline: none;
  border-color: var(--hb-primary-500);
  box-shadow: 0 0 0 3px rgba(127, 52, 250, 0.15);
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--hb-primary-500);
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}
:focus-visible { outline: 2px solid var(--hb-primary-500); outline-offset: 2px; }

/* List picker rows */
ul.lists, .lists { list-style: none; padding: 0; }
ul.lists li, .lists li {
  border: 1px solid var(--hb-rule);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
  transition: border-color 120ms ease, background 120ms ease;
}
ul.lists li:hover, .lists li:hover {
  border-color: var(--hb-primary-300);
  background: var(--hb-paper);
}

/* --- Buttons ------------------------------------------------------------- */
button, input[type="submit"], .button {
  font-family: var(--hb-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: var(--hb-gradient);
  color: var(--hb-white);
  box-shadow: 0 8px 24px -6px rgba(127, 52, 250, 0.5);
  transition: transform 120ms ease, filter 120ms ease;
}
button:hover, input[type="submit"]:hover, .button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  color: var(--hb-white);
  text-decoration: none;
}
button:active, .button:active { transform: translateY(0); }
button.button-outline, .button-outline, button.secondary {
  background: transparent;
  border: 1px solid var(--hb-rule);
  color: var(--hb-ink);
  box-shadow: none;
}
button.button-outline:hover, .button-outline:hover, button.secondary:hover {
  background: var(--hb-primary-200);
  color: var(--hb-primary-900);
}

/* --- Messages ------------------------------------------------------------ */
.message, .messagebox, .error, .success {
  border-radius: 12px;
  padding: 1rem 1.15rem;
  border: 1px solid var(--hb-rule);
  background: var(--hb-primary-200);
  color: var(--hb-primary-900);
}
.message.error, .error {
  background: rgba(250, 61, 64, 0.10);
  border-color: rgba(250, 61, 64, 0.3);
  color: #9c1214;
}
.message.success, .success {
  background: rgba(2, 223, 132, 0.12);
  border-color: rgba(2, 223, 132, 0.35);
  color: var(--hb-signal-ink);
}

/* --- Archive ------------------------------------------------------------- */
.archive .campaign, .campaigns li, .archive li {
  background: var(--hb-white);
  border: 1px solid var(--hb-rule);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  list-style: none;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.archive .campaign:hover, .campaigns li:hover, .archive li:hover {
  border-color: var(--hb-primary-300);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -4px rgba(61, 21, 126, 0.10);
}
.archive .campaign h3 a { color: var(--hb-ink); }
.archive .campaign .meta, .meta, time, .date {
  color: var(--hb-ink-muted);
  font-family: var(--hb-mono);
  font-size: 0.8rem;
  letter-spacing: -0.02em;
}

/* --- Footer -------------------------------------------------------------- */
.footer {
  padding: 2.5rem 0 3rem;
  text-align: center;
  color: var(--hb-ink-muted);
  font-size: 0.85rem;
  border: 0;
  background: transparent;
}
.footer a { color: var(--hb-ink-muted); text-decoration: underline; }
.footer a:hover { color: var(--hb-primary-600); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}