/*Common css for all clients; color customization*/

/*Customization form high contrast*/
:root {
/*    --kendo-color-border: #000000;*/
    --kendo-color-text: #000000;
    --kendo-color-on-app-surface: #000000;
    --kendo-color-on-base: #000000;
}

/*
We can deal with 1 client color easily: use the color on buttons and menus and some important content; 
derived a toned down secondary color from the primary color for some backgrounds.

However if a client requests us to use 2 colors, we need to exam and test with the colors carefully: 
sometimes the 2 colors are equally strong, sometimes 1 primary/strong color and 1 secondary/weak color.
A unified solution needs to consider this caveat.
Currently we take this approach:
if there's 1 color, we derive the secondary color from the primary color; 
if client requests to use 2 colors, tone down the secondary color to a certain level of saturation and lightness 
 */
:root {
    /* We can use client's secondary color or calculate from primary color */
    /* Only set client's secondary color in branding.css if necessary */
    --c-applied-primary-color: var(--c-primary-color, #003f60);
    --c-derived-secondary-color: hsl(from var(--c-applied-primary-color) h calc(s * 0.60) calc(l * 0.9));
    --c-selected-secondary-color: var(--c-secondary-color, var(--c-derived-secondary-color));
    /* Normalize to a certain level of saturation and lightness */
    --c-applied-secondary-color: hsl(from var(--c-selected-secondary-color) h 50 80);
    --c-secondary-bg-light: hsl(from var(--c-applied-secondary-color) h 60 90);
    --c-secondary-border-light: hsl(from var(--c-applied-secondary-color) h 50 80);
    --c-secondary-bg-light-1: hsl(from var(--c-applied-secondary-color) h 60 95);
    --c-secondary-border-light-1: hsl(from var(--c-applied-secondary-color) h 50 90);
    --c-secondary-bg-light-2: hsl(from var(--c-applied-secondary-color) h 60 98);
    --c-secondary-border-light-2: hsl(from var(--c-applied-secondary-color) h 50 95);
    /* This complementary color does not look good for some clients. Try client's secondary color */
    --primary-complementary-color: hsl(from var(--c-applied-primary-color) calc(h + 180) s l);
    /* Optionally, we can try two split complementary colors. */
    --primary-complementary-color-1: hsl(from var(--c-applied-primary-color) calc(h + 150) s l );
    --primary-complementary-color-2: hsl(from var(--c-applied-primary-color) calc(h + 210) s l);
    /* --primary-complementary-color:var(--bs-secondary-color); */
    --primary-complementary-color-hover: hsl(from var(--primary-complementary-color) h calc(s * 0.75) calc(l * 1.25));
    /* redefined variables for bootstrap and kendo themes based on client branding colors */
    /* bootstrap color variables */
    --bs-primary-color: var(--c-applied-primary-color);
    --bs-primary-bg-subtle: hsl(from var(--bs-primary-color) h 60 50);
    --bs-primary-border-subtle: hsl(from var(--bs-primary-color) h 50 40);
    --bs-secondary-color: var(--c-applied-secondary-color);
    /* --bs-secondary-color: hsl(from var(--c-applied-secondary-color) h calc(s * 0.8) calc(l * 1.5)); */
    --bs-secondary-bg-subtle: hsl(from var(--c-applied-secondary-color) h 60 50);
    --bs-secondary-border-subtle: hsl(from var(--c-applied-secondary-color) h 50 40);


    /* Kendo color variables */
    /* --kendo-color-primary: var(--bs-primary-bg-subtle); */
/*    --kendo-color-primary: var(--bs-primary-color);*/
    /* contrast-color function is not supported in some browsers */
    /* --kendo-color-on-primary: contrast-color(var(--kendo-color-primary));  */
/*    --kendo-color-on-primary: white;
    --kendo-color-primary-hover: var(--primary-complementary-color-hover);
    --kendo-color-surface-alt: var(--c-secondary-bg-light-2);*/
    /* more Telerik color vars to override if necessary*/
    /* --kendo-color-app-surface: var(--c-secondary-bg-light-2);
    --kendo-color-on-app-surface: #424242;
    --kendo-color-subtle: #666666;
    --kendo-color-surface: var(--c-secondary-bg-light-1);
    --kendo-color-surface-alt: var(--c-secondary-bg-light);
    --kendo-color-border: var(--c-secondary-border-light);
    --kendo-color-border-alt: var(--c-secondary-border-light-1); */

    /*    --kendo-color-base: var(--c-applied-secondary-color);*/
    /*    --kendo-color-base: var(--primary-complementary-color);*/
    /*    --kendo-color-base: var(--c-secondary-bg-light);*/
}

.btn-primary {
    color: #fff;
    background-color: var(--c-applied-primary-color);
    border-color: var(--c-applied-primary-color);
}


.accordion-item.active .accordion-header {
    background-color: #f1f1f1;
}

/* we can create a general styling for active/hover on dark/black text */
.active-on-dark, .hover-on-dark:hover {
    background-color: var(--primary-complementary-color-hover);
    color: white;
}

/*Customization*/
.accordion-collapse.collapse.show {
    background-color: var(--c-secondary-bg-light-2);
}
.accordion-button:not(.collapsed) {
    color: #ffffff !important;
}
.accordion.active, .accordion:hover {
    background-color: var(--primary-complementary-color-hover);
    color: white;
}

.menu-container {
    background-color: var(--c-applied-primary-color);
}

    .menu-container li {
        a span:hover, a.active > span {
            background-color: white;
            color: var(--c-applied-primary-color);
        }
    }

.k-drawer {
    background-color: var(--c-applied-primary-color);
}

.k-drawer-content a {
    color: var(--c-applied-primary-color);
}


/*Customization by client*/
.banner.anouncement {
    background-color: var(--c-primary-color);
    color: #ffffff;
}

#hero {
    h1 {
        margin: 0 0 10px 0;
        font-size: 48px;
        font-weight: 700;
        line-height: 56px;
        font-family: "Philosopher", sans-serif;
        color: var(--c-applied-primary-color);
    }

    h2 {
        color: #777777;
        margin-bottom: 30px;
        font-size: 20px;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
    }
}