/* src/components/Navigation/Navigation.css */

/* Header (sticky navbar container) - consolidated from multiple files */
header {
    position: sticky;
    top: 0;
    z-index: 2000;
    overflow: visible;
}

/* Navbar layout and shadow - consolidated from multiple files */
.navbar {
    display: flex;
    align-items: center;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
    background-color: white;
    justify-content: space-between;
    overflow: visible;
}

/* Navigation menu items */
.menu {
    text-transform: uppercase;
}

.menu:hover {
    color: bisque;
    cursor: pointer;
}

.navbar-left,
.navbar-right {
    display: flex;
    align-items: center;
}

.navbar-left > *,
.navbar-right > * {
    margin: 10px;
}

.companyName {
    font-size: 24px;
}

.btn{
    border: 1px solid black;
    border-radius: 40px;
    padding: 5px 20px 5px 20px;
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
    margin: 5px;
}

.btn:hover{
    background-color: rgb(0, 0, 0, 0.06);
}

/* Sign-in/Join Now buttons - consolidated from multiple files */
.sign-in,
.join-now {
    display: flex;
    border: 1px solid black;
    border-radius: 40px;
    padding: 5px 20px 5px 20px;
    cursor: pointer;
    text-transform: uppercase;
    text-align: end;
    justify-self: end;
}

.join-now {
    background-color: black;
    color: white;
}

.join-now:hover {
    background-color: rgb(0, 0, 0, 0.7);
    cursor: pointer;
}
    
.sign-in:hover {
    background-color: rgb(0, 0, 0, 0.06);
    cursor: pointer;
}

/* Left menu and toggle functionality */
menu { /* If this 'menu' refers to the <menu> HTML tag, keep it, otherwise use a class */
    position: fixed; /* Corrected from 'display: fixed' */
    left: 0;
    top: 0;
    margin: 0;
}

.menu-expand {
    width: 48px;
    height: 48px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-expand:hover {
    background-color: rgb(0, 0, 0, 0.06);
    cursor: pointer;
}

.menulist {
    /* Initially hidden by default */
    display: none;
    position: fixed; /* Ensures it's positioned relative to the viewport */
    left: 0; /* Start from the left */
    height: 100vh; /* Full viewport height */
    width: 250px; /* Adjust width as needed */
    background-color: white; /* Background color for the menu */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    z-index: 1500; /* Ensure it's above other content but below header */
    transform: translateX(-100%); /* Initially hide it off-screen to the left */
    transition: transform 0.3s ease-in-out; /* Smooth transition for sliding */
    padding-top: 90px; /* Space for the fixed header */
    box-sizing: border-box; /* Include padding in width/height */
    flex-direction: column; /* Arrange menu items vertically */
    gap: 8px; /* Space between menu items */
    padding-right: 8px; /* Padding for menu items */
    padding-left: 8px;
}

.menulist.open {
    display: flex; /* Show when 'open' class is applied */
    transform: translateX(0); /* Slide into view */
}

/* Style for the main content area when the menu is open */
/* This will push the main content to the right */
main.menu-open {
    margin-left: 250px; /* Same width as the menu */
    transition: margin-left 0.3s ease-in-out; /* Smooth transition */
}

/* Reset margin when menu is closed or not active */
main {
    transition: margin-left 0.3s ease-in-out; /* Add transition for smooth return */
    margin-left: 0; /* Default state */
}


.menu-home,
.menu-fundamental,
.menu-historical,
.menu-portfolio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    text-transform: uppercase;
    color: black;
}

.menu-home:hover,
.menu-fundamental:hover,
.menu-historical:hover,
.menu-portfolio:hover {
    background-color: rgb(0, 0, 0, 0.06);
    border-radius: 8px;
    cursor: pointer;
}

a{
    text-decoration: none;
}