/* =====================================================================
   CD&C  |  Mobile header   (screens up to 992px)
   File: addition/css/cdc-mobile-header.css
   Load LAST - after css/style.css, coloring.css and scheme-01.css
   =====================================================================

   Fixes in this version
   ---------------------
   1. The logo was sitting near the middle of the bar. The theme centres
      it with flex on the COLUMN, not with text-align, so text-align
      alone never moved it. Now the column itself is told to pack its
      contents to the start.
   2. The logo was too small to read. It is bigger, and sized in one
      place so it is easy to change.
   3. The burger is now a proper 44x44 tap target - the size a thumb
      actually needs.
   4. The bar is solid white and stays at the top when you scroll.
   ===================================================================== */

@media only screen and (max-width: 992px) {

    /* ---------- 1. The bar itself ---------- */
    header,
    header.header-light,
    header.header-mobile {
        background: #ffffff !important;
        border-bottom: 1px solid rgba(33, 28, 24, .08);
        box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
    }

    header .container,
    header .de-flex {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* ---------- 2. Row layout: logo + burger on top, menu underneath ---------- */
    header .de-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 68px;
    }

    /* THE IMPORTANT ONE - the column is a flex box, so it needs
       justify-content, not text-align, to move the logo left. */
    header .de-flex > .de-flex-col:first-child {
        order: 1;
        flex: 1 1 auto;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    header .de-flex > .de-flex-col:last-child {
        order: 2;
        flex: 0 0 auto;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
        gap: 10px;
    }

    header .de-flex-col.header-col-mid {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
    }

    /* ---------- 3. Logo - hard left, readable size ---------- */
    header #logo,
    header.header-mobile #logo,
    header.header-light #logo {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        float: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        line-height: 1 !important;
    }

    header #logo a,
    header.header-mobile #logo a {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* only ONE logo image - the theme ships three (main / scroll / mobile) */
    header #logo .logo-scroll,
    header #logo .logo-mobile,
    header.header-mobile #logo .logo-scroll,
    header.header-mobile #logo .logo-mobile {
        display: none !important;
    }

    /* ---- change the logo size here ---- */
    header #logo .logo-main,
    header.header-mobile #logo .logo-main,
    header.header-light #logo .logo-main,
    header.smaller #logo .logo-main {
        display: block !important;
        height: auto !important;
        width: auto !important;
        max-height: 54px !important;
        max-width: 270px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain;
    }

    /* ---------- 4. Burger - real 44x44 tap target ---------- */
    header #menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        float: none !important;
        width: 44px;
        height: 44px;
        margin: 0 -8px 0 8px !important;
        padding: 0 !important;
        border-radius: 9px;
        color: #211c18 !important;
        font-size: 21px;
        line-height: 1;
        background: transparent;
        transition: background .2s ease;
    }

    header #menu-btn:active {
        background: rgba(33, 28, 24, .07);
    }

    /* ---------- 5. Menu - closed unless opened ---------- */
    header #mainmenu {
        display: none !important;
        float: none;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0;
        padding: 6px 0 14px;
        border-top: 1px solid rgba(33, 28, 24, .08);
    }

    header:has(#menu-btn.menu-open) #mainmenu,
    header.cd-menu-open #mainmenu {
        display: block !important;
    }

    /* ---------- 6. Menu items ---------- */
    header #mainmenu li {
        display: block;
        float: none;
        width: 100%;
        margin: 0 !important;
        padding: 0;
        border-bottom: 1px solid rgba(33, 28, 24, .07);
    }

    header #mainmenu > li:last-child {
        border-bottom: 0;
    }

    header #mainmenu > li::before,
    header #mainmenu > li::after,
    header #mainmenu > li.has-child::after {
        content: none !important;
    }

    header #mainmenu li a {
        display: block;
        width: 100%;
        padding: 15px 2px;
        text-align: left;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.4;
        color: #211c18 !important;
    }

    header #mainmenu li a:hover,
    header #mainmenu li a.active {
        color: #8b8f6b !important;
    }

    header #mainmenu a span:not(.badge) {
        display: none;
    }

    /* ---------- 7. Submenus inline ---------- */
    header #mainmenu li ul {
        position: static;
        width: 100%;
        visibility: visible;
        opacity: 1;
        margin: 0;
        padding: 0 0 6px 14px;
        border: 0;
        background: none;
        box-shadow: none;
    }

    header #mainmenu li li a {
        padding: 11px 0;
        border: 0;
        font-size: 15px;
        font-weight: 400;
    }

    /* ---------- 8. No leftover empty space ---------- */
    header .header-col-mid,
    header .de-flex-col {
        height: auto !important;
        min-height: 0 !important;
    }

    /* ---------- 9. Get a Quote button ---------- */
    header .menu_side_area {
        display: flex;
        align-items: center;
    }

    header .menu_side_area .btn-main {
        padding: 10px 17px;
        font-size: 13px;
        white-space: nowrap;
    }
}


/* =====================================================================
   PHONES  -  drop the Get a Quote button, logo + burger only
   ===================================================================== */
@media only screen and (max-width: 575px) {

    /* Get a Quote STAYS on phones - it is the main call to action and
       it is in the reference design. It just gets smaller. */
    header .menu_side_area .btn-main {
        display: inline-flex !important;
        align-items: center;
        padding: 9px 15px !important;
        font-size: 12.5px !important;
        border-radius: 100px !important;
    }

    header .de-flex {
        min-height: 62px;
    }

    header #logo .logo-main {
        max-height: 48px !important;
        max-width: 232px !important;
    }

    header #menu-btn {
        width: 40px;
        height: 40px;
        margin-left: 4px !important;
        font-size: 20px;
    }
}


@media only screen and (max-width: 400px) {

    header .container,
    header .de-flex {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    header #logo .logo-main {
        max-height: 43px !important;
        max-width: 196px !important;
    }

    header .menu_side_area .btn-main {
        padding: 8px 13px !important;
        font-size: 11px !important;
    }
}