/* ============================================================
   ConstructCert Australia — /contact/

   Two sections: the enquiry form and an FAQ accordion under it.

   The form used to be described here as "the home page's contact section
   unchanged". It was, until 20 August 2026, when that section was removed from
   the home page — this is the only enquiry form on the site now, and the home
   page's hero intake carries its two answers here rather than down its own
   page. Section B marks the fields it fills.

   Loaded last, after ../full/page.css, and only by this page. page.css
   already carries everything the first section needs — it describes
   .contact as page furniture and the markup here is the same markup.
   What is in this file is (A) the one thing that changes when that
   section opens a page instead of closing one, (B) the line marking
   a field the home page filled in, and (C) the accordion.

   Load order: ../styles/tokens.css, ../styles/base.css,
   ../full/page.css, this.
   ============================================================ */


/* ============================================================
   A · THE CONTACT SECTION AS A PAGE OPENER
   ============================================================ */

/* .contact draws a top border to hold itself apart from the section
   above it. Here nothing is above it but .nav-shell, which draws a
   bottom border of its own — the two stack into a single 2px rule in
   two different colours, which reads as a mistake because it is one. */
main > .contact:first-child {
  border-top: 0;
}


/* ============================================================
   B · WHERE A FIELD'S ANSWER CAME FROM
   ============================================================ */

/* One line under each field the home page filled in — all three of them when
   the hero intake arrives, the project type alone when a service-stream button
   does. Hidden in the markup and unhidden by initIntakeArrival() only for a
   field it actually wrote, so it can never explain a hand-over that did not
   happen.

   This replaced a tinted banner above the whole form on 20 August 2026. The
   banner was page-level furniture for a field-level fact: it had to say "your
   answers" whether one field or three had arrived, it repeated the instruction
   already printed on the submit button, and it sat between the heading and the
   form in the register the site keeps for errors. The fact belongs beside the
   value it is about, said once, quietly.

   Deliberately plain and deliberately small: the loud part of an arrival is the
   one-pass tint on the field itself, in ../full/page.css. This is the part that
   stays, and the part that carries the whole disclosure for anyone whose tint
   never ran — prefers-reduced-motion zeroes it, and nobody who scrolls past in
   the first two seconds sees it either. */
.intake-source {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}


/* ============================================================
   C · FAQ ACCORDION

   Structure is MyReno's, retokenised: native <details>/<summary>, so
   it is keyboard-operable and screen-reader-operable with no JS at
   all, and every answer sits in the DOM whether it is open or closed
   and is therefore crawlable. The "+" rotates 45 degrees into an "x"
   on open.

   Two substitutions against MyReno's copy of this block: --gold
   becomes --brand, and the display face is set at 600 rather than
   500 because 400 and 600 are the two weights of Wix Madefor Display
   this site loads — 500 would be synthesised.

   MyReno guards .faq__sign's transition behind prefers-reduced-motion
   itself. Not repeated here: page.css already zeroes every transition
   on the page under that query with !important, and this file loads
   after it. A second rule would only be a second thing to keep true.
   ============================================================ */

.faq {
  padding: clamp(4rem, 7vw, 7.5rem) 0;
  background: var(--bg);
}

/* Head and list share one measure. The section above runs the full
   container and splits into two columns; this one is a document, and
   setting it in a single narrower column is the difference showing. */
.faq__head {
  max-width: 58rem;
  display: grid;
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.faq__head h2 {
  max-width: 20ch;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.faq__lede {
  max-width: 46rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.75;
}

.faq__list {
  max-width: 58rem;
  border-top: 1px solid var(--border-strong);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__question {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color var(--transition-fast);
}

/* Safari still paints the disclosure triangle without this. */
.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--brand);
}

.faq__question:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.faq__sign {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  display: grid;
  margin-left: auto;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--brand);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--transition), background var(--transition-fast);
}

.faq__item[open] .faq__sign {
  transform: rotate(45deg);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}

.faq__answer {
  max-width: 46rem;
  padding: 0 0 1.6rem;
}

.faq__answer p {
  color: var(--muted);
  line-height: 1.75;
}

.faq__answer p + p {
  margin-top: 0.85rem;
}

.faq__answer strong {
  color: var(--text);
  font-weight: 600;
}

/* Closing line — the page's last word, on the same 58rem measure.

   MyReno's version of this CTA carries an arrow that nudges right on hover.
   Dropped here, and its two rules with it: this button scrolls the visitor
   back UP to the form at the top of the same page, and an arrow pointing
   right at something that is above you is a cue that is simply wrong. */
.faq-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  max-width: 58rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.faq-close p {
  max-width: 42rem;
  color: var(--muted);
}

.faq-close .button {
  min-height: 2.8rem;
  padding: 0.7rem 1rem;
}

@media (max-width: 700px) {
  .faq-close {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .faq-close .button {
    justify-self: start;
  }
}