/* Mazino Tabs Base Styles - CSS Only Frontend with Proven Accessibility */

/* =========================
   CSS VARIABLES - UNIFIED SYSTEM
   ========================= */

:root {
    /* Breakpoints */
    --mazino-medium-breakpoint: 900px;
    --mazino-tablet-breakpoint: 768px;
    --mazino-mobile-breakpoint: 600px;
    --mazino-small-mobile-breakpoint: 400px;
    
    /* Transitions */
    --mazino-transition-duration: 0.2s;
    --mazino-transition-easing: ease;
    --mazino-slider-transition-duration: 0.33s;
    --mazino-slider-transition-easing: cubic-bezier(0.165, 0.84, 0.44, 1);
    --mazino-panel-transition-duration: 0.4s;
    --mazino-panel-transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --mazino-color-transition-duration: 0.3s;
    --mazino-color-transition-easing: ease;
    
    /* Spacing */
    --mazino-spacing-xs: 0.25em;
    --mazino-spacing-sm: 0.5em;
    --mazino-spacing-md: 1em;
    --mazino-spacing-lg: 1.5em;
    --mazino-content-spacing: 0;
    
    /* Shadows */
    --mazino-shadow-default: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    --mazino-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    --mazino-shadow-heavy: 0 25px 50px rgba(0, 0, 0, 0.35), 0 15px 20px rgba(0, 0, 0, 0.3);
    --mazino-shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1);
    --mazino-shadow-sharp: 0 5px 15px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    .mazino-tabs-container,
    .mazino-tabs-container * {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* =========================
   CORE STRUCTURE
   ========================= */

/* Container */
.mazino-tabs-container {
    position: relative;
    background: var(--mazino-container-bg, transparent);
    border: var(--mazino-container-border, none);
    border-radius: var(--mazino-border-radius, 0);
    padding: var(--mazino-container-padding, 0);
    font-family: inherit;
    box-sizing: border-box;
}

/* Shadow variations */
.mazino-tabs-container.shadow-default { box-shadow: var(--mazino-shadow-default); }
.mazino-tabs-container.shadow-light { box-shadow: var(--mazino-shadow-light); }
.mazino-tabs-container.shadow-heavy { box-shadow: var(--mazino-shadow-heavy); }
.mazino-tabs-container.shadow-soft { box-shadow: var(--mazino-shadow-soft); }
.mazino-tabs-container.shadow-sharp { box-shadow: var(--mazino-shadow-sharp); }
.mazino-tabs-container.no-shadow { box-shadow: none; }

/* Hide radio inputs - proven accessibility standard */
.mazino-tab-input {
    position: absolute;
    left: -9999px;
}

/* Navigation */
.mazino-tabs-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* Tab labels (act like buttons) */
.mazino-tab-label {
    flex: 1;
    padding: var(--mazino-tab-padding, 0);
    background: var(--mazino-inactive-tab-bg, transparent);
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: var(--mazino-inactive-font-weight, normal);
    font-size: var(--mazino-tab-font-size, inherit);
    color: var(--mazino-inactive-tab-text, currentColor);
    text-transform: var(--mazino-tab-text-transform, none);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: var(--mazino-border-radius, 0);
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    box-sizing: border-box;
    transition: all var(--mazino-transition-duration) var(--mazino-transition-easing);
}

/* Hover states */
.mazino-tab-label:hover {
    background: var(--mazino-hover-tab-bg, var(--mazino-inactive-tab-bg, transparent));
}

/* Focus styles for keyboard navigation - proven solution */
.mazino-tab-input:nth-child(1):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(1),
.mazino-tab-input:nth-child(2):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(2),
.mazino-tab-input:nth-child(3):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(3),
.mazino-tab-input:nth-child(4):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(4),
.mazino-tab-input:nth-child(5):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(5),
.mazino-tab-input:nth-child(6):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(6) {
    outline: 2px solid var(--mazino-indicator-color, #0073aa);
    outline-offset: 2px;
}

/* Remove focus ring on mouse clicks, keep for keyboard - WordPress standard */
.mazino-tab-input:nth-child(1):focus:not(:focus-visible) ~ .mazino-tabs-nav .mazino-tab-label:nth-child(1),
.mazino-tab-input:nth-child(2):focus:not(:focus-visible) ~ .mazino-tabs-nav .mazino-tab-label:nth-child(2),
.mazino-tab-input:nth-child(3):focus:not(:focus-visible) ~ .mazino-tabs-nav .mazino-tab-label:nth-child(3),
.mazino-tab-input:nth-child(4):focus:not(:focus-visible) ~ .mazino-tabs-nav .mazino-tab-label:nth-child(4),
.mazino-tab-input:nth-child(5):focus:not(:focus-visible) ~ .mazino-tabs-nav .mazino-tab-label:nth-child(5),
.mazino-tab-input:nth-child(6):focus:not(:focus-visible) ~ .mazino-tabs-nav .mazino-tab-label:nth-child(6) {
    outline: none !important;
}

/* Fallback for older browsers that don't support :focus-visible */
.mazino-tab-label:focus {
    outline: none;
}

.mazino-tab-label:focus-visible {
    outline: 2px solid var(--mazino-indicator-color, #0073aa);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mazino-tab-input:nth-child(1):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(1),
    .mazino-tab-input:nth-child(2):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(2),
    .mazino-tab-input:nth-child(3):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(3),
    .mazino-tab-input:nth-child(4):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(4),
    .mazino-tab-input:nth-child(5):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(5),
    .mazino-tab-input:nth-child(6):focus ~ .mazino-tabs-nav .mazino-tab-label:nth-child(6) {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* Icon and title */
.mazino-tab-label .tab-icon {
    font-size: var(--mazino-icon-size, inherit);
    line-height: 1;
}

.mazino-tab-label .tab-title {
    font-size: inherit;
}

/* Slider */
.mazino-slider {
    position: relative;
    transition: transform var(--mazino-slider-transition-duration) var(--mazino-slider-transition-easing);
}

/* Dynamic slider width - Based on tab count (needed for editor) */
.mazino-tabs-container[data-tab-count="2"] .mazino-slider { width: 50%; }
.mazino-tabs-container[data-tab-count="3"] .mazino-slider { width: 33.333%; }
.mazino-tabs-container[data-tab-count="4"] .mazino-slider { width: 25%; }
.mazino-tabs-container[data-tab-count="5"] .mazino-slider { width: 20%; }
.mazino-tabs-container[data-tab-count="6"] .mazino-slider { width: 16.666%; }

/* Indicator - 48px width */
.mazino-indicator {
    width: 48px;
    max-width: 100%;
    height: var(--mazino-indicator-height, 4px);
    margin: 0 auto;
    background: var(--mazino-indicator-color, currentColor);
    border-radius: var(--mazino-border-radius, 0);
    transition: background-color var(--mazino-color-transition-duration) var(--mazino-color-transition-easing);
}

/* Transform-based positioning - Each tab needs individual rule */
.mazino-tabs-container[data-active-tab="0"] .mazino-slider { transform: translateX(0%); }
.mazino-tabs-container[data-active-tab="1"] .mazino-slider { transform: translateX(100%); }
.mazino-tabs-container[data-active-tab="2"] .mazino-slider { transform: translateX(200%); }
.mazino-tabs-container[data-active-tab="3"] .mazino-slider { transform: translateX(300%); }
.mazino-tabs-container[data-active-tab="4"] .mazino-slider { transform: translateX(400%); }
.mazino-tabs-container[data-active-tab="5"] .mazino-slider { transform: translateX(500%); }

/* Content area */
.mazino-tabs-content {
    margin: 0;
    margin-top: var(--mazino-content-spacing, 0);
    background: transparent;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

/* Content containment */
.mazino-tabs-content form,
.mazino-tabs-content .wpcf7,
.mazino-tabs-content .contact-form,
.mazino-tabs-content .form-container,
.mazino-tabs-content .shortcode-content {
    max-width: 100%;
    box-sizing: border-box;
}

.mazino-tabs-content table,
.mazino-tabs-content img,
.mazino-tabs-content iframe,
.mazino-tabs-content video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.mazino-tabs-content input[type="text"],
.mazino-tabs-content input[type="email"],
.mazino-tabs-content input[type="tel"],
.mazino-tabs-content input[type="url"],
.mazino-tabs-content textarea,
.mazino-tabs-content select {
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================
   CSS-ONLY TAB FUNCTIONALITY
   ========================= */

/* FRONTEND: Radio-based functionality */
/* Active label states - when corresponding radio is checked */
.mazino-tab-input:nth-child(1):checked ~ .mazino-tabs-nav .mazino-tab-label:nth-child(1),
.mazino-tab-input:nth-child(2):checked ~ .mazino-tabs-nav .mazino-tab-label:nth-child(2),
.mazino-tab-input:nth-child(3):checked ~ .mazino-tabs-nav .mazino-tab-label:nth-child(3),
.mazino-tab-input:nth-child(4):checked ~ .mazino-tabs-nav .mazino-tab-label:nth-child(4),
.mazino-tab-input:nth-child(5):checked ~ .mazino-tabs-nav .mazino-tab-label:nth-child(5),
.mazino-tab-input:nth-child(6):checked ~ .mazino-tabs-nav .mazino-tab-label:nth-child(6) {
    cursor: default;
    color: var(--mazino-active-tab-text, currentColor);
    font-weight: var(--mazino-active-font-weight, bold);
    background: var(--mazino-active-tab-bg, var(--mazino-inactive-tab-bg, transparent));
}

/* FRONTEND: Slider positioning - CSS transforms based on checked radio */
.mazino-tab-input:nth-child(1):checked ~ .mazino-slider { transform: translateX(0%); }
.mazino-tab-input:nth-child(2):checked ~ .mazino-slider { transform: translateX(100%); }
.mazino-tab-input:nth-child(3):checked ~ .mazino-slider { transform: translateX(200%); }
.mazino-tab-input:nth-child(4):checked ~ .mazino-slider { transform: translateX(300%); }
.mazino-tab-input:nth-child(5):checked ~ .mazino-slider { transform: translateX(400%); }
.mazino-tab-input:nth-child(6):checked ~ .mazino-slider { transform: translateX(500%); }

/* FRONTEND: Panel visibility - show corresponding panel when radio is checked */
.mazino-tab-panel {
    display: none;
    opacity: 0;
    transition: opacity var(--mazino-panel-transition-duration) var(--mazino-panel-transition-easing);
}

.mazino-tab-input:nth-child(1):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(1),
.mazino-tab-input:nth-child(2):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(2),
.mazino-tab-input:nth-child(3):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(3),
.mazino-tab-input:nth-child(4):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(4),
.mazino-tab-input:nth-child(5):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(5),
.mazino-tab-input:nth-child(6):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(6) {
    display: block;
    opacity: 1;
    animation: fadeInContent 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fadeInContent {
    from { 
        opacity: 0; 
        transform: translateY(5px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* =========================
   EDITOR PREVIEW FUNCTIONALITY (data-active-tab based)
   ========================= */

/* EDITOR: Active label states */
.mazino-tabs-container[data-active-tab="0"] .mazino-tab-label:nth-child(1),
.mazino-tabs-container[data-active-tab="1"] .mazino-tab-label:nth-child(2),
.mazino-tabs-container[data-active-tab="2"] .mazino-tab-label:nth-child(3),
.mazino-tabs-container[data-active-tab="3"] .mazino-tab-label:nth-child(4),
.mazino-tabs-container[data-active-tab="4"] .mazino-tab-label:nth-child(5),
.mazino-tabs-container[data-active-tab="5"] .mazino-tab-label:nth-child(6) {
    cursor: default;
    color: var(--mazino-active-tab-text, currentColor);
    font-weight: var(--mazino-active-font-weight, bold);
    background: var(--mazino-active-tab-bg, var(--mazino-inactive-tab-bg, transparent));
}

/* EDITOR: Slider positioning */
.mazino-tabs-container[data-active-tab="0"] .mazino-slider { transform: translateX(0%); }
.mazino-tabs-container[data-active-tab="1"] .mazino-slider { transform: translateX(100%); }
.mazino-tabs-container[data-active-tab="2"] .mazino-slider { transform: translateX(200%); }
.mazino-tabs-container[data-active-tab="3"] .mazino-slider { transform: translateX(300%); }
.mazino-tabs-container[data-active-tab="4"] .mazino-slider { transform: translateX(400%); }
.mazino-tabs-container[data-active-tab="5"] .mazino-slider { transform: translateX(500%); }

/* Responsive design */
@media (max-width: var(--mazino-medium-breakpoint)) {
    .mazino-tab-label { 
        white-space: initial;
    }
}

@media (max-width: var(--mazino-tablet-breakpoint)) {
    .mazino-tab-label { 
        white-space: initial;
    }
}