/*
===========================================================================
DO NOT MODIFY THIS FILE - NSG STANDARDS
===========================================================================
File: nsg_accordion.css
Purpose: 3-layer accordion hierarchy for all NSG sites
Location: /var/www/html/nsg_standards/css/

SEE: NSG_ACCORDION_GUIDE.md for full documentation

CRITICAL: Main headings use BOTH classes: class="accordion accordion-section"
===========================================================================
2025-12-19 v1.0 - Initial creation
2025-12-20 v2.0 - Fixed to match Leaf River pattern
===========================================================================
*/

/* BASE ACCORDION (all accordions share this) */
.accordion {
    background: #f5f9fa;
    color: #2b6777;
    cursor: pointer;
    padding: 1rem 1.25rem;
    width: 100%;
    border: 1px solid #d4e8ed;
    border-radius: 6px;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    transition: all 0.2s;
}

.accordion:first-of-type { margin-top: 0; }
.accordion::after { content: '+'; float: right; color: #52ab98; }
.accordion.active::after { content: '−'; color: white; }
.accordion:hover { background: #e8f4f8; border-color: #52ab98; }
.accordion.active { background: #2b6777; color: white; border-radius: 6px 6px 0 0; }

/* SECTION HEADERS (dark background) - Use: class="accordion accordion-section" */
.accordion-section {
    background-color: #34495e;
    color: white;
    font-size: 1.15em;
    font-weight: 600;
    padding: 18px 20px;
    margin-top: 15px;
    border: none;
    border-radius: 6px;
}

.accordion-section:first-of-type { margin-top: 0; }
.accordion-section:hover { background-color: #2c3e50; }
.accordion-section::after { color: white; font-weight: bold; }
.accordion-section.active { background-color: #2c3e50; border-radius: 6px 6px 0 0; }

/* PANELS */
.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #fafcfd;
    border: 1px solid #d4e8ed;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 0 1.25rem;
}

.panel.open { max-height: 5000px; }
.panel p, .panel ul, .panel ol { margin: 1rem 0; }
.panel ul, .panel ol { padding-left: 1.5rem; }
.panel li { margin-bottom: 0.5rem; }

/* PANEL-SECTION (container for nested accordions) */
.panel-section {
    padding: 10px 0;
    background-color: #f5f7f7;
    border-left: 4px solid #34495e;
    border-radius: 0 0 6px 6px;
    margin-bottom: 5px;
}

.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: 1rem; }
    .accordion { padding: 0.875rem 1rem; font-size: 0.95rem; }
}