/* Carregado DEPOIS do Argon no layout site — garante contraste Dracula
   e carets dos dropdowns (Argon usa glyph FA que não existe no site). */

body.site-layout {
  .site-navbar,
  .site-home,
  .site-tool-page {
    color: #f8f8f2;

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      color: #f8f8f2;
    }

    p, li, span, label, small {
      color: inherit;
    }

    a:not(.btn):not(.dropdown-item):not(.social-icon) {
      color: #8be9fd;
    }
  }

  .site-navbar {
    .nav-link {
      color: rgba(248, 248, 242, 0.9) !important;

      &:hover,
      &:focus {
        color: #fff !important;
      }
    }

    .navbar-brand span {
      color: #fff !important;
      -webkit-text-fill-color: #fff;
      background: none;
    }

    .navbar-brand:hover span {
      background: linear-gradient(135deg, #bd93f9, #ff79c6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Argon usa FontAwesome (\f107) no caret; no site o FA não carrega → □ */
    .dropdown .dropdown-toggle::after,
    .dropdown .dropdown-toggle:after,
    .nav-item.dropdown .dropdown-toggle::after,
    .nav-item.dropdown .dropdown-toggle:after {
      display: inline-block !important;
      margin-left: 0.45em;
      vertical-align: 0.15em;
      content: "" !important;
      font: inherit !important;
      font-family: inherit !important;
      font-weight: normal !important;
      border-top: 0.35em solid rgba(248, 248, 242, 0.9) !important;
      border-right: 0.3em solid transparent !important;
      border-bottom: 0 !important;
      border-left: 0.3em solid transparent !important;
      width: 0 !important;
      height: 0 !important;
      transform: none !important;
    }

    .dropdown .dropdown-toggle.show::after,
    .dropdown .dropdown-toggle.show:after {
      transform: rotate(180deg) !important;
    }

    /*
      Argon força display:block + animation hide-navbar-dropdown (from opacity:1).
      Em cada load/Turbo os menus Ferramentas/Servidores piscam ~0.25s.
      Volta ao comportamento Bootstrap: escondido até .show.
    */
    .dropdown .dropdown-menu,
    .dropdown:not(.dropdown-hover) .dropdown-menu {
      display: none !important;
      animation: none !important;
      margin-top: 0.65rem !important;
    }

    .dropdown .dropdown-menu.show,
    .dropdown:not(.dropdown-hover) .dropdown-menu.show {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      animation: none !important;
    }

    .site-nav-dropdown {
      /* Argon usa FA \f0d8 como “setinha” do menu; sem FA vira □ */
      &::before,
      &:before {
        font-family: inherit !important;
        content: "" !important;
        position: absolute !important;
        top: -8px !important;
        left: 1.35rem !important;
        right: auto !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 8px solid transparent !important;
        border-right: 8px solid transparent !important;
        border-bottom: 8px solid #383a59 !important;
        border-top: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        background: none !important;
      }

      .site-nav-dropdown-item {
        color: #f8f8f2 !important;

        &__title {
          color: #f8f8f2 !important;

          i {
            color: #bd93f9 !important;
          }
        }

        &__desc {
          color: #6272a4 !important;
        }

        &:hover {
          color: #fff !important;

          .site-nav-dropdown-item__title {
            color: #fff !important;
          }
        }
      }
    }
  }

  .site-hub-hero {
    &__title {
      color: #f8f8f2 !important;
    }

    &__subtitle {
      color: #c5c8d8 !important;
    }
  }

  .site-hub-btn {
    color: #fff !important;

    &--outline {
      position: relative;
      isolation: isolate;
      background: #282a36 !important;
      background-image: none !important;
      border: 2px solid transparent !important;
      color: #f8f8f2 !important;
      box-shadow: none !important;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(135deg, #bd93f9, #ff79c6);
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }

      &:hover {
        color: #fff !important;
        background: linear-gradient(135deg, rgba(189, 147, 249, 0.16), rgba(255, 121, 198, 0.12)) !important;
      }
    }

    &--outline-cyan {
      color: #f8f8f2 !important;
      box-shadow: none !important;
      border-radius: 0.65rem !important;

      &::before {
        background: linear-gradient(135deg, #8be9fd, #62d6e8) !important;
        border-radius: 0.65rem !important;
      }

      &:hover {
        color: #fff !important;
        background: linear-gradient(135deg, rgba(139, 233, 253, 0.16), rgba(98, 214, 232, 0.1)) !important;
      }
    }

    &--cyan {
      background: linear-gradient(135deg, #8be9fd, #62d6e8) !important;
      border: none !important;
      color: #282a36 !important;
      box-shadow: 0 6px 18px rgba(139, 233, 253, 0.35);

      &:hover {
        color: #1e1f29 !important;
        filter: brightness(1.05);
      }
    }
  }

  .section-title {
    h2 {
      color: #bd93f9 !important;
    }

    p {
      color: #c5c8d8 !important;
    }
  }

  .site-page-header {
    h1 {
      color: #bd93f9 !important;
    }

    p {
      color: #c5c8d8 !important;
    }
  }

  .site-hub-card {
    color: #f8f8f2 !important;

    &__title {
      color: #f8f8f2 !important;
    }

    &__desc {
      color: #c5c8d8 !important;
    }

    &__cta {
      color: inherit;

      &.site-hub-btn--outline-cyan {
        color: #f8f8f2 !important;
      }
    }

    &__icon {
      &--purple { color: #bd93f9 !important; }
      &--pink { color: #ff79c6 !important; }
      &--cyan { color: #8be9fd !important; }
      &--green { color: #50fa7b !important; }
      &--orange { color: #ffb86c !important; }
    }

    &:hover {
      color: #fff !important;

      .site-hub-card__title {
        color: #fff !important;
      }
    }
  }

  .site-hub-why-item {
    h4 {
      color: #f8f8f2 !important;
    }

    p {
      color: #c5c8d8 !important;
    }
  }

  .site-hub-community-teaser__card {
    h2 {
      color: #f8f8f2 !important;
    }

    p {
      color: #c5c8d8 !important;
    }
  }

  .site-community-card {
    h2 {
      color: #f8f8f2 !important;
    }

    p {
      color: #c5c8d8 !important;
    }
  }

  .site-community-mission {
    h2 {
      color: #f8f8f2 !important;
    }

    p {
      color: #c5c8d8 !important;
    }
  }

  .site-tool-stub {
    &__text {
      color: #c5c8d8 !important;
    }
  }

  .site-account-cta {
    &__title {
      color: #bd93f9 !important;
    }

    &__text {
      color: #c5c8d8 !important;
    }
  }

  .site-footer {
    h4 {
      color: #bd93f9 !important;
    }

    p, li, a {
      color: #c5c8d8 !important;
    }

    a:hover {
      color: #8be9fd !important;
    }

    .footer-bottom p {
      color: #6272a4 !important;
    }
  }

  .feature-card {
    h4 {
      color: #8be9fd !important;
    }

    p {
      color: #f8f8f2 !important;
    }
  }

  .how-to-section {
    .section-heading {
      color: #bd93f9 !important;
    }

    .lead-text,
    .step-content p {
      color: #f8f8f2 !important;
    }

    .step-content h4 {
      color: #8be9fd !important;
    }
  }

  .btn-cta {
    color: #fff !important;
  }

  .affiliate-section .affiliate-disclaimer {
    color: rgba(98, 114, 164, 0.45) !important;
    font-size: 0.72rem;
    font-style: italic;
  }

  .site-connect-detail__card {
    h2 {
      color: #f8f8f2 !important;
    }

    .intro-text,
    .instruction-step p,
    .final-steps-list {
      color: #f8f8f2 !important;
    }
  }
}