/* ==========================================================================
   ELEVATED ROOFING PARTNERS — calculator-layout.css

   Layout for /calculator. Everything is scoped to body.calc-page.

   That scoping is not optional. css/lp-port.css owns .lpx-inbox and the .rvBs
   strip, and it is shared by twelve pages (the homepage, roof-replacement and
   all nine city pages). A bare .lpx-inbox rule here would silently reflow all
   of them. body.calc-page is the only hook that means "this page".

   Its own file, not an edit to lp-port.css: /css/* is served immutable for a
   year (netlify.toml), so touching a shared sheet forces a ?v= bump on every
   page that links it.

   Load order matters here. lp-port.css is linked AFTER this sheet, so a tie on
   specificity goes to lp-port. Every override below is deliberately one step
   heavier than the rule it replaces.

   PAGE SHAPE — dark, then paper, then dark:

     DARK BAND
       intro
       two columns — left: calculator, then the walkthrough video
                     right: the example estimate, with real prices on it
       trust strip
       How It Works, full width and deliberately large
     PAPER
       What Moves Your Number
       One Honest Note
       Start My Free Estimate
       FAQ
     DARK BAND
       Want an Exact Price, with the full contact form

   The band is Timber, the look picked out of two rounds of four: deep olive
   rather than near-black, white cards, gold accents. The four-look switcher
   and js/calc-variations.js are gone; what is left is the one that won.

   Long-form reading happens on paper. Everything above the fold and the
   closing ask are on the band, so the page is framed dark at both ends.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE BAND — deep olive, warmed at the top corners

   Not near-black. Black read as a generic dark theme; olive is the brand
   colour doing the same job, and the white cards on it are the loudest
   contrast this palette gets without adding a colour.
   -------------------------------------------------------------------------- */

body.calc-page .lpx-inbox {
  background:
    radial-gradient(85% 60% at 12% -5%, rgba(197, 160, 89, 0.20), transparent 60%),
    radial-gradient(70% 55% at 95% 10%, rgba(123, 117, 54, 0.30), transparent 62%),
    #2A2B22;
  /* The section and the olive CTA band below it each carry their own padding,
     which left a dead strip between the honest note and "Want an Exact
     Price?". */
  padding-bottom: var(--space-16, 4rem);
}

/* --------------------------------------------------------------------------
   INTRO — short, so the calculator clears the fold
   -------------------------------------------------------------------------- */

body.calc-page .lpx-inbox .lpx-inbox__head {
  max-width: 720px;
  margin-bottom: 28px;      /* every pixel here pushes the form down */
}

body.calc-page .lpx-inbox .eyb { color: var(--color-gold, #C5A059); }
body.calc-page .lpx-inbox .lpx-inbox__head h1 { color: #fff; }

/* Gold hairline under the masthead. */
body.calc-page .lpx-inbox__head::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 22px auto 0;
  background: var(--color-gold, #C5A059);
}

body.calc-page .lpx-inbox__lede {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   GRID — calculator left, example right

   The calculator column is the narrower of the two on purpose: it holds two
   inputs and a button, and stretching that across the wider column makes the
   page look emptier, not more important. Position does the work instead —
   first in the DOM, first on screen, first on a phone.

   No sticky on the card. It used to be sticky, which meant any variation that
   touched `position` inherited a top offset and silently shoved the card down
   the page. The walkthrough now sits under the form, so the column travels as
   one piece and sticky bought nothing.
   -------------------------------------------------------------------------- */

body.calc-page .lpx-inbox__grid {
  grid-template-columns: 0.92fr 1.08fr;
  align-items: start;
}

body.calc-page .ecard {
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* --------------------------------------------------------------------------
   WALKTHROUGH — under the form, and about twice the size it was

   It explains what happens after the button, so it belongs with the button.
   lp-port sizes this strip for a phone, where it is the small counterpart to
   a big desktop video card. There is no big card on this page any more, so
   the strip is the whole video treatment and gets sized like it.
   -------------------------------------------------------------------------- */

body.calc-page .lpx-inbox__left .rvBs { margin: 18px 0 0; }

@media (min-width: 768px) {
  /* lp-port hides this strip above 768px because on the landing pages it is
     the phone-only counterpart to a big video card. There is no big card here
     any more, so the strip is the whole treatment at every width. */
  body.calc-page .rvBs { display: block; }
}

body.calc-page .rvBs__strip {
  gap: 20px;
  padding: 16px 20px 16px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

body.calc-page .rvBs__thumb {
  width: 172px;
  height: 108px;
  border-radius: 14px;
}

body.calc-page .rvBs__play {
  width: 46px;
  height: 46px;
}

body.calc-page .rvBs__play svg { width: 18px; height: 18px; }

body.calc-page .rvBs__eyebrow {
  font-size: 0.72rem;
  color: var(--color-gold, #C5A059);
  margin-bottom: 0.4rem;
}

body.calc-page .rvBs__title {
  font-size: 1.24rem;
  line-height: 1.3;
  color: #fff;
}

body.calc-page .rvBs__chev { color: rgba(255, 255, 255, 0.5); }

/* --------------------------------------------------------------------------
   THE EXAMPLE ESTIMATE — a white card with real numbers on it

   The card is the same white as the calculator card beside it, so the example
   reads as the thing you are being handed rather than as wallpaper.

   The prices used to be blurred behind a gradient with a "Your custom report"
   chip over it, borrowed from the homepage teaser. It does not work here: on a
   phone .rtiers stacks to one column, so the fade swallowed the third tier
   completely. They are plain now, and they are the real figures for this
   house, filled by roof-pricing.js from the same engine a live estimate uses.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   TRUST STRIP — one row on the band, 2x2 on a phone

   Sits between the calculator and How It Works, which is the moment a visitor
   has just decided whether to type an address in. Four claims, each a short
   line and a shorter one under it, nothing that needs reading twice.
   -------------------------------------------------------------------------- */

body.calc-page .cstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;                              /* the gap IS the divider, over the tint below */
  max-width: 1180px;
  margin: 42px auto 0;
  padding: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  overflow: hidden;
}

body.calc-page .cstrip__item,
body.calc-page .cstrip__link {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  height: 100%;
  padding: 17px 18px;
  background: rgba(255, 255, 255, 0.045);
}

/* The <a> is the whole cell, so the item itself stops padding it twice.
   A modifier class rather than :has(), which would silently double the
   padding on any browser that does not support it. */
body.calc-page .cstrip__item--link { padding: 0; background: none; }

body.calc-page .cstrip__link { transition: background-color 0.18s ease; }
body.calc-page .cstrip__link:hover { background: rgba(255, 255, 255, 0.10); }
body.calc-page .cstrip__link:focus-visible { outline: 2px solid var(--color-gold, #C5A059); outline-offset: -2px; }

body.calc-page .cstrip__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(197, 160, 89, 0.16);
  color: var(--color-gold, #C5A059);
}

body.calc-page .cstrip__icon svg { width: 19px; height: 19px; }

/* Google keeps its own colours, so it gets a neutral tile rather than a gold
   one, or the four-colour mark fights the wash behind it. */
body.calc-page .cstrip__link .cstrip__icon { background: #fff; }
body.calc-page .cstrip__link .cstrip__icon svg { width: 17px; height: 17px; }

body.calc-page .cstrip__text { min-width: 0; }

body.calc-page .cstrip__lead {
  display: block;
  font-family: var(--font-heading, 'Space Grotesk', Arial, sans-serif);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

body.calc-page .cstrip__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.66);
}

body.calc-page .cstrip__link:hover .cstrip__lead { color: var(--color-gold, #C5A059); }

/* --------------------------------------------------------------------------
   HOW IT WORKS — full width, and the one thing on the page allowed to be big

   Own namespace rather than lp-port's .lpx-steps. That markup was only ever
   used on this page, so owning it locally lets the type scale without a ?v=
   bump on the twelve pages sharing lp-port.css.
   -------------------------------------------------------------------------- */

body.calc-page .hiw {
  max-width: 1180px;
  margin: 60px auto 0;
  text-align: center;
}

body.calc-page .hiw__title {
  font-family: var(--font-heading, 'Space Grotesk', Arial, sans-serif);
  font-size: clamp(1.55rem, 3.1vw, 2.15rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 38px;
}

body.calc-page .hiw__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.calc-page .hiw__step {
  position: relative;
  padding: 0 14px;
}

/* A dashed run between the numerals, so the three read as a sequence rather
   than three unrelated cards. */
body.calc-page .hiw__step + .hiw__step::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: -30px;
  width: 44px;
  border-top: 1px dashed rgba(255, 255, 255, 0.24);
}

body.calc-page .hiw__num {
  display: block;
  font-family: var(--font-heading, 'Space Grotesk', Arial, sans-serif);
  font-size: clamp(2.5rem, 5.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-gold, #C5A059);
  margin-bottom: 16px;
}

body.calc-page .hiw__txt {
  margin: 0 auto;
  max-width: 24ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

body.calc-page .hiw__note {
  margin: 34px 0 0;
  font-family: var(--font-heading, 'Space Grotesk', Arial, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold, #C5A059);
}

/* ==========================================================================
   THE PAPER HALF — What Moves Your Number, the honest note, the FAQ
   ========================================================================== */

.cpaper {
  background:
    linear-gradient(180deg, rgba(123, 117, 54, 0.10) 0%, transparent 42%),
    var(--color-bg-alt, #F0EDE8);
}

.cwm__head { text-align: center; max-width: 760px; margin: 0 auto; }
.cwm__head .eyebrow { margin-bottom: var(--space-3, 0.75rem); }

.cwm__lede {
  margin: var(--space-5, 1.25rem) auto 0;
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.75;
}

/* The line that ties the two columns together. Bigger than the card text and
   centred, so it reads as the conclusion rather than a fifth card. */
.cwm__close {
  max-width: 62ch;
  margin: var(--space-10, 2.5rem) auto 0;
  text-align: center;
  font-family: var(--font-heading, 'Space Grotesk', Arial, sans-serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-text-primary, #1C1C1E);
}

/* --------------------------------------------------------------------------
   ONE HONEST NOTE — a callout with a face on it

   It used to be 0.82rem grey type under the example estimate, which is where
   disclaimers go to be ignored. Reading size, a gold edge, and the name of
   the person saying it.
   -------------------------------------------------------------------------- */

.cnote {
  max-width: 760px;
  margin: var(--space-12, 3rem) auto 0;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(21, 21, 23, 0.12));
  border-left: 4px solid var(--color-gold, #C5A059);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-6, 1.5rem) var(--space-8, 2rem);
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(21, 21, 23, 0.06));
}

.cnote__title {
  font-size: var(--text-lg, 1.1875rem);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-3, 0.75rem);
}

.cnote__body {
  margin: 0;
  font-size: var(--text-base, 1.0625rem);
  line-height: 1.75;
  color: var(--color-text-primary, #1C1C1E);
}

.cnote__by {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-5, 1.25rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--color-border, rgba(21, 21, 23, 0.12));
}

.cnote__face {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;   /* the crop is full-body; this keeps the face */
  border: 2px solid var(--color-gold, #C5A059);
}

.cnote__name {
  font-family: var(--font-heading, 'Space Grotesk', Arial, sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-text-primary, #1C1C1E);
}

.cnote__role { font-weight: 500; color: var(--color-text-muted, #5A5A5A); }

/* --------------------------------------------------------------------------
   SECOND CALCULATOR CTA
   -------------------------------------------------------------------------- */

.ccta { text-align: center; margin-top: var(--space-8, 2rem); }

.ccta__btn {
  background: var(--color-gold, #C5A059);
  color: var(--color-charcoal, #151517);
  border-color: var(--color-gold, #C5A059);
}

.ccta__btn:hover {
  background: var(--color-gold-hover, #B8913D);
  border-color: var(--color-gold-hover, #B8913D);
}

/* --------------------------------------------------------------------------
   FAQ — the site's .faq-item component, opened by js/animations.js
   -------------------------------------------------------------------------- */

.cfaq { margin-top: var(--space-16, 4rem); }
.cfaq__title { margin-bottom: var(--space-8, 2rem); }

/* The shared rule sets the question uppercase at heading weight, which reads
   as a label rather than as something a person asked. */
.cfaq .faq-item__question {
  text-transform: none;
  font-size: var(--text-base, 1.0625rem);
  letter-spacing: 0.01em;
}

.cfaq .faq-item__answer p { margin: 0; }

/* --------------------------------------------------------------------------
   WANT AN EXACT PRICE — the band again, the full contact form as a white card
   -------------------------------------------------------------------------- */

/* The olive gradient .cta-banner ships with is replaced by the same deep
   olive the top of the page uses, so the two dark ends match instead of being
   two different greens. */
body.calc-page .xprice {
  background:
    radial-gradient(80% 60% at 88% 0%, rgba(197, 160, 89, 0.16), transparent 62%),
    radial-gradient(70% 55% at 6% 100%, rgba(123, 117, 54, 0.26), transparent 60%),
    #2A2B22;
}

.xprice__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .xprice__inner { grid-template-columns: 0.85fr 1.15fr; gap: 48px; }
}

.xprice__text { color: #fff; }
.xprice__text h2 { color: #fff; margin: 0 0 0.6rem; }

.xprice__text p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 0.9rem;
  max-width: 46ch;
}

.xprice__call { font-size: 0.95rem; margin-bottom: 0 !important; }

.xprice__call a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.xprice__call a:hover { color: var(--color-gold, #C5A059); }

.xprice__form {
  background: #fff;
  border-radius: 16px;
  padding: 1.4rem;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
}

.xprice__form .crd-form { display: block; }

/* Gold, not the site's olive submit: an olive button on an olive band goes
   muddy, and gold is what "Get My Estimate" uses at the top of this page. */
.xprice__form .crd-submit {
  width: 100%;
  margin-top: 0.9rem;
  background: var(--color-gold, #C5A059);
  color: var(--color-charcoal, #151517);
  border-color: var(--color-gold, #C5A059);
}

.xprice__form .crd-submit:hover {
  background: var(--color-gold-hover, #B8913D);
  border-color: var(--color-gold-hover, #B8913D);
}

/* --------------------------------------------------------------------------
   SUCCESS OVERLAY — same component as the contact page, styles inlined here
   rather than pulling the whole of booking.css onto this page for one card.
   -------------------------------------------------------------------------- */

.form-overlay[hidden] { display: none; }

.form-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(33, 31, 32, 0.85);
  padding: 1rem;
}

.form-overlay__card {
  background: #fff;
  border-radius: 14px;
  padding: 2.5rem 2rem;
  max-width: 460px;
  text-align: center;
}

.form-overlay__title { margin: 1rem 0 0.6rem; }
.form-overlay__text { margin: 0 0 0.6rem; color: var(--color-text-muted, #5A5A5A); line-height: 1.6; }

/* ==========================================================================
   NARROW
   ========================================================================== */

/* Tablet. The trust strip is the thing that breaks first: four cells and the
   longest sub-line is "Serving North Idaho and Eastern Washington". */
@media (max-width: 1080px) {
  body.calc-page .cstrip { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
}

@media (max-width: 960px) {
  /* Collapse to one column. This has to be restated, not inherited: lp-port
     does it with a bare `.lpx-inbox__grid`, which the body.calc-page override
     above outranks at every width. Without this the two columns stay side by
     side on a phone, the right one runs off the screen and the page scrolls
     sideways. */
  body.calc-page .lpx-inbox__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    gap: 26px;
  }

  /* Mobile content order: headline, calculator, example estimate, then the
     walkthrough video. On desktop the video sits in the left column under the
     form, which would otherwise put it above the example on a phone.

     display:contents dissolves the left column so its two children become
     grid items in their own right and can be ordered against the right
     column. The column div carries no background, border or padding, so
     there is nothing to lose by dissolving it. */
  body.calc-page .lpx-inbox__left { display: contents; }
  body.calc-page #rrf-card { order: 1; }
  body.calc-page .lpx-inbox__right { order: 2; }
  body.calc-page .lpx-inbox__left .rvBs { order: 3; margin: 0; }

  body.calc-page .cstrip { margin-top: 32px; }

  body.calc-page .hiw { max-width: 560px; margin-top: 44px; }
  body.calc-page .hiw__grid { grid-template-columns: 1fr; gap: 26px; text-align: left; }
  body.calc-page .hiw__step { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 0; }
  body.calc-page .hiw__num { margin-bottom: 0; font-size: 2.2rem; }
  body.calc-page .hiw__txt { margin: 0; max-width: none; }
  body.calc-page .hiw__step + .hiw__step::before { display: none; }

  .cnote { padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem); }
  .cfaq { margin-top: var(--space-12, 3rem); }
}

@media (max-width: 560px) {
  body.calc-page .lpx-inbox .lpx-inbox__head { margin-bottom: 22px; }
  body.calc-page .lpx-inbox__lede { font-size: 0.95rem; }
  body.calc-page .hiw__title { margin-bottom: 26px; }

  /* The doubled strip does not fit a 360px screen with the copy beside it. */
  body.calc-page .rvBs__strip { gap: 14px; padding: 12px 14px 12px 12px; }
  body.calc-page .rvBs__thumb { width: 112px; height: 72px; }
  body.calc-page .rvBs__title { font-size: 1.02rem; }
  body.calc-page .rvBs__play { width: 38px; height: 38px; }

  /* Still 2x2, just tighter. Three or four narrow cells side by side would
     break every sub-line onto three lines.

     Top-aligned rather than centred: "Serving North Idaho and Eastern
     Washington" runs to three lines at this width, and centring left its icon
     floating in the middle of the block instead of next to the claim. */
  body.calc-page .cstrip__item,
  body.calc-page .cstrip__link { padding: 13px 12px; gap: 10px; align-items: flex-start; }
  body.calc-page .cstrip__icon { width: 30px; height: 30px; border-radius: 9px; }
  body.calc-page .cstrip__icon svg { width: 17px; height: 17px; }
  body.calc-page .cstrip__lead { font-size: 0.79rem; }
  body.calc-page .cstrip__sub { font-size: 0.7rem; }

  .cwm__close { font-size: 1.02rem; }
  .ccta__btn { width: 100%; }

  .xprice__inner { gap: 22px; }
  .xprice__text p { max-width: none; }
  .xprice__form { padding: 1.1rem; }
}