@charset "UTF-8";
/* CSS Document */

/*
Used colors
success green #319616
success green:hover #45c423
upload blue #165b96
upload blue:hover #4297de
failure red #c50000
failure red fill (lighter red) #f3b7b7
common orange #f05323
common grey #202324
Premier Yellow 2022 #ffc42c
Premier Orange 2022 #f05323
Premier Dark Grey 2022 #202324
*/

/********************** Main Nav container ***********************/

div.headermenu {
    position: fixed !important;
    width: 100% !important;
    z-index: 1000 !important;
    top: 0 !important;
}

#site-logo-desktop {
    padding: 20px 0 0 0 !important;
}

div.content {
    margin-bottom: 0 !important;
}
div#top-orange-strip {
    /* make position relative so z-index can be applied */
    position: relative !important;
    /* make z-index higher than div.headermenu  */
    z-index: 1010 !important
}
/********************** Spacers ***********************/

div#top-content-spacer-bottom {
    width: 400px !important;
    height: 180px !important;
    position: relative !important;
}

@media screen and (max-width: 1087px) {
    div#top-content-spacer-bottom {
        height: 113px !important;
    }
}

div#headerTopBar {
    /* Force consistent header height across browsers */
    min-height: 42px !important;
}

section#top-page-bars {
    position: relative !important;
}

/* Orange quick link bar */
.topMenuItem {
    padding: 5px 20px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #f05323 !important;
}

.topMenuItem a {
    font-size: 16px !important;
    color: white !important;
}

nav.topMenuItem:hover,
nav.topMenuItem:hover a {
    background-color: white !important;
    color: #f05323 !important;
}

/* Keep the currency switcher orange when hovered */
nav.topMenuItem:first-of-type:hover,
nav.topMenuItem:hover:first-of-type:hover a {
    background-color: #f05323 !important;
    color: white !important;
}

.headerColumn {
    display: flex !important;
    justify-content: center !important;
    padding-right: 0 !important;
}

/* Add breathing space below the logo and push the main nav down */
@media screen and (min-width: 768px) {
    .content-field-navbar .top-menu-split {
        border-top: 4px solid #202324 !important;
        border-bottom: 20px solid #202324 !important;
        background-color: #202324 !important;
    }
}

/* Hide text beside icons on smaller screens */
@media screen and (max-width: 1000px) {
    span.icon-text {
        display: none !important;
    }

    .topMenuItem {
        padding: 5px 12px !important;
    }
}

/********************** Main navigation positioning ***********************/

/* Position main nav below the top bars */
section.navbar.is-fixed-top {
    top: auto !important;
    position: relative !important;
}

section.two-tier-menu .navbar.ict-navbar.is-fixed-top .content-field-navbar {
    background-color: #202324 !important;
    top: auto !important;
}

/* Main nav holder below the alert and orange bars */
section#main-nav-holder {
    background-color: #202324 !important;
    position: relative !important;
}

div.header-spacer.ict-header-spacer.two-tier-spacer {
    height: 66px !important;
}

/* Shrink logo at 1088px width and below */
img.is-header-logo.is-full-height {
    height: 2em !important;
    padding: 0 20px !important;
}

/********************** Navigation customization ***********************/

/* Keep navbar height consistent */
.navbar {
    height: 5em !important;
    background-color: #202324 !important;
    color: #fff !important;
    font-size: 1.05em !important;
    position: relative !important;
}

.navbar-brand {
    height: 5em !important;
}

/* Main menu block below 1088px */
#logorow .navbar .navbar-brand {
    background-color: #202324 !important;
}

/* Desktop header sizing */
@media screen and (min-width: 1088px) {
    .ict-navbar.two-tier-menu {
        height: 9.2rem;
    }

    img.is-header-logo.is-full-height {
        height: 5em !important;
        padding: 0 !important;
    }

    #logorow .navbar .navbar-item.has-dropdown:focus .navbar-link,
    #logorow .navbar .navbar-item.has-dropdown:hover .navbar-link,
    #logorow .navbar .navbar-item.has-dropdown.is-active .navbar-link {
        background-color: #f05323 !important;
        color: #fff !important;
    }
}

/* Login button */
a#login-text {
    font-weight: 500 !important;
    margin-top: 21px !important;
}

/* Top account area: My Account | Basket | Search */
.navbar-item .button {
    height: 3rem !important;
}

div.navbar-start div.navbar-item a.navbar-link,
a.button.is-small.is-primary {
    font-size: 1rem !important;
}

a.button.is-small.is-primary:hover {
    color: #f05323 !important;
}

a.button,
a.buttons {
    margin: 8px !important;
}

/* Upper menu section */
.content-field-navbar .bottom-menu-split {
    border-top: 1px solid #2f3436 !important;
    background-color: #202324 !important;
}

div.bottom-menu-split div.container {
    background-color: #202324 !important;
}

/* Main navigation links */
a.navbar-link,
a.navbar-item {
    color: #fff !important;
}

/* Hover and focus states for navigation links */
a.navbar-link:hover,
a.navbar-link:focus,
a.navbar-link:focus-within,
a.navbar-item:hover,
a.navbar-item:focus,
a.navbar-item:focus-within {
    background-color: #f05323 !important;
    transition: all 0.3s ease !important;
}

/* Keep the promo link dark when focused */
a.navbar-link#promo-nav-link:focus {
    background-color: #202324 !important;
}

/* Mobile hamburger menu */
.navbar-burger {
    height: auto !important;
}

.navbar-burger span {
    background-color: #fff !important;
}

/* Little arrow beside main navigation links */
.content-field-navbar .navbar-link:not(.is-arrowless)::after {
    border-color: #ffc42c !important;
}

/* Lower menu section */
.content-field-navbar .bottom-menu-split .navbar {
    height: 50px !important;
}

.navbar-divider {
    background-color: #2f3436 !important;
    border: 0 !important;
    height: 1px !important;
    margin: 0 !important;
}

/* Dropdown menu styling */
@media screen and (min-width: 1088px) {
    .navbar-dropdown {
        border-top: 1px solid #202324 !important;
        font-size: 1rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background-color: #2f3436 !important;
    }

    a.navbar-item {
        border-top: 1px solid #202324 !important;
        padding-top: 10px !important;
        padding-bottom: 14px !important;
    }

    a.navbar-item:focus,
    .navbar-dropdown a.navbar-item:hover {
        background-color: #f05323 !important;
        color: #fff !important;
        transition: all 0.3s ease !important;
    }

    /* Yellow hover for dropdown links */
    div.navbar-dropdown a.navbar-item:hover {
        background-color: #ffc42c !important;
        color: #000 !important;
    }

    /* Last dropdown link */
    div.navbar-dropdown a.navbar-item:last-child {
        background-color: #202324 !important;
        color: #ffc42c !important;
    }

    div.navbar-dropdown a.navbar-item:last-child:hover {
        background-color: #f05323 !important;
        color: #fff !important;
    }
}

/********************** Search bar ***********************/

div.nav-search-container {
    background-color: #202324 !important;
    background-color: #2f3436 !important;
    z-index: 2000;
    position: relative !important;
    top: -16px !important;
}
/* Slide search bar down this much when magnifying glass is clicked */
div.nav-search-container.is-active {
    transform: translatey(82px) !important;
}
@media screen and (max-width: 1088px) {
    div.nav-search-container {
        /*position: absolute !important;*/
        top: -82px !important;
    }
    /* Slide search bar down this much when magnifying glass is clicked at smaller viewport size */
    div.nav-search-container.is-active {
        transform: translatey(82px) !important;
        /*background-color: red !important;*/
    }
}
/* Center search form in dropdown container */
.nav-search-container .search-box {
    display: flex !important;
    align-items: center !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}



/********************** Currency converter ***********************/

div.currency-selector {
    font-size: 0.8rem !important;
    background-color: transparent !important;

    /* Flags are set using JavaScript in PCA-custom.js */
    background-position: 6px center !important;
    background-repeat: no-repeat !important;
    background-size: 24px 24px !important;
    padding: 4px 10px 4px 40px !important;
}

select#customerCurrency.catfish-select,
select#customerCurrency.catfish-select.correct {
    border: 0 !important;
    height: auto !important;
    padding: 4px !important;
    background-color: #fff !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
}

/********************** Expanding mobile dropdown menu ***********************/

/* Make the full width of the menu clickable to open submenus */
.ict-navbar span.mobile-dropdown-toggle {
    width: 100% !important;
    cursor: pointer !important;
}

@media screen and (max-width: 1087px) {
    /* Mobile submenu links */
    div.navbar-item a.navbar-item:hover {
        background-color: #ffc42c !important;
        color: #000 !important;
    }

    div.navbar-item a.navbar-item:last-child {
        color: #ffc42c !important;
        background-color: #202324 !important;
    }

    .navbar-menu {
        background-color: #2f3436 !important;
    }

    /* Indent submenu links */
    div.navbar-dropdown {
        padding-left: 12px !important;
    }

    div.navbar-dropdown a.navbar-item:hover {
        padding-left: 36px !important;
        transition: all 0.3s ease !important;
    }

    div.navbar-dropdown a.navbar-item:last-child:hover {
        background-color: #f05323 !important;
        color: #fff !important;
    }

    /* Orange hover over hamburger menu */
    a.navbar-burger.burger:hover {
        background-color: #f05323 !important;
        transition: all 0.3s ease !important;
    }
}

/********************** Top announcement banner animations ***********************/

@keyframes moveTruck {
    0% {
        background-position: 4% 50%;
    }

    100% {
        background-position: 96% 50%;
    }
}