/**************** Header / Footer ******************* *
 *  1. Header
 *      1.1. Navigation
 *      1.2. Offcanvas
 *  2. Footer
*****************************************************/

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

header {
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    background-color: #fff;
    /* 980 = UIkit's navbar-tier z (matches style.css:3659, 4035, 9660). Page
       sections use .uk-position-z-index (z=1), which would otherwise tie with
       the header at z=1 and stack above it in DOM order — making the navbar
       dropdown bleed under the page H1 once it dropped past the header's
       bottom edge. Stays below .uk-modal (z=1010+) so modals still cover. */
    z-index: 980;
    position: relative;
}

/**** 1.1. Navigation ****/
/* Apply navbar + grid flex layouts from CSS so they're correct at first paint.
   UIkit's own .uk-navbar / .uk-grid rules only apply once JS adds those classes
   to elements declared with [uk-navbar] / [uk-grid] attributes. */
[uk-navbar] {
    display: flex;
    position: relative;
}
[uk-grid] {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}
/* Default UIkit grid gutter (24px). Wrapped in :where() so size modifiers
   like .uk-grid-small / .uk-grid-medium win without an !important fight. */
:where([uk-grid]) {
    margin-left: -24px;
}
:where([uk-grid]) > * {
    padding-left: 24px;
}
/* Pre-bake the wrapped-row gap. UIkit's JS adds .uk-grid-margin to items
   that flex-wrap to a new row; .uk-grid-small > .uk-grid-margin then gives
   them margin-top: 15px. Until JS lands (~5300ms on slow-4G), wrapped items
   touch — visible as the hero CTAs "starting together and then separating"
   once UIkit init runs. row-gap on the flex container only spaces between
   rows, never between same-row items, so it's safe at all breakpoints. */
:where([uk-grid]) {
    row-gap: 24px;
}
:where([uk-grid].uk-grid-small) {
    row-gap: 15px;
}
:where([uk-grid].uk-grid-medium) {
    row-gap: 30px;
}
:where([uk-grid].uk-grid-large),
:where([uk-grid].uk-grid-xlarge) {
    row-gap: 40px;
}
/* Once UIkit JS adds .uk-grid-margin to wrapped items, its margin-top stacks
   on top of our row-gap and doubles the spacing. Zero it out so the gap
   stays exactly what row-gap declared (no post-JS shift). Scoped to .uk-grid
   children so it can't accidentally affect a .uk-grid-margin element used
   outside a UIkit grid context. */
.uk-grid > .uk-grid-margin {
    margin-top: 0;
}
/* Hide scrollspy targets until UIkit JS marks them in-view. Without this,
   above-the-fold scrollspy content paints at FCP, gets hidden when JS
   initializes scrollspy, then animates back in. */
[uk-scrollspy]:not(.uk-scrollspy-inview) {
    opacity: 0;
}
/* Hide navbar dropdowns until UIkit JS upgrades them with .uk-drop (which carries
   its own display:none rule). Eliminates the visible-on-first-paint mega menu. */
.uk-navbar-dropdown:not(.uk-drop) {
    display: none;
}
/* Hide modals until UIkit JS upgrades them with .uk-modal (which has its own
   display:none rule). Without this, modal contents (e.g. the 1800x1200 video
   iframe in the hero) render in document flow at first paint, ballooning the
   parent section height and causing the swoosh background to resize when JS
   finally hides them. */
[uk-modal]:not(.uk-modal) {
    display: none;
}
.uk-navbar-nav > li > a,
.uk-navbar-dropdown-nav > li > a {
    font-size: 16px;
    font-weight: 500;
    color: #56565E;
    text-transform: inherit;
    font-family: "Inter", "Inter Fallback", sans-serif;
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-dropdown-nav > li > a:hover {
    color: #E5575B;
}
.uk-navbar-nav .uk-dropdown {
    width: 340px;
    border-radius: 8px;
    /* box-shadow: 0px 19px 25px -19px rgba(0, 0, 0, 0.25); */
    padding: 40px;
    -webkit-filter: drop-shadow(0px 19px 25px -19px rgba(0, 0, 0, 0.25));
    filter        : drop-shadow(0px 19px 25px -19px rgba(0, 0, 0, 0.25));
    -ms-filter    : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#00000040')";
    filter        : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#00000040')";
}
.uk-navbar-nav .uk-dropdown::before {
    position: absolute;
    content: "";
    top: -10px;
    left: 50%;
    right: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    transform: translate(-50%, 0%);
    box-shadow: 0px 19px 25px -19px #00000040;
}
.uk-navbar-dropdown-nav > li > a {
    /* font-size: 22px; */
    margin-bottom: 5px;
}
.uk-navbar-dropdown-nav > li.menu-title > a {
    font-size: 32px;
    font-weight: 600;
    color: #E5575B;
    margin-bottom: 20px;
    pointer-events: none;
    cursor: default;
}
.uk-navbar-toggle {
    min-height: auto;
    border-radius: 4px;
    background: #E5575B;
    color: #fff;
    padding: 10px;
}
.uk-navbar-toggle:focus,
.uk-navbar-toggle:hover {
    color: #fff;
}

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

footer {
    background: #56565E;
    padding: 50px 0;
    position: relative;
}
.footer-menu a {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}
.footer-menu a:hover {
    opacity: .7;
}
footer p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

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

.uk-offcanvas.uk-open > .uk-offcanvas-bar {
    left: 0;
    padding: 0;
    background-color: #fff;
    width: 100%;
}
.offcanvas-hero {
    background: #FFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    padding: 20px;
}
.offcavas-content {
    padding: 30px;
    height: 500px;
}
.offcanvas-nav {
    position: relative;
}
.offcanvas-nav .uk-dropdown {
    /* display: block; */
    width: 100%;
    top: 0 !important;
    box-shadow: none;
    padding: 0;
}
.offcanvas-nav li {
    margin-bottom: 10px;
}
.offcanvas-nav li > a {
    font-size: 24px;
    font-weight: 500;
    color: #56565E;
    position: relative;
}
.offcanvas-nav li > a:hover,
.offcanvas-nav li > a.active-submenu {
    color: #E5575B;
}
.offcanvas-nav li .sub-menu a {
    font-size: 20px;
}
.uk-offcanvas-bar .uk-close {
    border-radius: 4px;
    background: #E5575B;
    color: #fff;
    position: unset;
    padding: 5px 10px;
}
.uk-offcanvas-bar .uk-close:hover {
    color: #fff;
}
#offcanvas .menu-title-back-arrow-wrap > span {
    display: block;
    height: 15px;
    width: 50px;
    cursor: pointer;
}
#offcanvas .parent-lvl1 > li > .sub-menu {
    margin-top: 20px;
    background-color: #fff;
    z-index: 9999999;
    margin-left: 20px;
}
#offcanvas .offcanvas-items > .menu-item-has-children > .sub-menu {
    display: none;
}
#offcanvas .offcanvas-items .menu-item-has-children > a:not(.active-submenu)::after {
    content: "";
    font-weight: normal;
    display: inline-block;
    margin: 0;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: rgb(107, 110, 113);
    position: absolute;
    background: transparent;
    height: 19px;
    width: 11px;
    right: -5px;
    line-height: inherit;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background:url("../../img/menu-arrow.svg") no-repeat;
}
#offcanvas .menu-title-back-arrow-wrap > span::after {
    content: "";
    font-weight: normal;
    display: inline-block;
    margin: 0;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: rgb(107, 110, 113);
    position: absolute;
    background: transparent;
    height: 19px;
    width: 11px;
    line-height: inherit;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    font-size: 18px;
    left: -5px;
    background:url("../../img/menu-back.svg") no-repeat;
}