main, header, footer {
    transition: background-color 0.3s ease, color 0.3s ease;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Logo inversion - invert in light mode for dark header */
nav img {
    filter: none;
}

/* Logo sizing - fixed max width, maintain aspect ratio */
nav img {
    max-width: 300px;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}

/* Header and Footer - Inverted colors */
/* Light mode: white header for logo with white background */
header, footer {
    background-color: #ffffff;
    color: var(--pico-contrast);
    border-bottom: 1px solid var(--pico-muted-border-color);
}

footer {
    border-top: 1px solid var(--pico-muted-border-color);
    border-bottom: none;
}

header a, footer a {
    color: var(--pico-contrast);
}

header a:hover, footer a:hover {
    color: var(--pico-contrast-hover);
}

/* Hamburger icon color for light mode (dark header) */
.menu-button label span {
    background-color: var(--pico-contrast) !important;
}

/* Dark mode: light header/footer, normal logo */
@media (prefers-color-scheme: dark) {
    nav img {
        /* filter: invert(1); */
    }
    
    header, footer {
        background-color: var(--pico-background-color);
        color: var(--pico-color);
    }
    
    header a, footer a {
        color: var(--pico-color);
    }
    
    header a:hover, footer a:hover {
        color: var(--pico-contrast-hover);
    }
    
    /* Hamburger icon color for dark mode (light header) */
    .menu-button label span {
        background-color: var(--pico-color) !important;
    }
}

/* Hamburger menu - hidden by default */
.menu-toggle {
    display: none;
}

.menu-button {
    display: none;
}

/* Mobile navigation */
@media (max-width: 1000px) {
    /* Show hamburger button on mobile */
    .menu-button {
        display: block;
        margin-left: auto;
        position: absolute;
        right: 1rem;
        top: 0.5rem;
    }
    
    /* Hamburger icon styling */
    .menu-button label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
        padding: 0.5rem;
    }
    
    .menu-button label span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--pico-color);
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    /* Hide menu items by default on mobile */
    .menu-items {
        display: none;
        width: 100%;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--pico-background-color);
        border-top: 1px solid var(--pico-muted-border-color);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .menu-items li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--pico-muted-border-color);
    }
    
    .menu-items li:last-child {
        border-bottom: none;
    }
    
    /* Show menu when checkbox is checked */
    .menu-toggle:checked ~ .menu-items {
        display: flex;
    }
    
    /* Animate hamburger to X when checked */
    .menu-toggle:checked ~ ul .menu-button label span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .menu-toggle:checked ~ ul .menu-button label span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle:checked ~ ul .menu-button label span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Make header position relative for absolute menu positioning */
    header nav {
        position: relative;
        flex-wrap: wrap;
    }
}

/* Allow nav menu to wrap below logo on smaller screens */
nav ul {
    flex-wrap: wrap;
}

/* Alternating section gradients - Light theme */
main > section:nth-child(odd) {
    background: linear-gradient(to right, 
        rgba(237, 224, 212, 0.3), 
        rgba(255, 255, 255, 0.3), 
        rgba(237, 224, 212, 0.3));
    padding: 2rem 1rem;
    border-radius: 0.5rem;
}

/* Alternating section gradients - Dark theme */
@media (prefers-color-scheme: dark) {
    main > section:nth-child(odd) {
        background: linear-gradient(to right, 
            rgba(139, 115, 85, 0.2), 
            rgba(80, 80, 80, 0.2), 
            rgba(139, 115, 85, 0.2));
    }
}