/**
 * Universal Responsive Styles for Bull Single Product Pages
 * Applies to all bull subcategory individual product templates
 * Version: 1.0
 */

/* ============================================
   1. PRODUCT TITLE - Reduce font size to 2.2rem
   ============================================ */
.single-product .product-title h1,
.single-product .product_title,
.single-product h1.product-title,
.single-product .entry-title,
.single-product.woocommerce div.product .product_title,
.tax-product_cat .single-product h1,
/* Specific selectors for different templates */
.angus-single-product h1,
.charolais-single-product h1,
.hereford-single-product h1,
.murray-grey-single-product h1,
.red-angus-single-product h1,
.simmental-single-product h1,
.south-devon-single-product h1,
.speckle-park-single-product h1,
.wagyu-single-product h1,
.australian-sires-single-product h1,
.international-sires-single-product h1 {
    font-size: 2.2rem !important;
}

/* Mobile responsive for title */
@media (max-width: 768px) {
    .single-product .product-title h1,
    .single-product .product_title,
    .single-product h1.product-title,
    .single-product .entry-title,
    .single-product.woocommerce div.product .product_title {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 480px) {
    .single-product .product-title h1,
    .single-product .product_title,
    .single-product h1.product-title,
    .single-product .entry-title,
    .single-product.woocommerce div.product .product_title {
        font-size: 1.6rem !important;
    }
}

/* ============================================
   2. VIDEO TOGGLE BUTTON - Update styling
   ============================================ */
.video-toggle-button,
.single-product .video-toggle-button,
.btn-video-toggle,
a.video-toggle-button,
button.video-toggle-button {
    padding: 8px 15px !important;
    float: left !important;
    margin-right: 5px !important;
    margin-bottom: 0px !important;
    display: inline-block !important;
    clear: none !important;
}

/* Ensure consistent styling */
.video-toggle-button {
    background-color: #003c71 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.video-toggle-button:hover {
    background-color: #1a5090 !important;
    color: white !important;
    text-decoration: none !important;
}

/* ============================================
   3. EXPLAINER TOOL BUTTON - Update styling
   ============================================ */
.phe-start-tour,
.single-product .phe-start-tour,
button.phe-start-tour,
a.phe-start-tour,
.phe-button.phe-start-tour {
    padding: 9px 15px !important;
    float: right !important;
    margin-left: 0px !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
    clear: none !important;
    font-size: 0.7em !important;
    text-transform: initial !important;
}

/* Ensure consistent styling */
.phe-start-tour {
    background-color: #4CAF50 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.phe-start-tour:hover {
    background-color: #45a049 !important;
    color: white !important;
    text-decoration: none !important;
}

/* ============================================
   4. BUTTON CONTAINER - Ensure buttons stay on same line
   ============================================ */
.button-container,
.product-buttons,
.action-buttons,
.video-and-explainer-buttons {
    display: block !important;
    overflow: hidden !important;
    clear: both !important;
    margin-bottom: 15px !important;
    min-height: 45px !important;
}

/* Create a clearfix for button containers */
.button-container::after,
.product-buttons::after,
.action-buttons::after,
.video-and-explainer-buttons::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================
   5. PRODUCT IMAGE - Add margin-top and float
   ============================================ */
.single-product .product-image,
.single-product .woocommerce-product-gallery,
.single-product .images,
.single-product div.product div.images,
.woocommerce.single-product #product-image,
.product-image-container,
.bull-image,
.product-main-image {
    margin-top:3px !important;
    float: left !important;
    clear: left !important;
}

/* Specific selectors for WooCommerce gallery */
.woocommerce div.product div.images,
.woocommerce-product-gallery {
    margin-top: 10px !important;
    float: left !important;
}

/* ============================================
   6. RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    /* Adjust button styling for tablets */
    .video-toggle-button,
    .phe-start-tour {
        font-size: 0.8em !important;
        padding: 8px 12px !important;
    }
    
    /* On tablets, make explainer button full width */
    .phe-start-tour {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        clear: both !important;
    }
    
    /* Video button also full width on tablets */
    .video-toggle-button {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin-right: 0px !important;
        margin-bottom: 10px !important;
        clear: both !important;
    }
}

@media (max-width: 576px) {
    /* On very small screens, buttons stack */
    .video-toggle-button {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 5px 0 !important;
        text-align: center !important;
    }
    
    /* Explainer button - full width with no left margin */
    .phe-start-tour {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        text-align: center !important;
    }
    
    /* Product image full width on mobile */
    .single-product .product-image,
    .single-product .woocommerce-product-gallery,
    .single-product .images,
    .single-product div.product div.images {
        float: none !important;
        width: 100% !important;
    }
}

/* ============================================
   7. SPECIFIC BULL CATEGORY OVERRIDES
   ============================================ */

/* Beef Sires Categories */
.postid-angus .video-toggle-button,
.postid-charolais .video-toggle-button,
.postid-hereford .video-toggle-button,
.postid-murray-grey .video-toggle-button,
.postid-red-angus .video-toggle-button,
.postid-simmental .video-toggle-button,
.postid-south-devon .video-toggle-button,
.postid-speckle-park .video-toggle-button,
.postid-wagyu .video-toggle-button {
    float: left !important;
    padding: 10px 15px !important;
}

.postid-angus .phe-start-tour,
.postid-charolais .phe-start-tour,
.postid-hereford .phe-start-tour,
.postid-murray-grey .phe-start-tour,
.postid-red-angus .phe-start-tour,
.postid-simmental .phe-start-tour,
.postid-south-devon .phe-start-tour,
.postid-speckle-park .phe-start-tour,
.postid-wagyu .phe-start-tour {
    float: right !important;
    padding: 10px 15px !important;
}

/* Australian Sires Categories */
.term-australian-sires-holsteins .video-toggle-button,
.term-australian-sires-jersey .video-toggle-button,
.term-australian-sires-aussie-red .video-toggle-button,
.term-australian-sires-illawarra .video-toggle-button {
    float: left !important;
    padding: 10px 15px !important;
}

.term-australian-sires-holsteins .phe-start-tour,
.term-australian-sires-jersey .phe-start-tour,
.term-australian-sires-aussie-red .phe-start-tour,
.term-australian-sires-illawarra .phe-start-tour {
    float: right !important;
    padding: 10px 15px !important;
}

/* International Sires Categories */
.term-international-sires-holsteins .video-toggle-button,
.term-international-sires-jersey .video-toggle-button,
.term-international-sires-brown-swiss .video-toggle-button,
.term-international-sires-guernsey .video-toggle-button,
.term-international-sires-ayrshire .video-toggle-button {
    float: left !important;
    padding: 10px 15px !important;
}

.term-international-sires-holsteins .phe-start-tour,
.term-international-sires-jersey .phe-start-tour,
.term-international-sires-brown-swiss .phe-start-tour,
.term-international-sires-guernsey .phe-start-tour,
.term-international-sires-ayrshire .phe-start-tour {
    float: right !important;
    padding: 10px 15px !important;
}

/* ============================================
   8. ENSURE PROPER LAYOUT FLOW
   ============================================ */
.single-product .summary,
.single-product div.product div.summary {
    clear: none !important;
    overflow: visible !important;
}

/* Clear floats after buttons */
.single-product .summary > *:first-child::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================
   9. Z-INDEX MANAGEMENT
   ============================================ */
.video-toggle-button {
    z-index: 10 !important;
}

.phe-start-tour {
    z-index: 10 !important;
}

/* ============================================
   10. ADDITIONAL RESPONSIVE SPECIFICITY
   ============================================ */
/* Ensure full width on mobile for all bull categories - MAXIMUM SPECIFICITY */
@media (max-width: 768px) {
    /* Force explainer button to match video button width */
    .phe-start-tour,
    #phe-start-tour,
    .single-product .phe-start-tour,
    .single-product button.phe-start-tour,
    .single-product a.phe-start-tour,
    .woocommerce.single-product .phe-start-tour,
    body.single-product .phe-start-tour,
    .phe-button.phe-start-tour,
    button[class*="phe-start-tour"],
    a[class*="phe-start-tour"],
    [class*="phe-start-tour"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin: 5px 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        display: block !important;
        float: none !important;
        box-sizing: border-box !important;
        clear: both !important;
        text-align: center !important;
    }
    
    /* Force video button to be full width */
    .video-toggle-button,
    #video-toggle-button,
    .single-product .video-toggle-button,
    .single-product button.video-toggle-button,
    .single-product a.video-toggle-button,
    .woocommerce.single-product .video-toggle-button,
    body.single-product .video-toggle-button,
    button[class*="video-toggle"],
    a[class*="video-toggle"],
    [class*="video-toggle-button"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin: 5px 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        display: block !important;
        float: none !important;
        box-sizing: border-box !important;
        clear: both !important;
        text-align: center !important;
    }
    
    /* Override any inline styles */
    div[style*="margin-left"] .phe-start-tour,
    span[style*="margin-left"] .phe-start-tour {
        margin-left: 0 !important;
    }
}

/* ============================================
   11. ULTIMATE OVERRIDE FOR PHE BUTTON
   ============================================ */
/* Nuclear option - override everything for phe-start-tour on mobile */
@media screen and (max-width: 768px) {
    /* Target any element with phe-start-tour class */
    * [class*="phe-start-tour"],
    *.phe-start-tour,
    #phe-start-tour,
    .phe-start-tour {
        width: 100% !important;
        max-width: none !important;
        min-width: 100% !important;
        margin: 5px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 15px !important;
        display: block !important;
        float: none !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        clear: both !important;
        text-align: center !important;
    }
    
    /* Ensure container doesn't constrain width */
    .button-container .phe-start-tour,
    .product-buttons .phe-start-tour,
    .action-buttons .phe-start-tour,
    div .phe-start-tour {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Even more specific for small mobile */
@media screen and (max-width: 576px) {
    body .phe-start-tour,
    body button.phe-start-tour,
    body a.phe-start-tour {
        width: 100% !important;
        margin: 5px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   12. BODY AND PRODUCT DESCRIPTION FONT SIZE - Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Reduce body font size on mobile */
    body,
    body.single-product,
    body.woocommerce,
    body.woocommerce-page,
    .single-product body,
    .woocommerce body {
        font-size: 1rem !important; /* Reduced from 1.2rem */
    }
    
    /* Also reduce general text elements */
    .single-product p,
    .single-product li,
    .single-product td,
    .single-product th,
    .woocommerce p,
    .woocommerce li,
    .woocommerce td,
    .woocommerce th {
        font-size: 1rem !important;
    }
    
    /* Reduce font size for all breed product descriptions on mobile */
    /* Beef Sires */
    .charolais-product-description .description-content,
    .angus-product-description .description-content,
    .hereford-product-description .description-content,
    .murray-grey-product-description .description-content,
    .red-angus-product-description .description-content,
    .simmental-product-description .description-content,
    .south-devon-product-description .description-content,
    .speckle-park-product-description .description-content,
    .wagyu-product-description .description-content,
    /* Australian Sires Dairy */
    .australian-sires-holsteins-product-description .description-content,
    .australian-sires-jersey-product-description .description-content,
    .australian-sires-aussie-red-product-description .description-content,
    .australian-sires-illawarra-product-description .description-content,
    /* International Sires Dairy */
    .international-sires-holsteins-product-description .description-content,
    .international-sires-jersey-product-description .description-content,
    .international-sires-brown-swiss-product-description .description-content,
    .international-sires-guernsey-product-description .description-content,
    .international-sires-ayrshire-product-description .description-content,
    .international-sires-montbeliarde-product-description .description-content,
    /* Also target generic product description classes */
    .product-description .description-content,
    .single-product .description-content,
    .woocommerce-product-details__short-description,
    .woocommerce-product-details__description,
    /* Target specific breed class patterns */
    [class*="-product-description"] .description-content,
    [class*="product-description"] .description-content {
        font-size: 1rem !important; /* Reduced from 1.2rem */
    }
    
    /* Also reduce related description text elements */
    .product-description p,
    .single-product .product-description p,
    [class*="-product-description"] p,
    .woocommerce-product-details__short-description p {
        font-size: 1rem !important;
    }
}

/* Even smaller font on very small screens */
@media (max-width: 480px) {
    /* Further reduce body font size on small mobile */
    body,
    body.single-product,
    body.woocommerce,
    body.woocommerce-page {
        font-size: 0.95rem !important;
    }
    
    /* Reduce general text elements */
    .single-product p,
    .single-product li,
    .single-product td,
    .single-product th,
    .woocommerce p,
    .woocommerce li,
    .woocommerce td,
    .woocommerce th {
        font-size: 0.95rem !important;
    }
    
    /* Beef Sires */
    .charolais-product-description .description-content,
    .angus-product-description .description-content,
    .hereford-product-description .description-content,
    .murray-grey-product-description .description-content,
    .red-angus-product-description .description-content,
    .simmental-product-description .description-content,
    .south-devon-product-description .description-content,
    .speckle-park-product-description .description-content,
    .wagyu-product-description .description-content,
    /* Australian Sires Dairy */
    .australian-sires-holsteins-product-description .description-content,
    .australian-sires-jersey-product-description .description-content,
    .australian-sires-aussie-red-product-description .description-content,
    .australian-sires-illawarra-product-description .description-content,
    /* International Sires Dairy */
    .international-sires-holsteins-product-description .description-content,
    .international-sires-jersey-product-description .description-content,
    .international-sires-brown-swiss-product-description .description-content,
    .international-sires-guernsey-product-description .description-content,
    .international-sires-ayrshire-product-description .description-content,
    .international-sires-montbeliarde-product-description .description-content,
    .product-description .description-content,
    .single-product .description-content,
    .woocommerce-product-details__short-description,
    .woocommerce-product-details__description,
    [class*="-product-description"] .description-content,
    [class*="product-description"] .description-content,
    .product-description p,
    .single-product .product-description p,
    [class*="-product-description"] p,
    .woocommerce-product-details__short-description p {
        font-size: 0.95rem !important; /* Even smaller for mobile phones */
    }
}

/* ============================================
   13. PRINT STYLES
   ============================================ */
@media print {
    .video-toggle-button,
    .phe-start-tour {
        display: none !important;
    }
}