/* ============================================
   FLOATING NAV V2
   ============================================ */

/* ——— Custom Properties ——— */
#app .floating-nav-v2 {
  --btn-1-bg: var(--primary-color, #8b35b6);
  --btn-1-color: var(--primary-color-contrast, #FFF);
  --btn-2-bg: #fff;
  --btn-2-color: #333;
  --btn-3-bg: var(--secondary-color, #333);
  --btn-3-color: var(--secondary-color-contrast, #fff);
  --btn-4-bg: var(--primary-color, #8b35b6);
  --btn-4-color: var(--primary-color-contrast, #FFF);
  --btn-5-bg: #FFF;
  --btn-5-color: #333;
  --btn-6-bg: var(--secondary-color, #333);
  --btn-6-color: var(--secondary-color-contrast, #fff);
  --btn-7-bg: var(--primary-color, #8b35b6);
  --btn-7-color: var(--primary-color-contrast, #FFF);
  --btn-8-bg: #fff;
  --btn-8-color: #333;
  --mobile-bg: var(--secondary-color, #333);
  --mobile-color: var(--secondary-color-contrast, #fff);

  --btn-min-height: 48px;
  --btn-max-width: 230px;
  --btn-radius: 50px 0 0 50px;
  --icon-size: 20px;
  --icon-area: 48px;
  --gap: 8px;
  --speed: 0.3s;

  --btn-link-gap: 4px;
  --collapsed-visible: calc(var(--btn-link-gap) + var(--icon-area));
  --collapse-offset: calc(var(--btn-max-width) - var(--collapsed-visible) + var(--btn-link-gap));
}

#app:has(#badgeLiner) #floatingNav-v2 {
  --header-height-badge: calc(var(--header-height) + 30px);
  margin-top: var(--header-height-badge, 139px);
  max-height: calc(100dvh - var(--header-height-badge, 268px) - 15px);

  @media (min-width: 960px) {
    --header-height-badge: calc(var(--header-height) + 100px);
  }
}

#view-theme #floatingNav-v2:not(:has(.icon > span:first-child:empty, .btn-label:empty)) {
  & > .hide-on-cms {
    display: none !important;

    &.update {
      display: block !important;
    }
  }
}

#home .main .view-container:has(.floating-nav-v2) {
  z-index: 9;

  & .homepage-component {
    z-index: 9;
  }
}

/* ============================================
   MAIN COMPONENT
   ============================================ */
#app .floating-nav-v2 {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  max-height: calc(100dvh - var(--header-height, 268px) - 15px);
  display: flex;
  flex-direction: column;
  padding: 0;

  /* Reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  &.nav-absolute {
    position: absolute;
  }

  & > .hide-on-cms {
    display: none !important;
  }

  /* ——— Nav Wrapper (scrollable) ——— */
  & .nav-wrapper {
    display: flex !important;
    flex-direction: column;
    width: var(--btn-max-width);
    max-width: 100%;
    max-height: inherit;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* ——— Button Group ——— */
  & .btn-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-block: 4px;

    /* Individual buttons */
    & > div {
      pointer-events: auto;
      width: 100%;
      min-height: var(--btn-min-height);
      display: flex;
      justify-content: flex-end;
      flex-shrink: 0;
      transition:
        transform var(--speed) ease-in-out,
        opacity var(--speed) ease-in-out;

      /* Per-button theming — cycles every 8 buttons */
      &:nth-child(8n+1) { --bg: var(--btn-1-bg); --color: var(--btn-1-color); }
      &:nth-child(8n+2) { --bg: var(--btn-2-bg); --color: var(--btn-2-color); }
      &:nth-child(8n+3) { --bg: var(--btn-3-bg); --color: var(--btn-3-color); }
      &:nth-child(8n+4) { --bg: var(--btn-4-bg); --color: var(--btn-4-color); }
      &:nth-child(8n+5) { --bg: var(--btn-5-bg); --color: var(--btn-5-color); }
      &:nth-child(8n+6) { --bg: var(--btn-6-bg); --color: var(--btn-6-color); }
      &:nth-child(8n+7) { --bg: var(--btn-7-bg); --color: var(--btn-7-color); }
      &:nth-child(8n)   { --bg: var(--btn-8-bg); --color: var(--btn-8-color); }
    }
  }

  /* ——— Link ——— */
  & .btn-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    width: calc(100% - var(--btn-link-gap));
    min-height: inherit;
    border-radius: var(--btn-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    outline: none;
    background-color: var(--bg);
    padding-right: 1em;

    &:focus-visible {
      box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.2),
        0 0 0 3px rgba(139, 53, 182, 0.5);
    }
  }

  /* ——— Icon ——— */
  & .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--icon-area);
    min-height: var(--icon-area);
    padding: 4px;

    & svg {
      width: var(--icon-size);
      height: var(--icon-size);
      display: block;

      & path {
        fill: var(--color);
      }
    }
  }

  /* ——— Label ——— */
  & .btn-label {
    color: var(--color);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.2;
    padding-block: 4px;

    & a {
      color: inherit;
      text-decoration: none;
    }
  }

  /* ——— Mobile Toggle ——— */
  & .mobile-toggle {
    --bg: var(--mobile-bg);
    --color: var(--mobile-color);

    display: none;
    pointer-events: auto;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;

    & .btn-link .toggle-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: var(--icon-area);
      min-height: var(--icon-area);
      padding: 4px;
      transition: transform var(--speed) ease;

      &::after {
        width: 17px;
        height: 16px;
        display: block;
        content: '';
        background-color: var(--color);
        mask-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 19 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 9C18.5523 9 19 8.55228 19 8C19 7.44772 18.5523 7 18 7L18 9ZM0.292892 7.29289C-0.0976315 7.68342-0.0976315 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM18 7L1 7L1 9L18 9L18 7Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
      }
    }
  }
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* ——— Desktop Large (≥1280px) ——— */
@media (min-width: 1280px) {
  #app .floating-nav-v2 {
    margin-top: var(--header-height, 139px);

    & .btn-group > div {
      transform: translateX(0);
    }

    /* Scrolled state — collapsed with icon peek */
    &.is-scrolled .btn-group > div {
      transform: translateX(var(--collapse-offset));

      &:hover,
      &:focus-within {
        transform: translateX(0);
      }
    }

    /* Non-scrolled — dim siblings on group hover */
    &:not(.is-scrolled) .btn-group:hover > div {
      opacity: 0.7;
      transform: translateX(80px);

      &:hover {
        opacity: 1;
        transform: translateX(0);
      }
    }

    &:not(.is-scrolled) .btn-group > div:focus-within {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

@media (min-width: 1600px) {
  #app .floating-nav-v2 {
    margin-top: var(--header-height, 268px);
  }
}

@media (min-width: 1920px) {
  #app .floating-nav-v2 {
    margin-top: var(--header-height, 277px);
  }
}

/* ——— Tablet (600px – 1279px) ——— */
@media (min-width: 600px) and (max-width: 1279px) {
  #app .floating-nav-v2 .btn-group > div {
    transform: translateX(var(--collapse-offset));

    &:hover,
    &:focus-within {
      transform: translateX(0);
    }
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  #app .floating-nav-v2 {
    margin-top: var(--header-height, 240px);
  }
}

@media (min-width: 960px) and (max-width: 1279px) {
  #app .floating-nav-v2 {
    margin-top: var(--header-height, 218px);
  }
}

/* ——— Mobile (<600px) ——— */
@media (max-width: 599px) {
  #app .floating-nav-v2 {
    margin-top: var(--header-height, 240px);
    max-height: calc(100dvh - 24px - var(--header-height, 240px));

    & .mobile-toggle {
      display: flex;
      justify-content: flex-end;
      min-height: var(--btn-min-height);
      max-width: var(--btn-max-width);
      width: 100%;
      transform: translateX(calc(100% - var(--collapsed-visible)));
      z-index: 2;
      margin-bottom: var(--gap);

      &.expanded {
        transform: translateX(0);

        & .toggle-icon {
          transform: rotate(180deg);
        }
      }
    }

    & .btn-group {
      transition: transform var(--speed) ease-in-out;
      transform: translateX(100%);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
      padding-bottom: env(safe-area-inset-bottom, 16px);

      &::-webkit-scrollbar {
        display: none;
      }

      &.expanded {
        transform: translateX(0);
      }

      & > div {
        transform: none;
      }
    }
  }
}