/**
 * Departments Menu Toggle Styling
 * 
 * Clean open/close toggle styling:
 * - Closed state: hidden
 * - Open state: visible with smooth transition
 * - Works with existing static CSS (departments__links-wrapper)
 * 
 * @package RinnoTools
 */

/* ============================================
   Departments Links Wrapper - Toggle States
   ============================================ */

/* Closed state (default) - hide menu body using links-wrapper */
/* Only apply to non-fixed departments */
.departments:not(.departments--fixed):not(.departments--opened) .departments__links-wrapper {
    overflow: hidden !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    /* Don't use display:none to allow CSS transitions */
}

/* Open state - show menu body */
.departments.departments--opened .departments__links-wrapper {
    overflow: visible !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force visibility for opened state (override any inline styles) */
.departments.departments--opened .departments__links-wrapper[style] {
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   Button Background - Fixed Color
   ============================================ */

/* Fixed background color in all states */
.departments__button {
    background: #dd3333 !important;
    color: #ffffff !important; /* White text/icons */
}

/* Override any hover/active/focus states */
.departments__button:hover,
.departments__button:focus,
.departments__button:active,
.departments--opened .departments__button,
.departments:not(.departments--opened) .departments__button {
    background: #dd3333 !important;
    color: #ffffff !important; /* White text/icons in all states */
}

/* ============================================
   Button Icons - Fixed White Color
   ============================================ */

/* Fixed white fill for icons in all states */
.departments__button-icon,
.departments__button-arrow {
    fill: #ffffff !important;
}

/* Override any hover states that might change icon color */
.departments__button:hover .departments__button-icon,
.departments__button:hover .departments__button-arrow,
.departments__button:focus .departments__button-icon,
.departments__button:focus .departments__button-arrow,
.departments__button:active .departments__button-icon,
.departments__button:active .departments__button-arrow,
.departments--opened .departments__button-icon,
.departments--opened .departments__button-arrow,
.departments--opened .departments__button:hover .departments__button-icon,
.departments--opened .departments__button:hover .departments__button-arrow,
.departments--opened .departments__button:focus .departments__button-icon,
.departments--opened .departments__button:focus .departments__button-arrow,
.departments:not(.departments--opened) .departments__button-icon,
.departments:not(.departments--opened) .departments__button-arrow {
    fill: #ffffff !important;
}

/* Override static CSS hover rule that sets fill to currentColor */
.departments:not(.departments--fixed) .departments__button:hover .departments__button-icon,
.departments:not(.departments--fixed) .departments__button:hover .departments__button-arrow {
    fill: #ffffff !important;
}

/* Override static CSS that sets fill to #859ba6 (base state) */
.departments__button-icon,
.departments__button-arrow {
    fill: #ffffff !important;
}

/* ============================================
   Button Arrow Animation
   ============================================ */

.departments__button-arrow {
    transition: transform 0.2s ease;
}

.departments.departments--opened .departments__button-arrow {
    transform: rotate(180deg);
}

/* ============================================
   Departments Body - Ensure Visibility
   ============================================ */

/* Closed: hide body */
.departments:not(.departments--opened):not(.departments--fixed) .departments__body {
    display: none !important;
}

/* Open: show body */
.departments.departments--opened .departments__body {
    display: block !important;
}

/* Fixed: always show */
.departments.departments--fixed .departments__body {
    display: block !important;
}

/* ============================================
   Mobile Behavior
   ============================================ */

@media (max-width: 991px) {
    /* On mobile, body is positioned absolutely */
    .departments__body {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
        background: var(--color-surface, #3d464d);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
}

/* ============================================
   Desktop Behavior (Fixed Mode)
   ============================================ */

/* Fixed mode: menu is always open (no toggle) */
.departments--fixed {
    /* Keep existing fixed behavior - menu always open */
}

.departments--fixed .departments__links-wrapper {
    display: block !important;
}

.departments--fixed .departments__button {
    cursor: default;
}

/* ============================================
   Graceful Fallback (No JS)
   ============================================ */

/* If JS is disabled, show menu by default */
.no-js .departments .departments__links-wrapper {
    display: block !important;
}