/* Header layout. Mobile: menu | logo | search icon on ONE line; the search bar opens over the line.
   Desktop (960px+): logo | links | search. Loaded after style.css. */
.site-head { position: relative; z-index: 40; }
.site-head .wrap {
  --pad: 16px; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-areas: "menu brand stoggle"; align-items: center; gap: 0 8px; padding-block: 10px;
}
@media (min-width: 700px) { .site-head .wrap { --pad: 28px; } }
.site-head .brand { grid-area: brand; justify-self: center; }
.site-head .site-nav { display: none; grid-area: nav; }
.menu-btn { grid-area: menu; }
.search-toggle, .search-close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; padding: 0;
}
.search-toggle { grid-area: stoggle; }
.search-toggle:hover, .search-toggle:active { background: var(--tile); border-color: var(--accent); color: var(--answer); }

.hsearch { grid-area: auto; display: none; position: absolute; left: var(--pad); right: var(--pad); top: 10px; margin: 0; z-index: 3; }
.site-head.search-open .hsearch { display: block; }
.site-head.search-open .menu-btn, .site-head.search-open .brand, .site-head.search-open .search-toggle { visibility: hidden; }
.hsearch input { padding: 0 52px 0 40px; }
.hsearch input::-webkit-search-cancel-button, .hsearch input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.hsearch .search-close { position: absolute; right: 0; top: 0; border: 0; background: transparent; border-radius: 999px; }
.hsearch .search-close:hover, .hsearch .search-close:active { background: var(--tile); color: var(--answer); }

@media (min-width: 960px) {
  .site-head .wrap { grid-template-columns: 1fr auto 1fr; grid-template-areas: "brand nav search"; gap: 16px; padding-block: 12px; }
  .site-head .brand { justify-self: start; }
  .site-head .site-nav { display: flex; }
  .menu-btn, .search-toggle, .search-close { display: none; }
  .hsearch, .site-head.search-open .hsearch {
    display: block; position: relative; left: auto; right: auto; top: auto; grid-area: search; justify-self: end; width: 100%; max-width: 250px;
  }
  .hsearch input { padding: 0 16px 0 40px; }
  .hsearch input::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; display: block; }
  .site-head.search-open .brand { visibility: visible; }
}
@media print { .search-toggle { display: none; } }

/* Quick answer box and last-updated line (under the page intro) */
.page-head .quick-answer { max-width: 680px; margin: 16px auto 0; text-align: left; background: var(--accent-soft); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 16px; font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.page-head .quick-answer strong { color: var(--answer); }
.page-head .updated { margin-top: 10px; font-size: 0.84rem; color: var(--muted); }