/* Default components */

/* Defaults */
/* header {
  position: fixed;
  top: 0;
  left: 0;
  
  width: 100%;
  padding: 1rem 2rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  z-index: 1000;
  background-color: var(--main-white);
  nav,
  ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  li a {
    font-size: clamp(1.6rem, 2vw, 2rem);
    color: var(--main-text-color);
    padding: 0 1em;
  }
} */
/* 
#breadcrumbs {
  display: flex;
  gap: 1rem;
  span,
  a {
    padding: 0.5rem 1rem;

    border: 1px solid var(--main-black);
    color: var(--main-black);
    line-height: 100%;
  }
}

#search-overlay {
  position: fixed;
  width: fit-content;
  height: fit-content;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .content {
    position: relative;
    z-index: 10;
    background-color: var(--main-white);
    width: var(--breakpoint-sm);
    max-width: 92vw;
    height: var(--breakpoint-md);
    max-height: 92vh;
    overflow-y: scroll;

    border: 1px solid var(--main-black);
    border-radius: 2rem;
  }
}

.search-overlay__content {
  width: fit-content;
}
.search-overlay__top {
  background-color: var(--light-grey);
  text-align: center;
  padding: 0.4em 1em;
}
.search-overlay__main {
  input {
    width: 100%;
    height: 5rem;
    padding: 1rem;
  }
}

.close__button {
  position: absolute;
  top: 2vw;
  right: 2vw;
  width: 4rem;
  height: 4rem;
  &::after,
  &::before {
    content: "";
    display: block;
    height: 4px;
    width: 100%;

    position: absolute;

    background-color: var(--main-black);
    border-radius: 2px;
    transform-origin: center;
  }
  &::after {
    transform: rotate(45deg);
  }
  &::before {
    transform: rotate(-45deg);
  }
} */

/* Layout */
.posts__list,
.post-list-item,
.metabox {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post-list-item {
  width: 100%;

  padding: 1rem;
  border-bottom: 1px solid lightgrey;
  a {
    font-weight: bold;
    color: var(--main-text-color);
  }
}

#layout-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 192rem;
  margin: auto;
  .col {
    flex: 1;
    &.col__center {
      flex-basis: clamp(10rem, 60vw, 120rem);
      max-width: 120rem;
    }
  }
}

.wrapper {
  width: 100%;
}

/* Elements */
.btn__icon {
  vertical-align: middle;
  svg {
    width: 1em;
    height: 1em;
  }
}

.btn__rm {
  &::before {
    content: "▶︎";
    position: relative;
    z-index: 10;
    margin-right: 0.2em;
  }
}

.btn__anim-opac {
  opacity: 1;
  &:hover {
    opacity: 0.6;
  }
}

.btn__anim-bar {
  position: relative;
  width: fit-content;
  padding: 0 0.6em;
  .anim-inner {
    position: relative;
    z-index: 10;
  }
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 0%;

    background-color: var(--primary-color);
    transition: width 0.15s ease-in-out;
  }
  &:hover {
    &::after {
      width: 100%;
    }
  }
}

/* Sections */
.title-banner {
  position: relative;
  aspect-ratio: 2 / 3;

  width: 100%;

  /* color: var(--main-bg-color); */
  picture,
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

/* Wordpress */
nav {
  li {
    &.current_page_item a {
      color: red;
    }
  }
}

/* Data handling */

[data-status="inactive"] .active-content {
  display: none;
}
[data-status="active"] .inactive-content {
  display: none;
}
/* Small */
/* Medium */
@media screen and (max-width: 768px) {
  #layout-wrapper {
    &.inverse {
      flex-direction: column-reverse;
    }
  }
}
@media screen and (min-width: 768px) {
  .title-banner {
    aspect-ratio: unset;
    height: clamp(24rem, 40vw, 40rem);
  }
  .container {
    width: var(--width-pc);
    max-width: var(--breakpoint-md);
    &.container__full__pc {
      width: 100%;
      max-width: 100%;
    }
    &.container__lg {
      max-width: var(--breakpoint-lg);
    }
    &.container__xl {
      max-width: var(--breakpoint-xl);
    }
  }
  .grid__23 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid__24 {
    grid-template-columns: repeat(4, 1fr);
  }
  #layout-wrapper {
    flex-direction: row;
  }
}

/* Structure */
.container {
  width: var(--width-mobile);
  max-width: var(--breakpoint-sm);
  &__full {
    width: 100%;
    max-width: 100%;
  }
}

.card {
  width: 100%;
}

.card__post {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--light-grey);
  padding: 1em;
  border-radius: 0.5rem;
  .img-container {
    width: 100%;
    aspect-ratio: 5 / 3;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.grid-container {
  width: 100%;

  display: grid;
}
.grid__23,
.grid__24 {
  grid-template-columns: repeat(2, 1fr);
}

.dropdown {
  position: relative;
}
.dropdown__toggle {
  position: relative;
  z-index: 10;
}
.dropdown__content {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;

  background-color: var(--main-white);
  transform: translateY(100%);
}

#user-notes li .btn__save,
#user-notes li .btn__cancel {
  display: none;
}

/* #user-notes li.active .btn__edit {
  display: none;
} */
#user-notes li.active .btn__save,
#user-notes li.active .btn__cancel {
  display: unset;
}
/* Large */
/* XL */
/* XXL */