/*
 * Custom select (js/select.js) — styled option list instead of the OS one.
 */
.cs { position: relative; display: block; width: 100%; }

/* The native select stays for forms/validation but is visually hidden */
.cs__native {
    position:       absolute !important;
    inset:          0;
    width:          100% !important;
    height:         100% !important;
    opacity:        0;
    pointer-events: none;
}

.cs__btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    width:           100%;
    padding:         0 32px 0 0;
    font:            inherit;
    line-height:     var(--lh-base);
    text-align:      left;
    color:           var(--color-dark);
    background:      url("../img/arrow-down.svg") right 0 center / 20px 20px no-repeat;
    border:          0;
    border-radius:   0;
    cursor:          pointer;
    transition:      background-position .2s;
}
.cs__btn.is-empty { color: var(--color-muted); }
.cs__btn:focus-visible { outline: 1px solid var(--color-dark); outline-offset: 4px; }
.cs.is-open .cs__btn { background-image: url("../img/arrow-down.svg"); }

.cs__list {
    position:   absolute;
    z-index:    30;
    top:        calc(100% + 12px);
    left:       -16px;
    right:      -16px;
    max-height: 280px;
    margin:     0;
    padding:    0;
    overflow-y: auto;
    list-style: none;
    background: var(--color-light);
    border:     1px solid var(--color-dark);
    box-shadow: 0 16px 40px rgba(14, 14, 16, .12);
}
.cs__list[hidden] { display: none; }

.cs__opt {
    padding:     10px 16px;
    font-size:   var(--fs-body);
    line-height: var(--lh-base);
    color:       var(--color-dark);
    cursor:      pointer;
}
.cs__opt.is-placeholder { color: var(--color-muted); }
.cs__opt.is-active,
.cs__opt:hover { background: rgba(14, 14, 16, .06); }
.cs__opt.is-selected { background: var(--color-dark); color: var(--color-light); }
.cs__opt[aria-disabled="true"] { opacity: .4; cursor: default; }

/* Sort dropdown (faculty directory): taller, aligned with the 48px bar */
.cs--sort .cs__btn { height: 48px; padding: 0 40px 0 8px; background-position: right 8px center; background-size: 24px 24px; color: var(--color-text); }
.cs--sort .cs__list { left: 0; right: 0; top: 100%; }