/* ============================================================================
   Canonical mobile hamburger — single source of truth.
   Matches the homepage rendering exactly and governs every template.
   Do NOT add per-page hamburger overrides; fix here instead.

   Covers both Bootstrap paradigms in use:
     - .navbar-toggler  (Bootstrap 4/5) + <i class="fa fa-bars">
     - .navbar-toggle   (Bootstrap 3)   + <i class="fa fa-bars"> or .icon-bar spans

   Uses !important so it wins regardless of stylesheet load order.
   ========================================================================== */

/* Unscoped on purpose: the chip must be identical for every hamburger regardless
   of how its navbar is nested. Bare + !important beats all the (non-important)
   template-local rules. NOTE: never set `display` here — Bootstrap hides the
   toggler on desktop via its own responsive rule; overriding it makes the
   hamburger show on large screens. The homepage (canonical) centres via
   text-align, not flex. */
.navbar-toggler,
.navbar-toggle {
    background-color: #00aeef !important;   /* canonical blue chip                 */
    border: 1px solid #00aeef !important;
    border-radius: 4px !important;
    padding: 3px 12px !important;           /* symmetric on each axis              */
    text-align: center !important;          /* centre bars horizontally            */
    box-shadow: none !important;
    line-height: 1 !important;
}

/* Resting/toggled chip stays blue on focus (no navy stick after click, no focus
   ring). `:not(:hover)` so hovering a focused button still darkens — otherwise
   this later rule would beat :hover and the button would look dead on hover. */
.navbar-toggler:focus:not(:hover),
.navbar-toggle:focus:not(:hover) {
    background-color: #00aeef !important;
    border-color: #00aeef !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Hover: remove the fill so only the outline (border) remains — the button is
   not a solid colour on hover. Declared last so it wins while hovering. */
.navbar-toggler:hover,
.navbar-toggle:hover {
    background-color: transparent !important;   /* no fill — outline only          */
    border-color: #00aeef !important;           /* blue border                     */
    box-shadow: none !important;
    outline: none !important;
}

/* The bars — always white, consistent size, strong contrast on the navy header. */
.navbar-toggler i.fa-bars,
.navbar-toggle i.fa-bars {
    color: #FFF !important;
    font-size: 20px !important;
    line-height: 1 !important;
    vertical-align: middle !important;      /* optically centre bars vertically */
}

/* Bootstrap 3 span bars (MICMS master) rendered as matching white bars. */
.navbar-toggle .icon-bar {
    background-color: #FFF !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 1px !important;
    display: block !important;
    margin: 4px auto !important;
}