/* ============================================================
   Zehlendorf Journal — Listmonk public theme
   Paste into: Settings → Appearance → Public → Custom CSS
   ============================================================ */

/* Google Fonts — IBM Plex everywhere */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --zj-paper:    #f4ede0;
  --zj-paper-2:  #fbf6ec;
  --zj-ink:      #1a1814;
  --zj-ink-2:    #3b362d;
  --zj-mute:     #6b6457;
  --zj-rule:     #cdc2ab;
  --zj-rule-2:   #ddd2bb;
  --zj-accent:   #274232;   /* forest green */
  --zj-accent-2: #1c3026;
  --zj-danger:   #8b2a1f;
}

/* ---------- Page canvas ---------- */
html, body{
  background: var(--zj-paper);
  background-image:
    radial-gradient(ellipse at top, rgba(39,66,50,.05), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(139,42,31,.04), transparent 55%);
  color: var(--zj-ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container.wrap{
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 24px 32px;
  flex: 1;
}

/* ---------- Header / masthead ---------- */
/* The JS injects .zj-masthead before .header. Listmonk's default
   header renders a logo image — hide the whole thing so only our
   typographic masthead shows. */
.container.wrap > header.header,
.header{
  display: none !important;
}

.zj-masthead{
  text-align: center;
  border-bottom: 1px solid var(--zj-ink);
  padding: 8px 0 18px;
  margin-bottom: 40px;
}
.zj-masthead h1.zj-title{
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(34px, 6vw, 46px);
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0;
  color: var(--zj-ink);
}
.zj-masthead .zj-tagline{
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--zj-mute);
  margin-top: 14px;
}

/* ---------- Card / form panel ---------- */
/* Different Listmonk versions wrap the form in either .wrap-small,
   .box, or a bare <section data-om-id="31623896:120">. Match all three so the cream card
   treatment is applied consistently. */
.wrap-small,
.box,
.container.wrap > section{
  background: var(--zj-paper-2);
  border: 1px solid var(--zj-rule);
  border-radius: 2px;
  padding: 36px 40px 32px;
  margin: 0 auto;
  max-width: 100%;
  box-shadow:
    0 1px 0 rgba(26,24,20,.04),
    0 24px 50px -28px rgba(26,24,20,.18);
}

/* ---------- Headings ---------- */
h1, h2, h3{ color: var(--zj-ink); }
h2{
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -.015em;
  margin: 0 0 8px;
}
h3{
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--zj-mute);
  font-weight: 500;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--zj-rule-2);
}

/* The optional intro paragraph above the form */
.wrap-small > p:first-of-type:not(:has(input)),
.container.wrap > section > p:first-of-type:not(:has(input)){
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--zj-ink-2);
  margin: 0 0 26px;
}

/* ---------- Form fields ---------- */
/* Listmonk's subscription form wraps fields as form > div > p, so we
   target both shapes. */
form#form > p,
form.form > p,
form.form > div > p,
form > p{
  margin: 0 0 14px;
  display: block;
}
form.form > div{ display: contents; }

/* The <label for="email" data-om-id="31623896:121">E-Mail</label> sits above the input as an
   eyebrow — small, mono, uppercase. */
form.form label[for],
form#form label[for]{
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--zj-mute);
  margin: 4px 0 2px;
  font-weight: 500;
}

/* Hide the hidden nonce input completely. */
input.nonce,
input[name="nonce"]{ display: none !important; }

input[type="email"],
input[type="text"],
input[type="password"]{
  width: 100%;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  color: var(--zj-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--zj-rule);
  padding: 14px 2px 10px;
  outline: none;
  border-radius: 0;
  transition: border-color .15s ease;
}
input::placeholder{ color: #a89e88; }
input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus{
  border-bottom-color: var(--zj-accent);
}

/* Lists (the editions / mailing lists)
   Robust against Listmonk variants that put the checkbox either inside
   or as a sibling of the label — we lay the <li data-om-id="31623896:122"> out as a grid so the
   checkbox always sits left of the name, with description below. */
ul.lists,
ul.no-bullets{
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
ul.lists li{
  padding: 10px 0;
  border-bottom: 1px dashed var(--zj-rule-2);
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  row-gap: 4px;
  align-items: baseline;
}
ul.lists li:last-child{ border-bottom: 0; }

ul.lists li > input[type="checkbox"]{ grid-column: 1; grid-row: 1; }
ul.lists li > label,
ul.lists li > label:not(:has(input)){
  grid-column: 2; grid-row: 1;
  display: inline;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--zj-ink);
}
ul.lists li > label:has(input[type="checkbox"]){
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 10px;
}
ul.lists li > .description,
ul.lists li > p{ grid-column: 2; grid-row: 2; }
ul.lists input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid var(--zj-mute);
  border-radius: 2px;
  margin-top: 2px;
  cursor: pointer;
  background: #fff;
  position: relative;
}
ul.lists input[type="checkbox"]:checked{
  background: var(--zj-accent);
  border-color: var(--zj-accent);
}
ul.lists input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--zj-paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
ul.lists .description,
.description{
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--zj-mute);
  margin: 4px 0 0 30px;
}

/* ---------- Consent / opt-in checkbox ----------
   Listmonk's subscription form does not render a separate consent box
   by default — the act of submitting is the consent. To meet GDPR
   expectations in Germany, we insert one via JS (see custom.js) and
   style it here. We also style any agree/consent checkboxes Listmonk
   itself may render on the manage page. */
.zj-consent{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0 6px;
  padding: 14px 16px;
  background: rgba(39, 66, 50, .04);
  border: 1px solid var(--zj-rule-2);
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--zj-ink-2);
  cursor: pointer;
}
.zj-consent input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  flex: 0 0 18px;
  border: 1px solid var(--zj-mute);
  border-radius: 2px;
  margin-top: 1px;
  cursor: pointer;
  background: #fff;
  position: relative;
}
.zj-consent input[type="checkbox"]:checked{
  background: var(--zj-accent);
  border-color: var(--zj-accent);
}
.zj-consent input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--zj-paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.zj-consent a{
  color: var(--zj-accent);
  text-decoration: underline;
  text-decoration-color: var(--zj-rule);
}

/* Submit button */
input[type="submit"],
button[type="submit"],
.button{
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  padding: 14px 20px;
  background: var(--zj-accent);
  color: var(--zj-paper);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-top: 8px;
  transition: background .15s ease, transform .1s ease;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.button:hover{ background: var(--zj-accent-2); }
input[type="submit"]:active{ transform: translateY(1px); }

/* Links */
a{
  color: var(--zj-accent);
  text-decoration: underline;
  text-decoration-color: var(--zj-rule);
  text-underline-offset: 3px;
}
a:hover{ text-decoration-color: var(--zj-accent); }

/* Status boxes (success / error / info messages) */
.box.success,
.box.error,
.box.info{
  border-left: 3px solid var(--zj-accent);
  padding-left: 36px;
}
.box.error{ border-left-color: var(--zj-danger); }

/* ---------- Footer ---------- */
footer.container{
  max-width: 640px;
  margin: 32px auto 0;
  padding: 24px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--zj-mute);
  border-top: 1px solid var(--zj-rule);
}
footer.container::before{ content: "— "; color: var(--zj-rule); }
footer.container::after { content: " —"; color: var(--zj-rule); }
footer.container a{
  color: var(--zj-ink-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--zj-rule);
}

/* Defensive: hide any stray admin links the page might render */
a[href^="/admin"],
a[href*="/admin/"]{ display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 560px){
  .container.wrap{ padding: 36px 16px 24px; }
  .wrap-small, .box,
  .container.wrap > section{ padding: 28px 22px 24px; }
  .zj-masthead h1.zj-title{ font-size: 34px; }
  .zj-masthead .zj-tagline{ font-size: 9.5px; letter-spacing: .2em; }
}
</li></section>
.container.wrap > .zj-masthead { text-align: center !important; }