@media (max-width: 991px) {
	body:has(.navbar-collapse.show),
	html:has(.navbar-collapse.show) {
		overflow: hidden !important;
		height: 100% !important;
		position: fixed !important;
		width: 100% !important;
	}
}

.navbar {
	--bs-navbar-padding-y: 0;
	background-color: transparent !important;
	position: relative;
    z-index: 4;

    @media (min-width: 992px) {
        height: 68px;
    }

    @media (max-width: 991px) {
        height: 61px;
        z-index: 10002;
    }

	.navbar-line-svg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		z-index: 1;
		overflow: visible;
		pointer-events: none;
		opacity: 1;
		transform: scaleX(1) scaleY(1);

		path {
			vector-effect: non-scaling-stroke;
			stroke: var(--navy-60);
			stroke-width: 1;
			fill: none;
		}
	}

	.navbar-brand {
		position: relative;
        --bs-navbar-brand-padding-y: 0;
		--bs-navbar-brand-margin-end: 0;
		padding-inline: 12px;
		position: relative;

		img {
			margin: 0 auto;

            @media (min-width: 992px) {
                max-width: 161px;
            }

            @media (max-width: 991px) {
                max-width: 123px;
            }
		}

		.logo-right-line-svg {
			position: absolute;
			top: 0;
			right: 0;
			width: 1px;
			height: 100%;
			z-index: 10;
			overflow: visible;
			pointer-events: none;
			opacity: 1;
			transform: scaleX(1) scaleY(1);
			display: block;

			path {
				vector-effect: non-scaling-stroke;
				stroke-width: 1;
				stroke: var(--navy-60);
				fill: none;
			}
		}
	}

	.container {
		height: 100%;
		padding-inline: 0;
		position: relative;
        z-index: 0;

		@media (max-width: 991px) {
			max-width: 100%;
			box-sizing: border-box;
		}
	}

	.navbar-nav .nav-item:first-child {
		position: relative;
		z-index: 10;
        overflow: visible;

        .navbar-left-line-svg,
        .navbar-right-line-svg {
            position: absolute;
            top: 0;
            width: 1px;
            height: 68px;
            z-index: 10;
            overflow: visible;
            pointer-events: none;
            opacity: 1 !important;
            transform: scaleX(1) scaleY(1);
            display: block;

            path {
            vector-effect: non-scaling-stroke;
            stroke-width: 1;
            stroke: var(--navy-60);
            fill: none;
            }
        }

		.navbar-left-line-svg {
			left: 0;
		}

		.navbar-right-line-svg {
			right: 0;
		}
	}

    @media (min-width: 992px) {
        nav,
        .region-nav-branding,
        #block-seeaseizure-bootstrap-branding,
        .region-nav-main,
        .navbar-nav,
        .navbar-brand,
        .nav-item {
            height: 100%;
            display: flex;
            align-items: center;
        }
   }

   @media (max-width: 991px) {
    .region-nav-branding {
        padding-top: 15px;
        height: 61px;
    }
}

	.navbar-toggler {
        --bs-navbar-toggler-focus-width: 0;
		border: 0;

		.navbar-toggler-icon-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 22px;
			height: 21px;
			background: none;
			border: none;
			cursor: pointer;
			padding: 0;
			gap: 6px;

			.top,
			.middle,
			.bottom {
				width: 22px;
				height: 2px;
				background-color: var(--navy-20);
				margin: 0;
				transition: all 0.3s ease-in-out;
				transform-origin: center;
			}
		}

		&:not(.collapsed) {
			.top {
				transform: rotate(45deg) translate(6px, 6px);
			}

			.middle {
				opacity: 0;
				transform: scaleX(0);
			}

			.bottom {
				transform: rotate(-45deg) translate(5px, -5px);
			}
		}
	}

	.navbar-collapse {
		height: 100%;

        @media (max-width: 991px) {
            min-height: 100vh;
            height: min-content;
            background-color: var(--white);
            z-index: 10001;
            width: 100%;
            max-width: 100vw;
        
          .region-nav-main,
          .region-nav-main nav {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
                align-items: start;

                ul {
                    width: 100%;
                    max-width: 100%;
                    box-sizing: border-box;
                    overflow-x: hidden;
                }
            }

            .region-nav-main {
                padding-top: 65px;
            }
        }

		.navbar-nav {
			--bs-navbar-color: var(--navy-20);
			--bs-nav-link-font-weight: 500;
			text-transform: uppercase;

			.nav-item {
                 width: 100%;

                 &:first-child {
                   position: relative;
                   overflow: visible;
                 }

                 @media (max-width: 991px) {
                     box-sizing: border-box;
                 }

                .nav-link {
                    --bs-nav-link-hover-color: var(--navy-20);
                    --bs-navbar-active-color: var(--navy-20);
                    height: 100%;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    letter-spacing: 0.3px;

                    @media (min-width: 992px) {
                        --bs-nav-link-font-size: 12px;
		                padding-inline: 24px;

                         &:hover {
                            background-color: var(--navy-100);
                        }
                        &.is-active {
                            background-color: var(--navy-100);
                        }
                    }

                    @media (max-width: 991px) {
                        --bs-nav-link-font-size: 16px;
		                padding-inline: 20px;
                        box-sizing: border-box;
                        overflow-wrap: break-word;
                        word-wrap: break-word;
                        max-width: 100%;
                    }
                }
                
                &.dropdown {
                    &.active-trail {
                        @media (min-width: 992px) {
                            background-color: var(--navy-100);
                        }
                    }
                }

                .dropdown-toggle {
                    &::after {
                        background: url(/themes/custom/seeaseizure_bootstrap/images/icons/chevron.svg) no-repeat center center;
                        border: none;

                        @media (min-width: 992px) {
                            height: 6px;
                            width: 12px;
                            background-size: 10px;
                            margin-left: 7px;
                        }

                        @media (max-width: 991px) {
                            height: 10px;
                            width: 16px;
                            background-size: 16px;
                        }
                    }

                    &:hover::after {
                        transform: rotate(180deg);
                    }
                }

                .dropdown-menu {
                    --bs-dropdown-padding-y: 32px;
                    --bs-dropdown-padding-x: 32px;
                    --bs-dropdown-spacer: 0;
                    --bs-border-radius: 0; 
                    --bs-dropdown-border-width: 0;
                    --bs-dropdown-border-color: transparent;
                    --bs-dropdown-bg: #fff;
                    --bs-dropdown-color: var(--navy-10);
                    --bs-dropdown-font-size: 14px;
                    --bs-dropdown-font-weight: 500;
                    --bs-dropdown-text-transform: uppercase;
                    --bs-dropdown-letter-spacing: 0.3px;

                    @media only screen and (min-width: 992px) {
                        border-bottom: 2px solid var(--navy-40);
                        min-width: max-content;
                    }

                    @media only screen and (max-width: 991px) {
                        position: relative;
                        max-width: 100%;
                        box-sizing: border-box;
                        overflow-x: hidden;

                        &:before {
                            content: '';
                            position: absolute;
                            top: 8px;
                            left: 20px;
                            width: calc(100% - (20px * 2));
                            height: 1px;
                            background-color: rgba(26, 62, 111, .6);
                        }
                        &:after {
                            content: '';
                            position: absolute;
                            bottom: 8px;
                            left: 20px;
                            width: calc(100% - (20px * 2));
                            height: 1px;
                            background-color: rgba(26, 62, 111, .6);
                        }
                    }

                    .nav-item {
                        &.dropdown-item-completed {
                            .dropdown-item-text {
                                color: #C5D0DF !important;
                            }
                        }

                        @media only screen and (min-width: 992px) {
                            &:not(:last-child) {
                                margin-bottom: 45px;
                            }

                             &.dropdown-item-completed {                                
                                &:hover {
                                    .dropdown-item-arrow {
                                        background-image: url(/themes/custom/seeaseizure_bootstrap/images/icons/arrow-right-navy-60.svg);
                                    }
                                }
                            }
                        }

                        @media only screen and (max-width: 991px) {
                            padding-block: 24px;

                            &:first-child {
                                padding-top: 0;
                            }

                            &:last-child {
                                padding-bottom: 0;
                            }

                            &:not(:last-child) {
                                margin-bottom: 0;
                                border-bottom: 1px solid rgba(26, 62, 111, .2);
                            }
                        }
                    }
                }

                .dropdown-item {
                    --bs-dropdown-link-color: #1A3E6F;
                    --bs-dropdown-link-hover-color: #C5D0DF;
                    --bs-dropdown-link-active-bg: transparent;
                    --bs-dropdown-link-active-color: var(--navy-10);
                    --bs-dropdown-link-hover-bg: transparent;
                    --bs-dropdown-item-padding-y: 0;
                    --bs-dropdown-item-padding-x: 0;
                    font-weight: 500;
                    transition: all 0.2s ease-in-out;
                    position: relative;
                    display: flex;
                    align-items: center;
                    gap: 16px;
                    white-space: normal;

                    @media only screen and (max-width: 991px) {
                        font-size: 16px;
                        color: var(--navy-20);
                        box-sizing: border-box;
                        max-width: 100%;
                        overflow-wrap: break-word;
                        word-wrap: break-word;
                        min-width: 0;
                    }

                    &:hover {
                        font-weight: bold;
                        color: #1A3E6F;
                    }

                    .dropdown-item-arrow {
                        width: 16px;
                        height: 16px;
                        flex-shrink: 0;
                        background-image: url(/themes/custom/seeaseizure_bootstrap/images/icons/arrow-right-navy.svg);
                        background-size: 16px;
                        background-position: center;
                        background-repeat: no-repeat;
                        opacity: 0;
                        transition: opacity 0.2s ease-in-out;
                    }

                    &:hover {
                        color: #C5D0DF;

                        .dropdown-item-arrow {
                            @media only screen and (min-width: 992px) {
                                opacity: 1;
                            }
                        }
                    }
                }

                @media (max-width: 991px) {
                    &.dropdown {
                        position: relative;
                    }
                }
			}
		}
	}
}