/**
 * Header and Footer CSS File
 *
 * This file contains the styles for the header, footer, and offcanvas menu
 * for the Codehills Kickstarter theme. It includes styles for the header navigation,
 * footer layout, and offcanvas menu elements.
 *
 * @since 2.0.0
 * @package WordPress
 * @subpackage Codehills Kickstarter Theme
 */

/**************** Header / Footer ******************* *
 *  1. Header
 *      1.1. Navigation
 *      1.2. Country selector
 *      1.3. Search
 *  2. Footer
 *  3. Offcanvas
*****************************************************/

/******************** 1. Header *********************/

header {
    position: relative;
    z-index: 999;
    padding: 16px 0px 20px;
    height: 70px;
}
header.header-light {
    border-bottom: none;
}
header.header-absolute {
    background: rgb(34, 34, 34) !important;
    background: linear-gradient(180deg, rgba(34, 34, 34, 0.75) 0%, rgba(34, 34, 34, 0) 99%) !important;
    position: absolute !important;
    width: 100vw;
}
header.uk-active {
    background: #fff !important;
    padding: 16px 0 20px;
    height: 70px;
    position: fixed !important;
    width: 100vw;
    border-bottom: 1px solid var(--kickstarter-border);
    animation: slideDown 0.5s ease-out;
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
header.header-light .uk-logo-white,
header.header-light.uk-active .uk-logo-dark,
header.header-dark .uk-logo-dark {
    display: block;
}
header.header-light .uk-logo-dark,
header.header-light.uk-active .uk-logo-white,
header.header-dark .uk-logo-white {
    display: none;
}

/**** 1.1. Navigation ****/

.uk-navbar-nav {
    gap: 0;
    padding-top: 15px;
}
.uk-navbar-nav > li > a,
.uk-navbar-dropdown-nav > li > a,
.uk-navbar-item,
.uk-navbar-toggle,
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item,
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu > li.mega-menu-item > a.mega-menu-link {
    font-family: var(--kickstarter-font-primary), sans-serif;
    color: var(--kickstarter-primary-color);
    min-height: inherit;
    font-size: 16px;
    text-transform: none;
}
.uk-navbar-nav > li > a,
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu > li.mega-menu-item > a.mega-menu-link {
    padding: 0 20px 28px;
    border-bottom: 2px solid transparent;
    line-height: inherit;
    height: auto;
}
header.uk-active .uk-navbar-nav > li > a,
header.uk-active #mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu > li.mega-menu-item > a.mega-menu-link {
    padding-bottom: 16px;
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li > a:focus,
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li:focus > a,
.uk-light .uk-navbar-nav > li > a:hover,
.uk-light .uk-navbar-nav > li > a:focus,
.uk-light .uk-navbar-nav:hover > li > a,
.uk-light .uk-navbar-nav:focus > li > a,
header.header-light a:hover,
header.header-light a:focus,
header.header-light .uk-navbar-nav > li > a:hover,
header.header-light .uk-navbar-nav > li > a:focus,
header.header-light .uk-navbar-nav > li:hover > a,
header.header-light .uk-navbar-nav > li:focus > a,
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link:hover,
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link:focus {
    color: var(--kickstarter-green);
    border-color: var(--kickstarter-green);
}
header.header-light:not(.uk-active) a,
header.header-light:not(.uk-active) .uk-navbar-nav > li > a {
    color: #fff;
}

header.header-light:not(.uk-active) a:hover,
header.header-light:not(.uk-active) a:focus,
header.header-light:not(.uk-active) .uk-navbar-nav > li > a:hover,
header.header-light:not(.uk-active) .uk-navbar-nav > li > a:focus,
.uk-navbar-dropdown-nav > li > a:hover,
.uk-navbar-dropdown-nav > li > a:focus {
    color: var(--kickstarter-green);
}
header.header-light:not(.uk-active) .uk-navbar-dropdown {
    padding: 5px 0;
    background: transparent;
    color: #666;
    box-shadow: none;
}
header.header-dark .uk-navbar-dropdown,
header.header-light.uk-active .uk-navbar-dropdown {
    box-shadow: none;
    left: 0 !important;
    width: 100%;
    position: absolute;
    top: 74px !important;
    max-width: 100vw !important;
    padding-left: 0;
    padding-right: 0;
}
header.header-dark.uk-active .uk-navbar-dropdown,
header.header-light.uk-active .uk-navbar-dropdown {
    top: 62px !important;
}
header.header-dark .uk-navbar-dropdown::before,
header.header-light.uk-active .uk-navbar-dropdown::before {
    content: "";
    display: block;
    position: absolute;
    left: -50vw;
    top: 0;
    width: 200vw;
    height: 100%;
    background: #fff;
    z-index: -1;
}
header.header-dark .uk-navbar-dropdown-nav,
header.header-light.uk-active .uk-navbar-dropdown-nav {
    display: flex;
    gap: 30px;
    justify-content: center;
}

/***** 1.2. Country selector ****/

#country-selector-modal,
#search-modal {
    padding: 0;
    background: transparent;
    font-family: var(--kickstarter-font-primary);
    font-weight: 500;
}
#country-selector-modal .uk-modal-dialog {
    margin: 0 0 0 auto;
    padding-left: 75px;
    padding-right: 75px;
    width: 380px;
}
#country-selector-modal .uk-close,
#search-modal .uk-close {
    position: relative;
    top: 0;
    left: 0;
}
#country-selector-modal .uk-modal-dialog-header {
    color: var(--kickstarter-green);
    padding: 4px 20px 0;
}
#country-selector-modal hr {
    border-bottom: 2px solid var(--kickstarter-pink);
}
#country-selector-modal hr + div {
    padding: 0 20px;
}
#country-selector-modal .uk-nav > li > a {
    color: var(--kickstarter-nav);
}
#country-selector-modal .uk-nav > li > a:hover,
#country-selector-modal .uk-nav > li > a:focus {
    color: var(--kickstarter-green);
}

/**** 1.3. Search ****/

#search-modal .uk-modal-dialog {
    width: 100vw;
    min-height: 310px;
}
#search-modal .search-form {
    width: 820px;
    max-height: 90vw;
}
#search-modal .uk-input {
    font-size: 24px;
    color: var(--kickstarter-green);
    border: none;
    border-bottom: 2px solid var(--kickstarter-green);
    padding: 15px 0 15px 60px !important;
    border-radius: 0;
}
#search-modal .uk-form-icon {
    color: var(--kickstarter-green);
}

/**** 1.4. Mega Menu ****/

#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu {
    transform: translateY(16px);
}
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu > li.mega-menu-megamenu > ul.mega-sub-menu {
    transform: translateY(1px) !important;
}
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row {
    display: flex;
    justify-content: center;
}
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > .mega-sub-menu {
    display: inline-block;
    padding-top: 40px;
    padding-bottom: 55px;
}
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu li.mega-menu-megamenu > ul.mega-sub-menu .menu {
    list-style: none;
    padding: 0;
}
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu li.mega-menu-megamenu > ul.mega-sub-menu .menu > li + li {
    margin-top: 30px;
}
ul.mega-sub-menu h3 {
    font-size: 16px;
}
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu {
    width: 75%;
}
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-5-of-12,
#mega-menu-wrap-primary_mega_menu #mega-menu-primary_mega_menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.widget_media_image {
    width: 285px;
    max-width: 285px;
}
.mega-menu-item.mega-menu-item-type-widget.widget_media_image img {
    width: 100%;
    max-width: 295px !important;
}

/******************** 2. Footer *********************/

footer {
    background: #fff;
    padding: 50px 0;
    font-size: 14px;
}
.footer-contact {
    padding: 5px 0;
}
footer strong {
    color: inherit;
}
footer .uk-nav-horizontal > li > a {
    justify-content: center;
}
footer .uk-accordion-title {
    font-size: 16px;
    padding: 0;
    color: var(--kickstarter-dark-blue);
}
footer .uk-accordion-title::before {
    width: 26px;
    height: 15px;
    transform: translateY(4px) scale(0.5);
    background-image: url("../../img/chevron-down.svg");
}
footer .uk-open > .uk-accordion-title::before {
    background-image: url("../../img/chevron-up.svg");
}
footer .uk-open > .uk-accordion-title,
footer .uk-accordion-title:hover,
footer .uk-accordion-title:focus {
    font-size: 16px;
    color: var(--kickstarter-green);
}
footer .uk-accordion-content {
    padding: 20px 0 0;
}

/**** 2.1. Chat ****/

#galenika-chat {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 45px;
    height: 45px;
    background: url("../../img/chat-icon.svg") 0 0 no-repeat;
    cursor: pointer;
}
#galenika-chat:hover,
#galenika-chat:focus {
    background-image: url("../../img/chat-icon-hover.svg");
}

/******************** 3. Offcanvas *********************/

.uk-offcanvas {
    z-index: 9081;
}
.uk-offcanvas-bar {
    background: rgba(255, 255, 255, 1);
    width: 100vw;
    padding: 16px 15px 15px;
    color: var(--kickstarter-dark-blue);
}
.uk-offcanvas-bar .uk-close {
    color: var(--kickstarter-pink);
    right: 15px;
    top: 20px;
}
.uk-offcanvas-bar hr {
    border-bottom: 3px solid rgba(203, 203, 203, 0.6);
}
.offcanvas-navigation-wrapper {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 3px solid rgba(203, 203, 203, 0.6);
}
.offcanvas-dropdown-trigger-plus,
.offcanvas-dropdown-trigger-minus {
    position: absolute;
    right: 0; /* was calc(-5% + 20px); */
}
.offcanvas-dropdown-trigger-minus,
.dropdown-expanded .offcanvas-dropdown-trigger-plus {
    display: none;
}
.offcanvas-dropdown-trigger-plus,
.dropdown-expanded .offcanvas-dropdown-trigger-minus {
    display: block;
}
.country-selector-offcanvas span,
.uk-offcanvas-bar .uk-accordion-title,
.uk-offcanvas-bar .uk-nav a {
    color: var(--kickstarter-dark-blue);
    font-family: var(--kickstarter-font-primary);
    font-size: 21px;
    font-weight: 500;
    position: relative;
    padding: 10px 0;
}
.uk-offcanvas-bar .uk-accordion-title {
    padding: 0;
}
.uk-offcanvas-bar .uk-accordion-title::before {
    width: 26px;
    height: 15px;
    transform: translateY(4px) scale(0.5);
    background-image: url("../../img/chevron-down.svg");
    position: absolute;
    right: 0;
    top: 5px;
}
.uk-offcanvas-bar .uk-open > .uk-accordion-title::before {
    background-image: url("../../img/chevron-up.svg");
}
.uk-offcanvas-bar .uk-accordion-content {
    padding: 15px 42px;
}
.uk-offcanvas-bar .uk-nav a:hover,
.uk-offcanvas-bar .dropdown-expanded > a,
.uk-offcanvas-bar .uk-accordion-title svg {
    color: var(--kickstarter-green);
}
.offcanvas-dropdown-trigger-plus svg > *,
.offcanvas-dropdown-trigger-minus svg > * {
    stroke-width: 2px;
}
.uk-offcanvas-bar ul.sub-menu,
.uk-offcanvas-bar .uk-dropdown {
    padding: 15px;
    border-top: 3px solid rgba(203, 203, 203, 0.6);
    border-bottom: 3px solid rgba(203, 203, 203, 0.6);
    box-shadow: none;
    position: relative;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
}
.uk-offcanvas-bar .uk-dropdown .uk-navbar-dropdown-nav {
    padding: 15px;
}
.uk-offcanvas-bar ul.sub-menu a,
.uk-offcanvas-bar .uk-navbar-dropdown-nav a,
.uk-offcanvas-bar .uk-accordion-content a {
    font-size: 16px;
    color: var(--kickstarter-dark-blue);
    font-weight: 500;
    padding: 5px 0;
}