/* =========================================================================
   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 — white/off-white band (logo has a white outer glow + chrome
      badge that only reads correctly on a light surface); footer, mobile
      full-screen nav, and mobile sticky bar stay --navy, untouched.
   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 — light band
   --------------------------------------------------------------------- */
.site-header {
  background: var(--color-bg-page-alt);
  color: var(--color-text-heading);
  border-bottom: 1px solid var(--color-border-default);
}
.site-header__bar { min-height: 88px; }
.site-header__logo { color: var(--color-text-heading); gap: var(--space-3); }
/* Logo sizing lives in design/components.css only — three different local
   overrides made the logo a different size on different pages. */
.site-header__logo-word { color: var(--color-text-heading); }
.site-header__logo-tag { color: var(--color-text-muted); opacity: 1; }
.site-nav a { color: var(--color-text-heading); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--color-text-link-hover); text-decoration: underline; }
/* Scoped to the top bar only — the mobile fullscreen nav and footer reuse
   .site-header__phone/.site-header__hours on --navy, where the base
   white-on-navy rules in components.css must stay in effect. */
.site-header .site-header__bar .site-header__phone { color: var(--color-cta-bg); }
.site-header .site-header__bar .site-header__phone:hover,
.site-header .site-header__bar .site-header__phone:focus-visible { color: var(--color-cta-bg-hover); }
.site-header .site-header__bar .site-header__hours { color: var(--color-text-muted); opacity: 1; }
.site-header .site-header__bar .hamburger { color: var(--color-text-heading); }
/* Default (blue) focus ring reads fine at 5.29:1 on this light bar — the
   inverse (white) ring from components.css is only needed on --navy. */
.site-header .site-header__bar :focus-visible { outline-color: var(--color-focus-ring); }
.site-header__mobile-nav { inset: 88px 0 0 0; }

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