/* Style 1: Modern Tabs
   Bottom sticky nav bar, icon-only controls in a single scrollable row.
   Underline indicator on the active section. Clean, professional,
   mobile-first. Sizing/scrolling for the row lives in guidebook.css
   (shared across all nav styles); this file layers the fixed-bottom
   bar chrome + active-state underline on top.
*/


.gb-nav-content {
    padding-bottom: var(--nav-height);
}

/* Navigation container */
.gb-section-switcher {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    z-index: 1000;
    height: var(--nav-height);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.gb-section-switcher-container {
    max-width: 100%;
    height: 100%;
    /* Left/right breathing room so the first and last icon aren't flush
       against the screen edge. */
    padding: 0 10px;
}

.gb-section-switcher-list {
    height: 100%;
    padding: 0;
}

.gb-section-switcher-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid transparent;
    transition: all var(--nav-transition);
}

.gb-section-switcher-item:has(.gb-section-switcher-link.active) {
    border-bottom-color: var(--accent-color);
}

.gb-section-switcher-link {
    transition: all var(--nav-transition);
}

/* Dark mode support */
html.dark .gb-section-switcher {
    background: var(--bg-card);
    border-top-color: var(--border);
}

html.dark .gb-section-switcher-link:hover:not(.gb-section-switcher-link--disabled) {
    background: rgba(255, 255, 255, 0.08);
}

/* Tablet breakpoint */
@media (min-width: 768px) {
    :root {
        --nav-height: 80px;
    }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
    :root {
        --nav-height: 88px;
    }
}