/* Navigation Component Styles */

/* Smooth scroll transitions for navbar */
.navbar {
    transition: transform 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-2 {
    transition: transform 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
}

/* Navigation menu z-index - must be higher than navbar */
.navmenu {
    z-index: 1003 !important;
}

/* Webflow navigation menu z-index override */
.w-nav-menu {
    z-index: 1003 !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: #e54c41 !important;
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Override Webflow's display: none for collapsed navigation - but only when closed */
.w-nav[data-collapse='all'] .w-nav-menu {
    display: block !important;
}

/* Show menu when open */
.w-nav-menu.w--open {
    display: block !important;
    transform: translateX(0) !important;
}

/* Navigation links styling */
.w-nav-menu .navlink {
    color: white !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 15px 20px !important;
    display: block !important;
}

.w-nav-menu .navlink:hover {
    color: #f0f0f0 !important;
}

.w-nav-menu .navlink.w--current {
    color: #f0f0f0 !important;
    font-weight: bold !important;
}

/* Navigation button z-index */
.menubutton {
    z-index: 1004 !important;
}

/* Webflow navigation button z-index override */
.w-nav-button {
    z-index: 1004 !important;
    display: block !important;
}

/* Override Webflow's display: none for collapsed navigation button */
.w-nav[data-collapse='all'] .w-nav-button {
    display: block !important;
}

/* Hamburger button styling when menu is open */
.w-nav-button.w--open {
    color: white !important;
}

/* Make hamburger animation white when menu is open */
.w-nav-menu.w--open ~ .w-nav-button #hamburger-animation,
.w-nav-menu.w--open + .w-nav-button #hamburger-animation,
body:has(.w-nav-menu.w--open) #hamburger-animation {
    filter: brightness(0) invert(1) !important;
}

/* Alternative approach - target the button when menu is open */
.w-nav-button.w--open #hamburger-animation {
    filter: brightness(0) invert(1) !important;
}

/* Make sure the hamburger container is visible */
#hamburger-animation {
    filter: none !important;
}

.w-nav-button.w--open #hamburger-animation {
    filter: brightness(0) invert(1) !important;
}

/* Additional styling for hamburger button visibility */
.w-nav-button {
    background: transparent !important;
    border: none !important;
    padding: 10px !important;
}

/* Ensure the button area is clickable and visible */
.w-nav-button.w--open {
    background: transparent !important;
    border-radius: 4px !important;
}

/* Target SVG elements inside the hamburger animation */
.w-nav-button.w--open #hamburger-animation svg,
.w-nav-button.w--open #hamburger-animation svg * {
    fill: white !important;
    stroke: white !important;
    color: white !important;
}

/* Health link styling */
.health-link {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}

.health-link:hover {
    color: #FFFFFF;
}

/* R2 Health link menu styling */
.r2-health-link-menu {
    display: none;
}

/* Horizontal line styling in navigation menu */
.horizontalline hr {
    border: none;
    height: 2px;
    background-color: white;
    margin: 0;
    width: 100%;
}

/* Balance spacing around horizontal line */
.horizontalline {
    margin: 15px 0;
}

/* Contact link - add bottom padding for balance */
.horizontalline + .navlink {
    padding-top: 15px !important;
}