/*
 * Savings Calculator Styles
 * Supports: Elementor (preferred), GeneratePress, Astra, OceanWP, Kadence, Blocksy,
 *           and any theme that sets a header background color.
 *
 * The --bnsc-primary, --bnsc-font-head, and --bnsc-font-head-weight variables
 * are set at runtime by savings-calculator.js, which prefers Elementor's
 * global primary color and primary typography over DOM-based detection.
 *
 * Override in Appearance > Additional CSS if needed:
 *   #bnsc-hero { --bnsc-primary: #your-color; }
 */

/* ─── Theme-agnostic CSS custom property cascade ───────────────── */
/*
 * Priority order (first match wins):
 *   1. JS-injected --bnsc-primary  (prefers Elementor global primary,
 *                                   falls back to live header bg)
 *   2. Elementor      --e-global-color-primary
 *   3. GeneratePress  --global-palette1
 *   4. Astra          --ast-global-color-0
 *   5. Kadence        --global-palette1  (same key as GP, compatible)
 *   6. Blocksy        --theme-palette-color-1
 *   7. Hard fallback  #1a3560
 *
 * Note: Elementor publishes its globals on the `body` element (via the
 * elementor-kit-XXX class), so the JS reads them from there at runtime
 * and writes them onto :root for this cascade to find.
 */
:root {
    --bnsc-primary:     var(--e-global-color-primary,
                        var(--global-palette1,
                        var(--ast-global-color-0,
                        var(--theme-palette-color-1,
                        #1a3560))));

    --bnsc-font-head:   var(--e-global-typography-primary-font-family,
                        var(--global-heading-font-family,
                        var(--ast-body-font-family,
                        inherit)));

    --bnsc-font-head-weight: var(--e-global-typography-primary-font-weight, 700);

    --bnsc-font-body:   var(--e-global-typography-text-font-family,
                        var(--global-body-font-family,
                        inherit));

    --bnsc-accent:      var(--e-global-color-accent,
                        var(--global-palette3,
                        var(--ast-global-color-2,
                        #f0c040)));
}

/* ─── Wrapper ───────────────────────────────────────────────────── */
#bnsc-wrap {
    font-family: var(--bnsc-font-body);
    color: #212121;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1em;
}

/* ─── Hero ──────────────────────────────────────────────────────── */
#bnsc-hero {
    background-color: var(--bnsc-primary);
    /* No background-image — fully generic */
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.35);
    padding: 2em 2.5em;
    margin-bottom: 1.5em;
}

#bnsc-hero h1 {
    font-family: var(--bnsc-font-head);
    font-weight: var(--bnsc-font-head-weight);
    color: #fff;
    margin: 0;
    font-size: clamp(1.4em, 4vw, 2em);
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

#bnsc-hero h1 span {
    font-size: .65em;
    display: block;
    font-style: italic;
    opacity: .9;
}

/* ─── Main card ─────────────────────────────────────────────────── */
#bnsc-card {
    background: rgba(255,255,255,.97);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.15);
    padding: 1.75em;
}

#bnsc-card h2 {
    font-family: var(--bnsc-font-head);
    color: var(--bnsc-primary);
    text-align: center;
    margin-top: 0;
}

#bnsc-card > p {
    text-align: center;
    font-size: .92em;
    color: #555;
    margin-bottom: 1.5em;
}

/* ─── Column headers ────────────────────────────────────────────── */
.bnsc-col-headers {
    display: flex;
    justify-content: space-between;
    padding: 0 .25em;
    margin-bottom: .5em;
}

.bnsc-col-headers h3 {
    margin: 0;
    font-family: var(--bnsc-font-head);
    color: var(--bnsc-primary);
    font-size: 1em;
}

/* ─── Accordion panels ──────────────────────────────────────────── */
.bnsc-panel {
    border: 1px solid var(--bnsc-primary);
    border-radius: 8px;
    margin-bottom: .65em;
    overflow: hidden;
}

.bnsc-panel-header {
    background-color: color-mix(in srgb, var(--bnsc-primary) 10%, white);
    /* Fallback for browsers without color-mix (Safari <16.2, FF <113) */
}

/* color-mix fallback via @supports */
@supports not (color: color-mix(in srgb, red 10%, white)) {
    .bnsc-panel-header {
        background-color: #f0f4f8;
    }
}

.bnsc-panel-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: .85em 1em;
    cursor: pointer;
    font-family: var(--bnsc-font-body);
    font-size: .92em;
    color: #212121;
    text-align: left;
    gap: .5em;
}

.bnsc-panel-toggle:hover {
    background-color: color-mix(in srgb, var(--bnsc-primary) 6%, white);
}

@supports not (color: color-mix(in srgb, red 6%, white)) {
    .bnsc-panel-toggle:hover {
        background-color: #e8eef4;
    }
}

.bnsc-toggle-icon {
    font-style: normal;
    font-weight: bold;
    flex-shrink: 0;
    width: 1.1em;
    text-align: center;
    color: var(--bnsc-primary);
    transition: transform .25s;
    display: inline-block;
}

.bnsc-panel-toggle[aria-expanded="true"] .bnsc-toggle-icon {
    transform: rotate(45deg);
}

.bnsc-section-label {
    flex: 1;
}

.bnsc-section-total {
    font-weight: bold;
    color: var(--bnsc-primary);
    white-space: nowrap;
    margin-left: auto;
    padding-right: .25em;
}

/* ─── Panel body & table ────────────────────────────────────────── */
.bnsc-panel-body {
    display: none;
    border-top: 1px solid var(--bnsc-primary);
    overflow-x: auto;
}

.bnsc-panel-body.open {
    display: block;
}

.bnsc-panel-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9em;
}

.bnsc-panel-body table th,
.bnsc-panel-body table td {
    padding: .6em .75em;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: middle;
}

.bnsc-panel-body table thead th {
    background-color: color-mix(in srgb, var(--bnsc-primary) 8%, white);
    font-weight: 600;
    color: var(--bnsc-primary);
    text-align: left;
}

@supports not (color: color-mix(in srgb, red 8%, white)) {
    .bnsc-panel-body table thead th {
        background-color: #edf2f7;
    }
}

.bnsc-panel-body table tbody tr:last-child td,
.bnsc-panel-body table tbody tr:last-child th {
    border-bottom: none;
}

.bnsc-panel-body table tbody tr:nth-child(even) {
    background: #f7f9fb;
}

/* ─── Number inputs ─────────────────────────────────────────────── */
.bnsc-panel-body input[type="number"] {
    width: 90px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: .35em .5em;
    font-size: .9em;
    font-family: var(--bnsc-font-body);
    color: #212121;
    transition: border-color .2s, box-shadow .2s;
}

.bnsc-panel-body input[type="number"]:focus {
    outline: none;
    border-color: var(--bnsc-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bnsc-primary) 20%, transparent);
}

/* ─── Savings result ────────────────────────────────────────────── */
.bnsc-result {
    font-weight: 600;
    color: #2a7a3b;
}

/* ─── Grand total bar ───────────────────────────────────────────── */
#bnsc-total-bar {
    background-color: var(--bnsc-primary);
    color: #fff;
    border-radius: 0 0 12px 12px;
    padding: 1em 1.5em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5em;
    flex-wrap: wrap;
    margin-top: .25em;
}

#bnsc-total-bar h2 {
    margin: 0;
    font-family: var(--bnsc-font-head);
    font-weight: var(--bnsc-font-head-weight);
    color: #fff !important;
    font-size: clamp(1em, 3vw, 1.4em);
    text-align: right;
}

#bnsc-total-bar h2 * {
    color: #fff !important;
}

#bnsc-total-bar #AnnualSavings {
    color: #fff !important;
    font-size: 1.3em;
}

/* ─── Disclaimer ────────────────────────────────────────────────── */
#bnsc-disclaimer {
    font-size: .78em;
    color: #666;
    margin-top: 1.5em;
    padding: 0 .25em;
    line-height: 1.6;
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .bnsc-panel-body input[type="number"] {
        width: 70px;
    }
    .bnsc-col-headers h3 {
        font-size: .85em;
    }
    #bnsc-hero {
        padding: 1.5em;
    }
    /* Stack panel label and total amount on separate lines */
    .bnsc-panel-toggle {
        flex-wrap: wrap;
        gap: .25em .5em;
    }
    .bnsc-section-label {
        width: calc(100% - 1.6em); /* full width minus icon */
        flex: none;
    }
    .bnsc-section-total {
        width: 100%;
        padding-left: 1.6em; /* align under label, past the icon */
        font-size: .85em;
        margin-left: 0;
        white-space: normal;
    }
}