/* ==========================================================================
   Solar Savings Calculator — extends style.css design tokens
   ========================================================================== */

/* ---- Calculator hero ----
   Full-bleed banner photo, matching the main site's hero pattern (left-aligned
   headline within the standard container, not an artificially narrow centered
   block) so the headline has room to breathe instead of wrapping tightly. */
.calc-hero {
  position: relative;
  color: #fff;
  padding-top: calc(var(--header-height) + var(--space-7));
  padding-bottom: var(--space-7);
  overflow: hidden;
  background: var(--color-black);
}
.calc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.8) 32%, rgba(10,10,10,0.45) 62%, rgba(10,10,10,0.2) 100%);
  z-index: 1;
}
.calc-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.calc-hero .container { position: relative; z-index: 2; max-width: var(--container-max); }
.calc-hero-content { max-width: 950px; }
.calc-hero h1 {
  font-size: clamp(28px, 5.2vw, 56px);
  color: #fff;
  margin-bottom: var(--space-4);
}
.calc-hero h1 em { color: var(--color-primary); font-style: normal; }
/* Each line (split by the <br> in markup) stays on one line above 480px;
   below that, font-size shrinks enough via the clamp to avoid overflow
   even with wrapping allowed. */
@media (min-width: 480px) {
  .calc-hero h1 { white-space: nowrap; }
}
.calc-hero-sub {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-5);
}
.calc-hero-sub strong { color: #fff; }

/* ---- Tool card ---- */
.calc-tool-section { padding-top: var(--space-7); }
.calc-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
}
.calc-step { margin-bottom: var(--space-6); }
.calc-step:last-child { margin-bottom: 0; }
.calc-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.calc-step-number {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: #06201e;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc-step-head h3 { font-size: 18px; }

/* ---- Segmented toggles (region, grid connection) ---- */
.segmented {
  position: relative;
  display: inline-flex;
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
}
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text-body);
  transition: background var(--transition-base), color var(--transition-base);
  min-height: 40px;
  display: flex;
  align-items: center;
}
.segmented label:hover { background: rgba(0, 0, 0, 0.04); }
.segmented input:checked + label { background: var(--color-black); color: #fff; }
.segmented input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.segmented-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); align-items: center; }
.segmented-row .field-label { font-size: 13px; font-weight: 700; color: var(--color-text-heading); margin-right: 4px; }

/* ---- Property type cards ---- */
.property-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 700px) { .property-grid { grid-template-columns: repeat(5, 1fr); } }
.property-card { position: relative; }
.property-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.property-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
  height: 100%;
  min-height: 44px;
}
.property-card label:hover { border-color: var(--color-primary-light); transform: translateY(-1px); }
.property-card input:checked + label {
  border-color: var(--color-primary);
  background: rgba(21, 186, 178, 0.08);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.property-card .p-name { font-weight: 700; font-size: 14px; color: var(--color-text-heading); }
.property-card .p-range { font-size: 12.5px; color: var(--color-text-body); }

/* ---- Bill slider ---- */
.bill-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.bill-display .amount { font-size: 34px; font-weight: 800; color: var(--color-text-heading); }
.bill-display .unit { font-size: 14px; color: var(--color-text-body); }
input[type="range"].calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border-light);
  outline: none;
  margin: var(--space-2) 0;
}
input[type="range"].calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
input[type="range"].calc-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.slider-range-labels { display: flex; justify-content: space-between; font-size: 12.5px; color: #8b8f92; }

/* ---- Usage pattern pills ---- */
.usage-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.usage-chip { position: relative; }
.usage-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.usage-chip label {
  display: block;
  padding: 10px 16px;
  border: 1.5px solid var(--color-border-light);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.usage-chip input:checked + label { border-color: var(--color-primary); background: rgba(21,186,178,0.1); color: var(--color-primary-dark); }

/* ---- Battery toggle ---- */
.battery-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.battery-toggle-row .label-group { display: flex; align-items: center; gap: 10px; }
.battery-toggle-row svg { width: 22px; height: 22px; color: var(--color-primary); }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--color-border-light);
  border-radius: 999px;
  transition: background var(--transition-base);
  cursor: pointer;
}
.switch .track::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base);
}
.switch input:checked + .track { background: var(--color-primary); }
.switch input:checked + .track::before { transform: translateX(20px); }
.battery-size-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.battery-size-options.is-disabled { opacity: 0.4; pointer-events: none; }
/* Sits outside .battery-size-options so it stays legible while the size chips
   are greyed out — that is exactly when the visitor needs to be told why. */
.calc-step-hint {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-body);
  margin-top: var(--space-3);
}

/* ---- Results ---- */
.calc-results { display: none; }
.calc-results.is-active { display: block; }
.calc-results-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-bottom: var(--space-4); }
@media (min-width: 700px) { .calc-results-grid { grid-template-columns: repeat(3, 1fr); } }
.calc-stat-card {
  background: var(--color-black);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}
.calc-stat-card .stat-value { font-size: clamp(30px, 4vw, 42px); font-weight: 800; color: var(--color-primary-light); margin-bottom: 4px; }
.calc-stat-card .stat-label { font-size: 13.5px; color: var(--color-text-on-dark-muted); }

.calc-timeline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (min-width: 700px) { .calc-timeline { grid-template-columns: repeat(4, 1fr); } }
.calc-timeline-item {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}
.calc-timeline-item .year { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-body); }
.calc-timeline-item .value { font-size: 22px; font-weight: 800; color: var(--color-text-heading); margin: 4px 0; }
.calc-timeline-item .tag { font-size: 12px; color: var(--color-primary-dark); font-weight: 700; }

.calc-panel-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-bottom: var(--space-4); }
@media (min-width: 900px) { .calc-panel-grid { grid-template-columns: 1fr 1fr; } }
.calc-panel {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.calc-panel h4 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary-dark); margin-bottom: var(--space-3); }
.calc-panel-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--color-border-light); font-size: 14.5px; }
.calc-panel-row:last-child { border-bottom: none; }
.calc-panel-row span:first-child { color: var(--color-text-body); }
.calc-panel-row strong { color: var(--color-text-heading); }

.calc-offgrid-message {
  display: none;
  border: 1.5px dashed var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: rgba(21,186,178,0.06);
  margin-bottom: var(--space-4);
}
.calc-offgrid-message.is-active { display: block; }
.calc-offgrid-message h4 { font-size: 17px; margin-bottom: var(--space-2); }
.calc-offgrid-message p { font-size: 14.5px; }

.calc-disclaimer { font-size: 12.5px; color: #8b8f92; margin-top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  .property-card label, .usage-chip label, .switch .track, .switch .track::before { transition: none !important; }
}