/* Custom styles layered on top of Tailwind CDN. */

:root { --accent: #2563eb; }

/* ---- Range slider (cross-browser) ---- */
.calc-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) var(--pct, 0%),
        #e2e8f0 var(--pct, 0%),
        #e2e8f0 100%
    );
    outline: none;
    cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease;
}
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.calc-slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
}

/* Remove number-input spinners for a cleaner look */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* Subtle hero gradient used on the landing page */
.hero-gradient {
    background: radial-gradient(1200px 400px at 50% -10%, #dbeafe 0%, transparent 70%);
}

/* ---- Calculators dropdown (<details>) ---- */
.nav-dropdown summary { list-style: none; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown[open] .nav-caret { transform: rotate(180deg); }
.nav-caret { transition: transform 0.15s ease; display: inline-block; }
/* On narrow screens let the menu hug the right edge without overflowing */
@media (max-width: 360px) {
    .nav-dropdown .nav-menu { width: calc(100vw - 2rem); }
}