@charset "utf-8";

/* ── Responsive nav-tabs ── */
/* Source of truth — minify by hand if a .min.css is later introduced.
   Ported from CEI's styles/nav-tabs.css 2026-05-07 (TM5.3 follow-up).
   Used by programdescription.php's tabbed shell. */

.responsive-tabs.nav-tabs {
    position: relative;
    z-index: 10;
    height: 42px;
    overflow: visible;
    border-bottom: none;
}

.nav-tabs-responsive {
    margin: 29px -6px;
}

/* ── Base tab states (must precede media queries for correct cascade) ── */
.responsive-tabs.nav-tabs > li {
    display: none;
    float: none;
    text-align: center;
}

.responsive-tabs.nav-tabs > li.active {
    display: block;
}

.responsive-tabs.nav-tabs > li:last-of-type > a {
    margin-right: 0;
}

/* !important needed to win against UatSea's bootstrap-nav.css which has
   `ul.nav a { background-color: #000; }` — that rule is at lower specificity
   than ours, but appears to win in some pseudo-class states. Explicit
   color override too since the bootstrap-nav rule doesn't set color, leaving
   it to inherit (which lands black on dark backgrounds). */
.responsive-tabs.nav-tabs > li > a {
    margin-right: 0;
    background: #fff !important;
    color: #333 !important;
    text-decoration: none;
}

/* ── Desktop (≥768px) ── */
@media (min-width: 768px) {
    .responsive-tabs.nav-tabs {
        border-bottom: 1px solid #aaa;
    }
    .responsive-tabs.nav-tabs > li > a {
        margin-right: 2px;
        border: 1px solid #ccc;
        border-bottom: 1px solid #aaa;
        border-radius: 4px 4px 0 0;
    }
    .responsive-tabs.nav-tabs > li.active {
        margin-bottom: -1px;
    }
    .responsive-tabs.nav-tabs > li.active a {
        border: 1px solid #000;
        border-bottom: 1px solid #fff;
        border-radius: 4px 4px 0 0;
    }
    .responsive-tabs.nav-tabs > li {
        display: block;
        float: left;
    }
    .nav-tabs > li {
        float: left;
        margin-bottom: 0;
    }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
    .responsive-tabs.nav-tabs > li.active a {
        border-color: black;
    }
    .responsive-tabs.nav-tabs > li > a {
        border-right: 1px solid #000;
        border-left: 1px solid #000;
    }
    .responsive-tabs.nav-tabs > li:last-of-type > a {
        border-bottom: 1px solid #000;
    }
    .nav-tabs > li {
        float: left;
        margin-bottom: 0;
    }
}

/* ── Open (dropdown) state ── */
.responsive-tabs.nav-tabs.open > li {
    display: block;
}

.responsive-tabs.nav-tabs.open > li a {
    border-radius: 0;
}

.responsive-tabs.nav-tabs.open > li:first-of-type a {
    border-radius: 2px 2px 0 0;
}

.responsive-tabs.nav-tabs.open > li:last-of-type a {
    border-radius: 0 0 2px 2px;
}

.nav-tabs > li > a:hover {
    background-color: #ddd;
}

/* ── Tab link sizing ── */
.nav.nav-tabs.responsive-tabs > li > a {
    position: relative;
    display: block;
    padding: 3px 8px 3px;
    font-size: 12px;
    font-weight: 700;
    outline: 0;
    min-height: 41px;
}

.nav.nav-tabs.responsive-tabs > li > a.pad-top {
    padding-top: 11px;
}

.nav.nav-tabs.responsive-tabs > li.active > a.pad-top {
    padding-top: 11px;
    min-height: 42px;
}

/* ── Register link highlight ── */
.nav.nav-tabs.responsive-tabs > li > a.register-link {
    background-color: #4D71B8 !important;
    color: #fff !important;
    border-color: #353535;
    border-bottom: 1px solid #aaa;
}
@media (min-width: 768px) {
    .nav.nav-tabs.responsive-tabs > li.active > a.register-link {
        border-color: #353535;
        border-bottom: 1px solid #fff;
    }
}

/* ── Mobile chevron — pure-CSS via ::after on active tab ──
   Renders regardless of JS state. The .open arrow flip depends on JS
   toggling .open on the <ul>; if JS is broken, chevron stays down —
   acceptable degradation, the affordance still reads as a tap target. */
@media (max-width: 768px) {
    .responsive-tabs.nav-tabs > li.active > a {
        padding-right: 56px;
    }
    .responsive-tabs.nav-tabs > li.active > a::after {
        content: '\25BE';
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        font-size: 22px;
        line-height: 1;
        color: #4D71B8;
        padding: 4px 10px;
        border-radius: 4px;
        background: rgba(77, 113, 184, 0.10);
        transition: background 0.15s ease;
    }
    .responsive-tabs.nav-tabs.open > li.active > a::after {
        content: '\25B4';
    }
    .responsive-tabs.nav-tabs > li.active > a:hover::after {
        background: rgba(77, 113, 184, 0.20);
    }
    .responsive-tabs.nav-tabs > li.active > a:hover {
        background-color: #f7f9fc;
    }
}

/* ── Tab content panes ── */
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .tab-pane.active {
    display: block;
}
.tab-content > .tab-pane.fade {
    opacity: 0;
    transition: opacity 0.15s linear;
}
.tab-content > .tab-pane.fade.in,
.tab-content > .tab-pane.active.in {
    opacity: 1;
}