/* ══ Header — Forge RX (parts/header.html) ═════════════════════════════════
   Measured from the design export (export/forge-rx-site): one 76px bar, Ink
   at 94% with a backdrop blur, sticky. Logo · nav · search/portal · Book a Consult.
   The design's cart icon is left out: there's no checkout.
   The nav turns into the overlay menu below 1140px, like the design. */

header.bt-site-header {
  position : sticky;
  top      : var(--wp-admin--admin-bar--height, 0px);
  z-index  : 100;
}
header.bt-site-header > * { margin-block: 0; }
@media screen and (max-width: 600px) {
  header.bt-site-header { top: 0; }   /* the admin bar scrolls away on phones (core: position absolute), so its offset left a 46px gap */
}
html { scroll-padding-top: 5.75rem; }

/* ── Bar ───────────────────────────────────────────────────────────────── */
.fx-header {
  background-color        : color-mix(in srgb, var(--wp--preset--color--contrast) 94%, transparent);
  -webkit-backdrop-filter : blur(10px);
          backdrop-filter : blur(10px);
  border-bottom           : 1px solid rgba(255, 255, 255, 0.08);
}
.fx-header__bar { min-height: 4.75rem; }
.fx-header__bar > * { margin-block: 0; }
.fx-header .wp-block-site-logo img { width: auto; height: 2.125rem; }

/* ── Nav — 12.5px caps, 22px apart; "See All" in gold ─────────────────── */
.fx-header__bar > .fx-nav { margin-left: auto; }   /* beats core's flex-child margin reset */
.fx-nav .wp-block-navigation__container { gap: 1.375rem; }
.fx-nav .wp-block-navigation-item__content { white-space: nowrap; transition: color 0.2s ease; }
.fx-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); }
.fx-nav .fx-nav__all > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary); font-weight: 700; }
.fx-nav .fx-nav__all > .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent); }

/* Open menu (below 1140px): a panel under the bar, like the design — core's default is a full-screen
   overlay. The bar's backdrop-filter makes .fx-header the containing block, so core's position:fixed
   resolved to the 76px bar and trapped the menu (close button off-screen). Absolute + top:100% hangs it
   below the bar; the sticky header is the fallback containing block. */
.fx-header .fx-nav { position: static; }   /* core's position:relative would hang the panel off the burger */
.fx-nav .wp-block-navigation__responsive-container.is-menu-open {
  position   : absolute;
  inset      : 100% 0 auto 0;
  max-height : calc(100dvh - 4.75rem - var(--wp-admin--admin-bar--height, 0px));
  padding    : 0.5rem var(--wp--style--root--padding-right) 1.375rem var(--wp--style--root--padding-left);
  border-top : 1px solid color-mix(in srgb, var(--wp--preset--color--base) 10%, transparent);
}
/* Links left-aligned. Core repeats .items-justified-right (flex-end) on the list itself, so reset it there too. */
.fx-nav .wp-block-navigation__responsive-container.is-menu-open,
.fx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  --navigation-layout-justification-setting : flex-start;
  --navigation-layout-justify               : flex-start;
}
.fx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; }
.has-modal-open .admin-bar .fx-nav .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0; }   /* core's admin-bar offset is for the full-screen overlay */
.fx-nav .is-menu-open .wp-block-navigation__responsive-container-close { top: 0.875rem; }   /* on the first row, at its right end */

/* Stacked links with a rule under each. */
.fx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; }
.fx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width         : 100%;
  border-bottom : 1px solid color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
}
.fx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width       : 100%;   /* the whole row is the tap target */
  padding     : 0.9375rem 0;
  font-size   : 0.875rem;
  font-weight : 700;
}
/* Dropdowns in the open menu (11/05): product names in sentence case and allowed to wrap, under their category. */
.fx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { padding-top: 0; }
.fx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding        : 0.625rem 0;
  white-space    : normal;
  text-transform : none;
  letter-spacing : 0;
  font-weight    : 500;
}
.fx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child { border-bottom: 0; }
.fx-nav .wp-block-navigation__responsive-container-open svg,
.fx-nav .wp-block-navigation__responsive-container-close svg { width: 1.5rem; height: 1.5rem; }

@media (min-width: 600px) and (max-width: 1139px) {
  .fx-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .fx-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* ── Icon buttons — search (core Search, button only), portal ─────────── */
.fx-header__icons { flex-shrink: 0; }
.fx-header .wp-block-search__button,
.fx-icon-btn .wp-block-button__link {
  display          : grid;
  place-items      : center;
  width            : 2.5rem;
  height           : 2.5rem;
  min-width        : 0;
  padding          : 0;
  margin           : 0;
  border           : 0;
  background       : none;
  color            : var(--wp--preset--color--base);
  transition       : color 0.2s ease;
}
.fx-header .wp-block-search__button:hover,
.fx-icon-btn .wp-block-button__link:hover { background: none; color: var(--wp--preset--color--primary); }
.fx-header .wp-block-search__button svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
.fx-icon-btn .wp-block-button__link { font-size: 0; }   /* the label is for screen readers; the glyph is the visual */
.fx-icon-btn .wp-block-button__link::before {
  content          : "";
  width            : 1.1875rem;
  height           : 1.1875rem;
  background-color : currentColor;
  -webkit-mask     : var(--fx-btn-icon) center / contain no-repeat;
          mask     : var(--fx-btn-icon) center / contain no-repeat;
}
.fx-icon-btn--user { --fx-btn-icon: var(--bt-icon-user); }

/* Search opens inline; the field takes the bar's colours. */
.fx-header .wp-block-search__inside-wrapper { border: 0; padding: 0; background: none; }
.fx-header .wp-block-search__input {
  height           : 2.5rem;
  border           : 1px solid color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent);
  background-color : color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
  color            : var(--wp--preset--color--base);
  font-size        : 0.875rem;
}

/* Narrow screens: there's no room beside the logo, so the open field takes the logo's and burger's
   place (it crushed the logo to nothing at 390px). They come back when the field closes. */
.fx-header .wp-block-site-logo { flex-shrink: 0; }
@media (max-width: 781px) {
  .fx-header__bar:has(.wp-block-search:not(.wp-block-search__searchfield-hidden)) > :is(.wp-block-site-logo, .fx-nav) { display: none; }
  .fx-header__bar:has(.wp-block-search:not(.wp-block-search__searchfield-hidden)) > .fx-header__icons { flex: 1 1 auto; min-width: 0; }
  .fx-header .wp-block-search:not(.wp-block-search__searchfield-hidden) { flex: 1 1 auto; min-width: 0; }
  .fx-header .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper { width: 100%; }
  .fx-header__icons > .wp-block-buttons { flex-shrink: 0; }   /* the portal icon keeps its size */
}

/* ── Book a Consult — off on phones, where the hero's own button sits just below ── */
@media (max-width: 600px) {
  .fx-header .wp-block-buttons.fx-header__cta { display: none; }   /* beats core's .wp-block-buttons.is-layout-flex */
  .fx-header__bar { gap: 0.25rem !important; }   /* beats the bar's 26px block gap (inline layout style) */
}

/* ══ Icon tiles (registered button style "Icon tile") — kept from the baseline ══ */
.wp-block-button.is-style-icon-tile .wp-block-button__link {
  display          : grid;
  place-items      : center;
  width            : 3rem;
  height           : 2.125rem;
  padding          : 0;
  border-radius    : 0.625rem;
  background       : var(--wp--preset--color--contrast);
  color            : var(--wp--preset--color--base);
  font-size        : 0;
}
.wp-block-button.is-style-icon-tile .wp-block-button__link::before {
  content          : "";
  width            : 1.25rem;
  height           : 1.25rem;
  background-color : currentColor;
  -webkit-mask     : var(--bt-tile-icon) center / contain no-repeat;
          mask     : var(--bt-tile-icon) center / contain no-repeat;
}
.bt-tile--phone { --bt-tile-icon: var(--bt-icon-phone); }
.bt-tile--pin   { --bt-tile-icon: var(--bt-icon-pin); }