/* ============================================================
   Sticky one-row header. Source: portfolio-v1-archive-grid.html
   lines 69-145. Sticky positioning itself comes from core's
   position support (.is-position-sticky), which already handles
   the admin-bar offset.
   ============================================================ */
.site-header {
  position: sticky;
  /* core publishes this var when the admin bar is fixed */
  top: var(--wp-admin--admin-bar--position-offset, 0px);
  z-index: 20;
  border-bottom: var(--od-hairline);
  background: var(--wp--preset--color--white, #fff);
}

.site-header__inner { gap: 24px 32px; }

/* Round grayscale portrait. Grayscale is forced here so a colour
   upload can never break the monochrome rule. */
.site-header .wp-block-site-logo img {
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1);
  border: var(--od-hairline);
}

.site-header__wordmark a { text-decoration: none; }
.site-header__wordmark a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation .current_page_item > a,
.site-header .wp-block-navigation [aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* ---- Homepage only: the header floats in once the hero name has
        scrolled away. `html.od-past-hero` is published by the
        hero block's view script -- the plugin owns the hero and
        the theme just reacts. ---- */
body.home .site-header {
  position: fixed;
  inset: 0 0 auto 0;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 200ms ease-out, visibility 0s linear 200ms;
}

html.od-past-hero body.home .site-header,
body.home.od-past-hero .site-header {
  transform: translateY(0);
  visibility: visible;
  transition: transform 200ms ease-out;
}

body.home.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.home.admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { body.home.admin-bar .site-header { top: 0; } }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none !important; }
}