/* =====================================================================
 * WUC Savings Calculator — Polish Layer
 * Version: 1.2 (Discovery CTA blue, field alignment, range spacing,
 *               help-text min-height, disclaimer spacing, link contrast)
 * Scope:   #wuc-calc.wuc-calc-wrap and descendants only
 * Brand:   homepage hero CTA reference (#0B5BD3, 8px, 600/700 weight)
 * Reversible: dequeue + delete.
 * =====================================================================
 */

#wuc-calc.wuc-calc-wrap {
    --wuc-blue:        #0B5BD3;
    --wuc-blue-hover:  #094BAE;
    --wuc-blue-active: #073D8E;
    --wuc-navy:        #0A1A2E;
    --wuc-text-muted:  #6B778C;
    --wuc-border-soft: #E5E9EF;
    --wuc-bg-soft:     #F8FAFC;
}

/* === #6 Lede === */
#wuc-calc.wuc-calc-wrap .wuc-calc-lede {
    max-width: 680px;
}

/* === Field alignment fix (NEW v1.2) ===
 * Normalize input + select heights so two-column rows align cleanly.
 * Inputs default to ~48.67px (with native spinner), selects to ~44.67px.
 * Lock both to the same height + padding + line-height. */
#wuc-calc.wuc-calc-wrap .wuc-calc-form input[type="number"],
#wuc-calc.wuc-calc-wrap .wuc-calc-form input[type="text"],
#wuc-calc.wuc-calc-wrap .wuc-calc-form select {
    height: 46px;
    padding: 10px 14px;
    line-height: 1.4;
    box-sizing: border-box;
    font-size: 16px;
    font-family: inherit;
}

/* Suppress number-input spinner (cleaner visual; inputmode="numeric"
 * already drives mobile keyboards) */
#wuc-calc.wuc-calc-wrap .wuc-calc-form input[type="number"]::-webkit-outer-spin-button,
#wuc-calc.wuc-calc-wrap .wuc-calc-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#wuc-calc.wuc-calc-wrap .wuc-calc-form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Help-text min-height so unequal wrap lengths don't desync row alignment.
 * Two lines @ 14px / 1.45 line-height ≈ 41px. */
#wuc-calc.wuc-calc-wrap .wuc-calc-help {
    min-height: 41px;
    margin-top: 4px;
    margin-bottom: 6px;
}

/* === #1 + #2 Submit button === */
#wuc-calc.wuc-calc-wrap #wuc-calc-form button[type="submit"] {
    background: var(--wuc-blue) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 1px solid var(--wuc-blue) !important;
    border-radius: 8px !important;
    padding: 12px 26px !important;
    margin-top: 10px;
    transition: background-color 180ms ease, border-color 180ms ease,
                box-shadow 180ms ease, transform 60ms ease;
    cursor: pointer;
}
#wuc-calc.wuc-calc-wrap #wuc-calc-form button[type="submit"]:hover {
    background: var(--wuc-blue-hover) !important;
    border-color: var(--wuc-blue-hover) !important;
    box-shadow: 0 2px 8px rgba(11, 91, 211, 0.24);
}
#wuc-calc.wuc-calc-wrap #wuc-calc-form button[type="submit"]:active {
    background: var(--wuc-blue-active) !important;
    border-color: var(--wuc-blue-active) !important;
    transform: translateY(1px);
    box-shadow: none;
}
#wuc-calc.wuc-calc-wrap #wuc-calc-form button[type="submit"]:focus-visible {
    outline: 3px solid rgba(11, 91, 211, 0.35);
    outline-offset: 2px;
}

/* === #1 (extended v1.2) Discovery CTA → WUC blue, white bold, 8px ===
 * Inline style (orange background) is set on the <a> element by the
 * shortcode. !important required to override. */
#wuc-calc.wuc-calc-wrap .wuc-calc-cta {
    background: var(--wuc-blue) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 1px solid var(--wuc-blue) !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    text-decoration: none;
    display: inline-block;
    transition: background-color 180ms ease, border-color 180ms ease,
                box-shadow 180ms ease, transform 60ms ease;
}
#wuc-calc.wuc-calc-wrap .wuc-calc-cta:hover {
    background: var(--wuc-blue-hover) !important;
    border-color: var(--wuc-blue-hover) !important;
    box-shadow: 0 2px 12px rgba(11, 91, 211, 0.40);
}
#wuc-calc.wuc-calc-wrap .wuc-calc-cta:active {
    background: var(--wuc-blue-active) !important;
    border-color: var(--wuc-blue-active) !important;
    transform: translateY(1px);
    box-shadow: none;
}
#wuc-calc.wuc-calc-wrap .wuc-calc-cta:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* === #4 Range numbers (refined v1.2) === */
#wuc-calc.wuc-calc-wrap .wuc-calc-range {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 4px 0 6px;
    color: #FFFFFF;
}
/* Bigger gap before /yr suffix (v1.2 — was 4px, now 10px) */
#wuc-calc.wuc-calc-wrap .wuc-calc-range small {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.72;
    margin-left: 10px;
    letter-spacing: 0;
}
#wuc-calc.wuc-calc-wrap .wuc-calc-range-sub {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.82;
    margin-top: 2px;
    color: #FFFFFF;
}

/* === Methodology link contrast on dark panel (NEW v1.2) === */
#wuc-calc.wuc-calc-wrap .wuc-calc-methodology {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
}
#wuc-calc.wuc-calc-wrap .wuc-calc-methodology a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#wuc-calc.wuc-calc-wrap .wuc-calc-methodology a:hover {
    color: #FFFFFF;
}

/* === #10 Disclaimer (refined v1.2 spacing) === */
#wuc-calc.wuc-calc-wrap .wuc-calc-disclaimer {
    background: var(--wuc-bg-soft);
    border: 1px solid var(--wuc-border-soft);
    border-radius: 8px;
    padding: 18px 22px;
    margin-top: 32px;            /* was 28px */
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--wuc-text-muted);
}
#wuc-calc.wuc-calc-wrap .wuc-calc-disclaimer strong {
    color: var(--wuc-navy);
    font-weight: 600;
}
#wuc-calc.wuc-calc-wrap .wuc-calc-disclaimer p {
    margin: 0;
}
#wuc-calc.wuc-calc-wrap .wuc-calc-disclaimer p + p {
    margin-top: 10px !important;
}

/* === Mobile (≤640px) === */
@media (max-width: 640px) {
    #wuc-calc.wuc-calc-wrap #wuc-calc-form button[type="submit"],
    #wuc-calc.wuc-calc-wrap .wuc-calc-cta {
        width: 100%;
        padding: 14px 24px !important;
        text-align: center;
    }
    #wuc-calc.wuc-calc-wrap .wuc-calc-range {
        font-size: 32px;
    }
    #wuc-calc.wuc-calc-wrap .wuc-calc-range small {
        font-size: 16px;
        margin-left: 8px;
    }
    #wuc-calc.wuc-calc-wrap .wuc-calc-disclaimer {
        padding: 16px 18px;
    }
    #wuc-calc.wuc-calc-wrap .wuc-calc-help {
        min-height: 0;  /* on narrow viewports rows stack, no alignment concern */
    }
}