/* General Body Reset & Base Styles */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding-top: 80px; /* Default for desktop */
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

body.nav-open {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Header Styles */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #4A0E6B; /* Solid background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Floating effect */
    z-index: 1000; /* Ensure on top */
    color: #fff;
    box-sizing: border-box; /* Include padding in width/height */
    /* Desktop styles will override these flex properties */
    display: flex;
    flex-direction: column; /* Default to column for mobile */
    align-items: center;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 50px; /* Mobile header-top height */
    padding: 10px 15px; /* Mobile padding */
    box-sizing: border-box;
}

.logo {
    font-size: 28px;
    font-weight: bold;
    color: #FFD700; /* Secondary color for logo */
    text-decoration: none;
    flex: 1; /* For mobile centering */
    text-align: center; /* For mobile centering */
    order: 2; /* For mobile centering */
}

.hamburger-menu {
    display: flex; /* Show on mobile */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* Higher than buttons and main-nav */
    order: 1; /* Leftmost on mobile */
    flex-shrink: 0; /* Prevent shrinking */
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background: #FFD700;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.hamburger-menu.active span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}
.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

.desktop-nav-placeholder {
    flex: 1; /* Balances logo centering on mobile */
    order: 3;
    visibility: hidden; /* Hidden but takes space */
    width: 30px; /* Match hamburger width */
    flex-shrink: 0; /* Prevent shrinking */
}

.header-buttons {
    display: flex;
    justify-content: center; /* Center buttons */
    gap: 10px;
    width: 100%;
    padding: 10px 15px; /* Mobile padding */
    box-sizing: border-box;
    background-color: #330A4D; /* Darker background for button area */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Subtle inner shadow */
    z-index: 998; /* Below main nav, above content */
    flex-shrink: 0; /* Prevent shrinking */
}

.btn {
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none; /* Remove underline */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: #fff; /* Default text color for buttons */
    display: inline-block; /* Ensure padding and width work */
    white-space: nowrap; /* Prevent text wrapping */
    font-size: 16px; /* Default button font size */
}

.btn-primary {
    background: linear-gradient(45deg, #FFD700, #FFA500); /* Gold to Orange gradient */
    color: #4A0E6B; /* Dark text for bright button */
    border: 2px solid #FFD700;
}
.btn-primary:hover {
    background: linear-gradient(45deg, #FFA500, #FFD700);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2), 0 0 15px #FFD700; /* Glow effect */
}

.btn-secondary {
    background: linear-gradient(45deg, #6A1B9A, #8E24AA); /* Purple gradient */
    color: #FFD700; /* Gold text for dark button */
    border: 2px solid #6A1B9A;
}
.btn-secondary:hover {
    background: linear-gradient(45deg, #8E24AA, #6A1B9A);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2), 0 0 15px #8E24AA; /* Glow effect */
}

.main-nav {
    position: fixed; /* Fixed for slide-out */
    top: 0; /* Align to top of viewport */
    left: 0;
    width: 70%; /* Take 70% of screen width */
    height: 100vh; /* Full viewport height */
    background-color: #330A4D; /* Darker purple for slide-out menu */
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%); /* Start off-screen */
    transition: transform 0.3s ease-out;
    z-index: 999; /* Below hamburger, above buttons */
    padding-top: 120px; /* Space for header-top + buttons */
    overflow-y: auto;
    display: block; /* Always block for the slide-out mechanism */
}

.main-nav.active {
    transform: translateX(0); /* Slide in */
}

.main-nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align menu items to left */
    gap: 0; /* Remove gap */
}

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

.main-nav a {
    padding: 15px 25px;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator */
    border-radius: 0; /* No round corners for full width items */
}

.main-nav a:hover,
.main-nav a.active {
    background-color: #4A0E6B;
    color: #FFD700;
}

/* Footer Styles */
.site-footer {
    background-color: #333;
    color: #eee;
    padding: 40px 0 20px;
    font-size: 15px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.footer-col {
    flex: 1;
    min-width: 250px;
}

.footer-col h3 {
    color: #FFD700; /* Secondary color for headings */
    font-size: 20px;
    margin-bottom: 15px;
    border-bottom: 2px solid #6A1B9A; /* Accent line */
    padding-bottom: 5px;
}

.footer-col p {
    margin-bottom: 10px;
}

.footer-col a {
    color: #FFD700;
    text-decoration: none;
}

.footer-col a:hover {
    text-decoration: underline;
}

.footer-nav ul {
    display: flex;
    flex-direction: column;
}

.footer-nav li {
    margin-bottom: 8px;
}

.footer-nav a {
    color: #eee;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #FFD700;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #555;
    font-size: 14px;
}

/* Desktop Styles */
@media (min-width: 769px) {
    .site-header {
        flex-direction: row; /* Row for desktop */
        justify-content: space-between;
        align-items: center;
        min-height: 80px;
        padding: 0 20px;
    }

    .header-top {
        display: contents; /* Effectively removes this wrapper on desktop */
        /* Children (logo) will participate in site-header flex layout */
    }

    .hamburger-menu, .desktop-nav-placeholder {
        display: none; /* Hide these on desktop */
    }

    .logo {
        flex: none; /* Remove flex properties */
        text-align: left;
        margin-right: 30px; /* Spacing from nav */
        order: unset; /* Reset order */
    }

    .main-nav {
        position: static; /* Remove fixed positioning */
        width: auto; /* Auto width */
        height: auto; /* Auto height */
        background-color: transparent; /* No background for desktop nav */
        box-shadow: none;
        transform: translateX(0); /* Ensure visible */
        flex-grow: 1; /* Allow nav to take available space */
        padding: 0;
        overflow-y: visible; /* No scroll */
    }

    .main-nav ul {
        flex-direction: row;
        justify-content: center; /* Center nav items */
        gap: 20px;
    }

    .main-nav li {
        width: auto;
    }

    .main-nav a {
        padding: 8px 15px;
        font-size: 16px;
        border-bottom: none; /* Remove border */
        border-radius: 5px;
    }

    .header-buttons {
        display: flex; /* Ensure buttons are displayed as flex */
        gap: 15px;
        padding: 0; /* No padding on desktop */
        background-color: transparent; /* No background */
        box-shadow: none; /* No shadow */
        z-index: auto; /* Reset z-index */
        flex-shrink: 0; /* Prevent shrinking */
    }

    .btn {
        font-size: 16px; /* Desktop button font size */
    }

    .footer-columns {
        flex-direction: row; /* Back to row for desktop */
        text-align: left; /* Reset text align */
    }

    .footer-col {
        text-align: left;
    }

    .footer-col h3 {
        text-align: left;
        border-bottom: 2px solid #6A1B9A; /* Re-add border */
        padding-bottom: 5px;
    }

    .footer-nav ul {
        align-items: flex-start; /* Reset align */
    }
}

/* Adjust for smaller mobile screens if needed */
@media (max-width: 480px) {
    .header-top {
        padding: 8px 10px;
    }
    .logo {
        font-size: 22px;
    }
    .header-buttons {
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: wrap; /* Allow buttons to wrap */
    }
    .btn {
        padding: 7px 12px;
        font-size: 13px;
        border-radius: 18px;
    }
    .main-nav {
        width: 85%; /* Slightly wider menu on very small screens */
    }
    .main-nav a {
        padding: 12px 20px;
        font-size: 16px;
    }
    .footer-col {
        min-width: 100%;
    }
}