/* Conversa — conversa.im
   Shared stylesheet. Palette + rules from docs/BRAND.md ("Azulejo Modern").
   Plain CSS, no build step.

   Light only — no prefers-color-scheme branch (removed 2026-07-20). The surveyed
   comparators all ship light-only marketing sites: Duolingo, Babbel, Langua and Busuu
   each render light with the browser forced to dark. A dark palette here doubles the
   surface to maintain and verify on a three-page static site for no user benefit. */

:root {
  /* Tells the browser this page is light-only, so it won't auto-darken form controls,
     scrollbars or the like for users whose OS is set to dark. */
  color-scheme: light;

  --azulejo: #1E5AA8;
  --nata: #FAF6EE;
  --atlantico: #14273D;
  --branco: #FFFFFF;
  --eletrico: #FFC233;
  --terracota: #C4573F; /* text-safe variant */
  --alecrim: #2E7D4F;
  --ginja: #C93B4C;
  --muted: #4C5D70;
  --border: rgba(20, 39, 61, 0.12);

  /* Header mark (BRAND.md §6 "Light-background lockup"). The bubble is the logo, so
     in-page it carries no tile — the bubble body itself is filled and the waveform sits
     inside it. The bars therefore sit ON ink, which is why they take the lifted ramp.
     Do not point these at --alecrim/--ginja: those are tuned to sit on white and go
     swampy against an ink bubble. */
  --logo-bubble: #0E1A28;
  --logo-wave: #4CAF7A;
  --logo-wave-accent: #E4606F;

  --font-display: "Nunito", ui-rounded, -apple-system, "Segoe UI", sans-serif;
  --font-body: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius-card: 16px;
  --radius-button: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--nata);
  color: var(--atlantico);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Header ---- */

.site-header {
  padding: 20px 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--atlantico);
}

/* No border-radius: the in-page mark is the bare bubble, not a tile. */
.brand svg { display: block; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.site-nav { display: flex; gap: 20px; }

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-nav a:hover { color: var(--azulejo); }

/* ---- Hero ---- */

.hero { padding: 56px 0 40px; }

.kicker {
  color: var(--terracota);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 12px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 17ch;
}

h1 .accent { color: var(--azulejo); }

.hero .lede {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 0 28px;
}

.status-pill {
  display: inline-block;
  background: var(--eletrico);
  color: #14273D; /* Atlântico on Elétrico in both modes, per brand rule */
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px 14px;
  border-radius: 999px;
}

/* Decorative azulejo tile row */
.tile-row {
  display: flex;
  gap: 8px;
  padding: 40px 0 8px;
}

.tile-row span {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--azulejo);
  opacity: 0.9;
}

.tile-row span:nth-child(4n+2) { opacity: 0.35; }
.tile-row span:nth-child(7)   { background: var(--eletrico); opacity: 1; }

/* ---- Sections ---- */

section { padding: 40px 0; }

h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.section-lede {
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 28px;
}

/* Feature tiles */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 620px) {
  .tile-grid { grid-template-columns: 1fr; }
}

.tile {
  background: var(--branco);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
}

.tile h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.tile p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
}

.tile .pt {
  color: var(--azulejo);
  font-weight: 600;
}

/* Authenticity example table */

.lint-examples {
  background: var(--branco);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 8px 24px;
  max-width: 560px;
}

.lint-examples table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.02rem;
}

.lint-examples td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}

.lint-examples tr:last-child td { border-bottom: none; }

.lint-examples .br {
  color: var(--ginja);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.lint-examples .pt {
  color: var(--alecrim);
  font-weight: 600;
}

.lint-examples .arrow { color: var(--muted); text-align: center; width: 2em; }

/* ---- Text pages (privacy, support) ---- */

.page { padding: 24px 0 48px; }

.page h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  max-width: none;
}

.page h2 { font-size: 1.3rem; margin-top: 36px; }

.page p, .page li { color: var(--atlantico); max-width: 70ch; }

.page .meta { color: var(--muted); font-size: 0.95rem; }

main a { color: var(--azulejo); }

.note {
  background: var(--branco);
  border: 1px solid var(--border);
  border-left: 4px solid var(--eletrico);
  border-radius: 8px;
  padding: 12px 16px;
  max-width: 70ch;
}

/* ---- Footer ---- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 28px 0 40px;
  color: var(--muted);
  font-size: 0.92rem;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
}

.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--azulejo); }

/* ---- Blog ---- */

.post-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}

.post-list li {
  padding: 0 0 24px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--border);
}

.post-list li:last-child { border-bottom: 0; }

.post-list li > a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--atlantico);
}

.post-list li > a:hover { color: var(--azulejo); }

.post-list-meta,
.post .meta {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 4px 0 8px;
}

.post > h1 { margin-bottom: 4px; }

/* Long-form measure — comfortably shorter than the 960px container, which is
   tuned for marketing sections rather than paragraphs of prose. */
.post p,
.post ul,
.post ol { max-width: 68ch; }

.post h2 {
  margin-top: 40px;
  font-size: 1.5rem;
}

.post table {
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.98rem;
}

.post th,
.post td {
  text-align: left;
  padding: 8px 20px 8px 0;
  border-bottom: 1px solid var(--border);
}

.post th {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.post hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0 24px;
}

.post > p:last-child {
  color: var(--muted);
  font-size: 0.95rem;
}

.post-back { margin-top: 40px; }