/* Supplemental tweaks — loaded LAST, overrides nothing structural.
   v4-correct build: all layout/header/nav/slider styling comes from the
   source's own WPFC + Oxygen + RevSlider bundles. This file only holds:
   - the reconstructed Color-Swatches grid (page had no snapshot)
   - tiny niceties (turnstile spacing). Dynamic-year is plain text, no CSS needed.
*/

/* Color Swatches reconstructed grid (about/color pages have no source snapshot) */
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:32px;
}
.swatch-card{
  background:#e5f9f9;
  border-radius:6px;
  overflow:hidden;
  text-align:center;
  padding:0 0 14px;
}
.swatch-card img{
  width:100%;
  height:auto;
  display:block;
}
.swatch-card .swatch-name{
  margin:10px 0 0;
  font-size:18px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#055059;
}
@media (max-width:768px){
  .swatch-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media (max-width:480px){
  .swatch-grid{grid-template-columns:1fr;}
}

/* Cloudflare Turnstile widget spacing inside the GF footer */
.cf-turnstile{margin:16px 0;}

/* --------------------------------------------------------------------------
   STATIC HERO — faithful replacement for the ported RevSlider hero on the
   homepage. Plain HTML + CSS + a tiny vanilla-JS color crossfade. Scoped
   entirely under .rs-static-hero so nothing leaks into the rest of the site.
   Sits inside the existing <section class="ct-section"> whose CSS provides the
   gray paper-texture + dark gradient background. Brand teal: #2da7af / #137289.
   -------------------------------------------------------------------------- */
.rs-static-hero{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  min-height:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:34px;
  padding:24px 16px 8px;
  box-sizing:border-box;
}
/* the bench stage: color-name | bench | dozens, centered, vertically aligned */
.rs-static-hero__stage{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:28px;
  width:100%;
}
.rs-static-hero__colorname{
  flex:0 0 auto;
  min-width:120px;
  text-align:right;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#ffffff;
}
.rs-static-hero__benchwrap{
  position:relative;
  flex:1 1 620px;
  max-width:620px;
  /* hold height = intrinsic aspect ratio of the 920x472 bench art */
  aspect-ratio:920/472;
}
.rs-static-hero__bench{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .7s ease-in-out;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.35));
}
.rs-static-hero__bench.is-active{ opacity:1; }
.rs-static-hero__dozens{
  flex:0 0 auto;
  width:150px;
  text-align:left;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:1.25;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#ffffff;
}
.rs-static-hero__cta{ text-align:center; }
.rs-static-hero__btn{
  display:inline-block;
  background:#2da7af;
  color:#ffffff !important;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-decoration:none !important;
  padding:16px 46px;
  border-radius:5px;
  transition:background .2s ease;
}
.rs-static-hero__btn:hover,
.rs-static-hero__btn:focus{ background:#137289; color:#ffffff !important; }
.rs-static-hero__btn sup{ font-size:.6em; vertical-align:top; }
@media (prefers-reduced-motion: reduce){
  .rs-static-hero__bench{ transition:none; }
}
/* responsive: stack name / bench / dozens and shrink heading area */
@media (max-width:768px){
  .rs-static-hero{ min-height:0; gap:24px; padding:16px 14px; }
  .rs-static-hero__stage{ flex-direction:column; gap:14px; }
  .rs-static-hero__colorname,
  .rs-static-hero__dozens{
    width:auto; min-width:0; text-align:center;
  }
  .rs-static-hero__benchwrap{ width:100%; flex-basis:auto; max-width:520px; }
  .rs-static-hero__btn{ padding:14px 34px; font-size:16px; }
}