/* ====================================
   Simple Footer Fix
   ==================================== */

/* Hide default Magento footer content */
.footer.content,
.page-footer > .footer.content,
.page-bottom-container,
.page-bottom {
    display: none !important;
}

/* Clean footer spacing */
.page-footer {
    margin-top: 0;
    padding-bottom: 0;
}

.footer-bottom {
    margin-bottom: 0;
    padding-bottom: 15px;
}

/* ====================================
   Search Button - Charcoal Color
   ==================================== */
.block-search .action.search,
.block-search button[type="submit"],
#search_mini_form .actions button,
.header .block-search .action.search {
    background-color: #2C2C2C !important;
    border-color: #2C2C2C !important;
}

.block-search .action.search:hover,
.block-search button[type="submit"]:hover,
#search_mini_form .actions button:hover,
.header .block-search .action.search:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

/* ====================================
   Top Green Bar
   ==================================== */
.page-wrapper::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    background-color: #006a4e;
}

/* ====================================

/* ====================================
   Custom Category Icons
   ==================================== */
.porto-icon-dates:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('/media/wysiwyg/fairway/icons/dates-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ====================================
   Category Menu Icon Alignment Fix
   ==================================== */
.porto-sidemenu .category-item > a,
.porto-sidemenu .ui-menu-item > a {
    display: flex;
    align-items: center;
}

.porto-sidemenu .category-item > a .menu-thumb-icon,
.porto-sidemenu .ui-menu-item > a .menu-thumb-icon,
.porto-sidemenu .category-item > a em,
.porto-sidemenu .ui-menu-item > a em {
    display: inline-flex;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    margin-right: 10px;
    text-align: center;
}

.porto-icon-spices:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('/media/wysiwyg/fairway/icons/spices-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.porto-icon-cake:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('/media/wysiwyg/fairway/icons/cake-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ====================================
   Mobile Navigation - Better Icon & Text Spacing
   ==================================== */
@media (max-width: 991px) {
    /* Main menu item links - use flexbox for proper alignment */
    .nav-sections .navigation li.level0 > a.level-top,
    .nav-sections .navigation li > a,
    .navigation .parent .level-top,
    .nav-sections-item-content .navigation li > a {
        display: flex !important;
        align-items: center;
        gap: 0;
    }
    
    /* Icon container - fixed width column for consistent alignment */
    .nav-sections .navigation li > a > em,
    .nav-sections .navigation li > a > i,
    .nav-sections .navigation li > a > span.menu-thumb-icon,
    .nav-sections .navigation li > a [class^="porto-icon-"],
    .nav-sections .navigation li > a [class*=" porto-icon-"],
    .navigation li.level0 > a.level-top > em,
    .navigation li.level0 > a.level-top > i {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        margin-right: 12px !important;
        font-size: 18px;
        text-align: center;
        flex-shrink: 0;
    }
    
    /* Category name text - takes remaining space */
    .nav-sections .navigation li > a > span:not(.ui-menu-icon):not(.menu-thumb-icon),
    .navigation li.level0 > a.level-top > span:not(.ui-menu-icon) {
        flex: 1;
        padding-right: 30px; /* Space for dropdown arrow */
    }
    
    /* Ensure HOME link aligns with others (no icon) */
    .nav-sections .navigation li.level0:first-child > a.level-top {
        padding-left: 15px;
    }
    
    /* Add left padding to match icon width for items without icons */
    .nav-sections .navigation li.level0 > a.level-top:not(:has(em)):not(:has(i)):not(:has([class^="porto-icon-"])) {
        padding-left: 59px; /* 15px base + 32px icon width + 12px gap */
    }
    
    /* Dropdown arrow positioning */
    .navigation .parent .level-top:after {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%);
    }
    
    /* Increase overall row padding for better touch targets */
    .nav-sections .navigation li.level0 > a.level-top {
        padding: 14px 15px !important;
        min-height: 50px;
    }
    
    /* Submenu items also get better spacing */
    .nav-sections .navigation ul.submenu > li > a {
        padding: 12px 15px 12px 20px !important;
    }
    
    .nav-sections .navigation ul.submenu > li > a:before {
        margin-right: 12px !important;
    }
}

/* ====================================
   Mobile Logo Size Fix
   Porto hardcodes max-height: 50px - no variable available
   ==================================== */
@media (max-width: 991px) {
    .page-header .logo img,
    .header .logo img,
    .logo img {
        max-height: 80px !important;
        height: auto !important;
        width: auto !important;
        max-width: 180px !important;
    }
}