/* CSH Tabs Block Styles - Modern Design */
.csh-tabs-block,
.wp-block-csh-tabs-block-tabs {
    margin: 0;
    font-family: inherit;
}

/* Light Mode Tab Navigation (default) */
:root .csh-tabs-block .tab-navigation,
:root .wp-block-csh-tabs-block-tabs .tab-navigation {
    display: flex;
    justify-content: space-evenly;
    border-bottom: 2px solid #e1e5e9;
    margin-bottom: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

:root .csh-tabs-block .tab-nav-button,
:root .wp-block-csh-tabs-block-tabs .tab-nav-button {
    background: #ffffff;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: #495057;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    outline: none;
    flex: 1;
    text-align: center;
}

:root .csh-tabs-block .tab-nav-button:hover,
:root .wp-block-csh-tabs-block-tabs .tab-nav-button:hover {
    background: #e9ecef;
    color: #495057;
}

:root .csh-tabs-block .tab-nav-button.active,
:root .wp-block-csh-tabs-block-tabs .tab-nav-button.active {
    background: #ffffff;
    color: #007cba;
    border-bottom-color: #007cba;
    font-weight: 600;
}

:root .csh-tabs-block .tab-nav-button:focus,
:root .wp-block-csh-tabs-block-tabs .tab-nav-button:focus {
    box-shadow: inset 0 0 0 2px #007cba;
    z-index: 1;
}

/* Tab Content Area */
:root .csh-tabs-block .tab-content-area,
:root .wp-block-csh-tabs-block-tabs .tab-content-area {
    background: #ffffff;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.csh-tabs-block .tab-panel,
.wp-block-csh-tabs-block-tabs .tab-panel {
    padding: 0;
    color: #1a1a1a !important;
    font-size: 1rem;
    line-height: 1.6;
    animation: fadeIn 0.2s ease-in-out;
    background: transparent !important;
}

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

/* Tab content styling */
.csh-tabs-block .tab-panel p,
.wp-block-csh-tabs-block-tabs .tab-panel p {
    margin: 0 0 1rem 0;
    font-family: inherit;
}

.csh-tabs-block .tab-panel p:last-child,
.wp-block-csh-tabs-block-tabs .tab-panel p:last-child {
    margin-bottom: 0;
}

.csh-tabs-block .tab-panel h1,
.csh-tabs-block .tab-panel h2,
.csh-tabs-block .tab-panel h3,
.csh-tabs-block .tab-panel h4,
.csh-tabs-block .tab-panel h5,
.csh-tabs-block .tab-panel h6,
.wp-block-csh-tabs-block-tabs .tab-panel h1,
.wp-block-csh-tabs-block-tabs .tab-panel h2,
.wp-block-csh-tabs-block-tabs .tab-panel h3,
.wp-block-csh-tabs-block-tabs .tab-panel h4,
.wp-block-csh-tabs-block-tabs .tab-panel h5,
.wp-block-csh-tabs-block-tabs .tab-panel h6 {
    color: #1a1a1a;
    font-family: inherit;
    line-height: inherit;
    margin: 0 0 1rem 0;
}

/* Hide original tab items (replaced by navigation) */
.csh-tabs-block .tab-item,
.wp-block-csh-tabs-block-tabs .tab-item {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .csh-tabs-block .tab-navigation,
    .wp-block-csh-tabs-block-tabs .tab-navigation {
        flex-direction: column;
        border-bottom: none;
        border-radius: 8px;
    }
    
    .csh-tabs-block .tab-nav-button,
    .wp-block-csh-tabs-block-tabs .tab-nav-button {
        border-bottom: 1px solid #e1e5e9;
        border-radius: 0;
        text-align: left;
    }
    
    .csh-tabs-block .tab-nav-button:last-child,
    .wp-block-csh-tabs-block-tabs .tab-nav-button:last-child {
        border-bottom: none;
    }
    
    .csh-tabs-block .tab-nav-button.active,
    .wp-block-csh-tabs-block-tabs .tab-nav-button.active {
        border-left: 4px solid #007cba;
        border-bottom: 1px solid #e1e5e9;
    }
}

/* Dark mode support - system preference */
@media (prefers-color-scheme: dark) {
    .csh-tabs-block .tab-navigation,
    .wp-block-csh-tabs-block-tabs .tab-navigation {
        border-bottom-color: #404040;
        background: #1a1a1a;
    }
    
    .csh-tabs-block .tab-nav-button,
    .wp-block-csh-tabs-block-tabs .tab-nav-button {
        background: #2a2a2a;
        color: #ffffff;
    }
    
    .csh-tabs-block .tab-nav-button:hover,
    .wp-block-csh-tabs-block-tabs .tab-nav-button:hover {
        background: #3a3a3a;
        color: #ffffff;
    }
    
    .csh-tabs-block .tab-nav-button.active,
    .wp-block-csh-tabs-block-tabs .tab-nav-button.active {
        background: #1a1a1a;
        color: #4fc3f7;
        border-bottom-color: #4fc3f7;
    }
    
    .csh-tabs-block .tab-content-area,
    .wp-block-csh-tabs-block-tabs .tab-content-area {
        background: #1a1a1a;
    }
    
    .csh-tabs-block .tab-panel,
    .wp-block-csh-tabs-block-tabs .tab-panel {
        color: #ffffff;
    }
    
    .csh-tabs-block .tab-panel h1,
    .csh-tabs-block .tab-panel h2,
    .csh-tabs-block .tab-panel h3,
    .csh-tabs-block .tab-panel h4,
    .csh-tabs-block .tab-panel h5,
    .csh-tabs-block .tab-panel h6,
    .wp-block-csh-tabs-block-tabs .tab-panel h1,
    .wp-block-csh-tabs-block-tabs .tab-panel h2,
    .wp-block-csh-tabs-block-tabs .tab-panel h3,
    .wp-block-csh-tabs-block-tabs .tab-panel h4,
    .wp-block-csh-tabs-block-tabs .tab-panel h5,
    .wp-block-csh-tabs-block-tabs .tab-panel h6 {
        color: #ffffff;
    }
}

/* Theme switcher support - html.dark class */
html.dark .csh-tabs-block .tab-navigation,
html.dark .wp-block-csh-tabs-block-tabs .tab-navigation {
    border-bottom-color: #404040;
    background: #1a1a1a;
}

html.dark .csh-tabs-block .tab-nav-button,
html.dark .wp-block-csh-tabs-block-tabs .tab-nav-button {
    background: #2a2a2a;
    color: #ffffff;
}

html.dark .csh-tabs-block .tab-nav-button:hover,
html.dark .wp-block-csh-tabs-block-tabs .tab-nav-button:hover {
    background: #3a3a3a;
    color: #ffffff;
}

html.dark .csh-tabs-block .tab-nav-button.active,
html.dark .wp-block-csh-tabs-block-tabs .tab-nav-button.active {
    background: #1a1a1a;
    color: #4fc3f7;
    border-bottom-color: #4fc3f7;
}

html.dark .csh-tabs-block .tab-content-area,
html.dark .wp-block-csh-tabs-block-tabs .tab-content-area {
    background: #1a1a1a;
}

html.dark .csh-tabs-block .tab-panel,
html.dark .wp-block-csh-tabs-block-tabs .tab-panel {
    color: #ffffff;
}

html.dark .csh-tabs-block .tab-panel h1,
html.dark .csh-tabs-block .tab-panel h2,
html.dark .csh-tabs-block .tab-panel h3,
html.dark .csh-tabs-block .tab-panel h4,
html.dark .csh-tabs-block .tab-panel h5,
html.dark .csh-tabs-block .tab-panel h6,
html.dark .wp-block-csh-tabs-block-tabs .tab-panel h1,
html.dark .wp-block-csh-tabs-block-tabs .tab-panel h2,
html.dark .wp-block-csh-tabs-block-tabs .tab-panel h3,
html.dark .wp-block-csh-tabs-block-tabs .tab-panel h4,
html.dark .wp-block-csh-tabs-block-tabs .tab-panel h5,
html.dark .wp-block-csh-tabs-block-tabs .tab-panel h6 {
    color: #ffffff;
}