/* COBIZ tabs/accordions. Mirrors the "neutral" Regular Labs theme as styled in hsd5_tpl. */
.cobiztabs {
    --cbtabs-bg: var(--blueLight, #eff4f7);
    --cbtabs-color: var(--blueDark, #014171);
    --cbtabs-radius: 10px;
    --cbtabs-border: 1px solid #c0c6cf;
    margin-bottom: 1.5rem;
}

.cobiztabs .cbtabs-heading {
    margin: 0;
    font-size: inherit;
}

.cobiztabs .cbtabs-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.75rem 1.25rem;
    border: var(--cbtabs-border);
    border-radius: var(--cbtabs-radius) var(--cbtabs-radius) 0 0;
    background: #fff;
    color: var(--cbtabs-color);
    font: inherit;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .cobiztabs .cbtabs-button {
        transition: none;
    }
}

.cobiztabs .cbtabs-button:hover,
.cobiztabs .cbtabs-button[aria-selected="true"],
.cobiztabs .cbtabs-button[aria-expanded="true"] {
    background: var(--cbtabs-bg);
}

.cobiztabs .cbtabs-button:focus-visible {
    outline: 2px solid var(--cbtabs-color);
    outline-offset: -2px;
}

.cobiztabs .cbtabs-panel {
    padding: 1.25em;
    border: var(--cbtabs-border);
    border-radius: var(--cbtabs-radius);
    background: var(--cbtabs-bg);
}

.cobiztabs .cbtabs-panel[hidden] {
    display: none;
}

/* Tabs on desktop: buttons in one row, active panel underneath. */
@media (min-width: 768px) {
    .cobiztabs[data-cbtabs="tabs"] {
        display: flex;
        flex-wrap: wrap;
        gap: 0 4px;
    }

    .cobiztabs[data-cbtabs="tabs"] > .cbtabs-button {
        order: 1;
        flex: 1 1 auto;
        width: auto;
        margin-bottom: -1px;
        position: relative;
    }

    .cobiztabs[data-cbtabs="tabs"] > .cbtabs-panel {
        order: 2;
        flex: 0 0 100%;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* Active tab merges with the panel. */
    .cobiztabs[data-cbtabs="tabs"] > .cbtabs-button[aria-selected="true"] {
        border-bottom-color: var(--cbtabs-bg);
    }
}

/* On mobile every item is a button followed by its panel (accordion). */
@media (max-width: 767px) {
    .cobiztabs[data-cbtabs="tabs"] > .cbtabs-button {
        border-radius: var(--cbtabs-radius);
    }

    .cobiztabs[data-cbtabs="tabs"] > .cbtabs-panel {
        background: #fff;
        padding: 0.5rem 1rem;
    }
}