/* Elena #33: desktop top .nav-piped must match footer (visible) */
@media (min-width: 1024px) {
  .site-header {
    height: auto !important;
    min-height: var(--header-height);
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
  .nav-piped,
  .nav-main {
    display: flex !important;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px 10px;
  }
  .menu-toggle,
  .nav-drawer {
    display: none !important;
  }
}

/* Mobile drawer and header rules live in shared styles.css for all pages. */

/* Phone + social + menu sit on the right.
   When the wordmark is missing, utils are the first flex child and
   space-between would leave them on the left, so pin them with an auto
   margin. When the wordmark is back in front of utils, that auto margin
   must not apply: space-between already keeps the mark on the left and
   the cluster on the right. */
.header-bar > .header-utils:first-child {
  margin-left: auto;
}

.header-bar > .wordmark + .header-utils {
  margin-left: 0;
}