/*
Theme Name:   Storefront Child
Theme URI:    https://petezellershop.com/dev/
Description:  Storefront Child Theme for PLZ Creations
Author:       Pete
Author URI:   https://petezellershop.com
Template:     storefront
Version:      1.0.1 (03-28-26)
Text Domain:  storefront-child
*/

/*--------------------------------------------------------------
# TABLE OF CONTENTS
----------------------------------------------------------------
# Global / General
# Header overrides
# WooCommerce / Shop tweaks
# Footer / Misc
--------------------------------------------------------------*/

/* =============================================
   PLZ Creations Brand Colors - Single Source of Truth
   Change any color here and it updates everywhere in the child theme
   ============================================= */
:root {
    --plz-deep-green: #001c00;      /* Main dark background / button base */
    --plz-darker-green: #052b00;    /* Button hover background */
    --plz-gold: #FCC603;            /* Primary accent (tagline, borders, stock, captions) */
    --plz-bright-yellow: #FFFF44;   /* Hover accent / bright highlights */
    --plz-cream: #FFFFF0;           /* Site title text */
    --plz-stock-green: #28a745;     /* In-stock text */
    --plz-stock-red: #dc3545;       /* Out-of-stock text */
}

/* Force Site Icon to appear as visible image left of title */
.site-branding {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px; /* Space between icon and title */
}

/* Inject and enlarge the Site Icon image */
.site-branding::before {
    content: "";
    display: inline-block;
    width: 150px;      /* Your desired flame size */
    height: 150px;
    background-image: url('https://petezellershop.com/dev/wp-content/uploads/2026/03/cropped-SiteIcon.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Title next to flame */
.site-title {
    margin: 0;
    font-size: 2.2rem;
    color: var(--plz-cream);
    line-height: 1.2;
    white-space: nowrap;
}

.site-title a {
    text-decoration: none;
}

/* Tagline below title */
.site-branding .site-description {
    display: block;
    font-size: 1.1rem;
    color: var(--plz-gold);
    margin-top: 5px;
}

/* Mobile: Stack flame above title */
@media (max-width: 767px) {
    .site-branding {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .site-branding::before {
        width: 100px;
        height: 100px;
    }
    .site-title {
        font-size: 1.8rem;
    }
}

/* Hide the cart subtotal / price amount in header */
.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .woocommerce-Price-amount {
    display: none;
}

/* Hide overflow on product page */
.woocommerce div.product .woocommerce-product-gallery {
    overflow: hidden;
    max-width: 100%;
}

/* Stock quantity on category/shop pages */
.stock-quantity {
    color: var(--plz-gold);
    font-weight: bold; /* Optional: makes it stand out more */
}

/* Button styling - uses brand variables for consistency */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce .added_to_cart {
    border: 1px solid var(--plz-gold);
    border-radius: 12px;
    background-color: var(--plz-deep-green);
    color: var(--plz-gold);           /* Changed from #FDC90f to match brand gold */
    padding: 12px 24px;
    transition: all 0.3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .added_to_cart:hover {
    border-color: var(--plz-bright-yellow);
    background-color: var(--plz-darker-green);
    color: var(--plz-bright-yellow);
}

/* Change enlarged product image background/overlay color */
.pswp__bg {
    background: var(--plz-deep-green); /* Deep green – no !important needed in most cases */
}

/* Hide right sidebar */
.archive.woocommerce,
.tax-product_cat,
.post-type-archive-product {
    .sidebar {
        display: none !important;
    }
    .content-area,
    .site-main {
        width: 100% !important;
    }
}