/* ==========================================================================
   GET A QUOTE — page-quote.php
   Everything is scoped under `.pcr-quote`. 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 already ship.

   GROUND RHYTHM (top to bottom):
     1. `.pcr-quote__head`  — `section--void`. Dark, so the nav and the h1 land
        the way the front page's hero does.
     2. `.pcr-quote__body`  — `.sect-light` (--base). Form inputs are far
        easier to read and fill in on white than on black.
        The reassurance rail (`.pcr-quote__aside`) stays DARK inside it. That
        is the split: light form on the left, dark rail on the right, so the
        page reads as a decision rather than one long slab.
     3. `.pcr-quote__close` — `.sect-copper`, the closing band.

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

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

   SPECIFICITY WARNING. `.sect-light` is global and paints every DESCENDANT:
   `.sect-light p`, `.sect-light h2`, `.sect-light .btn--outline-light`. The dark
   rail and the copper band are nested inside a `.sect-light` section, so every
   rule of theirs below is written at 0,2,1+ and prefixed with `.pcr-quote` to
   outrank it. Dropping the prefix turns the rail's body copy to --ink-light on
   a black ground, which is unreadable.
   ========================================================================== */

/* ------------------------------------------------------------------ shell */

.pcr-quote {
  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;
}

/* 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. */
.pcr-quote .pcr-quote__head.section {
  padding-top: calc(var(--pcr-nav-offset, 84px) + var(--sp-lg));
}
.pcr-quote__head { padding-bottom: clamp(32px, 5vw, 64px); }
.pcr-quote__body { padding-top: clamp(28px, 4vw, 56px); }

@media (max-width: 900px) {
  .pcr-quote .pcr-quote__head.section {
    padding-top: calc(var(--pcr-nav-offset, 60px) + var(--sp-md));
  }
}

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

.pcr-quote__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-quote__head-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.pcr-quote__title {
  color: #fff;
  margin-top: var(--sp-sm);
  max-width: 18ch;
}
.pcr-quote__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-quote__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-lg);
  list-style: none;
  padding: 0;
}

.pcr-quote__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-quote__head-note-title {
  color: #fff;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-tight);
}
.pcr-quote__head-note-text {
  margin-top: var(--sp-sm);
  color: var(--on-dark-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* =================================================================== GRID ==
   Form first and wider; reassurance 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-quote__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 1000px) {
  .pcr-quote__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}

.pcr-quote__form-col { min-width: 0; display: grid; gap: clamp(20px, 2.4vw, 28px); }

/* ------------------------------------------------------- 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-quote__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-quote .pcr-quote__aside h2,
.pcr-quote .pcr-quote__aside h3 { color: #fff; }
.pcr-quote .pcr-quote__aside p,
.pcr-quote .pcr-quote__aside li { color: var(--on-dark-mute); }
.pcr-quote .pcr-quote__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-quote .pcr-quote__aside .btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .62);
}
.pcr-quote .pcr-quote__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. */

.pcr-quote__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-quote__form { margin: 0; }

.pcr-quote__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-quote .pcr-quote__legend {
  margin-top: var(--sp-xs);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.pcr-quote__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-quote__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-quote__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-lg);
  margin-top: var(--sp-lg);
}
@media (min-width: 620px) {
  .pcr-quote__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcr-quote__field--full { grid-column: 1 / -1; }
}

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

.pcr-quote__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-quote__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;
}
/* --ink-mute rather than --support: a placeholder still has to be readable,
   and --support is a hairline colour. */
.pcr-quote__input::placeholder { color: var(--ink-mute); opacity: 1; }
.pcr-quote__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-quote__input:focus {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
  border-color: var(--copper);
  box-shadow: var(--sh-lift);
}

.pcr-quote__textarea { resize: vertical; min-height: 140px; }

/* `color-scheme` makes the native dropdown list and the date picker draw for
   THIS ground. It was `dark` when the panel was dark; on --surface it must be
   `light` or the calendar glyph and the popup invert. */
.pcr-quote__select,
.pcr-quote__input[type="date"] {
  color-scheme: light;
}

.pcr-quote__select {
  /* The chevron is a background SVG, not a glyph, so it cannot inherit the
     text colour the way <i class="ri-…"> would. %23DE4916 is --copper — the
     light-ground value. --copper-hot does not survive on white. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DE4916' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-md) center;
  background-size: 18px 18px;
  padding-right: calc(var(--sp-md) + 30px);
}

.pcr-quote__input[type="date"] { min-height: 50px; }

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

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

.pcr-quote__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-quote__check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
}
.pcr-quote__checkbox {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--copper);
  cursor: pointer;
}
.pcr-quote__checkbox:focus {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.pcr-quote__check-label {
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}

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

.pcr-quote__actions { margin-top: var(--sp-xl); }
.pcr-quote__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-quote .pcr-quote__actions-note {
  margin-top: var(--sp-sm);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  text-align: center;
}

/* ================================================================= FALLBACK
   The no-JS / no-handler path. Not an apology — it is the primary way to
   reach us, so it gets a full panel and a large tap target. */

.pcr-quote__fallback {
  padding: clamp(20px, 2.6vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
  box-shadow: var(--sh-2);
  clip-path: var(--clip);
  min-width: 0;
}
.pcr-quote__fallback-title {
  color: var(--ink);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
}
.pcr-quote .pcr-quote__fallback-text {
  margin-top: var(--sp-sm);
  color: var(--ink-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.pcr-quote__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-body);
  font-size: var(--fs-lg);
  font-weight: 700;
  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);
  /* A long address must wrap rather than widen the page. */
  overflow-wrap: anywhere;
}
.pcr-quote__email:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}
.pcr-quote__email:focus {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.pcr-quote__email:hover:focus { color: #fff; }
.pcr-quote__email i { font-size: .9em; line-height: 1; }

.pcr-quote .pcr-quote__fallback-note {
  margin-top: var(--sp-md);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

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

.pcr-quote .pcr-quote__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-quote .pcr-quote__aside-title {
  color: #fff;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-tight);
}
.pcr-quote .pcr-quote__aside-text {
  margin-top: var(--sp-sm);
  color: var(--on-dark-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.pcr-quote__aside-actions { margin-top: var(--sp-lg); }
.pcr-quote .pcr-quote__aside-actions .btn { width: 100%; }

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

.pcr-quote__steps {
  display: grid;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
  padding: 0;
  list-style: none;
  counter-reset: pcr-step;
}
.pcr-quote .pcr-quote__step {
  position: relative;
  counter-increment: pcr-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-quote .pcr-quote__step::before {
  content: counter(pcr-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);
}

/* --------------------------------------------------------------- services */

.pcr-quote__services {
  display: grid;
  gap: 0;
  margin-top: var(--sp-md);
  padding: 0;
  list-style: none;
}
.pcr-quote .pcr-quote__service {
  padding: var(--sp-md) 0;
  border-top: 1px solid var(--on-dark-line);
}
.pcr-quote .pcr-quote__service:last-child { border-bottom: 1px solid var(--on-dark-line); }

.pcr-quote .pcr-quote__service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
.pcr-quote .pcr-quote__service-link i {
  flex: 0 0 auto;
  font-size: 1em;
  color: var(--copper-hot);
  transition: transform var(--t-base) var(--ease);
}
.pcr-quote .pcr-quote__service-link:hover { color: var(--copper-hot); }
.pcr-quote .pcr-quote__service-link:hover i { transform: translateX(4px); }
.pcr-quote .pcr-quote__service-link:focus {
  outline: 2px solid var(--copper-hot);
  outline-offset: 3px;
}
.pcr-quote .pcr-quote__service-text {
  display: block;
  margin-top: var(--sp-2xs);
  color: var(--on-dark-mute);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

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

.pcr-quote__reassure {
  display: grid;
  gap: var(--sp-lg);
  margin-top: var(--sp-md);
  padding: 0;
  list-style: none;
}
.pcr-quote .pcr-quote__reassure-title {
  color: #fff;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
}
.pcr-quote .pcr-quote__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-quote__close-box {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.pcr-quote__close-title {
  margin-top: var(--sp-xs);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.pcr-quote .pcr-quote__close-text {
  margin: var(--sp-md) auto 0;
  max-width: 58ch;
  color: rgba(255, 255, 255, .9);
  line-height: var(--lh-body);
}
.pcr-quote__close-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-xl);
}
.pcr-quote .pcr-quote__close .btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .62);
}
.pcr-quote .pcr-quote__close .btn--outline-light:hover {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: #fff;
}
@media (max-width: 520px) {
  .pcr-quote__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-quote__hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ================================================================ MOBILE
   390px and below: drop the two-up field grid, let the long words wrap, and
   stop any inherited `min-height` from forcing a scrollbar. */

@media (max-width: 480px) {
  .pcr-quote__panel,
  .pcr-quote__fallback,
  .pcr-quote__aside,
  .pcr-quote .pcr-quote__aside-block {
    padding: var(--sp-lg) var(--sp-md);
  }
  .pcr-quote__email {
    font-size: var(--fs-md);
    padding: var(--sp-sm) var(--sp-md);
  }
  .pcr-quote .pcr-quote__step { padding-left: 38px; }
  .pcr-quote__actions .btn { min-height: 52px; }
}

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

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

/* ------------------------------------------------------ optional + upload ---
   `.pcr-quote__opt` marks a genuinely optional field. It is the word
   "optional", not a colour, so it survives a greyscale or high-contrast
   rendering the same way the "required" marker does. */
.pcr-quote__opt {
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--support);
  border: 1px solid var(--line);
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: 2px;
}

/* Native file input. The button is the browser's, so it cannot be restyled
   reliably ? the focus ring and the box around the whole control is what makes
   the state visible. `file-selector-button` is progressively enhanced where the
   browser supports it. */
.pcr-quote__file {
  padding: var(--sp-sm);
  background: var(--surface);
  border: 1px dashed var(--support);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-light);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.pcr-quote__file:hover { border-color: var(--copper); }
.pcr-quote__file:focus,
.pcr-quote__file:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
  border-color: var(--copper);
  border-style: solid;
}
.pcr-quote__file::file-selector-button {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--base);
  border: 1px solid var(--line);
  clip-path: var(--clip-xs);
  padding: var(--sp-2xs) var(--sp-sm);
  margin-right: var(--sp-sm);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.pcr-quote__file::file-selector-button:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}