/* ==========================================================================
   JIST — SITE FRAME (header)
   Sticky bar: logo lockup left, primary nav centre, phone + CTA right.
   Below 940px the nav collapses to a dropdown panel anchored under the bar.
   ========================================================================== */

.jist-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--wp--custom--layer-header);
  background-color: var(--wp--preset--color--base);
  border-block-end: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
  padding-inline: var(--wp--custom--gutter);
  transition: box-shadow var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

/* The inner rail carries the container width; core's alignfull child padding
   is a :where() rule, so this plain class beats it without !important. */
.jist-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--60);
  inline-size: 100%;
  max-inline-size: var(--wp--custom--container-width);
  margin-inline: auto;
  padding-inline: 0;
  min-block-size: var(--wp--custom--header-height);
}

/* --------------------------------------------------------------------------
   Logo lockup — mark left, wordmark right, set side by side so the stacked
   artwork stays legible inside a 76px row.
   -------------------------------------------------------------------------- */
.jist-logo {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  flex: none;
}

/* Each half is a core/image block, so the owner can swap the artwork from
   the editor. Zero the figure margin core gives it and size by height. */
.jist-logo .wp-block-image {
  margin: 0;
  line-height: 0;
}

.jist-logo .wp-block-image a {
  display: block;
  text-decoration: none;
}

.jist-logo__mark img {
  block-size: 44px;
  inline-size: auto;
  max-inline-size: none;
  display: block;
}

.jist-logo__wordmark img {
  block-size: 32px;
  inline-size: auto;
  max-inline-size: none;
  display: block;
}

/* --------------------------------------------------------------------------
   Primary navigation
   -------------------------------------------------------------------------- */
.jist-header__nav {
  flex: 0 1 auto;
}

.jist-header__nav .wp-block-navigation__container {
  gap: var(--wp--preset--spacing--60);
  align-items: center;
}

.jist-header__nav .wp-block-navigation-item__content {
  position: relative;
  display: inline-block;
  padding-block: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  color: var(--wp--preset--color--slate);
  text-decoration: none;
  transition: color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.jist-header__nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: var(--wp--custom--rule-accent);
  background-color: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}

.jist-header__nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

.jist-header__nav .wp-block-navigation-item__content:hover::after {
  transform: scaleX(1);
}

.jist-header__nav .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--contrast);
  font-weight: 600;
}

.jist-header__nav .current-menu-item .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Right-hand actions — phone number + quote CTA
   -------------------------------------------------------------------------- */
.jist-header__actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  flex: none;
}

.jist-header__phone {
  margin: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  line-height: 1;
}

.jist-header__phone a {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

.jist-header__phone a::before {
  content: "";
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  background-color: var(--wp--preset--color--accent-ink);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.5h2.9l1.5 3.9-2 1.3a12 12 0 0 0 6.5 6.5l1.3-2 3.9 1.5v2.9a2 2 0 0 1-2.2 2A17.4 17.4 0 0 1 4.4 5.7a2 2 0 0 1 2-2.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.5h2.9l1.5 3.9-2 1.3a12 12 0 0 0 6.5 6.5l1.3-2 3.9 1.5v2.9a2 2 0 0 1-2.2 2A17.4 17.4 0 0 1 4.4 5.7a2 2 0 0 1 2-2.2Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.jist-header__phone a:hover {
  color: var(--wp--preset--color--accent-ink);
  text-decoration: none;
}

/* The bar CTA. Parent-class prefix so it beats core's flex layout classes. */
.jist-header .jist-header__cta {
  margin: 0;
}

.jist-header .jist-header__cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  min-block-size: 52px;
  white-space: nowrap;
  box-shadow: var(--wp--custom--shadow-md);
  transition:
    background-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
    box-shadow var(--wp--custom--duration-base) var(--wp--custom--ease-out),
    transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}

.jist-header .jist-header__cta .wp-block-button__link::before {
  content: "";
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.5h2.9l1.5 3.9-2 1.3a12 12 0 0 0 6.5 6.5l1.3-2 3.9 1.5v2.9a2 2 0 0 1-2.2 2A17.4 17.4 0 0 1 4.4 5.7a2 2 0 0 1 2-2.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.5h2.9l1.5 3.9-2 1.3a12 12 0 0 0 6.5 6.5l1.3-2 3.9 1.5v2.9a2 2 0 0 1-2.2 2A17.4 17.4 0 0 1 4.4 5.7a2 2 0 0 1 2-2.2Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.jist-header .jist-header__cta .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--wp--custom--shadow-lg);
}

/* The nav CTA is a menu item that only exists inside the mobile panel. */
.jist-header__nav .jist-nav__cta {
  display: none;
}

/* --------------------------------------------------------------------------
   Hamburger button
   -------------------------------------------------------------------------- */
.jist-header .wp-block-navigation__responsive-container-open {
  inline-size: 44px;
  block-size: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius-sm);
  color: var(--wp--preset--color--contrast);
  background: none;
}

.jist-header .wp-block-navigation__responsive-container-close {
  inline-size: 44px;
  block-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius-sm);
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   Collapsed nav — forced up to 940px to match the original design, which
   collapses well before WordPress's own 600px breakpoint. The panel is
   anchored under the sticky bar rather than the default full-screen takeover.
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  .jist-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  .jist-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .jist-header__phone {
    display: none;
  }

  /* Sticky counts as positioned, so the header is the containing block —
     no hardcoded panel offset needed. */
  .jist-header .wp-block-navigation__responsive-container.is-menu-open {
    position: absolute;
    inset: 100% 0 auto 0;
    display: block;
    padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter) var(--wp--preset--spacing--60);
    background-color: var(--wp--preset--color--base);
    /* Core paints the open panel #000; without this the links go pure black
       while the closed bar stays slate. */
    color: var(--wp--preset--color--slate);
    border-block-end: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
    box-shadow: var(--wp--custom--shadow-lg);
    /* overflow must stay visible — the close X sits above the panel edge and
       overflow:auto clips it into a visible-but-unclickable state. */
    overflow: visible;
    min-inline-size: 0;
  }

  /* Three WP wrappers hijack the anchoring unless they are made static. */
  .jist-header__nav,
  .jist-header .wp-block-navigation__responsive-dialog,
  .jist-header .wp-block-navigation__responsive-container-close {
    position: static;
  }

  /* Core dresses this panel as a centred full-screen overlay: a top margin on
     the dialog, 56px of padding and align-items:center on the content wrapper.
     A dropdown wants the list flush to the rail and full width, so all three
     are undone here. Without this the menu renders as a narrow centred column. */
  .jist-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    margin: 0;
  }

  .jist-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: stretch;
    padding: 0;
  }

  .jist-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .jist-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    align-items: stretch;
    text-align: start;
  }

  .jist-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    inline-size: 100%;
  }

  .jist-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block;
    inline-size: 100%;
    padding-block: var(--wp--preset--spacing--40);
    font-size: var(--wp--preset--font-size--lead);
    border-block-end: var(--wp--custom--hairline) solid var(--wp--custom--alpha-ink-light);
  }

  .jist-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
    content: none;
  }

  /* Hide the hamburger while the panel is open. */
  .jist-header__nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
    visibility: hidden;
  }

  /* The close X takes the quote button's slot at the end of the bar, so the
     two never sit on top of each other. visibility (not display) keeps the
     bar from reflowing as the panel opens. The panel repeats the call action
     as its last item, so nothing is lost while it is open. */
  .jist-header:has(.is-menu-open) .jist-header__actions {
    visibility: hidden;
  }

  /* Anchored to the container, which starts at the header's lower edge:
     -60px lifts the 44px button back into the bar, and the gutter lines its
     right edge up with the rail rather than the viewport edge. */
  .jist-header .wp-block-navigation__responsive-container-close {
    position: absolute;
    inset-block-start: -60px;
    inset-inline-end: var(--wp--custom--gutter);
  }

  /* CTA menu item, shown as a brass pill at the foot of the panel. */
  .jist-header__nav .jist-nav__cta {
    display: block;
    margin-block-start: var(--wp--preset--spacing--50);
  }

  /* Needs the full open-panel prefix: the generic item rule above carries four
     classes and would otherwise win on display and width. */
  .jist-header .wp-block-navigation__responsive-container.is-menu-open .jist-nav__cta .wp-block-navigation-item__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* fit-content, not auto: the anchor is blockified here, so auto would
       stretch it across the rail instead of hugging the label. */
    inline-size: fit-content;
    min-block-size: 52px;
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--contrast);
    font-weight: 600;
    border: 0;
    border-radius: var(--wp--custom--radius-sm);
    box-shadow: var(--wp--custom--shadow-md);
  }
}

/* Below the smallest phones the bar CTA drops its label and keeps the icon,
   so the call action never gets pushed off the row. */
@media (max-width: 600px) {
  .jist-header .jist-header__cta .wp-block-button__link {
    padding-inline: var(--wp--preset--spacing--40);
    font-size: 0;
    gap: 0;
  }

  .jist-header .jist-header__cta .wp-block-button__link::before {
    inline-size: 20px;
    block-size: 20px;
  }
}

@media (max-width: 480px) {
  .jist-logo {
    gap: var(--wp--preset--spacing--20);
  }

  .jist-logo__mark img {
    block-size: 36px;
  }

  .jist-logo__wordmark img {
    block-size: 25px;
  }

  .jist-header__inner {
    gap: var(--wp--preset--spacing--30);
  }
}