/* ═══════════════════════════════════════════════════════════
   KF HIT — listmonk Public Pages Custom CSS
   Paste in: Settings → Appearance → Public (CSS)
   ═══════════════════════════════════════════════════════════ */

/* ── Brand tokens ─────────────────────────────────────────── */
:root {
  --kf-accent:        rgb(23, 173, 241);
  --kf-accent-dark:   rgb(16, 130, 190);
  --kf-accent-light:  rgba(23, 173, 241, 0.10);
  --kf-header-bg:     #2979b0;
  --kf-page-bg:       #e8eef2;
  --kf-card-bg:       #ffffff;
  --kf-text:          #333333;
  --kf-muted:         #888888;
  --kf-border:        #dde8ef;
  --kf-input-focus:   rgba(23, 173, 241, 0.15);
}

/* ── Page background ──────────────────────────────────────── */
html {
  background-color: var(--kf-page-bg) !important;
}

body {
  background: var(--kf-page-bg) !important;
  font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif !important;
  font-size: 15px;
  color: var(--kf-text);
}

/* ── Outer gutters ────────────────────────────────────────── */
.gutter {
  padding: 32px !important;
}

.gutter.fill {
  flex-grow: 1;
  padding: 0 !important;
}

/* ── Card / wrap ──────────────────────────────────────────── */
.wrap {
  background-color: var(--kf-card-bg) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10) !important;
  border: none !important;
  overflow: hidden;
}

.container.wrap {
  max-width: 525px !important;
  padding: 0 !important;
}

.container section { padding: 15px; }

/* ── Accent bar at top of card ────────────────────────────── */
.wrap::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--kf-accent-dark) 0%,
    var(--kf-accent)      50%,
    var(--kf-accent-dark) 100%
  );
}

/* ── Header (logo area) ───────────────────────────────────── */
.header {
  background: var(--kf-header-bg) !important;
  border-bottom: none !important;
  padding: 20px 30px !important;
  margin-bottom: 0 !important;
}

.header a,
.header a:link,
.header a:visited,
.header a:hover {
  color: var(--kf-accent) !important;
  text-decoration: none !important;
}

/* Logo image — let it render naturally on dark bg */
.header .logo img {
  width: auto;
}

.header .logo { text-align: center; }

/* ── Content area ─────────────────────────────────────────── */
.content {
  padding: 28px 30px !important;
  margin: 0 !important;
}

/* Headings */
.content h1,
.content h2,
.content .title {
  color: var(--kf-header-bg) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  line-height: 1.3 !important;
}

/* Body text */
.content p {
  color: var(--kf-text);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 12px;
}

/* List descriptions */
.description {
  color: var(--kf-muted) !important;
  font-size: 13px !important;
}

/* Links in content */
.content a:link,
.content a:visited {
  color: var(--kf-accent-dark) !important;
}
.content a:hover {
  color: var(--kf-accent) !important;
}

/* ── Form inputs ──────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
select,
.input {
  border: 1px solid var(--kf-border) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--kf-text) !important;
  background: #fff !important;
  padding: 8px 12px !important;
  width: 100% !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
.input:focus,
.input:active {
  border-color: var(--kf-accent) !important;
  box-shadow: 0 0 0 3px var(--kf-input-focus) !important;
  outline: none !important;
  background: #fff !important;
}

/* Labels */
label {
  color: var(--kf-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
}

/* Checkboxes — accent colour */
input[type="checkbox"] {
  accent-color: var(--kf-accent) !important;
  width: 15px;
  height: 15px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.button,
.form button,
input[type="submit"],
button[type="submit"] {
  background-color: var(--kf-accent) !important;
  border: none !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 10px 28px !important;
  line-height: 1.4 !important;
  height: auto !important;
  cursor: pointer !important;
  text-shadow: none !important;
  transition: background-color 0.2s !important;
  text-decoration: none !important;
}

.button:hover,
.form button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--kf-accent-dark) !important;
  color: #fff !important;
}

/* Secondary / small link-style button */
.small a {
  background-color: transparent !important;
  color: var(--kf-accent-dark) !important;
  border: 1px solid var(--kf-border) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 6px 16px !important;
}
.small a:hover {
  background-color: var(--kf-accent-light) !important;
  color: var(--kf-accent-dark) !important;
}

/* ── Footer ───────────────────────────────────────────────── */
footer.container {
  background: transparent !important;
  border-top: 1px solid var(--kf-border) !important;
  padding: 14px 30px !important;
  font-size: 11px !important;
  color: var(--kf-muted) !important;
  text-align: center !important;
  letter-spacing: 0.05em !important;
}

footer.container a,
footer.container a:link,
footer.container a:visited {
  color: var(--kf-muted) !important;
}

footer.container a:hover {
  color: var(--kf-accent) !important;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
  .gutter        { padding: 8px !important; }
  .content       { padding: 20px 18px !important; }
  .header        { padding: 16px 18px !important; }
  footer.container { padding: 12px 18px !important; }
}

/* ── Autofill aesthetics ──────────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0px 9999px #fff !important;
  -webkit-text-fill-color: var(--kf-text) !important;
  border-color: var(--kf-border) !important;
}

footer.container { display:none; }