/*<meta />*/

@import url('../../css-variables.css');

/* Style the tab container */
.tabbed-section {
    width: 100%;
    position: relative;
}

/* Style the tabs container */
.tab-titles {
    display: flex;
    gap: 24px; 
    border-bottom: 1px solid var(--border-neutral-weak);
}

/* Style the tab titles/buttons */
.tab-title {
    display: block;
    padding: 12px 0; 
    cursor: pointer;
    background: none; 
    border: none; 
    color: var(--text-neutral-default);
    text-decoration: none;
    position: relative; /* For active indicator */
    margin: 0;
    transition: color 0.2s ease;
}

/* Style active tab */
.tab-title.active {
    color: var(--text-brand-default);
}

/* Active tab indicator */
.tab-title.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Align with container border */
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--text-brand-default);
}

/* Dark theme specific styles */
:root[data-theme="dark"] .tab-title.active {
    color: var(--text-brand-default);
}

:root[data-theme="dark"] .tab-title.active::after {
    background-color: var(--text-brand-default);
}

:root[data-theme="dark"] .tab-title:hover {
    color: var(--text-brand-default);
}

/* Style the tab content containers */
.tab-content {
    display: none;
    padding: 24px 0; /* Padding only top/bottom */
}

/* Show default tab (first tab) when no hash is present */
.tab-content:first-of-type {
    display: block;
}

/* Hide default tab when any tab is targeted */
.tabbed-section:target .tab-content:first-of-type {
    display: none;
}

/* Show targeted tab content */
.tab-content:target {
    display: block;
}

/* Hover effects */
.tab-title:hover {
    color: var(--text-brand-default);
}