/* ============================================================================
 * Listmonk — Appearance / Public Pages
 * ============================================================================
 * Paste this CSS into:  Listmonk-Admin → Settings → Appearance → Public
 *
 * Targets the public-facing pages: subscription form, opt-in confirmation,
 * unsubscribe, view-in-browser, success/error pages. NOT the admin UI.
 *
 * Listmonk's default style.css (https://github.com/knadh/listmonk/blob/master/static/public/static/style.css)
 * uses hardcoded colours (#0055d4 blue) — this file overrides them with the
 * Ferienlounge brand (#0cadac teal) and adds dark-mode support via
 * `@media (prefers-color-scheme: dark)`.
 *
 * Source of truth lives in the repo. When changing, update here, then
 * paste into Listmonk-Admin and Save.
 * ============================================================================ */

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;

  /* Brand */
  --brand:                 #0cadac;
  --brand-hover:           #098e8d;
  --brand-fg:              #ffffff;

  /* Light mode palette */
  --bg-page:               #f5f5f3;
  --bg-card:               #ffffff;
  --text-body:             #2a2a2a;
  --text-muted:            #6a7170;
  --border-soft:           #e5e7e5;
  --border-input:          #d4d8d6;
  --error:                 #c53030;
  --shadow:                0 2px 12px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand:               #5fd9d8;
    --brand-hover:         #0cadac;
    --brand-fg:            #0a1f1e;

    --bg-page:             #0f1113;
    --bg-card:             #1a1d20;
    --text-body:           #e6e6e6;
    --text-muted:          #9aa0a6;
    --border-soft:         #2a2e33;
    --border-input:        #353a40;
    --error:               #fc8181;
    --shadow:              0 2px 16px rgba(0, 0, 0, 0.4);
  }
}

/* ----------------------------------------------------------------------------
 * Page + container
 * -------------------------------------------------------------------------- */
html, body {
  background-color: var(--bg-page) !important;
  color: var(--text-body) !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.container {
  max-width: 560px !important;
}

.wrap {
  background-color: var(--bg-card) !important;
  color: var(--text-body) !important;
  padding: 48px !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent) !important;
}

@media (max-width: 600px) {
  .wrap {
    padding: 28px !important;
    border-radius: 0 !important;
  }
}

/* ----------------------------------------------------------------------------
 * Header / branding area
 * -------------------------------------------------------------------------- */
.header {
  border-bottom: 1px solid var(--border-soft) !important;
  padding-bottom: 24px !important;
  margin-bottom: 32px !important;
}

.header .logo,
.header h1,
.header h2 {
  color: var(--brand) !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------------------------
 * Typography
 * -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--text-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

p, li, label, span, div {
  color: var(--text-body);
}

.small,
.text-muted {
  color: var(--text-muted) !important;
  font-size: 0.875em !important;
}

a {
  color: var(--brand) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}

a:hover {
  border-bottom-color: var(--brand) !important;
}

/* ----------------------------------------------------------------------------
 * Form fields
 * -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  background-color: var(--bg-card) !important;
  color: var(--text-body) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent) !important;
  outline: none !important;
}

input[disabled] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

label {
  font-weight: 500 !important;
  color: var(--text-body) !important;
}

/* ----------------------------------------------------------------------------
 * Buttons — outline by default, fills with brand color on hover.
 * Matches Ferienlounge website button style (square corners, uppercase,
 * tracked letter-spacing, 2px brand border).
 * -------------------------------------------------------------------------- */
.button,
button.button,
input[type="submit"].button,
.button.button-outline {
  background-color: transparent !important;
  color: var(--brand) !important;
  border: 2px solid var(--brand) !important;
  border-radius: 0 !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 140ms ease, color 140ms ease;
}

.button:hover,
button.button:hover,
input[type="submit"].button:hover,
.button.button-outline:hover {
  background-color: var(--brand) !important;
  color: var(--brand-fg) !important;
  border-bottom-color: var(--brand) !important;
}

/* ----------------------------------------------------------------------------
 * Sections, lists, messages
 * -------------------------------------------------------------------------- */
.section {
  margin-bottom: 36px !important;
}

.lists,
.lists li {
  list-style: none !important;
  padding: 0 !important;
}

.lists li {
  padding: 14px 16px !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
}

.lists li:hover {
  border-color: var(--brand) !important;
}

.error {
  color: var(--error) !important;
  background-color: color-mix(in srgb, var(--error) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
}

/* ----------------------------------------------------------------------------
 * Pagination, archive, misc
 * -------------------------------------------------------------------------- */
.pagination a,
.archive a {
  color: var(--brand) !important;
}

.unsub-all {
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--border-soft) !important;
}

/* Footer (if any) */
.container.footer {
  margin-top: 32px !important;
  font-size: 0.85em !important;
  color: var(--text-muted) !important;
  text-align: center !important;
}