/*
 * Header menu — the CSS this theme owns for its own markup.
 *
 * Two jobs, both of them consequences of inc/menu/ rendering the menu itself
 * while wp-megamenu's stylesheets were written for wp-megamenu's markup:
 * drawing the icons without Font Awesome, and unhiding the mobile toggle that
 * those stylesheets hide.
 *
 * ===========================================================================
 * 1. The mobile toggle
 * ===========================================================================
 *
 * `wpmm.css` ends with `.wpmm_mobile_menu_btn { display: none !important; }`
 * and relies on the generated skin to turn it back on. The skin's only
 * !important override is `a.wpmm_mobile_menu_btn { display: inline-block
 * !important }` — scoped to an anchor, because wp-megamenu rendered the toggle
 * as `<a class="wpmm_mobile_menu_btn">`.
 *
 * inc/menu/menu-render.php renders a real `<button>` instead (it needs
 * aria-expanded and aria-controls, and it is a control, not a link). A
 * <button> does not match `a.wpmm_mobile_menu_btn`, so the only !important
 * declaration left standing is the `display: none` — and the hamburger has
 * been completely invisible ever since, on every phone.
 *
 * Verified against the live site rather than inferred: every stylesheet the
 * page loads plus its inline <style> blocks were fetched and searched, and
 * those two are the only !important display rules for this element anywhere.
 *
 * The breakpoint is menu.js's `BREAKPOINT = 768`, NOT the skin's
 * `max-width: 1200px`. Below 768 menu.js adds `.wpmm-mobile-menu` and the
 * toggle actually does something; between 769 and 1200 the skin would show a
 * button that menu.js does not consider mobile, so it would toggle nothing.
 */
@media (max-width: 768px) {
    .wp-megamenu-wrap button.wpmm_mobile_menu_btn {
        display: inline-block !important;
    }
}

/*
 * ===========================================================================
 * 2. Icons, drawn in CSS instead of Font Awesome glyphs
 * ===========================================================================
 *
 * inc/menu/menu-render.php emits four Font Awesome 4 classes -- fa-bars
 * (mobile toggle), fa-angle-down (every dropdown/mega caret), fa-search and
 * fa-times (the search overlay). Font Awesome is enqueued ONLY by the
 * wp-megamenu plugin (wpmm_fontawesome_css), and the menu is the only thing in
 * this entire theme that uses an fa-* class -- so deactivating the plugin would
 * turn the hamburger, every caret and both search icons into empty boxes.
 *
 * The markup is deliberately left exactly as it was rather than swapping in
 * inline SVG, because two things outside this file target those class names:
 * assets/js/menu.js keys mobile submenu toggling off `a > b`, and the `super`
 * block theme styles `.supremis-header-wrapper .wpmm_mobile_menu_btn i.fa.fa-bars`
 * when it imports this header onto the subsites. Changing the DOM would break
 * the subsite header from a file in a different theme.
 *
 * Font Awesome's own glyph is explicitly switched off rather than merely
 * overdrawn, so this renders identically whether or not the plugin (and
 * therefore Font Awesome) is still active. That is the whole point: the header
 * has to look the same on both sides of the deactivation, not just afterwards.
 *
 * Everything is scoped to .wp-megamenu-wrap so no other fa-* usage anywhere on
 * the site could be affected if one is ever added.
 */

.wp-megamenu-wrap .fa-bars::before,
.wp-megamenu-wrap .fa-angle-down::before,
.wp-megamenu-wrap .fa-search::before,
.wp-megamenu-wrap .fa-times::before {
    content: none !important;
}

/* ---- Mobile toggle: three bars, morphing to an X ------------------------ */
/*
 * The element itself is the middle bar; ::before and ::after are the outer two.
 * Same construction the `super` theme uses for the imported header, so the two
 * headers read identically.
 *
 * .show-close-icon.menu-active is wp-megamenu's own class pair, toggled by
 * assets/js/menu.js on click -- nothing extra is needed on the JS side.
 */
.wp-megamenu-wrap .wpmm_mobile_menu_btn i.fa.fa-bars {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 2px;
    background: currentColor;
    vertical-align: middle;
    transition: background .2s;
}

.wp-megamenu-wrap .wpmm_mobile_menu_btn i.fa.fa-bars::before,
.wp-megamenu-wrap .wpmm_mobile_menu_btn i.fa.fa-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform .2s, top .2s;
}

.wp-megamenu-wrap .wpmm_mobile_menu_btn i.fa.fa-bars::before { top: -6px; }
.wp-megamenu-wrap .wpmm_mobile_menu_btn i.fa.fa-bars::after  { top: 6px; }

.wp-megamenu-wrap .wpmm_mobile_menu_btn.show-close-icon.menu-active i.fa.fa-bars {
    background: transparent;
}

.wp-megamenu-wrap .wpmm_mobile_menu_btn.show-close-icon.menu-active i.fa.fa-bars::before {
    top: 0;
    transform: rotate(45deg);
}

.wp-megamenu-wrap .wpmm_mobile_menu_btn.show-close-icon.menu-active i.fa.fa-bars::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ---- Dropdown caret ----------------------------------------------------- */
/*
 * Drawn with borders rather than a masked SVG so it inherits the link colour
 * through currentColor -- the generated skin sets a different colour on hover
 * and on the current item, and a background-image could not follow that.
 *
 * The <b> element stays: menu.js treats `a > b` as the mobile submenu toggle.
 *
 * .5em + 2px borders gives a 9px layout box, which is exactly what Font
 * Awesome's fa-angle-down occupies at the menu's 14px font size, so the nav bar
 * does not reflow. The rotation makes the *visual* box 12.7px but transforms do
 * not affect layout — measuring the rotated box and "correcting" it to match is
 * a trap, and it shifted every caret item by 2px. Pinned by tests/menu/.
 */
.wp-megamenu-wrap b.fa-angle-down {
    display: inline-block;
    width: .5em;
    height: .5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.15em) rotate(45deg);
    transition: transform .2s;
}

/* ---- Search open / close ------------------------------------------------ */
/*
 * mask-image rather than background-image, for the same currentColor reason as
 * the caret. The -webkit- prefix is kept for older Safari; a browser with
 * neither shows a filled square, not a blank gap, so the control stays visible
 * and clickable in the worst case.
 */
.wp-megamenu-wrap .fa-search,
.wp-megamenu-wrap .fa-times {
    display: inline-block;
    /* Font Awesome renders these two at 13x14 at the menu's 14px font size;
       matched so swapping them in does not reflow the nav bar. Pinned by
       tests/menu/. */
    width: .93em;
    height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.wp-megamenu-wrap .fa-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' d='M10.5 3a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm5.6 12.9L21 21'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' d='M10.5 3a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm5.6 12.9L21 21'/%3E%3C/svg%3E");
}

.wp-megamenu-wrap .fa-times {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
}