/*
Theme Name: Mafoil Child V2
Theme URI: http://www.wpbingosite.com/mafoil
Author: wpbingo
Description: Child theme for Mafoil (V2). Same look and features as Mafoil Child, plus a mobile search bar.
Version: 2.0
Author URI: http://wpbingosite.com
Template: mafoil
Text Domain: mafoil-child-v2
*/
/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* =========================================================
   V2: Mobile search
   Adds a search icon inside the mobile header that opens the
   existing full-screen search overlay (the same overlay/AJAX
   search form already used on desktop). Because this button
   lives inside .header-mobile, it only shows when the mobile
   header is visible — no extra media queries needed and no
   impact on the desktop layout.
   ========================================================= */

.bwp-header .header-mobile .header-left {
    display: flex;
    align-items: center;
}

.bwp-header .header-mobile .mobile-search-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--gray-dark, #222);
    line-height: 1;
    position: relative;
    top: 2px;
    -webkit-appearance: none;
    appearance: none;
}

.rtl .bwp-header .header-mobile .mobile-search-open {
    margin-left: 0;
    margin-right: 18px;
}

.bwp-header .header-mobile .mobile-search-open i {
    font-size: calc(var(--font-size-body, 14px) + 6px);
    line-height: 1;
    color: inherit;
}

.bwp-header .header-mobile .mobile-search-open:hover,
.bwp-header .header-mobile .mobile-search-open:focus {
    color: var(--theme-color, inherit);
    outline: none;
}