/*
    Solar Website — Component Styles
*/

/* ═══════════════════════════════════════════════════════════════
   SOLAR SOLUTIONS CAROUSEL
   ═══════════════════════════════════════════════════════════════ */

/*
 * SINGLE SOURCE OF TRUTH for the solar-solutions carousel.
 * The duplicate legacy carousel blocks that used to live in main.css are gone —
 * they capped this section at 1200px and forced `visibility: hidden` on the
 * outer preview cards (`.card-item:not(.is-prev):not(.is-active):not(.is-next)`,
 * specificity 0-4-0), which is why only 3 of the 5 cards were ever visible.
 *
 * Visible card count: desktop 5 · tablet 3 · mobile 1.
 * All widths are viewport-fluid (min()/clamp) so the five cards always fit
 * inside the stage — the outer previews are never clipped by overflow.
 */
.centered-carousel {
    /* Collapsed cards are zero-width, so each visible card only needs a HALF
       gap of margin per side (two neighbours = one full --card-gap).
       flex `gap` is deliberately NOT used: it would also space out the
       zero-width collapsed cards and inflate the track. */
    /* ONE width for all five slots. The centre / side / outer difference is a
       transform: scale() instead of a different width, so the row keeps a
       constant width and a constant pitch. Stepping the carousel is therefore a
       pure slide — nothing grows and nothing collapses. */
    --card-w:      min(320px, 16.6vw);
    --card-gap:    clamp(8px, 1.05vw, 20px);

    /* The image now owns a fixed SHARE of the card height instead of a 4:3
       box, so it is visibly bigger. The text block below it is smaller than
       before, but the tighter padding + line-height keep the same copy — and
       room for a few more words — fitting comfortably. */
    --card-height:      clamp(500px, 36vw, 600px);
    --card-image-h:     60%;   /* share of the card height (desktop) */
    --card-image-ratio: auto;  /* mobile overrides this — its card is auto-height */

    max-width: 100%;
    margin: 0 auto;
    padding: 2.5rem 1rem;
    text-align: center;
    overflow: hidden; /* prevent horizontal page overflow */
}

/* ── Heading & description ──────────────────────────────────── */

.carousel-heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 0.6rem;
}

/* ── Tab nav ────────────────────────────────────────────────── */

.carousel-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tab-btn {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.45rem 1.5rem;
    border-radius: 24px;
    border: 1.5px solid var(--color-border);
    background: var(--color-light);
    color: var(--color-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: inherit;
}

.tab-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-dark);
}

.tab-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-dark);
}

/* ── Panel ──────────────────────────────────────────────────── */

.carousel-panel[hidden] { display: none; }

/* ── Stage — clips the track horizontally ────────────────────── */

.carousel-stage {
    position: relative;
    width: 100%;
    max-width: min(100%, 1800px);
    margin: 0 auto;
    overflow: hidden; /* clips the track only — the 5 cards are sized to fit */
}

/* Black mat behind the CENTRE (active) card — sits behind every card via
   the track's z-index. Top/bottom mirror the viewport's padding (24px / 28px),
   so the mat hugs the single centred card at every breakpoint, including
   mobile where --card-height is `auto` (a height: calc() would break there). */
.carousel-stage::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--card-w) * 1.12);
    max-width: calc(100% - 16px);
    border-radius: 20px;
    z-index: 0;
    pointer-events: none;
}

/* ── Viewport — holds the sliding track ─────────────────────── */

.carousel-viewport {
    width: 100%;
    padding: 24px 0 28px;
    overflow: hidden;
}

/* ── Track — flex row, cards reordered via CSS order by JS ───── */

.carousel-track {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    /* NO `gap` — collapsed cards are zero-width and would add phantom spacing.
       Spacing comes from the visible cards' half-gap margins instead. */
    gap: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CARD BASE
   All cards are always display:flex (never display:none) so the
   track can slide smoothly. Visibility is controlled via opacity.
   ═══════════════════════════════════════════════════════════════ */

.card-item {
    display: flex;
    flex-direction: column;
    /* Every slot is the same width — see --card-w above. */
    flex: 0 0 var(--card-w);
    width: var(--card-w);
    min-width: var(--card-w);
    height: var(--card-height);
    margin: 0 calc(var(--card-gap) / 2);
    background: linear-gradient(
        175deg,
        #1d1d77 0%,    /* Persian Blue — darkest base tone   */
        #2b3b92 38%,   /* Simple Dark Blue — lower-mid        */
        #3859ac 72%,   /* Cobalt (Xona) — upper-mid highlight */
        #4677c7 100%   /* Newton — brightest reflective tone  */
    );
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--shadow-sm);
    text-align: center;
    overflow: hidden;
    opacity: 0.7;                /* side-card look by default */
    transform: scale(0.96);
    pointer-events: auto;
    /* Position/scale are animated by the script (FLIP) and are deliberately NOT
       transitioned here — a width transition is what used to make the cards
       grow and collapse at the edges. Only paint properties ease. */
    transition: opacity 0.45s ease, box-shadow 0.45s ease;
    cursor: default;
}

/* ── First paint: cards appear ALREADY in place ──────────────── */
/* JS puts .is-ready on the section right after the initial render, so loading
   or refreshing the page is static while navigation keeps its 0.45s
   transitions. Without this the cards visibly expand/fade in on every load. */

.centered-carousel:not(.is-ready) .card-item {
    transition: none;
}

/* ── Outer preview cards (is-prev-prev / is-next-next) ──────── */
/* Only scale + opacity change — the width stays --card-w, so the row keeps its
   exact width and the cards slide instead of growing/shrinking. */

.card-item.is-prev-prev,
.card-item.is-next-next {
    opacity: 0.4;
    transform: scale(0.87);
}

/* ── Adjacent cards (is-prev / is-next) ─────────────────────── */
/* Same values as the base rule; listed so all four states read clearly. */

.card-item.is-prev,
.card-item.is-next {
    opacity: 0.7;
    transform: scale(0.96);
}

/* ── CENTRE / active card ───────────────────────────────────── */

.card-item.is-active {
    opacity: 1;
    transform: scale(1.06);   /* 320 × 1.06 ≈ 340 — the centre size we had before */
    position: relative;
    z-index: 10;
}

/* ── Hidden cards (no state class, or is-hidden) ────────────── */

/* ── Out of the window (is-hidden) ───────────────────────────── */
/* Absolute, so a card outside the ring can never change the row's width or
   nudge the five visible cards. This replaces the old width collapse. */

.card-item.is-hidden {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(0.87);
    pointer-events: none;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

/* ── Card image ─────────────────────────────────────────────── */

.card-image {
    width: 100%;
    /* Bigger than before: a fixed share of the card height on desktop/tablet
       (the card height is definite there). On mobile the card is auto-height,
       so --card-image-h becomes `auto` and --card-image-ratio drives it. */
    flex: 0 0 var(--card-image-h);
    height: var(--card-image-h);
    aspect-ratio: var(--card-image-ratio);
    min-height: 0;
    overflow: hidden;
    background: var(--color-light);
}

.card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Card body ──────────────────────────────────────────────── */

.card-content {
    /* Smaller block than before (was 1rem 1.2rem 1.25rem) — the image above
       takes the space. Tighter type below keeps the same words fitting, with
       headroom for more. */
    padding: 0.7rem 0.95rem 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

.card-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #C0C0C0;    /* silver */
    margin: 0 0 0.3rem;
    line-height: 1.25;
}

.card-item.is-active .card-content h3 {
    font-size: 1.3rem;
}

.card-content p {
    font-size: 1rem;
    color: #ffffff;
    margin: 0 0 0.45rem;
    line-height: 1.42;
}

.card-item.is-active .card-content p {
    font-size: 1.1rem;
}

.card-link {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-gold);
    text-decoration: none;
    transition: color 0.2s;
}

.card-link:hover {
    color: var(--color-gold-light);
    text-decoration: underline;
}

/* ── Navigation controls ────────────────────────────────────── */

/*
 * Outside .carousel-stage so overflow:hidden never clips it.
 */
.carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 12px 0 0;
}

/* SIMPLE ‹ › — plain neutral glyphs, NO background, NO circle, NO border, NO shadow. */
.solar-carousel-prev,
.solar-carousel-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--color-dark);
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    z-index: 20;
    opacity: 1;
    transition: color 0.2s, transform 0.2s, opacity 0.2s;
    font-family: inherit;
    flex-shrink: 0;
    padding: 0;
    text-align: center;
}

/* ── disabled arrows ──────────────────────────────────────────── */

/* Clamped operator: the arrow keeps its simple neutral glyph appearance
   but is visually dimmed + non-interactive — never a circle/background. */
.solar-carousel-prev:disabled,
.solar-carousel-next:disabled,
.solar-carousel-prev.is-disabled,
.solar-carousel-next.is-disabled {
    color: var(--color-dark-light);
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
    transform: none;
    box-shadow: none;
    background: none;
}

.solar-carousel-prev:hover:not(:disabled),
.solar-carousel-next:hover:not(:disabled) {
    color: var(--color-dark-light);
    transform: scale(1.06);
}

.solar-carousel-prev:focus-visible,
.solar-carousel-next:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 3px;
}

.solar-carousel-prev:active:not(:disabled),
.solar-carousel-next:active:not(:disabled) {
    transform: scale(0.92);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Laptops ≤ 1200px — the five cards get narrower, so step the type down */
@media (max-width: 1200px) {
    .card-content h3 { font-size: 1.05rem; }
    .card-item.is-active .card-content h3 { font-size: 1.2rem; }
    .card-content p  { font-size: 0.94rem; }
    .card-item.is-active .card-content p { font-size: 1.03rem; }
}

/* Tablet ≤ 900px — 3 cards: prev | active | next (outer previews collapse) */
@media (max-width: 900px) {
    .centered-carousel {
        /* 3 slots fit: 3 × min(270px, 29vw) + gaps stays inside any viewport */
        --card-w:       min(270px, 29vw);
        --card-gap:     clamp(8px, 1.6vw, 16px);
        --card-height:  500px;  /* taller card — the image keeps 58% of it */
        --card-image-h: 58%;
    }

    .carousel-heading { font-size: 1.6rem; }

    /* Only 3 slots fit, so the two outer ring cards leave the flow entirely —
       they are parked outside the window instead of collapsing the row width. */
    .card-item.is-prev-prev,
    .card-item.is-next-next {
        position: absolute;
        top: 0;
        left: 0;
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        margin: 0;
        border: 0;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
    }
}

/* Mobile ≤ 600px — single card only */
@media (max-width: 600px) {
    .centered-carousel {
        --card-w: min(85vw, 360px);
        --card-gap: 12px;
        /* Cards are auto-height on mobile, so the image is driven by its own
           aspect-ratio instead of a share of the card height. 1:1 is taller
           than the old 4:3 box. */
        --card-height: auto;
        --card-image-h: auto;
        --card-image-ratio: 1 / 1;
        padding: 2.5rem 0.5rem 1.5rem;
    }

    .carousel-heading  { font-size: 1.35rem; }

    .carousel-tabs  { gap: 8px; margin-bottom: 1.25rem; }
    .tab-btn        { font-size: 0.75rem; padding: 0.4rem 1rem; }

    .card-item.is-active {
        /* width comes from --card-w like every other slot */
        height: auto;
        transform: none;
    }

    /* Only 1 slot fits: every side card leaves the flow */
    .card-item.is-prev,
    .card-item.is-next,
    .card-item.is-prev-prev,
    .card-item.is-next-next {
        position: absolute;
        top: 0;
        left: 0;
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        margin: 0;
        border: 0;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .solar-carousel-prev,
    .solar-carousel-next {
        font-size: 2.4rem;
    }
}
/* ============================================================
   ONE uniform vertical white-space gap between / around every       
   top-level section on the page. Placed last so this tail rule       
   overrides any per-section padding declared earlier.               
   `.hero-box` is deliberately excluded: its image is full-bleed      
   and must not sit inside a white gap above or below.               
   ============================================================ */
main > .map-section,
main > .site-footer {
    padding-top:    clamp(2rem, 4.5vw, 2.75rem);
    padding-bottom: clamp(2rem, 4.5vw, 2.75rem);
}
main > .hero-box {
    padding-top:    0;
    padding-bottom: 0;
}
.site-footer { margin-top: 0; }  /* footer already has the section padding above */

/* ============================================================
   SOLAR CALCULATOR — design-spec implementation.

   Daylight palette: sky + amber instead of banking blue. Two
   panels — inputs on --sky-white, live results on --cloud-panel —
   inside one flat utility card (1px mist border, 12px radius, no
   drop shadow). Every figure is tabular so the rows never jitter.
   Amber is a fill only, never small text on white.

   Tokens are scoped to this component so the site palette in
   main.css is never touched. Behaviour: assets/js/calculator.js.
   ============================================================ */

/* The gradient band is shared by the header and the primary hover state, so it
   lives in one custom property — a gradient cannot be merged with the flat
   `background-color` the resting state uses, and duplicating the four stops in
   two places is how they drift apart. */
.calculator-box,
.solar-calculator {
    --sky-white:    #F5F9FC;
    --navy-ink:     #16273A;
    --slate:        #4C5E70;
    --dusk-blue:    #2F5D8C;
    --solar-amber:  #F0A324;
    --growth-green: #1E8F5F;
    --mist-border:  #DCE6EE;
    --cloud-panel:  #EAF1F8;
    --russet:       #8B4225;   /* FAQ accent only — chevron + open-question underline */
    --brand-gradient: linear-gradient(
        175deg,
        #1d1d77 0%,    /* Persian Blue — darkest base tone   */
        #2b3b92 38%,   /* Simple Dark Blue — lower-mid        */
        #3859ac 72%,   /* Cobalt (Xona) — upper-mid highlight */
        #4677c7 100%   /* Newton — brightest reflective tone  */
    );
}

/* The outer hero box is stripped away entirely. `.hero-box` supplies 0.75rem
   of padding and `.hero-box-frame` a radius, an overflow clip, a dark fill, a
   hero photo and a gradient overlay — none of which belong around a utility
   card, so the section contributes no box of its own. The `.solar-calculator`
   card and the three panels inside it are untouched. Vertical rhythm is still
   covered by the carousel above (2.5rem) and the section below (clamp). */
.calculator-box {
    padding: 0;
}

.calculator-box .hero-box-frame {
    display:          block;
    aspect-ratio:     auto;
    padding:          0;
    border-radius:    0;
    overflow:         visible;
    background-image: none;
}

.solar-calculator {
    max-width:            1600px;
    margin:               0 auto;
    border:               1px solid var(--mist-border);
    border-radius:        12px;
    overflow:             hidden;
    color:                var(--navy-ink);
    font-variant-numeric: tabular-nums;
    text-align:           left;
}

/* Deep-blue header band — the same four-stop gradient the carousel cards use.
   It is the only dark surface in the calculator, so the heading and sub-line
   flip to light here (and back to ink everywhere below the band). */
.solar-calculator-header {
    padding:       clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
    background:   var(--brand-gradient);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.solar-calculator-header h1 {
    margin:      0 0 0.35rem;
    font-family: "Space Grotesk", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:   clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color:       #FFFFFF;
}

.solar-calculator-header p {
    margin:    0;
    font-size: 0.95rem;
    color:     rgba(255, 255, 255, 0.78);
}

/* 40 / 28 / 32 — details, savings, FAQ. One card with three regions; the
   savings panel stays compact and the FAQ column gets the freed width. */
.solar-calculator-body {
    display:               grid;
    grid-template-columns: 40fr 28fr 32fr;
}

.solar-calculator-panel {
    display:        flex;
    flex-direction: column;
    gap:            1.15rem;
    padding:        clamp(1.25rem, 3vw, 2.25rem);
}

/* The inputs column is transparent so the card and the section behind it read
   as one surface; only the results column keeps a fill, which is what separates
   the two halves now the card background is gone. */
.solar-calculator-panel.is-inputs {
    background-color: transparent;
}

.solar-calculator-panel.is-results {
    background-color: var(--cloud-panel);
    border-left:      1px solid var(--mist-border);
}

.solar-calculator-panel-title {
    margin:         0;
    font-size:      0.78rem;
    font-weight:    600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color:          var(--slate);
}

/* ── Input group ─────────────────────────────────────────────── */

.solar-field {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    width:          100%;
    max-width:      420px;   /* the card grows to 1600px — the boxes stay compact */
}

.solar-field-label {
    font-size:   0.85rem;
    font-weight: 400;
    color:       var(--slate);
}

/* The border lives on the control, so the ₹ prefix / kWh, sq.ft., degrees
   suffix sit inside the same field box as the value. */
.solar-field-control {
    display:          flex;
    align-items:      center;
    gap:              0.45rem;
    padding:          0 0.7rem;
    background-color: #FFFFFF;
    border:           1px solid var(--mist-border);
    border-radius:    8px;
    transition:       border-color 0.15s ease, box-shadow 0.15s ease;
}

.solar-field-control:focus-within {
    border-color: var(--solar-amber);
    box-shadow:   0 0 0 2px rgba(240, 163, 36, 0.35);
}

.solar-field-affix {
    flex:      0 0 auto;
    font-size: 0.9rem;
    color:     var(--slate);
}

.solar-field-control input {
    flex:                 1 1 auto;
    min-width:            0;
    width:                100%;
    padding:              0.6rem 0;
    font-family:          inherit;
    font-size:            1rem;
    color:                var(--navy-ink);
    background:           none;
    border:               0;
    outline:              none;   /* the control paints the focus ring */
    font-variant-numeric: tabular-nums;
}

.solar-field-control input::placeholder {
    color: #9AABBA;
}

/* number spinners only add bulk to a clean field */
.solar-field-control input[type="number"]::-webkit-outer-spin-button,
.solar-field-control input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.solar-field-control input[type="number"] {
    -moz-appearance: textfield;
    appearance:      textfield;
}

/* Guidance, not alarm: dusk-blue copy under the field it belongs to. */
.solar-field-error {
    margin:    0;
    font-size: 0.8rem;
    color:     var(--dusk-blue);
}

.solar-field-error[hidden] {
    display: none;
}

/* ── Buttons ─────────────────────────────────────────────────── */

.solar-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.7rem 1.15rem;
    border:          1px solid transparent;
    border-radius:   8px;
    font-family:     inherit;
    font-size:       0.95rem;
    font-weight:     600;
    line-height:     1.2;
    text-align:      center;
    text-decoration: none;
    cursor:          pointer;
}

.solar-btn:focus-visible {
    outline:        2px solid var(--solar-amber);
    outline-offset: 2px;
}

.solar-btn-primary {
    background-color: var(--navy-ink);
    border-color:     var(--navy-ink);
    color:            #FFFFFF;
}

/* The resting state is a flat fill and hover is a gradient, so the two cannot be
   merged into one shorthand: `background` would drop the flat colour on the way
   out. The gradient's lightest stop is #4677c7, so the border takes that tone to
   keep the edge from reading as a seam. */
.solar-btn-primary:hover {
    background:      var(--brand-gradient);
    border-color:    #4677c7;
    text-decoration: none;
}

.solar-btn-primary:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}

.solar-btn-secondary {
    background-color: transparent;
    border-color:     var(--navy-ink);
    color:            var(--navy-ink);
}

.solar-btn-secondary:hover {
    background-color: rgba(22, 39, 58, 0.06);
    text-decoration:  none;
}

/* Auto width on desktop, left-aligned under the last field. */
.solar-calculate {
    align-self: flex-start;
}

.solar-calculate-label {
    white-space: nowrap;
}

.solar-spinner {
    display:          none;
    width:            1rem;
    height:           1rem;
    border:           2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;
    border-radius:    50%;
    animation:        solar-spin 0.7s linear infinite;
}

.solar-calculate.is-loading .solar-calculate-label {
    display: none;
}

.solar-calculate.is-loading .solar-spinner {
    display: inline-block;
}

@keyframes solar-spin {
    to { transform: rotate(360deg); }
}

/* ── Results: hero stat + output rows ───────────────────────── */

.solar-hero-stat {
    display:          flex;
    align-items:      baseline;
    gap:              0.5rem;
    padding:          clamp(0.9rem, 2vw, 1.2rem);
    background-color: rgba(240, 163, 36, 0.12);
    border-radius:    10px;
    color:            var(--navy-ink);
}

/* Before the first calculation the block is muted — a placeholder, not a 0. */
.solar-hero-stat.is-placeholder {
    background-color: rgba(240, 163, 36, 0.06);
}

.solar-hero-stat.is-placeholder .solar-hero-value {
    color: var(--slate);
}

.solar-hero-value {
    font-family:  "Space Grotesk", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:    clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight:  700;
    line-height:  1.1;
    color:        var(--navy-ink);
}

.solar-hero-suffix {
    font-size: 0.95rem;
    color:     var(--slate);
}

.solar-results-summary {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

/* Five label/value rows with no divider between them — the hairline above the
   CTAs is the only line this panel needs. */
.solar-result-rows {
    display:        flex;
    flex-direction: column;
    gap:            0.85rem;
    margin:         0;
}

.solar-result-row {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             1rem;
}

.solar-result-row dt {
    font-size: 0.9rem;
    color:     var(--slate);
}

.solar-result-row dd {
    margin:     0;
    font-size:  1rem;
    font-weight: 500;
    color:      var(--navy-ink);
    text-align: right;
}

.solar-result-row.is-savings dd {
    color:       var(--growth-green);
    font-weight: 600;
}

/* ── Column 3 · calculator FAQ ──────────────────────────────── */

/* Third region of the same card: sky-white like the page and no border of its
   own — only the column divider separates it from the savings column, so it
   recedes instead of competing with the hero number. */
.solar-calculator-panel.is-faq {
    gap:              0.9rem;
    padding:          clamp(1rem, 2vw, 1.5rem);
    background-color: var(--sky-white);
    border-left:      1px solid var(--mist-border);
}

.solar-faq {
    display:        flex;
    flex-direction: column;
}

.solar-faq-item + .solar-faq-item {
    border-top: 1px solid var(--mist-border);
}

.solar-faq-question {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.6rem;
    width:           100%;
    padding:         0.7rem 0;
    font-family:     inherit;
    font-size:       0.95rem;
    font-weight:     500;
    line-height:     1.35;
    text-align:      left;
    color:           var(--navy-ink);
    background:      none;
    border:          0;
    cursor:          pointer;
}

.solar-faq-question:focus-visible {
    outline:        2px solid var(--solar-amber);
    outline-offset: 2px;
}

/* Open question gets the one russet underline. */
.solar-faq-question[aria-expanded="true"] .solar-faq-question-text {
    text-decoration:           underline;
    text-decoration-color:     var(--russet);
    text-decoration-thickness: 1px;
    text-underline-offset:     3px;
}

/* 7px chevron in russet, same construction as the site's mega-menu toggle:
   points down when closed, 180° flip when open. */
.solar-faq-chevron {
    flex:          0 0 auto;
    width:         7px;
    height:        7px;
    margin-top:    -4px;
    border-right:  2px solid var(--russet);
    border-bottom: 2px solid var(--russet);
    transform:     rotate(45deg);
    transition:    transform 0.15s ease;
}

.solar-faq-question[aria-expanded="true"] .solar-faq-chevron {
    margin-top: 3px;
    transform:  rotate(-135deg);
}

.solar-faq-answer {
    padding:     0 0 0.9rem;
    font-size:   0.875rem;
    line-height: 1.55;
    color:       var(--slate);
}

.solar-faq-answer[hidden] {
    display: none;
}

/* The calculator FAQ column is a max-height accordion: reveal() animates
   `max-height` up and collapse() shrinks it, then waits for `transitionend`
   before setting `hidden`. Without a real transition that close event never
   fires and an open answer stays pinned open — so the calculator panel's
   answers get the smooth max-height transition here. No default `max-height: 0`
   is set: the first answer ships open by default and must display naturally.
   Scoped to the panel so the site-wide FAQ (hidden-toggle only) is untouched. */
.solar-calculator-panel.is-faq .solar-faq-answer {
    overflow:   hidden;
    transition: max-height 0.28s ease-in-out;
}
.solar-calculator-panel.is-faq .solar-faq-answer[hidden] {
    display: none;
}

.solar-faq-answer p {
    margin: 0;
}

/* ── CTA pair + motion ──────────────────────────────────────── */

.solar-calculator-actions {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;   /* the 12px between stacked CTAs */
    margin-top:     auto;
    padding-top:    1.15rem;
    border-top:     1px solid var(--mist-border);
}

/* ONE reveal for the whole figure group — never staggered row by row. */
.solar-results-summary.is-revealed {
    animation: solar-reveal 180ms ease-out;
}

@keyframes solar-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .solar-results-summary.is-revealed {
        animation: none;   /* instant state change instead */
    }

    .solar-spinner {
        animation:        none;
        border-top-color: rgba(255, 255, 255, 0.35);
    }

    .solar-faq-chevron {
        transition: none;   /* the state change still happens, just instantly */
    }

    /* The calculator FAQ answer animates its max-height. Under reduced motion
       that should be instant too — but the accordion's collapse path relies on
       `transitionend` to know when hiding is safe, so keep a trivial transition
       running rather than none: the answer still flips instantly, and the
       close listener still fires. */
    .solar-calculator-panel.is-faq .solar-faq-answer {
        transition: max-height 0.01ms linear;
    }
}

/* ============================================================
   WHY CHOOSE US — four-tab capability switcher, directly under
   the calculator.

   Vanilla port of the Features 9 layout: a tablist over a
   2-column panel (animated SVG left, copy + CTAs right).

   Same daylight palette as the calculator card so the two read
   as one page. Every illustration is inline SVG animated with CSS
   only — no JS tweening, no library. The section itself carries no
   background or outer frame; only the panel is filled.
   Behaviour: assets/js/featureTabs.js.

   ANIMATION CONTRACT: the drawings only ever play while their
   panel carries `.is-active`. The JS removes the class, forces a
   reflow and adds it back on every switch, so re-selecting a
   feature re-plays the drawing instead of leaving it finished.
   ============================================================ */

.feature-tabs {
    --sky-white:   #F5F9FC;
    --navy-ink:    #16273A;
    --slate:       #4C5E70;
    --dusk-blue:   #2F5D8C;
    --solar-amber: #F0A624;
    --growth-green:#1E8F5F;
    --mist-border: #DCE6EE;
    --cloud-panel: #EAF1F8;

    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.feature-header {
    max-width: 660px;
    margin:   0 auto clamp(1.5rem, 3.5vw, 2.25rem);
    text-align: center;
}

.feature-eyebrow {
    margin:      0 0 0.5rem;
    font-size:   0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color:          var(--slate);
}

.feature-header h2 {
    margin:      0 0 0.6rem;
    font-family: "Space Grotesk", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:   clamp(1.6rem, 3.4vw, 2.35rem);
    font-weight: 700;
    line-height: 1.15;
    color:       var(--navy-ink);
}

.feature-header > p:last-child {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color:  var(--slate);
}

/* ── Tablist ─────────────────────────────────────────────────── */

.feature-tablist {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0.6rem;
    margin-bottom:         clamp(1.5rem, 3.5vw, 2.25rem);
    /* The amber underline slides between tabs, so the strip is the positioning
       context and the buttons must not clip it. */
    position:              relative;
}

.feature-tab {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.2rem;
    width:          100%;
    padding:        0.85rem 1rem;
    font-family:    inherit;
    text-align:     left;
    color:          var(--navy-ink);
    background-color: var(--sky-white);
    border:         1px solid var(--mist-border);
    border-radius:  10px;
    cursor:         pointer;
    transition:     background-color 0.18s ease, border-color 0.18s ease;
}

.feature-tab:hover {
    background-color: var(--cloud-panel);
}

.feature-tab:focus-visible {
    outline:        2px solid var(--solar-amber);
    outline-offset: 2px;
}

.feature-tab[aria-selected="true"] {
    background-color: #FFFFFF;
    border-color:     var(--solar-amber);
    box-shadow:       inset 0 -3px 0 var(--solar-amber);
}

.feature-tab-label {
    font-size:   1rem;
    font-weight: 700;
    line-height: 1.25;
}

.feature-tab-hint {
    font-size: 0.8rem;
    line-height: 1.3;
    color:   var(--slate);
}

.feature-tab[aria-selected="true"] .feature-tab-hint {
    color: var(--dusk-blue);
}

/* ── Panel: illustration left, copy right ────────────────────── */

.feature-panel {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           center;
    gap:                   clamp(1.5rem, 3.5vw, 3rem);
    background: linear-gradient(
        175deg,
        #1d1d77 0%,
        #2b3b92 38%,
        #3859ac 72%,
        #4677c7 100%
    );
    border:                1px solid rgba(255, 255, 255, 0.22);
    border-radius:         12px;
    padding:               clamp(1.25rem, 3vw, 2.25rem);

    /* The panel is dark, so the copy tokens flip here rather than in every rule
       below. Re-declaring them on the panel is enough: each descendant rule
       already reads the token, so one block of values swaps the whole panel to
       light-on-dark with no duplicated selectors. Hierarchy is carried by weight
       and size instead of by tint.

       All three land on white deliberately. The gradient's last stop is
       #4677c7, and white is the lightest possible text colour, so 4.45:1 is the
       ceiling there — a tinted value like #DCE7FF drops to 3.58:1 and no amount
       of lightening gets back to 4.5. The eyebrow keeps its own voice through
       uppercase, tracking and weight. */
    --navy-ink:  #FFFFFF;
    --slate:     #FFFFFF;
    --dusk-blue: #FFFFFF;
}

.feature-panel[hidden] {
    display: none;
}

.feature-art {
    margin: 0;
}

.feature-art svg {
    display:                   block;
    width:                     100%;
    height:                    auto;
    max-width:                 460px;
    margin:                    0 auto;
    border-radius:             10px;
    border:                    1px solid var(--mist-border);
    background-color:          var(--cloud-panel);
}

.feature-kicker {
    margin:      0 0 0.4rem;
    font-size:   0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color:          var(--dusk-blue);
}

.feature-content h3 {
    margin:      0 0 0.6rem;
    font-family: "Space Grotesk", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:   clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    color:       var(--navy-ink);
}

.feature-content > p:not(.feature-kicker) {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color:  var(--slate);
}

.feature-points {
    display:       flex;
    flex-direction: column;
    gap:           0.55rem;
    margin:        0 0 1.35rem;
    padding:       0;
    list-style:    none;
}

.feature-points li {
    position:    relative;
    padding-left: 1.6rem;
    font-size:   0.925rem;
    line-height: 1.5;
    color:       var(--slate);
}

/* The lead phrase in each bullet carries the promise, so it gets the ink
   colour and weight while the explanation after it stays muted. */
.feature-points strong {
    font-weight: 700;
    color:       var(--navy-ink);
}

/* Amber tick, drawn with borders so it needs no icon font or image. */
.feature-points li::before {
    content:            "";
    position:            absolute;
    top:                 0.32em;
    left:                0.15rem;
    width:               0.6rem;
    height:              0.6rem;
    border-right:        2px solid var(--solar-amber);
    border-bottom:       2px solid var(--solar-amber);
    transform:           rotate(45deg);
}

.feature-actions {
    display:        flex;
    flex-wrap:      wrap;
    gap:            0.75rem;
}

/* The shared button rules build themselves from --navy-ink, which the dark panel
   flips to white. Left alone that would give the primary button a white label
   on a white fill, so the pair is restated here as a light-on-dark treatment:
   a white primary with a navy label, and an outlined secondary that keeps the
   label. Both hovers stay light — the base hovers are a navy tint and a 6%
   dark wash, both of which vanish against this panel. */

.feature-panel .solar-btn-primary {
    background-color: #FFFFFF;
    border-color:     #FFFFFF;
    color:            #1d1d77;
}

/* Kept as a gradient to match the shared button's hover behaviour, but in
   whites so it stays legible against the panel. */
.feature-panel .solar-btn-primary:hover {
    background:   linear-gradient(175deg, #FFFFFF 0%, #E4ECFC 100%);
    border-color: #FFFFFF;
    color:        #1d1d77;
}

.feature-panel .solar-btn-secondary {
    border-color: rgba(255, 255, 255, 0.72);
    color:       #FFFFFF;
}

.feature-panel .solar-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.14);
}

/* ── Illustration animation ──────────────────────────────────── */

/* Two draw-on flavours share one keyframe:

   `.feature-art-draw` is the generic case. `pathLength="1"` is not set on the
   markup, so each path is given a long dasharray and starts fully offset; a
   generic length works because the element scales with the viewBox.

   The gauge, checklist ticks and progress bar need their OWN dasharray, because
   they represent a fixed quantity rather than a whole outline — the generic 480
   would make a 54-unit arc sweep the full track. Those carry a dedicated class
   and are listed here rather than in the shared rule. */

.feature-art-draw {
    stroke-dasharray: 480;
    stroke-dashoffset: 480;
}

/* A quarter arc of r=34 is ~53.4 long, so 54 is the whole arc. */
.feature-art-gauge-fill {
    stroke-dasharray: 54 200;
    stroke-dashoffset: 54;
}

/* The checklist tick is `M85 62 l5 5 l9 -10` — about 20 long. */
.feature-art-tick {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
}

.feature-panel.is-active .feature-art-draw {
    animation: feature-draw 900ms ease-out forwards;
}

.feature-panel.is-active .feature-art-gauge-fill {
    animation: feature-draw 700ms ease-out 500ms forwards;
}

.feature-panel.is-active .feature-art-tick {
    animation: feature-draw 320ms ease-out 450ms forwards;
}

/* Fills that are revealed, not stroked: the chart area, the status pills and
   the timeline cards. They scale in rather than draw, and the nth-child offsets
   turn a flat block into a readable sequence. */

.feature-panel.is-active .feature-art-area {
    animation: feature-fade-in 420ms ease-out 700ms backwards;
}

.feature-panel.is-active .feature-art-pop {
    transform-box:      fill-box;
    transform-origin:   center;
    animation:          feature-pop-in 420ms ease-out backwards;
}

.feature-panel.is-active .feature-art-pop:nth-child(1) { animation-delay:  60ms; }
.feature-panel.is-active .feature-art-pop:nth-child(2) { animation-delay: 130ms; }
.feature-panel.is-active .feature-art-pop:nth-child(3) { animation-delay: 200ms; }
.feature-panel.is-active .feature-art-pop:nth-child(4) { animation-delay: 270ms; }
.feature-panel.is-active .feature-art-pop:nth-child(5) { animation-delay: 340ms; }
.feature-panel.is-active .feature-art-pop:nth-child(6) { animation-delay: 410ms; }
.feature-panel.is-active .feature-art-pop:nth-child(7) { animation-delay: 480ms; }
.feature-panel.is-active .feature-art-pop:nth-child(8) { animation-delay: 550ms; }
.feature-panel.is-active .feature-art-pop:nth-child(9) { animation-delay: 620ms; }

/* Two "this is live" signals: the current reading on the chart and the last
   milestone on the timeline. Both loop, so the drawing settles into a state
   that keeps reading as live rather than as a one-off flourish. */

.feature-panel.is-active .feature-art-pulse {
    transform-box:    fill-box;
    transform-origin: center;
    animation:        feature-pulse 2.2s ease-in-out 1s infinite;
}

.feature-panel.is-active .feature-art-pulse-ring {
    transform-box:    fill-box;
    transform-origin: center;
    animation:        feature-ripple 2.4s ease-out 1s infinite;
}

.feature-panel.is-active .feature-art-fill {
    transform-box:    fill-box;
    transform-origin: left;
    animation:        feature-fill 800ms ease-out 600ms backwards;
}

.feature-panel.is-active .feature-art-sun {
    transform-box: fill-box;
    transform-origin: center;
    animation: feature-sun-in 600ms ease-out backwards;
}

/* The whole ray group breathes around the sun disc. */
.feature-panel.is-active .feature-art-rays {
    transform-box: fill-box;
    transform-origin: center;
    animation: feature-spin 22s linear infinite;
}

/* Panels stagger in — the roof plan carries twelve of them. */
.feature-panel.is-active .feature-art-panel:nth-child(1)  { animation-delay: 260ms; }
.feature-panel.is-active .feature-art-panel:nth-child(2)  { animation-delay: 320ms; }
.feature-panel.is-active .feature-art-panel:nth-child(3)  { animation-delay: 380ms; }
.feature-panel.is-active .feature-art-panel:nth-child(4)  { animation-delay: 440ms; }
.feature-panel.is-active .feature-art-panel:nth-child(5)  { animation-delay: 500ms; }
.feature-panel.is-active .feature-art-panel:nth-child(6)  { animation-delay: 560ms; }
.feature-panel.is-active .feature-art-panel:nth-child(7)  { animation-delay: 620ms; }
.feature-panel.is-active .feature-art-panel:nth-child(8)  { animation-delay: 680ms; }
.feature-panel.is-active .feature-art-panel:nth-child(9)  { animation-delay: 740ms; }
.feature-panel.is-active .feature-art-panel:nth-child(10) { animation-delay: 800ms; }
.feature-panel.is-active .feature-art-panel:nth-child(11) { animation-delay: 860ms; }
.feature-panel.is-active .feature-art-panel:nth-child(12) { animation-delay: 920ms; }

.feature-panel.is-active .feature-art-panel {
    opacity: 0;
    animation-name: feature-panel-in;
    animation-duration: 420ms;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.feature-panel.is-active .feature-art-bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: feature-bar-grow 640ms ease-out backwards;
}

.feature-panel.is-active .feature-art-bar:nth-child(1) { animation-delay: 420ms; }
.feature-panel.is-active .feature-art-bar:nth-child(2) { animation-delay: 500ms; }
.feature-panel.is-active .feature-art-bar:nth-child(3) { animation-delay: 580ms; }
.feature-panel.is-active .feature-art-bar:nth-child(4) { animation-delay: 660ms; }
.feature-panel.is-active .feature-art-bar:nth-child(5) { animation-delay: 740ms; }
.feature-panel.is-active .feature-art-bar:nth-child(6) { animation-delay: 820ms; }

.feature-panel.is-active .feature-art-needle {
    transform-box: fill-box;
    transform-origin: center;
    animation: feature-needle 1.5s ease-in-out 900ms infinite alternate;
}

.feature-panel.is-active .feature-art-flow-path {
    animation: feature-flow 1.6s linear infinite;
}

@keyframes feature-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes feature-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes feature-pop-in {
    from { opacity: 0; transform: scale(0.72); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes feature-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.45); opacity: 0.75; }
}

/* Grows once and fades, so the ring never stacks up on itself. */
@keyframes feature-ripple {
    0%   { transform: scale(1);   opacity: 0.9; }
    70%  { opacity: 0.15; }
    100% { transform: scale(1.9); opacity: 0; }
}

@keyframes feature-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes feature-sun-in {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes feature-spin {
    to { transform: rotate(360deg); }
}

@keyframes feature-panel-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes feature-bar-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes feature-needle {
    from { transform: rotate(-26deg); }
    to   { transform: rotate(20deg); }
}

@keyframes feature-flow {
    to { stroke-dashoffset: -36; }
}

/* Under reduced motion the drawings still APPEAR — every one of them simply
   snaps to its finished state. A fully invisible illustration would be a worse
   outcome than no animation, so nothing is set to `display: none` here. */
@media (prefers-reduced-motion: reduce) {
    .feature-art-draw,
    .feature-art-gauge-fill,
    .feature-art-tick {
        stroke-dashoffset: 0;
    }

    .feature-panel.is-active .feature-art-draw,
    .feature-panel.is-active .feature-art-gauge-fill,
    .feature-panel.is-active .feature-art-tick,
    .feature-panel.is-active .feature-art-area,
    .feature-panel.is-active .feature-art-pop,
    .feature-panel.is-active .feature-art-pulse,
    .feature-panel.is-active .feature-art-pulse-ring,
    .feature-panel.is-active .feature-art-fill,
    .feature-panel.is-active .feature-art-sun,
    .feature-panel.is-active .feature-art-rays,
    .feature-panel.is-active .feature-art-panel,
    .feature-panel.is-active .feature-art-bar,
    .feature-panel.is-active .feature-art-needle,
    .feature-panel.is-active .feature-art-flow-path {
        animation: none;
    }

    .feature-panel.is-active .feature-art-panel,
    .feature-panel.is-active .feature-art-pop,
    .feature-panel.is-active .feature-art-area {
        opacity: 1;
    }

    .feature-panel.is-active .feature-art-fill {
        transform: none;
    }

    .feature-panel.is-active .feature-art-pulse-ring {
        opacity: 0.9;
    }

    .feature-tab {
        transition: none;
    }
}