/* =========================================================================
   THE HARDWOOD GUYS — SERVICE PAGE EXTRAS
   Loaded after /design/tokens.css and /design/components.css on every
   page in site/. This file exists so the seven service pages never have to
   edit the shared design/ inputs (tokens.css / components.css /
   components.html) — those are read-only, shared across multiple build
   agents. Every rule below references only the semantic tokens already
   defined in tokens.css; no raw hex values are introduced here.
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. HEADER — white band, navy nav text, red CTA (coordinator decision).
   The real crest logo (/assets/brand/thg-logo-*) has a white outer glow, a
   silver saw blade and a chrome "THE" badge that only reads cleanly on a
   light surface, so the sticky top bar is --color-bg-page (white) here,
   overriding components.css's default navy header for THIS band only.
   The footer and the mobile fullscreen nav panel are untouched and stay
   --navy, exactly as shipped in components.css.
   --------------------------------------------------------------------- */
.site-header {
  background: var(--color-bg-page);
  color: var(--color-text-heading);
  border-bottom: 1px solid var(--color-border-default);
}
.site-header__bar { min-height: 76px; }
@media (min-width: 1024px) {
  .site-header__bar { min-height: 92px; }
}
.site-header__logo,
.site-header__logo-word { color: var(--color-text-heading); }
.site-header__logo-tag { color: var(--color-text-muted); opacity: 1; }
/* Logo sizing lives in design/components.css only — three different local
   overrides made the logo a different size on different pages. */
/* Fix: .site-nav is `flex:1` (flex-basis 0%) inside .site-header__bar, but
   its default min-width:auto stops it from ever shrinking below its
   content's natural single-line width — at 1024–1280px that natural width
   (6 nav items) is wider than the space left after the logo/phone/CTA take
   their fixed widths, so the nav overflows and visually overlaps the phone
   block instead of wrapping. min-width:0 is the standard fix: it lets the
   flex item actually shrink to its allotted space, so the inner
   `flex-wrap:wrap` on the <ul> (already in components.css) can do its job
   and wrap onto a second line inside its own box instead of overlapping. */
.site-nav { min-width: 0; }
.site-header__bar .site-nav a { color: var(--color-text-heading); }
.site-header__bar .site-nav a:hover,
.site-header__bar .site-nav a:focus-visible { color: var(--color-cta-bg-hover); text-decoration: underline; }
.site-header__bar .site-header__phone { color: var(--color-cta-bg); }
.site-header__bar .site-header__phone:hover,
.site-header__bar .site-header__phone:focus-visible { color: var(--color-cta-bg-hover); }
.site-header__bar .site-header__hours { color: var(--color-text-muted); opacity: 1; }
.site-header__bar .hamburger { color: var(--color-text-heading); }
/* Standard (non-inverse) focus ring reads fine on this light band; the
   mobile fullscreen nav panel below is untouched and keeps the inverse
   (white) ring it already has from components.css. */
.site-header__bar :focus-visible { outline-color: var(--color-focus-ring); }

/* Footer logo — footer band stays --navy, so the same crest logo sits in a
   small white rounded card instead of running straight on the dark band. */
.footer-logo-badge {
  display: inline-flex;
  background: var(--color-bg-card);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-4);
}
.footer-logo-badge img { height: 40px; width: auto; display: block; }

/* ---------------------------------------------------------------------
   2. BREADCRUMBS
   --------------------------------------------------------------------- */
.breadcrumb-nav { padding-block: var(--space-4); border-bottom: 1px solid var(--color-border-default); }
.breadcrumb-nav ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumb-nav li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb-nav li:not(:last-child)::after { content: "/"; color: var(--color-border-default); }
.breadcrumb-nav a { color: var(--color-text-link); min-height: 32px; display: inline-flex; align-items: center; }
.breadcrumb-nav a:hover, .breadcrumb-nav a:focus-visible { color: var(--color-text-link-hover); text-decoration: underline; }
.breadcrumb-nav [aria-current="page"] { color: var(--color-text-body); font-weight: var(--weight-medium); }

/* ---------------------------------------------------------------------
   3. HERO — REAL PHOTO VARIANT
   A real jobsite <img> instead of the striped placeholder pattern used in
   components.html, with the same dark scrim + white text on top so
   contrast matches the verified hero type styles exactly. Markup order:
   <img class="hero__photo"> then the stock .hero__media scrim div, then
   the existing .hero__content — components.css's z-index rules already
   stack .hero__media (0, later in DOM) above a same-z-index earlier
   sibling and .hero__content (1) above both.
   --------------------------------------------------------------------- */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero--photo .hero__media {
  background: linear-gradient(rgba(var(--near-black-rgb), 0.66), rgba(var(--near-black-rgb), 0.5));
}
/* Placeholder hero used only where the asset map has nothing suitable
   (costguide, water-vs-oil-polyurethane) — a solid brand-wood band with a
   centered label, per BUILD-SPEC's explicit fallback. */
.hero--placeholder .hero__media {
  background: linear-gradient(rgba(var(--near-black-rgb), 0.35), rgba(var(--near-black-rgb), 0.35)), var(--color-bg-accent-wood);
}
.hero__placeholder-tag {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  font-size: var(--text-xs);
  color: var(--white);
  opacity: 0.75;
  background: rgba(var(--near-black-rgb), 0.4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

/* ---------------------------------------------------------------------
   4. PROSE / OUTCOME COPY
   --------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose p { color: var(--color-text-body); }
.prose p + p,
.prose p + ul,
.prose ul + p,
.prose p + h3,
.prose h3 + p { margin-top: var(--space-4); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-6); margin-bottom: var(--space-2); }

/* ---------------------------------------------------------------------
   5. CHECKLIST ("What's included")
   --------------------------------------------------------------------- */
.check-list { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.check-list li svg { width: 24px; height: 24px; flex: none; margin-top: 1px; color: var(--color-text-heading); }
.check-list li span { color: var(--color-text-body); }
@media (min-width: 700px) {
  .check-list--2col { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   6. PHOTO GRID (real-photo row/gallery)
   --------------------------------------------------------------------- */
.photo-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.photo-grid figure { margin: 0; border-radius: var(--radius-base); overflow: hidden; border: 1px solid var(--color-border-default); background: var(--color-bg-page-alt); box-shadow: var(--shadow-sm); }
.photo-grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.photo-grid figcaption { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
@media (min-width: 640px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .photo-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------
   7. CTA BAND (mid-page inline conversion prompt)
   Wood accent band per brand direction ("one dark section band"); red is
   reserved for the button itself, never the band background/text.
   --------------------------------------------------------------------- */
.cta-band {
  background: var(--color-bg-accent-wood);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.cta-band__text h2, .cta-band__text p { color: var(--white); }
.cta-band__text p { margin-top: var(--space-2); opacity: 0.92; }
.cta-band__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; flex: 0 1 auto; min-width: 0; }
.cta-band :focus-visible { outline-color: var(--color-focus-ring-inverse); }

/* ---------------------------------------------------------------------
   8. FAQ ACCORDION — native <details>/<summary>, no JS required
   --------------------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 820px; }
.faq-item { border: 1px solid var(--color-border-default); border-radius: var(--radius-base); background: var(--color-bg-card); overflow: hidden; }
.faq-item__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
  font-size: var(--text-base);
  min-height: var(--touch-target-min);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }
.faq-item__q svg { flex: none; width: 22px; height: 22px; color: var(--color-text-muted); transition: transform var(--motion-base) var(--motion-ease); }
.faq-item[open] .faq-item__q svg { transform: rotate(180deg); }
.faq-item__q:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }
.faq-item__a { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-body); }
.faq-item__a p + p { margin-top: var(--space-3); }

/* ---------------------------------------------------------------------
   9. COMPARISON TABLE (finish/product comparisons)
   --------------------------------------------------------------------- */
/* position:relative is load-bearing, not cosmetic: the table cells carry
   `.visually-hidden` spans (position:absolute) for screen readers. A static
   .table-scroll is not their containing block, so they resolve against the
   initial containing block and its overflow-x:auto does NOT clip them — at
   320px their static position sits ~527px out, which is real document-level
   horizontal overflow even though the table itself scrolls correctly.
   Making this a containing block brings them back inside the clip. */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-base); border: 1px solid var(--color-border-default); }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--color-bg-card); }
.compare-table caption { text-align: left; padding: var(--space-4) var(--space-5); font-weight: var(--weight-semibold); color: var(--color-text-heading); font-family: var(--font-heading); font-size: var(--text-md); }
.compare-table th, .compare-table td { padding: var(--space-3) var(--space-5); text-align: left; border-bottom: 1px solid var(--color-border-default); font-size: var(--text-sm); vertical-align: top; }
.compare-table thead th { background: var(--color-bg-page-alt); color: var(--color-text-heading); font-weight: var(--weight-bold); border-bottom: 2px solid var(--color-border-default); }
.compare-table tbody th[scope="row"] { font-weight: var(--weight-semibold); color: var(--color-text-heading); white-space: nowrap; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------
   10. SELF-ASSESSMENT / STEP CARDS (costguide)
   --------------------------------------------------------------------- */
.step-card-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .step-card-grid { grid-template-columns: 1fr 1fr; } }
.step-card { background: var(--color-bg-card); border: 1px solid var(--color-border-default); border-radius: var(--radius-base); padding: var(--space-5); }
.step-card h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.step-card p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------
   11. HERO — SPLIT VARIANT (copy beside a portrait photo, not full-bleed)
   Used on dustless-planetary-sanding: the only equipment photos are
   portrait crops (472x839 / 508x839). A full-bleed .hero--photo background
   would crop away most of the machine, so this keeps the photo intact in
   its own column next to the copy, on the same --navy the header/footer
   already use (.hero base class already sets color:inverse/overflow).
   --------------------------------------------------------------------- */
.hero--split { background: var(--color-bg-header); }
.hero--split__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
  padding-block: var(--space-16);
  grid-template-columns: 1fr;
}
.hero--split .hero__content { max-width: none; }
.hero--split__media img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 860px) {
  .hero--split__grid { grid-template-columns: 1.15fr 0.85fr; padding-block: var(--space-20) var(--space-16); }
  .hero--split__media img { max-width: 100%; }
}

/* ---------------------------------------------------------------------
   12. SINGLE PHOTO FEATURE — close-up shot with a caption
   --------------------------------------------------------------------- */
.photo-feature { max-width: 420px; margin-inline: auto; }
.photo-feature img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-md);
}
.photo-feature figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---- Footer nav: Finishes & Stains is now its own column, so the
   footer grid carries 5 columns (Brand + 4 nav columns) at desktop. ---- */
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.1fr repeat(4, 1fr); }
}

/* At 320-375px two side-by-side CTAs overflowed the viewport by ~273px.
   flex:none on the row prevented it shrinking; these let it wrap cleanly. */
@media (max-width: 420px) {
  .cta-band__actions { width: 100%; }
  .cta-band__actions > * { flex: 1 1 100%; }
}