/* ============================================================================
   WrightHaven Homes — floor-plan "build flow" configurator
   ----------------------------------------------------------------------------
   Powers the checkout-style build flow on a single-floorplan page (pilot:
   /floorplans/encino/). Two sections: .wh-config (Choose brick → Choose lot,
   with a sticky "product preview" rail that rides down the page) and
   .wh-inquire (an honest handoff to /register/ carrying the selections).

   Behaviour lives in assets/wh-plan-configurator.js. The lot step embeds the
   real Pasture Edge site-plan component (assets/wh-siteplan.css/.js), running
   in picker mode via [data-wh-siteplan-picker].

   THEME: the single-floorplan pages are a DARK theme — the whole page wrapper
   carries .wh-dark (see wh-home-hero.css), which forces white text on bare
   p/li/h3-h5 with !important and gives every section a #141414 ground. So this
   configurator is dark too, mirroring the hero's card palette for parity:
     card ground #1d1e1e, hairline rgba(192,181,155,.18), text white, gold
     accents. Eyebrow <p>s are re-asserted to gold with matching-specificity
     !important to beat the .wh-dark p rule (our sheet loads after it).

   Tokens --wh-gold / --wh-tan / --wh-radius are the sitewide ones from
   wrighthaven-custom.css (loaded first).

   Real position:sticky is dead sitewide (html/body overflow-x hidden), so the
   rail is pinned with position:fixed + a scroll listener that reads
   --wh-ribbon-h, mirroring wh-collection.js syncToolbarPin(). Every <button>
   here is authored to beat the .elementor-kit-5 button reset.
   ========================================================================== */

.wh-config {
  --wh-cfg-ease: cubic-bezier(0.22, 0.72, 0.22, 1);
  --wh-cfg-ground: #141414;
  --wh-cfg-panel: #1d1e1e;
  --wh-cfg-line: rgba(192, 181, 155, 0.18);
  --wh-cfg-line-strong: rgba(192, 181, 155, 0.34);
  --wh-cfg-text: rgba(255, 255, 255, 0.92);
  --wh-cfg-dim: rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
  padding: 56px 24px 64px;
  background: var(--wh-cfg-ground);
}
.wh-config *,
.wh-config *::before,
.wh-config *::after { box-sizing: border-box; }

.wh-config__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  /* stretch (not start) so .wh-config__rail-col spans the full row height even
     when the rail inside goes position:fixed — gives syncRailPin() a stable
     wrapper to measure and a track for the parked (bottom:0) state. */
  align-items: stretch;
}

/* --- Steps (left column) ------------------------------------------------- */
.wh-config__main { min-width: 0; }

.wh-config__step { margin-bottom: 48px; }
.wh-config__step:last-child { margin-bottom: 0; }

.wh-config__eyebrow {
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wh-config__title {
  margin: 0 0 8px;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wh-cfg-text);
}
.wh-config__sub {
  margin: 0 0 24px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  max-width: 56ch;
}

/* --- Brick tiles --------------------------------------------------------- */
.wh-config__bricks {
  display: grid;
  /* 132px min lets all five options sit in one clean row on the desktop main
     column (~772px), collapsing to 2 across on phones. */
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 14px;
}
.wh-config__brick {
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  padding: 12px 12px 14px !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  background: var(--wh-cfg-panel) !important;
  border: 1px solid var(--wh-cfg-line) !important;
  border-radius: var(--wh-radius) !important;
  color: var(--wh-cfg-text) !important;
  font-family: "Poppins", sans-serif !important;
  text-align: left !important;
  cursor: pointer;
  transition: border-color 0.18s var(--wh-cfg-ease),
              box-shadow 0.18s var(--wh-cfg-ease),
              transform 0.18s var(--wh-cfg-ease);
}
.wh-config__brick:hover { border-color: var(--wh-cfg-line-strong) !important; transform: translateY(-1px); }
.wh-config__brick:focus-visible {
  outline: 2px solid var(--wh-gold) !important;
  outline-offset: 2px;
}
.wh-config__brick[aria-pressed="true"] {
  border-color: var(--wh-gold) !important;
  box-shadow: inset 0 0 0 1px var(--wh-gold);
}
.wh-config__brick-swatch {
  display: block;
  height: 64px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--sw, #cbb99b);
  /* subtle brick-course texture over the flat placeholder colour */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 24px);
}
.wh-config__brick-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--wh-cfg-text);
}
.wh-config__brick-note {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wh-cfg-dim);
}
.wh-config__brick[aria-pressed="true"] .wh-config__brick-name::after {
  content: " ✓";
  color: var(--wh-green);
}

/* --- Sticky preview rail (right column) ---------------------------------- */
.wh-config__rail-col { position: relative; min-width: 0; }

.wh-config__rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Pinned: fixed under the ribbon. JS sets left/width from the column's rect
   and toggles this class. z-index sits below the ribbon (120) and far below
   the site-plan lot-card modal (9990). */
.wh-config__rail.is-pinned {
  position: fixed;
  top: var(--wh-ribbon-h, 0px);
  z-index: 90;
}
/* Parked: stops at the end of the configurator instead of overrunning. */
.wh-config__rail.is-parked {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.wh-config__preview {
  position: relative;
  border-radius: var(--wh-radius);
  overflow: hidden;
  background: #0f1010;
  border: 1px solid var(--wh-cfg-line);
}
.wh-config__preview-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.wh-config__preview-chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.66);
  border: 1px solid rgba(192, 181, 155, 0.24);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wh-config__card {
  background: var(--wh-cfg-panel);
  border: 1px solid var(--wh-cfg-line);
  border-radius: var(--wh-radius);
  padding: 20px 22px 22px;
}
.wh-config__card-eyebrow {
  margin: 0 0 2px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wh-config__card-title {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wh-cfg-text);
}
.wh-config__card-community {
  margin: 2px 0 16px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
}
.wh-config__spec {
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.wh-config__spec > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wh-cfg-line);
}
.wh-config__spec > div:last-child { border-bottom: 0; padding-bottom: 0; }
.wh-config__spec dt {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wh-cfg-dim);
}
.wh-config__spec dd {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--wh-cfg-text);
  text-align: right;
}

/* Shared CTA styling for the anchors in the card + inquiry section. */
.wh-config__cta,
.wh-inquire__cta {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border-radius: var(--wh-radius);
  background: var(--wh-gold);
  color: #141414;
  border: 1px solid var(--wh-gold);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--wh-cfg-ease), border-color 0.18s var(--wh-cfg-ease);
}
.wh-config__cta:hover,
.wh-inquire__cta:hover { background: var(--wh-tan); border-color: var(--wh-tan); }

/* ==========================================================================
   Inquiry section — honest handoff to /register/, no dead form
   ========================================================================== */
.wh-inquire {
  --wh-cfg-panel: #1d1e1e;
  --wh-cfg-line: rgba(192, 181, 155, 0.18);
  --wh-cfg-text: rgba(255, 255, 255, 0.92);
  --wh-cfg-dim: rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
  padding: 60px 24px 72px;
  background: #141414;
  border-top: 1px solid rgba(192, 181, 155, 0.14);
}
.wh-inquire *, .wh-inquire *::before, .wh-inquire *::after { box-sizing: border-box; }
.wh-inquire__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
}
.wh-inquire__eyebrow {
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wh-inquire__title {
  margin: 0 0 14px;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wh-cfg-text);
}
.wh-inquire__lede {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  max-width: 52ch;
}
.wh-inquire__summary {
  background: var(--wh-cfg-panel);
  border: 1px solid var(--wh-cfg-line);
  border-radius: var(--wh-radius);
  padding: 22px 24px 24px;
}
.wh-inquire__summary-title {
  margin: 0 0 14px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wh-inquire__summary dl { margin: 0 0 18px; display: grid; gap: 10px; }
.wh-inquire__summary dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wh-cfg-line);
}
.wh-inquire__summary dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.wh-inquire__summary dt {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wh-cfg-dim);
}
.wh-inquire__summary dd {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--wh-cfg-text);
  text-align: right;
}
.wh-inquire__fallback {
  margin: 14px 0 0;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-align: center;
}
.wh-inquire__fallback a { color: #fff; font-weight: 500; }

/* --- Re-assert accent colours over the sitewide .wh-dark p rule ----------
   .wh-dark p/li set white !important; these eyebrow <p>s must read gold. Same
   specificity (0,2,0) + !important, and this sheet loads later, so we win. --- */
.wh-config .wh-config__eyebrow,
.wh-config .wh-config__card-eyebrow,
.wh-inquire .wh-inquire__eyebrow,
.wh-inquire .wh-inquire__summary-title { color: var(--wh-gold) !important; }
.wh-config .wh-config__sub,
.wh-config .wh-config__card-community,
.wh-inquire .wh-inquire__lede { color: rgba(255, 255, 255, 0.66) !important; }

/* ==========================================================================
   Responsive — below 900px the rail never pins; it stacks under the steps.
   The lot step (site-plan) is always taller than the rail on desktop, so no
   layout placeholder is needed; JS early-returns from the pin loop here.
   ========================================================================== */
@media (max-width: 900px) {
  .wh-config__inner { grid-template-columns: 1fr; gap: 32px; }
  .wh-config__rail-col { order: -1; }           /* preview above the steps on mobile */
  .wh-config__rail.is-pinned,
  .wh-config__rail.is-parked {
    position: static;
    width: auto;
  }
  .wh-config__rail { max-width: 480px; }
  .wh-inquire__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* Honour reduced-motion: drop the hover lift/transitions to instant. The rail
   pin is position-driven (no transition) and the JS lot-commit scroll already
   checks prefers-reduced-motion, so this covers the remaining CSS motion. */
@media (prefers-reduced-motion: reduce) {
  .wh-config__brick,
  .wh-config__cta,
  .wh-inquire__cta { transition: none; }
  .wh-config__brick:hover { transform: none; }
}