.header {
  inline-size: 100%;
  background-color: var(--color-navbar-bg);
}

.container {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);

  /* sizing */
  inline-size: 100%;
  min-block-size: 60px;
  box-sizing: border-box;

  /* chrome */
  color: var(--color-navbar-fg);

  /* density-aware vertical rhythm */
  padding-block: calc(var(--control-padding-y) + var(--density));
}

.container[data-size='lg'] {
  min-block-size: 80px;
}

/* Optional content wrapper */
.inner {
  inline-size: min(100%, var(--container-xl));
  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

/* Slots */
.start,
.center,
.end {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
}
.center {
  margin-inline: auto;
}

/* Interactive elements inside the header share focus visuals */
.container a:focus-visible,
.container button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Elevated header */
.elevated {
  border-block-end: 0;
  box-shadow: var(--shadow-sm);
}

/* Transparent header */
.transparent {
  background-color: transparent;
  border-block-end: 0;
}

/* Condensed density option */
:root[data-density='compact'] .container {
  padding-inline: var(--spacing-md);
}