/*
 * Site-specific additions. tokens.css and components.css are verbatim copies of
 * the developer handover and are not edited; anything the launch site needs
 * beyond them lives here.
 */

/* Chevron path: the handover rule resolves ./assets/ relative to the CSS file. */
.pm-select-control__icon {
  -webkit-mask: url("../assets/chevron-down.svg") center / 16px 16px no-repeat;
  mask: url("../assets/chevron-down.svg") center / 16px 16px no-repeat;
}

/* The skip link must become visible when focused. */
.pm-skip-link:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 10;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  overflow: visible !important;
  clip: auto !important;
  background: var(--pm-color-paper);
  color: var(--pm-color-void);
  font-weight: 600;
}

/* Without JavaScript the mobile menu is always shown and has no toggle. */
html:not(.js) .pm-menu-button {
  display: none;
}

.pm-contact-form-wrap {
  width: 100%;
  max-width: var(--pm-layout-narrow);
}

@media (min-width: 768px) {
  .pm-contact-form-wrap {
    justify-self: end;
  }
}

/* Form-level status. The live region is always present; its content is injected. */
.pm-status:empty {
  display: none;
}

.pm-status .pm-success-summary {
  padding: var(--pm-space-32);
}

.pm-success-summary h3,
.pm-error-summary h3 {
  margin: 0 0 var(--pm-space-8);
  font-family: var(--pm-font-display);
  font-size: 24px;
  line-height: 30px;
}

.pm-error-summary p {
  margin: 0;
}

.pm-error-summary ul {
  margin: var(--pm-space-8) 0 0;
  padding-left: var(--pm-space-20);
}

.pm-error-summary:focus {
  outline: var(--pm-focus-outline);
  outline-offset: var(--pm-focus-offset);
}

.pm-contact-form[aria-busy="true"] .pm-button {
  opacity: 0.72;
  cursor: progress;
}

/* Enquiry form additions: preferred contact method choice and the Turnstile slot (components.css must stay identical
   to the handover, so these live here). */
.pm-fieldset {
  display: grid;
  gap: var(--pm-space-8);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pm-fieldset legend {
  padding: 0;
  margin-bottom: var(--pm-space-8);
  color: var(--pm-color-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.pm-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-24);
}

.pm-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-8);
}

.pm-choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--pm-color-accent-action);
}

.pm-choice input:focus-visible {
  outline: var(--pm-focus-outline);
  outline-offset: var(--pm-focus-offset);
}

.pm-choice label {
  color: var(--pm-color-text-primary);
  font-size: 16px;
  line-height: 24px;
}

.pm-turnstile {
  min-height: 65px;
}

/* Message is the primary free-text field; contact instructions are visibly secondary: about two lines high, with the
   500-character limit shown quietly. */
#message {
  min-height: 192px;
}

.pm-field--secondary textarea {
  min-height: 0;
  height: 76px; /* two 24px lines + 13px padding top and bottom + 1px borders */
  line-height: 24px;
}

.pm-field__help--limit {
  font-size: 12px;
  line-height: 18px;
}

.pm-form-notice a,
.pm-prose a,
.pm-site-footer__legal a {
  color: inherit;
}

/* Plain-text pages (privacy, thank you, 404). */
.pm-page {
  padding-block: var(--pm-space-64) var(--pm-space-96);
}

.pm-prose {
  max-width: var(--pm-layout-readable);
}

.pm-prose h1 {
  margin: var(--pm-space-16) 0 var(--pm-space-24);
}

.pm-prose h2 {
  margin: var(--pm-space-48) 0 var(--pm-space-12);
  font-family: var(--pm-font-display);
  font-size: var(--pm-type-h3-size);
  font-weight: 800;
  line-height: var(--pm-type-h3-line);
  letter-spacing: var(--pm-type-h3-tracking);
}

.pm-prose .pm-draft-notice {
  padding: var(--pm-space-16);
  border: var(--pm-border-2) solid var(--pm-color-accent-action);
}

.pm-prose .pm-action-row {
  margin-top: var(--pm-space-32);
}

/* Anchored sections should not hide under the viewport edge. */
[id] {
  scroll-margin-top: var(--pm-space-16);
}

/*
 * Departures from the handover's responsive CSS, made where its rules break
 * (documented in docs/LAUNCH.md; the handover files themselves are unchanged).
 */

/* The 8.5em redaction bar is wider than a phone screen at the 48px minimum hero size. */
.pm-redaction {
  max-width: 100%;
}

/* Between 768 and 1023px the two-column contact and proof layouts leave the form
   about 120px per field and the receipt about 236px wide, so they stack until 1024px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pm-contact-section,
  .pm-proof-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-contact-section__copy {
    max-width: var(--pm-layout-readable);
  }

  .pm-contact-form-wrap {
    justify-self: start;
  }
}

.pm-form-alternative {
  margin: var(--pm-space-16) 0 0;
}

.pm-form-alternative a {
  color: inherit;
}