/* Bootstrap override using CSS variables */

.hero-section {
    /* This ensures the hero is visible and maintains a minimum height */
    min-height: 60vh;
    background-color: #000; /* Fallback for image loading */
    overflow: hidden;
}

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

    .btn-primary:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.85) !important;
        border-color: rgba(var(--bs-primary-rgb), 0.85) !important;
    }

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #000 !important;
}

    .btn-secondary:hover {
        background-color: rgba(var(--bs-secondary-rgb), 0.85) !important;
        border-color: rgba(var(--bs-secondary-rgb), 0.85) !important;
    }

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.text-secondary {
    color: var(--bs-secondary) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-secondary {
    border-color: var(--bs-secondary) !important;
}

/* Error Validation */
/* jQuery toggles field-validation-valid and field-validation-error */
.field-validation-valid {
    display: none;
}

.field-validation-error.invalid-feedback {
    display: block;
}

/* jQuery toggles input-validation-error on the input */
.input-validation-error {
    border-color: var(--bs-danger);
}

    .input-validation-error:focus {
        border-color: var(--bs-danger);
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
/* Hover state, use your greyscale */
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--bs-body-color);
    background-color: var(--gray-500) !important;
}

/* Remove blue click or active highlight */
.dropdown-item:active {
    color: var(--bs-body-color) !important;
    background-color: var(--gray-500) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Optional, ensures visited links never turn blue */
.dropdown-item:visited {
    color: var(--bs-body-color) !important;
}

.dropdown-item-button {
    display: block;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    line-height: var(--bs-body-line-height);
}

/* Base button look, across all .btn types */
.btn {
    background-color: var(--gray-800) !important;
    border-color: var(--gray-800) !important;
    color: var(--gray-50) !important;
    box-shadow: none !important;
}

    /* Hover and focus states, matching your anchor hover */
    .btn:hover,
    .btn:focus {
        background-color: var(--gray-500) !important;
        border-color: var(--gray-500) !important;
        color: var(--gray-50) !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Click and active states, match hover and remove blue */
    .btn:active,
    .btn:active:focus,
    .btn:focus-visible {
        background-color: var(--gray-500) !important;
        border-color: var(--gray-500) !important;
        color: var(--gray-50) !important;
        outline: none !important;
        box-shadow: none !important;
    }

/* Visited, prevents blue/purple link states on .btn-link */
/*    .btn:visited {
        color: var(--gray-50) !important;
    }
*/

/* Keep error text visible and spaced inside floating labels */
.form-floating > .invalid-feedback {
    display: block;
    margin-top: .25rem;
}

/* --- Global Body/Main Structure Fix --- */

/* Ensure main content is full width and has no side padding from Bootstrap's default .container */
main[role="main"] {
    padding: 0; /* Remove default padding that might restrict full width */
}

/* --- Parallax Section Styles --- */
.parallax-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    overflow: hidden;
}

/* Background image */
.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Dark overlay */
.parallax-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Foreground content */
.hero-content {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    max-width: 960px;
}

@media (max-width: 575.98px) {
    .parallax-hero {
        min-height: 75svh;
    }

    .hero-img {
        object-position: right center;
    }
}

/* --- Custom Footer Styles --- */

/* Override default footer padding/margin */
footer.custom-footer {
    padding: 0 !important;
}

/* Container for the footer images */
.custom-footer-img-container {
    width: 250px; /* Adjust width as needed for your images */
    /* On small screens, hide the image container to prevent huge vertical space */
    display: none;
}

/* Image div styling to set height and background */
.custom-footer-img {
    height: 450px; /* Your requested height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Specific image paths for left and right */
.custom-footer-left {
    background-image: url('../img/footer-left-image.jpg'); /* Replace with your image path */
}

.custom-footer-right {
    background-image: url('../img/footer-right-image.jpg'); /* Replace with your image path */
}


/* Re-enable images on medium/large screens */
@media (min-width: 992px) { /* Adjust breakpoint as needed, 992px is lg */
    .custom-footer-img-container {
        display: block;
    }
}

.quote, .custom-blockquote {
    /* Sets the thick grey border on the left */
    border-left: 8px solid #dee2e6;
    /* Light grey background to make it pop (optional) */
    background-color: #f8f9fa;
    /* Ensures the element doesn't exceed 50% width */
    max-width: 50%;
}

/* For Table Row Click */
tr[data-href] {
    cursor: pointer;
}

/* For Shopping Cart Badge */
.cart-badge {
    transform: translate(-70%, -15%);
}