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

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

/* Frontend-specific additions */
.mazino-tabs-container {
    color: var(--mazino-text-color);
    margin: var(--mazino-container-margin) auto;
    width: var(--mazino-container-width);
}

/* Frontend indicator - 48px width */
.mazino-indicator {
    width: 48px;
}

/* Enhanced panel headings */
.mazino-tab-panel h2 {
    font-family: inherit;
    font-weight: var(--mazino-active-font-weight);
    font-size: var(--mazino-heading-font-size);
    color: var(--mazino-active-color);
    margin: var(--mazino-heading-margin);
    transition: color var(--mazino-color-transition-duration) var(--mazino-color-transition-easing);
}

.mazino-tab-panel h2::after {
    content: "";
    display: var(--mazino-heading-underline-display, none);
    width: var(--mazino-heading-underline-width, 0);
    height: var(--mazino-heading-underline-height, 0);
    background: var(--mazino-indicator-color);
    margin: var(--mazino-heading-underline-margin);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--mazino-underline-transition-duration, 0.4s) var(--mazino-underline-transition-easing, cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

/* Activate heading animation when panel is visible */
.mazino-tab-input:nth-child(1):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(1) h2::after,
.mazino-tab-input:nth-child(2):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(2) h2::after,
.mazino-tab-input:nth-child(3):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(3) h2::after,
.mazino-tab-input:nth-child(4):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(4) h2::after,
.mazino-tab-input:nth-child(5):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(5) h2::after,
.mazino-tab-input:nth-child(6):checked ~ .mazino-tabs-content .mazino-tab-panel:nth-child(6) h2::after {
    transform: scaleX(1);
}

/* RESPONSIVE */
@media (max-width: var(--mazino-mobile-breakpoint)) {
    .mazino-tabs-container {
        width: var(--mazino-mobile-width);
        padding: var(--mazino-mobile-padding);
    }
    
    .mazino-tab-label {
        padding: var(--mazino-mobile-tab-padding);
        border-radius: var(--mazino-mobile-border-radius);
        font-size: var(--mazino-mobile-font-size);
        touch-action: manipulation;
    }
    
    .mazino-tab-label .tab-icon {
        font-size: var(--mazino-mobile-icon-size);
        margin: var(--mazino-mobile-icon-margin);
    }
    
    .mazino-slider { 
        display: var(--mazino-mobile-slider-display);
    }
    
    .mazino-tabs-content { 
        margin-top: var(--mazino-content-spacing, 0);
    }
}

@media (max-width: var(--mazino-small-mobile-breakpoint)) {
    .mazino-tabs-container {
        padding: var(--mazino-small-mobile-padding);
    }
    
    .mazino-tab-label { 
        padding: var(--mazino-small-mobile-tab-padding);
    }
    
    .mazino-tab-label .tab-title { 
        display: var(--mazino-small-mobile-title-display);
    }
    
    .mazino-tab-label .tab-icon { 
        font-size: var(--mazino-small-mobile-icon-size);
    }
}

/* Print styles */
@media print {
    .mazino-tabs-container .mazino-slider {
        display: none;
    }
    
    .mazino-tabs-container .mazino-tab-label {
        transition: none;
    }
    
    .mazino-tabs-container .mazino-tab-panel {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none;
    }
    
    .mazino-tab-input {
        display: none;
    }
}