/*
 * The header menu in collapsed mode (hamburger + panel), and the full desktop
 * nav's spacing.
 *
 * Collapsed mode is the class html.nav-collapsed, set by a script at the top
 * of default-layout.blade.php from a per-locale breakpoint: 1200px, or 1400px
 * for the languages whose labels do not fit on one row in the narrower
 * desktop container. A media query alone could not express that.
 *
 * Why these rules exist at all: the theme (resources/scss/_menu.scss) shows
 * the hamburger up to 1199px but styles the open menu for phones only. Link
 * padding stops at 767px, tablets get a 400px-high box, its >=768px hover
 * rules keep tapped submenus at visibility:hidden, and _header-rtl.scss
 * shrinks the panel to a strip in Arabic. These rules make one panel for
 * every collapsed width. They live here, loaded after app.css, rather than in
 * the theme's Sass because rebuilding app.css locally also changes the
 * Bootstrap build.
 */

.navbar-toggle {
    position: relative;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* An <i>, not the theme's <div> (invalid in a button) or a <span> (the
   theme's X-animation rules target every span in the toggle). */
.navbar-toggle .lines {
    display: block;
    width: 25px;
    font-style: normal;
}

/* The icon is 25x18; widen what a finger can hit to 45x46 without moving it. */
.navbar-toggle::after {
    content: "";
    position: absolute;
    top: 16px;
    right: -10px;
    bottom: -14px;
    left: -10px;
}

.navbar-toggle:focus-visible,
#navigation [role="button"]:focus-visible,
#navigation a:focus-visible {
    outline: 2px solid #0282da;
    outline-offset: 2px;
}

#topnav .navigation-menu > li.navigation-cta {
    display: none;
}

/* A page section wider than a phone used to stretch the mobile layout
   viewport, and the fixed header with it, leaving the menu toggle off-screen
   (Armenian /features put it at x=472 on a 375px screen). Clip instead of
   hidden: hidden on body would break position: sticky. */
html,
body {
    overflow-x: clip;
}

/* ---- Collapsed mode ---------------------------------------------------- */

html.nav-collapsed.nav-open,
html.nav-collapsed.nav-open body {
    overflow: hidden;
}

/* Above page content and the chat launcher while the menu is open. */
html.nav-collapsed.nav-open #topnav {
    z-index: 2147483000;
}

/* A block with the icon's width: inline-block added line-box space below
   it (a 83px header over a panel that starts at 74px), and a block without a
   width collapsed to nothing inside its floated container. */
html.nav-collapsed #topnav .navbar-toggle {
    display: block;
    width: 25px;
}

/* The header's Sign In button moves into the panel. */
html.nav-collapsed #topnav .header-sign-in {
    display: none !important;
}

html.nav-collapsed #topnav #navigation,
html.nav-collapsed[dir="rtl"] #topnav .container #navigation {
    position: fixed;
    top: 74px;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    max-height: none;
    flex: none;
    display: none !important;
    margin: 0;
    padding: 8px 0 calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #fff;
    border-top: 1px solid #e9ecef;
}

html.nav-collapsed #topnav #navigation.open,
html.nav-collapsed[dir="rtl"] #topnav .container #navigation.open {
    display: block !important;
}

html.nav-collapsed #topnav .navigation-menu {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

html.nav-collapsed #topnav .navigation-menu > li,
html.nav-collapsed[dir="rtl"] #topnav .navigation-menu > li,
html.nav-collapsed[dir="rtl"] #topnav .navigation-menu > li.has-submenu {
    position: relative;
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f1f3f5;
}

html.nav-collapsed #topnav .navigation-menu > li > a {
    display: block;
    width: auto;
    min-height: 52px;
    padding: 14px 64px 14px 20px;
    font-size: 16px;
    line-height: 24px;
    color: #3c4858;
}

html.nav-collapsed[dir="rtl"] #topnav .navigation-menu > li > a {
    padding: 14px 20px 14px 64px;
    text-align: right;
}

/* Submenus: tap to expand, never hover. */
html.nav-collapsed #topnav .navigation-menu .submenu {
    display: none !important;
}

/* Display stays out of this rule: after a tap the item counts as :hover,
   and this selector would outrank .open below. */
html.nav-collapsed #topnav .navigation-menu .submenu,
html.nav-collapsed #topnav .navigation-menu > li.has-submenu:hover > .submenu {
    position: static;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0;
    width: auto;
    margin: 0 !important;
    padding: 0 0 8px;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    transform: none;
}

html.nav-collapsed #topnav .navigation-menu .submenu.open {
    display: block !important;
}

html.nav-collapsed #topnav .navigation-menu .submenu li {
    position: relative;
    margin: 0;
}

html.nav-collapsed #topnav .navigation-menu .submenu li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    min-height: 44px;
    padding: 10px 64px 10px 36px;
    font-size: 15px;
    letter-spacing: 0;
    white-space: normal;
}

html.nav-collapsed[dir="rtl"] #topnav .navigation-menu .submenu li > a {
    padding: 10px 36px 10px 64px;
}

html.nav-collapsed #topnav .navigation-menu .submenu .submenu li > a {
    padding-left: 52px;
    font-size: 14px;
    font-weight: 600;
}

html.nav-collapsed[dir="rtl"] #topnav .navigation-menu .submenu .submenu li > a {
    padding-left: 64px;
    padding-right: 52px;
}

html.nav-collapsed #navigation .text-nowrap {
    white-space: normal !important;
}

/* The arrows become 48px tap targets with the chevron drawn inside. */
html.nav-collapsed #topnav .navigation-menu .has-submenu > .menu-arrow,
html.nav-collapsed #topnav .navigation-menu .has-submenu > .submenu-arrow {
    position: absolute;
    top: 2px !important;
    right: 8px;
    left: auto;
    display: block !important;
    width: 48px;
    height: 48px;
    margin: 0;
    border: 0;
    transform: none;
    cursor: pointer;
}

html.nav-collapsed[dir="rtl"] #topnav .navigation-menu .has-submenu > .menu-arrow,
html.nav-collapsed[dir="rtl"] #topnav .navigation-menu .has-submenu > .submenu-arrow {
    right: auto;
    left: 8px;
}

html.nav-collapsed #topnav .navigation-menu .has-submenu > .menu-arrow::after,
html.nav-collapsed #topnav .navigation-menu .has-submenu > .submenu-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -7px 0 0 -4px;
    border: solid #3c4858;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

html.nav-collapsed #topnav .navigation-menu .has-submenu.submenu-open > .menu-arrow::after,
html.nav-collapsed #topnav .navigation-menu .has-submenu.submenu-open > .submenu-arrow::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

html.nav-collapsed #topnav .navigation-menu .item-active-border {
    display: none;
}

html.nav-collapsed #topnav .navigation-menu > li.navigation-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px;
    border-bottom: 0;
}

/* Selectors match the menu-link rule above so these win over it. */
html.nav-collapsed #topnav .navigation-menu > li.navigation-cta > a {
    flex: 1 1 140px;
    min-height: 0;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

html.nav-collapsed #topnav .navigation-menu > li.navigation-cta > .navigation-cta__secondary {
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: #3c4858;
}

html.nav-collapsed #topnav .navigation-menu > li.navigation-cta > .navigation-cta__primary {
    border: 1px solid #0282da;
    background-color: #0282da !important;
    color: #fff !important;
}

/* ---- Full desktop nav --------------------------------------------------- */

/* _header-rtl.scss lays the Arabic header out as a wrapping flex row and
   lets the nav grow to its content width, which pushed the buttons onto a
   second row at every desktop width. Take the space that is left instead. */
html[dir="rtl"]:not(.nav-collapsed) #topnav .container {
    flex-wrap: nowrap;
}

html[dir="rtl"]:not(.nav-collapsed) #topnav .container #navigation {
    flex: 1 1 0;
    min-width: 0;
}

/* custom.css spaces Arabic items with a margin; the theme's LTR padding on
   top of it made each gap twice as wide, and the row wrapped at 1400px. */
html[dir="rtl"]:not(.nav-collapsed) #topnav .navigation-menu > li {
    padding-right: 0;
}

/* 1200-1399px: the desktop container is 1140px wide, so tighten the spacing
   (16px labels, 25-35px after each item in the theme). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    html:not(.nav-collapsed) #topnav .navigation-menu > li {
        padding-right: 14px;
    }

    html:not(.nav-collapsed) #topnav .navigation-menu > li.has-submenu {
        padding-right: 24px;
    }

    html:not(.nav-collapsed) #topnav .navigation-menu > li > a {
        font-size: 14px;
    }

    html[dir="rtl"]:not(.nav-collapsed) #topnav .navigation-menu > li {
        margin-right: 14px;
    }

    html[dir="rtl"]:not(.nav-collapsed) #topnav .navigation-menu > li.has-submenu {
        padding-left: 20px;
    }
}