/*
 * ChangeFluent Academy — site-wide small tweaks.
 *
 * Loaded on every frontend page (not just academy templates) so the
 * mobile menu is visible everywhere on the site, not only on plugin
 * pages.
 *
 * Right now this file only contains the mobile hamburger menu contrast
 * fix. Some Astra header configurations render the toggle icon white
 * against a white background, so the icon is invisible. This forces
 * a visible navy fill on every reasonable selector Astra might use.
 *
 * If more site-wide styling is needed later, add it here — don't clutter
 * landing.css with things that need to render outside academy pages.
 */

/* Only fire below Astra's mobile breakpoint (default 921px). */
@media (max-width: 921px) {

    /* Astra's mobile menu button — the most common markup variants. */
    .ast-mobile-menu-buttons,
    .ast-mobile-menu-buttons .menu-toggle,
    .ast-mobile-menu-buttons button.menu-toggle,
    .ast-mobile-menu-buttons .ast-button-wrap,
    .main-header-menu-toggle,
    .menu-toggle {
        color: #0e2238 !important;
    }

    /* SVG icon (Astra 3.x renders the burger as SVG). */
    .ast-mobile-menu-buttons svg,
    .ast-mobile-menu-buttons svg path,
    .ast-mobile-menu-buttons svg line,
    .ast-button-wrap svg,
    .ast-button-wrap svg path,
    .menu-toggle svg,
    .menu-toggle svg path,
    .menu-toggle svg line {
        color: #0e2238 !important;
        stroke: #0e2238 !important;
        fill: #0e2238 !important;
    }

    /* CSS-drawn burger icon (older Astra / some theme variants). */
    .menu-toggle .menu-toggle-icon::before,
    .menu-toggle .menu-toggle-icon::after,
    .menu-toggle .menu-toggle-icon {
        background-color: #0e2238 !important;
    }

    /* Some Astra builds use a bare button with a ☰ entity or unicode
       character — this covers the text-based case. */
    .menu-toggle,
    .ast-mobile-menu-buttons button {
        text-shadow: none !important;
    }

    /* Focus/hover state should still contrast. */
    .ast-mobile-menu-buttons button:hover svg,
    .ast-mobile-menu-buttons button:focus svg,
    .menu-toggle:hover svg,
    .menu-toggle:focus svg {
        color: #0082ba !important;
        stroke: #0082ba !important;
        fill: #0082ba !important;
    }
}