/*
Theme Name: Oshin Child
Description: Oshin Child Theme
Author: Brand Exponents
Template: oshin
Version: 1.0
*/

@import url("../oshin/style.css");


/*============================================================================
 * Force Desktop Side Menu (Style 7/8) on Mobile Devices
============================================================================*/

@media only screen and (max-width: 960px) {
    .mobile-nav-controller-wrap,
    .mobile-menu-wrap,
    #mobile-menu {
        display: none !important;
    }

    .hamburger-nav-controller-wrap,
    .hamburger-nav-controller {
        display: inline-block !important;
        visibility: visible !important;
    }

    .be-sidemenu {
        display: block !important;
    }
}

.be-sidemenu {
    z-index: 999999 !important;
}

body.side-menu-opened .be-page-stack-wrapper,
body.be-sidemenu-opened .be-page-stack-wrapper {
    z-index: 1;
}


/*============================================================================
 * Cross-Browser Social Icons Footer Fix
 * Solves:
 * 1. Edge wrapping (using max-content)
 * 2. Chrome Mobile invisibility (navbar occlusion via dynamic viewport math)
 * 3. Firefox/Instagram huge gap (dynamic math zeroes out safely)
============================================================================*/

.be-sidemenu .special-header-bottom-text {
    display: block !important;
    position: absolute !important;
    bottom: 30px !important; /* Default anchor */
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 15px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    
    /* Hardware acceleration fix for older WebKit hidden rendering */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Fallback for older touch devices lacking dvh support */
@media only screen and (max-width: 959px) and (pointer: coarse) {
    .be-sidemenu .special-header-bottom-text {
        bottom: 12vh !important; 
    }
}

/* Modern fix: Calculates native UI height (100vh - 100dvh) and adds 30px base padding */
@supports (height: 100dvh) {
    .be-sidemenu .special-header-bottom-text {
        bottom: calc(100vh - 100dvh + 30px) !important;
    }
}

/* Force container strictly to single-line width to prevent Edge dropping elements */
.be-sidemenu .special-header-bottom-text ul {
    display: block !important;
    white-space: nowrap !important;
    width: max-content !important; 
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: center !important;
    visibility: visible !important;
}

.be-sidemenu .special-header-bottom-text ul li {
    display: inline-block !important;
    float: none !important;
    margin: 0 10px !important;
    white-space: nowrap !important;
    visibility: visible !important;
}


/*============================================================================
 * Header Flexbox Layout
 * Prevents menu wrapping, anchors elements to edges, and ensures safe spacing
============================================================================*/

#header-wrap {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* Force Oshine's inner wrappers to expand fully and prevent wrapping */
#header-wrap .wrap,
#header-wrap .clearfix {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    flex-grow: 1 !important;
}

/* Prevent legacy clearfix pseudo-elements from disrupting flex calculations */
#header-wrap .clearfix::before,
#header-wrap .clearfix::after {
    display: none !important;
}

/* Override legacy theme floats */
#header-wrap .logo,
#header-wrap #header-controls-right {
    float: none !important;
}

/* 
 * Logo Container 
 * flex-shrink allows scaling down, padding-right ensures a safe gap 
 * from the hamburger menu, and margin-right pushes adjacent items away.
 */
#header-wrap .logo {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin-right: auto !important; 
    padding-right: 40px !important; 
}

#header-wrap .logo a {
    display: block !important;
    max-width: 100% !important;
}

#header-wrap .logo img {
    max-width: 100% !important;
    height: auto !important;
}

/* 
 * Hamburger Menu Container 
 * flex-shrink: 0 prevents icon distortion during viewport resize.
 */
#header-wrap #header-controls-right {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important; 
}


/*============================================================================
 * Resize logo correctly in small screen
============================================================================*/

@media only screen and (max-width: 767px) {
    
    /* Expand the logo column/container to almost full screen */
    #header .logo-container, 
    #header .logo {
        width: 85% !important;
        max-width: 85% !important;
        flex: 0 0 85% !important;
    }

    /* Ensure the link container has no limits */
    #header .logo a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* Force the image to occupy all available space within the parent */
    #header .logo img.normal-logo,
    #header .logo img {
        width: 100% !important; 
        max-width: 100% !important; 
        height: auto !important;
        max-height: 80px !important; /* Increase this value for the logo to be taller */
        object-fit: contain !important;
        object-position: left center !important;
    }

    /* Reduce the hamburger menu space to make room for the logo */
    #header .mobile-menu-wrapper,
    #header .header-controls-right {
        width: 15% !important;
        flex: 0 0 15% !important;
    }
}


/*============================================================================
 * iOS Hamburger Menu Icon Flickering
============================================================================*/

/*
 * Prevent the parent wrapper from running opacity animations or hiding during 
 * state changes, overriding Oshine's default JS/CSS toggle behaviors.
 */
.hamburger-nav-controller,
.mobile-nav-controller,
.be-mobile-menu-icon {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 
 * Apply smooth transitions strictly to the individual hamburger lines 
 * to handle the morphing into the 'X' state (.is-clicked).
 */
.be-mobile-menu-icon span {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out !important;
}