/**
 * Homepage Styles
 * These styles are specific to the homepage layout and components
 */

 /* Mobile Spacing Adjustments */
/* ========================================
   CONTENT LAYOUT ENHANCEMENTS
   ======================================== */

/* Hero Gradient Overlay */
.gradient-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%) !important;
    z-index: 1;
    pointer-events: none;
}

.gradient-overlay .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
}

.wp-block-cover .wp-block-cover__background.has-background-dim-0.has-background-dim {
    display: none !important;
}

/* =================================================================
    KRISETTE & CO - FOR PLAY OF HERO VIDEO ON MOBILE
   ================================================================= */

@media (max-width: 768px) {
    .wp-block-cover__video-background {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Static Text Section Spacing */
.coffee-inspired-sustain-crafted-header {
    padding-top: 14rem;
}

.coffee-inspired-sustain-crafted-body-p2 {
    padding-bottom: 12rem;
}


/* Button Fixes for Mobile */
@media (max-width: 768px) {
    .wp-block-buttons .wp-block-button .wp-block-button__link.has-contrast-2-color.has-base-3-background-color {
        white-space: nowrap !important;
        width: auto !important;
    }

    .discover-button {
        width: auto !important;
        border-radius: 60px !important;
        padding-bottom: 0px !important;
        padding-left: 20px !important;
    }

    .our-story-button {
        outline: 1px solid #666 !important;
        width: auto !important;
        border-radius: 60px !important;
    }
}

/* General button outline fix */
.has-contrast-2-color.has-base-3-background-color.has-text-color.has-background.has-link-color.has-medium-font-size.has-custom-font-size.wp-element-button {
    white-space: nowrap !important;
    width: auto !important;
    outline: 1px solid #666 !important;
}

/* Mobile Button Width Fixes */
@media (max-width: 768px) {
    .wp-block-button.has-custom-width.wp-block-button-width-25.homepage-shop-button,
    .wp-block-button__link.has-contrast-2-color.has-base-background-color.has-text-color.has-background.has-link-color.wp-element-button {
        width: 65% !important;
        max-width: 65% !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    .homepage-shop-button .wp-block-button__link {
        width: 100% !important;
        text-align: center !important;
        padding-right: 15px !important;
    }
    
    .wp-block-button.homepage-shop-button {
        width: 65% !important;
        max-width: 65% !important;
    }
}

/* Add right margin to hero text heading */
.wp-block-heading.has-text-align-right.hero-text {
      margin-right: 3rem !important;
}


@media (max-width: 480px) {
    .wp-block-button.has-custom-width.wp-block-button-width-25.homepage-shop-button,
    .wp-block-button__link.has-contrast-2-color.has-base-background-color.has-text-color.has-background.has-link-color.wp-element-button {
        width: 75% !important;
        max-width: 75% !important;
        padding-right: 10px !important;
    }
    
    .wp-block-button.homepage-shop-button {
        width: 85% !important;
        max-width: 85% !important;
        padding-right: 15px !important;
    }
}

/* ========================================
   AWARDS & ACCOLADES SECTION
   ======================================== */

/* Awards section - dark themed full-width section */
.awards-accolades-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    color: #1a2332 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    box-sizing: border-box;
}

/* Enhanced text visibility */
.award-organization {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3) !important;
}

.award-title {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3) !important;
}

.award-year {
    font-size: 0.8rem !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 0.5rem !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure columns have proper spacing */
.award-column {
    text-align: center !important;
    padding: 2rem 1rem !important;
    transition: all 0.4s ease !important;
}

.award-winning-designs-header {
    padding-right: 40px;
    padding-left: 40px;
}

.award-winning-designs-body {
    padding-right: 40px;
    padding-left: 40px;
}

.discover-button {
    padding-right: 40px;
    padding-left: 40px;
}

/* For mobile, make it even smaller */
@media (max-width: 768px) {
    .awards-accolades-section {
        padding: 2rem 1rem !important;
    }
    
    .award-winning-designs-header {
        padding-right: 20px;
        padding-left: 20px;
    }

    .award-winning-designs-body {
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* ========================================
   TESTIMONIALS SECTION
   ======================================== */
.testimonials-section {
    background: var(--warm-white);
    padding: 120px 0;
}

.testimonial-slider {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.testimonial-item {
    background: white;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    position: relative;
}

.testimonial-item::before {
    content: '"';
    font-size: 8rem;
    color: var(--light-coffee);
    position: absolute;
    top: -20px;
    left: 40px;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
}

.testimonial-text {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--charcoal);
    margin-bottom: 30px;
    font-style: italic;
}

.testimonial-author {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-coffee);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================
   HOMEPAGE PRODUCT COLLECTIONS STYLING
   ======================================== */

/* Desktop - maintain centering and 5 columns */
@media (min-width: 769px) {
    .product-collection-homepage .wc-block-product-template__responsive.columns-5,
    .product-collection-homepage .responsive-columns-5 {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 20px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        max-width: 1400px !important;
    }
}

/* Tablet - 3 columns, centered */
@media (max-width: 768px) and (min-width: 481px) {
    .product-collection-homepage .responsive-columns-5 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
    }
}

/* Mobile - 2 columns */
@media (max-width: 480px) {
    .product-collection-homepage .responsive-columns-5 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
    }
}

/* Very small mobile - 1 column */
@media (max-width: 320px) {
    .product-collection-homepage .responsive-columns-5 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Ensure the main container doesn't interfere */
.product-collection-homepage .wc-block-product-template {
    margin: 0 auto !important;
    max-width: 1400px !important;
}

/* Remove any conflicting styles */
.product-collection-homepage {
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* Target individual product blocks */
.product-collection-homepage .wc-block-product {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Specifically target the first product */
.product-collection-homepage .wc-block-product.first {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.product-collection-homepage {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 1400px !important;
}

/* Ensure product titles are visible */
.wp-block-woocommerce-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template h2,
.wp-block-woocommerce-product-template h3,
.wc-block-product .wp-block-post-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    color: #2c2c2c !important;
    margin: 0.6rem 0 0.3rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
}

/* Ensure the link inside the title is visible */
.wp-block-woocommerce-product-template .wp-block-post-title a {
    color: inherit !important;
    text-decoration: none !important;
    display: block !important;
    font-size: 1.2rem !important;
}

/* Hover effect for the title links */
.wp-block-woocommerce-product-template .wp-block-post-title a:hover {
    color: #8b4513 !important;
    opacity: 0.9 !important;
    font-size: 1.2rem !important;
}

/* Homepage Product Prices - WooCommerce Blocks */
.wp-block-woocommerce-product-price {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #8b4513 !important;
    margin: 0.3rem 0 0.5rem !important;
}

/* Price range styling (for variable products) */
.wc-block-components-product-price .wc-block-grid__product-price {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #8b4513 !important;
}

/* Mobile product collection - force single column */
@media (max-width: 768px) {
    /* Target all possible product collection containers */
    .wp-block-woocommerce-product-collection,
    .wp-block-woocommerce-product-collection .wc-block-product-template,
    .wc-block-product-template.responsive-columns-5,
    ul[data-block-name="woocommerce/product-template"],
    .homepage .wc-block-product-template,
    .woocommerce .wc-block-product-template {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        width: 100% !important;
        grid-template-columns: none !important;
    }
    
    /* Force individual products to full width */
    .wc-block-product,
    li.wc-block-product,
    .wp-block-post,
    .wc-block-product-template .wc-block-product,
    .responsive-columns-5 .wc-block-product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 0 2rem 0 !important;
        padding: 0 !important;
    }
    
    /* Product styling */
    .wc-block-product img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        object-fit: cover !important;
        border-radius: 0px !important;
    }
}

/* ========================================
   HOMEPAGE HERO SECTION ENHANCEMENTS
   ======================================== */

/* Hero Text Positioning */
.coffee-inspired-sustain-crafted-header {
    padding-top: 14rem;
}

.coffee-inspired-sustain-crafted-body-p2 {
    padding-bottom: 12rem;
}

/* Mobile adjustments for hero text */
@media (max-width: 768px) {
    .coffee-inspired-sustain-crafted-header {
        padding-top: 4rem !important;
    }
    
    .coffee-inspired-sustain-crafted-body-p2 {
        padding-bottom: 4rem !important;
    }
}

/* ========================================
   HOMEPAGE CTA BUTTON STYLING
   ======================================== */

/* CTA Button Enhancement */
.homepage-shop-button {
    padding-top: 10px!important;
    padding-left: 25px!important;
    padding-right: 25px!important;
    backdrop-filter: blur(2px) !important;
}

/* Mobile button width fixes */
@media (max-width: 768px) {
    .wp-block-button.has-custom-width.wp-block-button-width-25.homepage-shop-button,
    .wp-block-button__link.has-contrast-2-color.has-base-background-color.has-text-color.has-background.has-link-color.wp-element-button {
        width: 65% !important;
        max-width: 65% !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    .homepage-shop-button .wp-block-button__link {
        width: 100% !important;
        text-align: center !important;
        padding-right: 15px !important; 
    }
    
    .wp-block-button.homepage-shop-button {
        width: 65% !important;
        max-width: 65% !important;
    }
}

@media (max-width: 480px) {
    .wp-block-button.has-custom-width.wp-block-button-width-25.homepage-shop-button,
    .wp-block-button__link.has-contrast-2-color.has-base-background-color.has-text-color.has-background.has-link-color.wp-element-button {
        width: 75% !important;
        max-width: 75% !important;
        padding-right: 10px !important;
    }
    
    .wp-block-button.homepage-shop-button {
        width: 85% !important;
        max-width: 85% !important;
        padding-right: 15px!important;
    }
}

/* ========================================
   HOMEPAGE SECTION SPACING
   ======================================== */

.shop-the-collection-header{
    padding-top: 5rem;
    padding-bottom: 3rem;
}

.home-page-product-block{
    padding-top: 8rem;
}

/* ========================================
   FULL WIDTH COVER BLOCK
   ======================================== */

/* Make wp-block-cover extend over inside-article container */
.inside-article .wp-block-cover.alignfull.is-light.push-down.gradient-overlay {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: none !important;
}

/* Ensure it also breaks out of the constrained container */
.inside-article .wp-block-group__inner-container .wp-block-cover.alignfull,
.inside-article .wp-block-group-is-layout-constrained .wp-block-cover.alignfull {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: none !important;
}

/* Remove gaps from the container holding the hero image */
.wp-block-group__inner-container.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Also target the parent wp-block-group if needed */
.wp-block-group.alignwide {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}