/* Off-Canvas Logo */
.offcanvas-body .brand {
    max-width: 96px; /* Limit logo size */
}

/* Initial state for GSAP cascading animation (main menu and logo) */
.offcanvas-body .brand,
.offcanvas-body .navbar-nav .nav-item {
    opacity: 1;
    transform: translateY(-50px);
    /* Removed transition to prevent GSAP conflict */
}

/* Off-Canvas Menu (Mobile Only) */
@media (max-width: 1200px) {
    /* Off-canvas structure */
    .offcanvas.offcanvas-top {
        height: 100vh; /* Full viewport height */
        transition: transform 0.4s ease-in-out; /* Smooth slide-in */
    }
    .offcanvas-body {
        height: auto; /* Dynamic height for content */
        min-height: calc(100vh - 56px); /* Full height minus header */
        overflow-y: hidden; /* Remove scrollbar */

        background: url('../assets/bg/1.jpg') no-repeat center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    /* Top-level menu items (boost font size) */
    .offcanvas-body .navbar-nav .nav-item .nav-link {
        font-size: 1.15rem; /* Boost font size for ABOUT, FLY, READ, etc. */
        font-family: 'Geist', monospace;
        text-transform:uppercase;
    }

    /* Active dropdown toggle (bold when open) */
    .offcanvas-body .dropdown-toggle.show {
        font-weight: 600; /* Bold when dropdown is open */
    }

    /* Dropdown menu base styles */
    .offcanvas-body .dropdown-menu {
        position: static !important; /* Prevent sub-menu clipping */
        width: 100%; /* Full width for sub-menus */
        background: transparent; /* Match navbar-dark */
        border: none;
        text-align: center; /* Center dropdown items */
    }

    /* Active dropdown (when open) */
    .offcanvas-body .dropdown-menu.show {
        background: #1a1a1a; /* Slightly lighter than black */
        padding: 0.5rem 0; /* Vertical padding for breathing room */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Subtle shadow to make it pop */
    }

    /* Dropdown list items */
    .offcanvas-body .dropdown-menu .nav-item {
        opacity: 1; /* Ensure visible, not animated by GSAP */
        transform: none;
        border-bottom: 1px solid #333333; /* Very light line to separate items */
        margin: 0 1rem; /* Horizontal margin to keep line inset */
    }

    /* Remove border from the last dropdown item */
    .offcanvas-body .dropdown-menu .nav-item:last-child {
        border-bottom: none; /* No line after the last item */
    }

    /* Dropdown links */
    .offcanvas-body.navbar-dark .dropdown-menu .dropdown-item {
        color: #d3d3d3 !important; /* Match main menu color (light gray) */
        font-size: 1rem; /* Keep dropdown items smaller than top-level */
        font-weight: 400; /* Match .nav-link */
        padding: 0.5rem 1rem; /* Match .nav-link */
        text-align: center; /* Center text */
        transition: background-color 0.2s ease; /* Smooth hover */
    }

    /* Dropdown hover/focus */
    .offcanvas-body.navbar-dark .dropdown-menu .dropdown-item:hover,
    .offcanvas-body.navbar-dark .dropdown-menu .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.1); /* Subtle hover effect */
        color: #d3d3d3 !important; /* Match main menu color */
    }

    /* Dropdown icons */
    .offcanvas-body.navbar-dark .dropdown-menu .dropdown-item i {
        margin-right: 0.5rem; /* Space icons */
        color: #d3d3d3; /* Match text color */
    }
}

/* Protect main navbar at >=1200px */
@media (min-width: 1200px) {
    .navbar.navbar-expand-xl {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .navbar.navbar-expand-xl .brand,
    .navbar.navbar-expand-xl .navbar-nav .nav-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .navbar.navbar-expand-xl .dropdown-menu .dropdown-item {
        color: #212529; /* Bootstrap default for desktop */
    }
}