/* On the business: the masthead. Self-contained, because the business Worker also puts it on pages
   that come from otrecord.news (company and people pages), which load the main site's styles.css. */
.bh, .bh * { box-sizing: border-box; }
.bh { --bh-h: 56px; position: sticky; top: 0; z-index: 60; background: #000; color: #fff; font: 600 14px/1.2 "Public Sans", "Helvetica Neue", Arial, sans-serif; }
.bh a { color: inherit; text-decoration: none; }
.bh :focus-visible { outline: 2px solid #8FA8FF; outline-offset: 2px; }
.bh-in { max-width: 1480px; margin: 0 auto; padding: 0 40px; height: var(--bh-h); display: flex; align-items: center; gap: 28px; }
.bh-logo { flex: none; display: block; }
.bh-logo img { display: block; height: 21px; width: auto; }
.bh-nav { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; }
.bh-nav > a, .bh-more > button { padding: 8px 10px; border-radius: 5px; color: #cfcfca; white-space: nowrap; }
.bh-nav > a:hover, .bh-more > button:hover { color: #fff; background: #1d1d1d; }
.bh-nav > a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 #fff; border-radius: 0; }
.bh-more { position: relative; }
.bh-more > button { font: inherit; background: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.bh-more > button[aria-current] { color: #fff; }
.bh-more > button::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translate(-2px, -2px); margin-left: 4px; }
.bh-drop { position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; background: #fff; color: #000; border-radius: 8px; padding: 6px; box-shadow: 0 14px 36px rgba(0,0,0,.25); }
.bh-drop a { display: block; padding: 9px 12px; border-radius: 5px; font-weight: 600; }
.bh-drop a:hover, .bh-drop a[aria-current] { background: #f1f1ed; }
.bh-drop hr { border: 0; border-top: 1px solid #e3e3de; margin: 6px 4px; }
.bh-drop .bh-ext { font-weight: 400; color: #555; }
.bh-tools { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bh-ib { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; background: none; border: 0; color: #fff; cursor: pointer; }
.bh-ib:hover, .bh-ib[aria-expanded="true"] { background: #1d1d1d; }
.bh-acct { padding: 8px 14px; border: 1px solid #555; border-radius: 6px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.bh-acct:hover { border-color: #fff; }
.bh-menu { display: none; }

/* Search: a row that opens under the bar */
.bh-search { border-top: 1px solid #262626; background: #000; }
.bh-search form { position: relative; max-width: 760px; margin: 0 auto; padding: 12px 40px 14px; }
.bh-search input { width: 100%; height: 44px; padding: 0 16px; font: 400 16px "Public Sans", "Helvetica Neue", Arial, sans-serif; color: #fff; background: #161616; border: 1px solid #444; border-radius: 6px; }
.bh-search input::placeholder { color: #9a9a95; }
.bh-search input:focus { outline: none; border-color: #fff; }
.bh-res { position: absolute; left: 40px; right: 40px; top: 60px; margin: 0; padding: 6px; list-style: none; background: #fff; color: #000; border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.3); max-height: 70vh; overflow: auto; font-weight: 400; }
.bh-res a { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 5px; }
.bh-res a:hover, .bh-res li[aria-selected="true"] a { background: #f1f1ed; }
.bh-res .ic { width: 34px; height: 34px; border-radius: 6px; background: #f1f1ed; display: grid; place-items: center; font-weight: 800; overflow: hidden; }
.bh-res .ic img { width: 26px; height: 26px; object-fit: contain; }
.bh-res b { display: block; font-weight: 600; }
.bh-res .d { display: block; font-size: 13px; color: #5e5e5a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-res .k { font-size: 13px; font-weight: 600; color: #5e5e5a; }
.bh-res .none { padding: 12px; color: #5e5e5a; }

/* Small screens: the sections move into a panel */
.bh-panel { border-top: 1px solid #262626; padding: 12px 24px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; max-height: calc(100vh - 56px); overflow: auto; }
.bh-panel a { padding: 10px 0; border-bottom: 1px solid #1f1f1f; color: #e6e6e1; }
.bh-panel a[aria-current] { color: #fff; text-decoration: underline; }
.bh-panel .bh-ext { grid-column: 1 / -1; color: #aaa; font-weight: 400; border-bottom: 0; }
[hidden].bh-search, [hidden].bh-panel, .bh [hidden] { display: none !important; }
@media (max-width: 1180px) {
  .bh-nav { display: none; }
  .bh-menu { display: grid; }
}
@media (max-width: 640px) {
  .bh-in { padding: 0 16px; gap: 12px; }
  .bh-logo img { height: 17px; }
  .bh-acct { padding: 7px 10px; font-size: 13px; }
  .bh-search form { padding: 10px 16px 12px; }
  .bh-res { left: 16px; right: 16px; }
}
@media print { .bh { position: static; } .bh-tools { display: none; } }
