/* --- 1. CORE, THEME, & GLASSMORPHIC CARD (PDD) --- */
:root {
    /* PDD-compliant variables */
    --component-card-glass-backgroundColor: rgba(255, 255, 255, 0.15);
    --component-card-glass-fallback-backgroundColor: rgba(42, 42, 60, 0.9);
    --component-card-glass-blur: 16px;
    --component-card-glass-borderColor: rgba(255, 255, 255, 0.3);
    --component-card-borderRadius: 12px;

    /* Theme-controlled variables */
    --color-primary: #0A2342; /* Default */
    --color-secondary: #0077B6; /* Default */
    --color-accent: #00B4D8; /* Default */
    --color-background: #F0F8FF; /* Default */
    --color-text-dark: #0A2342; /* Default */
    --font-headline: 'Montserrat', sans-serif;
    --font-body: 'Overpass', sans-serif;
}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;}
body { margin: 0; font-family: var(--font-body); background-color: #F0F8FF; color: #0A2342; line-height: 1.6; }
#rhizome-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity 0.5s; }
#rhizome-canvas.paused { opacity: 0.1; }
#root { max-width: 1200px; margin: 0 auto; padding: 1rem; position: relative; z-index: 1; }
h1,h2,h3,h4{font-family:var(--font-headline);color:var(--color-text-dark);}

/* PDD-compliant glass-card implementation */.glass-card {
    background: var(--component-card-glass-backgroundColor);
    backdrop-filter: blur(var(--component-card-glass-blur));
    -webkit-backdrop-filter: blur(var(--component-card-glass-blur));
    border-radius: var(--component-card-borderRadius);
    border: 1px solid var(--component-card-glass-borderColor);
    padding: 1.5rem;
}
@supports not (backdrop-filter: blur(1px)) {
    .glass-card { background: var(--component-card-glass-fallback-backgroundColor); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--component-card-glass-fallback-backgroundColor); }
}

#header-container{display:flex;justify-content:space-between;align-items:center;position:sticky;top:1rem;z-index:10; padding: 1rem; }


.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 0.75rem; /* 12px */
}
.main-nav {
    display: flex;
    align-items: center;
    gap: 1rem; /* Consistent gap between nav items */
    margin-left: auto; /* Push to the right */
    margin-right: 1rem;
}

.logo {
    max-height: 50px; /* Constrain logo size */
    width: auto;
}

.logo-text {
    font-family: var(--font-headline);
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--color-text-dark);
    text-decoration: none;
    line-height: 1;
}
#footer-container{display:flex;justify-content:space-between;align-items:center;margin-top:4rem;}

.content-wrapper{max-width:900px;margin:4rem auto;}
/* --- 2. KINETIC TYPOGRAPHY & HERO --- */
.kinetic-headline span { display: inline-block; opacity: 0; animation: drift-in 0.6s forwards cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes drift-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.hero-carousel { position: relative; overflow: hidden; border-radius: var(--component-card-borderRadius); color: white; min-height: 450px; }
.carousel-track { padding: 0; margin: 0; list-style: none; position: relative; width: 100%; height: 450px; }
.carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; }
.carousel-slide.active { opacity: 1; z-index: 2; }
.hero-slide-background { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; animation: zoom 20s infinite alternate; }
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.1); } }
.carousel-slide::before { content: ''; position: absolute; inset: 0; background: rgba(10, 35, 66, 0.6); z-index: -1; }
.hero-content { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.hero-headline {
    font-size: 4.5rem; /* Increased text size */
    -webkit-text-stroke: 1.5px var(--color-secondary);
    color: var(--color-text-light);
}
/* --- 3. GUMBO BUTTON, TABS, ACCORDION --- */
.gumbo-button { position: relative; overflow: hidden; display: inline-block; background-color: var(--color-accent); color: white !important; padding: 0.8rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 700; border: none; cursor: pointer; z-index: 1; }
.gumbo-button .gumbo-button-text { position: relative; z-index: 2; }
.gumbo-button::before { content: ''; position: absolute; inset: 0; background: var(--color-primary); transform-origin: left; transform: scaleX(0); transition: transform 0.4s ease; z-index: -1; }
.gumbo-button:hover::before { transform: scaleX(1); }

.tab-buttons { display: flex; border-bottom: 2px solid var(--component-card-glass-borderColor); gap: 1rem; }
.tab-button { padding: 0.75rem 1.5rem; cursor: pointer; background: none; border: none; font-size: 1.1rem; font-family: var(--font-headline); color: var(--color-secondary); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-button.active { color: var(--color-primary); border-color: var(--color-primary); }
.tab-panel { display: none; padding: 2rem; background: var(--component-card-glass-fallback-backgroundColor); border: 1px solid var(--component-card-glass-borderColor); border-top: none; border-radius: 0 0 var(--component-card-borderRadius) var(--component-card-borderRadius); }
.tab-panel.active { display: block; }

.accordion-group { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.accordion-item { border: 1px solid var(--component-card-glass-borderColor); border-radius: 8px; }
.accordion-trigger { width: 100%; background: none; border: none; text-align: left; padding: 1.5rem 2rem; font-size: 1.5rem; font-family: var(--font-headline); cursor: pointer; }
.mid-fold-summary { padding: 0 2rem 1.5rem; color: var(--color-secondary); border-bottom: 1px solid var(--component-card-glass-borderColor); }
.accordion-trigger[aria-expanded="true"] + .mid-fold-summary { display: none; }
.accordion-content { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); }
.accordion-content-inner { padding: 1.5rem 2rem; }

/* --- 4. DYNAMIC MODULES (PORTAL, MODAL, etc.) --- */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin-bottom: 2rem; }
#pjm-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.kanban-column { background-color: rgba(0,0,0,0.05); border-radius: 8px; padding: 1rem; min-height: 100px; }
.kanban-card { background: var(--color-surface); border-radius: 4px; padding: 1rem; margin-top: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); cursor: grab; }
.advocacy-tool { margin-top: 2rem; }
.advocacy-form { display: flex; gap: 1rem; align-items: center; background: rgba(0,0,0,0.05); padding: 1rem; border-radius: 8px; }

#modal-container { position: fixed; inset: 0; z-index: 100; background-color: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
#modal-container.visible { opacity: 1; visibility: visible; }
.modal-content { background: var(--color-surface); padding: 2rem; border-radius: 12px; max-width: 600px; position: relative; }
.modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; }
.gumbo-mixer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; }
.palette-button { display: flex; width: 100px; height: 100px; border-radius: 8px; cursor: pointer; border: 3px solid transparent; }
.palette-button.active { border-color: var(--color-accent); }

.error-message {
    background-color: #ffdddd;
    border: 1px solid #f44336;
    color: #f44336;
    padding: 1rem;
    border-radius: var(--component-card-borderRadius);
    margin-bottom: 2rem;
}