/* Base Styles */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6; /* Improved readability */
    transition: background-color 0.5s ease;
    overflow-x: hidden; /* Prevent horizontal scrollbars */
    scroll-behavior: smooth; /* Fallback if JS scroll fails, though GSAP handles it */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
}

/* Preloader Animation */
#preloader path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: dash 1.8s linear forwards infinite; /* Slightly faster */
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.mockingjay-loader svg {
    animation: spin 2.5s linear infinite; /* Slightly faster */
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Background Elements */
.mockingjay-emblem {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 C60 20, 80 20, 90 10 L75 40 L90 70 L50 90 L10 70 L25 40 L10 10 C20 20, 40 20, 50 10" fill="none" stroke="%23d4af37" stroke-width="0.5" /></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(200px, 60%, 800px); /* Responsive size */
    opacity: 0.1; /* Slightly less obtrusive */
}

/* Hero Section */
.hero {
    background-image: url('https://images.unsplash.com/photo-1506485001643-fdeaf97eb197?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1950&q=80');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Section styles, background images are applied via JS */
.section {
    /* Default background if JS fails or no image specified */
    background-color: #111827; /* A dark fallback */
    border-radius: 0.75rem; /* Slightly larger radius */
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.2); /* Softer shadow */
}


/* Navigation Styles */
#sideNav {
    width: 14px; /* Slightly wider for easier interaction */
    /* Ensure z-index is sufficient if header overlaps */
    z-index: 35; /* Higher than main content z-index */
}

.nav-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #4a5568; /* Tailwind gray-600 */
    border: 2px solid #1a202c; /* Border to pop against dark backgrounds */
    position: relative;
    transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth transition */
}

.nav-indicator::after { /* Tooltip */
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: calc(100% + 12px); /* Consistent spacing from indicator */
    transform: translateY(-50%);
    white-space: nowrap;
    background-color: #1f2937; /* Tailwind gray-800 */
    color: #e5e7eb; /* Tailwind gray-200 */
    padding: 6px 12px; /* More padding */
    border-radius: 6px;
    font-size: 0.8rem; /* Smaller font for tooltip */
    font-family: 'Roboto', sans-serif;
    opacity: 0;
    visibility: hidden; /* Use visibility for better performance */
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
    z-index: 45; /* Ensure tooltip is above other elements */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.nav-indicator:hover {
    background-color: #a0aec0; /* Tailwind gray-500 on hover */
    transform: scale(1.1);
}
.nav-indicator:hover::after {
    opacity: 1;
    visibility: visible;
}

.nav-indicator.active {
    background-color: #d4af37; /* Capitol gold */
    border-color: #fff; /* White border for active state */
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
}
.nav-indicator.active::after { /* Make tooltip visible for active if desired */
    /* opacity: 1; visibility: visible; */ /* Optional: keep tooltip for active item */
}


/* District Badge */
.district-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; 
    height: 44px; 
    border: 2px solid; /* Color applied via inline style */
    border-radius: 50%;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.district-badge:hover {
    transform: scale(1.1) rotate(5deg);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px; /* Slightly wider */
}
::-webkit-scrollbar-track {
    background: #111827; /* Darker track */
}
::-webkit-scrollbar-thumb {
    background: #374151; /* Tailwind gray-700 */
    border-radius: 5px;
    border: 2px solid #111827; /* Track color border for thumb */
}
::-webkit-scrollbar-thumb:hover {
    background: #d4af37; /* Capitol gold */
}

/* Images and Media */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive grid */
    gap: 1.5rem; /* Increased gap */
}

.image-gallery img {
    width: 100%;
    height: 220px; 
    object-fit: cover;
    border-radius: 0.5rem; /* Consistent with section radius */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */
}
.image-gallery img:hover {
     transform: scale(1.03); /* Subtle hover scale */
     box-shadow: 0 8px 15px rgba(212, 175, 55, 0.2); /* Themed hover shadow */
}


/* Content Typography (Overrides/additions to Tailwind Prose) */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    color: #d4af37; /* Capitol gold for all headings in content */
    margin-bottom: 1.25rem;
    font-weight: 700; /* Bolder headings */
}

.prose-invert h1, .prose-invert h2, .prose-invert h3, .prose-invert h4 { /* Tailwind prose specific */
    color: #d4af37 !important; /* Ensure override */
}


.content p {
    margin-bottom: 1.25rem;
    line-height: 1.7; /* Slightly more generous line height */
}

.content ul, .content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.75rem;
}

.content li {
    margin-bottom: 0.6rem;
}
.content ul > li::before { /* Custom bullet style */
    background-color: #d4af37; /* Capitol gold bullets */
    height: 0.5em;
    width: 0.5em;
    top: 0.65em; /* Adjust vertical alignment */
}

.content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 5px solid #d4af37; /* Thicker border */
    background-color: rgba(31, 41, 55, 0.5); /* Darker, semi-transparent background */
    color: #d1d5db; /* Lighter text for contrast */
    font-style: italic;
    border-radius: 0px 8px 8px 0px; /* Rounded on one side */
}
.content blockquote p {
    margin-bottom: 0.5rem; /* Tighter spacing within blockquote */
}


/* Responsiveness: Side Nav & Main Content */
@media (min-width: 1024px) { /* lg and up */
    #main-content-area { /* Target the main content area specifically */
        /* Current header height is py-3 (1.5rem) + border (1px). Approx 60-70px. */
        /* Side nav is 14px wide. Tooltip space needs to be considered. */
        padding-left: calc(14px + 1.5rem + 1rem); /* nav width + space + main padding */
        margin-left: auto; /* Ensure container is centered */
        margin-right: auto; /* Ensure container is centered */

    }
     #sideNav {
        /* Assuming header height around 70px */
        top: calc(70px + 2rem); /* Position below fixed header + some space */
        transform: translateY(0); /* Remove vertical centering if positioning from top */
        max-height: calc(100vh - 70px - 4rem); /* Prevent overflow, considering header and some padding */
        overflow-y: auto; /* Allow scrolling if many items */
     }
}

@media (max-width: 1023px) { /* md and down */
    #sideNav {
        display: none !important;
    }
     #main-content-area {
         padding-left: 1rem; /* Default padding */
         padding-right: 1rem; /* Default padding */
     }
     .hero h1 { font-size: 2.5rem; } /* Responsive hero title */
     .content h1 { font-size: 1.8rem; }
     .content h2 { font-size: 1.6rem; }
     .content h3 { font-size: 1.4rem; }
}

/* Ensure mobile menu links are styled like nav-links */
#mobileMenu .nav-link {
    /* font-family: 'Cinzel', serif; */ /* Optional: Match main nav font */
    /* text-transform: uppercase; */   /* Optional: Match main nav style */
}