/*
 Theme Name:   Ignavo Child
 Theme URI:    http://klbtheme.com/ignavo/
 Description:  Ignavo Child Theme
 Author:       KlbTheme
 Author URI:   http://themeforest.net/user/KlbTheme
 Template:     ignavo
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  ignavo-child
*/

/* ========================================
   CUSTOM STYLES FOR PIESEPRO.COM
   ======================================== */

/* Align logo to left on mobile devices */
@media (max-width: 1023px) {
    /* Target the logo container column */
    .site-header-inner .column.inline-flex.items-center.justify-center {
        justify-content: flex-start !important;
    }

    /* Ensure the brand itself is also left-aligned */
    .site-header-inner .site-brand {
        margin-left: 0;
        margin-right: auto;
    }

    /* Additional specificity for the logo column */
    .site-header-row.header-main .column:nth-child(2) {
        justify-content: flex-start !important;
    }

    /* Remove gap from header inner on mobile */
    .site-header .site-header-row .site-header-inner {
        gap: 0 !important;
    }
}

/* Ensure logo stays left-aligned on all mobile breakpoints */
@media (max-width: 767px) {
    .site-header-inner .column.inline-flex.items-center {
        justify-content: flex-start !important;
        padding-left: 15px; /* Add some padding for better spacing */
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 575px) {
    .site-header-inner .column.inline-flex.items-center {
        justify-content: flex-start !important;
    }

    .site-brand {
        max-width: 150px; /* Prevent logo from being too large on very small screens */
    }
}

/* ========================================
   FIX: Add to Cart Button Visibility
   ======================================== */

/* Make Add to Cart buttons visible with proper styling */
.product .product-cart-button a.button,
.product .product-cart-button a.add_to_cart_button {
    background-color: rgb(43, 181, 249) !important; /* Primary theme color */
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.product .product-cart-button a.button:hover,
.product .product-cart-button a.add_to_cart_button:hover {
    background-color: rgb(30, 160, 225) !important; /* Darker on hover */
    transform: translateY(-1px);
}

/* SVG icon styling */
.product .product-cart-button a.button svg,
.product .product-cart-button a.add_to_cart_button svg {
    stroke: #ffffff !important;
    width: 18px;
    height: 18px;
}

/* Ensure text is visible */
.product .product-cart-button a.button,
.product .product-cart-button a.add_to_cart_button {
    text-decoration: none;
}

/* ========================================
   Sticky Header: Show Dark Logo
   ======================================== */

/* When header becomes sticky, switch to dark logo */
.site-header.sticky-header .site-brand .dark-logo {
    display: block !important;
}

.site-header.sticky-header .site-brand .light-logo {
    display: none !important;
}

/* Give sticky header a light background so dark logo is visible */
.site-header.sticky-header .header-main {
    --header-row-background: rgb(255, 255, 255) !important;
    --header-row-foreground: rgb(17, 24, 39) !important;
    --header-row-border: rgb(229, 231, 235) !important;
    background-color: rgb(255, 255, 255) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Update action button colors for light sticky header */
.site-header.sticky-header .header-main .site-action-button {
    --action-icon-color: rgb(17, 24, 39) !important;
    --action-icon-background-color: rgb(243, 244, 246) !important;
    --action-detail-color: rgb(17, 24, 39) !important;
}

/* Update search and menu text colors */
.site-header.sticky-header .header-main,
.site-header.sticky-header .header-main a,
.site-header.sticky-header .header-main .site-action-button {
    color: rgb(17, 24, 39) !important;
}

/* ========================================
   FIX: Hero Slider Button Visibility
   ======================================== */

/* Hero slider buttons - ensure visibility */
.site-banner .button.variant-primary,
.site-home-slider .button.variant-primary,
.ignavo-home-slider .button.variant-primary,
.site-banner-footer .button.variant-primary {
    --colors-primary-foreground: 255, 255, 255 !important;
    --colors-primary-background: 0, 103, 178 !important;
    background-color: #0067b2 !important;
    color: #ffffff !important;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(0, 103, 178, 0.4);
}

.site-banner .button.variant-primary:hover,
.site-home-slider .button.variant-primary:hover,
.ignavo-home-slider .button.variant-primary:hover,
.site-banner-footer .button.variant-primary:hover {
    background-color: #005a9e !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 103, 178, 0.5);
}

/* Alternative: Force button visibility using attribute selector */
a.button[href*="shop"] {
    background-color: #0067b2 !important;
    color: #ffffff !important;
}

/* Ensure banner box buttons are visible */
.ignavo-banner-box .button,
.site-banner-box .button {
    background-color: #0067b2 !important;
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 6px;
}