/* ==========================================================================
   Page header
   Figma source: Page header (3462:21820) on Tax / Settings.
   29px breadcrumb title (-0.58px tracking, 1.2 leading) with the section
   crumb muted and a chevron; 16px lede; 13px footnote note with 48px
   clearance below.
   ========================================================================== */

.page-header {
  padding-top: 33px;
}

.page-header__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-bottom: 40px;
  font-size: var(--text-title);
  font-weight: var(--weight-regular);
  letter-spacing: -0.02em; /* -0.58px at 29px */
  line-height: 1.2;
}

/* Back arrow leading the breadcrumb title — injected by ui.js on every page with a
   crumb (GLOBAL, Peter 17 Jul: "it's human nature to click a back arrow").
   It reads as PART of the crumb (Peter's pick, 17 Jul): crumb-grey, small, tucked
   tight — "← Payroll / Title" is one quiet wayfinding unit, the page name stays
   the only loud thing. */
.page-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: -2px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--color-border-strong); /* the crumb's own grey */
  cursor: pointer;
}
.page-back > svg { width: 18px; height: 18px; }
/* provisional */
.page-back:hover { background: var(--color-bg-subtle); color: var(--color-text); }

.page-header__crumb {
  color: var(--color-border-strong); /* #abacae, as in Figma */
}

/* Breadcrumb segments are clickable links back up the hierarchy */
.page-header__crumb a {
  color: inherit;
  text-decoration: none;
}

.page-header__crumb a:hover {
  text-decoration: underline;
}

.page-header__title > svg {
  width: 24px;
  height: 24px;
  margin-top: 5px; /* optical, from Figma */
}

.page-header__lede {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.page-header__note {
  font-size: var(--text-xs);
  line-height: var(--leading-footnote);
  letter-spacing: -0.08px;
  color: var(--color-text-muted);
  padding-bottom: 48px;
}

@media (max-width: 768px) {
  .page-header { padding-top: var(--space-4); }
  .page-header__title { font-size: var(--text-heading); padding-bottom: var(--space-6); flex-wrap: wrap; }
  .page-header__note { padding-bottom: var(--space-6); }
}

/* THE SECTION DOORS (Peter, 7 Sep): a row of the same icon links on every page of a section; the
   page you are on is marked, so the row never shifts and nothing is a dead end. */
.sec-doors { display: inline-flex; align-items: center; gap: var(--space-1); }
.sec-doors .btn--icon[aria-current="page"] { background: var(--color-bg-subtle); border-color: transparent; }