/* CORE STYLES */
:root {
    --primary-color: rgba(13, 110, 139, 0.75);
    --overlay-color: rgba(24, 39, 51, 0.85);
    --menu-speed: 0.75s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
}

/* Mobile navbar adjustments to fit hamburger menu */
@media (max-width: 767.98px) {
    .navbar {
        min-height: 62px; /* 60px hamburger + 1px top + 1px bottom */
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .navbar-brand {
        margin-left: 70px; /* Clear space for hamburger (60px + 10px margin) */
    }
}

/* MENU STYLES */
.menu-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

    .menu-wrap .toggler {
        position: absolute;
        top: 1px; /* Align with navbar padding */
        left: 0;
        z-index: 2;
        cursor: pointer;
        width: 60px;
        height: 60px;
        opacity: 0;
    }

    .menu-wrap .hamburger {
        position: absolute;
        top: 1px; /* Align with navbar padding */
        left: 0;
        z-index: 1;
        width: 60px;
        height: 60px;
        padding: 1rem;
        background: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        /* Hamburger Line */
        .menu-wrap .hamburger > div {
            position: relative;
            flex: none;
            width: 100%;
            height: 2px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s ease;
        }

            /* Hamburger Lines - Top & Bottom */
            .menu-wrap .hamburger > div::before,
            .menu-wrap .hamburger > div::after {
                content: '';
                position: absolute;
                z-index: 1;
                top: -10px;
                width: 100%;
                height: 2px;
                background: inherit;
            }

            /* Moves Line Down */
            .menu-wrap .hamburger > div::after {
                top: 10px;
            }

    /* Toggler Animation */
    .menu-wrap .toggler:checked + .hamburger > div {
        transform: rotate(135deg);
    }

        /* Turns Lines Into X */
        .menu-wrap .toggler:checked + .hamburger > div:before,
        .menu-wrap .toggler:checked + .hamburger > div:after {
            top: 0;
            transform: rotate(90deg);
        }

    /* Rotate On Hover When Checked */
    .menu-wrap .toggler:checked:hover + .hamburger > div {
        transform: rotate(225deg);
    }

    /* Show Menu */
    .menu-wrap .toggler:checked ~ .menu {
        visibility: visible;
    }

        .menu-wrap .toggler:checked ~ .menu > div {
            transform: scale(1);
            transition-duration: var(--menu-speed);
        }

            .menu-wrap .toggler:checked ~ .menu > div > .menu-content {
                opacity: 1;
                transition: opacity 0.4s ease 0.4s;
            }

    .menu-wrap .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        /*z-index: 6;*/
    }

        .menu-wrap .menu > div {
            background: var(--overlay-color);
            border-radius: 50%;
            width: 200vw;
            height: 200vw;
            display: flex;
            flex: none;
            align-items: center;
            justify-content: center;
            transform: scale(0);
            transition: all 0.4s ease;
        }

            .menu-content {
                text-align: center;
                max-width: 90vw;
                height: 700px !important;
                opacity: 0;
                transition: opacity 0.4s ease;
                overflow-y: auto;
            }

                /* Compact spacing and slightly larger font for hamburger menu links */
                .menu-content > ul {
                    padding: 0;
                    margin: 0;
                    list-style: none;
                }

                .menu-content > ul > li {
                    color: #fff;
                    font-size: 1.15rem;      /* increased slightly from 1.05rem */
                    padding: 0.45rem 1rem;
                    margin: 0;
                    line-height: 1.05;
                }

                    .menu-content > ul > li > a {
                        color: inherit;
                        text-decoration: none;
                        transition: color 0.4s ease;
                        white-space: nowrap;   /* keep links on one line */
                        display: block;        /* make full-row click/tap area */
                    }

                    .menu-content > ul > li > a:hover {
                        color: #4db8ff;
                    }

                /* Compact nested items */
                .menu-content .dropdown-menu {
                    background: transparent;
                    border: none;
                    padding: 0;
                    margin: 0;
                }

                .menu-content .dropdown-item {
                    color: #fff;
                    padding: 0.25rem 1rem 0.25rem 1.6rem; /* slightly tighter */
                    font-size: 1rem;                       /* nested items unchanged */
                    background: transparent;
                    border: none;
                    white-space: nowrap;
                    display: block;
                }

                .menu-content .dropdown-item:hover {
                    color: #4db8ff;
                    background: transparent;
                }

                /* Style for dropdown toggle in mobile menu */
                .menu-content .dropdown-toggle::after {
                    margin-left: 0.5rem;
                }

                /* Adjust margin-top for authenticated user section */
                .menu-content .navbar-nav.mt-3 {
                    margin-top: 0.6rem !important;
                    padding-top: 0.6rem;
                    border-top: 1px solid rgba(255, 255, 255, 0.12);
                }