/* Rendered from Dawn header.liquid's <style> + {% style %} blocks, using this site's
 * settings (header-group.json): padding 20/20, margin_bottom 0,
 * sticky_header_type=reduce-logo-size, menu_type_desktop=dropdown. */

header-drawer {
  justify-self: start;
  margin-left: -1.2rem;
}

/* reduce-logo-size: logo shrinks once scrolled past header */
.scrolled-past-header .header__heading-logo-wrapper {
  width: 75%;
}

/* A separate brand mark beside the logo was tried and reverted 2026-08-09.
   It required .header__heading-link to become a flex row and the logo wrapper
   to drop to width:auto — which silently disabled the 75% rule above, so on
   scroll the mark shrank and the wordmark did not. The mark now lives inside
   the logo image itself, and Dawn's sizing handles both as one. */

/* ---- Logo size (owner 2026-08-09) --------------------------------------
   The rendered width used to come from a hardcoded width="300" on the <img>.
   That looked like a CLS placeholder, so it was replaced with the attachment's
   real dimensions — and the logo grew, because with no CSS width the attribute
   IS the size. Nothing about the intended size was ever written down; it was a
   side effect of a number in the markup.

   Now it is one variable. 30rem restores the 300px the site had before today;
   change --we-logo-w alone to go smaller — the scrolled size follows it. */
.header {
  --we-logo-w: 30rem;
  --we-logo-scrolled: 0.6; /* was an implicit 0.75 of the grid cell */
}
.header__heading-logo-wrapper {
  width: var(--we-logo-w);
  max-width: 100%;
}
.header__heading-logo {
  width: 100%;
  height: auto;
}
/* Must come after Dawn's 75% rule above — same specificity, so order decides.
   Percentage there was of the grid cell, not of the logo, which is why the
   shrink never looked proportional. */
.scrolled-past-header .header__heading-logo-wrapper {
  width: calc(var(--we-logo-w) * var(--we-logo-scrolled));
}

@media screen and (max-width: 989px) {
  .header { --we-logo-w: 20rem; }
}

/* dropdown desktop menu: drawer only below 990px */
@media screen and (min-width: 990px) {
  header-drawer {
    display: none;
  }
}

.menu-drawer-container {
  display: flex;
}

.list-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
}

summary.list-menu__item {
  padding-right: 2.7rem;
}

.list-menu__item {
  display: flex;
  align-items: center;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.list-menu__item--link {
  text-decoration: none;
  padding-bottom: 1rem;
  padding-top: 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .list-menu__item--link {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
}

.header {
  padding: 10px 3rem 10px 3rem;
}

.section-header {
  position: sticky; /* Safari z-index fix (Dawn PR #2147) */
  margin-bottom: 0px;
}

@media screen and (min-width: 990px) {
  .header {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  /* Condense the whole bar on scroll, not just the logo (owner 2026-08-09).
     Dawn's reduce-logo-size shrinks the logo alone, which does not move the
     header at all here: the icon row is taller than the shrunken logo, so it,
     not the logo, sets the height. Giving back 10px of padding each side is what
     actually makes the bar smaller. The icons stay put — 44px is the
     touch-target floor, not decoration. */
  .scrolled-past-header .header {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.header {
  transition: padding 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

/* announcement bar separator (show_line_separator: true) */
.announcement-bar-section {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}