/* Bootstrap 5 Compatibility Styles */
/* Place this in a new file: /public/assets/css/bootstrap5-compat.css */

/* Remove default link underlines */
a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

/* Override the custom cursor from template */
body:after {
    cursor: auto !important;
    background: rgba(0,0,0,.7);
}

body.off-canvas-sidebar-open:after {
    cursor: auto !important;
}

/* Off-canvas close button - Fixed */
.close-offcanvas {
    font-size: 24px;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    display: inline-block;
    padding: 10px;
    cursor: pointer !important;
    position: relative;
    z-index: 10;
}

.close-offcanvas:hover {
    opacity: 1;
    color: #fff;
}

.close-offcanvas i {
    pointer-events: none;
}

/* Fix the cursor issue */
body:after {
    cursor: auto !important;
}

body.off-canvas-sidebar-open:after {
    cursor: auto !important;
}

/* Remove any cursor image */
.layout,
.off-canvas-sidebar,
body {
    cursor: auto !important;
}

/* Mobile menu icon styling */
.nav-toggle > a span,
.icon-bar {
    background: #313131;
    display: block;
    height: 2px;
    width: 100%;
    margin-bottom: 4px;
    transition: background .3s ease;
}

.nav-toggle > a span:last-child {
    margin-bottom: 0;
}

/* Header transitions - with higher specificity */
.header {
    transition: all .3s ease-out !important;
}

/* Default state - dark text on transparent */
.header .inner-brand .brand-dark {
    display: inline-block !important;
}

.header .inner-brand .brand-light {
    display: none !important;
}

/* Light header - white text on transparent */
.header.header-light {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.2) !important;
}

.header.header-light .inner-brand .brand-dark {
    display: none !important;
}

.header.header-light .inner-brand .brand-light {
    display: inline-block !important;
}

.header.header-light .inner-nav > ul > li > a,
.header.header-light .extra-nav > ul > li > a {
    color: #fff !important;
}

/* Small header - white background, dark text */
.header.header-small {
    background: #fff !important;
    height: 61px !important;
}

.header.header-small .inner-brand .brand-dark {
    display: inline-block !important;
}

.header.header-small .inner-brand .brand-light {
    display: none !important;
}

.header.header-small .inner-nav > ul > li > a,
.header.header-small .extra-nav > ul > li > a {
    color: #303133 !important;
}

/* Logo transitions */
.inner-brand img {
    max-height: 40px;
    width: auto;
    transition: all .3s ease;
}

/* Header color transitions */
.header {
    transition: all .3s ease-out;
}

/* Default state - dark text, transparent background */
.header .brand-dark {
    display: inline-block;
}

.header .brand-light {
    display: none;
}

.header .inner-nav > ul > li > a,
.header .extra-nav > ul > li > a {
    color: #303133;
    transition: color .3s ease;
}

/* Light header state - white text on transparent */
.header.header-light {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.2) !important;
}

.header.header-light .brand-dark {
    display: none;
}

.header.header-light .brand-light {
    display: inline-block;
}

.header.header-light .inner-nav > ul > li > a,
.header.header-light .extra-nav > ul > li > a {
    color: #fff;
}

.header.header-light .nav-toggle > a span,
.header.header-light .icon-bar {
    background: #fff;
}

/* Small header state - always white background with dark text */
.header.header-small {
    background: #fff !important;
    height: 61px;
    border-bottom: 1px solid #f2f2f2 !important;
}

.header.header-small .brand-dark {
    display: inline-block !important;
}

.header.header-small .brand-light {
    display: none !important;
}

.header.header-small .inner-nav > ul > li > a,
.header.header-small .extra-nav > ul > li > a {
    color: #303133 !important;
}

.header.header-small .nav-toggle > a span,
.header.header-small .icon-bar {
    background: #313131 !important;
}

/* Keep existing navigation styles */
.header {
    display: table !important;
}

.inner-header,
.inner-navigation,
.extra-nav {
    display: table-cell !important;
    vertical-align: middle !important;
}

.inner-nav > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.inner-nav > ul > li {
    display: inline-block !important;
    position: relative !important;
}

/* Mega menu hover effects */
.menu-item-has-children .mega-menu,
.menu-item-has-children .sub-menu {
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease;
}

.menu-item-has-children.sub-menu-open .mega-menu,
.menu-item-has-children.sub-menu-open .sub-menu {
    opacity: 1;
    visibility: visible;
}

/* Off-canvas styles */
.off-canvas-sidebar {
    transition: transform .2s cubic-bezier(.645,.045,.355,1);
}

body.off-canvas-sidebar-open:after {
    content: " ";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);
    z-index: 9998;
    visibility: visible;
    opacity: 1;
}

/* Form Control Updates */
.form-control {
    padding: 1.5rem .9375rem !important;
    font-size: inherit !important;
    text-transform: none !important;
    height: auto !important;
}

/* Navigation Updates */
.navbar {
    padding: 0;
}

.navbar-nav .nav-link {
    text-transform: uppercase;
    letter-spacing: .7px;
    font-weight: 600;
    font-size: 12px;
    color: #303133;
    padding: 1rem 1.5rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    opacity: .8;
}

/* Mega Menu for Bootstrap 5 */
.dropdown-menu.mega-menu {
    width: 800px;
    padding: 20px;
    left: 50% !important;
    transform: translateX(-50%);
}

.dropdown-menu.mega-menu .dropdown-header {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    padding: 8px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.dropdown-menu.mega-menu .dropdown-item {
    padding: 8px 0;
    font-size: 12px;
}

/* Button Updates */
.btn {
    border-width: 2px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .625rem;
    padding: .9375rem 1.75rem;
    letter-spacing: .09375rem;
}

.btn.btn-circle {
    border-radius: 30px;
}

.btn.btn-dark {
    background-color: #111;
    border-color: #111;
}

.btn.btn-dark:hover {
    background-color: #252525;
    border-color: #252525;
}

/* Alert Updates */
.alert {
    border-radius: 0;
}

/* Card Updates */
.card {
    border-radius: 0;
}

/* Offcanvas for Mobile Menu */
.offcanvas {
    background-color: #1b1d1f;
    color: #fff;
}

.offcanvas .nav-link {
    color: #fff;
    padding: 0.5rem 0;
}

.offcanvas .btn-close {
    filter: invert(1);
}

/* Carousel Updates for Testimonials */
.carousel-indicators {
    position: relative;
    margin-top: 20px;
    margin-bottom: 0;
}

.carousel-indicators [data-bs-target] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 0;
    background-color: rgba(0,0,0,0.5);
    margin: 0 4px;
}

.carousel-indicators .active {
    background-color: #4a90e2;
    transform: scale(1.3);
}

/* Utility Classes */
.mb-3 {
    margin-bottom: 1rem !important;
}

/* Fix spacing issues */
.row > * {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

/* Responsive Updates */
@media (max-width: 991px) {
    .dropdown-menu.mega-menu {
        width: 100%;
        position: static !important;
        transform: none;
    }
    
    .navbar-toggler {
        border: none;
        padding: 0;
    }
    
    .navbar-toggler-icon {
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
}

/* Animation Classes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.fadeIn {
    animation-name: fadeIn;
}

/* Progress Bar Animation */
.progress-bar {
    transition: width 1.5s ease-in-out;
}

/* Accordion Styles for Bootstrap 5 */
.accordion-button {
    background-color: #f7f7f7;
    color: #555;
    font-family: Jost, Arial, serif;
    letter-spacing: 1px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 18px;
    text-align: left;
    border: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: #f7f7f7;
    color: #555;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: #eaeaea;
}

.accordion-button:hover {
    color: #222;
}

.accordion-button::after {
    background-image: none;
    content: "\f107";
    font-family: FontAwesome;
    font-size: 14px;
    line-height: 1;
    width: auto;
    height: auto;
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
    transform: none;
}

.accordion-item {
    background-color: transparent;
    border: 1px solid #eaeaea;
    border-radius: 0;
    border-bottom: 0;
}

.accordion-item:last-child {
    border-bottom: 1px solid #eaeaea;
}

.accordion-item:first-child {
    border-top-left-radius: .25em;
    border-top-right-radius: .25em;
}

.accordion-item:last-child {
    border-bottom-left-radius: .25em;
    border-bottom-right-radius: .25em;
}

.accordion-header {
    margin-bottom: 0;
}

.accordion-body {
    padding: 20px 18px;
    color: #555;
    border-bottom: 1px solid #eaeaea;
}

.accordion-item:last-child .accordion-body {
    border-bottom: none;
}

/* Icon styling */
.accordion-button i,
.accordion-button span {
    margin-right: 5px;
}