.section-heading .servant-month{display:inline-flex;align-items:center;margin:0;min-width:0}
.section-heading .servant-month :is(#monthPicker,#monthList){width:auto;max-width:100%;min-height:44px;margin:0;padding:8px 2px;border:0;border-bottom:2px solid #94aebd;border-radius:0;background:transparent;box-shadow:none;color:var(--navy);font:inherit;font-weight:650;cursor:pointer;transition:border-color .15s}
.section-heading .servant-month :is(#monthPicker,#monthList):hover,.section-heading .servant-month :is(#monthPicker,#monthList):focus-visible{border-bottom-color:var(--navy)}
.section-heading .servant-month :is(#monthPicker,#monthList):focus-visible{outline:2px solid var(--navy);outline-offset:4px}
html[data-theme=dark] .section-heading .servant-month :is(#monthPicker,#monthList){background:transparent;color:var(--navy);border:0;border-bottom:2px solid #6b96ad}
@media(max-width:700px){.section-heading .servant-month :is(#monthPicker,#monthList){font-size:.88rem;padding:8px 0}.section-heading:has(.servant-month){gap:12px;flex-wrap:wrap}}

.servant-month #monthPicker{display:none}.servant-month #monthList{display:block;min-width:145px}
@media(max-width:700px){.servant-month #monthList{display:none}.servant-month #monthPicker{display:block}}

.section-heading .servant-month{gap:10px}.servant-month #currentServeMonth{min-height:44px;padding:6px 9px;border:0;border-radius:8px;background:var(--wash);color:var(--navy);font:inherit;font-size:.8rem;font-weight:650;cursor:pointer}.servant-month #currentServeMonth:hover{background:var(--line)}
@media(max-width:700px){.servant-month #monthList{display:block;min-width:125px}.section-heading .servant-month{gap:7px}}