/**
 * @file
 * Visual styles for Newsplus's primary menu.
 */
.region-navigation {
    clear: both;
}

.region-navigation .menu a {
    display: block;
    text-decoration: none;
}

/* Primary Menu Toggle */
/* Hide the toggle by default. */
.menu-toggle,
.menu-toggle-target {
    display: none;
}

/* Unhide it for the primary menu. */
.region-navigation .menu-toggle-target {
    display: inherit;
    position: fixed;
    top: 0;
}

.region-navigation .menu-toggle {
    display: none;
}

/* A real, tappable button. This was an empty anchor of zero width whose glyph
   was drawn by an absolutely positioned ::after -- so there was no hit area at
   all, and on the sites that use this toggle rather than Superfish's (those
   with a plain menu block in the navigation region) the white glyph sat on the
   white page, because the band around it collapses to 0px whenever the toggle
   is out of flow and the menu is closed. Invisible and untappable together.
   Kept in flow and given real dimensions so both problems go away. */
body:not(:target) .region-navigation .menu-toggle {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    width: 52px;
    height: 52px;
    margin-left: auto;
    text-decoration: none;
    padding: 0;
    z-index: 1000;
}

body:not(:target) .region-navigation .menu-toggle:after {
    content: "\f0c9";
    font-family: "FontAwesome", fantasy;
    font-size: 24px;
    line-height: 1;
    display: inline-block;
    position: static;
}

[dir="rtl"] body:not(:target) .region-navigation .menu-toggle:after {
    right: initial;
    left: 10px;
}

body:not(:target) .region-navigation .menu-toggle-target-show:target ~ .menu-toggle,
body:not(:target) .region-navigation .menu-toggle--hide {
    display: none;
}

body:not(:target) .region-navigation .menu-toggle-target-show:target ~ .menu-toggle--hide {
    display: block;
}

body:not(:target) .region-navigation .menu-item {
    height: 0;
    overflow: hidden;
}

body:not(:target) .region-navigation .menu-toggle-target-show:target ~ .menu .menu-item {
    height: auto;
    overflow: visible;
}

/**
 * Media queries for primary menu.
 */
@media all and (min-width: 992px) {
    .region-navigation .menu-item,
    body:not(:target) .region-navigation .menu-item {
        width: auto;
        height: auto;
        overflow: visible;
    }

    .featured .region-navigation .menu-item a:active,
    .featured .region-navigation .menu-item a.is-active {
    }

    body:not(:target) .region-navigation .menu-toggle {
        display: none;
    }

    /* Expanding the menu at mobile width sets the hash, and the :target
       fallback reveals the close twin (display:block, all widths). Dragging
       back to desktop then left that twin as a stray hamburger below the
       masthead. No toggle should ever show on desktop -- match the reveal
       rule's specificity so this wins over it. */
    body:not(:target) .region-navigation .menu-toggle-target-show:target ~ .menu-toggle--hide {
        display: none;
    }

    /* Dropdown menu */
    #superfish-main li > a > i.fa-angle-down {
        position: relative;
        top: 1px;
        left: 2px;
    }
}

#main-navigation ul.menu li a {
    font-size: 15px;
    line-height: 42px;
    color: #ffffff;
    white-space: nowrap;
}

#pre-header ul.menu li a,
#header-top ul.menu li a {
    font-size: 14px;
    padding: 2vw;
    color: #ffffff;
}

/* color-base.css flips only the BACKGROUND for .light-area (to
   --color-gray-lightest); the white above then sits on a pale bar and the
   links are unreadable -- ~12 luminance difference on solid-light-gray sites.
   Darken the text to match, as the per-site forks did. */
#pre-header.light-area ul.menu li a,
#header-top.light-area ul.menu li a {
    color: var(--color-primary);
}

@media all and (min-width: 992px) {
    /* Give the top-bar links a full-height hover target so the highlight fills
       the bar to the Subscribe button's height rather than hugging the text.
       The CTA keeps its own styling (:not(.header-cta)). The .colgrid is here
       to out-weigh secondary-menu.css's `#pre-header .colgrid ul.menu li a`,
       which loads later and otherwise zeroes the vertical padding on a tie. */
    #pre-header .colgrid ul.menu li a:not(.header-cta),
    #header-top .colgrid ul.menu li a:not(.header-cta) {
        display: flex;
        align-items: center;
        padding-top: 7px;
        padding-bottom: 7px;
        border-radius: 3px;
    }

    /* Coloured bars: the links are white, and menu.css's hover kept them white
       on the fill; give a subtle light fill and hold the text white. */
    #pre-header ul.menu li a:not(.header-cta):hover,
    #pre-header ul.menu li a:not(.header-cta):focus,
    #header-top ul.menu li a:not(.header-cta):hover,
    #header-top ul.menu li a:not(.header-cta):focus {
        background-color: rgba(255, 255, 255, 0.15);
        color: #ffffff;
    }

    /* Light bars: that same white-on-hover was illegible on the pale bar. Keep
       the text dark with a faint dark fill instead. */
    #pre-header.light-area ul.menu li a:not(.header-cta):hover,
    #pre-header.light-area ul.menu li a:not(.header-cta):focus,
    #header-top.light-area ul.menu li a:not(.header-cta):hover,
    #header-top.light-area ul.menu li a:not(.header-cta):focus {
        background-color: rgba(0, 0, 0, 0.06);
        color: var(--color-primary);
    }
}

#main-navigation ul.menu li.expanded > a:before,
#main-navigation ul.menu li.collapsed > a:before,
#pre-header ul.menu li.expanded > a:before,
#pre-header ul.menu li.collapsed > a:before,
#header-top ul.menu li.expanded > a:before,
#header-top ul.menu li.collapsed > a:before {
    content: "";
}

#main-navigation ul.menu li li,
#pre-header ul.menu li li,
#header-top ul.menu li li {
    margin: 0;
}

/* Remove collapsed & expanded menu arrows */
.region-navigation ul.menu li.menu-item--collapsed > a:before,
.region-navigation ul.menu li.menu-item--expanded > a:before {
    content: ""
}

ul.sf-menu .sf-sub-indicator {
    right: 0.5em;
    top: 51%;
}

@media all and (min-width: 992px) {
    /* Pre header, Header & Main navigation menus*/
    #main-navigation ul.menu li,
    #pre-header ul.menu li,
    #header-top ul.menu li {
        display: inline-block;
        float: none;
    }

    /* Top menus. A hair of horizontal margin separates the account-menu items
       (the left/secondary menu keeps margin:0 from its own region rule). */
    #pre-header ul.menu li {
        padding: 0;
        margin: 0 0.1rem;
    }
}

@media all and (min-width: 992px) and (max-width: 1199px) {
    #main-navigation ul.menu li a {
        font-size: 15px;
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media all and (min-width: 992px) {
    #main-navigation ul.menu ul.menu,
    #pre-header ul.menu ul.menu,
    #header-top ul.menu ul.menu {
        display: none;
    }
}