/* Montana Climate Office — Listmonk public pages
 * ------------------------------------------------------------------
 * Brands the hosted subscription form, opt-in/unsubscribe pages, and
 * archive. Matches email/newsletter.mjml (the website's Minimal Mistakes
 * "air" skin — teal-blue accent), so emails and web pages look like one
 * system.
 *
 * APPLY: Listmonk admin → Settings → Appearance → "Public" tab →
 *        paste into "Custom CSS" → Save. (Served as /public/custom.css.)
 *
 * Palette (from newsletter.mjml):
 *   #52adc8 teal accent  ·  #2a7f9e links/hover  ·  #1f2d33 headings
 *   #333 text  ·  #f2f3f3 page bg  ·  #fff card  ·  #8a8a8a muted
 * ------------------------------------------------------------------ */

:root {
  --mco-teal: #52adc8;
  --mco-teal-dark: #2a7f9e;
  --mco-ink: #1f2d33;
  --mco-text: #333333;
  --mco-bg: #f2f3f3;
  --mco-card: #ffffff;
  --mco-muted: #8a8a8a;
}

body {
  background: var(--mco-bg);
  color: var(--mco-text);
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* White card on the grey page, with the teal accent band like the email header */
.container.wrap {
  background: var(--mco-card);
  max-width: 560px;
  margin: 32px auto;
  padding: 0 0 28px;
  border-top: 5px solid var(--mco-teal);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(31, 45, 51, 0.12);
  overflow: hidden;
}

.header {
  background: var(--mco-card);
  text-align: center;
  padding: 24px 0 12px;
  border-bottom: 1px solid #ececec;
}
.header .logo img { max-height: 72px; width: auto; }

section { padding: 24px 28px 0; }

h1, h2, h3 { color: var(--mco-ink); }
a { color: var(--mco-teal-dark); }
a:hover { text-decoration: underline; }

/* Form fields */
.form input[type="email"],
.form input[type="text"] {
  width: 100%;
  border: 1px solid #ccd2d4;
  border-radius: 4px;
  padding: 10px 12px;
}
.form input:focus {
  outline: none;
  border-color: var(--mco-teal);
  box-shadow: 0 0 0 2px rgba(82, 173, 200, 0.25);
}
label { color: var(--mco-ink); font-weight: 600; }

/* Buttons / submit */
button,
input[type="submit"],
.button {
  background: var(--mco-teal);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 11px 20px;
  font-size: 16px;
  cursor: pointer;
}
button:hover,
input[type="submit"]:hover,
.button:hover { background: var(--mco-teal-dark); }

/* List checkboxes + helper text */
.lists { list-style: none; padding-left: 0; }
.lists h2 {
  font-size: 13px;
  color: var(--mco-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
small, .help, .gray { color: var(--mco-muted); }