@layer layout {
/* Header styles with CSS nesting */
header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  background-color: var(--surface);
  border-block-end: var(--border-width) solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: var(--z-index-40);

  & * {
    font-size: var(--font-size-xl);
    padding: var(--spacing-2);

    & a {
      display: inline-flex;
      align-items: center;
      min-height: var(--tap-min);
      text-decoration: none;
      color: var(--text);

      &:hover {
        color: var(--brand);
      }

      &:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
      }
    }
  }

  & .language {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--tap-min);

    & select {
      min-width: 120px;
      width: auto;
      min-height: var(--tap-min);
      font-size: var(--font-size-base);
    }
  }

  & .account {
    display: flex;
    align-items: center;

    & .edit a {
      text-decoration: underline;
    }

    & .logout a {
      font-size: var(--font-size-2xl);
    }
  }

  /* Media query for smaller screens */
  @media (max-width: 768px) {
    & * {
      font-size: var(--font-size-lg);
      padding: var(--spacing-1);
    }

    & .language select {
      min-width: 100px;
    }
  }
}
}