/* The look of the Portal, written a second time.
 *
 * The guides are plain HTML rather than screens in the Flutter app, and that
 * is deliberate: the app paints into a canvas, so its pages carry zero text in
 * the DOM — measured, not assumed — which makes them unreadable to search
 * engines and hostile to ads. A guide nobody can find is a guide nobody reads.
 *
 * The price of that choice is this file: the palette below duplicates
 * lib/core/theme/pw_colors.dart. Keep the two in step. If a colour changes
 * there and not here, the seam between the tool and the guides becomes
 * visible, and looking like one site is the whole reason for the duplication.
 */

:root {
  --background: #0B0B1A;
  --surface: #13132A;
  --surface-raised: #1C1C38;
  --border: #2C2C4E;
  --text: #E8E8F4;
  --text-muted: #8F9BB8;
  --accent: #FFB454;
  --ok: #5FBAB9;
}

* { box-sizing: border-box; }

/* The one face that is not the system stack, and it is for headings only.
 *
 * The rule that used to sit below — no web font at all — was written about
 * body text, and it still holds there: a guide is text, and text that arrives
 * late is worse than text in a slightly different face. A heading is a
 * different bet. It is a handful of words, `font-display: swap` paints them
 * immediately in the fallback, and what the 46 KB buys is the guides sounding
 * like the app instead of like a plainer cousin of it.
 *
 * The file is the app's own, bundled by Flutter from assets/fonts/ and served
 * from the path below. One copy, two sites.
 */
@font-face {
  font-family: "Marcellus";
  src: url("/assets/assets/fonts/Marcellus-Regular.ttf") format("truetype");
  font-display: swap;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  /* The system stack, matching what Flutter falls back to on the web. Body
     text stays here on purpose — see the note above the @font-face. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* ---- the bar, matching the filter's ---- */

.topo {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
}

.topo-interno {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The wordmark is a script over an ornate globe: below about 40 px there is
   nothing left to read, and the phone header was showing a red smudge. The
   monogram is the same lettering with the globe and the words taken away, and
   it survives 30 px. Which one is shown is the media query at the bottom. */
.topo img { height: 46px; width: auto; display: block; }
.topo .marca-curta { display: none; }

.topo a { display: flex; align-items: center; text-decoration: none; }

.topo .secao {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ---- the column ---- */

main {
  /* Wider than this and the eye loses the start of the next line. */
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

h1 {
  font-size: 2rem;
  line-height: 1.3;
  margin: 0 0 8px;
  font-family: "Marcellus", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.2px;
}

h2 {
  font-size: 1.45rem;
  margin: 44px 0 12px;
  font-family: "Marcellus", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: var(--accent);
}

h3 { font-size: 1.1rem; margin: 30px 0 8px; font-weight: 700; }

.resumo {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0 0 36px;
}

p { margin: 0 0 18px; }

a { color: var(--accent); }
a:hover { text-decoration: none; }

strong { color: #fff; }

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

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

/* ---- images ---- */

figure { margin: 28px 0; }

/* Never stretched past its own pixels. A cropped panel out of a screenshot is
   often narrower than the column, and blowing it up to fill the width trades
   the one thing it was cropped for — being readable — for a tidier edge. */
figure img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

figcaption {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 8px;
  text-align: center;
}

/* ---- a call-out, for the thing that costs someone hours ---- */

.aviso {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 26px 0;
}

.aviso p:last-child { margin-bottom: 0; }

/* ---- the index's list of guides ---- */

.lista { display: grid; gap: 14px; margin-top: 28px; }

.guia {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}

.guia:hover { border-color: var(--accent); }
.guia .titulo { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.guia .linha { color: var(--text-muted); font-size: 0.92rem; }

/* A guide that does not exist yet is listed and dimmed, never hidden — the
   same rule the front page follows for its tools. A list showing only what is
   finished makes the place look like it stopped growing, and it turns every
   new guide into a surprise. It is a <div> and not an <a>: something that
   looks clickable and does nothing is worse than something that says it is not
   ready. */
.guia.em-breve { opacity: 0.55; cursor: default; }
.guia.em-breve:hover { border-color: var(--border); }

.guia .selo {
  float: right;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  margin-left: 10px;
}

/* ---- foot ---- */

footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 26px 20px 40px;
  line-height: 1.6;
}

footer a { color: var(--text-muted); }

/* A phone holds about 40 characters at this size; below 520 the heading has to
   give before the body text does. */
@media (max-width: 520px) {
  body { font-size: 16px; }
  h1 { font-size: 1.6rem; }
  main { padding: 28px 18px 60px; }
  .topo .marca-larga { display: none; }
  .topo .marca-curta { display: block; height: 32px; }
}