/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

/* Menu Amends */ 

#main-logo {
    display: none;
}

/* Replace top-bar bloginfo text with a logo (and fully hide the text) */
.menu-bloginfo-inner{
  position: relative;
  display: inline-block;
  overflow: hidden;          /* critical: prevents any text bleed */
  text-indent: -9999px;      /* pushes text off-canvas */
  white-space: nowrap;       /* stops wrapping */
  line-height: 0;            /* avoids baseline artefacts */
  width: 300px;              /* adjust */
  height: 80px;              /* adjust */
  background: url('https://yellowpower.com/wp-content/uploads/2026/03/yellow-power-logo-full.svg') no-repeat left center;
  background-size: contain;
}

/* If Uncode adds padding that affects alignment, optional */
.menu-bloginfo-inner { padding: 0 !important; }




/* TOP NAV AMENDS */ 



/* Remove default spacing/behaviour from these custom top menu items */
.yp-projects-navlogo,
.yp-products-navlogo,
.yp-service-navlogo {
    position: relative !important;
    margin: 0 12px 0 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

.yp-projects-navlogo {
    padding-right: 0px;
}

/* Turn the anchor into the clickable logo area */
.yp-projects-navlogo > a,
.yp-products-navlogo > a,
.yp-service-navlogo > a {
    position: relative;
    display: block !important;
    width: 150px;
    height: 28px;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    overflow: hidden;
}

/* Draw the logo with a pseudo element */
.yp-projects-navlogo > a::before,
.yp-products-navlogo > a::before,
.yp-service-navlogo > a::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

/* Individual logo files */
.yp-projects-navlogo > a::before {
    background-image: url('https://yellowpower.com/wp-content/uploads/2026/03/projects-logo.svg');
}

.yp-products-navlogo > a::before {
    background-image: url('https://yellowpower.com/wp-content/uploads/2026/03/products-logo.svg');
}

.yp-service-navlogo > a::before {
    background-image: url('https://yellowpower.com/wp-content/uploads/2026/03/service-logo.svg');
}

/* Remove dropdown arrows/icons */
.yp-projects-navlogo .fa-dropdown,
.yp-products-navlogo .fa-dropdown,
.yp-service-navlogo .fa-dropdown,
.yp-projects-navlogo > a::after,
.yp-products-navlogo > a::after,
.yp-service-navlogo > a::after {
    display: none !important;
    content: none !important;
}

.yp-projects-navlogo > a {
    width: 100px;
}

.yp-products-navlogo > a {
    width: 108px;
}

.yp-service-navlogo > a {
    width: 87px;
}

.navbar-topmenu .top-menu-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.navbar-topmenu .top-menu-inner > li {
    display: block !important;
    flex: 0 0 auto;
}

/* Clean up Projects only */
.yp-projects-navlogo > a {
    text-indent: -9999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    background: none !important;
}

/* Remove any extra icon/pseudo elements on the Projects item */
.yp-projects-navlogo::before,
.yp-projects-navlogo::after,
.yp-projects-navlogo > a::after,
.yp-projects-navlogo i,
.yp-projects-navlogo span {
    display: none !important;
    content: none !important;
}

/* Re-apply only the one logo we want */
.yp-projects-navlogo > a::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    background: url('https://yellowpower.com/wp-content/uploads/2026/03/projects-logo.svg') no-repeat left center !important;
    background-size: contain !important;
}

.yp-projects-navlogo {
    background: none !important;
}

.yp-projects-navlogo * {
    background-image: none !important;
}

.yp-projects-navlogo > a::before {
    background-image: url('https://yellowpower.com/wp-content/uploads/2026/03/projects-logo.svg') !important;
}

/* Make the right topbar area take full available width */
.topbar-col-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.menu-horizontal.top-menu-enhanced-horizontal.top-enhanced-inner.top-enhanced-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
}

.navbar-topmenu {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
}

ul#menu-top-nav {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* Main Nav Positioning */ 

.menu-container {
    margin-top: 20px;
}



@media (max-width: 767px) {

    /* Stack the topbar columns cleanly */
    .top-menu.top-menu-enhanced .row-menu-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Override Uncode's mobile column behaviour */
    .top-menu.top-menu-enhanced .row-menu-inner .topbar-col.topbar-col-left,
    .top-menu.top-menu-enhanced .row-menu-inner .topbar-col.topbar-col-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        white-space: normal !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Main logo first */
    .top-menu.top-menu-enhanced .row-menu-inner .topbar-col.topbar-col-left {
        order: 1 !important;
    }

    /* Division logos underneath */
    .top-menu.top-menu-enhanced .row-menu-inner .topbar-col.topbar-col-right {
        order: 2 !important;
        margin: 10px 0 20px !important;
    }

    /* Main top logo */
    .menu-bloginfo-inner {
        width: 240px !important;
        height: 60px !important;
        margin: 0 auto !important;
        background-position: center center !important;
    }

    /* Keep the nav visible and centred */
    .topbar-col-right .menu-horizontal,
    .topbar-col-right .navbar-topmenu,
    .topbar-col-right .top-enhanced-inner {
        width: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    ul#menu-top-nav,
    .navbar-topmenu .top-menu-inner {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    ul#menu-top-nav > li,
    .navbar-topmenu .top-menu-inner > li,
    .yp-projects-navlogo,
    .yp-products-navlogo,
    .yp-service-navlogo {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile sizes for division logos */
    .yp-projects-navlogo > a {
        width: 92px !important;
        height: 24px !important;
    }

    .yp-products-navlogo > a {
        width: 100px !important;
        height: 24px !important;
    }

    .yp-service-navlogo > a {
        width: 82px !important;
        height: 24px !important;
    }

    /* Remove desktop offset */
    .menu-container {
        margin-top: 0 !important;
    }
    
    .menu-horizontal.top-menu-enhanced-horizontal.top-enhanced-inner.top-enhanced-right {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
    }
    
    /* Remove text logo from the main navbar */
    .main-logo {
        display: none !important;
    }
}

@media (max-width: 767px) {

    /* Centre the container that holds the hamburger */
    .mmb-container {
        width: 100%;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Reset the button positioning */
    .mobile-menu-button {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        margin: 0 auto !important;
        padding: 16px !important;
    }

}

.menu-btn-container.btn {
    background-color: #115a92;
    border: 0px;
    font-size: 16px !important;
    color: #FFFFFF !important;
}