/*
CHANGE LOG
File: static/css/nsg_accordion.css
Purpose: 3-layer accordion hierarchy
Version History:
2026-01-14 v1.0 - Copied from NSG standards
*/

/* LAYER 1: SECTION HEADERS */
.accordion-section {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    cursor: pointer;
    padding: 18px 20px;
    width: 100%;
    border: none;
    border-radius: var(--border-radius-md);
    text-align: left;
    font-size: var(--font-size-large);
    font-weight: 600;
    margin-top: 15px;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-section:first-of-type { margin-top: 0; }
.accordion-section:hover { background-color: var(--color-primary); }
.accordion-section::after { content: '+'; font-size: 1.2rem; font-weight: bold; }
.accordion-section.active::after { content: '−'; }
.accordion-section.active {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

/* LAYER 2: STANDARD ACCORDIONS */
.accordion {
    background: var(--color-secondary-light);
    color: var(--color-primary);
    cursor: pointer;
    padding: 1rem 1.25rem;
    width: 100%;
    border: var(--border-width) solid var(--color-secondary);
    border-radius: var(--border-radius-md);
    text-align: left;
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-top: 0.75rem;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion:first-of-type { margin-top: 0; }
.accordion::after { content: '+'; font-size: 1.1rem; color: var(--color-primary-light); }
.accordion.active::after { content: '−'; color: var(--color-white); }
.accordion:hover {
    background: var(--color-secondary);
    border-color: var(--color-primary-light);
}
.accordion.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

/* LAYER 3: PANELS */
.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: var(--color-white);
    border: var(--border-width) solid var(--color-secondary);
    border-top: none;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    padding: 0 1.25rem;
}

.panel.open { max-height: 5000px; padding: 1.25rem; }

.panel p, .panel ul, .panel ol {
    margin: var(--spacing-md) 0;
    color: var(--color-text);
    line-height: var(--line-height-base);
}
.panel ul, .panel ol { padding-left: var(--spacing-lg); }
.panel li { margin-bottom: var(--spacing-sm); }

/* PANEL-SECTION */
.panel-section {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background-color: var(--color-secondary-light);
    border-left: var(--border-accent-width) solid var(--color-primary-dark);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    margin-bottom: 5px;
    padding: 0;
}
.panel-section.open { 
    max-height: 5000px; 
    padding: 10px 0;
}
.panel-section > .accordion { margin: 5px 10px; }
.panel-section > .panel { margin: 0 10px 5px 10px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .accordion-section { padding: 14px 16px; font-size: var(--font-size-base); }
    .accordion { padding: 0.875rem 1rem; font-size: var(--font-size-small); }
}