/*
 Theme Name:   Storefront Child
 Theme URI:    https://woocommerce.com
 Description:  Child theme for Storefront.
 Author:       Davythe Dicochea
 Template:     storefront
 Version:      1.0.1
*/

/* Reduce space surrounding the Shop header */
.page-header {
    padding: 1.5em 0; /* Adjust these values to increase/decrease height above/below title */
}

/* Optional: If you also need to shrink the main website header (masthead) */
.site-header {
    padding-top: 2em !important; 
    padding-bottom: 0em !important;
	  margin-bottom: 2em !important;
}

.storefront-breadcrumb {
    margin-bottom: 0em; /* Adjust space between breadcrumb and title */
}

.woocommerce-products-header {
    display: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.site-search .widget_product_search input[type=text], 
.site-search .widget_product_search input[type=search],
.site-search .site-search-field {
    background-color: #ffffff !important;
}
.site-header .site-search form input[type="search"] {
    background-color: #ffffff !important;
}

/* .custom-logo-link::after {
    color: #333;
    content: "Giclée Fine Art Prints";
    display: block;
    font-size: 1rem;
    margin-top: 1rem;
} */

/* Reduce the main footer widget area padding */
.footer-widgets {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}

/* Decrease padding for the bottom info container */
.site-footer {
    padding: 0.5em 0 0.7em !important;
}

/* Reduce copyright/credit info padding */
.site-info {
    padding: 0.5em 0 !important;
}

/* 1. Target the actual structural container for the glass background and rounded corners */
.main-navigation ul ul, 
ul.site-header-cart .widget_shopping_cart {
    background: rgba(255, 255, 255, 0.4) !important; /* Semi-transparent white */
    backdrop-filter: blur(12px) !important; /* Frosted glass effect */
    -webkit-backdrop-filter: blur(12px) !important; /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Soft frosted border */
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08) !important; /* Drop shadow */
    border-radius: 8px !important; /* Forces the rounded corners on the gray menu block */
    overflow: hidden !important; /* Prevents background color from leaking out the edges */
}

/* 2. Completely eliminate the theme's default gray/white backgrounds inside the cart */
ul.site-header-cart .widget_shopping_cart,
.site-header-cart .widget_shopping_cart_content,
.site-header-cart .widget_shopping_cart_content * {
    background: transparent !important; /* Strips all native background colors */
    background-color: transparent !important;
}

/* 3. Style text layers for distinct readability over the transparent blur background */
.site-header-cart .widget_shopping_cart_content .woocommerce-mini-cart-item a,
.site-header-cart .widget_shopping_cart_content .total,
.site-header-cart .widget_shopping_cart_content .total strong {
    color: #333333 !important; /* Changes text color to a sharp dark gray */
}

/* 4. Fix cart buttons so they stand out as solid interactive objects */
.site-header-cart .widget_shopping_cart_content .buttons .button {
    background-color: #333333 !important; /* Solid dark color for main action button */
    color: #ffffff !important; /* Solid white text */
    border-radius: 4px !important;
    padding: 10px 50px !important;
    display: inline-block !important;
}

.site-header-cart .widget_shopping_cart_content .buttons .button.checkout {
    background-color: #0fafdc !important; /* Solid storefront theme signature color for checkout */
}

/* 5. Keep the main navigation menu styling clean */
.main-navigation ul ul li a {
    color: #333333 !important;
}

.main-navigation ul ul li a:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

.site-content, .content-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.site-header-cart .cart-contents::after {
    color: #0fafdc !important;
}

/* Reduce top spacing on both Cart and Checkout pages */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main {
    padding-top: 0em !important;
    margin-top: 0em !important;
}

/* 1. Remove highlight from logo, main navigation links, and cart */
.site-branding a:focus,
.main-navigation a:focus,
.site-header-cart a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 2. Explicitly force the theme accent color onto the search input field */
.site-search input[type="search"]:focus {
    outline: 2px solid var(--accent-color, #f05023) !important;
    box-shadow: 0 0 5px var(--accent-color, rgba(150, 88, 138, 0.5)) !important;
}

/* 1. FORZAR REDUCCIÓN DE ESPACIO DESPUÉS DE CADA ACORDEÓN */
details {
    margin-bottom: 0;
    padding-bottom: 0;
}



/* ==========================================
   ACCORDION CONTENT SPACING
   ========================================== */

details > *:not(summary) {
    margin-top: 0;
    padding-top: 0.5em;
}

/* ==========================================
   GLOBAL SPACING OVERRIDES (DESKTOP & MOBILE)
   ========================================== */

/* 1. Force reset the nested spacing rules generated by the block editor layout engine */
html body .site :where(.is-layout-flow) .wp-block-group, 
html body .site :where(.is-layout-flow) > .wp-block-group {
    margin-block-start: 0px !important;
    margin-block-end: 0px !important;
    margin-top: 0px !important; 
    margin-bottom: 0px !important;
}

/* 2. Override Storefront's parent core layout rules for large block images */
html body .site .hentry .entry-content figure.wp-block-image, 
html body .site .hentry .entry-content figure.wp-block-image.size-large {
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0.4em !important; 
}

/* 3. Force reset the block engine's top margin specifically on spacer blocks */
html body :root :where(.is-layout-flow) > .wp-block-spacer,
html body .site :where(.is-layout-flow) > .wp-block-spacer {
    margin-block-start: 0px !important;
    margin-top: 0px !important; 
}

/* ==========================================
   STOREFRONT CUSTOM COLOR PALETTE (FRONTEND ONLY)
   ========================================== */

/* ==========================================
   BASE / GLOBAL
   ========================================== */

body,
.site {
    background-color: #ffffff;
    color: #6d6d6d;
}

/* Links (global default) */
.site a {
    color: #f05023;
}

.site a:hover {
    color: #333333;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */

.site h1,
.site h2,
.site h3,
.site h4,
.site h5,
.site h6,
.site .site-title a {
    color: #f05023;
}

/* ==========================================
   HEADER
   ========================================== */

.site-header {
    background-color: #f4f4f4;
}

.site-header,
.site-header p,
.site-header .site-description {
    color: #404040;
}

.site-header a,
.main-navigation ul li a,
.site-header-cart .cart-contents {
    color: #333333;
}

/* ==========================================
   HERO SECTION
   ========================================== */

.page-template-template-homepage .storefront-hero-section,
.hero-section,
.hero-section h1,
.hero-section h2,
.hero-section p {
    color: #000000;
}

/* ==========================================
   BUTTONS (WooCommerce + Theme UI only)
   ========================================== */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce .button,
.woocommerce input[type="button"],
.woocommerce input[type="reset"],
.woocommerce input[type="submit"],
.woocommerce .added_to_cart,
.site .wp-block-button__link {
    background-color: #eeeeee;
    color: #333333;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce .button:hover,
.site .wp-block-button__link:hover {
    background-color: #dddddd;
    color: #333333;
}

/* ==========================================
   ALT / ACCENT BUTTONS
   ========================================== */

.site .alt-button,
.site .button.alt,
.woocommerce .button.alt,
.site input[type="submit"].alt,
.site .wp-block-button__link.alt {
    background-color: #0fafdc;
    color: #ffffff;
}

.site .alt-button:hover,
.site .button.alt:hover,
.woocommerce .button.alt:hover,
.site .wp-block-button__link.alt:hover {
    background-color: #0c92ba;
    color: #ffffff;
}

/* ==========================================
   FOOTER
   ========================================== */

.site-footer {
    background-color: #f4f4f4;
    color: #6d6d6d;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title {
    color: #333333;
}

.site-footer a {
    color: #333333;
}

/* ==========================================
   SMART SLIDER PROTECTION
   ========================================== */

#n2-ss-1 a,
#n2-ss-2 a,
#n2-ss-3 a {
    color: #ffffff !important;
}

/* ==========================================
   Breadcrumbs
   ========================================== */
 .woocommerce .woocommerce-breadcrumb {
    color: #6d6d6d;
    font-size: 0.9rem;
    opacity: 0.8;
    letter-spacing: 0.02em;
}

.woocommerce .woocommerce-breadcrumb a {
    color: #333333;
    text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: #f05023;
    text-decoration: underline;
}  

/* ==========================================
   COMPONENT OVERRIDES
   ========================================== */

/* ==========================================
   ACCORDION SPACING
   ========================================== */

.wp-block-accordion-heading__toggle {
    margin-bottom: 0;
    padding-bottom: 0;
}

.wp-block-accordion-heading__toggle-title {
    margin-bottom: 0;
    padding-bottom: 0;
}

.wp-block-accordion-item__content {
    margin-top: 0;
}


/* ==========================================
   ACCORDION COMPONENT
   ========================================== */

button.wp-block-accordion-heading__toggle,
button.wp-block-accordion-heading__toggle:hover,
button.wp-block-accordion-heading__toggle:active,
button.wp-block-accordion-heading__toggle:focus,
button.wp-block-accordion-heading__toggle:focus-visible {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #f05023 !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle:active .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-title {
    color: #f05023 !important;
    text-decoration: none !important;
}

/* ==========================================
   MOBILE CTA SECTION SPACING
   ========================================== */

@media (max-width: 900px) {

    /* Reduce top and bottom breathing room */
    .gallery-cta-section .wp-block-spacer {
        height: 24px !important;
    }

    .gallery-cta-section h2 {
        font-size: 38px !important;
        line-height: 1.1 !important;
    }
    
    .gallery-cta-section {
        background-color: #c3ebf6 !important;
    }
    
    .faq-heading {
        margin-top: 32px !important;
    }

}

/* ==========================================
   MOBILE MENU BUTTON
   ========================================== */

button.menu-toggle,
button.menu-toggle:hover,
button.menu-toggle:focus,
button.menu-toggle:focus-visible,
button.menu-toggle:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {

    button.menu-toggle {
        transform: translateY(-3px) scale(1.15);
        transform-origin: center;
    }

}
/* ==========================================
   MOBILE ACCORDION
   ========================================== */

@media (max-width: 900px) {

    .wp-block-accordion-heading__toggle,
    .wp-block-accordion-heading__toggle-title {
        line-height: 1.25 !important;
    }

    .wp-block-accordion-panel p {
        line-height: 1.35;
    }

}

/* ==========================================
   WOOCOMMERCE SUCCESS MESSAGE
   ========================================== */
.woocommerce-message {
    background-color: #0fafdc !important;
}