/**
 * CSS fixes for D11 upgrade issues
 */

/* Fix for Bootstrap 3 to 5 responsive utility classes */
.hidden-xs {
    display: block !important;
}

@media (max-width: 575.98px) {
    .hidden-xs {
        display: none !important;
    }
}

.visible-xs-block {
    display: none !important;
}

@media (max-width: 575.98px) {
    .visible-xs-block {
        display: block !important;
    }
}

/* Fix for hero image background - target the specific block */
#block-dtchomepagehero .hero-image-background {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 500px !important; /* Ensure it has height */
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
}

/* Ensure the jumbotron container has relative positioning */
#block-dtchomepagehero .jumbotron {
    position: relative !important;
    min-height: 500px !important;
    overflow: hidden !important; /* Prevent horizontal scroll */
}

/* Fix horizontal scroll issue on body */
body {
    overflow-x: hidden !important;
}

/* Ensure main container doesn't cause overflow */
#main-container {
    overflow-x: hidden !important;
}

/* Ensure container-fluid doesn't cause overflow */
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: hidden;
}

/* Fix hero blocks to prevent overflow */
[id^="block-dtc"][class*="hero"],
[id^="block-hcp"][class*="hero"] {
    overflow: hidden !important;
}

/* Ensure content appears above background */
#block-dtchomepagehero .centered {
    position: relative !important;
    z-index: 2 !important;
}

/* Specific fix for the tennis ball image */
.hero-image-background[style*="teenage-girl-serving-tennis-ball-cropped-left-desktop"] {
    background-image: url("/content/images/teenage-girl-serving-tennis-ball-cropped-left-desktop.jpg") !important;
}

.hero-image-background[style*="teenage-girl-serving-tennis-ball-cropped-1-mobile"] {
    background-image: url("/content/images/teenage-girl-serving-tennis-ball-cropped-1-mobile.jpg") !important;
}

/* General fix for background images with space after url( */
[style*="url( /content/"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Fix double class attribute issue for hero blocks site-wide */
[id^="block-"][class*="block-content-hero_banner"] {
    /* This ensures the hero-image class behaviors are applied even with invalid HTML */
    display: block !important;
}

/* FORCE modal visibility with proper centering */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1050 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* FORCE backdrop visibility */
.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1040 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    display: block !important;
    visibility: visible !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
}

/* FORCE modal dialog visibility and centering */
.modal-dialog {
    position: relative !important;
    margin: 0 !important;
    max-width: 600px !important;
    width: 90% !important;
    display: block !important;
    visibility: visible !important;
    z-index: 1051 !important;
}

.modal-dialog-lg {
    max-width: 900px !important;
}

/* FORCE modal content visibility */
.modal-content {
    position: relative !important;
    background-color: white !important;
    border: 1px solid #999 !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5) !important;
    display: block !important;
    visibility: visible !important;
    z-index: 1052 !important;
}

.modal-body {
    position: relative !important;
    padding: 15px !important;
    display: block !important;
    visibility: visible !important;
}