/* =========================================================================
   PAGE-EXTRA.CSS — supplementary styles for the finish/product/utility
   pages built under site/.

   IMPORTANT: this file exists so NOTHING in design/tokens.css or
   design/components.css needs to be touched. Those two files are shared,
   read-only inputs used by every page-building agent plus the design-
   system agent; editing them concurrently caused churn, so per the
   coordinator's instruction this stylesheet is the only place new rules
   for this page set live. It is loaded AFTER components.css on every page
   in this set, and every rule below references only the semantic tokens
   already defined in design/tokens.css — no raw hex values.

   Covers:
   1. Header — REMOVED 2026-10-05; design/header-final.css owns the header now.
   2. Footer logo badge (small white card, since the footer stays navy).
   3. Breadcrumbs.
   4. Hero — "lite" spacing variant.
   5. Prose / checklist (restores list markers the global reset removes).
   6. Real-photo grid.
   7. Mid-page inline CTA band.
   8. FAQ accordion (native <details>/<summary>).
   9. Comparison table (Bona sealer × finish grid).
   10. Product-card photo (store/LVP/stair-parts catalogue cards).
   11. Species toggle + stain-swatch grid + lightbox (stainchart.html).
   12. Color name chips (approximate swatches for named finish colors).
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. HEADER -- REMOVED 2026-10-05.
   This file used to restyle the header as an off-white (#F6F6F6) band with an
   88px bar and an 88px mobile-drawer offset, which made the 15 pages that load
   it 89px tall at 390px against 75px on the home page and 77px on the service
   pages. design/header-final.css (loaded last on every page) is now the only
   place the header is styled -- see its "AUDIT FIXES 2026-10-05" block.
   Nothing header-related belongs here.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   2. FOOTER LOGO BADGE — footer stays --navy, so the logo still sits in a
   small white card to avoid the white-glow/chrome-halo problem.
   --------------------------------------------------------------------- */
.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; }

/* ---------------------------------------------------------------------
   3. 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); }

/* ---------------------------------------------------------------------
   4. HERO — lite spacing variant (product/finish pages don't need the
   full-bleed homepage hero height)
   --------------------------------------------------------------------- */
.hero--lite .hero__content { padding-block: var(--space-16) var(--space-12); }

/* ---------------------------------------------------------------------
   5. PROSE / CHECKLIST — restore list markers the global reset removes
   --------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose p { color: var(--color-text-body); }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + ol, .prose ol + p { margin-top: var(--space-4); }
.prose ul:not(.check-list):not(.color-chip-list), .prose ol { list-style-position: outside; padding-left: 1.4em; }
.prose ul:not(.check-list):not(.color-chip-list) { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { color: var(--color-text-body); margin-bottom: var(--space-2); }
.prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose h4 { margin-top: var(--space-5); margin-bottom: var(--space-2); font-size: var(--text-md); }
.prose strong { color: var(--color-text-heading); }

.check-list { display: grid; gap: var(--space-4); grid-template-columns: 1fr; list-style: none; padding: 0; }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: 0; }
.check-list li svg { width: 24px; height: 24px; flex: none; margin-top: 1px; color: var(--color-cta-bg); }
.check-list li span { color: var(--color-text-body); }
@media (min-width: 700px) {
  .check-list--2col { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   6. REAL-PHOTO GRID
   --------------------------------------------------------------------- */
.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 per brand
   direction; red stays reserved for the button itself.
   --------------------------------------------------------------------- */
.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 (Bona sealer × finish grid)
   --------------------------------------------------------------------- */
/* 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. PRODUCT CARD PHOTO — real <img> variant of .service-card, used on
   store/LVP/stair-parts catalogue cards (no price, no stock badges)
   --------------------------------------------------------------------- */
.service-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--color-bg-page-alt);
}
.service-card__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
}
.service-card__note svg { width: 18px; height: 18px; color: var(--color-strip-accent); flex: none; }

/* ---------------------------------------------------------------------
   11. SPECIES TOGGLE + STAIN SWATCH GRID + LIGHTBOX (stainchart.html)
   --------------------------------------------------------------------- */
.species-toggle {
  display: inline-flex;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-bg-page-alt);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-8);
}
.species-toggle__btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  border: 0;
  background: transparent;
  color: var(--color-text-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
}
.species-toggle__btn[aria-pressed="true"] {
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  color: var(--color-cta-bg);
}
.species-panel[hidden] { display: none; }
.species-panel .check-list { margin-top: var(--space-5); }

.swatch-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-8);
}
@media (min-width: 640px) {
  .swatch-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .swatch-grid { grid-template-columns: repeat(4, 1fr); }
}
.swatch-card__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-base);
  overflow: hidden;
  background: var(--color-bg-page-alt);
  cursor: zoom-in;
  min-height: var(--touch-target-min);
}
.swatch-card__btn img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform var(--motion-base) var(--motion-ease);
}
.swatch-card__btn:hover img,
.swatch-card__btn:focus-visible img { transform: scale(1.04); }

.swatch-lightbox {
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: min(90vw, 640px);
  max-height: 90vh;
  background: var(--color-bg-card);
  box-shadow: var(--shadow-lg);
}
.swatch-lightbox::backdrop { background: rgba(var(--near-black-rgb), 0.7); }
.swatch-lightbox img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: var(--radius-sm); }
.swatch-lightbox p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }
#swatch-lightbox-close {
  margin-left: auto;
  display: flex;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg-page-alt);
  color: var(--color-text-heading);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------
   12. COLOR NAME CHIPS — approximate reference swatches for named finish
   colors (Rubio/Pallmann/Bona color names). Decorative only; always
   paired with visible text naming the color, never color alone. These
   are literal representations of real product colors, not brand UI, so
   an inline approximate hex per instance is used rather than a token.
   --------------------------------------------------------------------- */
.color-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.color-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-bg-page-alt);
  border: 1px solid var(--color-border-default);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-body);
}
.color-chip__swatch {
  width: 16px; height: 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0,0,0,0.15);
  flex: none;
  display: inline-block;
}

/* ---------------------------------------------------------------------
   13. MISC
   --------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-cta-bg);
  margin-bottom: var(--space-3);
}

/* ---- 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(5, 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%; }
}


/* =========================================================================
   AUDIT FIXES 2026-10-05
   ========================================================================= */

/* ---- Prose rhythm + measure (legal pages, stain chart, product pages) -------
   Line length on /privacy-policy, /terms and /warranty measured 85-101
   characters per line (72ch box = 771px; averages 85-89). `ch` is the width of a "0", which is
   ~20% wider than the average letter of this body face, so 65ch still gave
   77-83 characters on average (max 87-92); 60ch (642px) gives 73-76 on average
   (max 82-85), which is where a reading column should sit. Pages that wrap
   .prose in .container.prose lose the container's own padding inside the same
   box, so they land lower still (~65: /costguide, the service pages).
   Headings sat almost on top of the paragraph above them: `.prose p + h3` set a
   16px top margin and there was no h2 rule at all. A heading now has more
   than three times as much space above it as below it (40px vs 12px for h2,
   32px vs 8px for h3), so it reads as the start of the section it introduces
   rather than the end of the one before. The `p + h3` / `h3 + p` selectors
   below exist because those older sibling rules are more specific than a plain
   `.prose h3` and would otherwise keep winning. */
.prose { max-width: 60ch; overflow-wrap: break-word; }  /* long pasted URLs in blog posts pushed phones 19-74px sideways */
.prose h2 { margin: var(--space-10) 0 var(--space-3); }
.prose h3,
.prose p + h3,
.prose ul + h3,
.prose ol + h3 { margin: var(--space-8) 0 var(--space-2); }
.prose :is(h2, h3) + :is(p, ul, ol) { margin-top: 0; }
/* A heading that opens its block (first thing in .prose, or in a .section-head
   nested inside it) has nothing above it to separate from: no top margin. */
.prose :is(h2, h3):first-child { margin-top: 0; }
.prose .section-head h2 { margin: 0; }

/* ---- Breadcrumb bar: the links are 44px tall now (components.css), so the
   bar's own padding comes down to keep the bar about the same height. */
.breadcrumb-nav { padding-block: var(--space-1); }