/*========================================
  1. ROOT VARIABLES
========================================*/
:root {
    --navbar-height: 56px; /* standard navbar height */
    --navbar-bg: #b200ff; /* navbar background */
    --navbar-text: #ffffff; /* main text color */
    --navbar-hover-bg: rgba(255,255,255,0.15); /* hover background */
    --dropdown-bg: #8000b2; /* dropdown background */
    --dropdown-hover-bg: #5f89d5; /* dropdown hover background */
}

/*========================================
  2. GLOBAL RESET
========================================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/*body {
    padding-top: var(--navbar-height);
    min-height: 100vh;
    background-color: #fff;
}*/

html, body {
    
    margin: 0;
    padding: 0;
}


.wrapper {
    display: flex;
    flex-direction: column;
    flex: 1; /* fill remaining vertical space */
}

main.body-content {
    flex: 1; /* grow to take all space above footer */
    padding: 1rem; /* optional */
}

footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #f8f9fa; /* optional light background */
}
















body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--navbar-height);
    background-color: black;
}

main {
    flex: 1; /* grow to fill remaining space */
}


/*========================================
  3. NAVBAR BASE
========================================*/
.navbar {
    height: var(--navbar-height);
    background-color: var(--navbar-bg);
    z-index: 1050;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

/* Brand */
.navbar-brand {
    font-weight: bold;
    font-size: 1.2rem;
    white-space: nowrap;
    color: var(--navbar-text);
}

    .navbar-brand span {
        font-weight: bold;
    }

/* Navbar links */
.navbar-nav {
    display: flex;
    align-items: center;
}

    .navbar-nav .nav-link {
        color: var(--navbar-text);
        font-weight: 600;
        padding: 0.5rem 0.75rem;
        transition: background-color 0.25s ease, transform 0.3s ease, filter 0.3s ease;
        white-space: nowrap;
    }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link:focus {
            background-color: var(--navbar-hover-bg);
            border-radius: 4px;
            transform: scale(1.05);
            filter: brightness(1.2);
        }

        /* Active link */
        .navbar-nav .nav-link.active {
            background-color: #fff;
            color: #4b0070 !important;
            border-radius: 4px;
        }

/* Navbar toggler */
.navbar-toggler {
    border: none;
    outline: none;
    box-shadow: none;
}

    .navbar-toggler:focus {
        box-shadow: none;
    }

/*========================================
  4. DROPDOWNS
========================================*/
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-radius: 6px;
    border: none;
    padding: 0.25rem 0;
    min-width: 180px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.dropdown-item {
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--navbar-text);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    .dropdown-item:hover {
        background-color: var(--dropdown-hover-bg);
        color: #fff;
        transform: translateX(5px);
    }

/*========================================
  5. DESKTOP HOVER ANIMATION
========================================*/
@media (min-width: 992px) {

    /* Hide dropdown by default */
    .navbar .dropdown-menu {
        display: block; /* keep layout flow */
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Show submenu on hover */
    .navbar .dropdown:hover > .dropdown-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Horizontal navbar layout */
    .offcanvas-body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

        .offcanvas-body .navbar-nav.flex-grow-1 {
            flex-direction: row;
            align-items: center;
        }

        /* Login partial on far right */
        .offcanvas-body .navbar-nav.ms-auto {
            flex-direction: row;
            align-items: center;
            margin-left: auto !important;
            border-top: none;
            padding-top: 0;
            width: auto;
        }
}

/*========================================
  6. MOBILE / OFFCANVAS
========================================*/
@media (max-width: 991px) {
    /* Offcanvas width */
    .offcanvas {
        width: 75vw; /* 3/4 of screen */
    }

    .offcanvas-header {
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .offcanvas-body {
        flex-direction: column; /* stack vertically */
        padding: 1rem;
    }

        /* Menu links stacked vertically */
        .offcanvas-body .navbar-nav {
            flex-direction: column;
            align-items: flex-start;
        }

        .offcanvas-body .nav-link {
            color: #000;
            width: 100%;
            padding: 0.75rem 0;
        }

    /* Dropdown inside offcanvas */
    .offcanvas .dropdown-menu {
        display: none;
        flex-direction: column;
        padding-left: 1rem;
        width: 100%;
        box-shadow: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .offcanvas .dropdown.show > .dropdown-menu {
        display: flex;
    }

    /* Login partial at bottom */
    .offcanvas-body .navbar-nav.ms-auto {
        margin-top: auto;
        border-top: 1px solid #ddd;
        padding-top: 1rem;
        width: 100%;
    }

    .offcanvas-body .dropdown-item {
        color: #000;
    }

        .offcanvas-body .dropdown-item:hover {
            background-color: var(--dropdown-hover-bg);
            color: #fff;
            border-radius: 4px;
        }
}