/* Define custom color palette */
:root {
    --bs-primary-rgb: 204, 85, 0; /* Dark Orange */
    --bs-primary: #CC5500;
    --bs-primary-darker: #A34400;
    --bs-dark-gray: #343a40;
    --bs-body-bg-rgb: 248, 249, 250; /* Light gray for body */
    --bs-body-color-rgb: 33, 37, 41; /* Dark gray for text */
    --bs-link-color-rgb: 204, 85, 0; /* Dark Orange for links */
    --bs-link-hover-color-rgb: 153, 64, 0; /* Darker orange for hover */
}

/* Smooth scrolling behavior */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    padding-top: 48px; /* Adjust body padding for smaller fixed top navbar */
    padding-bottom: 48px; /* Adjust body padding for smaller fixed bottom footer */
}

/* Override Bootstrap variables for a custom theme */
.navbar {
    padding-top: 0.25rem; /* Reduce navbar vertical padding */
    padding-bottom: 0.25rem; /* Reduce navbar vertical padding */
    transition: background-color 0.3s ease-in-out; /* Add transition for smooth color change */
}

.navbar-dark.fixed-top {
    background-color: var(--bs-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-dark.fixed-bottom {
    background-color: var(--bs-primary);
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}

/* Style for scrolled state */
.navbar.scrolled {
    background-color: rgba(204, 85, 0, 0.9);
    backdrop-filter: blur(5px);
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: var(--bs-primary-darker);
    border-color: var(--bs-primary-darker);
}

/* Override the default blue focus/active state for primary buttons */
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--bs-dark-gray) !important;
    border-color: var(--bs-dark-gray) !important;
    box-shadow: 0 0 0 0.25rem rgba(52, 58, 64, 0.5) !important;
}

/* Style for the offcanvas menus with bounce effect */
.offcanvas {
    background-color: rgba(33, 37, 41, 0.9); /* Dark background with transparency */
    color: #f8f9fa;
    /* Override Bootstrap's default transition with a bounce effect */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.offcanvas .nav-link {
    color: #f8f9fa;
    border-bottom: 1px solid #495057;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
}

.offcanvas .nav-link:hover {
    background-color: rgba(204, 85, 0, 0.5); /* Orange highlight on hover */
    color: #fff;
}

.offcanvas .offcanvas-header {
     border-bottom: 1px solid var(--bs-primary);
}

.offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.offcanvas-body hr {
    border-top: 1px solid #6c757d;
}

.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Content Sections Styling */
.content-section {
    min-height: 100vh;
    padding-top: 8rem; /* Add padding to account for sticky nav */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Alternating background colors for sections */
main .content-section:nth-of-type(odd) {
    background-color: #e9ecef;
}
main .content-section:nth-of-type(even) {
    background-color: #f8f9fa;
}


/* Carousel Styling */
.carousel-shadow {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}
.carousel-item {
    height: 300px; /* Set fixed height for carousel items */
    max-height: 300px;
    overflow: hidden;
}
.carousel-item .youtube-container {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
}
.youtube-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 ratio */
    min-height: 300px;
    min-width: 533.33px; /* 300px * 16/9 */
    transform: translate(-50%,-50%);
    pointer-events: none;
}
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    z-index: 2; /* Ensure caption is above video */
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 1rem;
    padding: 1.5rem;
}
.btn-pill-shadow {
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2) !important;
}

/* Mute button styling */
#mute-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* Anchor navigation bar styling */
.anchor-nav-wrapper {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 48px; /* Height of the fixed navbar */
    z-index: 1020; /* Bootstrap's sticky top z-index */
    background-color: #f8f9fa; /* Match the content background */
}

.anchor-nav .btn-group.rounded-pill {
    overflow: hidden; /* This is key to clip children to the parent's border-radius */
}

.anchor-nav .btn {
    color: white;
    border-color: transparent;
    padding: .5rem 1rem;
    background-color: var(--bs-primary);
}
.anchor-nav .btn:hover {
    background-color: var(--bs-primary-darker);
    color: white;
}

/* Custom Tooltip Styling */
.tooltip-inner {
    max-width: 400px !important;
    text-align: left !important; /* Ensure content inside is left-aligned */
    background-color: white;
    color: #212529;
    border: 1px solid #dee2e6;
    padding: 1rem;
}
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {
     border-bottom-color: #dee2e6;
}


/* Footer styling */
.footer-nav {
    color: white;
}
.footer-nav .navbar-text {
    color: white; /* Ensure copyright text is white */
}
.navbar-toggler {
    border: none; /* Remove border from toggler */
}
.navbar-toggler:focus {
    box-shadow: none; /* Remove focus shadow */
}