@use '../variables'

.site-branding 
    display: flex
    flex-direction: row
    align-items: baseline
.custom-logo
    width: auto
    max-height: 100px
    padding: 0.5rem
.title-description
    padding-left: 0.5rem
    a
        color: black
        text-decoration: none
header.site-header
    position: relative
    background-color: white
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
    z-index: 2000

.one-nav-container
    display: flex
    flex-direction: row
    align-items: baseline
    justify-content: space-between
.menu-item
    padding: 0 0.25rem

.menu-item a 
    padding: 0 0.25rem
    color: black
    text-decoration: none

ul#primary-menu-list
    position: relative
    width: 100%
    list-style-type: none
    padding: 0

.menu-item
    display: inline

.sub-menu
    min-width: 220px
    text-align: center
    display: none
    overflow: hidden
    position: absolute
    top: 28px
    right: 0
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
    overflow: hidden
    background-color: white
    padding-left: 0
    
    .menu-item
        a
            display: block
.menu-item-has-children
    z-index: 100
    position: relative
    display: inline-flex
    cursor: pointer
    >a
        pointer-events: none
.menu-item-has-children > a::after
  content: "▼"
  padding-left: 3px
  font-size: 12px

.menu-item-has-children:focus-within
    .sub-menu
        display: block
        min-height: auto
        overflow: visible
.sub-menu-active
    display: block
    min-height: auto
    overflow: visible

@media (max-width: 991.98px)
    nav.one-top-nav
        position: fixed
        display: flex
        flex-direction: column
        align-items: center
        right: 0
        width: 0
        height: 100vh
        transition: 0.3s
        overflow-y: scroll
        text-align: center
        background-color: variables.$primary
    ul#primary-menu-list
        padding-top: 2rem
    nav.nav-active, .navigation-list
        width: 100%
    .menu-item
        display: block
        padding: 0.25rem 0
        a
            display: block
            padding: 0.5rem 0
            color: white
    .mobile-btn
        display: block
        cursor: pointer
        z-index: 2001
    .line
        width: 24px
        height: 3px
        background-color: black
        margin: 5px
        transition: 0.3s
    .btn-active .line1
        -webkit-transform: rotate(-45deg) translate(-5px, 6px)
        transform: rotate(-45deg) translate(-5px, 6px)
        background-color: white
    .btn-active .line2
        opacity: 0

    .btn-active .line3
        -webkit-transform: rotate(45deg) translate(-5px, -6px)
        transform: rotate(45deg) translate(-5px, -6px)
        background-color: white
    .sub-menu
        position: static
        box-shadow: none