/* The guides: the page that lists them and each guide; the column of text
   and what else they share with the primer is in reading.css. */

.guide .updated {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  color: var(--muted);
}

/* Sections set well apart from each other, every other one a grey band
   (.band in style.css), so a long page has a rhythm. */
.guide section {
  padding-block: clamp(2rem, 6vw, 3rem);
}

.guide section > :last-child {
  margin-bottom: 0;
}

.guide h2 {
  font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.125rem);
}

/* A subheading sits close to the text it heads and away from the one
   before. */
.guide h3 {
  margin: 1.75rem 0 0.5rem;
}

.guide h2 + h3 {
  margin-top: 0;
}

.guide li {
  margin-bottom: 0.5rem;
}

/* A message the reader could send: white, inside a thin line, as a message
   in a chat is; the grey box is kept for the answer in short. */
.guide blockquote {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--background);
}

.guide blockquote p {
  margin: 0;
}

/* The answer in short: a grey box, as text set apart is, its steps
   numbered, each a link to the section that says more. */
.guide .short {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--surface);
}

.guide .short h2 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.guide .short p {
  margin: 0 0 0.75rem;
  font-weight: 700;
}

.guide .short ol {
  margin: 0;
}

/* Each step is a link, plain until the pointer or the keyboard reaches it,
   with an arrow that says it leads on; a column of underlined lines would
   read heavier than the list it is. */
.guide .short a {
  color: inherit;
  text-decoration: none;
}

.guide .short a::after {
  content: " →" / "";
}

.guide .short a:hover,
.guide .short a:focus-visible {
  text-decoration: underline;
}

/* Where the contents stand in the text's column, right after the answer in
   short they would be a second list of the same links; the steps lead to
   the sections there. Beside the text, on a wide screen, they stay. */
@media (max-width: 69.99rem) {
  .guide .short + .contents {
    display: none;
  }
}

/* The sources: folded between two lines under their title, as the questions
   on the home page are, in small print once opened. */
.guide .sources {
  margin-block: clamp(1.5rem, 5vw, 3rem) 0;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
  font-size: 1rem;
}

.guide .sources summary {
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
}

.guide .sources ol {
  margin: 1rem 0 0;
}

/* On the page that lists them, each guide between two lines. */
.guide .guide-card {
  border-top: 1px solid var(--line);
}

.guide .guide-card h2 {
  margin-bottom: 0.5rem;
}

.guide .guide-card .updated {
  margin: 0;
}

/* The whole card reads as one link: its title thickens under the pointer. */
.guide .guide-card h2 a:hover,
.guide .guide-card h2 a:focus-visible {
  text-decoration-thickness: 3px;
}

/* On a narrow phone the button's words wrap evenly. */
.guide .offer .button {
  text-wrap: balance;
}

/* A page shorter than the screen keeps its footer at the bottom, not
   halfway up an empty screen. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

body > header,
body > main,
body > footer {
  width: 100%;
}

body > main {
  flex: 1 0 auto;
}