/* Blend top bar and footer (HB-REDESIGN-R2; ADR-0036 Amendment, 2026-11-02). Hand-maintained,
   not emitted by hb_brand.build. OPT-IN: every rule sits under header.hb-blend (the
   family_header header_class) or under its following footer, so a page that does not pass the
   class (Finance) is untouched. Load right after hb-family.css. family.html is unchanged, so the
   inline one-item switcher and the header caption are still emitted and are hidden here.
   Colours come only from the --hb-* tokens that hb-family.css scopes to the header and the
   footer (Shore, and Dusk by [data-theme]); corners are 4, 6 and 8px; no pills. */

header.hb-family-header.hb-blend {
  /* Logo slots (D3): the lockup and the mark are sized only from these. */
  --hb-bar-h: 64px;
  --hb-logo-h: 28px;
  --hb-mark-size: 28px;
  background: var(--hb-surface);
  border-bottom: 1px solid var(--hb-border);
}

/* ---- bar ---- */
header.hb-family-header.hb-blend .hb-family-bar {
  flex-wrap: nowrap;
  gap: 0;
  height: calc(var(--hb-bar-h) - 1px);
  padding: 0 1rem;
}

header.hb-family-header.hb-blend .hb-family-brand { flex: none; order: 0; }
/* .hb-family-local only wraps what the caller emits (local nav, then the theme icon button), so it
   generates no box: its children are bar items and can be ordered. Desktop order: brand, local
   links, Products, theme toggle (last, 8px after Products). */
header.hb-family-header.hb-blend .hb-family-local { display: contents; }
header.hb-family-header.hb-blend .hb-local-nav { order: 1; align-self: stretch; margin-left: 1.5rem; }
header.hb-family-header.hb-blend .hb-family-switch { order: 2; margin-left: auto; }
header.hb-family-header.hb-blend .hb-theme-toggle { order: 3; margin: 0 0 0 0.5rem; }

/* Icon button (R1): the visible box stays 36px; on every pointer an invisible ::after grows only
   the hit area to 44px (2.25rem + 2 x 4px), without moving anything or touching Products (8px gap). */
header.hb-family-header.hb-blend .hb-theme-toggle::after { content: ""; position: absolute; inset: -4px; }

/* Hidden with display:none so they also leave the accessibility tree. */
header.hb-family-header.hb-blend .hb-switcher-inline,
header.hb-family-header.hb-blend .hb-family-caption,
header.hb-family-header.hb-blend .hb-family-rule { display: none; }

/* ---- logo ---- */
header.hb-family-header.hb-blend .hb-brand-home,
header.hb-family-header.hb-blend .hb-brand-by { border-radius: 4px; }

header.hb-family-header.hb-blend .hb-brand-home {
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

header.hb-family-header.hb-blend .hb-lockup {
  width: auto;
  max-width: none;
  height: var(--hb-logo-h);
}

header.hb-family-header.hb-blend .hb-mark {
  width: var(--hb-mark-size);
  height: var(--hb-mark-size);
  max-width: none;
}

/* ---- local nav: quiet text links, current = ink + 2px ember underline on the hairline ---- */
header.hb-family-header.hb-blend .hb-local-nav { display: flex; align-self: stretch; }

header.hb-family-header.hb-blend .hb-local-nav ul {
  flex-wrap: nowrap;
  gap: 0.25rem;
  align-items: stretch;
}

header.hb-family-header.hb-blend .hb-local-nav li { display: flex; }

header.hb-family-header.hb-blend .hb-local-nav a {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 -2px 0 transparent;
  color: var(--hb-text-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

header.hb-family-header.hb-blend .hb-local-nav a:hover { color: var(--hb-text); }

header.hb-family-header.hb-blend .hb-local-nav a[aria-current="page"] {
  background: none;
  box-shadow: inset 0 -2px 0 var(--hb-ember);
  color: var(--hb-text);
  font-weight: 500;
}

/* The logo is not a tab; the phone rules in hb-family.css paint pills with ::before. */
header.hb-family-header.hb-blend a[aria-current="page"].hb-brand-home {
  background: none;
  box-shadow: none;
}

header.hb-family-header.hb-blend .hb-brand-home[aria-current="page"]::before,
header.hb-family-header.hb-blend .hb-local-nav a[aria-current="page"]::before,
header.hb-family-header.hb-blend .hb-products-btn::before { content: none; }

/* ---- Products menu ---- */
header.hb-family-header.hb-blend .hb-switcher-menu { display: block; }

header.hb-family-header.hb-blend .hb-products-btn {
  gap: 0.5rem;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--hb-border);
  border-radius: 6px;
  background: var(--hb-surface);
  color: var(--hb-text);
  font-size: 0.875rem;
  font-weight: 500;
}

header.hb-family-header.hb-blend .hb-products-btn:hover { background: var(--hb-raised); }

header.hb-family-header.hb-blend .hb-products-panel {
  top: 100%;
  min-width: 16rem;
  margin-top: 6px;
  padding: 4px;
  border: 1px solid var(--hb-border);
  border-radius: 8px;
  background: var(--hb-surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--hb-text) 14%, transparent);
}

header.hb-family-header.hb-blend .hb-products-panel a {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: var(--hb-text-2);
  font-size: 0.875rem;
  font-weight: 500;
}

header.hb-family-header.hb-blend .hb-products-panel a:hover {
  background: var(--hb-raised);
  color: var(--hb-text);
}

header.hb-family-header.hb-blend .hb-products-panel a[aria-current="page"],
header.hb-family-header.hb-blend .hb-products-panel a[data-active="true"]:not([aria-current="page"]) {
  background: var(--hb-raised);
  box-shadow: none;
  color: var(--hb-text);
  font-weight: 500;
}

/* ---- focus: one ember ring ---- */
header.hb-family-header.hb-blend .hb-brand-home:focus-visible,
header.hb-family-header.hb-blend .hb-brand-by:focus-visible,
header.hb-family-header.hb-blend .hb-products-btn:focus-visible,
header.hb-family-header.hb-blend .hb-products-panel a:focus-visible,
header.hb-family-header.hb-blend .hb-local-nav a:focus-visible,
header.hb-family-header.hb-blend .hb-theme-toggle:focus-visible,
header.hb-blend ~ footer.hb-family-footer a:focus-visible {
  outline: 2px solid var(--hb-ember);
  outline-offset: 2px;
  border-radius: 4px;
}

header.hb-family-header.hb-blend .hb-local-nav a:focus-visible {
  outline-offset: -2px;
  border-radius: 0;
}

/* ---- phone: mark left, Products and the theme toggle right, local nav as a second row of tabs ---- */
@media (max-width: 47.99rem) {
  header.hb-family-header.hb-blend {
    --hb-bar-h: 56px;
    --hb-logo-h: 24px;
  }

  header.hb-family-header.hb-blend .hb-family-bar {
    flex-wrap: wrap;
    height: auto;
    row-gap: 0;
    padding: 0 1rem;
  }

  header.hb-family-header.hb-blend .hb-family-brand,
  header.hb-family-header.hb-blend .hb-family-switch { height: var(--hb-bar-h); }

  header.hb-family-header.hb-blend .hb-family-brand { order: 0; }
  header.hb-family-header.hb-blend .hb-family-switch { order: 1; }

  header.hb-family-header.hb-blend .hb-brand-home {
    justify-content: flex-start;
    min-width: 2.75rem;
    margin-left: -0.5rem;
    padding-left: 0.5rem;
  }

  /* Row 1 ends with the toggle (order 2, after Products); the local tabs are row 2 (order 3). */
  header.hb-family-header.hb-blend .hb-theme-toggle { order: 2; }

  header.hb-family-header.hb-blend .hb-local-nav {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    margin: 0 0 0 -0.75rem;
    overflow-x: auto;
  }

  header.hb-family-header.hb-blend .hb-local-nav a { font-size: 0.9375rem; }

  header.hb-family-header.hb-blend .hb-products-btn { min-height: 2.75rem; }

  header.hb-family-header.hb-blend .hb-products-panel { top: auto; }
}

/* ---- footer: hairline top, quiet links, no active-tab box ---- */
header.hb-blend ~ footer.hb-family-footer {
  background: var(--hb-surface);
  border-top: 1px solid var(--hb-border);
}

header.hb-blend ~ footer.hb-family-footer .hb-family-footer-row { padding: 0.75rem 1rem 1.5rem; row-gap: 0; }

header.hb-blend ~ footer.hb-family-footer nav a {
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: var(--hb-text-2);
  font-size: 0.875rem;
  font-weight: 400;
}

header.hb-blend ~ footer.hb-family-footer nav a:hover,
header.hb-blend ~ footer.hb-family-footer nav a[aria-current="page"] {
  background: none;
  box-shadow: none;
  color: var(--hb-text);
  font-weight: 400;
}

header.hb-blend ~ footer.hb-family-footer .hb-family-copy { order: 1; font-size: 0.75rem; color: var(--hb-text-3); }

header.hb-blend ~ footer.hb-family-footer .hb-family-extra {
  order: 2;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hb-border);
  color: var(--hb-text-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

header.hb-blend ~ footer.hb-family-footer .hb-family-extra p { margin: 0; }
header.hb-blend ~ footer.hb-family-footer .hb-family-extra strong { color: var(--hb-text); font-weight: 600; }

header.hb-blend ~ footer.hb-family-footer .not-advice {
  margin: 0;
  padding: 0 0 0 0.75rem;
  border-left: 2px solid var(--hb-text-3);
}