/* ALL HEADER STYLE */

header#masthead {
    /* padding-inline: clamp(24px, 3.125vw, 80px); */
    padding-inline: var(--side-padding);
    min-width: 100%;
}

header#masthead.fixed {
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transition: transform 0.3s ease-in-out;
    background-color: var(--white);
    padding-block: calc(var(--section-padding) * 0.22);
}

/* Hidden when scrolling down */
header#masthead.up {
    transform: translateY(-100%);
}

/* Visible when scrolling up */
header#masthead.down {
    transform: translateY(0);
}

a#siteLogo svg {
    width: min(100%, 240px);
    height: auto;
    transition: all 200ms ease-in-out;
}

header#masthead.fixed a#siteLogo svg {
    scale: 0.75;
}

a#siteLogo svg path#Union_3 { fill: var(--black); }
a#siteLogo svg path#Union_4 { fill: var(--gold); }

/* LANGUAGE SWITCH */

header#masthead .sitelang a {
    font-size: var(--font-small);
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    padding-bottom: 0;
    border-bottom: 2px solid;
    line-height: 100%;
}

/* MENU */

ul#mainMenu {
    display: inline-flex;
    gap: 22px;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0;
    margin:0;
}

ul#mainMenu li a,
ul#mainMenu li div.menu-parent {
    color: var(--black);
    text-decoration: none;
    font-size: var(--font-smaller);
    font-weight:400;
    padding-block: 8px;
    line-height: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

ul#mainMenu li.button a {
    padding: 14px 24px 12px;
    border:2px solid;
    border-radius: 200px;
    transition: all 200ms ease-in-out;
}
ul#mainMenu li.button a:hover {
    background-color: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

header#masthead .sitelang a {
    color: var(--black);
}

#mainMenu li.menu-item-has-children > a {
  position: relative;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#mainMenu li.menu-item-has-children > a .dropdown-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 0.7em;
  line-height: 1;
  margin-left: 4px;
  color: var(--black);
}

#mainMenu li.menu-item-has-children.open > a .dropdown-arrow {
  transform: rotate(180deg);
}

#mainMenu li.menu-item-has-children > ul.sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

#mainMenu li.menu-item-has-children.open > ul.sub-menu {
  max-height: 1000px;
  opacity: 1;
  pointer-events: auto;
}

/* TOGGLE */

#menuToggle {
    display: none;
}

/* SUBMENUS */
ul#mainMenu li.menu-item-has-children {
    position: relative;
}

ul#mainMenu li.menu-item-has-children > a {
    position: relative;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

ul#mainMenu li.menu-item-has-children > a .dropdown-arrow {
    font-size: 0.7em;
    transition: transform 0.3s ease;
    display: inline-block;
    line-height: 1;
}

ul#mainMenu li.menu-item-has-children.open > a .dropdown-arrow {
    transform: rotate(180deg);
}

ul#mainMenu li.menu-item-has-children > ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 3px;
    border: 1px solid var(--grey-light);
    min-width: 260px;
    z-index: 10;
    padding: calc(var(--section-padding) * 0.1364);
    margin: 6px 0 0 0;
}

ul#mainMenu li.menu-item-has-children.open > ul.sub-menu {
    display: block;
}

ul#mainMenu li.menu-item-has-children > ul.sub-menu > li {
    width: 100%;
    border-radius: 3px;
    list-style: none;
    padding-block: calc((var(--section-padding) * 0.2727) / 2);
    padding-inline: calc(var(--section-padding) * 0.1364);
}

ul#mainMenu li.menu-item-has-children > ul.sub-menu > li:hover {
    background-color: var(--grey-light);
}

@media
(width <= 1280px ) and (orientation: landscape) {
    ul#mainMenu li a,
    ul#mainMenu li div.menu-parent,
    ul#mainMenu li > span {
        font-size: var(--font-small);
    }
}

@media
(width <= 1190px ) and (orientation: landscape) {
    ul#mainMenu { gap:17px; }
    header#masthead:not(.fixed) { padding-top: calc(var(--section-padding) * 0.5455) }
}


@media 
  (width >= 768px) and (width <= 1024px) and (orientation: portrait),
  (width >= 768px) and (width <= 990px),
  (width <= 767px) and (orientation: portrait),
  (width <= 890px) and (height <= 520px) {

    header#masthead {
        padding-top: calc(var(--section-padding) * 0.4091);
    }

    #menuToggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 10px;
        margin-left: 22px;
        z-index: 999;
    }

    #menuToggle span {
        display: block;
        height: 3px;
        background-color: var(--black);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Line lengths */
    #menuToggle span:nth-child(1),
    #menuToggle span:nth-child(3) {
        width: 18px;
    }

    #menuToggle span:nth-child(2) {
        width: 22px;
        align-self: flex-start;
        background-color: var(--gold);
    }

    #menuToggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 10px;
        transition: all 0.3s ease;
        width: 30px;
        height: 30px;
        position: relative;
    }

    #menuToggle span {
        display: block;
        height: 3px;
        background-color: var(--black);
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
        position: absolute;
        left: 0;
    }

    /* Default positions */
    #menuToggle span:nth-child(1) {
        top: 6px;
        width: 22px;
    }
    #menuToggle span:nth-child(2) {
        top: 13.5px;
        width: 22px;
    }
    #menuToggle span:nth-child(3) {
        top: 21px;
        width: 8px;
    }

    /* Transform into "X" when .open */
    #menuToggle.open span:nth-child(1) {
        transform: rotate(45deg);
        top: 13.5px;
        width: 18px;
    }

    #menuToggle.open span:nth-child(2) {
        opacity: 0;
        transform: scale(0);
    }

    #menuToggle.open span:nth-child(3) {
        transform: rotate(-45deg);
        top: 13.5px;
        width: 18px;
    }

    .header-center {
        position: fixed;
        z-index: 100;
        transition: all 200ms ease-out;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100dvh;
        background-color: var(--grey-light)!important;
        padding-right: 0;
        align-items: flex-start;
    }
    .header-center.active {
        left:0;
        z-index: 999;
    }
    ul#mainMenu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap:0;
        padding-left: var(--side-padding);
        padding-top: calc(var(--section-padding) * 2.5);
        overflow-y: scroll;
    }
    ul#mainMenu li {
        padding-inline: 0 var(--side-padding)
    }
    header#masthead ul#mainMenu li a, header#masthead ul#mainMenu li > div.menu-parent, header#masthead ul#mainMenu li.menu-item-has-children > a .dropdown-arrow {
        color: var(--black)!important;
        font-size: var(--font-normal);
        font-weight: 400;
        border: unset;
        padding: 0;
    }
    header#masthead ul#mainMenu li a, header#masthead ul#mainMenu li > div.menu-parent {
        display: flex;
        justify-content: space-between;
    }
    header#masthead ul#mainMenu > li {
        border-bottom: 1px dotted var(--grey-medium);
        width: 100%;
        padding-block:calc(var(--the-gap) * 1.25);
    }
    nav#site-navigation {
        min-width: 100%;
        height: 100dvh;
        overflow: scroll;
    }
    ul#mainMenu li.menu-item-has-children.open > ul.sub-menu {
        position: relative;
        background-color: transparent;
        padding: 0;
        margin-top: var(--the-gap);
        gap: 4px;
        display: flex;
        flex-direction: column;
    }
    ul#mainMenu li.menu-item-has-children.open > ul.sub-menu li {
        padding-inline:calc(24px + var(--the-gap)) 0;
        padding-block: calc(var(--section-padding) * 0.12);
        position: relative;
    }
    ul#mainMenu li.menu-item-has-children.open > ul.sub-menu li::before {
        content: '';
        display: block;
        position: absolute;
        top:26px;
        left: 0;
        width: 24px;
        height: 1px;
        background-color: var(--black);
    }
    ul#mainMenu li.menu-item-has-children.open > ul.sub-menu li a {
        font-weight: 300!important;
    }

}