/* ===================================
   Accents de couleur primaire
   Utilise les variables globales
   =================================== */

/* Navigation - Barre d'accent sur l'item actif uniquement */
.nav-link-container {
  position: relative;
}

.nav-link-container::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--spacing-lg));
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--color-primary-dim);
  border-radius: 0 2px 2px 0;
  transition: height var(--transition-normal);
}

.nav-link-container.w--current::before {
  height: 60%;
}

.nav-link-container.w--current {
  background: linear-gradient(90deg, var(--color-primary-subtle) 0%, transparent 100%);
}

/* Chips - Déjà gérées par les variables dans styles.css */

/* Bouton Contact - Gradient primaire */
.button.w-button {
  background: var(--gradient-primary);
}

/* Project Cards - Bordure gauche au hover */
.single-item {
  border-left: 2px solid transparent;
  transition: border-color var(--transition-slow);
  padding-left: 10px;
}

/* Exception : si .single-item a aussi .card, ne pas appliquer le padding-left */
.single-item.card {
  padding-left: 1.75rem;
}

.single-item:hover {
  border-left-color: var(--border-accent);
}

/* Back button - Couleur au hover */
.back-nav-button {
  transition: color var(--transition-normal);
}

.back-nav-button:hover {
  color: var(--color-primary);
}

/* Links dans le contenu */
a:not(.nav-link-container):not(.projects-container):not(.button):not(.back-nav-button):not(.single-item) {
  color: var(--color-primary);
}

/* Scrollbar - Couleur subtile */
.main::-webkit-scrollbar {
  width: 6px;
}

.main::-webkit-scrollbar-track {
  background: var(--bg-sidebar);
}

.main::-webkit-scrollbar-thumb {
  background: var(--color-primary-light);
  border-radius: 3px;
}

.main::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dim);
}

/* Mini labels - Légère touche bleue */
.mini-label-white {
  color: var(--color-primary-dim);
}

/* Project detail page - Links */
.project-link {
  transition: border-color var(--transition-normal);
}

.project-link:hover {
  border-color: var(--color-primary-light);
}

/* View more text on project cards */
.view-more {
  color: var(--color-primary-dim);
  transition: color var(--transition-normal);
}

.project-card:hover .view-more {
  color: var(--color-primary);
}

/* Responsive */
@media screen and (max-width: 991px) {
  /* Menu mobile avec fond sombre */
  .w-nav-menu.is-visible {
    background: var(--bg-sidebar) !important;
  }

  /* L'item actif reste visible avec son style */
  .w-nav-menu.is-open .nav-link-container.w--current {
    background: var(--color-primary-very-light);
    color: var(--color-text-primary);
  }

  .nav-link-container::before {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .nav-link-container::before {
    left: calc(-1 * var(--spacing-sm));
  }
}