/* =============================================
   sticky-navbar.css — Interior Intellect
   Transparent before scroll, colored after.
   Consistent on both desktop and mobile.
   ============================================= */

/* ---------- Base: header fixed to top, starts TRANSPARENT ---------- */
header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: transparent !important;
    box-shadow: none !important;
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

/* ---------- After scroll: solid dark background (SAME on all screen sizes) ---------- */
header.scrolled {
    background: rgba(18, 18, 18, 0.96) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ---------- Body offset so content doesn't hide under fixed header ---------- */
/* Homepage: hero is full-bleed behind the transparent header, no offset needed */
body#homepage {
    padding-top: 0 !important;
}

/* All other pages: push content below the fixed header.
   Info bar (~42px) + logo row (~120px) ≈ 162px */
body:not(#homepage) {
    padding-top: 162px !important;
}

/* ---------- Logo: fill full height of nav row, vertically centered ---------- */
#logo {
    display: flex !important;
    align-items: center !important;
    height: 100%;
}

#logo a {
    display: flex;
    align-items: center;
    height: 100%;
}

#logo img.logo {
    max-height: 100px;
    width: auto;
    display: block;
    object-fit: contain;
    /* smooth resize when window changes */
    transition: max-height 0.3s ease;
}

/* ---------- Footer logo ---------- */
.logo-small {
    max-height: 65px;
    width: auto;
    max-width: 180px;
}

/* =====================================================
   MOBILE  ≤ 992px — same dark theme as desktop
   ===================================================== */
@media only screen and (max-width: 992px) {

    /* Keep transparent theme on mobile — NO white override */
    header,
    header.transparent,
    header.header-bg,
    header.header-light,
    header.header-mobile {
        background: transparent !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none !important;
    }

    /* After scroll on mobile also goes dark — same as desktop */
    header.scrolled {
        background: rgba(18, 18, 18, 0.96) !important;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
    }

    /* Smaller logo on mobile but still vertically centered */
    #logo img.logo {
        max-height: 95px !important;
        margin-left: 8px;
    }

    /* Hamburger button — uniform across all pages */
    #menu-btn {
        display: block !important;
        position: relative;
        float: right;
        margin-top: 12px;
        width: 42px;
        height: 42px;
        padding: 7px;
        text-align: center;
        cursor: pointer;
        z-index: 10000;
        border-radius: 4px;
        transition: background 0.2s;
    }

    /* Icon is light so it shows on the dark/transparent header */
    #menu-btn:before {
        font-family: FontAwesome;
        content: "\f0c9";
        font-size: 26px;
        color: #fff !important;
        display: block;
        line-height: 1.1;
    }

    #menu-btn.clicked:before {
        content: "\f00d";
    }

    #menu-btn:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    /* Compact padding on mobile */
    body:not(#homepage) {
        padding-top: 90px !important;
    }

    /* Hide info bar on mobile to keep header compact */
    header .info {
        display: none;
    }

    /* Opened mobile menu — black background */
    nav,
    #mainmenu,
    .md-flex-col {
        background-color: #000 !important;
    }

    /* Also make the ENTIRE header black when the menu is open */
    header:has(#menu-btn.clicked),
    header:has(#menu-btn.clicked).transparent,
    header:has(#menu-btn.clicked).header-mobile {
        background: #000 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    }

    #mainmenu li a {
        color: #fff !important;
    }

    #mainmenu li a:hover {
        color: #FAB702 !important;
    }

    /* Sub-menu gets a slightly lighter black */
    #mainmenu ul {
        background-color: #111 !important;
    }

    #mainmenu ul li a {
        color: #ccc !important;
    }

    #mainmenu ul li a:hover {
        color: #FAB702 !important;
    }
}