/* Building Assessor NSW — corrections layer, 2026-08-27, revised 2026-08-28.
 *
 * Load order: site.css, then site-v2.css, then this file.
 *
 * site.css is the original dark-first design system. site-v2.css rebalanced
 * the page to a light-dominant palette and added the header, mega-menu,
 * catalogue, pricing and request-form components. This file holds the final
 * approved corrections, kept separate so what changed in this pass is legible
 * on its own rather than buried in a 1,500-line file:
 *
 *   - the FAQ display fix (the legacy accordion clamp is neutralised);
 *   - the complete, explicit treatment of the three form selects;
 *   - the credential dialog;
 *   - the generated price table;
 *   - the header (the phone control removed at every width);
 *   - the fixed action bar's clearance and coverage behaviour;
 *   - narrow-viewport overflow guards;
 *   - the reduced homepage's merged sections (trust strip, Choose Your
 *     Inspection and its report directory, service regions).
 *
 * Worth folding all three into one stylesheet at the next major change.
 */

/* =========================================================================
   CORRECTIONS — 2026-08-27
   ========================================================================= */

/* ------------------------------------------------------------------- FAQ ---
   site.css still carries the pre-<details> accordion:
       .faq-a { overflow: hidden; height: 0; transition: height .3s }
   The new FAQ uses native <details>/<summary>, and that legacy rule was
   clamping every answer to a single clipped line. Those rules are scoped back
   to the old markup (a .faq-a inside a JS accordion) and neutralised here, so
   an open answer takes its natural height and nothing is cut off. No fixed
   height is set anywhere on FAQ content.                                     */
.faq-item .faq-a,
details.faq-item > .faq-a {
  height: auto !important;
  overflow: visible !important;
  transition: none !important;
}
.faq-item[open] > .faq-a { display: block; }
.faq-a > p,
.faq-a > div { max-width: var(--measure); }
.faq-a p + p { margin-top: 0.8rem; }
.faq-a a { color: var(--orange-ink); text-decoration: underline; }
.faq-item summary { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------- SELECTS ---
   site.css styles `.field select` for the old dark form (dark fill, light text
   and a light chevron); site-v2 restyled the inputs for the white card but
   never declared colours for `option` or `optgroup`, so the open list fell back
   to the platform default and could land dark-on-dark.

   Resolved by giving the three select controls their own complete, explicit
   treatment — control, options and optgroups — and by declaring
   `color-scheme: dark` on them so Safari and the iOS/Android native pickers
   render a dark sheet with light text instead of guessing. Text inputs,
   textareas and the file input are untouched.                                */
.field select {
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--ink-800);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
  text-shadow: none;
}
.field select:hover { border-color: rgba(255, 255, 255, 0.4); }
.field select:focus {
  background-color: var(--ink-800);
  color: #ffffff;
  border-color: var(--orange-2);
  box-shadow: 0 0 0 3px rgba(242, 121, 47, 0.35);
  outline: none;
}
.field select[aria-invalid="true"] { border-color: #ff8a80; }

/* The open list. Declared explicitly so no platform default applies. */
.field select option,
.field select optgroup {
  background-color: #12222c;
  color: #ffffff;
}
.field select optgroup {
  color: var(--orange-2);
  font-weight: 700;
  font-style: normal;
}
.field select optgroup option { color: #ffffff; font-weight: 400; }
/* The placeholder and any disabled entry stay legible rather than fading out. */
.field select option[value=""],
.field select option:disabled,
.field select optgroup:disabled {
  color: #c6d0d6;
  background-color: #12222c;
}
.field select option:checked { background-color: var(--orange-cta); color: #ffffff; }

/* Windows high-contrast and forced-colours modes drive their own palette. */
@media (forced-colors: active) {
  .field select,
  .field select option,
  .field select optgroup { background-color: Field; color: FieldText; }
}

/* The label above a select sits on the white card, not on the select. */
.field label { color: var(--ink-800); }

/* --------------------------------------------------------- CREDENTIAL MODAL */
.cred-open { display: inline-flex; align-items: center; gap: 0.5rem; }
.cred-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(8, 15, 20, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.cred-overlay[hidden] { display: none; }
.cred-dialog {
  background: #fff; color: var(--ink-800);
  border-radius: 6px; width: min(680px, 100%);
  padding: clamp(1.3rem, 3vw, 2rem);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  max-height: 100%; overflow-y: auto;
}
.cred-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.cred-head h2 {
  font-family: 'ArchivoVar', system-ui, sans-serif; font-size: var(--step-2);
  letter-spacing: -0.02em; color: var(--ink-900);
}
.cred-close {
  flex: none; width: 42px; height: 42px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-700); border: 1px solid var(--line); background: #fff;
}
.cred-close:hover { background: var(--paper-2); color: var(--ink-900); }
.cred-intro { color: var(--ink-600); font-size: 0.95rem; margin-top: 0.7rem; max-width: 60ch; }
.cred-body { margin-top: 1.2rem; min-height: 120px; }
.cred-img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 4px;
}
.cred-status { color: var(--ink-600); font-size: 0.95rem; padding: 2rem 0; text-align: center; }
.cred-status.is-err { color: #b3261e; }
.cred-fallback { margin-top: 1.1rem; font-size: 0.9rem; color: var(--ink-600); }
.cred-fallback a { color: var(--orange-ink); font-weight: 600; }

/* ------------------------------------------------------------ PRICE GUIDE --
   Generated from inc/pricing.php. No figure is written in CSS or markup.      */
.price-table {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--line);
}
.price-row {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  align-items: baseline; justify-content: space-between;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.price-row h3 { font-size: 1.04rem; letter-spacing: -0.01em; }
.price-row h3 a { color: var(--ink-900); text-decoration: none; }
.price-row h3 a:hover { color: var(--orange-ink); text-decoration: underline; }
.price-row p { color: var(--ink-600); font-size: 0.92rem; margin-top: 0.3rem; max-width: 62ch; }
.price-figure {
  flex: none; font-family: 'ArchivoVar', system-ui, sans-serif;
  font-size: 1.18rem; font-weight: 700; color: var(--orange-ink) !important;
  letter-spacing: -0.02em; white-space: nowrap; margin-top: 0 !important;
}
.price-row-quote .price-figure { color: var(--ink-600) !important; font-size: 1rem; }
.price-explain {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--orange-cta);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.6rem;
}
.price-explain h3 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-600); font-weight: 700; }
.price-explain ul {
  list-style: none; margin: 0.9rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0.45rem 1.6rem;
}
.price-explain li { position: relative; padding-left: 1.3rem; color: var(--ink-700); font-size: 0.94rem; }
.price-explain li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-cta); }
.price-note { margin-top: 1.1rem; font-size: 0.9rem; color: var(--ink-600); }
.cred-actions { margin-top: 1.4rem; }
.faq-cred { margin-top: 1rem !important; }
.footer-cred-btn { margin-top: 1.2rem; }

/* =========================================================================
   HEADER — the phone control is removed

   The sticky header carried a phone control that ran out of room between the
   nav-collapse width and the mobile breakpoint — every iPad — and overlapped
   the page beneath it, including FAQ answers reached through the #faq anchor.
   Shrinking it to an icon only moved the collision. The control is now gone
   from the markup at every width, and the header holds three things: the
   logo, the booking CTA where there is room, and the menu button.

   The number is never lost. It stays in the hero call button, the mobile
   menu, the fixed bottom action bar, the enquiry section, the FAQ answers
   and the footer, and in the LocalBusiness structured data.
   ========================================================================= */

@media (max-width: 1099px) {
  /* Logo and menu button can no longer collide. */
  .header-inner { gap: 0.6rem; }
  .header-actions { gap: 0.45rem; }
  .brand { min-width: 0; }
  .brand-plate img { height: 46px; max-width: 100%; }
}

@media (max-width: 400px) {
  .brand-plate { padding: 6px 8px; }
  .brand-plate img { height: 38px; }
  .nav-toggle { width: 40px; height: 40px; }
}

/* The menu button is the last thing in the header and has to stay clickable.
   The drawer opens BELOW the header (z-index 89 against the header's 90), so
   nothing in the header may drop below the drawer either. */
.header-actions { position: relative; z-index: 2; }
.nav-toggle { flex: none; }

/* ---- The fixed action bar must never cover content -----------------------
   One custom property drives the bottom clearance, so page padding, anchor
   offsets and the footer all stay in step with the bar's real height.       */
:root { --bar-h: 0px; }

/* Matches the 899px breakpoint in site.css that makes the bar display:flex. */
@media (max-width: 899px) {
  :root { --bar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

.action-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Clearance below everything the bar could otherwise sit on top of. */
body { padding-bottom: var(--bar-h); }
.site-footer { padding-bottom: calc(clamp(3rem, 6vw, 5rem) + var(--bar-h)); }

/* An anchored heading must clear the fixed header, and a section scrolled to
   the bottom must clear the fixed bar. */
html { scroll-padding-top: calc(var(--nav-h) + 16px); scroll-padding-bottom: calc(var(--bar-h) + 16px); }
.rep, #faq, #pricing, #request, #reviews, #areas, #technology,
#what-we-inspect, #reports, #most-requested, #process, #why, #hidden, #timing {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* The last FAQ answer and the form's submit button are the two things most
   likely to end up under the bar. Give them explicit room. */
@media (max-width: 899px) {
  .faq-list { margin-bottom: 0.5rem; }
  .form-card { margin-bottom: 0.5rem; }
}

/* site.css zeroes body padding under 899px; the fixed bar needs that room back. */
@media (max-width: 899px) {
  body { padding-bottom: var(--bar-h); }
}
/* Slide the bar out of the way whenever a full-screen layer is open. */
.action-bar.is-under { transform: translateY(110%) !important; }

/* ---------- Narrow-viewport overflow guards ------------------------------ */
/* Flex children default to min-width:auto, so a long label (the phone number
   in the call button) can push a fixed bar wider than the viewport. Allow the
   labels to shrink, and step the type down on the narrowest phones. */
.action-bar a { min-width: 0; }
.action-bar a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 359px) {
  .action-bar a { font-size: 0.9rem; gap: 0.4rem; padding-left: 0.35rem; padding-right: 0.35rem; }
}
/* Nothing on the page may generate a horizontal scrollbar. */
html, body { overflow-x: clip; }

/* The bar retracts whenever it would sit on top of a FAQ, a form control, a
   button or a footer link. Same transform as .is-under, separate class so the
   nav, the credential dialog and the coverage check cannot cancel each other.
   Retracting because it landed on content is a correction, not a reveal, so it
   snaps away rather than sliding — a second animation would read as a fault. */
.action-bar.is-covering { transform: translateY(110%) !important; transition: none !important; }


/* ==========================================================================
   FINAL REVISION — homepage reduction
   The homepage ran to ~4,200 words across eleven sections that restated one
   another. It is now seven. These are the styles the merged sections need.
   ========================================================================== */

/* ---- Trust, credentials and Google rating, in one strip ------------------ */
.trust-inner { display: grid; gap: 1.4rem; }
@media (min-width: 900px) {
  .trust-inner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
}
.trust-google { display: grid; gap: 0.45rem; align-content: start; }
.trust-rating { color: var(--steel-300); font-size: 0.9rem; margin: 0; }
.trust-rating strong { color: #fff; font-size: 1.05rem; }
.trust-quote { margin: 0.2rem 0 0; padding: 0 0 0 0.85rem; border-left: 2px solid var(--orange); }
.trust-quote p { color: #d6dee3; font-size: 0.93rem; line-height: 1.5; margin: 0; font-style: italic; }
.trust-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.35rem 0 0; font-size: 0.86rem; }
.trust-links a, .link-plain {
  color: var(--orange-2); font-weight: 600; text-decoration: none;
  background: none; border: 0; padding: 0; font-size: inherit; font-family: inherit;
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
}
.trust-links a:hover, .link-plain:hover { text-decoration: underline; }
.link-plain svg { width: 14px; height: 14px; }

/* ---- Choose your inspection --------------------------------------------- */
.choose-timing {
  margin-top: 1.5rem; font-size: 0.9rem; line-height: 1.6; color: var(--ink-600);
  border-left: 2px solid var(--orange); padding-left: 0.9rem; max-width: 70ch;
}
.choose-timing a { color: var(--orange-ink); }

/* ---- The full report directory ------------------------------------------
   Progressive disclosure, not hidden text. <details> collapses the list for a
   visitor who does not want 64 report names in their way, while every link
   stays in the HTML, in the accessibility tree and in the crawl. */
.dir { margin-top: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.dir > summary {
  cursor: pointer; list-style: none; padding: 1rem 1.2rem;
  font-weight: 700; color: var(--ink-900); font-size: 0.98rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.dir > summary::-webkit-details-marker { display: none; }
.dir > summary::after {
  content: ''; flex: none; width: 9px; height: 9px; margin-right: 3px;
  border-right: 2px solid var(--orange-ink); border-bottom: 2px solid var(--orange-ink);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s var(--ease);
}
.dir[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.dir > summary:hover { background: var(--paper); }
.dir > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.dir-body { padding: 0.2rem 1.2rem 1.4rem; border-top: 1px solid var(--line); }
.dir-cols {
  display: grid; gap: 1.4rem 2rem; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.dir-col h3 { font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 0.55rem; }
.dir-col h3 a { color: var(--ink-900); text-decoration: none; }
.dir-col h3 a:hover { color: var(--orange-ink); text-decoration: underline; }
.dir-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.dir-col li a {
  color: var(--ink-700); text-decoration: none; font-size: 0.88rem; line-height: 1.45;
  display: block; padding: 0.12rem 0;
}
.dir-col li a:hover { color: var(--orange-ink); text-decoration: underline; }

/* ---- Service regions ----------------------------------------------------- */
.region-grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  margin-top: clamp(2rem, 4vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.region { background: #fff; padding: 1.5rem 1.4rem; }
.region h3 { font-size: 1.08rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.region-note { color: var(--ink-700); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.region-suburbs { color: var(--ink-600); font-size: 0.87rem; line-height: 1.6; margin: 0.7rem 0 0; }

/* The Why band now sits on ink. */
.band-ink .why-item h3 { color: #fff; }