@charset "utf-8";
/* CSS Document */

/* --- Prevent body scrolling when menu is open --- */
body.menu-open {
    overflow: hidden; /* Prevents scrolling the page behind the menu */
}

/* --- menu Button Styling --- */
.menu-button {
    position: absolute; /* Or 'absolute' if relative to a specific container */
    top: 15px;
    right: 15px;
    z-index: 1001; /* Ensure it's above the menu and other content */
    width: 40px;
    height: 30px; /* Height includes space between lines */
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distributes space between lines */
}

.menu-line {
    display: block;
    width: 100%;
    height: 4px; /* Line thickness */
    background-color: #fff;
    border-radius: 4px;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Animation */
    transform-origin: center; /* Rotate around the center */
}

/* --- menu Icon Animation (to 'X') --- */
.menu-button.is-active .menu-line:nth-child(1) {
    /* Moves the top line down and rotates it 45 degrees */
    transform: translateY(13px) rotate(45deg); /* Adjust 13px based on height/line thickness */
}

.menu-button.is-active .menu-line:nth-child(2) {
    /* Fades out the middle line */
    opacity: 0;
    transform: scaleX(0); /* Optional: shrink horizontally */
}

.menu-button.is-active .menu-line:nth-child(3) {
    /* Moves the bottom line up and rotates it -45 degrees */
    transform: translateY(-13px) rotate(-45deg); /* Adjust -13px based on height/line thickness */
}


/* --- Navigation Menu Styling --- */
.main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px; /* Width of the menu */
    max-width: 80%; /* Ensure it doesn't take full width on small devices */
    height: 100vh; /* Full viewport height */
    background-color: #ffffff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1500; /* Below the menu button */
    padding: 80px 20px 20px; /* Top padding to avoid overlapping button */
    box-sizing: border-box; /* Include padding in width/height */

    /* --- Initial Hidden State & Slide Animation --- */
    transform: translateX(-100%); /* Start off-screen to the left */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth slide animation */
    visibility: hidden; /* Hide from accessibility tree when off-screen */
}

/* --- Menu Active State --- */
.main-navigation.is-active {
    transform: translateX(0); /* Slide into view */
    visibility: visible; /* Make it visible and accessible */
}

/* --- Menu Links --- */
.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-navigation ul li {
    margin-bottom: 1em;
}

.main-navigation ul li a {
    display: block; /* Make the whole area clickable */
    text-decoration: none;
    color: #333;
    font-size: 1.2em;
    padding: 10px 15px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.main-navigation ul li a:hover,
.main-navigation ul li a:focus {
    background-color: #eee;
    color: #000;
    outline: none; /* Or style the outline appropriately */
}

/* --- Optional: Add an overlay to dim the page content --- */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 1499; /* Below menu, above content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    pointer-events: none; /* Allow clicks through initially */
}

body.menu-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Make overlay clickable to close menu */
}

/* --- Main Content Styling (Example) --- */
main {
    padding: 80px 20px 20px; /* Add padding to avoid content starting under fixed header elements */
}

















/* TEST */

/* --- menu Icon Animation (to 'X') --- */
.menu-button.is-active .menu-line:nth-child(1) {
    /* Moves the top line down and rotates it 45 degrees */
    transform: translateY(13px) rotate(45deg); /* Adjust 13px based on height/line thickness */
}

.menu-button.is-active .menu-line:nth-child(2) {
    /* Fades out the middle line */
    opacity: 0;
    transform: scaleX(0); /* Optional: shrink horizontally */
}

.menu-button.is-active .menu-line:nth-child(3) {
    /* Moves the bottom line up and rotates it -45 degrees */
    transform: translateY(-13px) rotate(-45deg); /* Adjust -13px based on height/line thickness */
}


/* --- Navigation Menu Styling --- */
.main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px; /* Width of the menu */
    max-width: 80%; /* Ensure it doesn't take full width on small devices */
    height: 100vh; /* Full viewport height */
    background-color: #ffffff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Below the menu button */
    padding: 80px 20px 20px; /* Top padding to avoid overlapping button */
    box-sizing: border-box; /* Include padding in width/height */

    /* --- Initial Hidden State & Slide Animation --- */
    transform: translateX(-100%); /* Start off-screen to the left */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth slide animation */
    visibility: hidden; /* Hide from accessibility tree when off-screen */
}

/* --- Menu Active State --- */
.main-navigation.is-active {
    transform: translateX(0); /* Slide into view */
    visibility: visible; /* Make it visible and accessible */
}

/* --- Menu Links --- */
.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-navigation ul li {
    margin-bottom: 1em;
}

.main-navigation ul li a {
    display: block; /* Make the whole area clickable */
    text-decoration: none;
    color: #333;
    font-size: 1.2em;
    padding: 10px 15px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.main-navigation ul li a:hover,
.main-navigation ul li a:focus {
    background-color: #eee;
    color: #000;
    outline: none; /* Or style the outline appropriately */
}

/* --- Optional: Add an overlay to dim the page content --- */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 999; /* Below menu, above content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    pointer-events: none; /* Allow clicks through initially */
}

body.menu-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Make overlay clickable to close menu */
}

/* --- Main Content Styling (Example) --- */
main {
    padding: 80px 20px 20px; /* Add padding to avoid content starting under fixed header elements */
}