/*
Theme Name: Pink Hat Art
Theme URI: https://pinkhatart.com
Author: Pink Hat Art Wizard
Author URI: https://pinkhatart.com
Description: A bespoke Y2K magical theme built specifically for Pink Hat Art.
Version: 1.0
Text Domain: pinkhatart
*/

/* STREAMING_CHUNK:Configuring global reset and body styling */
body {
    background: url('img/starsrbowbg.gif') repeat !important;
    cursor: url('img/cursor.cur'), auto !important;
    font-family: 'Nunito Sans', sans-serif;
    margin: 0;
    padding: 0;
}

/* STREAMING_CHUNK:Styling global links and product titles */
a,
.woocommerce ul.products li.product a h2,
.woocommerce div.product .product_title,
.wc-block-grid__product-title,
.wc-block-components-product-title {
    color: #ec008c !important;
    text-decoration: underline;
}

a:visited {
    color: #c40093 !important;
    text-decoration: underline;
}

a:hover,
a:active,
.woocommerce ul.products li.product a:hover h2,
.woocommerce div.product .product_title:hover,
.wc-block-grid__product-title:hover,
.wc-block-components-product-title:hover {
    color: #ff8400 !important;
    text-decoration: none;
}

/* Override global link colors for the subnav */
.subnav a,
.subnav a:visited {
    color: #272425 !important;
    text-decoration: underline !important;
    font-family: 'Asul', sans-serif !important;
}

.subnav a:hover,
.subnav a:active {
    color: #ff8400 !important;
}

/* STREAMING_CHUNK:Framing WooCommerce product images /
/ This now targets standard grids, single products, AND Gutenberg blocks */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
    background: #ffd1e8 !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    box-shadow: inset #ec008c 0 0 0 5px !important;
    border-radius: 0 !important;
}

/* STREAMING_CHUNK:Spacing out single product gallery images */
.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: 15px !important;
    /* Space between main image and the thumbnails below */
    display: flex !important;
    /* Use flexbox to easily space the thumbnails */
    flex-wrap: wrap !important;
    /* Allow items to wrap if they run out of space */
    gap: 12px !important;
    /* The space between each thumbnail */
}

/* Use calc() to make sure 4 items fit perfectly, accounting for the 3 gaps between them */
.woocommerce div.product div.images .flex-control-thumbs li {
    margin: 0 !important;
    /* Strip default slider margins */
    flex-basis: calc(25% - 9px) !important;
    /* 25% minus a quarter of the total gap space (36px / 4) */
    width: calc(25% - 9px) !important;
}

/* Push the zoom magnifying glass icon slightly inward so it doesn't overlap the border */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    right: 15px !important;
    top: 15px !important;
}

/* STREAMING_CHUNK:Designing WooCommerce Add to Cart buttons */
.woocommerce ul.products li.product .button,
.woocommerce button.button.alt,
.woocommerce div.product form.cart .button,
.add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link {
    background-color: #ec008c !important;
    color: #ffffff !important;
    border: 2px solid #8d6e63 !important;
    border-radius: 12px !important;
    font-family: 'Asul', sans-serif !important;
    padding: 10px 20px !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1) !important;
    text-transform: lowercase !important;
}

/* STREAMING_CHUNK:Applying hover effects to buttons */
.woocommerce ul.products li.product .button:hover,
.woocommerce button.button.alt:hover,
.woocommerce div.product form.cart .button:hover,
.add_to_cart_button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:hover {
    background-color: #ff8400 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* STREAMING_CHUNK:Hiding unwanted default sidebars on WooCommerce pages */
.woocommerce #secondary,
.woocommerce-page #secondary,
.woocommerce .widget-area,
.woocommerce-page .widget-area {
    display: none !important;
}

/* STREAMING_CHUNK:Expanding the main content area to full width */
.woocommerce #primary,
.woocommerce-page #primary,
.woocommerce div.product {
    width: 100% !important;
    float: none !important;
}

/* STREAMING_CHUNK:Mobile Responsiveness */
@media (max-width: 767px) {
    body {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .container {
        padding: 25px !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    .header-top {
        flex-direction: column !important;
        justify-content: center !important;
    }

    .header-left,
    .header-right {
        text-align: center !important;
    }

    .header-left img {
        max-width: 100%;
        height: auto;
    }

    .header-right {
        margin-top: 15px;
    }

    .subnav {
        height: auto !important;
        flex-direction: column !important;
        background-color: #ffffff !important;
    }

    .subnav ul {
        flex-direction: column !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .subnav ul li {
        width: 100%;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e5e5;
        box-sizing: border-box;
    }

    .subnav ul li:last-child {
        border-bottom: none;
    }

    .subnav>div {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        border-top: 1px solid #e5e5e5;
    }
}