/* ==========================================================================
   CONTACT — page-contact.php
   Everything is scoped under `.pcr-contact`. This file restyles nothing
   global; it only styles the classes the template emits and reuses the
   design-system components (.btn, .chip, .crumbs, .eyebrow) as they ship.

   GROUND RHYTHM (top to bottom):
     1. `.pcr-contact__head`  — `section--void`. Dark, so the nav and the h1
        land the way the front page's hero does.
     2. `.pcr-contact__body`  — `.sect-light` (--base). Inputs are far easier
        to read and fill in on white than on black.
     3. `.pcr-contact__close` — `.sect-copper`, the closing band.

   ONE PADDING RULE. Every band gets `padding-block: var(--band)` from a single
   custom property declared on `.pcr-contact`, so the vertical rhythm cannot
   drift between the three. The only exception is the HERO'S TOP, which adds
   `--pcr-nav-offset` on top of `--band` because `.site-header` is
   `position: fixed` and would otherwise sit on top of the breadcrumb. Nothing
   else overrides `padding-block`.

   `.eyebrow` is `inline-flex`, so every eyebrow→heading gap comes from
   PARENT padding or an explicit `margin-top` on the SIBLING that follows it.
   There is deliberately no `margin` on `.eyebrow` anywhere in this file.

   COLOUR LAW: --copper-hot is for DARK grounds only. Everything inside
   `.sect-light` (and the copper band) uses --copper / --copper-dim / the
   --copper-wash + --copper-edge pair.

   SPECIFICITY WARNING. `.sect-light` is global and paints every DESCENDANT:
   `.sect-light p`, `.sect-light h2`, `.sect-light .btn--outline-light`. Every
   rule below that has to beat a `.sect-light` descendant rule is prefixed with
   `.pcr-contact` to reach 0,2,1+. Dropping the prefix turns body copy to
   --ink-light on the dark rail, which is unreadable.

   Enqueued by the template itself, after `pcr-project` — see the note in
   page-contact.php. If you ever move it into inc/assets.php, drop the
   `pcr-contact` handle and let the cascade list own the order instead.
   ========================================================================== */

.pcr-contact {
  /* THE single vertical rhythm value for every band on this page. */
  --band: clamp(48px, 7vw, 104px);

  background: var(--base);
  color: var(--ink);
  /* Belt and braces against a stray wide child producing a horizontal
     scrollbar at 390px. `overflow-x: clip` does not create a scroll
     container, so `position: sticky` descendants keep working. */
  overflow-x: clip;
}

/* One rule, every band. */
.pcr-contact .pcr-contact__head,
.pcr-contact .pcr-contact__body,
.pcr-contact .pcr-contact__close {
  padding-block: var(--band);
}

/* The fixed header is `position: fixed`, so the first section has to clear it.
   chrome.css does this globally with `.pcr-inner .section:first-child` at
   specificity 0,3,0; this repeats it at the same weight and wins on source
   order because this file loads later. Only padding-TOP changes — the bottom
   of the hero stays on the same `--band` as everything else. */
.pcr-contact .pcr-contact__head.section {
  padding-top: calc(var(--pcr-nav-offset, 84px) + var(--band));
}
@media (max-width: 900px) {
  .pcr-contact .pcr-contact__head.section {
    padding-top: calc(var(--pcr-nav-offset, 60px) + var(--band));
  }
}

/* ================================================================== HERO ==
   Dark ground — --copper-hot is the only legal copper here. */

.pcr-contact__head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
  margin-top: var(--sp-lg);
}
@media (min-width: 1000px) {
  .pcr-contact__head-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.pcr-contact__title {
  color: #fff;
  margin-top: var(--sp-sm);
  max-width: 18ch;
}
.pcr-contact__lede {
  margin-top: var(--sp-md);
  max-width: 56ch;
  color: var(--on-dark-mute);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
}
.pcr-contact__facts-wrap {
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--graphite);
  border: 1px solid var(--on-dark-line);
  border-left: 3px solid var(--copper);
  clip-path: var(--clip);
}
.pcr-contact__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin: 0;
  list-style: none;
  padding: 0;
}

.pcr-contact__head-note {
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--graphite);
  border: 1px solid var(--on-dark-line);
  border-left: 3px solid var(--copper-hot);
  clip-path: var(--clip);
}
.pcr-contact .pcr-contact__head-note-title {
  color: #fff;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-tight);
}
.pcr-contact .pcr-contact__head-note-text {
  margin-top: var(--sp-sm);
  color: var(--on-dark-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* =========================================================== EMAIL CARD ==
   THE PRIMARY ACTION ON THE PAGE. It sits above the form on purpose: no
   server handler exists for the form yet, so this is what makes /contact/
   work on the day it deploys.

   It is deliberately the widest, largest copper object on the page, and it is
   a real `mailto:` so it works with scripting disabled. */

.pcr-contact__email-card {
  padding: clamp(24px, 3.4vw, 52px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
  box-shadow: var(--sh-3);
  clip-path: var(--clip);
  min-width: 0;
}

/* Both wrappers are grid children inside a chamfered card, so they get the
   same `min-width: 0` as the tracks: without it a long unbroken word in the
   heading would set the card's min-content width and widen the page. */
.pcr-contact__email-copy,
.pcr-contact__head-copy,
.pcr-contact__intro { min-width: 0; }

.pcr-contact .pcr-contact__email-title {
  margin-top: var(--sp-xs);
  color: var(--ink);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
}
.pcr-contact .pcr-contact__email-text {
  margin-top: var(--sp-sm);
  max-width: 62ch;
  color: var(--ink-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* The address itself. `overflow-wrap: anywhere` is load-bearing: at 390px the
   string `hello@pcbrouting.com` in display type is wider than the viewport
   gutter, and without it the whole page grows a horizontal scrollbar. */
.pcr-contact__email {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--copper-wash);
  border: 1px solid var(--copper-edge);
  color: var(--copper-dim);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  text-decoration: none;
  clip-path: var(--clip-sm);
  transition: background var(--t-base) var(--ease-io),
              color var(--t-base) var(--ease-io),
              border-color var(--t-base) var(--ease-io);
  overflow-wrap: anywhere;
}
.pcr-contact__email:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}
.pcr-contact__email:focus {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.pcr-contact__email:hover:focus { color: #fff; }
.pcr-contact__email i {
  flex: 0 0 auto;
  font-size: .62em;
  line-height: 1;
}
.pcr-contact__email-addr { min-width: 0; }

.pcr-contact .pcr-contact__email-note {
  margin-top: var(--sp-md);
  max-width: 62ch;
  color: var(--ink-light);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

/* =================================================================== GRID ==
   Form first and wider; expectations rail second. `minmax(0, …)` on BOTH
   tracks — a plain `1.2fr` track refuses to shrink below its content's
   min-content width, which is how a `<textarea>` or a long email address pushes
   a horizontal scrollbar onto the page. */

.pcr-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(32px, 4vw, 64px);
}
@media (min-width: 1000px) {
  .pcr-contact__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}

.pcr-contact__form-col { min-width: 0; }

/* ------------------------------------------------------- the dark rail ---
   The one element that keeps a dark ground inside the light section. It is a
   full column, not a card, so the two grounds meet along a hard vertical edge
   — that edge is the split. */

.pcr-contact__aside {
  min-width: 0;
  display: grid;
  gap: var(--sp-md);
  padding: clamp(20px, 2.6vw, 32px);
  background: var(--void);
  clip-path: var(--clip);
}

/* Undo `.sect-light`'s descendant painting inside the rail. Everything here is
   dark ground: white headings, --on-dark-mute body, --copper-hot accent. */
.pcr-contact .pcr-contact__aside h2,
.pcr-contact .pcr-contact__aside h3 { color: #fff; }
.pcr-contact .pcr-contact__aside p,
.pcr-contact .pcr-contact__aside li { color: var(--on-dark-mute); }
.pcr-contact .pcr-contact__aside strong { color: var(--on-dark); }
/* `.sect-light .btn--outline-light` re-draws the button with ink, which is
   invisible on the rail. Put the white hairline back. */
.pcr-contact .pcr-contact__aside .btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .62);
}
.pcr-contact .pcr-contact__aside .btn--outline-light:hover {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: #fff;
}

/* ============================================================ FORM PANEL ==
   Light ground: a raised white card on --base. Deliberately calmer than the
   email card above it — the address is the primary action, the form is not. */

.pcr-contact__panel {
  padding: clamp(20px, 2.6vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  clip-path: var(--clip);
  min-width: 0;
}

.pcr-contact__form { margin: 0; }

.pcr-contact .pcr-contact__form-title {
  color: var(--ink);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
}

/* Required-field legend. The marker itself is a WORD ("required"), not a
   colour, so it survives greyscale, high-contrast mode and every form of
   colour blindness. */
.pcr-contact .pcr-contact__legend {
  margin-top: var(--sp-xs);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.pcr-contact .pcr-contact__legend-note {
  margin-top: var(--sp-xs);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.pcr-contact .pcr-contact__legend-note a {
  color: var(--copper-dim);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pcr-contact .pcr-contact__legend-note a:hover { color: var(--copper); }
.pcr-contact .pcr-contact__legend-note a:focus {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

.pcr-contact__req {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--copper-edge);
  background: var(--copper-wash);
  /* --copper-dim, not --copper: this is 11px type and needs the darker of the
     two on a light ground. */
  color: var(--copper-dim);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
  vertical-align: middle;
  clip-path: var(--clip-xs);
  white-space: nowrap;
}
.pcr-contact__opt {
  display: inline-block;
  margin-left: 6px;
  color: var(--ink-mute);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
  vertical-align: middle;
}

/* ================================================================= FIELDS */

.pcr-contact__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.pcr-contact__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-lg);
  margin-top: var(--sp-lg);
}

.pcr-contact__field { min-width: 0; }

.pcr-contact .pcr-contact__label {
  display: block;
  margin-bottom: var(--sp-xs);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
}

/* Inputs: white surface, 1px --line hairline, --ink text, copper focus ring,
   generous padding, square corners. Chamfers belong to panels; a control has
   to read as a control, so `border-radius: 0` here rather than `--cut-pill`. */
.pcr-contact__input {
  display: block;
  width: 100%;
  min-width: 0;
  /* 16px floor: below it, iOS Safari zooms the viewport on focus. */
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 13px var(--sp-md);
  transition: border-color var(--t-fast) var(--ease-io),
              box-shadow var(--t-fast) var(--ease-io);
  appearance: none;
  -webkit-appearance: none;
}
.pcr-contact__input::placeholder { color: var(--ink-mute); opacity: 1; }
.pcr-contact__input:hover { border-color: var(--support); }

/* Focus is styled on `:focus`, not `:focus-visible`. This is a form, and a
   keyboard user must always see the ring; the pointer case loses a 2px outline
   to a border-colour change instead. */
.pcr-contact__input:focus {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
  border-color: var(--copper);
  box-shadow: var(--sh-lift);
}

.pcr-contact__textarea { resize: vertical; min-height: 130px; }

/* `color-scheme` makes the native file picker and its dialog draw for THIS
   ground. On --surface it must be `light` or the picker chrome inverts. */
.pcr-contact__file {
  padding: 10px var(--sp-md);
  color-scheme: light;
  font-size: var(--fs-sm);
}
/* The native "Choose File" button. `::file-selector-button` carries its own
   UA styling, so it is redrawn here to match the rest of the form and to stay
   a CHAMFER rather than the platform's rounded pill. */
.pcr-contact__file::file-selector-button {
  margin-right: var(--sp-md);
  padding: 9px var(--sp-md);
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  clip-path: var(--clip-xs);
  cursor: pointer;
}
.pcr-contact__file::file-selector-button:hover {
  background: var(--copper-wash);
  border-color: var(--copper-edge);
  color: var(--copper-dim);
}
.pcr-contact__file:hover { border-color: var(--support); }
.pcr-contact__file:focus {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
  border-color: var(--copper);
}

.pcr-contact .pcr-contact__hint {
  margin-top: var(--sp-xs);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* ---------------------------------------------------------------- consent */

.pcr-contact__consent {
  margin: var(--sp-xl) 0 0;
  padding: var(--sp-md) var(--sp-lg);
  background: var(--base);
  border: 1px solid var(--line);
  clip-path: var(--clip-sm);
}
.pcr-contact__check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
}
.pcr-contact__checkbox {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--copper);
  cursor: pointer;
}
.pcr-contact__checkbox:focus {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.pcr-contact .pcr-contact__check-label {
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}

/* ---------------------------------------------------------------- actions */

.pcr-contact__actions { margin-top: var(--sp-xl); }
.pcr-contact .pcr-contact__actions .btn {
  /* The shared .btn is 15px at this scale; a submit button at 16px keeps iOS
     from zooming and reads as the page's primary action. */
  font-size: var(--fs-md);
  min-height: 56px;
}
.pcr-contact .pcr-contact__actions-note {
  margin-top: var(--sp-sm);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  text-align: center;
}

/* =================================================================== RAIL ==
   Blocks on the dark ground inside `.pcr-contact__aside`. */

.pcr-contact .pcr-contact__aside-block {
  padding: clamp(18px, 2.2vw, 28px);
  background: var(--graphite);
  border: 1px solid var(--on-dark-line);
  clip-path: var(--clip-sm);
  min-width: 0;
}
.pcr-contact .pcr-contact__aside-title {
  color: #fff;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-tight);
}
.pcr-contact .pcr-contact__aside-text {
  margin-top: var(--sp-sm);
  color: var(--on-dark-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.pcr-contact__aside-actions { margin-top: var(--sp-lg); }
.pcr-contact .pcr-contact__aside-actions .btn { width: 100%; }

/* -------------------------------------------------------------- what next */

.pcr-contact__steps {
  display: grid;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
  padding: 0;
  list-style: none;
  counter-reset: pcr-c-step;
}
.pcr-contact .pcr-contact__step {
  position: relative;
  counter-increment: pcr-c-step;
  padding-left: 44px;
  color: var(--on-dark-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
/* The counter is generated content, so it is `content` on a pseudo-element and
   is not read by most screen readers — the list semantics come from <ol>. */
.pcr-contact .pcr-contact__step::before {
  content: counter(pcr-c-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--copper-edge);
  background: var(--copper-wash);
  color: var(--copper-hot);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  clip-path: var(--clip-xs);
}

/* ------------------------------------------------------- what to send us
   A plain tick list. The glyph is decorative — `aria-hidden` in the template —
   because the list semantics come from <ul>, not from a character. */

.pcr-contact__brief {
  display: grid;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
  padding: 0;
  list-style: none;
}
.pcr-contact .pcr-contact__brief-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  color: var(--on-dark);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.pcr-contact .pcr-contact__brief-item i {
  flex: 0 0 auto;
  margin-top: .55em;
  font-size: .55em;
  line-height: 1;
  color: var(--copper-hot);
}
.pcr-contact .pcr-contact__aside-note {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--on-dark-line);
  color: var(--on-dark-mute);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

/* -------------------------------------------------------------- reassure */

.pcr-contact__reassure {
  display: grid;
  gap: var(--sp-lg);
  margin-top: var(--sp-md);
  padding: 0;
  list-style: none;
}
.pcr-contact .pcr-contact__reassure-title {
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}
.pcr-contact .pcr-contact__reassure-text {
  margin-top: var(--sp-2xs);
  color: var(--on-dark-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* ========================================================== CLOSING BAND ==
   `.sect-copper` is global: white type, white-on-copper primary button. The
   secondary button is a white hairline, mirroring the front page's
   `.cta .btn-outline`; chrome.css only re-draws `.btn--outline-light` for
   light grounds, so the copper case is ours. */

.pcr-contact__close-box {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.pcr-contact .pcr-contact__close-title {
  margin-top: var(--sp-xs);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-tight);
  color: #fff;
  text-wrap: balance;
}
.pcr-contact .pcr-contact__close-text {
  margin: var(--sp-md) auto 0;
  max-width: 58ch;
  color: rgba(255, 255, 255, .9);
  line-height: var(--lh-body);
}
.pcr-contact__close-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-xl);
}
.pcr-contact .pcr-contact__close .btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .62);
}
.pcr-contact .pcr-contact__close .btn--outline-light:hover {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: #fff;
}
@media (max-width: 520px) {
  .pcr-contact .pcr-contact__close-actions .btn { flex: 1 1 100%; }
}

/* ============================================================== HONEYPOT
   Backstop only. The template also carries the identical hiding inline, on
   purpose: if this file 404s or fails to parse, a visible "leave this blank"
   text box is a worse outcome than an off-screen one. */

.pcr-contact__hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ================================================================ MOBILE
   390px and below: tighten the panels, drop the big address a scale, and
   keep the long words wrapping. Nothing here may introduce a fixed width. */

@media (max-width: 480px) {
  .pcr-contact__email-card,
  .pcr-contact__panel,
  .pcr-contact__aside,
  .pcr-contact .pcr-contact__aside-block {
    padding: var(--sp-lg) var(--sp-md);
  }
  .pcr-contact__email {
    font-size: var(--fs-lg);
    padding: var(--sp-sm) var(--sp-md);
    gap: var(--sp-xs);
  }
  .pcr-contact .pcr-contact__step { padding-left: 38px; }
  .pcr-contact .pcr-contact__actions .btn { min-height: 52px; }
  .pcr-contact__file::file-selector-button { margin-right: var(--sp-sm); }
}

/* -------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .pcr-contact *,
  .pcr-contact *::before,
  .pcr-contact *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}