/* header/footer/nav */

.debug {
  position: fixed;
  background-color: rgb(209, 158, 158);
  left: 50%;
  top: 50%;
}

.nav-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  backdrop-filter: blur(2px);
  z-index: 10;
}

/* disable transition when snapping back */
.no-anim {
  transition: none !important;
}

/* fixed mode: hidden above viewport */
.nav-fixed {
  position: fixed;
  transform: translateY(calc(-1 * var(--nav-hide-offset)));
  transition: transform 2000ms ease;
}

/* visible */
.nav-wrap.nav-fixed.nav-show {
  /* transform: translateX(-50%) translateY(0); */
  transform: translateY(0);
  padding-bottom: 0;
}

.nav-breadcrumbs {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background-color: rgba(var(--secondary-color-rgb), 0.75);
}

.nav-breadcrumbs::after {
  content: "";
  position: absolute;
  top: 0;
  right: -30px;
  width: 30px;
  height: 100%;
  background: rgba(var(--secondary-color-rgb), 0.75);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}

.nav-breadcrumbs-list a,
.nav-breadcrumbs-list span {
  text-decoration: none;
  color: white;
  text-shadow: 2px 2px 1px var(--primary-accent);
  margin: 14px 20px;
  /* display: block; */
  position: relative;
  display: inline-block;
  transition:
    text-shadow 1000ms,
    background-color 1000ms;
}

.nav-breadcrumbs-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  /* background: var(--secondary-color);
  box-shadow: 2 2 6px var(--secondary-color); */
  background: white;
  box-shadow: 2px 2px 2px var(--primary-color);

  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1000ms ease;
}

.nav-breadcrumbs-list a:hover {
  text-shadow: 2px 2px 2px var(--primary-color);
}

.nav-breadcrumbs-list a:hover::after {
  transform: scaleX(1);
}

.nav-breadcrumbs-list span {
  color: lightgray;
}

.nav-gap {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  background: transparent;
  overflow: hidden;
}

.nav-gap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--secondary-color-rgb), 0.75);
  clip-path: polygon(100% 0, 0 100%, -100% 0);
}

.navbar {
  position: relative;
  flex: 0 0 auto;
  background-color: rgba(var(--primary-color-rgb), 0.75);
  display: flex;
  justify-content: flex-end;
  width: fit-content;
}

.navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 100%;
  background: rgba(var(--primary-color-rgb), 0.75);
  clip-path: polygon(100% 0, 200% 100%, 0 100%);
}

.nav-list,
.nav-breadcrumbs-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 449px) {
  .nav-list,
  .nav-breadcrumbs-list {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: end;
  }
}

/* WP class for current nav page */
.current-menu-item {
  font-weight: bold;
}

.nav-list a,
.nav-list span {
  text-decoration: none;
  color: white;
  text-shadow: 2px 2px 1px var(--secondary-color);
  margin: 14px 20px;
  /* display: block; */
  position: relative;
  display: inline-block;
  transition:
    text-shadow 1000ms,
    background-color 1000ms;
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  /* background: var(--secondary-color);
  box-shadow: 2 2 6px var(--secondary-color); */
  background: white;
  box-shadow: 2px 2px 2px var(--secondary-accent);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms ease;
}

footer .nav-list a::after {
  transform-origin: center;
}

.nav-list a:hover {
  text-shadow: 2px 2px 2px var(--secondary-accent);
  /* background-color: var(--primary-accent); */
  /* background-color: rgb(var(--primary-accent-rgb)); */
}

.nav-list a:hover::after {
  transform: scaleX(1);
}

.nav-list a {
  display: inline-block;
  transition: transform 1000ms;
}

.nav-list a:hover {
  transform: translateY(-2px);
}

.header {
  backdrop-filter: blur(40px);
}