/* ============================================================
   eep-calculator.css — SELF-CONTAINED styles for the production
   Affordability Calculator page ONLY (P2.2).

   Deliberately independent of the staging Field Guide token system,
   same reasoning as eep-fit-report.css (production has no astra-child
   theme). Every class prefixed `eepcalc-` — zero collision risk.
   Reuses the SAME color palette/type scale as eep-fit-report.css
   (terracotta #A84B23, cream card #F4EDDF/#D8C9AC) for visual
   consistency across the two production funnels. Loaded ONLY on
   is_page('affordability-calculator').
   ============================================================ */

.entry-header { display: none; }

.eepcalc-wrap { max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem; font-family: inherit; background: #fff; color: #232323; }
.eepcalc-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: #8F3F1E; margin: 0 0 .5rem; }
.eepcalc-h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 1rem; color: #1a1a1a; }
.eepcalc-lede { font-size: 1.05rem; line-height: 1.6; color: #3a3a3a; margin: 0 0 1.5rem; max-width: 62ch; }

.eepcalc-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.eepcalc-field label { font-size: .9rem; font-weight: 600; }
.eepcalc-field input, .eepcalc-field select { font: inherit; padding: .7rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.eepcalc-field input:focus, .eepcalc-field select:focus { outline: 2px solid #A84B23; outline-offset: 1px; }
.eepcalc-error { color: #A84B23; font-size: .9rem; margin: 0 0 1rem; }

.eepcalc-btn { display: inline-block; width: 100%; text-align: center; background: #A84B23; color: #fff; border: none; border-radius: 6px; padding: .85rem 1.25rem; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: .5rem; text-decoration: none; }
.eepcalc-btn:hover { background: #8F3F1E; }
.eepcalc-btn:disabled { opacity: .6; cursor: default; }
.eepcalc-btn-secondary { background: #fff; color: #8F3F1E; border: 1px solid #D8C9AC; }
.eepcalc-btn-secondary:hover { background: #F4EDDF; }

.eepcalc-results-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.5rem 0 2rem; }
.eepcalc-card { background: #F4EDDF; border: 1px solid #D8C9AC; border-radius: 8px; padding: 1.25rem; }
.eepcalc-card h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.eepcalc-card p { margin: 0 0 .4rem; font-size: .92rem; line-height: 1.5; }
.eepcalc-card .eepcalc-fit-label { font-weight: 700; }
.eepcalc-card.eepcalc-fit-comfortable .eepcalc-fit-label { color: #2f6b3a; }
.eepcalc-card.eepcalc-fit-workable .eepcalc-fit-label { color: #8F3F1E; }
.eepcalc-card.eepcalc-fit-tight .eepcalc-fit-label,
.eepcalc-card.eepcalc-fit-stretch .eepcalc-fit-label { color: #A84B23; }
.eepcalc-card-basis { font-size: .82rem; opacity: .75; }

.eepcalc-checkout { background: #fff; border: 1px solid #D8C9AC; border-radius: 8px; padding: 1.5rem; max-width: 460px; margin-bottom: 2rem; }
.eepcalc-secure { font-size: .8rem; color: #777; margin: .75rem 0 0; line-height: 1.5; }

.eepcalc-confirm { text-align: center; padding: 2.5rem 1.5rem; }
.eepcalc-ref-code { display: inline-block; margin-top: .75rem; padding: .6rem 1rem; background: #F4EDDF; border: 1px solid #D8C9AC; border-radius: 6px; font-weight: 600; letter-spacing: .02em; }