/* The site header's layout and its two menus (wwwroot/js/menu.js). Loaded after the other
   stylesheets, because the pieces in the header (search, the bell, the account links) are
   styled by their own files and this one arranges them.

   Phone and tablet, up to 959 px: one row. The community's name, then search, the bell
   and the menu button. Every link (Boards, New posts, Members, Moderate, Manage, and the
   account links) is in a panel the menu button opens: the "hamburger" menu.

   Desktop, 960 px and up: the links sit in the row, and the account links are in a small
   menu under the member's name.

   Without JavaScript neither menu can open, so nothing is hidden: the links wrap onto
   further rows, as the header did before the menus existed.

   Every color and radius is a custom property from site.css. Everything tapped is at
   least 44 px. The only motion is a link's background fading in under the pointer
   (site.css turns it off where the device asks).

   The header stays at the top of the screen while the page scrolls (site.css, with
   JavaScript only). menu.js measures it and keeps --header-h right, which is what stops
   a link to a post from landing underneath it. */

.header-row { position: relative; flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px; }
.site-header .brand { flex: 1 1 0; min-width: 0; min-height: 44px; }
.site-header .brand-mark { flex: none; }
.site-header .brand-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.header-tools { flex: none; display: flex; align-items: center; gap: 6px; }

/* The menu button. Three bars closed, a cross open: the same button, two drawings. */
.menu-button {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--header-line); border-radius: var(--radius-small);
  background: var(--header-field); color: var(--header-ink); cursor: pointer;
  transition: border-color var(--ease);
}
.menu-button:hover { border-color: var(--header-muted); }
.menu-button:focus-visible, .account-button:focus-visible { outline: 2px solid var(--header-ink); outline-offset: 2px; }
.menu-button .icon-close, .menu-button[aria-expanded="true"] .icon-open { display: none; }
/* Signed in, the menu button is the member's avatar with the bars (or the cross) on a
   small badge at its corner: the same 44 px as the plain button, so the row is no wider. */
.menu-button.has-avatar { position: relative; border-color: transparent; background: none; }
.menu-badge {
  position: absolute; right: 1px; bottom: 1px; display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 1px solid var(--header-line); border-radius: var(--radius-round);
  background: var(--header-field); color: var(--header-ink);
}

/* The member's avatar in the header: on the menu button, on the account button, and
   beside their name in the menu. The photo or initials come from the _Avatar partial;
   a thin ring keeps a dark photo from melting into the dark header. */
.avatar.avatar-header {
  flex: none; width: 32px; height: 32px; font-size: 12px;
  box-shadow: 0 0 0 1px var(--header-line);
}
.avatar.avatar-menu-row { width: 28px; height: 28px; font-size: 11px; }
.account-nav-name { gap: 10px; }
.account-nav-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-button[aria-expanded="true"] .icon-close { display: block; }

/* The panel of links. A column of rows a thumb can hit. */
.site-menu { flex: 0 0 100%; display: flex; flex-direction: column; }
.site-menu .main-nav { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.site-menu .main-nav a,
.site-menu .account-nav-name,
.site-menu .account-nav-link {
  display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 4px;
  border-top: 1px solid var(--header-field); text-align: left;
}
.site-menu .account-nav { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; font-size: inherit; }
.site-menu .account-nav form { width: 100%; }
.site-menu .account-nav-button { justify-content: center; margin: 10px 0 6px; min-height: 48px; }
.account-button { display: none; }
.account-menu { display: flex; flex-direction: column; }

@media (max-width: 959.98px) {
  /* With JavaScript the panel is closed until the button opens it. */
  html.js .menu-button { display: inline-flex; }
  html.js .site-menu:not(.is-open) { display: none; }
  /* The header does not scroll away, so an open panel taller than the screen (a phone
     held sideways) scrolls inside itself; otherwise its last links could not be reached. */
  html.js .site-menu.is-open { max-height: calc(100dvh - var(--header-h, 68px)); overflow-y: auto; overscroll-behavior: contain; }
}

@media (min-width: 960px) {
  .header-row { flex-wrap: nowrap; gap: 12px 16px; }
  .site-header .brand { flex: 0 1 auto; order: 0; }
  .site-header .brand-name { overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* The panel's box disappears and its two parts take their places in the row:
     name, links, search and bell, account. */
  .site-menu { display: contents; }
  /* Each link is a pill that lights up under the pointer; the page you are on stays lit. */
  .site-menu .main-nav { order: 1; flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 2px; min-width: 0; }
  .site-menu .main-nav a {
    width: auto; min-height: 40px; padding: 0 11px; border-top: 0; border-radius: var(--radius-small); white-space: nowrap;
    transition: color var(--ease), background-color var(--ease);
  }
  .site-menu .main-nav a:hover { background: var(--header-hover); color: var(--header-ink); }
  .site-menu .main-nav a[aria-current="page"] { background: var(--header-current); }
  .header-tools { order: 2; flex: 0 1 auto; min-width: 0; }
  .site-menu .account-nav { order: 3; position: relative; flex: none; flex-direction: row; align-items: center; gap: 4px 14px; }
  .site-menu .account-nav form { width: auto; }
  .site-menu .account-nav-name, .site-menu .account-nav-link { width: auto; min-height: 44px; border-top: 0; }
  .site-menu .account-nav-button { margin: 0; min-height: 44px; }
  .account-menu { flex-direction: row; align-items: center; gap: 4px 14px; }

  /* With JavaScript the account links fold into a menu under the member's name. */
  html.js .account-button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 220px; padding: 0 8px 0 5px;
    border: 1px solid var(--header-line); border-radius: var(--radius-small);
    background: var(--header-field); color: var(--header-ink); font: inherit; font-weight: 600; cursor: pointer;
    transition: border-color var(--ease);
  }
  html.js .account-button:hover { border-color: var(--header-muted); }
  /* The button shows the avatar and an arrow; the name is read out, and is the menu's first line. */
  .account-button-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.js .account-menu:not(.is-open) { display: none; }
  html.js .account-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 200px;
    flex-direction: column; align-items: stretch; gap: 0; padding: 6px;
    border: 1px solid var(--card-line); border-radius: var(--radius-small);
    background: var(--surface-raised); box-shadow: var(--elev-3);
  }
  html.js .account-menu .account-nav-name,
  html.js .account-menu .account-nav-link {
    width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--radius-chip);
    color: var(--ink); font-weight: 500; text-align: left; white-space: nowrap;
  }
  html.js .account-menu .account-nav-name { font-weight: 700; }
  html.js .account-menu .account-nav-name:hover,
  html.js .account-menu .account-nav-link:hover { background: var(--band); color: var(--ink); text-decoration: none; }
  html.js .account-menu .account-nav-name:focus-visible,
  html.js .account-menu .account-nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  html.js .account-menu form { width: 100%; }
}

/* The search box only joins its button in the header when the row has room for it. */
@media (min-width: 768px) and (max-width: 1139.98px) {
  .site-header .header-search { flex: none; max-width: none; }
  .site-header .header-search-field { display: none; }
  .site-header .header-search-button { width: 44px; height: 44px; border-radius: var(--radius-small); }
}
@media (min-width: 1140px) {
  .site-header .header-search { flex: 0 1 220px; max-width: 220px; min-width: 120px; }
}