/* Authorized Path Forward · page.css
   Page compositions: the three steps on the home page, the link dressed as
   a button, the picture of our email with its green code box, the company's
   statement on /about/, the contact cards and the Not found page.
   There is no animation on this site. */

/* The three steps. Each number sits in a small green box, like the code. */
.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  counter-reset: step;
  display: grid;
  gap: var(--space-4);
}

.steps li,
.steps li + li {
  position: relative;
  margin: 0;
  padding-left: calc(2.25rem + var(--space-3));
  min-height: 2.25rem;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--border-thin) solid var(--color-code-border);
  border-radius: var(--radius-sm);
  background: var(--color-code-bg);
  color: var(--color-code);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: calc(2.25rem - 2 * var(--border-thin));
  text-align: center;
}

/* A link that looks like a button; it remains a link. */
.button {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-button-primary-bg);
  color: var(--color-button-text-on-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.button:hover {
  background: var(--color-button-primary-hover);
  color: var(--color-button-text-on-primary);
}

/* The role addresses on the home page: a long address may break anywhere. */
.addresses a {
  overflow-wrap: anywhere;
}

/* The picture of our email (/emails/): the From and Subject lines, then the
   message as it is laid out, a white card on the email's grey page with the
   code in its green box. Words only; nothing is loaded. */
.mail {
  margin: var(--space-5) 0 var(--space-6);
  border: var(--border-thin) solid var(--color-border-container);
  border-radius: var(--radius-md);
  background: var(--color-surface-container);
  overflow: hidden;
}

.mail__head {
  padding: var(--space-4);
  border-bottom: var(--border-thin) solid var(--color-border-container);
}

.mail__head dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.mail__head dt {
  color: var(--color-text-secondary);
}

.mail__head dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.mail__card {
  margin: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-page);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-low);
}

.mail__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-mail-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.mail__code {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-code-border);
  border-radius: var(--radius-md);
  background: var(--color-code-bg);
  color: var(--color-code);
  font-size: var(--text-code);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  line-height: var(--leading-tight);
  text-align: center;
}

.mail__text {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.mail__text:last-child {
  margin-bottom: 0;
}

.mail__text strong {
  font-weight: var(--weight-bold);
}

.mail figcaption {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-thin) solid var(--color-border-container);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

@media (max-width: 479px) {
  .mail__head dl {
    grid-template-columns: 1fr;
  }

  .mail__head dt {
    margin-top: var(--space-2);
  }

  .mail__head dt:first-child {
    margin-top: 0;
  }
}

@media (min-width: 480px) {
  .mail__head,
  .mail figcaption {
    padding-inline: var(--space-5);
  }

  .mail__card {
    margin: var(--space-5);
    padding: var(--space-5);
  }
}

/* The company's own words on /about/, set apart from the site's voice. */
.statement {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: var(--border-band) solid var(--color-border-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface-container);
}

.statement p {
  margin: 0;
}

/* Contact cards: one per address, each with the accent along its edge. */
.contacts {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.contacts li,
.contacts li + li {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: var(--border-thin) solid var(--color-border-container);
  border-left: var(--border-band) solid var(--color-border-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface-page);
}

.contacts strong {
  display: block;
  font-size: var(--text-md);
  margin-bottom: var(--space-1);
}

.contacts a {
  overflow-wrap: anywhere;
}

/* Not found. */
.notfound h1 {
  margin-bottom: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}