/* ==================== HEADER ==================== */
#header {background: white; z-index: 5; position: relative; width: 100%; top: 0;}

#header #brand {height: 4rem; width: 100%; background: #e6e6e6; top: 0; z-index: 3;}
#header #brand .container {display: flex; justify-content: space-between;}
#header #brand .container > div {display: flex;}
#header #brand #search {display: flex; align-items: center;}
#header #brand #search input {width: 30rem; background: white url('../img/search.svg') calc(100% - 0.5rem) center / 1.4rem auto no-repeat; height: 2.25rem; line-height: 2.25rem; padding: 0 1rem; border: 0;}
#header #brand #logo {margin-right: 1.5rem;}
#header #brand #logo img {display: block; height: 2rem; margin: 1rem 0; max-width: initial; width: auto;}
#header #brand #menutoggle {display: none; background: url('../img/menu.svg') center center / 2rem auto no-repeat; border: 0; cursor: pointer; margin-left: -0.25rem; width: 2rem;}
body.mobilemenu #header #brand #menutoggle {background: url('../img/close.svg') center center / 2rem auto no-repeat;}
#header #brand ul {display: flex; align-items: center; }
#header #brand ul li {list-style: none; padding-left: 0.75rem;}
#header #brand ul li a {color: #000; text-decoration: none; position: relative;}
#header #brand ul li a img {width: 2rem; vertical-align: middle;}

#header #nav {background: white; width: 100%; z-index: 2;}
#header #nav > .container > div {border-bottom: 1px solid black; display: flex; justify-content: space-between; gap: 1.5rem;}
#header #nav > .container > div > ul {height: 3rem; display: flex; align-items: center; }
#header #nav > .container > div > ul > li {list-style: none; padding-right: 1.5rem; height: 3rem; line-height: 3rem; position: relative; white-space: nowrap;}
#header #nav > .container > div > ul > li:first-child {padding-right: 1.7rem; }
#header #nav > .container > div > ul:first-of-type > li:first-child { display: none;}
#header #nav > .container > div > ul > li:first-child img {width: 2rem;}
#header #nav > .container > div > ul > li:last-child {padding-right: 0;}
#header #nav > .container > div > ul > li > ul {position: absolute; background: #fff; margin-left: -1rem; border-top: 1px solid black; opacity: 0; pointer-events: none; transition: all 0.2s ease-in-out;}
#header #nav > .container > div > ul > li > ul > li {list-style: none; line-height: 1.2; border: 1px solid black; border-top: 0;}
#header #nav > .container > div > ul > li > ul > li a {color: #000; text-decoration: none; padding: .25rem 1rem; display: block;}
#header #nav > .container > div > ul > li > ul > li a::after { content: ">"; color: #ed1c24; font-size: .8em; display: inline-block; transform: translateY(-.1em); margin-left: .5em; font-weight: 700;}
#header #nav > .container > div > ul > li > div {display: none; position: fixed; left: 0; background: #edf7fa; width: 100%; z-index: 3; top: 7rem; padding: 2rem 0 1rem; line-height: 1.4;}
#header #nav > .container > div > ul > li.hassubnav:hover > div {display: block;}
#header #nav > .container > div > ul > li > div .container {display: flex; flex-wrap: wrap;}
#header #nav > .container > div > ul > li > div .container > div {flex-grow: 1; font-size: 0.9rem; min-width: 15rem;}
#header #nav > .container > div > ul > li > div .container > div h3 {margin-bottom: 0.3rem; color: #00a8e9;}
#header #nav > .container > div > ul > li > div .container > div ul {margin-bottom: 1.5rem;}
#header #nav > .container > div > ul > li.hassubnav:hover::after {content: ""; position: absolute; z-index: 99; width: 0rem; height: 0rem; left: 50%; margin-left: -1.5rem; bottom: 0; border: 0.5rem solid transparent; border-bottom: 0.5rem solid #edf7fa;}
#header #nav > .container > div > ul > li > a {color: #000; text-decoration: none; display: block; font-weight: 400; transition: color 0.15s ease-in-out; position: relative; display: flex; align-items: center; height: 100%;}

@media only screen and (min-width: 1024px) {   
    #header #nav > .container > div > ul > li:not(.active) > a:hover,
    #header #nav > .container > div > ul > li:not(.active):hover > a {color: rgba(0, 0, 0, 0.5);;}
    #header #nav > .container > div > ul > li:hover > ul {opacity: 1; pointer-events: auto;}
    #header #nav > .container > div > ul > li button { display: none; }
}


@media only screen and (max-width: 1024px) {
    html {scroll-padding-top: 0;}
    #header #brand #menutoggle {display: block;}
    #header {position: relative;}
    #header #brand #search {display: none; height: 4.5rem; position: absolute; top: 4rem; width: 100%; z-index: 5; 
        background: #e6e6e6;
        border-top: 1px solid white;
        padding-inline: 1rem;
        margin-inline: -1rem;
    }
    #header #brand #search form, #header #brand #search input {width: 100%;}
    #header #nav {border-bottom: 1px solid black; display: none;}
    #header #subnav {margin-top: 0;}
    #header #nav {position: relative;}
    #header #nav > .container > div {padding-block: 6.5rem 0;}
    #header #nav > .container > div,
    #header #nav > .container > div > ul {flex-direction: column; height: auto; align-items: stretch;}
    #header #nav > .container > div > ul:first-child > li:first-child {display: none;}
    .mobilemenu #header #nav {display: block;}
    .mobilemenu #header #brand #search {display: flex;}
    #header #nav > .container > div {border: 0;}
    #header #nav > .container > ul > li.hassubnav:hover::after {content: none;}
    
    #header #nav > .container > div > ul:last-of-type { margin: 3rem 0 0; padding-bottom: 1rem;}
    #header #nav > .container > div > ul > li { height: auto; display: flex; flex-wrap: wrap; padding: 0; line-height: 2.4rem; }
    #header #nav > .container > div > ul > li button { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: none;  }
    #header #nav > .container > div > ul > li button::before { position: absolute; right: 0; top: .35rem;  content: "+"; border: 1px solid; width: 1.6rem; height: 1.6rem; color: #000; display: grid; place-items: center; line-height: 1.4; font-weight: 400; z-index: 2; }   
    #header #nav > .container > div > ul > li > a { flex: 1; font-weight: 700; font-size: 1.1rem; height: auto;  }
    #header #nav > .container > div > ul > li > ul {  position: relative; opacity: 1;  width: 100%; margin-left: 0;  display: none;  }
    #header #nav > .container > div > ul > li > ul li a  { padding: .5rem .5rem;}

    #header #nav > .container > div > ul > li.open > ul { display: block;  margin-bottom: 2rem ; pointer-events: all;}
    #header #nav > .container > div > ul > li.open > a { font-weight: 700; font-size: 1.1rem;}
    #header #nav > .container > div > ul > li.open button { height: 2.8rem; width: 2.8rem;}
    #header #nav > .container > div > ul > li.open button::before { content: "-";  border: 1px solid transparent;}
    #header #nav > .container > div > ul > li > a::after { content: ">"; color: #ed1c24; font-size: .8em; display: inline-block; transform: translateY(-.1em); margin-left: .5em; font-weight: 700;}

    body.mobilemenu #header ~ * { display: none;}
    body.mobilemenu #header #nav { border-bottom: none;}
    body.mobilemenu #header #nav > .container > div { height: calc(100vh - 4rem); height: calc(100dvh - 4rem); }
}

/* header language/select */
#header select { 
    border: 0; 
    font-family: 'Jost', sans-serif;
    line-height: 1.4; 
    font-weight: 400; 
    color: #000;
    font-size: 0.9rem;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: .9rem;
    background: url('/img/chevron-down-black.svg') 100% 50% / .6rem .6rem no-repeat ;
}


/* ==================== FOOTER ==================== */
#footer {background: #e6e6e6; padding: 2rem 0 1rem; margin-top: 6rem;}
#footer .container {display: flex; gap: 4rem; flex-wrap: wrap; width: 100%; gap: 2rem 10rem;}
#footer .container > div {flex-grow: 1; font-size: 0.9rem; max-width: 22rem; padding-right: 2rem;}
#footer .container > div.menus {display: flex; gap: 0 4rem; max-width: none; justify-content: space-between; flex-wrap: wrap; max-width: 62rem;}
#footer .container > div.menus > div {flex: 1;}
#footer .container > div h3 {margin-block: 0.5rem; padding-top: 0;}
#footer .container > div ul {margin-bottom: 3rem;}
#footer .container > div ul li {list-style: none; line-height: 2;}
#footer .container > div ul li a {color: #000; text-decoration: none;}

#afterfooter {text-align: center; padding-bottom: 3rem; font-size: 0.8rem; color: gray; clear: both;}
#afterfooter .icons {border-bottom: 1px solid rgba(0,0,0,0.15); margin-bottom: 1.3rem;}
#afterfooter .icons img {display: inline-block; vertical-align: middle; margin: 0.8rem; width: auto; max-height: 1.5em; max-width: 4.4em; transition: filter 250ms;}
#afterfooter .icons img:not(:hover) { filter: grayscale(1) contrast(0.4) brightness(1.4);}


@media only screen and (max-width: 600px) {
    #footer .container > div {max-width: none; padding: 0;}
    #footer .container > div.menus > div {min-width: calc(50% - 2rem);}
    #afterfooter .icons br + img { margin-left: 0; }
}