/**
 * UK Hypersonics Theme CSS
 *
 * - Purpose: provide a small, focused set of CSS variables and a few minimal overrides
     that let a subsite change the colour theme without touching layout, transitions,
     spacing or behaviour from the main site.
 *
 */

:root {

    --logo-margin-right: 18px;      /* Logo margin compensation for UK Hypersonics site 0 set to 0 for others */


    /** We covert to hsl so that we can calculate lighter/darker variants
     ** @see: https://stackoverflow.com/a/55267265
     **/

    /*
        Original Hex value for reference
        --color-primary: #1E73B8;
        --color-secondary: #0D2A4A;
        --color-accent: #1BA7C8;
        --panelbg: #F2F7FC
        --color-text-primary: #0F172A;
    */
    --color-primary-h: 207;
    --color-primary-s: 72%;
    --color-primary-l: 42%;
    --color-primary-hsl: var(--color-primary-h),var(--color-primary-s),var(--color-primary-l);
    --color-primary:  hsl(var(--color-primary-hsl));
    --color-primary-light: hsl(var(--color-primary-h),var(--color-primary-s), calc(var(--color-primary-l) / .7));
    --color-primary-dark: hsl(var(--color-primary-h),var(--color-primary-s), calc(var(--color-primary-l) * .9));

    --color-secondary-h: 211;
    --color-secondary-s: 70%;
    --color-secondary-l: 17%;
    --color-secondary-hsl: var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l);
    --color-secondary:  hsl(var(--color-secondary-hsl));
    --color-secondary-light: hsl(var(--color-secondary-h),var(--color-secondary-s), calc(var(--color-secondary-l) / .7));
    --color-secondary-dark: hsl(var(--color-secondary-h),var(--color-secondary-s), calc(var(--color-secondary-l) * .9));

    --color-accent-h: 191;
    --color-accent-s: 76%;
    --color-accent-l: 45%;
    --color-accent-hsl: var(--color-accent-h),var(--color-accent-s),var(--color-accent-l);
    --color-accent:  hsl(var(--color-accent-hsl));
    --color-accent-light: hsl(var(--color-accent-h),var(--color-accent-s), calc(var(--color-accent-l) / .7));
    --color-accent-dark: hsl(var(--color-accent-h),var(--color-accent-s), calc(var(--color-accent-l) * .9));

    --panelbg-h: 210;
    --panelbg-s: 30%;
    --panelbg-l: 97%;
    --panelbg-hsl: var(--panelbg-h),var(--panelbg-s),var(--panelbg-l);
    --panelbg:  hsl(var(--panelbg-hsl));
    --panelbg-light: hsl(var(--panelbg-h),var(--panelbg-s), calc(var(--panelbg-l) / .7));
    --panelbg-dark: hsl(var(--panelbg-h),var(--panelbg-s), calc(var(--panelbg-l) * .9));


    --color-text-primary: #0F172A;

    --color-text-secondary: #FFFFFF;
}

/** margins and alignments **/


@media (min-width: 992px) {
    /* not sure why Ox Logo overlaps nav items boundaries otherwise */
    .header-logo.__eng {
        margin-right: var(--logo-margin-right);
    }

    /* center align menu items vertically */
    .nav ul > li.menu-item {
        display: flex;
        align-items: center;
    }
}


/** colour overrides **/

@media (min-width: 992px)
{
    .nav ul > li.menu-item a {
        color: var(--color-text-primary);
    }

    .nav ul > li.menu-item a::before {
        background-color: var(--color-accent);
    }
}

.h1, .usercontent h1, .mce-content-body h1,
.h2, .usercontent h2, .mce-content-body h2,
.h3, .usercontent h3, .mce-content-body h3,
.tabblocks-title, .casestudyslider-title, .imageblock-title, .videoblock-title, .imagegallery-title, .imagetextblock-title, .linkblocks-title, .resourcesblock-title, .projectshowcase-title, .faqmodule-title, .linkblock.__flex .linkblock-title,
.accordion-head::after,
.linkblock-imgwrap, .a, .usercontent a, .mce-content-body a
{
    color: var(--color-primary);
}

.a:hover, .usercontent a:hover, .mce-content-body a:hover, .a:focus, .usercontent a:focus, .mce-content-body a:focus {
    color: var(--color-accent);
}



.accordion-head:hover::after{
    color: var(--color-accent);
}

.accordion-head:hover, .accordion-head:focus {
    border-color: var(--color-accent);
}


.accordion.__active .accordion-head:hover {
    border-bottom-color: var(--color-accent);
}


.accordion.__active .accordion-head {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.accordion.__active .accordion-head::after {
    background-color: var(--color-primary);
}


.teamlink-title,
.whitebanner-subtitle,
.h4, .usercontent h4, .mce-content-body h4 {
    color: var(--color-primary-dark);
}

.button.__ghost, .submit_wrap button.__ghost, .form-submit button.__ghost, .__ghost.sliderbutton {

    color: var(--color-accent);
    border-color: var(--color-accent);
}

.button.__ghost:hover, .submit_wrap button.__ghost:hover, .form-submit button.__ghost:hover, .__ghost.sliderbutton:hover, .button.__ghost:focus, .submit_wrap button.__ghost:focus, .form-submit button.__ghost:focus, .__ghost.sliderbutton:focus {
    background-color: var(--color-accent);
}

.usercontent p, .mce-content-body p, .usercontent ul > li, .mce-content-body ul > li {
    color: var(--color-text-primary);
}

.umbraco-forms-form .umbraco-forms-navigation input[type="submit"] {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary-dark);
    color: var(--color-text-secondary);
}

.umbraco-forms-form .umbraco-forms-navigation input[type="submit"]:hover {
    background-color: var(--color-accent);
}

.footer {
    background-color: var(--color-secondary);
}

.footer-aux ul li a::after {
    background-color: var(--color-accent);
}


.whitebanner-title, .post-title {
    color: var(--color-primary);
}

.whitebanner-title::after {
    background-color: var(--color-primary);
}

.umbraco-forms-page label.umbraco-forms-label, .umbraco-forms-tooltip.help-block {
    color: var(--color-text-primary);
}

.breadcrumb-back:hover::before, .breadcrumb-back:focus::before {
    color: var(--color-accent);
}

.scrolltop:hover::after, .scrolltop:focus::after {
    color: var(--color-accent);
}

.linkblock-date::before, .linkblock-imgwrap::before, .resourcedownload-linktext::before {
    background-color: var(--color-accent-light);
}

.post-date {
    color: var(--color-primary-dark);
}

.post-date::before {
    background-color: var(--color-accent-light);
}

.eventdetail-title {
    color: var(--color-accent-dark);
}

.eventdetail-title::after {
    background-color: var(--color-accent-dark);
}

.eventdetail-text, .eventdetail-text p {
    color: var(--color-secondary);
}


/** Buttons including the animation **/
.button, .submit_wrap button, .form-submit button, .sliderbutton, .shareblock-trigger, .shareblock.__alt .shareblock-trigger {
    background: var(--color-accent);
}

.button, .submit_wrap button, .form-submit button, .sliderbutton, .shareblock-trigger, .shareblock.__alt .shareblock-trigger, .shareblock-trigger::before {
    color: var(--color-text-primary);
}

.button:hover, .submit_wrap button:hover, .form-submit button:hover, .sliderbutton:hover,
.button:focus, .submit_wrap button:focus, .form-submit button:focus, .sliderbutton:focus,
.button:active, .submit_wrap button:active, .form-submit button:active, .sliderbutton:active,
.shareblock-trigger:hover, .shareblock-trigger:focus, .shareblock-trigger:active,
.shareblock.__alt .shareblock-trigger:hover, .shareblock.__alt .shareblock-trigger:focus, .shareblock.__alt .shareblock-trigger:active,
.shareblock.__alt .shareblock-trigger:hover::before, .shareblock.__alt .shareblock-trigger:focus::before, .shareblock.__alt .shareblock-trigger:active::before,
.shareblock.__matched .shareblock-trigger:hover::before, .shareblock.__matched .shareblock-trigger:focus::before, .shareblock.__matched .shareblock-trigger:active::before {
    color: var(--color-text-secondary);
    background: var(--color-accent-light);
}


.shareblock.__matched .shareblock-trigger::before {
    left: 48px;
}

.button-hover {
    background-color: var(--color-accent-dark);
}
/** /end Buttons **/