/*
   Version 5 theme: "sky" — light blue and periwinkle on a pale sky page.
   Everything is light: the top bar, sidebar, footer and banners use soft blues with dark ink text.
   MainLayout adds "site-v5" to the layout on every /v5 page, so these colors
   replace the version 1 navy/purple in the top bar, sidebar, footer and V5 pages.
*/
.site-v5 {
    --v5-page-bg: #f0f8ff;
    --v5-surface: #ffffff;
    --v5-ink: #1e3a52;
    --v5-sky-900: #0c4a6e;
    --v5-sky-800: #075985;
    --v5-sky-700: #0369a1;
    --v5-sky-500: #38bdf8;
    --v5-sky-300: #7dd3fc;
    --v5-sky-200: #bae6fd;
    --v5-sky-100: #e0f2fe;
    --v5-accent: #a5b4fc;
    --v5-accent-soft: #e0e7ff;
    --v5-accent-ink: #4f46e5;
    --v5-line: #cfe6f7;

    /* text on the light banners */
    --v5-hero-ink: var(--v5-sky-900);
    /* banners on Info, Contact, and Contributors */
    --v5-hero:
        radial-gradient(circle at 85% 0%, rgba(165, 180, 252, 0.55) 0%, rgba(165, 180, 252, 0) 50%),
        radial-gradient(circle at 10% 100%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(135deg, var(--v5-sky-100) 0%, var(--v5-sky-200) 60%, #c7e4fb 100%);
    /* stage behind the home slider */
    --v5-stage:
        radial-gradient(circle at 90% 0%, rgba(165, 180, 252, 0.4) 0%, rgba(165, 180, 252, 0) 50%),
        linear-gradient(160deg, #e6f4fe 0%, var(--v5-sky-200) 100%);
    /* buttons */
    --v5-button: linear-gradient(115deg, var(--v5-sky-700) 0%, #0ea5e9 100%);

    /* Shared layout pieces and MudBlazor components pick these up */
    --brand-bg: var(--v5-sky-800);
    --mud-palette-primary: var(--v5-sky-700);
    --mud-palette-primary-rgb: 3, 105, 161;
    --mud-palette-primary-text: #fff;
    --mud-palette-primary-darken: var(--v5-sky-800);
    --mud-palette-surface: var(--v5-surface);
    --mud-palette-background-gray: var(--v5-sky-100);
    --mud-palette-lines-default: var(--v5-line);
    --mud-palette-text-primary: var(--v5-ink);

    min-height: 100vh;
    background-color: var(--v5-page-bg);
    color: var(--v5-ink);
}

    .site-v5 .mud-main-content {
        background-color: var(--v5-page-bg);
    }

    /* top bar: pale sky glass with dark text */
    .site-v5 .topbar.mud-appbar {
        background:
            radial-gradient(circle at 12% -40%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 45%),
            radial-gradient(circle at 88% 140%, rgba(165, 180, 252, 0.55) 0%, rgba(165, 180, 252, 0) 50%),
            linear-gradient(115deg, #e6f4fe 0%, var(--v5-sky-200) 55%, #c7d2fe 100%) !important;
        border-image: linear-gradient(90deg, var(--v5-sky-500), var(--v5-accent), var(--v5-sky-500)) 1;
        box-shadow: 0 2px 12px rgba(12, 74, 110, 0.1);
        color: var(--v5-hero-ink);
    }

    .site-v5 .topbar-menu,
    .site-v5 .topbar-brand,
    .site-v5 .topbar-tool,
    .site-v5 .topbar-tool:hover,
    .site-v5 .topbar-tool:focus-visible {
        color: var(--v5-hero-ink) !important;
    }

        .site-v5 .topbar-menu:hover {
            background-color: rgba(12, 74, 110, 0.08) !important;
        }

    .site-v5 .topbar-logo {
        box-shadow: 0 1px 4px rgba(12, 74, 110, 0.18);
    }

    .site-v5 .topbar-brand:hover .topbar-name,
    .site-v5 .topbar-brand:focus-visible .topbar-name {
        color: var(--v5-sky-700);
    }

    .site-v5 .topbar-langs,
    .site-v5 .topbar-tool {
        border-color: rgba(12, 74, 110, 0.2);
    }

    .site-v5 .topbar-langs {
        background-color: rgba(255, 255, 255, 0.5);
    }

    .site-v5 .topbar-lang {
        color: rgba(12, 74, 110, 0.85);
    }

        .site-v5 .topbar-lang:hover,
        .site-v5 .topbar-tool:hover,
        .site-v5 .topbar-tool:focus-visible {
            background-color: rgba(255, 255, 255, 0.75);
            color: var(--v5-hero-ink);
        }

        .site-v5 .topbar-lang:focus-visible {
            outline-color: var(--v5-hero-ink);
        }

    .site-v5 .topbar-lang-active,
    .site-v5 .topbar-lang-active:hover {
        background-color: var(--v5-sky-700);
        color: #fff;
    }

    /* sidebar */
    .site-v5 .sidebar-gradient {
        background: linear-gradient(180deg, var(--v5-sky-100) 0%, #eef2ff 100%) !important;
        color: var(--v5-ink);
    }

    .site-v5 .my-sidebar .mud-nav-link,
    .site-v5 .my-sidebar .mud-nav-link-text,
    .site-v5 .my-sidebar .mud-nav-link .mud-icon-root,
    .site-v5 .my-sidebar .mud-nav-group .mud-icon-root,
    .site-v5 .mud-nav-link-expand-icon {
        color: var(--v5-ink) !important;
        fill: currentColor !important;
    }

    .site-v5 .my-sidebar .mud-nav-link:hover {
        background-color: rgba(3, 105, 161, 0.08);
    }

    .site-v5 .my-sidebar .mud-nav-link.active {
        background-color: rgba(165, 180, 252, 0.35);
        border-inline-start: 3px solid var(--v5-sky-700);
    }

    /* footer: light blue with dark text */
    .site-v5 .site-footer {
        background: linear-gradient(180deg, var(--v5-sky-100) 0%, var(--v5-sky-200) 100%);
        border-top: 4px solid var(--v5-sky-300);
        color: rgba(12, 74, 110, 0.85);
    }

    .site-v5 .site-footer-name,
    .site-v5 .site-footer-heading,
    .site-v5 .site-footer a:hover,
    .site-v5 .site-footer a:focus-visible {
        color: var(--v5-hero-ink);
    }

    .site-v5 .site-footer a,
    .site-v5 .site-footer-bottom {
        color: rgba(12, 74, 110, 0.85);
    }

    .site-v5 .site-footer-heading,
    .site-v5 .site-footer-bottom {
        border-color: rgba(12, 74, 110, 0.15);
    }

    .site-v5 .site-footer-social-button {
        background-color: rgba(255, 255, 255, 0.6) !important;
        color: var(--v5-sky-800) !important;
    }

        .site-v5 .site-footer-social-button:hover {
            background-color: #fff !important;
        }

    /* home page carousel indicators */
    .site-v5 .news-carousel {
        --mud-palette-primary: var(--v5-sky-700);
    }