/**
 * @file
 * header--style--beside.css
 *
 * Footer > Style: Menu Beside Header
 * - 1a: Header First
 * - 2a: Menu
 * - 2b: Header
 *
 * -------------------------------------------------
 * Attached thru `.libraries.yml`
 *
 ============================================================================ */
/* Responsive Menu */
#block-letsgo-main-menu {
    display: none;
}

#block-letsgo-menunavigationresponsive {
    display: block;
    position: static;
}

.mobile-menu__btn{
    width: 48px;
    height: 48px;
    padding: 16px;
    margin: 12px 0;
}

.mobile-menu__btn .btn-bar {
    width: 22px;
    height: 3px;
    margin-bottom: 3px;
    background-color: var(--primary);
}

.header-inner.layout-container {
    position: relative;
}

.mobile-menu__list {
    display: flex;
    position: absolute;
    list-style: none;
    margin: 0;
    background: var(--secondary);
    left: 0;
    top: 100%;
    width: 100vw;
    font: 400 1.5rem/1.25rem "EB Garamond",serif;
    z-index: 10;
    flex-direction: column;
    justify-content: space-around;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in, visibility 0.4s ease-in;
    box-shadow: -2px 3em 10em 2em #000;
}

@media screen and (min-width: 420px) {
    .mobile-menu__list {
        flex-direction: row;    
    }
    
}

.mobile-menu__list li {
    padding: 20px;
    margin: auto;
}

.mobile-menu__list a {
    color: var(--primary);
}

/* Is visible state */
.is-visible {
    opacity: 1;
    visibility: visible;
}

.is-visible a {
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    #block-letsgo-main-menu {
        display: block;
    }

    #block-letsgo-menunavigationresponsive {
        display: none;
    }
}
 
header.header {
  background-color: var(--background-color);
  height: 72px;
}

.header-inner.layout-container {
    padding: 0 20px;
}

#block-letsgo-main-menu a {
  font-family: "EB Garamond", serif;
}

#mlid-about{
  margin: 24px 48px;
}

#block-letsgo-site-branding img{
  padding: 12px 0;
}

@media screen and (min-width: 768px) {
    .header-inner.layout-container {
        padding: 0 64px;
    }
}