/*
 * The public pages: landing, FAQ, submitting, privacy, terms.
 *
 * Same tokens as the application, wider measure. These pages are read rather than used, and the
 * admin screens' narrow column is wrong for prose - but the typography has to match, because
 * somebody who signs up should not feel they have arrived somewhere else.
 */

.site-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  border-bottom: var(--border);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The name. The links beside it are styled with the application's, in app.css. */
.site-nav [data-brand] {
  color: var(--ink-muted);
  text-decoration: none;
}

.site-nav [data-brand]:hover,
.site-nav [data-brand][aria-current="page"] {
  color: var(--ink);
}

/* Pushes the links away from the brand on a wide screen. It is a flex item, so when the bar wraps
   it takes a whole row to itself and leaves the links stranded below an empty line - which is what
   a narrow screen used to show. Below the breakpoint it is gone and the bar stacks instead. */
.site-nav__spacer {
  flex: 1;
}

.site-nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

/* One line for the name, one for the links, rather than a ragged three where the break lands
   wherever the longest label happens to put it. */
@media (max-width: 40rem) {
  .site-nav {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .site-nav__spacer {
    display: none;
  }

  /* The four labels need 345px at the desktop gap and a 375px phone offers 343, so the last one
     wrapped on its own. Twelve pixels between them fits all four on one line with room spare,
     and still reads as separated. Narrower than about 340px they wrap, which is honest. */
  .site-nav__links {
    gap: var(--space-2) var(--space-3);
  }

  /* Once the Menu button works, the name and the button share one row and the links drop down
     beneath them. */
  .site-nav[data-nav-menu] {
    flex-direction: row;
    justify-content: space-between;
  }
}

.prose {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
}

.prose h2 {
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  margin: var(--space-6) 0 var(--space-3);
}

.prose h3 {
  font-family: var(--font-editorial);
  font-size: var(--text-lg);
  margin: var(--space-5) 0 var(--space-2);
}

.prose p,
.prose li {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-body);
}

.prose ul,
.prose ol {
  padding-left: var(--space-5);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose a {
  color: var(--accent);
}

/* ---------------------------------------------------------------- hero */

.hero {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-6);
  text-align: center;
}

.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
}

.hero__title {
  font-family: var(--font-editorial);
  font-size: var(--text-masthead);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  color: var(--ink);
}

.hero__lede {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0 auto var(--space-5);
  max-width: 34em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: stretch;
}

/* Every action the same size, two to a row - four buttons each as wide as its own label looked
   like a row of odds and ends. One to a row on a phone. */
.hero__actions > a,
.hero__actions > button {
  display: inline-flex;
  flex: 0 1 21rem;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
}

@media (max-width: 40rem) {
  .hero__actions > a,
  .hero__actions > button {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------- sections */

.band {
  border-top: var(--border);
  background: var(--surface);
}

.band--plain {
  background: transparent;
}

.band__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4);
}

.band__title {
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  text-align: center;
  margin: 0 0 var(--space-5);
}

.columns {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.column h3 {
  font-family: var(--font-editorial);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}

.column p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0;
}

/* ---------------------------------------------------------------- price */

.price {
  text-align: center;
}

.price__amount {
  font-family: var(--font-editorial);
  font-size: var(--text-masthead);
  color: var(--ink);
}

.price__period {
  font-size: var(--text-base);
  color: var(--ink-muted);
}

.price__note {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  color: var(--ink-body);
}

/* ---------------------------------------------------------------- faq */

/* A native <details>, so it opens without JavaScript, answers a keyboard, and is findable by the
   browser's own find-on-page - which a div pretending to be a disclosure is not. */
.faq__item {
  border-bottom: var(--border);
}

.faq__item:first-of-type {
  border-top: var(--border);
}

.faq__question {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-editorial);
  font-size: var(--text-lg);
  color: var(--ink);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
}

/* Safari shows its own triangle through a different pseudo-element than everybody else. */
.faq__question::-webkit-details-marker {
  display: none;
}

/* Drawn from two borders rather than written as a character. A glyph depends on the reader's
   fonts, and the escape that was here reached the stylesheet as a control character followed by
   the digit 2 - which rendered as an empty box and a 2 where the minus sign should have been.
   Two borders cannot be missing from a font. */
.faq__question::after {
  content: "";
  margin-left: auto;
  flex: none;
  align-self: flex-start;
  width: 0.5em;
  height: 0.5em;
  margin-top: 0.35em;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 150ms ease;
}

.faq__item[open] > .faq__question::after {
  /* Pointing up, and it turns rather than swapping - the movement is what says it opened. */
  transform: rotate(-135deg);
  margin-top: 0.55em;
}

.faq__question:hover,
.faq__item[open] > .faq__question {
  color: var(--ink);
}

.faq__answer {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0;
  padding: 0 0 var(--space-5);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: var(--border);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-3);
}

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

.site-footer address {
  font-style: normal;
  margin-top: var(--space-2);
}

/* The submission address. It is the one thing a writer actually needs from this page, so it is
   set apart rather than left in a sentence - and it is a mailto, because on a phone that is one
   tap to a composed message. */
.address-callout {
  margin: var(--space-4) 0 var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  text-align: center;
}

.address-callout a {
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

/* The help address, which is not the submission address and must never be mistaken for it. It
   used to sit behind a button for that reason; it now sits inside a collapsed question, which
   already keeps it out of the way of somebody reading about where to send an article. What is
   left is making the two look different, so the one you want is the loud one. */
.address-callout--quiet {
  padding: var(--space-3);
  background: none;
}

.address-callout--quiet a {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--ink-body);
  text-decoration: underline;
}

.address-callout a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- the compose window

   A drawing of the email somebody has to write, because the instruction is "write an email" and
   the page was previously a thousand words explaining that. It is a picture, not a form: nothing
   here is focusable and the whole block carries one alt text, so a screen reader hears a sentence
   rather than a list of fields it cannot fill in. */

.compose {
  margin: var(--space-6) 0;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  font-family: var(--font-ui);
}

.compose__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border);
  background: var(--page);
}

.compose__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule-strong);
}

.compose__title {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Label above value on a phone, label beside value once there is room. */
.compose__fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: var(--space-4);
  border-bottom: var(--border);
  font-size: var(--text-sm);
}

.compose__fields dt {
  color: var(--ink-muted);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 1px;
  padding-top: 2px;
}

.compose__fields dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.compose__note {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-style: italic;
}

.compose__body {
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-body);
}

.compose__body p {
  margin: 0 0 var(--space-3);
}

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

.compose__attachment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--ink-body);
  width: fit-content;
  max-width: 100%;
}

.compose__send {
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-2) var(--space-5);
  background: var(--accent);
  color: var(--accent-text);
  border-radius: var(--radius);
  font-size: var(--text-base);
  width: fit-content;
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink);
}

.prose__heading {
  margin-top: var(--space-7);
}

@media (max-width: 30rem) {
  .compose__fields {
    grid-template-columns: 1fr;
    gap: var(--space-1) 0;
  }

  .compose__fields dd {
    margin-bottom: var(--space-2);
  }

  .compose__note {
    display: block;
    margin-left: 0;
  }
}