/**
 * Slider Menu Styles
 * Version 2.4.0
 * 
 * Note: Responsive column rules are loaded inline from settings
 */

:root {
    /* Primary Colors */
    --slider-menu-primary: #e63946;
    --slider-menu-primary-hover: #c1121f;
    
    /* Text Colors */
    --slider-menu-text: #333333;
    --slider-menu-text-light: #666666;
    --slider-menu-text-hover: var(--slider-menu-primary);
    
    /* Background Colors */
    --slider-menu-bg: #ffffff;
    --slider-menu-bg-hover: #f8f9fa;
    
    /* Border Colors */
    --slider-menu-border: #e9ecef;
    
    /* Arrow/Icon Colors */
    --slider-menu-arrow: #999999;
    --slider-menu-arrow-hover: var(--slider-menu-primary);
    
    /* Breadcrumb */
    --slider-menu-breadcrumb-separator: #cccccc;
    --slider-menu-breadcrumb-height: 1.5rem;
    
    /* Column Header */
    --slider-menu-header-font-size: 0.875rem;
    --slider-menu-header-font-weight: 700;
    --slider-menu-header-color: var(--slider-menu-text);
    --slider-menu-header-color-hover: var(--slider-menu-primary);
    --slider-menu-header-text-transform: uppercase;
    --slider-menu-header-letter-spacing: 0.05em;
    --slider-menu-header-margin-bottom: 0.75rem;
    --slider-menu-header-padding-bottom: 0.5rem;
    
    /* Spacing */
    --slider-menu-gap: 1.5rem;
    --slider-menu-padding: 1rem;
    --slider-menu-item-padding: 0.625rem 0;
    
    /* Animation */
    --slider-menu-transition-duration: 0.3s;
    --slider-menu-transition-easing: ease-in-out;
    
    /* Typography */
    --slider-menu-font-family: inherit;
    --slider-menu-font-size: 0.9375rem;
    --slider-menu-font-size-breadcrumb: 0.75rem;
    --slider-menu-font-weight-normal: 400;
    --slider-menu-font-weight-bold: 600;
}

/* ==========================================================================
   Wrapper & Viewport
   ========================================================================== */

.slider-menu-wrapper {
    position: relative;
    width: 100%;
    font-family: var(--slider-menu-font-family);
    font-size: var(--slider-menu-font-size);
    background-color: var(--slider-menu-bg);
}

.slider-menu-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slider-menu-slider {
    position: relative;
    display: flex;
}

/* ==========================================================================
   Breadcrumb Navigation (Bottom) - Fixed height to prevent layout shift
   ========================================================================== */

.slider-menu-breadcrumb,
.slider-menu-breadcrumb-nav {
    padding: 0.5rem var(--slider-menu-padding) 0;
    min-height: var(--slider-menu-breadcrumb-height);
    font-size: var(--slider-menu-font-size-breadcrumb);
    color: var(--slider-menu-text-light);
}

.slider-menu-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 1em;
}

.slider-menu-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.slider-menu-breadcrumb-link {
    color: var(--slider-menu-text-light);
    text-decoration: none;
    transition: color var(--slider-menu-transition-duration) var(--slider-menu-transition-easing);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--slider-menu-font-size-breadcrumb);
}

.slider-menu-breadcrumb-link:hover,
.slider-menu-breadcrumb-link:focus {
    color: var(--slider-menu-primary);
}

.slider-menu-breadcrumb-separator {
    color: var(--slider-menu-breadcrumb-separator);
    font-size: 0.625rem;
    user-select: none;
}

.slider-menu-breadcrumb-separator::before {
    content: "›";
}

.slider-menu-breadcrumb-current {
    color: var(--slider-menu-text);
    font-weight: var(--slider-menu-font-weight-bold);
}

/* ==========================================================================
   Menu Level
   ========================================================================== */

.slider-menu-level {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    padding: var(--slider-menu-padding);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.slider-menu-level.is-active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

/* Level Header (Back button above columns in grouped mode) */
.slider-menu-level-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: var(--slider-menu-gap);
    padding-bottom: calc(var(--slider-menu-gap) / 2);
    border-bottom: 1px solid var(--slider-menu-border);
}

.slider-menu-level-header .slider-menu-back {
    display: inline-flex;
}

.slider-menu-level-header .slider-menu-overview-link {
    color: var(--slider-menu-text-light);
    text-decoration: none;
    font-size: var(--slider-menu-font-size);
    transition: color var(--slider-menu-transition-duration) var(--slider-menu-transition-easing);
}

.slider-menu-level-header .slider-menu-overview-link:hover {
    color: var(--slider-menu-primary);
}

/* ==========================================================================
   Columns Layout (base - responsive rules loaded inline)
   ========================================================================== */

.slider-menu-columns {
    display: grid;
    gap: var(--slider-menu-gap);
}

.slider-menu-column {
    min-width: 0;
}

/* ==========================================================================
   Column Header (for grouped mode)
   ========================================================================== */

.slider-menu-column-header {
    display: block;
    font-size: var(--slider-menu-header-font-size);
    font-weight: var(--slider-menu-header-font-weight);
    color: var(--slider-menu-header-color);
    text-transform: var(--slider-menu-header-text-transform);
    letter-spacing: var(--slider-menu-header-letter-spacing);
    margin-bottom: var(--slider-menu-header-margin-bottom);
    padding-bottom: var(--slider-menu-header-padding-bottom);
    text-decoration: none;
}

a.slider-menu-column-header {
    transition: color var(--slider-menu-transition-duration) var(--slider-menu-transition-easing);
}

a.slider-menu-column-header:hover,
a.slider-menu-column-header:focus {
    color: var(--slider-menu-header-color-hover);
}

/* ==========================================================================
   Menu List & Items
   ========================================================================== */

.slider-menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slider-menu-item {
    border-bottom: 1px solid var(--slider-menu-border);
}

.slider-menu-item:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Back Item
   ========================================================================== */

.slider-menu-item.is-back-item {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--slider-menu-border);
}

.slider-menu-item.is-back-item .slider-menu-link {
    color: var(--slider-menu-text-light);
    font-weight: var(--slider-menu-font-weight-bold);
}

.slider-menu-item.is-back-item .slider-menu-link:hover,
.slider-menu-item.is-back-item .slider-menu-link:focus {
    color: var(--slider-menu-primary);
}

/* ==========================================================================
   Overview Item
   ========================================================================== */

.slider-menu-item.is-overview-item {
    margin-bottom: 0.25rem;
}

.slider-menu-item.is-overview-item .slider-menu-link {
    font-weight: var(--slider-menu-font-weight-bold);
}

/* ==========================================================================
   Links & Triggers
   ========================================================================== */

.slider-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--slider-menu-item-padding);
    background: none;
    border: none;
    color: var(--slider-menu-text);
    font-family: var(--slider-menu-font-family);
    font-size: var(--slider-menu-font-size);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--slider-menu-transition-duration) var(--slider-menu-transition-easing),
                background-color var(--slider-menu-transition-duration) var(--slider-menu-transition-easing);
}

.slider-menu-link:hover,
.slider-menu-link:focus {
    color: var(--slider-menu-text-hover);
}

.slider-menu-link:focus {
    outline: none;
    background-color: var(--slider-menu-bg-hover);
}

.slider-menu-link-text {
    flex: 1;
    min-width: 0;
}

.slider-menu-back {
    justify-content: flex-start;
    gap: 0.5rem;
}

/* ==========================================================================
   Split Clickable (Title + Arrow separate)
   ========================================================================== */

.slider-menu-split {
    display: flex;
    align-items: center;
    width: 100%;
}

.slider-menu-split .slider-menu-link-part {
    flex: 1;
    display: flex;
    align-items: center;
    padding: var(--slider-menu-item-padding);
    padding-right: 0.5rem;
    background: none;
    border: none;
    color: var(--slider-menu-text);
    font-family: var(--slider-menu-font-family);
    font-size: var(--slider-menu-font-size);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--slider-menu-transition-duration) var(--slider-menu-transition-easing);
}

.slider-menu-split .slider-menu-link-part:hover,
.slider-menu-split .slider-menu-link-part:focus {
    color: var(--slider-menu-text-hover);
}

.slider-menu-split .slider-menu-trigger-part {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--slider-menu-item-padding);
    padding-left: 0.75rem;
    padding-right: 0.25rem;
    background: none;
    border: none;
    border-left: 1px solid var(--slider-menu-border);
    cursor: pointer;
    transition: background-color var(--slider-menu-transition-duration) var(--slider-menu-transition-easing);
}

.slider-menu-split .slider-menu-trigger-part:hover,
.slider-menu-split .slider-menu-trigger-part:focus {
    background-color: var(--slider-menu-bg-hover);
}

.slider-menu-split .slider-menu-trigger-part:focus {
    outline: none;
}

.slider-menu-split .slider-menu-trigger-part .slider-menu-arrow {
    margin-left: 0;
}

/* ==========================================================================
   Arrow Icons
   ========================================================================== */

.slider-menu-arrow {
    display: inline-block;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.75rem;
    border-right: 2px solid var(--slider-menu-arrow);
    border-top: 2px solid var(--slider-menu-arrow);
    transform: rotate(45deg);
    transition: border-color var(--slider-menu-transition-duration) var(--slider-menu-transition-easing),
                transform var(--slider-menu-transition-duration) var(--slider-menu-transition-easing);
}

.slider-menu-link:hover .slider-menu-arrow,
.slider-menu-link:focus .slider-menu-arrow,
.slider-menu-trigger-part:hover .slider-menu-arrow,
.slider-menu-trigger-part:focus .slider-menu-arrow {
    border-color: var(--slider-menu-arrow-hover);
    transform: rotate(45deg) translateX(2px) translateY(-2px);
}

.slider-menu-arrow-left {
    display: inline-block;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-left: 2px solid var(--slider-menu-arrow);
    border-bottom: 2px solid var(--slider-menu-arrow);
    transform: rotate(45deg);
    transition: border-color var(--slider-menu-transition-duration) var(--slider-menu-transition-easing),
                transform var(--slider-menu-transition-duration) var(--slider-menu-transition-easing);
}

.slider-menu-link:hover .slider-menu-arrow-left,
.slider-menu-link:focus .slider-menu-arrow-left {
    border-color: var(--slider-menu-arrow-hover);
    transform: rotate(45deg) translateX(-2px) translateY(2px);
}

/* ==========================================================================
   Error Message (Admin Only)
   ========================================================================== */

.slider-menu-error {
    padding: 1rem;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: var(--slider-menu-font-size);
}

/* ==========================================================================
   Mobile Base Styles (applied via inline CSS breakpoints)
   ========================================================================== */

@media (max-width: 767px) {
    :root {
        --slider-menu-gap: 1rem;
        --slider-menu-padding: 0.75rem;
    }
    
    .slider-menu-item {
        border-bottom: none;
    }
    
    .slider-menu-link {
        padding: 0.75rem 0;
    }
    
    .slider-menu-column-header {
        margin-top: 1rem;
    }
    
    .slider-menu-column:first-child .slider-menu-column-header {
        margin-top: 0;
    }
}

/* ==========================================================================
   Slide Animations
   ========================================================================== */

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutToLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.slider-menu-level.slide-in-right {
    animation: slideInFromRight var(--slider-menu-transition-duration) var(--slider-menu-transition-easing) forwards;
}

.slider-menu-level.slide-in-left {
    animation: slideInFromLeft var(--slider-menu-transition-duration) var(--slider-menu-transition-easing) forwards;
}

.slider-menu-level.slide-out-left {
    animation: slideOutToLeft var(--slider-menu-transition-duration) var(--slider-menu-transition-easing) forwards;
}

.slider-menu-level.slide-out-right {
    animation: slideOutToRight var(--slider-menu-transition-duration) var(--slider-menu-transition-easing) forwards;
}

/* Both levels visible and absolutely positioned during slide transition */
.slider-menu-level.is-active.is-sliding,
.slider-menu-level.is-sliding {
    opacity: 1;
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* Keep the entering level above the exiting one */
.slider-menu-level.slide-in-right,
.slider-menu-level.slide-in-left {
    z-index: 2;
}

.slider-menu-level.slide-out-left,
.slider-menu-level.slide-out-right {
    z-index: 1;
}

/* ==========================================================================
   Fade Animations
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.slider-menu-level.fade-in {
    animation: fadeIn var(--slider-menu-transition-duration) var(--slider-menu-transition-easing) forwards;
}

.slider-menu-level.fade-out {
    animation: fadeOut var(--slider-menu-transition-duration) var(--slider-menu-transition-easing) forwards;
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .slider-menu-slider,
    .slider-menu-level,
    .slider-menu-link,
    .slider-menu-arrow,
    .slider-menu-arrow-left,
    .slider-menu-breadcrumb-link,
    .slider-menu-split .slider-menu-link-part,
    .slider-menu-split .slider-menu-trigger-part,
    a.slider-menu-column-header {
        transition: none;
    }
    
    .slider-menu-level.slide-in-right,
    .slider-menu-level.slide-in-left,
    .slider-menu-level.slide-out-left,
    .slider-menu-level.slide-out-right,
    .slider-menu-level.fade-in,
    .slider-menu-level.fade-out {
        animation: none;
    }
}