/* ==========================================================================
   sn-page.css — the static pages: about, contact, privacy, terms.

   These four were the last templates still on their 2024 markup. They set their
   own titles in `text-uppercase` (one centred, one left, neither matching the
   rest of the site), ran policy documents the full 1,320px of the container at
   about 200 characters a line, and left `the_content()` completely unstyled —
   so a twenty-heading terms document had no more hierarchy than a wall of
   paragraphs.

   Everything here builds on sn-tokens.css and the .sn-prose primitive in
   sn-ui.css. Loaded only on these templates.
   ========================================================================== */

.sn-page { padding: var(--sn-12) 0 var(--sn-20); }

.sn-page__body { max-width: var(--sn-measure); }

/* --------------------------------------------------------------------------
   Policy documents (privacy, terms)

   the_content() here is a long legal document with no classes of its own, so
   the element selectors have to do the work. A measure is the whole point: at
   the container's full width these ran ~200 characters a line.
   -------------------------------------------------------------------------- */

.sn-doc {
  max-width: var(--sn-measure);
  font-size: var(--sn-fs-prose);
  line-height: var(--sn-lh-prose);
  color: var(--sn-ink-soft);
}

.sn-doc > * + * { margin-top: var(--sn-5); }

.sn-doc h2 {
  margin-top: var(--sn-16);
  padding-top: var(--sn-5);
  border-top: 1px solid var(--sn-rule-soft);
  font-size: var(--sn-fs-h3);
}

.sn-doc h3 { margin-top: var(--sn-10); font-size: var(--sn-fs-h4); }
.sn-doc h4 { margin-top: var(--sn-8); }

.sn-doc > :first-child { margin-top: 0; }
.sn-doc h2:first-child { padding-top: 0; border-top: 0; }

.sn-doc ul,
.sn-doc ol { padding-left: 1.35em; }
.sn-doc li + li { margin-top: var(--sn-2); }

.sn-doc a {
  color: var(--sn-signal);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.sn-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sn-fs-sm);
}

.sn-doc th,
.sn-doc td {
  padding: var(--sn-3) var(--sn-4);
  border: 1px solid var(--sn-rule);
  text-align: left;
  vertical-align: top;
}

.sn-doc th { background: var(--sn-paper-2); color: var(--sn-ink); }

/* The documents predate the theme and carry inline colours and sizes from a
   pasted Word export. Neutralise the ones that fight the palette. */
.sn-doc [style*="color"] { color: inherit !important; }
.sn-doc [style*="background"] { background: none !important; }
.sn-doc font { font-size: inherit !important; color: inherit !important; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.sn-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sn-16);
  align-items: start;
}

.sn-about__aside {
  position: sticky;
  top: calc(var(--sn-header-h) + var(--sn-6));
  padding: var(--sn-6);
  border: 1px solid var(--sn-rule);
  border-radius: var(--sn-r);
  background: var(--sn-paper-2);
}

.sn-about__aside h2 { margin: 0 0 var(--sn-4); font-size: var(--sn-fs-h4); }

.sn-about__stats { list-style: none; margin: 0 0 var(--sn-6); padding: 0; }

.sn-about__stats li + li {
  margin-top: var(--sn-3);
  padding-top: var(--sn-3);
  border-top: 1px solid var(--sn-rule);
}

.sn-about__stats dt,
.sn-about__stat-label {
  font-family: var(--sn-font-mono);
  font-size: var(--sn-fs-micro);
  letter-spacing: var(--sn-tr-micro);
  text-transform: uppercase;
  color: var(--sn-muted);
}

.sn-about__stat-value {
  display: block;
  font-family: var(--sn-font-mono);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--sn-ink);
}

.sn-about__actions { display: grid; gap: var(--sn-2); }

@media (max-width: 991.98px) {
  .sn-about__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sn-12); }
  .sn-about__aside { position: static; }
}

/* --------------------------------------------------------------------------
   Contact
   The .form-row grid itself is in sn-ui.css — every form on the site uses it.
   -------------------------------------------------------------------------- */

.sn-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sn-16);
  align-items: start;
}

.sn-contact__form { max-width: 720px; }

/* CF7 wraps each control in a <p>, which adds a margin the .form-group already
   owns, and a <br> between the label and the field. */
.sn-contact .wpcf7 .form-group > p { margin: 0; }
.sn-contact .wpcf7 .form-group br { display: none; }
.sn-contact .wpcf7 .wpcf7-form-control-wrap { display: block; }

.sn-contact .wpcf7 label { display: block; }

.sn-contact .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--sn-2);
  font-size: var(--sn-fs-sm);
  font-weight: 500;
  color: var(--sn-no);
}

.sn-contact .wpcf7-form-control.wpcf7-not-valid { border-color: var(--sn-no); }

.sn-contact .wpcf7-response-output {
  margin: var(--sn-6) 0 0;
  padding: var(--sn-4);
  border: 1px solid var(--sn-rule);
  border-radius: var(--sn-r-sm);
  font-size: var(--sn-fs-sm);
}

.sn-contact .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--sn-yes);
  background: var(--sn-yes-wash);
  color: var(--sn-yes);
}

.sn-contact .wpcf7 form.invalid .wpcf7-response-output,
.sn-contact .wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--sn-no);
  background: var(--sn-no-wash);
  color: var(--sn-no);
}

.sn-contact .wpcf7 input[type="submit"] {
  min-height: 44px;
  padding: 0 var(--sn-6);
  border: 1px solid var(--sn-signal);
  border-radius: var(--sn-r-sm);
  background: var(--sn-signal);
  color: #fff;
  font-family: var(--sn-font);
  font-size: var(--sn-fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.sn-contact .wpcf7 input[type="submit"]:hover {
  background: var(--sn-signal-ink);
  border-color: var(--sn-signal-ink);
}

/* The aside is the same object as the about page's, so it takes the same rules. */
.sn-contact__aside {
  position: sticky;
  top: calc(var(--sn-header-h) + var(--sn-6));
  padding: var(--sn-6);
  border: 1px solid var(--sn-rule);
  border-radius: var(--sn-r);
  background: var(--sn-paper-2);
}

.sn-contact__aside h2 { margin: 0 0 var(--sn-4); font-size: var(--sn-fs-h4); }
.sn-contact__aside p { margin: 0 0 var(--sn-4); font-size: var(--sn-fs-sm); color: var(--sn-ink-soft); }
.sn-contact__aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sn-2); }

@media (max-width: 991.98px) {
  .sn-contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sn-12); }
  .sn-contact__aside { position: static; }
}