/**
 * Tabs Block Styles
 *
 * @package Vision_Hall
 */

.tabs-block {
    width: 100%;
}

/* Navigation wrapper with border */
.tabs-block__nav-wrapper {
    margin-bottom: 60px;
}

/* Tab navigation - horizontal scroll on mobile */
.tabs-block__nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 44px;
    margin-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding-bottom: 4px;
}

.tabs-block__nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Tab button */
.tabs-block__button {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 4px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.tabs-block__button:focus {
    outline: 2px solid #81F249;
    outline-offset: 4px;
}

.tabs-block__button.is-active {
    /* Active state: green underline is always visible via .btn-link-green */
    /* The underline animation from .btn-link handles the hover effect */
}

/* Ensure active tab shows green underline */
.tabs-block__button.btn-link-green:not(.is-active)::before,
.tabs-block__button.btn-link-green:not(.is-active)::after {
    opacity: 0;
}
.tabs-block__button.btn-link-green:not(.is-active):hover::before,
.tabs-block__button.btn-link-green:not(.is-active):hover::after {
    opacity: 1;
}

/* Border below navigation */
.tabs-block__border {
    width: 100%;
    height: 1px;
    background: rgba(174, 172, 167, 0.3); /* #AEACA7 with 30% opacity */
    border: none;
}

/* Content wrapper */
.tabs-block__content-wrapper {
    position: relative;
}

/* Tab panel */
.tabs-block__panel {
    display: none;
}

.tabs-block__panel.is-active {
    display: block;
}

.tabs-block__panel-inner {
    width: 100%;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .tabs-block__nav {
        gap: 24px;
    }
    
    .tabs-block__nav-wrapper {
        margin-bottom: 40px;
    }
}