/* Keep the expanded main menu usable at intermediate desktop and tablet widths. */
@media (min-width: 1051px) {
    header #nav > ul { margin: 0 -.9rem; }
    header #nav > ul > li { padding: 0 .9rem; }
    header #nav > ul > li > a { font-size: 1.35rem; white-space: nowrap; }
}
@media (max-width: 1050px) {
    header .toggle { display: flex; left: auto; right: 1.5rem; z-index: 12; }
    header nav { justify-content: flex-end; margin-right: 4rem; }
    header #nav { position: fixed; inset: 0; background: #fff4ea; padding: 7rem 3rem 4rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s; overflow-x: hidden; overflow-y: auto; z-index: 10; }
    header #nav.active { opacity: 1; visibility: visible; pointer-events: auto; }
    header #nav > ul { display: block; text-align: center; margin: 0; }
    header #nav > ul > li { padding: .8rem 0; }
    header #nav > ul > li > a { display: inline-block; padding: .5rem; font-size: 1.6rem; line-height: 1.5; }
}
header .toggle:focus-visible, header #nav a:focus-visible { outline: 3px solid #238888; outline-offset: 5px; }

/* The translation widget loads independently and must not resize the menu. */
#google_translate_element {
    position: fixed;
    top: 1.2rem;
    left: 1.2rem;
    right: auto;
    z-index: 100;
    width: 18rem;
    height: 4.2rem;
    box-sizing: border-box;
    margin: 0;
    padding: .8rem 1.2rem;
    overflow: hidden;
    border: 1px solid #e2d5cb;
    border-radius: .8rem;
    background: #fffaf6;
    box-shadow: 0 .2rem 1rem rgba(85, 59, 69, .1);
    color: #553b45;
    font-size: 1.3rem;
}
#google_translate_element .goog-te-gadget { width: 100%; height: 2.4rem; overflow: hidden; }
#google_translate_element select { max-width: 100%; margin: .4rem 0; }
/* Reserve clearance above the logo where the centered header reaches the left edge. */
@media (max-width: 1350px) {
    header { top: 6rem; }
}

/* The homepage has no small header logo, so give its links a centered, wider row. */
@media (min-width: 1051px) {
    header.home-header .contain { max-width: 120rem; padding: 0 3rem; }
    header.home-header nav { justify-content: center; }
    header.home-header #nav { width: 100%; }
    header.home-header #nav > ul { justify-content: center; gap: clamp(2rem, 2.8vw, 4rem); margin: 0; }
    header.home-header #nav > ul > li { padding: 0; }
    header.home-header #nav > ul > li > a { font-size: 1.4rem; }
}