/* Sub Navigation - Tabs Style */
/* This stylesheet provides tab-style navigation for Banting House and similar sections */

/* Tabs Container */
.sub-navigation--tabs {
    background-color: transparent;
    border-bottom: 1px solid #e0e0e0;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

/* Note: no .container override here — the tabs must use the standard Bootstrap
   .container so they align with the breadcrumb container above. */

/* Tabs List */
.sub-navigation__tabs {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    border-bottom: none;
}

/* Tab Item */
.sub-navigation__tab-item {
    margin: 0;
    position: relative;
}

/* Tab Link */
.sub-navigation__tab-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    color: #5a5a5a;
    text-decoration: none;
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    position: relative;
}

    .sub-navigation__tab-link:hover {
        color: #1e3268;
        background-color: #1E326810;
        border-bottom-color: #bbb;
    }

/* Active Tab */
.sub-navigation__tab-link--active {
    color: #1e3268;
    border-bottom-color: #1e3268;
    font-weight: 600;
    background-color: #f9f9f9;
}

.sub-navigation__tab-link--active:hover {
    border-bottom-color: #1e3268;
    background-color: #f9f9f9;
}

/* Tab Icon */
.sub-navigation__tab-icon {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
}

/* Tab Text */
.sub-navigation__tab-text {
    font-weight: inherit;
}

/* Responsive Design */
@media (max-width: 992px) {
    .sub-navigation__tab-link {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .sub-navigation--tabs {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    .sub-navigation__tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
    }

    .sub-navigation__tabs::-webkit-scrollbar {
        height: 4px;
    }

    .sub-navigation__tabs::-webkit-scrollbar-track {
        background: transparent;
    }

    .sub-navigation__tabs::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 2px;
    }

    .sub-navigation__tab-link {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
}

/* Sub-navigation tabs - single row with horizontal scroll on mobile (same pattern as camp page tabs) */
@media (max-width: 768px) {
    .sub-navigation--tabs .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sub-navigation--tabs .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .sub-navigation--tabs .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    .sub-navigation--tabs .nav-tabs .nav-link {
        white-space: nowrap;
    }
}

@media (max-width: 576px) {
    .sub-navigation__tab-link {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }

    .sub-navigation__tab-icon {
        width: 1rem;
        height: 1rem;
    }
}

/* Dropdown for items with children */
.sub-navigation__item--has-children {
    position: relative;
}

.sub-navigation__caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.35rem;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
}

.sub-navigation__item--open .sub-navigation__caret {
    transform: rotate(180deg);
}

.sub-navigation__dropdown {
    display: none;
    /* Fixed positioning removes the dropdown from the scrollable tab list's
       overflow calculation so opening it never shifts the tab row.
       Exact coordinates are set by JS from the tab's bounding rect. */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    min-width: 220px;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none !important;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sub-navigation__item--open .sub-navigation__dropdown,
.sub-navigation__dropdown--open {
    display: block;
}

.sub-navigation__dropdown-item {
    margin: 0;
    list-style: none !important;
}

.sub-navigation__dropdown-item::marker {
    content: none;
}

.sub-navigation__dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    color: #5a5a5a;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.sub-navigation__dropdown-link .sub-navigation__text {
    font-size: 0.8125rem;
    font-weight: inherit;
    line-height: 1.4;
    letter-spacing: normal;
}

.sub-navigation__dropdown-link:hover {
    color: #1e3268;
    background-color: #f5f5f5;
}

.sub-navigation__dropdown-item--active .sub-navigation__dropdown-link {
    color: #1e3268;
    font-weight: 600;
    background-color: #f9f9f9;
}

@media (max-width: 768px) {
    .sub-navigation__dropdown {
        /* Keep fixed positioning on mobile too so opening the dropdown
           never pushes the scrollable tab row down. */
        min-width: 200px;
        max-width: calc(100vw - 16px);
        overflow-x: hidden;
    }
}

/* Focus Styles for Accessibility */
.sub-navigation__tab-link:focus {
    outline: 2px solid #1e3268;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .sub-navigation--tabs {
        display: none;
    }
}