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

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

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

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

      a.logo {
        height: 80px;
        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: calc(var(--border-width-s) * 3);
      --arrow-block: calc(var(--border-width-s) * 4);
      --min-arrow-length: var(--space-s);
      --padding-top: var(--space-xs);
      --arrow-gap: var(--space-3xs);
      --anim-distance: var(--space-s);

      .external-links, .back-home {
        position: absolute;
        opacity: 0;
        transition: all .3s allow-discrete;
        display: none;

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

          &::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 {
        left: 10%;
        top: 100%;
        padding: var(--space-s);
        transform: translateY(calc(var(--anim-distance) * -1));

        li {
          border-left: var(--line-width) solid var(--primary);
          display: flex;

          &:first-child {
            padding-top: var(--padding-top);
          }

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

      div.back-home {
        top: 0;
        left: 100%;
        height: 100%;
        padding-inline: var(--space-s);
        transform: translateX(calc(var(--anim-distance) * -1));
        align-content: center;

        a::before {
          width: calc(var(--min-arrow-length) * 2);
        }
      }

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

          @starting-style {
            opacity: 0;

            &.external-links {
              transform: translateY(calc(var(--anim-distance) * -1));
            }
            &.back-home {
              transform: translateX(calc(var(--anim-distance) * -1));
            }
          }
        }
      }
      /* 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;
      --anim-distance: var(--space-s);

      /* Triangle  */
      > 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;
      }
      /* Triangle END */

      .mega-menu__content {
        display: none;
        position: absolute;
        top: 45px;
        right: calc(var(--space-3xl) * -1);
        width: 500px;
        aspect-ratio: 3 / 2;
        padding: unset;
        translate: 0 calc(var(--anim-distance) * -1);
        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 calc(var(--anim-distance) * -1);
        }
      }
    }
    /* 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 */
}