/* ==========================================================================
   Grace Bhummii - Unified Logo Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mobile & Desktop Header Navigation Bar Logos
   -------------------------------------------------------------------------- */

/* Mobile Header Navigation Logo (< 980px) - Increased logo height to 100px-120px */
@media (max-width: 979px) {
    .header:not(.preloader) .header__logo--mobile .logo-main--mobile,
    .header:not(.preloader) .logo-main--mobile {
        height: 110px !important;
        width: auto !important;
        max-height: 120px !important;
        max-width: 240px !important;
        object-fit: contain !important;
    }
}

/* Desktop Header Navigation Logo (>= 980px) */
@media (min-width: 980px) {
    .header .header__logo .logo-main {
        height: 70px !important;
        width: auto !important;
        max-height: 70px !important;
        max-width: 240px !important;
        object-fit: contain !important;
    }
}

/* Completely hide top header navigation logo while preloader is running to prevent dual-logo overlapping */
.js-preloader[data-preloader-visible="true"] ~ .page-content-wrapper .header__logo--mobile,
.js-preloader[data-preloader-visible="true"] ~ .page-content-wrapper .header__logo,
.preloader:not(.is-hidden) ~ .page-content-wrapper .header__logo--mobile,
.preloader:not(.is-hidden) ~ .page-content-wrapper .header__logo,
html.not-ready .header__logo--mobile,
html.not-ready .header__logo {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   2. Preloader Animation Logo (Centered Dead-Middle of Screen)
   -------------------------------------------------------------------------- */

/* Preloader Mobile Logo (< 980px): Centered in screen, height 148px, max-width 170px */
@media (max-width: 979px) {
    .preloader .header__content,
    .preloader--landing .header__content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 99999 !important;
        pointer-events: none !important;
    }

    .preloader__logo-mobile,
    .preloader--landing .preloader__logo-mobile {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .preloader__logo-mobile__item,
    .preloader--landing .preloader__logo-mobile__item {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .preloader .preloader__logo-mobile__item .logo-main--mobile,
    .preloader--landing .preloader__logo-mobile__item .logo-main--mobile {
        display: block !important;
        height: 148px !important;
        width: auto !important;
        max-height: 148px !important;
        max-width: 170px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }
}

/* Preloader Desktop Logo (>= 980px) */
@media (min-width: 980px) {
    .preloader__logo .logo-main {
        height: 200px !important;
        width: auto !important;
        max-height: 220px !important;
        object-fit: contain !important;
    }
}

/* --------------------------------------------------------------------------
   3. Footer Logo
   -------------------------------------------------------------------------- */
.footer__logo img,
.col-logo img {
    height: 75px !important;
    width: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   4. Scroll / Inquiry Popup Modal Logo
   -------------------------------------------------------------------------- */
.popup-logo {
    height: 60px !important;
    width: auto !important;
    max-height: 60px !important;
    object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   5. Screen Orientation Turn Message / Monogram Logo
   -------------------------------------------------------------------------- */
.turn-message__logo,
.logo-monogram {
    height: 50px !important;
    width: auto !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

/* Container Flex Helpers */
.header__logo, 
.header__logo--mobile, 
.header__logo__inner,
.preloader__logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}