/* UnitConversionPlus colour-paint theme: bright paint-chip accents on a warm white page.
   Loaded last in _Layout.cshtml so it overrides older colours in site.css.
   Decorative colours (coral, sun, teal, sky, plum) are never used for small text;
   text and buttons use the darker ink / primary / *-text values for readable contrast. */
:root {
    --paper: #fbf7f0;
    --wash: #fdfaf5;
    --card: #ffffff;
    --ink: #1f2a44;
    --muted: #535a6c;
    --line: #e7dfd2;
    --field-line: #c9c2b6;
    --primary: #2b50aa;
    --primary-dark: #1e3c87;
    --accent-text: #b5361f;
    --teal-text: #0f7468;
    --focus: #f4b52f;
    --coral: #ec5a3f;
    --sun: #f4b52f;
    --teal: #19a291;
    --sky: #4aa3df;
    --plum: #8d4fae;
    --rainbow: linear-gradient(90deg, var(--coral) 0 20%, var(--sun) 20% 40%, var(--teal) 40% 60%, var(--sky) 60% 80%, var(--plum) 80% 100%);
}

/* Page background: faint paint splashes on warm white. */
body {
    background-color: var(--paper) !important;
    background-image: url(/images/paint-background.svg) !important;
    background-size: 420px 420px !important;
    background-repeat: repeat !important;
    color: var(--ink);
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

/* Header: white bar with a paint-stripe edge */
.site-head {
    background: var(--rainbow) left bottom / 100% 5px no-repeat, rgba(255,255,255,.98) !important;
    border-bottom: 0 !important;
    padding-bottom: 5px;
}
.site-head .nav .navbar-brand { color: var(--ink) !important; }
.site-head .nav .navbar-brand::before {
    content: ""; width: 26px; height: 26px; margin-right: 10px; flex: none;
    border-radius: 50%; background: conic-gradient(var(--coral) 0 72deg, var(--sun) 0 144deg, var(--teal) 0 216deg, var(--sky) 0 288deg, var(--plum) 0);
}
.site-head .navbar-nav .nav-link.text-dark { color: var(--ink) !important; }
.site-head .navbar-nav .nav-link.text-dark:hover { color: var(--primary) !important; }
.find { background: var(--primary); border-color: var(--primary); color: #fff; }
.find:hover { background: var(--primary-dark); color: #fff; }

/* Footer */
.footer { background: var(--ink) !important; border-top: 0 !important; position: relative; }
.footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--rainbow); }
footer .container, ul.footer-links li a { color: #eef0f6 !important; }

/* Panels on other pages */
body > article.container, body > div.container.py-5, .privacy-content, .terms-content, .shell {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(31,42,68,.07);
    position: relative;
    overflow: hidden;
}
body > article.container::before, body > div.container.py-5::before, .privacy-content::before, .terms-content::before, .shell::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--rainbow);
}
.shell { padding: 32px; margin-top: 32px; margin-bottom: 32px; }
body > article.container, body > div.container.py-5 { margin-top: 32px; margin-bottom: 32px; padding: 32px; }
@media (max-width: 760px) {
    .shell, body > article.container, body > div.container.py-5 { padding: 20px; margin-top: 20px; }
}

/* Legal, About, Contact and Error pages */
.eyebrow { color: var(--accent-text); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; }
.privacy-content h2, .terms-content h2, body > article.container h2, .shell h5 { color: var(--teal-text); }
.tips-row { background: var(--wash); border-left: 5px solid var(--sun); border-radius: 0 10px 10px 0; padding: 18px 20px; }
.btn-submit { background: var(--primary); color: #fff; border: 1px solid var(--primary); border-radius: 8px; padding: 10px 22px; font-weight: 650; }
.btn-submit:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.form-input, .shell textarea { border: 1px solid var(--field-line); border-radius: 8px; padding: 8px 10px; }
.form-input:focus, .shell textarea:focus { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Cookie banner */
#cookieConsent { background: var(--card); color: var(--ink); border-color: var(--line); }
#cookieConsent h2 { color: var(--ink); }
#cookieConsent a, #cookieConsent .cookie-kicker { color: var(--primary); }
#cookieConsent .cookie-detail { color: var(--muted); }
#cookieConsent .accept-policy { background: var(--primary); border-color: var(--primary); color: #fff; }
#cookieConsent .decline-policy { background: var(--wash); border-color: var(--field-line); color: var(--ink); }
#cookieConsent .cookie-actions button:hover, #cookieConsent .cookie-actions button:focus-visible {
    border-color: var(--primary); outline-color: var(--focus);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem var(--focus);
}

@media print {
    body { background: #fff !important; background-image: none !important; }
    .paint-result::before { display: none; }
}