/*
 * Priority+ overflow ("More" dropdown) for the tab strips on the
 * single-{artifact,organization,person} templates.
 *
 * The three per-CPT stylesheets (artifact-template-styles.css /
 * organization-template-styles.css / person-template-styles.css) already
 * paint each tab button (white bg, green underline on hover/active,
 * uppercase Lato) with `.organization-container .tab-button { … !important }`
 * chains. This file does NOT restyle the buttons — it only adds the
 * structural rules the JS in js/single-tabs.js needs to measure and
 * collapse overflow, plus the dropdown panel that hangs below the More
 * toggle. Selectors are scoped to `.artifact-tabs-nav` (used across all
 * three CPTs) so this file ships once.
 */

/* Force the tab strip onto a single row and clip the overflow during
 * measurement. With this in place, scrollWidth > clientWidth reliably
 * signals that one or more tabs need to move into the More dropdown. */
.artifact-tabs-nav {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

/* Tab strip needs to be the positioning context for the dropdown so the
 * menu lines up under the More toggle button on every viewport width. */
.artifact-tabs {
    position: relative;
}

/* The More wrapper <li> sits at the end of the strip alongside the other
 * tabs. When the JS finds nothing to overflow it sets `hidden` on this
 * element. */
.artifact-tabs-nav .tabs-more {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.artifact-tabs-nav .tabs-more[hidden] {
    display: none !important;
}

/* The caret arrow next to "More". Color is inherited from the surrounding
 * .tab-button rules. */
.artifact-tabs-nav .tabs-more-caret {
    display: inline-block;
    margin-left: 0.25em;
    font-size: 0.85em;
    line-height: 1;
    transform: translateY(-1px);
}

/* The dropdown panel — anchored to the bottom-right of the More toggle. */
.artifact-tabs-nav .tabs-more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid #ddd;
    border-top: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    max-width: 280px;
}

.artifact-tabs-nav .tabs-more-menu[hidden] {
    display: none !important;
}

.artifact-tabs-nav .tabs-more-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}

/* Dropdown items reuse the .tab-button typography from the per-CPT CSS
 * (uppercase Lato, the same letter-spacing and font-size) so the menu
 * doesn't visually drift from the strip. We override the structural bits
 * that don't make sense in a vertical stacked menu: full-width, left-
 * aligned text, no bottom-border indicator, lighter padding. The
 * !important here matches the !important density in the per-container
 * .tab-button blocks — without it those rules would win on specificity. */
.artifact-tabs-nav .tabs-more-menu .tab-button {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 10px 16px !important;
    border-bottom: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    white-space: normal !important;
}

.artifact-tabs-nav .tabs-more-menu .tab-button:hover,
.artifact-tabs-nav .tabs-more-menu .tab-button:focus {
    background: rgba(44, 95, 45, 0.08) !important;
    background-color: rgba(44, 95, 45, 0.08) !important;
    border-bottom: none !important;
}

/* In the dropdown the active indicator is a left-edge bar instead of a
 * bottom underline, since the underline would visually clip the row. */
.artifact-tabs-nav .tabs-more-menu .tab-button.active {
    border-bottom: none !important;
    border-left: 3px solid #2c5f2d !important;
    padding-left: 13px !important;
    color: #000 !important;
    font-weight: 700 !important;
}

/* Tab-count badges (e.g. "(4)") inside dropdown items inherit the
 * surrounding font-size; nothing extra needed. */