/* ============================================================
   Bruno Truant - Listmonk public pages custom CSS
   Da incollare in: Listmonk Settings > Appearance > Public CSS
   Coerente con design system di brunotruant.com (paper/ink/amber).
   ============================================================ */

/* ---------- Tokens (OKLCH source, hex fallback) ---------- */
:root {
  --paper:         oklch(0.972 0.008 80);
  --paper-shade:   oklch(0.945 0.011 78);
  --paper-deep:    oklch(0.918 0.013 75);
  --ink:           oklch(0.18  0.012 60);
  --ink-soft:      oklch(0.34  0.012 60);
  --ink-mute:      oklch(0.55  0.010 60);
  --hairline:      oklch(0.85  0.012 70);
  --hairline-soft: oklch(0.90  0.010 75);
  --amber:         oklch(0.70  0.16  60);
  --amber-deep:    oklch(0.55  0.16  50);

  --serif-display: 'Fraunces', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --serif-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --measure:    62ch;
  --bleed:      clamp(1.5rem, 5vw, 3.5rem);
  --canvas:     min(640px, 100% - var(--bleed) * 2);
  --easing:     cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fallback per browser che non supportano oklch */
@supports not (color: oklch(0 0 0)) {
  :root {
    --paper:         #F7F1E5;
    --paper-shade:   #EFE9DA;
    --paper-deep:    #E5DECD;
    --ink:           #1F1A14;
    --ink-soft:      #3D362D;
    --ink-mute:      #736B5F;
    --hairline:      #D6CFC0;
    --hairline-soft: #E0DACA;
    --amber:         #D49B5C;
    --amber-deep:    #A56A33;
  }
}

/* ---------- Reset essenziale ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sfondo paper con grana sottile dipinta in CSS, no immagini esterne */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in oklch, var(--amber) 4%, transparent), transparent 38%),
    radial-gradient(circle at 82% 78%, color-mix(in oklch, var(--ink) 3%, transparent), transparent 42%);
  z-index: 0;
}

/* Selection coerente col sito principale */
::selection { background: var(--amber); color: var(--paper); }

/* ---------- Container principale Listmonk ---------- */
.wrap, .container, body > section, .listmonk-form,
.subscription, #subscription {
  position: relative;
  z-index: 1;
  width: var(--canvas);
  margin: clamp(3rem, 8vh, 6rem) auto;
  padding: 0;
}

/* ---------- Eyebrow numerato (firma editoriale brunotruant) ---------- */
.bt-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.25rem;
}
.bt-eyebrow .num {
  color: var(--amber-deep);
  font-weight: 500;
}
.bt-eyebrow .sep {
  color: var(--hairline);
  font-weight: 400;
}

/* ---------- Display headline ---------- */
h1, .bt-headline {
  font-family: var(--serif-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.bt-headline em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--amber-deep);
}

/* ---------- Lead paragraph ---------- */
.bt-lead, .lead {
  font-family: var(--serif-body);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 2.5rem;
  text-wrap: pretty;
}
.bt-lead .dropcap {
  float: left;
  font-family: var(--serif-display);
  font-size: 3.6rem;
  line-height: 0.86;
  padding: 0.32rem 0.55rem 0 0;
  margin-top: 0.05rem;
  color: var(--amber-deep);
  font-weight: 500;
}

/* ---------- Hairline rule (separatore editoriale) ---------- */
.bt-rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 2rem 0 2.5rem;
}

/* ---------- Form ---------- */
form, .listmonk-form, .form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin: 0;
}
form > div { display: contents; }
form p { margin: 0; }

/* Campo (label + input) */
.bt-field, form > p:has(input[type="email"]), form > p:has(input[type="text"]) {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  cursor: pointer;
}

/* Input testuali: solo bottom-border, no box */
input[type="email"],
input[type="text"],
input[type="url"],
input[type="tel"] {
  font-family: var(--serif-body);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 0.55rem 0;
  width: 100%;
  outline: none;
  transition: border-bottom-color 220ms var(--easing),
              padding-bottom 220ms var(--easing);
}
input[type="email"]::placeholder,
input[type="text"]::placeholder,
input[type="url"]::placeholder,
input[type="tel"]::placeholder {
  color: var(--ink-mute);
  opacity: 0.6;
  font-style: italic;
}
input[type="email"]:hover,
input[type="text"]:hover {
  border-bottom-color: var(--ink-soft);
}
input[type="email"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus {
  border-bottom-color: var(--amber-deep);
  border-bottom-width: 2px;
  padding-bottom: calc(0.55rem - 1px);
}

/* ---------- Lists / Gruppi checkbox come card editoriali ---------- */
.bt-lists {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bt-lists-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.85rem;
}

/* Generic checkbox row (per Listmonk default markup) */
form label:has(> input[type="checkbox"]),
.bt-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hairline);
  background: color-mix(in oklch, var(--paper-shade) 50%, transparent);
  font-family: var(--serif-body);
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  transition: border-color 220ms var(--easing),
              background-color 220ms var(--easing);
}
form label:has(> input[type="checkbox"]:hover),
form label:has(> input[type="checkbox"]):hover,
.bt-checkbox:hover {
  border-color: var(--ink-soft);
  background: var(--paper-shade);
}
form label:has(> input[type="checkbox"]:checked),
.bt-checkbox:has(input:checked) {
  border-color: var(--amber-deep);
  background: color-mix(in oklch, var(--amber) 8%, var(--paper));
}

/* Custom checkbox visual */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  flex-shrink: 0;
  border: 1px solid var(--ink-mute);
  background: var(--paper);
  cursor: pointer;
  position: relative;
  transition: border-color 180ms var(--easing),
              background-color 180ms var(--easing);
}
input[type="checkbox"]:hover {
  border-color: var(--ink);
}
input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid var(--paper);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--amber-deep);
  outline-offset: 2px;
}

/* Description sotto checkbox name */
.bt-checkbox .name { font-weight: 500; line-height: 1.35; display: block; }
.bt-checkbox .desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.92rem;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* ---------- Submit button ---------- */
button[type="submit"],
input[type="submit"],
.bt-submit {
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--serif-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  padding: 1.1rem 1.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.5rem;
  align-self: flex-start;
  min-width: 200px;
  justify-content: center;
  transition: background-color 220ms var(--easing),
              color 220ms var(--easing),
              transform 220ms var(--easing);
}
button[type="submit"]:hover,
input[type="submit"]:hover,
.bt-submit:hover {
  background: var(--amber-deep);
}
button[type="submit"]:active,
input[type="submit"]:active,
.bt-submit:active {
  transform: translateY(1px);
}
button[type="submit"]:focus-visible,
input[type="submit"]:focus-visible,
.bt-submit:focus-visible {
  outline: 2px solid var(--amber-deep);
  outline-offset: 3px;
}

/* Freccia SVG inline post-CTA (decorativa) */
.bt-submit .arrow {
  width: 16px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform 220ms var(--easing);
}
.bt-submit:hover .arrow {
  transform: translateX(3px);
}

/* ---------- Privacy footnote ---------- */
.bt-privacy {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 1.75rem;
  max-width: var(--measure);
}
.bt-privacy a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--amber-deep);
  padding-bottom: 1px;
  transition: color 180ms var(--easing);
}
.bt-privacy a:hover { color: var(--amber-deep); }

/* ---------- Signoff / firma autore ---------- */
.bt-signoff {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.bt-signoff .name {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* ---------- Stato success / error (Listmonk pages) ---------- */
.success, .error, .info,
.message {
  font-family: var(--serif-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  background: var(--paper-shade);
  border-left: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-soft);
}
.success { border-top-color: var(--amber-deep); border-bottom-color: var(--amber-deep); }
.error   { border-top-color: var(--ink); border-bottom-color: var(--ink); color: var(--ink); }

/* ---------- Link generici dentro form ---------- */
a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--amber-deep), var(--amber-deep));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 220ms var(--easing);
}
a:hover { background-size: 100% 2px; }

/* ---------- Asymmetric optical break su desktop ---------- */
@media (min-width: 720px) {
  .wrap, .container, body > section, .listmonk-form,
  .subscription, #subscription {
    padding-left: clamp(0px, 4vw, 2.5rem);
  }
  button[type="submit"],
  input[type="submit"],
  .bt-submit {
    min-width: 240px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .bt-submit:hover .arrow { transform: none; }
}