/* 1. Base Styles & Typography */
body, html {
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6; /* Reduced from 2.5em for better readability */
    font-weight: 300;
    text-rendering: geometricPrecision;
    /* ADDED: Fix for horizontal overflow on small devices */
    overflow-x: hidden; 
}

/* 2. Layout Structure (UPDATED for Mobile-First) */
.wrapper {
    display: flex;
    min-height: 100vh;
    /* CHANGED: Stack vertically by default (mobile) */
    flex-direction: column; 
}

#navigation {
    background-color: #F3F3F3;
    border-bottom: 1px solid #EAEAEA; /* CHANGED: Bottom border for mobile */
    padding: 20px; /* REDUCED: Less padding for small screens */
    width: 100%; /* FULL WIDTH: On mobile */
    box-sizing: border-box;
}

#content {
    flex-grow: 1;
    padding: 30px 20px; /* REDUCED: Comfortable mobile padding */
    max-width: 100%; /* ENSURE: Fits small screens */
    box-sizing: border-box;
}

/* 3. Navigation Styling */
#navigation ul {
    margin: 0;
    padding-left: 20px;
    list-style: none;
}

#navigation a {
    text-decoration: none;
    color: black;
    display: block;
}

#navigation a:hover {
    text-decoration: underline;
}

/* 4. Content Elements */
h1, h2, h3, h4, h5, h6 {
    color: #4E9A06;
    font-weight: 300;
    margin: 0 0 15px 0;
}

#content h1:first-child {
    margin-top: 0;
}

p {
    margin: 0 0 1em 0; /* Replaces empty <p> tags for spacing */
}

#content a {
    color: blue;
    text-decoration: none;
}

#content a:hover,
#content a:active {
    text-decoration: underline;
}

pre {
    color: #2E3436;
    margin-left: 20px;
    background: #F0F0F0;
    padding: 10px;
}

/* 5. Functional Elements */
.checked-box {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAANOgAADMQBiN+4gQAAAAd0SU1FB9gKGQ8sMEGsKGkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAEBUlEQVRIx62V22tdRRTGf7Nn73P2ybntnNOe3NqkPTGgLTVUUZF6QatSLOKTPgqCIqLgQ0H/A1sQQbBYCBb1QfAxiC8tSO1FqHkwJVKtjdTGNraUmObsc9nXmfGh7cGYpM1D5nHWzPetteZb3wg2eB2YqYm4zSadsMtoboiNBH/3TE0awx6j+MRoxoTg/IYRvP19TQrJS0bzhdHGSyKFkLTtjSKwMjyiEz43ynhtP6bdjBCWyFobAf7eT7VhNF/q1FRbjYjmUohlCVPwnB+6FUxMTJipqSmUUhhjEGKd3bMT4ks/Y6oLBK2Yth8hHYtCJXOix7Nf7xLMzc0xOzvLzp078TyPNE3viW3QJPXzhNWbxFFKHCmMhoLn/FHodd48vGfhapdAacXQlkFK5dL6wIUm6fuTZPuvqDQhaMUYYyiVyuQr6rXDexYuAdi3tSv1ZJNs/R/CaszzT+1na88uXFnCEnJVgivBNN8uTJKmHQI/ptOOcXNZzMz9mOqFs90OHpipWcYwlo5P4ebnuOkrvr5wgrH+h3im7y36MzuwRXYZeKha/OhP0EkadFoxQSdGSotedR/+XwMc2XvKdNUFOFqZx6LKZWIiwjgkikNmLp/hm8sH+K1zjFTHXfBYdTi+eJArzXM0GxFxoBDCopLvo/fqEwi1XPkWkGqjFo2TgB1jOYZUKZTS/D1/ncmLh7jon0IbRWoiTi59ymzzJEEQE3cStNZsGxqlfPE57MBbOR8fP3hDGalOO9fq2DlBvmZw8xa2IxACGn6TydlD/O6f5OzSV/zif0cYhLQaEXGkKBbz7Ov/AOlXV1cxgBJRI3fuSTrpTawt18kWIZN1CFuaONI0w0WOXfsI43YIggh/KUSlhqxrMz74AkOZcWBm9QkH+Gw8NDLuITi+m0yzhluSyJzBLcpblUhFxywSRAEtPwQjsKVN30CNh0uvYuOubSHLtN3J0TO1j0pmBNuFbFWRK0gyPRZpktL2I5JQkclKakNlnh54g6ocvevUr/Ai2a7wineEkcJupA3S1Wg0nVZM2E6wbEF5U5G9Q++wI7sfR7h3N8HVNstykBfzH+KJEZwiWD0aIwxCgJ0R1Mu7GXOeJSuK93bZtQIle4D9pUNU5DC5jEsu55AvZakM5NicGyEj8uuz8bUCQgj67QfY671P3vEoeC69gy695U1U7NG7XV0pUwBjDJa1/JJlWWxzHuflzQe5FJ/GsgUVuZ2t8lEkTvfc0aNHb72flBhjVicQQqCUuvM3/M+WDVguWBrMVdDXEGZlBVEUrVCU9d9s5+fnaTQa2PZyPxEIhJaI1EEoZwX4ncynp6fXrmB4eJjR0VFarRbNZnP9P9rt9gohqNVq1Ov1ZbF/AZGev3hLJ2/zAAAAAElFTkSuQmCC);
}

/* --- CSS Checkbox Hack Logic --- */

/* 1. Hide the actual checkbox */
.menu-checkbox {
    display: none;
}

/* 2. Style the Burger Button (Mobile Only) */
.menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #4E9A06;
    cursor: pointer;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    border-radius: 4px;
}

/* The horizontal lines of the burger */
.burger-icon, .burger-icon::before, .burger-icon::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    position: absolute;
    transition: 0.3s;
}
.burger-icon::before { top: -8px; }
.burger-icon::after { top: 8px; }

/* 3. Mobile Navigation State (Hidden) */
#navigation {
    display: none; 
    width: 100%;
    background: #F3F3F3;
    padding-top: 70px; /* Make room for the fixed button */
}

/* 4. THE MAGIC: If checkbox is checked, show navigation */
.menu-checkbox:checked ~ #navigation {
    display: block;
}

/* 5. Optional: Animate burger into an 'X' when open */
.menu-checkbox:checked ~ .menu-button .burger-icon {
    background: transparent;
}
.menu-checkbox:checked ~ .menu-button .burger-icon::before {
    transform: rotate(45deg);
    top: 0;
}
.menu-checkbox:checked ~ .menu-button .burger-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* --- 6. Desktop Restore (768px+) --- */
@media (min-width: 768px) {
    .menu-button {
        display: none; /* Hide burger on desktop */
    }

    .wrapper {
        flex-direction: row;
    }

    #navigation {
        display: block !important; /* Always show sidebar */
        width: 250px;
        padding-top: 65px;
        min-height: 100vh;
    }
}

@media print {
    #navigation { display: none; }
    #content { padding: 0; }
}