/*
Theme Name: Livingston Farm 3.0
Template: blockbase
Description: Modern FSE-enabled theme for Livingston Farm, built on Blockbase foundation with custom eCommerce functionality
Author: Livingston Farm Development Team
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: livingston-farm
*/

/*
 * Custom styles for Blockbase Child Theme
 *
 * Note: Most styling should be done through FSE and Global Styles
 * Use this file only for styles that cannot be achieved through the editor
 */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

 /* Show elements on desktop devices */
.no-desktop {
    display: inherit !important;
}

/* Mega Menu Tile Link Styling */
.mega-menu-tile-link {
    display: block;
    position: relative;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
    border-radius: 4px;
    overflow: hidden;
    /* Center content on desktop */
    text-align: center;
    /* Match Mega Menu second level styling */
    font-size: 1.1em;
    color: black;
    padding: 5px 0;
    text-decoration: none;
}

.mega-menu-tile-link:hover {
    background-color: #DDD;
    transform: translateY(-2px);
    color: rgb(85,85,85);
}

.mega-menu-tile-link img {
    transition: opacity 0.3s ease;
    width: 100%;
    height: auto;
    display: block;
}

.mega-menu-tile-link:hover img {
    opacity: 0.8;
}


/* Text elements styling to match Mega Menu */
.mega-menu-tile-link .tile-title,
.mega-menu-tile-link .tile-text {
    font-size: 1.1em;
    color: black;
    padding: 5px 0;
    transition: color 0.3s ease;
}

/* Text hover states */
.mega-menu-tile-link:hover .tile-title,
.mega-menu-tile-link:hover .tile-text {
    color: rgb(85,85,85);
}

/* WooCommerce Product Grid Button Styling */
.product-view-details-button {
    position: relative;
    color: transparent !important;
}

.product-view-details-button::after {
    content: "View Details";
    border-radius: 50px !important;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    transition: background 0.3s ease !important;
}
/* Summer Landscaping Materials page - "Order Now" button text */
.page-id-247 .product-view-details-button::after {
    content: "Order Now";
}
.page-id-247 .product-view-details-button:hover::after {
    content: "Order Now";
}

.product-view-details-button:hover::after {
    content: "View Details";
    border-radius: 50px !important;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #af5d59 !important;
    color: #fff;
    font-weight: 600;
    transition: background 0.3s ease !important;
}

.wp-element-button {
    background: #771714 !important;
    border-radius: 50px !important;
    transition: background 0.3s ease !important;
}
.wp-element-button:hover {
    background: #af5d59 !important;
    transition: background 0.3s ease !important;
}

/* WooCommerce Product Collection - Reduced Column Gaps */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
    gap: 8px !important;
}

.wp-block-woocommerce-product-collection .wc-block-product-template {
    gap: 8px !important;
}

/* Target the flex container for product grids */
.wp-block-woocommerce-product-collection ul.wc-block-product-template,
.wp-block-woocommerce-product-collection .wp-block-post-template {
    gap: 8px !important;
    column-gap: 8px !important;
    row-gap: 16px !important;
}

/* Buildings in Stock Page - Hide Add to Cart Buttons */
.page-id-19884 .add_to_cart_button,
.page-id-19884 .button.product_type_simple,
.page-id-19884 .button.product_type_variable,
.page-id-19884 .ajax_add_to_cart {
    display: none !important;
}

/* Blog Post Cards */
.blog-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.blog-card .wp-block-post-featured-image {
    margin: 0;
}

.blog-card .wp-block-post-featured-image img {
    border-radius: 6px 6px 0 0;
}

.blog-card .wp-block-post-excerpt__excerpt {
    color: #000;
}

.blog-card .wp-block-post-excerpt__more-link {
    font-weight: 700;
}

/* Mobile-only nav items - hidden in desktop mega menu bar */
#mega-menu-wrap-max_mega_menu_1 li.mobile-only-nav {
    display: none !important;
}

/* Mobile Header Logo - hidden on desktop via UAG class */
.mobile-header-logo {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    /* Hide elements on mobile devices */
    .no-mobile {
        display: none !important;
    }

    /* Show mobile-only nav items in hamburger menu */
    #mega-menu-wrap-max_mega_menu_1 li.mobile-only-nav {
        display: list-item !important;
    }

    /* Add space before first mobile-only nav item (after Contact Us) */
    #mega-menu-wrap-max_mega_menu_1 li:not(.mobile-only-nav) + li.mobile-only-nav {
        margin-top: 1.5em;
    }

    /* Mobile mega menu tile adjustments */
    .mega-menu-tile-link {
        text-align: left;
    }
    
    .mega-menu-tile-link img {
        display: none;
    }
    
    .mega-menu-tile-link .tile-title,
    .mega-menu-tile-link .tile-text {
        text-align: left;
        justify-content: flex-start;
        padding: 0;
    }
    
    /* Left-align regular mega menu sub menu items on mobile */
    #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        text-align: left !important;
        justify-content: flex-start !important;
    }
}

/* Financing Banner Styling */
.financing-banner {
    pointer-events: none;
}

.banner-top-left, .banner-bottom-left {
    border-radius: 0 4px 4px 0;
}

.banner-top-right, .banner-bottom-right {
    border-radius: 4px 0 0 4px;
}

.financing-banner-wrapper {
    z-index: 5;
}

.financing-banner::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Fold effect for left-side banners */
.banner-top-left::before, .banner-bottom-left::before {
    top: 100%;
    left: 0;
    border-width: 0 5px 5px 0;
    border-color: transparent rgba(0,0,0,0.5) transparent transparent;
}

/* Fold effect for right-side banners */
.banner-top-right::before, .banner-bottom-right::before {
    top: 100%;
    right: 0;
    border-width: 5px 5px 0 0;
    border-color: rgba(0,0,0,0.5) transparent transparent transparent;
}

/* Ensure WooCommerce blocks don't clip the banner */
.wc-block-grid__product-image, 
.wc-block-components-product-image,
.wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-gallery {
    overflow: visible !important;
}