/* Variables */
:root {
    /* Color Values */
    --portal-white: #fff;
    --portal-black: #000;
    --portal-red: #bb0000;
    --portal-dark-grey: #333;
    --portal-light-grey: #bbb;
    --portal-very-light-grey: #f9f9f9;
    /* Primary and Secondary Colors */
    --portal-primary-color: #1c437d;
    --portal-primary-color-light: #e2eeff; /* A lighter shade of the primary color */
    --portal-primary-color-dark: #c6d9f7; /* A slightely darker shade of primary-color-light */
    --portal-secondary-color: var(--portal-white); /* Should be inverse of the primary color shade */
    /* Scaffolding */
    --portal-site-wrapper-width: 100%;
    --portal-layout-wrapper-width: 1320px;
    --portal-content-wrapper-width: var(--portal-layout-wrapper-width);
    /* Header */
    --portal-header-background-color: var(--portal-white);
    --portal-header-text-color: var(--portal-dark-grey);
    /* Site Nav */
    --portal-site-nav-link-color: var(--portal-white);
    --portal-site-nav-link-hover-color: var(--portal-dark-grey);
    --portal-site-nav-link-active-color: var(--portal-black);
    /* Body */
    --portal-body-background-color: var(--portal-very-light-grey);
    --portal-body-text-color: var(--portal-dark-grey);
    --portal-page-background-color: var(--portal-white);
    /* Footer */
    --portal-footer-background-color: var(--portal-primary-color);
    --portal-footer-text-color: var(--portal-white);
    --portal-footer-link-color: var(--portal-white);
    --portal-footer-link-hover-color: var(--portal-white);
    /* Buttons */
    --portal-button-background-color: var(--portal-primary-color-light);
    --portal-button-outline-color: var(--portal-primary-color-dark);
    --portal-button-text-color: var(--portal-primary-color);
    --portal-button-hover-background-color: var(--portal-primary-color);
    --portal-button-hover-text-color: var(--portal-secondary-color);
    /* Spinner */
    --portal-spinner-primary: rgba(128, 32, 93, 0.8);
    --portal-spinner-secondary: rgba(128, 32, 93, 0.4);
    /* Rollups */
    --rollups-primary-color: var(--portal-primary-color);
    /* Forms */
    --portal-forms-required-color: #cc0000;
    --portal-forms-placeholder-color: #bbb;
    /* Social media icons */
    --portal-facebook-color: #4267B2;
    --portal-twitter-color: #1DA1F2;
    --portal-linkedin-color: #0077B5;
}

/* Custom Variables */
:root {
    /* Primary and Secondary Colors */
    --portal-primary-rgb: 28,67,125;
    /* Site Nav */
    --portal-site-nav-background-color: var(--portal-primary-rgb);
    --portal-site-nav-link-hover-background-color: var(--portal-white);
}

/* Bootstrap Overrides */
:root {
    --bs-primary: var(--portal-primary);
    --bs-primary-rgb: var(--portal-primary-rgb);
}

/* Custom Styles */

/* Header */
@media screen and (width <= 768px) {
    #EUMPortal header {
        /*height: 65px;
        padding: 1em 0 0 1em;*/
        display: none;
    }

    #ccwLogoBanner {
        display: none;
    }

    .ccwLogoNavbar {
        max-width: unset !important;
        transform: scale(.75);
        position: absolute;
        top: 5px;
    }

    #EUMPortal header {
        border: 0;
        background-image: unset;
        background: linear-gradient(to left, rgba(255, 255, 255, 0) 20vw,rgba(255, 255, 255, 1) 80vw);
    }

    #navbarSearch {
        position: absolute;
        right: 75px;
        top: 7px;
    }
}


@media screen and (width > 768px) {
    #EUMPortal header {
        height: 150px;
    }

    #EUMPortal header {
        border: 0;
        /* Specify your desired gradient of the header image here */
        background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 20vw,rgba(255, 255, 255, 1) 80vw), url('/cityofwindsor/img/DowntownWindsorFlag.jpg');
        background-size: cover; /* Adjusted to cover the whole header */
        background-position: 0 32%; /* Specify your desired offset of the header image here */
        /*height: 150px; 290px; Adjusted height of the header */
    }

    #ccwLogoBanner {
        margin-top: 25px;
    }

    .ccwLogoNavbar {
        display: none;
    }

    #navbarSearch {
        display: none;
    }

}
    #EUMPortal header .btn-outline-primary {
        background-color: var(--portal-button-outline-color);
    }

/* Control Nav */
#EUMPortal .control-nav .nav-item.dropdown > .dropdown-toggle {
    color: var(--portal-white) !important;
}

/* Site Navigation */

li.dropdown:nth-last-child(2) > div.dropdown-menu[data-bs-popper] {
    position: absolute;
    right: 0em;
    left: unset;
}

li.dropdown:nth-last-child(3) > div.dropdown-menu[data-bs-popper] {
    position: absolute;
    right: 0em;
    left: unset;
}

#EUMPortal header + .navbar {
    padding-top: 1px;
    padding-bottom: 1px;
}

#EUMPortal .site-nav {
    flex: 1 1 auto;
}

    #EUMPortal .site-nav > .nav-item {
        flex: 1 1 auto;
    }

        #EUMPortal .site-nav > .nav-item:hover,
        #EUMPortal .site-nav > .nav-item:hover > .nav-link,
        #EUMPortal .site-nav > .nav-item > .nav-link:hover,
        #EUMPortal .site-nav > .nav-item > .nav-link:focus {
            background-color: var(--portal-site-nav-link-hover-background-color);
            color: var(--portal-site-nav-link-hover-color);
        }

        #EUMPortal .site-nav > .nav-item > .nav-link {
            font-size: 1rem;
            padding: 1.25rem;
        }

@media(min-width: 992px) {
    #EUMPortal .site-nav > .nav-item > .nav-link {
        text-align: center;
    }
}

#EUMPortal .site-nav .dropdown-menu .nav-link {
    color: var(--portal-dark-grey);
    font-size: .875rem;
    padding: .35rem 1rem;
}

    #EUMPortal .site-nav .dropdown-menu .nav-link:hover {
        text-decoration: underline;
    }

/* Hamburger Icon */
#EUMPortal .navbar-dark .navbar-toggler {
    border-color: rgba(255,255,255,.5);
}

#EUMPortal .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Footer */
#EUMPortal footer nav a {
    padding: .25rem 0;
}

#EUMPortal footer a:focus {
    color: var(--portal-footer-link-hover-color);
}

/* Typography */
#EUMPortal {
    color: var(--portal-body-text-color);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

.h1, h1 {
    color: var(--portal-body-text-color);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.h2, h2 {
    color: var(--portal-body-text-color);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.h3, h3 {
    color: var(--portal-body-text-color);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* make images responsive */
img{
    height: auto !important;
    max-width: 100% !important;
}

/* Search Rollup Grid */
#EUMPortal .results-grid .search-results {
    display: grid;
    gap: 1rem;
}
  
 @media (min-width: 600px) {
    #EUMPortal .results-grid .search-results {
        grid-template-columns: repeat(2, 1fr);
    }
}

#EUMPortal [data-portal-action=SearchPage] .search-results-metadata, #EUMPortal .portal-search-page .search-results-metadata {
    color: black;
}

#EUMPortal [data-portal-action=SearchPage] .pagination .page-item.disabled>.page-link, #EUMPortal .portal-search-page .pagination .page-item.disabled>.page-link{
	color: #1c437d
}

/* Fix AODA Contrst issue */
.carousel-indicators .active {
    border: solid;
    border-block-color: #1c437d;
    margin-block: auto;
    background-color: white !important;
    color: #1c437d !important;
}