/* "Instrument Cluster" navigation bar (Rod, 21 Oct 2026): one look for MODX and ScanData pages.
   Markup: system/tat-nav.inc.php, on Bootstrap 3's navbar. Selectors start .navbar.tat-nav-cluster so they
   outrank Bootstrap/Cosmo, main.css (.dropdown-menu li 250x40), custom_2019.css (.nav li a padding) and
   home9's .sticky-nav * font reset - which is why every text element here names its font itself.
   Menu names: the site font with a capital first letter, as before (Rod, 21 Oct 2026 - no capitals), at the old
   bar's 15px (measured on live, 22 Oct 2026) so a long member name has room. The bar is the old bar's 50px tall
   (15 + 20 + 15; Rod, 22 Oct 2026 - less height to scroll past). */

.navbar.tat-nav-cluster {
    min-height: 50px;
    border: 0;
    border-bottom: 1px solid #000;
    background-color: #15181d;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 5px),
                      repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 5px);
}
.navbar.tat-nav-cluster .fa-solid {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* ---- the bar ---- */
.navbar.tat-nav-cluster .navbar-nav > li > a,
.navbar.tat-nav-cluster .navbar-brand {
    padding: 15px 15px;
    color: #d9dde3;
    background: transparent;
    font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: normal;
    text-transform: none;
}
.navbar.tat-nav-cluster .navbar-nav > li > a:hover,
.navbar.tat-nav-cluster .navbar-nav > li > a:focus,
.navbar.tat-nav-cluster .navbar-brand:hover,
.navbar.tat-nav-cluster .navbar-brand:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, .06);
}
/* The open menu lights up like a dash warning light. */
.navbar.tat-nav-cluster .navbar-nav > .open > a,
.navbar.tat-nav-cluster .navbar-nav > .open > a:hover,
.navbar.tat-nav-cluster .navbar-nav > .open > a:focus {
    color: #ffc919;
    background: transparent;
    box-shadow: inset 0 -3px 0 #ffc919, 0 6px 16px -6px rgba(255, 201, 25, .75);
}
.navbar.tat-nav-cluster .navbar-nav > li > a .fa-solid {
    margin-right: 4px;
}
.navbar.tat-nav-cluster .tat-nav-caret {
    margin: 0 0 0 4px;
    font-size: 12px;
    vertical-align: 2px;
    transition: transform .2s ease;
}
.navbar.tat-nav-cluster .open > a .tat-nav-caret {
    transform: rotate(180deg);
}
.navbar.tat-nav-cluster .navbar-toggle {
    margin-top: 8px;
    border-color: #ffc919;
}
.navbar.tat-nav-cluster .navbar-toggle .icon-bar {
    background-color: #ffc919;
}
.navbar.tat-nav-cluster .navbar-toggle:hover,
.navbar.tat-nav-cluster .navbar-toggle:focus {
    background-color: #262c36;
}
.navbar.tat-nav-cluster .navbar-collapse {
    border-color: #2a2f38;
}

/* The member's menu: "Signed in as <name>" in a yellow box filling the end of the bar, as on the old site (Geoff
   and Brendan, 22 Oct 2026: on the phone Geoff points members to "the yellow box"). A long name is cut short with
   an ellipsis rather than push the bar onto two rows. */
.navbar.tat-nav-cluster .navbar-nav > li > a.tat-nav-account,
.navbar.tat-nav-cluster .navbar-nav > li > a.tat-nav-account:hover,
.navbar.tat-nav-cluster .navbar-nav > li > a.tat-nav-account:focus,
.navbar.tat-nav-cluster .navbar-nav > .open > a.tat-nav-account.dropdown-toggle {
    color: #111111;
    background: #ffc919;
    box-shadow: none;
}
.navbar.tat-nav-cluster .navbar-nav > li > a.tat-nav-account:hover,
.navbar.tat-nav-cluster .navbar-nav > li > a.tat-nav-account:focus,
.navbar.tat-nav-cluster .navbar-nav > .open > a.tat-nav-account.dropdown-toggle {
    background: #ffd84d;
}
.navbar.tat-nav-cluster .tat-nav-account .fa-user {
    margin-right: 7px;
}
.navbar.tat-nav-cluster .tat-nav-signed {
    color: #111111;
    font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
}
.navbar.tat-nav-cluster .tat-nav-account strong {
    display: inline-block;
    max-width: 300px;   /* desktops have the room (measured 22 Oct 2026); narrower screens cut sooner below */
    overflow: hidden;
    color: #111111;
    font-family: "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

/* ---- the panels ---- */
.navbar.tat-nav-cluster .tat-nav-panel {
    min-width: 330px;
    margin-top: 0;
    padding: 10px;
    border: 0;
    border-top: 3px solid #ffc919;
    border-radius: 0 0 12px 12px;
    background: #1b1f26;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .35);
}
.navbar.tat-nav-cluster .tat-nav-panel--wide {
    width: 760px;
    padding: 14px;
    column-count: 2;
    column-gap: 12px;
}
.navbar.tat-nav-cluster .tat-nav-panel > li {
    width: auto;
    height: auto;
    margin: 0;
    font-size: inherit;
    break-inside: avoid;
    page-break-inside: avoid;
}
.navbar.tat-nav-cluster .tat-nav-panel > li.divider {
    height: 1px;
    margin: 6px 4px;
    background: #333a45;
}
/* Logout runs across both columns of the member's menu, under its divider. */
.navbar.tat-nav-cluster .tat-nav-panel--wide > li.divider,
.navbar.tat-nav-cluster .tat-nav-panel--wide > li.tat-nav-span {
    column-span: all;
}
.navbar.tat-nav-cluster .navbar-nav .tat-nav-panel > li > a.tat-nav-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    color: #ffffff;
    background: transparent;
    white-space: normal;
    text-decoration: none;
}
.navbar.tat-nav-cluster .navbar-nav .tat-nav-panel > li > a.tat-nav-item:hover,
.navbar.tat-nav-cluster .navbar-nav .tat-nav-panel > li > a.tat-nav-item:focus {
    color: #ffc919;
    background: #262c36;
}
.navbar.tat-nav-cluster .navbar-nav .tat-nav-panel > li > a.tat-nav-item:focus-visible {
    outline: 2px solid #ffc919;
    outline-offset: 1px;
}
.navbar.tat-nav-cluster .tat-nav-ico {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 14px;
    border: 2px solid #ffc919;
    border-radius: 50%;
    color: #ffc919;
    font-size: 17px;
}
.navbar.tat-nav-cluster .tat-nav-item:hover .tat-nav-ico,
.navbar.tat-nav-cluster .tat-nav-item:focus .tat-nav-ico {
    color: #15181d;
    background: #ffc919;
}
.navbar.tat-nav-cluster .tat-nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.navbar.tat-nav-cluster .tat-nav-name {
    color: #ffffff;
    font-family: "Source Sans Pro", "Source Sans 3", Calibri, Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
}
.navbar.tat-nav-cluster .tat-nav-item:hover .tat-nav-name,
.navbar.tat-nav-cluster .tat-nav-item:focus .tat-nav-name {
    color: #ffc919;
}
.navbar.tat-nav-cluster .tat-nav-desc {
    margin-top: 2px;
    color: #aeb5bf;
    font-family: "Source Sans Pro", "Source Sans 3", Calibri, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.25;
}
/* Smart Intake and AutoCheck Pro for a member who can't open them yet (Rod, 25 Oct 2026): the name and a
   Coming soon tag in the homepage tiles' yellow-to-orange, navy words - not in capitals, as the rest of the bar. */
.navbar.tat-nav-cluster .tat-nav-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
.navbar.tat-nav-cluster .tat-nav-soon {
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe066 0%, #ffc919 42%, #ff9f1c 100%);
    color: #1a2538;
    font-family: "Source Sans Pro", "Source Sans 3", Calibri, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

/* Keyword Search keeps its own white box (css/tat-nav-keyword-search.css) - Rod, 21 Oct 2026. */

/* ---- widths ---- */
@media (min-width: 768px) and (max-width: 1199px) {
    .navbar.tat-nav-cluster .navbar-nav > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}
/* Laptops: 620px keeps the wide panels inside a 992px window (measured 21 Oct 2026). */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar.tat-nav-cluster .tat-nav-panel--wide {
        width: 620px;
    }
    /* Tighter items, and a shorter cut-off for a long name, keep the signed-in bar on one row here. */
    .navbar.tat-nav-cluster .navbar-nav > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
    .navbar.tat-nav-cluster .tat-nav-account strong {
        max-width: 160px;
    }
}
/* Tablets: the wide panels would run off the right edge, so one column. */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar.tat-nav-cluster .tat-nav-panel--wide {
        width: 360px;
        column-count: 1;
    }
    /* Measured 22 Oct 2026 with a long member name: the signed-in bars wrapped here, and the signed-out
       ScanData bar was 10px over. Tighter items, and the member's menu shows the name only (shorter cut-off);
       "Signed in as" stays for screen readers. */
    .navbar.tat-nav-cluster .navbar-nav > li > a {
        padding-left: 8px;
        padding-right: 8px;
    }
    .navbar.tat-nav-cluster .tat-nav-signed {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
    .navbar.tat-nav-cluster .tat-nav-account strong {
        max-width: 150px;
    }
    /* The bar can wrap to two rows here (signed-out MODX pages), leaving Keyword Search at the left of the
       second row, where its right-aligned box ran off the left edge. Hang the box from the bar instead,
       lined up with the right edge of the 750px container. */
    .navbar.tat-nav-cluster .navbar-nav > li.tat-nav-keyword {
        position: static;
    }
    .navbar.tat-nav-cluster .tat-nav-keyword > .tat-nav-keyword-menu {
        top: 100%;
        right: calc(50% - 360px);
    }
}
/* Phones: Bootstrap's stacked menu; panels sit in the flow, one column, names only. */
@media (max-width: 767px) {
    .navbar.tat-nav-cluster .navbar-nav > li > a {
        padding: 12px 18px;
    }
    .navbar.tat-nav-cluster .navbar-nav > .open > a {
        box-shadow: inset 3px 0 0 #ffc919;
    }
    .navbar.tat-nav-cluster .navbar-nav .open .tat-nav-panel {
        width: auto;
        padding: 4px 10px 10px;
        column-count: 1;
        background: #1b1f26;
        border-top: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .navbar.tat-nav-cluster .navbar-nav .tat-nav-panel > li > a.tat-nav-item {
        padding: 6px 10px;
    }
    .navbar.tat-nav-cluster .tat-nav-account strong {
        max-width: 180px;   /* "Signed in as" + the name fit a 320px phone */
    }
    .navbar.tat-nav-cluster .tat-nav-desc {
        display: none;
    }
    .navbar.tat-nav-cluster .tat-nav-ico {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .navbar.tat-nav-cluster .tat-nav-caret {
        transition: none;
    }
}