/* Styles for the header element */
header {
    padding: 20px; /* Inner spacing */
    text-align: center; /* Center-align text */
    border: 6px solid #000; /* Added border */
    border-bottom: none; /* Removed bottom border */
    margin: 10px 10px 0px 10px; /* Outer spacing */
    border-radius: 10px 10px 0 0; /* Rounded top corners */
}

/* Styles for the header title */
header h1 {
    margin: 0; /* Remove default margin */
    font-size: 2em; /* Font size */
}

/* Styles for the navigation inside the header */
header nav {
    margin-top: 10px; /* Spacing above the navigation */
}

header nav ul {
    display: flex; /* Use flexbox for horizontal layout */
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

header nav ul li {
    margin: 0 10px; /* Add horizontal spacing between list items */
}

/* Styles for the hamburger menu button */
.menu-toggle {
    display: none; /* Hidden by default */
    background: none; /* No background */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor */
}

/* Styles for the hamburger menu icon */
.menu-toggle .menu-icon {
    display: inline-block; /* Inline block layout */
    width: 25px; /* Width of the icon */
    height: 18px; /* Height of the icon */
    position: relative; /* Position for child elements */
}

/* Styles for the lines in the hamburger menu icon */
.menu-toggle .menu-icon span {
    display: block; /* Block layout */
    width: 100%; /* Full width */
    height: 3px; /* Height of each line */
    background-color: #333; /* Line color */
    position: absolute; /* Positioned relative to parent */
    left: 0; /* Align to the left */
    transition: all 0.3s ease; /* Smooth transitions */
}

/* Positioning for the first line */
.menu-toggle .menu-icon span:nth-child(1) {
    top: 0; /* Align to the top */
}

/* Positioning for the second line */
.menu-toggle .menu-icon span:nth-child(2) {
    top: 7.5px; /* Centered vertically */
}

/* Positioning for the third line */
.menu-toggle .menu-icon span:nth-child(3) {
    top: 15px; /* Align to the bottom */
}

/* Responsive styles for screens smaller than 768px */
@media (max-width: 768px) {

    /* Hide the menu by default */
    .site-menu {
        transform: translateX(-100%); /* Start off-screen */
        flex-direction: column; /* Stack menu items vertically */
        background-color: #f3c16a; /* Lighter shade of #e5ac3b */
        position: fixed; /* Fixed position */
        top: -10px; /* Adjusted top position */
        left: 0; /* Align to the left */
        height: 100%; /* Full height */
        width: 250px; /* Fixed width */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Add shadow */
        transition: transform 0.5s ease; /* Smooth slide-in/out */
        z-index: 1000; /* Ensure it appears above other elements */
    }

    /* Show the menu when the menu-open class is applied */
    .site-menu.menu-open {
        transform: translateX(0); /* Slide into view */
    }

    /* Display the hamburger menu button */
    .menu-toggle {
        display: block; /* Show the hamburger menu button */
    }

    header nav ul {
        display: unset; /* Reset display property for mobile view */
        list-style: none; /* Remove default list styling */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
    }

    header nav ul li {
        margin-top: 15px; /* Add vertical spacing between list items */
    }
}

/* Styles for the active state of the hamburger menu button */
.menu-toggle.active .menu-icon span {
    background-color: #000; /* Change line color when active */
}

/* Responsive styles for screens smaller than 450px */
@media (max-width: 450px) {
    .site-logo img {
        max-width: 200px; /* Limit maximum width */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Block layout */
        margin: 0; /* Remove default margin */
        transition: max-width 0.3s ease, transform 0.3s ease; /* Smooth scaling */
    }

    .site-logo {
        text-align: left; /* Align logo to the left */
    }
}

/* Responsive styles for screens larger than 450px */
@media (min-width: 451px) {
    .site-logo img {
        max-width: 100%; /* Restore original size */
        transform: scale(1); /* Reset scaling */
        transition: max-width 0.3s ease, transform 0.3s ease; /* Smooth scaling */
    }
}