/* Speedycat-style grid navbar for APEGUY */

@font-face {
  font-family: "HK Grotesk Wide";
  font-display: swap;
  src: url(../fonts/HKGroteskWide-Black.woff2) format("woff2");
  font-weight: 900;
  font-style: normal;
}

:root {
  --nav-accent: #faba18;
  --nav-hover: #fff;
}

.header {
  height: 3.5rem;
  padding: 0;
  border-bottom: 0.25rem solid #000;
  background-color: var(--nav-accent);
  display: flex;
  justify-content: space-between;
}

.header__container,
.header__right {
  display: contents;
}

.header__logo {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  height: 100%;
  width: clamp(6.25rem, calc(6.25rem + 3.75 * (100vw - 20rem) / 41.99875), 10rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--nav-accent);
  color: inherit;
  font-size: inherit;
  text-transform: none;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.header__logo img {
  height: 82%;
  width: auto;
  max-width: 90%;
  object-fit: contain;
}

.header__menu {
  flex: 1 1 auto;
  height: 100%;
}

.menu__body {
  height: 100%;
}

.menu__list {
  height: 100%;
  flex-wrap: nowrap;
  justify-content: stretch;
  row-gap: 0;
  column-gap: 0;
}

.menu__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-left: 0.25rem solid #000;
  flex: 1 1 0%;
}

.menu__link {
  height: 100%;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.25rem;
  white-space: nowrap;
  color: #000;
  background-color: var(--nav-accent);
  font-family: "HK Grotesk Wide", sans-serif;
  font-size: clamp(1rem, calc(1rem + 0.25 * (100vw - 61.99875rem) / 39.87625), 1.25rem);
  font-weight: 900;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: letter-spacing 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.menu__link._navigator-active {
  color: #000;
  letter-spacing: 0.125rem;
  background-color: var(--nav-hover);
}

.header__actions {
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  column-gap: 0;
}

.header__social {
  height: 100%;
  column-gap: 0;
}

.header__social-item {
  height: 100%;
  width: clamp(2.875rem, calc(2.875rem + 0.875 * (100vw - 20rem) / 41.99875), 3.75rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 0.25rem solid #000;
  background-color: var(--nav-accent);
  transition: background-color 0.3s ease;
}

.header__social-item svg {
  display: none;
}

.header__social-item img {
  width: 30%;
  min-width: 1.5rem;
  height: auto;
  transition: scale 0.2s ease;
}

.header__buy {
  display: none !important;
}

.header__button {
  height: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  background-color: #000;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 0.25rem solid #000;
  font-family: "HK Grotesk Wide", sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  transition: letter-spacing 0.3s ease, background-color 0.2s ease;
}

.header__button:not(.white) {
  width: clamp(8.75rem, calc(8.75rem + 6.875 * (100vw - 61.99875rem) / 39.87625), 15.625rem);
}

@media (min-width: 61.99875em) {
  .header__logo {
    width: clamp(7rem, calc(6.5rem + 7.5 * (100vw - 61.99875rem) / 39.87625), 14.5rem) !important;
  }

  .header__social-item {
    width: clamp(3.875rem, calc(3.875rem + 2.625 * (100vw - 61.99875rem) / 39.87625), 6.5rem);
  }
}

@media (max-width: 61.99875em) {
  .header__logo {
    order: 1;
  }

  .header__menu {
    flex: 0 0 3.75rem;
    order: 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header__actions {
    order: 2;
    flex: 1 1 auto;
  }

  .header__social {
    column-gap: 1rem;
    justify-content: flex-end;
  }

  .header__social-item {
    aspect-ratio: 1;
    width: auto;
    border-left: none;
  }

  .header__social-item img {
    width: 80%;
  }

  .header__button:not(.white) {
    display: none;
  }

  .menu__body {
    position: fixed;
    width: auto;
    height: auto;
    right: -100%;
    top: 3.25rem;
    left: auto;
    overflow: auto;
    padding: 2.5rem 0.9375rem 5rem 5rem;
    transition: right 0.3s;
    background-color: var(--nav-accent);
    border-bottom: 0.25rem solid #000;
    border-left: 0.25rem solid #000;
    border-bottom-left-radius: 100%;
    will-change: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .menu__body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.25rem;
    background-color: #000;
  }

  .menu-open .menu__body {
    right: 0;
    top: 3.25rem;
  }

  .menu__list {
    flex-direction: column;
    row-gap: 1.875rem;
    align-items: flex-end;
    margin-bottom: 2.25rem;
    height: auto;
  }

  .menu__item {
    border-left: none;
    height: auto;
    flex: 0 0 auto;
  }

  .menu__link {
    height: auto;
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
  }

  .menu__link._navigator-active {
    color: #fff;
    background-color: transparent;
    letter-spacing: 0.125rem;
  }

  .icon-menu {
    display: block;
    position: relative;
    width: 1.875rem;
    height: 1.125rem;
    z-index: 5;
  }

  .icon-menu span,
  .icon-menu::after,
  .icon-menu::before {
    background-color: #000;
  }

  .menu__body .header__social {
    height: auto;
    margin-bottom: 1.5rem;
  }

  .menu__body .header__social-item {
    border-left: none;
    width: 3.75rem;
    aspect-ratio: 1;
  }

  .menu__body .header__button:not(.white) {
    display: inline-flex;
    width: 100%;
  }
}

@media (min-width: 61.99875em) {
  .icon-menu {
    display: none;
  }
}

@media (any-hover: hover) {
  .header__logo:hover {
    background-color: var(--nav-hover);
  }

  .menu__link:hover {
    letter-spacing: 0.125rem;
    background-color: var(--nav-hover);
    color: #000;
  }

  .header__social-item:hover {
    background-color: var(--nav-hover);
  }

  .header__social-item:hover img {
    scale: 1.1;
  }

  .header__button:not(.white):hover {
    letter-spacing: 0.125rem;
  }
}

@media (max-width: 47.99875em) {
  .tokenomics {
    overflow: hidden;
  }

  .tokenomics__left {
    display: block;
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 6%;
    width: 108%;
    height: 78%;
    min-height: 0;
    flex: none;
    pointer-events: none;
  }

  .tokenomics__left::before,
  .tokenomics__left::after,
  .tokenomics__left-wall {
    display: none;
  }

  .tokenomics__right {
    position: relative;
    z-index: 4;
  }

  .tokenomics__left-ape {
    width: 100%;
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%);
    -webkit-animation: tok-ape-mobile 5.5s ease-in-out infinite;
    animation: tok-ape-mobile 5.5s ease-in-out infinite;
  }

  .tokenomics__left-ape img {
    width: 100%;
    -o-object-position: left bottom;
    object-position: left bottom;
  }
}

@-webkit-keyframes tok-ape-mobile {
  0%,
  14% {
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%);
  }
  30%,
  52% {
    -webkit-transform: translateX(-8%);
    transform: translateX(-8%);
  }
  70%,
  100% {
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%);
  }
}

@keyframes tok-ape-mobile {
  0%,
  14% {
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%);
  }
  30%,
  52% {
    -webkit-transform: translateX(-8%);
    transform: translateX(-8%);
  }
  70%,
  100% {
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%);
  }
}

/* Footer bar — marquee banner style */
.footer {
  border-top: none;
  margin-top: 0;
}

.footer__bottom {
  background-color: #faba18;
  border-top: 0.25rem solid #000;
  border-bottom: 0.25rem solid #000;
  padding: 1rem 0;
}

.footer__bottom-body span {
  font-family: "HK Grotesk Wide", sans-serif;
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #000;
}