/* Homepage merge: Vue layout (veriftool.fun) + 2022 Wayback generator accordion */

/* Let legacy .main-content grid (330px + 1fr) drive layout — do not override here */

.generator-menu.wayback-nav {
  text-align: left;
  align-items: stretch;
  justify-content: flex-start;
}

.generator-menu.wayback-nav .generator-menu__wrapper {
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
  text-align: left;
}

.generator-menu.wayback-nav .content_choice_wrapper {
  overflow-y: auto;
  height: 100%;
  max-height: 520px;
  margin-top: 0;
  margin-right: -8px;
  padding-right: 12px;
}

/* 2022 accordion items — scoped so main.css global resets are not required */
.generator-menu.wayback-nav .content_choice_li,
.generator-menu.wayback-nav .content_choice_li_info,
.generator-menu.wayback-nav .content_choice_2_li_info,
.generator-menu.wayback-nav .content_choice_3_li_info {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 8px 12px 8px 60px;
  line-height: 22px;
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.23s, border 0.23s;
  font-size: 15px;
  color: inherit;
  text-decoration: none;
}

.generator-menu.wayback-nav .content_choice_li:first-child,
.generator-menu.wayback-nav .content_choice_li_info:first-child {
  margin-top: 0;
}

.generator-menu.wayback-nav a.content_choice_li {
  text-decoration: none;
  color: inherit;
}

.generator-menu.wayback-nav .content_choice_li.active,
.generator-menu.wayback-nav .content_choice_li_info.active,
.generator-menu.wayback-nav .content_choice_2_li_info.active,
.generator-menu.wayback-nav .content_choice_3_li_info.active {
  background-color: #ff8200;
  border-color: #ff8200;
  color: #fff;
  font-weight: 500;
}

.generator-menu.wayback-nav .content_choice_li_left {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  width: 52px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 20px;
  border-right: 1px solid #c4c4c4;
  border-radius: 5px 0 0 5px;
  transition: background 0.23s, border 0.23s;
}

.generator-menu.wayback-nav .content_choice_li:hover,
.generator-menu.wayback-nav .content_choice_li_info:hover,
.generator-menu.wayback-nav .content_choice_2_li_info:hover,
.generator-menu.wayback-nav .content_choice_3_li_info:hover {
  border-color: #ff8200;
}

.generator-menu.wayback-nav .content_choice_li:hover .content_choice_li_left,
.generator-menu.wayback-nav .content_choice_li.active .content_choice_li_left,
.generator-menu.wayback-nav .content_choice_li_info:hover .content_choice_li_left,
.generator-menu.wayback-nav .content_choice_li_info.active .content_choice_li_left,
.generator-menu.wayback-nav .content_choice_2_li_info:hover .content_choice_li_left,
.generator-menu.wayback-nav .content_choice_2_li_info.active .content_choice_li_left,
.generator-menu.wayback-nav .content_choice_3_li_info:hover .content_choice_li_left,
.generator-menu.wayback-nav .content_choice_3_li_info.active .content_choice_li_left {
  background-color: #ff8200;
  border-color: #ff8200;
}

.generator-menu.wayback-nav .content_choice_li_left path {
  fill: #6c6c6c !important;
  transition: fill 0.23s;
}

.generator-menu.wayback-nav .content_choice_li:hover .content_choice_li_left path,
.generator-menu.wayback-nav .content_choice_li.active .content_choice_li_left path,
.generator-menu.wayback-nav .content_choice_li_info:hover .content_choice_li_left path,
.generator-menu.wayback-nav .content_choice_li_info.active .content_choice_li_left path,
.generator-menu.wayback-nav .content_choice_2_li_info:hover .content_choice_li_left path,
.generator-menu.wayback-nav .content_choice_2_li_info.active .content_choice_li_left path,
.generator-menu.wayback-nav .content_choice_3_li_info:hover .content_choice_li_left path,
.generator-menu.wayback-nav .content_choice_3_li_info.active .content_choice_li_left path {
  fill: #fff !important;
}

.generator-menu.wayback-nav .content_choice_li_info > svg,
.generator-menu.wayback-nav .content_choice_2_li_info > svg,
.generator-menu.wayback-nav .content_choice_3_li_info > svg {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  transform: rotate(100grad);
  transition: transform 0.4s;
}

.generator-menu.wayback-nav .content_choice_li_info.active > svg,
.generator-menu.wayback-nav .content_choice_2_li_info.active > svg,
.generator-menu.wayback-nav .content_choice_3_li_info.active > svg {
  transform: rotate(-100grad);
}

.generator-menu.wayback-nav .content_choice_li_wrap,
.generator-menu.wayback-nav .content_choice_2_li_wrap,
.generator-menu.wayback-nav .content_choice_3_li_wrap {
  display: none;
  padding-left: 52px;
}

.generator-menu.wayback-nav .content_choice_li_wrap a,
.generator-menu.wayback-nav .content_choice_2_li_wrap a,
.generator-menu.wayback-nav .content_choice_3_li_wrap a {
  margin-top: 12px !important;
}

/* Mobile: show orange "All Generators" toggle like 2022 site */
.content_blocks_button {
  display: none;
  width: 100%;
  margin-top: 12px;
}

.content_blocks_button .generators .button {
  width: 100%;
  text-align: center;
  cursor: pointer;
  margin: 0;
}

@media (max-width: 852px) {
  .generator-menu.wayback-nav .content_choice {
    visibility: hidden;
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    transition: visibility 0s 0.23s, opacity 0.23s, height 0.23s;
  }

  .generator-menu.wayback-nav .content_choice.active {
    visibility: visible;
    height: auto;
    opacity: 1;
    padding: 0;
    transition: visibility 0s, opacity 0.23s;
  }

  .generator-menu.wayback-nav .content_choice_wrapper {
    max-height: 420px;
  }

  .content_blocks_button {
    display: block;
  }

  .content_blocks_button.none {
    display: none;
  }
}