/* Basic Reset & Body Styles */
:root {
    --primary-text-color: #000000;
    --link-color: #1155cc;
    --header-footer-bg: #222; 
    --header-footer-text: #ffffff;
    --font-family-sans: Arial, sans-serif;
    --max-content-width: 1200px;
    --padding-sides: 15px;
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Main Content Styles */
.main-content {
    padding: 40px var(--padding-sides);
    /* max-width: var(--max-content-width); */
    margin: 0 auto;
    background-color: #fff; /* White background for readability */
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.page-title {
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.last-updated {
    font-size: 0.9em;
    text-align: center;
    margin-bottom: 30px;
    color: #777;
}

.important-notice {
    /* font-weight: bold; */
    margin-bottom: 15px;
    padding: 10px;
    /* background-color: #fff3cd; */
    /* border: 1px solid #ffeeba; */
    border-radius: 5px;
    /* color: #856404; */
}

.main-content p {
    margin-bottom: 1em;
    font-size: 1.05em;
}

.main-content strong.highlight {
    font-weight: bold;
}

.rules-list, .sub-rules-list, .sub-sub-rules-list, .sub-sub-sub-rules-list {
    list-style-type: decimal;
    margin-left: 25px;
    margin-bottom: 1em;
}

.rules-list li, .sub-rules-list li, .sub-sub-rules-list li, .sub-sub-sub-rules-list li {
    margin-bottom: 0.5em;
}

.section-heading {
    font-size: 1.1em;
    font-weight: bold;
    font-style: italic;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

.address-block {
    margin-left: 50px; /* Indent address */
    font-style: normal;
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Responsive Design */

/* Tablet (768px to 1024px) */
@media (max-width: 1024px) {
    .header-container {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .main-navigation .nav-list {
        gap: 15px;
    }

    .social-links.header-social {
        margin-left: 0;
    }

    .footer-upper {
        justify-content: space-around;
        gap: 20px;
    }

    .footer-column {
        flex-basis: 45%; /* Two columns per row */
        min-width: unset;
    }

    .footer-column.branding-column {
        flex-basis: 100%; /* Branding column takes full width */
        text-align: center;
    }

    .footer-logo {
        display: flex;
        justify-content: center;
    }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    .header-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .logo {
        margin-bottom: 15px;
    }

    .main-navigation {
        width: 100%;
        text-align: left;
        order: 3; /* Move navigation below social links on mobile */
    }

    .menu-icon {
        display: block; /* Show hamburger icon */
        position: absolute;
        right: var(--padding-sides);
        top: 20px;
    }

    .main-navigation .nav-list {
        display: none; /* Hide menu by default */
        flex-direction: column;
        width: 100%;
        background-color: #333; /* Darker background for expanded menu */
        padding: 10px 0;
        margin-top: 10px;
    }

    .main-navigation .nav-list li {
        width: 100%;
    }

    .main-navigation .nav-list a {
        padding: 10px var(--padding-sides);
        border-bottom: 1px solid #444;
    }

    .main-navigation .nav-list a:hover {
        background-color: #555;
    }

    .menu-toggle:checked + .menu-icon + .nav-list {
        display: flex; /* Show menu when toggle is checked */
    }

    .social-links.header-social {
        order: 2; /* Position social links below logo */
        margin-bottom: 15px;
        align-self: center; /* Center social links */
    }

    .page-title {
        font-size: 1.7em;
        text-align: left;
    }

    .last-updated {
        text-align: left;
    }

    .rules-list, .sub-rules-list, .sub-sub-rules-list, .sub-sub-sub-rules-list {
        margin-left: 15px;
    }

    .footer-upper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-column {
        width: 100%;
        max-width: 300px; /* Keep footer columns from being too wide on small screens */
    }

    .footer-logo {
        justify-content: center;
    }

    .social-links.footer-social {
        justify-content: center;
        margin-top: 15px;
    }
}