/* ==========================================================================
   THEATRUM ANIMI — site header
   Ported verbatim from mockup/assets/css/components.css (site header, the
   dark variant, brand, tagline, header actions, divider, search toggle, the
   actions and divider parts of the 64em rule, the 26em rule). WordPress-only
   rules at the end.
   ========================================================================== */

/* --- site header ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-surface-raised);
  border-bottom: var(--border-hairline) solid var(--color-border-default);
}
.site-header--transparent {
  position: absolute;
  inset-inline: 0;
  background: transparent;
  border-bottom-color: var(--border-on-photo);
  color: var(--color-ink-inverse);
}
/* Solid dark variant, used by the campaign page as in the designers' concept:
   sticky like the default header, inverse like the transparent one. */
.site-header--dark {
  background: var(--color-surface-deep);
  border-bottom-color: var(--color-border-inverse);
  color: var(--color-ink-inverse);
  --focus-ring: var(--color-crepito);
  --focus-separator: var(--color-rasa);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--header-height);
}
.site-header__brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; flex: 0 0 auto; }
.site-header__brand img { height: 2.25rem; width: auto; max-width: 45vw; }
.site-header__tagline {
  font-family: var(--font-display);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 6rem;
  overflow-wrap: anywhere;
  padding-left: var(--space-sm);
  border-left: var(--border-hairline) solid var(--color-border-default);
}
.site-header--transparent .site-header__tagline,
.site-header--dark .site-header__tagline { border-left-color: var(--color-border-inverse); }
@media (max-width: 63.99em) { .site-header__tagline { display: none; } }

.site-header__actions { display: flex; align-items: center; gap: var(--space-sm); margin-left: var(--space-md); }
.site-header__actions .btn { white-space: nowrap; }
.site-header__divider { width: 1px; height: 1.75rem; background: var(--color-border-default); }
.site-header--transparent .site-header__divider,
.site-header--dark .site-header__divider { background: var(--color-border-inverse); }

.search-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding-inline: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--type-meta);
}

@media (max-width: 63.99em) {
  .site-header__actions .btn { display: none; }
  .site-header__divider { display: none; }
}

/* Below ~26em the header cluster no longer fits beside the logo. The search
   label goes visually hidden and the icon keeps the accessible name, so the
   control is unchanged for assistive technology. */
@media (max-width: 25.99em) {
  .site-header__actions { gap: var(--space-3xs); margin-left: var(--space-2xs); }
  .search-toggle span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .search-toggle { min-width: 44px; justify-content: center; }
}

/* --- WordPress ---------------------------------------------------------------
   The header part is the mockup's header element; its search link is a
   paragraph link (has-icon-search), its log-in button core/loginout. */

/* Logged-in staff see the WordPress toolbar above the page (core sets its
   height in --wp-admin--admin-bar--height: 32px, 46px below 783px). Both
   headers start under it, and the sticky header sticks under it; below 601px
   the toolbar scrolls away with the page, so the sticky header sticks to the
   top again. */
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) {
  .admin-bar .site-header:not(.site-header--transparent) { top: 0; }
}
/* base.css replaces core's toolbar scroll padding; in-page targets clear the
   toolbar and the sticky header together. */
html { scroll-padding-top: calc(var(--header-height) + 1rem + var(--wp-admin--admin-bar--height, 0px)); }
.site-header__actions p.search-toggle { display: contents; }
.search-toggle > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding-inline: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--type-meta);
}
.search-toggle > a::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentcolor;
  -webkit-mask: var(--ta-icon-search) center / contain no-repeat;
          mask: var(--ta-icon-search) center / contain no-repeat;
}
@media (max-width: 25.99em) {
  /* The label goes visually hidden and keeps the accessible name, in the
     header and in the Perspectives filter row, as the mockup's
     ".search-toggle span" rule does for both. */
  .search-toggle > a { min-width: 44px; justify-content: center; font-size: 0; gap: 0; }
}

/* Below 64em the mockup hides its nav, so its actions follow the brand
   rather than the right edge. Here the navigation block stays, holding the
   menu button, so it takes the actions' offset and the actions close up to it
   by the mockup's actions gap. */
@media (max-width: 63.99em) {
  .site-header nav.wp-block-navigation.site-nav { margin-left: var(--space-md); }
  .site-header .site-header__actions { margin-left: calc(var(--space-sm) - var(--space-md)); }
}
@media (max-width: 25.99em) {
  .site-header nav.wp-block-navigation.site-nav { margin-left: var(--space-2xs); }
  .site-header .site-header__actions { margin-left: calc(var(--space-3xs) - var(--space-md)); }
}

/* From 64em to 73em the mockup's one-row header is wider than the viewport
   (the page scrolls sideways and the log-in button is cut off at 1024px).
   The tagline goes, as it does below 64em, and the search label is visually
   hidden as in the 26em rule, which keeps the header on one row inside the
   viewport. */
@media (min-width: 64em) and (max-width: 72.99em) {
  .site-header__tagline { display: none; }
  .site-header__actions .search-toggle > a { min-width: 44px; justify-content: center; font-size: 0; gap: 0; }
}

/* Keep the full desktop labels from wrapping or overflowing as the row narrows. */
@media (min-width: 73em) and (max-width: 79.99em) {
  .site-header__inner { gap: var(--space-sm); }
  .site-header ul.site-nav { gap: var(--space-sm); }
  .site-header__actions { gap: var(--space-xs); margin-left: var(--space-sm); }
}

/* The Perspectives filter row reuses the search link outside the header;
   the link inside the paragraph is the mockup's .search-toggle, so the
   paragraph adds no padding of its own. */
p.search-toggle { margin: 0; padding: 0; }
p.search-toggle[class*="has-icon-"]::before { content: none; }