header {

  /* Visibility Settings */
  @media (width > 700px) {
    .mobile-toggle, nav#mobile-nav {
      display: none;
    }
  }
  @media (width <= 700px) {
    .external-links, .back-home, nav.desktop-nav {
      display: none !important;
    }
  }
  /* Visibility Settings END */

  /* Basic Styling */
  height: var(--header-height);
  align-content: center;

  div.container {
    align-items: center;
    /* Basic Styling END */

    /* Logo Styling */
    div.logo-wrapper {
      margin-right: auto;

      a.logo {
        height: 80px;
        position: relative;
        z-index: 1;
        border-radius: 20px;
        display: flex;
        overflow: clip;
        @media(width < 900px) {aspect-ratio: 1.1}

        img {
          object-position: left;

          body:has(.theme-toggle:checked) & {
            filter: invert(1);
          }
        }
      }

      /* External links  */
      position: relative;
      --line-width: var(--border-width-s);
      --arrow-inline: 5px;
      --arrow-block: 7px;
      --min-arrow-length: 1rem;
      --padding-top: .5rem;
      --arrow-gap: .3em;

      li {
        display: flex;
      }

      a.swaphover {
        display: flex;
        align-items: center;
        text-wrap: nowrap;
        gap: var(--arrow-gap);
        flex-grow: 1;

        &::before {
          content: "";
          background: var(--primary);
          height: var(--arrow-block);
          width: var(--min-arrow-length);
          flex-grow: 1;
          clip-path: polygon(
            0 calc(50% - calc(var(--line-width) / 2)),
            calc(100% - var(--arrow-inline))
            calc(50% - calc(var(--line-width) / 2)),
            calc(100% - var(--arrow-inline)) 0,
            100% 50%,
            calc(100% - var(--arrow-inline)) 100%,
            calc(100% - var(--arrow-inline))
            calc(50% + calc(var(--line-width) / 2)),
            0 calc(50% + calc(var(--line-width) / 2))
          );
        }
      }

      nav.external-links {
        position: absolute;
        left: 15%;
        top: 48%;

        ul {
          display: grid;
          justify-items: end;

          li {
            width: 100%;
            border-left: var(--line-width) solid var(--primary);
            padding-block: .3em;

            &:last-child {
              border-image: linear-gradient(
                var(--primary) calc(50% + var(--line-width) / 2),
                transparent calc(50% + var(--line-width) / 2)) 1;
            }

            &:first-child {
              padding-top: var(--padding-top);
            }
          }
        }
      }
      .back-home {
        position: absolute;
        top: calc(50% - 1cap);
        left: 110%;
        z-index: 1;
        padding: 3rem;

        a::before {
          width: 30px;
        }
      }

      /* Hover/Focus Animation */
      .external-links, .back-home {
        opacity: 0;
        transition: all .3s allow-discrete;
      }

      .external-links {
        padding: 3rem 1rem 1rem;
        translate: 0 -30%;
        pointer-events: auto;
      }

      .back-home {
        translate: -5px 0;
      }

      @media (hover: hover) {
        &:hover :is(.external-links, .back-home) {
          opacity: 1;
          translate: 0 0;

          @starting-style {
            opacity: 0;
            translate: 0 -100%;
          }
        }
      }
      /* Hover/Focus Animation END */
      /* External links END */
    }
    /* Logo Styling END */

    /* Desktop Nav */
    @scope (.desktop-nav) to (.mega-menu__content) {

      ul {
        display: flex;

        a {
          padding: .1em var(--space-s);
          transition: color .3s;
          border-radius: 99px;
        }
      }
    }
    /* Desktop Nav END */

    /* Mega Menu */
    .megamenu {
      position: relative;

      > a::after {
        content: "";
        position: relative;
        display: inline-block;
        background: currentColor;
        top: -.1em;
        left: .1em;
        width: .5em;
        height: .3em;
        clip-path: polygon(50% 100%, 100% 0, 0 0);
        transition: all .3s;
      }

      &:is(:hover, :focus-within) > a::after {
        rotate: 180deg;
      }

      .mega-menu__content {
        pointer-events: auto; /* Necessary for Home  */
        display: none;
        position: absolute;
        top: 45px;
        right: calc(var(--space-3xl) * -1);
        width: 500px;
        aspect-ratio: 3 / 2;
        padding: unset;
        translate: 0 -10px;
        opacity: 0;
        transition: all .3s allow-discrete;

        /* Closing the Hover Gap */
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 25px;
          left: 0;
          bottom: 100%;
        }

        .content-wrapper {
          flex-grow: 1;
          padding: var(--space-m) var(--space-s);
          display: flex;
          flex-direction: column;
          gap: var(--space-s);

          h3 {
            opacity: 0.6;
          }

          ul {

            li {
              padding-block: 0.6em;

              &:hover a,
              a:focus-visible {
                anchor-name: --mm-active;
              }

              a {
                padding: .2em .5em;
                margin-left: -.5em;
                border-radius: 99px;
                outline-offset: unset;
              }
            }

            &:has(li:hover, a:focus-visible)::before {
              content: "←";
              position: absolute;
              left: 200px;
              top: anchor(--mm-active center);
              translate: 0 -50%;
              opacity: 1;
              transition: all 0.3s allow-discrete;
              pointer-events: none;
              font-family: "Borna";
              font-size: var(--step-2);

              @starting-style {
                opacity: 0;
                transform: translateX(10px);
              }
            }
          }

          p {
            display: none;
            line-height: var(--line-height-s);
          }
        }

        .img-wrapper {
          height: 100%;
          aspect-ratio: 2 / 3;
          border-radius: 0 calc(var(--radius-l) - 3px) calc(var(--radius-l) - 3px) 0;
          position: relative;
          overflow: clip;

          img {
            position: absolute;
            height: 100%;
            width: 100%;
            transition: all .5s allow-discrete;
            display: none;
            opacity: 0;
          }
        }

        &:not(:has(li:hover)) img:first-of-type {
          display: block;
          opacity: 1;

          @starting-style {opacity: 0}
        }
        &:has(li:nth-of-type(1):hover) {
          p:nth-of-type(1) {
            display: block;
          }
          img:nth-of-type(2) {
            display: block;
            opacity: 1;

            @starting-style {opacity: 0}
          }
        }
        &:has(li:nth-of-type(2):hover) {
          p:nth-of-type(2) {
            display: block;
          }
          img:nth-of-type(3) {
            display: block;
            opacity: 1;

            @starting-style {opacity: 0}
          }
        }
        &:has(li:nth-of-type(3):hover) {
          p:nth-of-type(3) {
            display: block;
          }
          img:nth-of-type(4) {
            display: block;
            opacity: 1;

            @starting-style {opacity: 0}
          }
        }
      }

      &:is(:hover, :focus-within) .mega-menu__content {
        display: flex;
        opacity: 1;
        translate: 0 0;

        @starting-style {
          opacity: 0;
          translate: 0 -10px;
        }
      }
    }
    /* Mega Menu END */

    /* Mobile Toggle */
    .mobile-toggle {
      position: relative;
      height: var(--toggle-size);
      aspect-ratio: 1;
      transition: background .3s;
      border: var(--border-s);
      border-radius: 50%;

      &::before, &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -4px;
        height: var(--border-width-s);
        width: 85%;
        background: var(--primary);
        transition: all .3s;
      }

      &::after {translate: -50% 4px}

      &:is(:hover, :focus-visible), header:has(#mobile-nav:popover-open) &  {
        background: var(--primary);

        &::before, &::after {
          background: var(--secondary);
        }
      }

      header:has(#mobile-nav:popover-open) & {
        &::before {
          translate: -50% 0;
          rotate: 45deg;
        }
        &::after {
          translate: -50% 0;
          rotate: -45deg;
        }
      }
    }
    /* Mobile Toggle END */
  }
  /* Mobile Nav */
  nav#mobile-nav {
    height: calc(97vh - var(--header-height));
    width: calc(var(--content-width) + 2 * var(--space-xs));
    margin-block: unset;
    padding: var(--space-xs);
    top: var(--header-height);
    font-size: var(--step-3);
    text-align: center;

    ul {
      height: 100%;
      display: grid;
      place-content: center;

      li {
        padding-block: 3vh;
        width: max-content;
        margin-inline: auto;

        a {
          padding: .1em var(--space-l);
          border-radius: 99px;
          transition: color .3s;
        }
      }
    }
  }
  /* Mobile Nav END */

  /* Morphing Nav */
  nav.desktop-nav > ul, nav#mobile-nav > ul {
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      background: var(--primary-gradient);
      border-radius: 99px;
      transition: all .3s;
      position-anchor: --nav-active;
      height: anchor-size(height);
      width: anchor-size(width);
      bottom: anchor(bottom);
      left: anchor(left);
    }
    &:not(:has(:hover, :focus-visible)) [aria-current], &:not(:has(:hover)) > li:focus-within > a, > li:hover > a {
      color: var(--secondary);
      anchor-name: --nav-active;

      &::after {
        border-top-color: var(--secondary);
      }
    }
  }
  /* Morphing Nav END */
}

*, *:after, *::before {
  outline: 1px solid red;
}