@layer components {
  /* Centered title with space for two buttons on either side */
  .header {
    --header-height: 50px;
    --header-gap: 0.5ch;
    --btn-icon-size: 1rem;
    --header-btn-size: 2rem;
    --header-button-count: 0;
    --header-actions-width: calc((var(--header-btn-size) + var(--header-gap)) * var(--header-button-count));

    display: grid;
    grid-template-columns: minmax(var(--header-actions-width), auto) 1fr minmax(var(--header-actions-width), auto);
    grid-template-areas:
      "menu menu menu"
      "actions-start title actions-end";
    max-inline-size: 100dvw;
    padding-block: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--block-space-half);
    padding-inline: var(--main-padding);
    position: relative;
    z-index: var(--z-nav);
    height: var(--header-height);
    margin-bottom: 3rem;


    /* Change the grid size depending on how many buttons are present */
    &:has(.header__actions > *:nth-child(1)) { --header-button-count: 1; }
    &:has(.header__actions > *:nth-child(2)) { --header-button-count: 2; }
    &:has(.header__actions > *:nth-child(3)) { --header-button-count: 3; }

    &:has(nav) {
      row-gap: 0;
    }

    &:has(dialog[open]) {
      z-index: var(--z-nav-open);
    }

    &:has(~ #main .card-columns) {
      inline-size: 100dvw;
      margin-inline: auto;
      max-inline-size: var(--main-width);
    }

    nav {
      grid-area: menu;
      margin-inline: auto;
    }
  }

  .header__actions {
    display: flex;
    align-items: center;
    font-size: var(--text-x-small);
    gap: var(--header-gap);
    min-inline-size: var(--header-actions-width);
  }

  .header__actions--start {
    grid-area: actions-start;
    inline-size: 110px;
  }

  .header__actions--center {
    grid-area: title;
    justify-content: center;
    font-size: var(--text-small);
    font-weight: 600;
  }

  .header__actions--end {
    grid-area: actions-end;
    justify-content: flex-end;
    inline-size: 110px;
  }

  .header__title {
    color: inherit;
    font-size: var(--text-large);
    font-weight: 900;
    grid-area: title;
    margin: 0 auto;
    min-inline-size: 0;
    position: relative;
    text-align: center;
  }

  .header__skip-navigation {
    --left-offset: -999em;

    inset-block-start: 4rem;
    inset-inline-start: var(--left-offset);
    position: absolute;
    white-space: nowrap;
    z-index: 11;

    &:focus {
      --left-offset: var(--inline-space);
    }
  }

  .header__logo {
    background: none;
    border: none;
    color: var(--color-golden);
    cursor: pointer;
    font-size: 1.2rem;
    inline-size: auto;
    margin-block-start: 0.1em;
    padding: 0;

    span {
      background: var(--color-ink-lightest);
      block-size: auto;
      border-radius: 0.3125em;
      /* box-shadow:
        0 0 0 1px oklch(var(--lch-ink-darkest) / 0.1),
        0 0.1em 0.2em -0.1em oklch(var(--lch-ink-darkest) / 0.05),
        0 0.2em 0.4em -0.2em oklch(var(--lch-ink-darkest) / 0.05),
        0 0.3em 0.6em -0.3em oklch(var(--lch-ink-darkest) / 0.05)
      ; */
      display: grid;
      height: 1.5em;
      inline-size: 1.5em;
      padding: 0.325em 0.275em 0.225em 0.275em;
      place-content: center;
      transition: background-color 150ms ease;
      width: 1.5em;
    }

    &:hover span {
      background: var(--color-ink-lighter);
    }

    svg {
      height: 100%;
      /* margin-inline-start: 0.4125em;
      margin-inline-end: 0.5375em; */
      max-height: 0.8625em;
      overflow: visible;
      width: auto;
    }
  }

  .header__menu {
    background: var(--color-canvas);
    border-radius: 0.5rem;
    box-shadow:
      0 0 0 1px oklch(var(--lch-ink-darkest) / 0.1),
      0 0.25rem 0.5rem -0.125rem oklch(var(--lch-ink-darkest) / 0.1),
      0 0.5rem 1rem -0.25rem oklch(var(--lch-ink-darkest) / 0.08)
    ;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    padding: 0.625rem;
    position: absolute;
    translate: -50% 0.25rem;
    z-index: var(--z-nav-open);
  }

  .header__menu-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
  }

  .header__menu-label {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    font-weight: 600;
    min-inline-size: 4.5em;
  }

  .header__menu-row {
    display: flex;
    gap: 0.25rem;
  }

  .header__menu-btn {
    --icon-size: 1rem;

    align-items: center;
    background: none;
    border: 2px solid transparent;
    border-radius: 0.375rem;
    color: var(--color-ink-dark);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-small);
    font-weight: 600;
    justify-content: center;
    min-inline-size: 2rem;
    padding: 0.3em 0.5em;
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;

    &:hover {
      background-color: var(--color-ink-lightest);
      color: var(--color-ink-darkest);
    }
  }

  .header__menu-btn--active {
    background-color: var(--color-ink-lightest);
    border-color: var(--color-ink-light);
    color: var(--color-ink-darkest);
  }

  .header__menu-btn--wide {
    inline-size: 100%;
  }

  .header__menu-select-form {
    color: var(--color-ink-dark);
    inline-size: 100%;
    position: relative;

    select {
      display: block;
    }

    &::after {
      background-color: currentColor;
      block-size: 0.75em;
      content: "";
      inline-size: 0.75em;
      inset-block-start: 50%;
      inset-inline-end: 0.5em;
      mask-image: url("/assets/icons/chevron-down-4560db26.svg");
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: 0.75em;
      pointer-events: none;
      position: absolute;
      translate: 0 -50%;
      margin-top: 1px;
    }
  }

  .header__menu-select {
    appearance: none;
    background: none;
    border: 1px solid var(--color-ink-light);
    border-radius: 0.375rem;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-small);
    font-weight: 600;
    inline-size: 100%;
    padding: 0.3em 1.75em 0.3em 0.5em;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;

    &:hover {
      background-color: var(--color-ink-lightest);
      color: var(--color-ink-darkest);
    }
  }

  /* -----------------------------------------------------------------------
     Desktop: Transform dropdown into an always-visible editorial utility bar
     sitting above the main nav line. Clean separators between control groups.
     ----------------------------------------------------------------------- */
  @media (min-width: 768px) {
    .header {
      /* grid-template-areas:
        "bar bar bar"
        "actions-start title actions-end"; */
      margin-bottom: 3rem;
      grid-template-areas: "bar bar bar";       
      grid-template-columns: minmax(var(--header-actions-width), auto) 1fr minmax(var(--header-actions-width), auto);         
    }

    /* Break the wrapper so logo + menu become direct grid participants */
    .header__title {
      display: contents;
    }

    .header__logo {
      grid-area: title;
      justify-self: center;
    }

    /* Menu → horizontal utility bar, always visible */
    .header__menu,
    .header__menu[hidden] {
      display: flex !important;
      grid-area: bar;
      position: static;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      translate: none;
      padding-block: 0 0.375rem;
      padding-inline: 0;
      border-block-end: 1px solid transparent;
      border-image: linear-gradient(
        to right,
        transparent,
        oklch(var(--lch-ink-light)) 20%,
        oklch(var(--lch-ink-light)) 80%,
        transparent
      ) 1;
      gap: 0;
      inline-size: 100%;
      animation: utility-bar-enter 0.5s var(--ease-out-expo) both;
    }

    /* Sections: inline with hairline vertical separators */
    .header__menu-section {
      padding-inline: 0.625rem;
    }

    .header__menu-section + .header__menu-section {
      border-inline-start: 1px solid var(--color-ink-lighter);
    }

    /* Buttons: refined & compact for utility context */
    .header__menu-btn {
      font-size: var(--text-x-small);
      min-inline-size: 1.625rem;
      padding: 0.2em 0.375em;
      border-radius: 0.25rem;
      border-width: 1.5px;
    }

    .header__menu-btn--wide {
      inline-size: auto;
      gap: 0.3em;
      padding-inline: 0.5em;
    }

    /* Language select: borderless until hover */
    .header__menu-select-form {
      inline-size: auto;
    }

    .header__menu-select {
      font-size: var(--text-x-small);
      border-color: transparent;
      padding: 0.2em 1.5em 0.2em 0.375em;
    }

    .header__menu-select:hover {
      border-color: var(--color-ink-light);
    }
  }

  @keyframes utility-bar-enter {
    from {
      opacity: 0;
      translate: 0 -0.25rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .header__menu {
      animation: none !important;
    }
  }
}

.header--date-nav {
  grid-template-areas: "actions-start title actions-end";
  grid-template-columns: 110px 1fr 110px;

  @media (min-width: 768px) {
    grid-template-areas: "actions-start title actions-end";
    grid-template-columns: 110px 1fr 110px;
  }
}

.header--new-source {
  margin-bottom: 3rem;
}

.header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--color-ink-dark);
  font-size: var(--text-small);
  text-decoration: none;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  transition: color 150ms ease, background-color 150ms ease;
  white-space: nowrap;

  &:hover {
    color: var(--color-ink-darkest);
    /* background-color: var(--color-ink-lightest); */
  }
}

.header__controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header__control-btn {
  --icon-size: 1.125rem;

  background: none;
  border: none;
  color: var(--color-ink-dark);
  cursor: pointer;
  padding: 0.4em;
  border-radius: 0.375em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease, background-color 150ms ease;

  &:hover {
    color: var(--color-ink-darkest);
    background-color: var(--color-ink-lightest);
  }
}