/* CSS Document */
/* =========================================================================
   1. HEADER H2 BRAND TEXT SCALING
   ========================================================================= */
header h2,
.site-header h2,
.wp-block-group.site-header h2 {
    font-size: clamp(0.9rem, 1.4vw + 0.4rem, 1.25rem) !important;
    line-height: 1.3 !important;
    white-space: normal !important; 
    display: inline-block !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* =========================================================================
   2. COMPACT RIGHT-ALIGNED MOBILE DROPDOWN NAVIGATION MENU
   ========================================================================= */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;       
    top: 75px !important;             /* Sits cleanly below your rocket header line */
    left: auto !important;            
    right: 15px !important;           /* Snaps menu to the right edge with a clean gap */
    width: 240px !important;          /* Proportional, narrow container width */
    height: min-content !important;   /* Shrink-wraps tightly to your last menu item */
    height: -webkit-min-content !important;
    max-height: 50vh !important;      
    background-color: #ffffff !important; 
    
    /* Crisp dark blue border and subtle drop shadow */
    border: 2px solid #002060 !important; 
    border-radius: 8px !important;    
    box-shadow: 0px 12px 30px rgba(0, 32, 96, 0.15) !important; 
    
    z-index: 9999999 !important;      
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 16px !important;         
    overflow-y: auto !important;
}

/* Strip layout constraints from parent navigation track wrappers */
.wp-block-navigation {
    position: static !important;
}

/* Push navigation list down past the close button area */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    margin-top: 24px !important;     
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;             
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* Format the links inside the mobile menu drawer */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: #000000 !important;   
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
}

/* Anchor close button toggle (X) cleanly in the top-right corner */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 10px !important;            
    right: 14px !important;          
    width: 24px !important;          
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000000 !important;   
    cursor: pointer !important;
}

/* =========================================================================
   3. FORCE SINGLE-COLUMN LAYOUT ON MOBILE FOR MAIN SHOP PAGES
   ========================================================================= */
@media screen and (max-width: 600px) {
    .wc-block-product-template,
    .wp-block-woocommerce-product-collection ul,
    .wp-block-query ul.wc-block-product-template {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Forces 1 product per line width on mobile */
        gap: 32px !important;                 
    }
}



/* =========================================================================
   FORCE HIDE COUNTRY DROPDOWN IN THE MODERN CHECKOUT BLOCK GRID
   ========================================================================= */

/* 1. Broadly target the country selector row component inside the address forms */
.wc-block-checkout__shipping-address .wc-block-components-address-form__country,
.wc-block-checkout__billing-address .wc-block-components-address-form__country,
.wc-block-components-address-form__country {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* 2. Target the generic wrapper grid blocks that contain country selection tags */
.wc-block-checkout [class*="-form__country"],
.wc-block-checkout [class*="country-input"],
div[data-block-name="woocommerce/checkout"] [class*="country"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
} 



/* =========================================================================
   STRETCH INSIDE LINK TO COVER ONLY THE PRODUCT COVER IMAGE
   ========================================================================= */

/* 1. Ensure the cover inner block container acts as the strict layout boundary limit */
.wp-block-cover .wp-block-cover__inner-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* 2. Stretch the blank link to match 100% of the image wrapper area */
a.image-only-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    z-index: 10 !important; /* Layers click zone over spacers and overlays */
}

/* 3. Apply hover animation triggers ONLY to the image area */
.wp-block-cover:has(a.image-only-link) {
    cursor: pointer !important;
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out !important;
}

.wp-block-cover:has(a.image-only-link):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}






/* =========================================================================
   RESERVE FIXED IMAGE ASPECT RATIOS TO ELIMINATE CORE LAYOUT SHIFTS (CLS)
   ========================================================================= */

/* Forces the browser to pre-render the space for your product image grids */
.wp-block-group .wp-block-cover,
.wp-block-cover.is-light {
    aspect-ratio: 1 / 1 !important; /* Forces a perfect square bounding box */
    min-height: 300px !important;    /* Adjust based on your general image height design */
    background-color: #f7f7f7 !important; /* Renders a clean dummy box placeholder while file loads */
}


/* Prevent custom JavaScript injected asterisks from causing layout shifts */
label .custom-checkout-star,
label .custom-global-star {
    position: absolute !important;
    display: inline-block !important;
    margin-left: 4px !important;
    width: 0 !important; /* Keeps the container box from expanding text widths */
    white-space: nowrap !important;
}



/* =========================================================================
   COMPLETELY DISABLE IMAGE ZOOM MAGNIFICATION GLOBALLY
   ========================================================================= */

/* 1. Prevent image containers and individual pictures from expanding on hover */
.wp-block-cover *,
.wp-block-group .wp-block-cover *,
.woocommerce-product-gallery__image img,
.product .wp-block-image img {
    transform: none !important;      /* Kills all hover scale enlargement animations */
    zoom: 1 !important;              /* Blocks legacy browser extension zoom triggers */
    pointer-events: auto !important; /* Keeps standard click routing pathways operational */
}

/* 2. Block native WooCommerce gallery inner zoom popup layouts if active */
.zoo-item-zoom,
.zoomImg {
    display: none !important;        /* Suppresses high-res hover tracking layers cleanly */
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================================================
   FORCE ABOUT PAGE PRODUCT PHOTO (IMAGE-155) TO RENDER UN-CROPPED
   ========================================================================= */

/* 1. Smash the hardcoded square layout constraints on the inner image tag */
img.wp-image-155,
.wp-block-image img.wp-image-155,
figure.wp-block-image img[src*="Three-bottles.jpg"] {
    aspect-ratio: 422 / 474 !important; /* Forces browser to match the true rectangular shape */
    object-fit: contain !important;     /* Fits the entire graphic inside with zero clipping */
    height: auto !important;             /* Allows height to expand smoothly to match true pixels */
    width: 100% !important;              /* Ensures it responds nicely on smaller mobile screens */
}

/* 2. Fix the outer layout figure container block dimensions */
figure.wp-block-image:has(.wp-image-155) {
    max-width: 422px !important;         /* Matches your exact target image file width */
    margin-left: auto !important;
    margin-right: auto !important;
}




/* Suppress native WooCommerce gallery popup markup layers entirely */
.woocommerce-product-gallery__trigger,
.zoomImg,
.pswp {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================================================================
   CLEAN UNIFIED HOVER LIFTS - SHOP COVERS & ABOUT PAGE BLOCKS
   ========================================================================= */
.wp-block-cover:has(a.image-only-link),
.wp-block-group .wp-block-cover {
    cursor: pointer !important;
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out !important;
}

.wp-block-cover:has(a.image-only-link):hover,
.wp-block-group .wp-block-cover:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
}

.wp-block-group .wp-block-paragraph {
    cursor: default !important;
}





/* =========================================================================
   FORCE BLANK SLATE CHECKOUT FORMS WHEN LOCAL PICKUP IS LIVE
   ========================================================================= */

/* Prevents the block engine from injecting ghost warehouse addresses into placeholders */
.wc-block-components-address-form input[value*="RocketRanch"],
.wc-block-components-address-form input[value*="rocketch"] {
    color: transparent !important;
    value: "" !important;
}


/* =========================================================================
   ?? RESPONSIVE COVER BLOCK OVERRIDE FOR MOBILE (FIXES BOTTLE CUTOFFS)
   ========================================================================= */
@media screen and (max-width: 767px) {
    /* 1. Smash the rigid 1/1 square constraint on mobile viewports */
    .wp-block-group .wp-block-cover, 
    .wp-block-cover.is-light,
    div[class*="wp-block-cover"] {
        aspect-ratio: auto !important; /* Allows the box to expand vertically */
        min-height: 380px !important;  /* Gives your bottle full breathing room */
        height: auto !important;
        display: block !important;
    }

    /* 2. Break the background cover crop on the physical image */
    img.wp-block-cover__image-background,
    .wp-block-cover img[data-object-fit="cover"] {
        position: relative !important; /* Pulls image forward out of absolute background layers */
        object-fit: contain !important; /* Forces 100% of the bottle to render without clipping */
        width: 100% !important;
        height: auto !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* 3. Re-stretch your custom overlay links so they match the new adaptive bottle scale */
    .wp-block-cover .wp-block-cover__inner-container,
    a.image-only-link {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}