@layer layout {
  .skip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    display: block;
    padding: 0.5rem 1rem;

    background-color: oklch(from var(--color-secondary) calc(l + 0.7) c h);
    color: inherit;
    
    text-decoration: none;
    
    translate: -50% -100%;
    transition: translate .2s ease-out;

    &:focus-visible {
      translate: -50% 0;
    }
  }

  .header {
    padding-block: 1.25rem;
    
    color: var(--color-white);
    background: linear-gradient(to right, var(--color-secondary), oklch(from var(--color-secondary) calc(l + 0.15) c h));
    
    @media (width < 72rem) { 
      padding-block: 0.75rem;
    }

    .logo {
      @media (width < 72rem) { 
        margin-inline-end: auto;
      }

      @media (width < 30rem) { 
        img {
          block-size: 36px;
          inline-size: auto;
        }
        
        .text {
          display: none;  
        }
      }
    }

    .container {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .desktop {
      @media (width < 72rem) {
        display: none;
      }
    }

    .desktop-navigation {
      display: flex;
      gap: 3ex;
      margin-inline: auto;
      
      @media (width < 72rem) {
        display: none;
      }
    }

    nav {
      text-transform: uppercase;
      font-weight: 500;

      a:not(.button) {
        opacity: 0.75;
        transition: opacity .1s linear;

        &:hover, &:focus-visible, &[aria-current="page"] {
          opacity: 1;
        }
      }
    }

    a {
      text-decoration: none;
    }
  }

  .language-switcher {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: unset;
    padding: unset;

    text-transform: uppercase;
    font-weight: 500;

    color: inherit;
    background-color: transparent;
    
    border: unset;

    cursor: pointer;
    appearance: none;

    span {
      opacity: 0.75;
      transition: opacity 0.1s linear;
    }

    &:is(:hover, :focus-visible) span {
      opacity: 1;
    }

    + [popover] {
      padding: 0.5rem 0;
      margin-block-start: 0.5rem;

      background-color: oklch(from var(--color-secondary) calc(l + 0.7) c h);

      menu {
        padding: unset;
        margin: unset;

        list-style-type: none;
      }

      a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 1rem;

        border-bottom: unset;

        transition: background-color .1s linear;

        &:hover, &:focus-visible {
          background-color: oklch(from var(--color-secondary) calc(l + 0.65) c h);
        }
      }
    }
  }

  button[command="show-modal"] {
    display: none;

    @media (width < 72rem) {
      display: revert-layer;
    }
  }

  #mobile-menu {
    margin: unset;
    padding: 2rem;
    height: 100dvh;
    inset-inline-start: unset;
    inset-inline-end: 0;
    max-block-size: unset;
    max-inline-size: 25rem;
    inline-size: 100%;

    text-transform: uppercase;
    font-weight: 500;

    border: unset;
    
    background-color: oklch(from var(--color-secondary) calc(l + 0.1) c h);
    color: var(--color-white);

    translate: 20px 0;

    &[open] {
      translate: 0 0;
      
      @starting-style {
        translate: 20px 0;
      }
    }

    h2 {
      margin-block-end: 2rem;

      color: var(--color-white);

      font-size: var(--font-size-xl);
    }

    button {
      position: absolute;
      inset-block-start: 0;
      inset-inline-end: 0;
      block-size: unset;
      aspect-ratio: 1;
      padding: 0.75rem;
      
      clip-path: polygon(100% 0, 100% 100%, 10px 100%, 0% calc(100% - 10px), 0 0);
    }

    nav {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: start;
    }
    
    a:not(.button) {
      font-size: var(--font-size-lg);
    }
  }
}