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

    display: grid;
    grid-template-columns: var(--header-actions-width) 1fr var(--header-actions-width);
    grid-template-areas:
      "menu menu menu"
      "actions-start title actions-end";
    max-inline-size: 100%;
    padding-block: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--block-space-half);
    padding-inline: var(--main-padding);

    /* 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(~ #main .card-columns) {
      inline-size: 100%;
      margin-inline: auto;
      max-inline-size: var(--main-width);
    }

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

  .nav {
    align-items: center;
    display: grid;
    gap: var(--inline-space);
    grid-template-columns: auto 1fr auto;
  }

  .nav__brand {
    align-items: center;
    display: inline-flex;
    gap: var(--inline-space-half);
    min-inline-size: max-content;

    img {
      border-radius: 0.25rem;
    }

    span {
      font-size: var(--text-medium);
      font-weight: 900;
    }
  }

  .nav__groups {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    justify-content: center;
  }

  .nav__group {
    align-items: center;
    background: color-mix(in oklch, var(--color-canvas) 74%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-ink-lighter) 70%, transparent);
    border-radius: 999rem;
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.2rem;
    position: relative;
  }

  .nav__group-label {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 800;
    letter-spacing: 0.04em;
    padding-inline: 0.7rem 0.45rem;
    text-transform: uppercase;
  }

  .nav__link {
    border-radius: 999rem;
    color: var(--color-ink);
    display: inline-flex;
    font-weight: 900;
    line-height: 1;
    padding: 0.65rem 0.9rem;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        background: color-mix(in oklch, var(--color-ink-lightest) 80%, transparent);
      }
    }
  }

  .nav__link--disabled {
    color: var(--color-ink-dark);
    cursor: default;
    opacity: 0.65;
  }

  .nav__details {
    display: inline-flex;
    position: relative;

    &[open] .nav__link--summary,
    &:focus-within .nav__link--summary {
      background: var(--color-ink);
      color: var(--color-ink-inverted);
    }

    &::after {
      block-size: 0.7rem;
      content: "";
      inset-block-start: 100%;
      inset-inline: -0.5rem;
      position: absolute;
    }

    @media (any-hover: hover) {
      &:hover .nav__subnav {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
      }
    }
  }

  .nav__link--summary {
    align-items: center;
    cursor: pointer;
    gap: 0.4em;
    list-style: none;

    &::after {
      border-block-start: 0.35em solid currentColor;
      border-inline: 0.28em solid transparent;
      content: "";
      inline-size: 0;
      opacity: 0.7;
    }

    &::-webkit-details-marker {
      display: none;
    }
  }

  .nav__subnav {
    background: color-mix(in oklch, var(--color-canvas) 94%, oklch(var(--lch-curious-blue-900)) 6%);
    border: 1px solid color-mix(in oklch, var(--color-ink-lighter) 75%, transparent);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: 0.25rem;
    inset-block-start: calc(100% + 0.45rem);
    inset-inline-start: 50%;
    min-inline-size: max(11rem, 100%);
    opacity: 0;
    padding: 0.35rem;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%) translateY(-0.25rem);
    transition: opacity 120ms ease-out, transform 120ms ease-out;
    z-index: var(--z-nav);

    .nav__details[open] &,
    .nav__details:focus-within & {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
  }

  .nav__subnav-link {
    border-radius: 0.75rem;
    color: var(--color-ink);
    display: block;
    font-weight: 700;
    padding: 0.7rem 0.85rem;
    text-decoration: none;
    white-space: nowrap;

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-ink-lightest);
      }
    }
  }

  .nav__cta {
    white-space: nowrap;
  }

  @media (max-width: 719px) {
    .nav {
      grid-template-columns: 1fr auto;
    }

    .nav__groups {
      grid-column: 1 / -1;
      grid-row: 2;
      justify-content: flex-start;
      overflow-x: auto;
      padding-block: 0.15rem;
    }

    .nav__group {
      flex: 0 0 auto;
    }
  }

  @media (max-width: 479px) {
    .nav {
      grid-template-columns: 1fr;
    }

    .nav__cta {
      justify-self: start;
    }
  }

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

    /* Make button_to forms not affect layout */
    > div, form {
      display: contents;
    }
  }

  .header__actions--start {
    grid-area: actions-start;
    margin-inline-end: auto;
  }

  .header__actions--end {
    grid-area: actions-end;
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  .header__title {
    color: inherit;
    font-size: var(--text-large);
    font-weight: 900;
    grid-area: title;
    margin: 0 auto;
    min-inline-size: 0;
    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 {
    color: var(--color-ink);
    font-size: 1.2rem;
    inline-size: auto;
    margin-block-start: 0.1em;

    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;
      width: 1.5em;
    }

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