/*
 * Desktop header fixes for theme_new, loaded on every page by ramator-header.php.
 * The menu grouping that makes the row fit is in the same plugin.
 */

@media (min-width: 1199px) {
    /* The Customizer's "2023 facelift" fixes this row at 1314px from 1199px up.
       Any narrower window cut its right end off (header has overflow: hidden). */
    header .upper-nav {
        max-width: 100%;
    }

    /* A menu wider than its column spilled over the logo, half each side. */
    header .nav-desktop > nav.desktop {
        max-width: 100%;
    }
}

/* Touch screens get the theme's own mobile menu, as below 1199px: a tap on
   Yritys follows the link before its dropdown opens (iOS opens it first,
   Android does not), and Ura Ramatorilla is linked from nowhere else. */
@media (min-width: 1199px) and (hover: none) {
    header .upper-nav .nav-desktop {
        display: none;
    }

    header .upper-nav .hamburger-mobile {
        display: flex;
    }
}

/*
 * Dropdowns. The theme styles one only for Tuotteet's mega menu; any other
 * submenu rendered open inside the bar and widened its item. Same trick as the
 * mega menu: absolutely positioned with no offsets, the list stays where it
 * would have been — under the bar, at its item's left edge — but its containing
 * block is the page, so header's overflow: hidden does not clip it.
 */
nav.desktop .lower-nav .menu > li:not(.products) > .sub-menu {
    position: absolute;
    z-index: 15; /* the mega menu's */
    min-width: 22rem;
    padding: 1.2rem 0;
    background: #f1f5f6; /* #megamenu-bg */
    box-shadow: 0 6px 5px 0 rgba(112, 112, 112, .3);
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}

nav.desktop .lower-nav .menu > li:not(.products):hover > .sub-menu,
nav.desktop .lower-nav .menu > li:not(.products):focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
}

nav.desktop .lower-nav .menu > li:not(.products) > .sub-menu a {
    display: block;
    padding: .6rem 2rem;
    white-space: nowrap;
}

/* fa-angle-down, as the theme's script puts on Tuotteet. */
nav.desktop .lower-nav .menu > li.menu-item-has-children:not(.products) > a::after {
    content: "\f107";
    margin-left: 1rem;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}