:root {
    --flag-teal: #5F8A8B;
    --flag-brown-pattern: rgba(74, 59, 49, 0.04); 
    --flag-sage: #7E8C7A;
    --flag-white: #FFFFFF;

    --bg-deep-dark: #0D1117; 
    --bg-card-dark: #161B22; 
    --text-primary-light: #C9D1D9; 
    --text-secondary-light: #8B949E; 
    --accent-teal-primary: var(--flag-teal);
    --accent-teal-hover: #76A0A1;
    --accent-sage-secondary: var(--flag-sage);
    --border-dark: #30363D;
}


@keyframes subtleGradientShift {
    0% { background-position: 0% 0%; }
    25% { background-position: 25% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 50% 25%; }
    100% { background-position: 0% 0%; }
}


body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    background-color: var(--bg-deep-dark);
    
    background-image: linear-gradient(135deg,
        rgba(13, 17, 23, 0.95) 0%, 
        rgba(22, 27, 34, 0.9) 25%,  
        rgba(13, 17, 23, 0.95) 50%,
        rgba(31, 41, 55, 0.05) 75%, 
        rgba(42, 51, 64, 0.03) 100% 
    );
    background-size: 600% 600%; 
    animation: subtleGradientShift 180s ease infinite;
    color: var(--text-primary-light);
    position: relative; 
    overflow-x: hidden; 
    line-height: 1.6; 
}


body::before {
    content: "";
    position: fixed; 
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-image: repeating-linear-gradient(
        -45deg,
        var(--flag-brown-pattern),
        var(--flag-brown-pattern) 1px,
        transparent 1px,
        transparent 30px 
    );
    z-index: -10; 
    opacity: 0.7; 
}


::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-deep-dark);
}
::-webkit-scrollbar-thumb {
    background: #30363D; 
    border-radius: 5px;
    border: 2px solid var(--bg-deep-dark);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--flag-sage); 
}


:target {
    scroll-margin-top: 120px; 
}


.content-card, .faq-card, .column-card {
    background-color: var(--bg-card-dark);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid var(--border-dark);
    border-radius: 12px; 
}
.content-card:hover, .faq-card:hover, .column-card:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.35), 0 8px 12px -4px rgba(0, 0, 0, 0.3);
}


.column-card img {
    border-top-left-radius: 11px; 
    border-top-right-radius: 11px;
    object-fit: cover;
    height: 200px;
    width: 100%;
}


.link-accent {
    color: var(--accent-teal-primary);
    font-weight: 500;
    transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out;
}
.link-accent:hover, .nav-link:hover { 
    color: var(--accent-teal-hover);
    text-shadow: 0 0 8px rgba(95, 138, 139, 0.5);
}


.nav-link {
    color: var(--text-secondary-light);
    font-weight: 500;
    transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out;
    padding: 0.5rem 0.75rem; 
    border-radius: 0.375rem; 
}
.nav-link.active { 
     color: var(--accent-teal-primary);
     font-weight: 700;
     background-color: rgba(95, 138, 139, 0.1); 
}


.header-bg {
    background-color: rgba(16, 21, 28, 0.85); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-dark);
}
.header-title-icon {
    color: var(--accent-teal-primary);
}


.footer-bg {
    background-color: #0A0D12; 
    border-top: 1px solid var(--border-dark);
}


.text-accent-primary {
    color: var(--accent-teal-primary);
}
.text-primary-light {
    color: var(--text-primary-light);
}
.text-secondary-light {
    color: var(--text-secondary-light);
}


.hero-image-container img {
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}


.section-title-icon {
    color: var(--accent-teal-primary);
}
.toc-icon { 
     color: var(--accent-sage-secondary);
}
.mission-icon {
    font-size: 2.5rem;
    color: var(--accent-sage-secondary);
    margin-bottom: 0.5rem;
}
.advocacy-column i { 
    font-size: 2rem;
    color: var(--accent-sage-secondary);
    margin-bottom: 0.75rem;
}
.advocacy-column h4 { 
    color: var(--accent-teal-primary);
}



.faq-answer p {
    margin-bottom: 0.75rem;
    color: var(--text-secondary-light); 
}
.faq-answer strong {
    color: var(--accent-sage-secondary);
    font-weight: 600;
}


.cta-card {
    background-image: linear-gradient(to right, var(--accent-teal-primary), var(--accent-sage-secondary));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}


.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}


.focus\:fixed:focus { position: fixed; }
.focus\:top-4:focus { top: 1rem; }
.focus\:left-4:focus { left: 1rem; }
.focus\:z-50:focus { z-index: 50; }
.focus\:p-3:focus { padding: 0.75rem; }
.focus\:bg-white:focus { background-color: white; }
.focus\:text-black:focus { color: black; }
.focus\:rounded-md:focus { border-radius: 0.375rem; }