/* Tech Stack Styles */

/* Skills List Styling */
.skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.skills-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 12px;
  background: var(--card-bg);
  transition: all 0.3s ease;
  border: 1px solid rgba(var(--shadow-color-rgb), 0.08);
  position: relative;
  overflow: hidden;
}

.skills-list li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--highlight);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.skills-list li:hover {
  transform: translateX(8px);
  background: var(--accent-bg);
  border-color: rgba(var(--shadow-color-rgb), 0.12);
  box-shadow: 0 4px 15px rgba(var(--shadow-color-rgb), 0.1);
}

.skills-list li:hover::before {
  transform: scaleY(1);
}

.skills-list li i {
  font-size: 1.6rem;
  color: var(--highlight);
  transition: all 0.3s ease;
  background: var(--accent-bg);
  padding: 0.8rem;
  border-radius: 10px;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skills-list li:hover i {
  transform: scale(1.1) rotate(5deg);
  background: var(--highlight);
  color: #fff;
}

/* Specific colors for skills icons */
.skills-list li .fa-js-square { color: #F7DF1E; background: rgba(247, 223, 30, 0.2); } /* JavaScript */
.skills-list li .fa-php { color: #777BB4; background: rgba(119, 123, 180, 0.2); } /* PHP */
.skills-list li .fa-python { color: #3776AB; background: rgba(55, 118, 171, 0.2); } /* Python */
.skills-list li .fa-html5 { color: #E34F26; background: rgba(227, 79, 38, 0.2); } /* HTML5 */
.skills-list li .fa-css3-alt { color: #1572B6; background: rgba(21, 114, 182, 0.2); } /* CSS3 */
.skills-list li .fa-database { color: #4479A1; background: rgba(68, 121, 161, 0.2); } /* MySQL (using database icon) */
.skills-list li .fa-bootstrap { color: #7952B3; background: rgba(121, 82, 179, 0.2); } /* Bootstrap */
.skills-list li .fa-git-alt { color: #F05032; background: rgba(240, 80, 50, 0.2); } /* Git */
.skills-list li .fa-draw-polygon { color: #62C462; background: rgba(98, 196, 98, 0.2); } /* Graphic Design */

/* Hover states for specific skills icons */
.skills-list li:hover .fa-js-square { background: #F7DF1E; color: #333; } 
.skills-list li:hover .fa-php { background: #777BB4; color: #fff; }
.skills-list li:hover .fa-python { background: #3776AB; color: #fff; }
.skills-list li:hover .fa-html5 { background: #E34F26; color: #fff; }
.skills-list li:hover .fa-css3-alt { background: #1572B6; color: #fff; }
.skills-list li:hover .fa-database { background: #4479A1; color: #fff; }
.skills-list li:hover .fa-bootstrap { background: #7952B3; color: #fff; }
.skills-list li:hover .fa-git-alt { background: #F05032; color: #fff; }
.skills-list li:hover .fa-draw-polygon { background: #62C462; color: #fff; }

/* --- Redesigned Tech Card Styles --- */
.tech-card {
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(var(--shadow-color-rgb), 0.10);
  border: 1.5px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  min-height: 120px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.tech-card:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 16px 48px rgba(var(--highlight-rgb), 0.18);
  border-color: var(--highlight);
}
.tech-card i {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--accent-bg), var(--highlight), var(--accent-bg));
  border-radius: 50%;
  padding: 0.7rem;
  color: inherit;
  transition: background 0.3s, color 0.3s, transform 0.3s;
  box-shadow: 0 2px 10px rgba(var(--shadow-color-rgb), 0.08);
}
.tech-card:hover i {
  background: linear-gradient(135deg, var(--highlight), var(--accent-bg));
  color: #fff;
  transform: scale(1.12) rotate(-3deg);
}
.tech-card-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-color);
  margin-top: 0.2rem;
  letter-spacing: 0.5px;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
  .tech-card {
    min-height: 90px;
    padding: 0.7rem 0.2rem;
  }
  .tech-card i {
    font-size: 1.7rem;
    padding: 0.5rem;
  }
  .tech-card-label {
    font-size: 0.98rem;
  }
}

@media (max-width: 575.98px) {
  .tech-card {
    min-height: 70px;
    padding: 0.5rem 0.1rem;
  }
  .tech-card i {
    font-size: 1.2rem;
    padding: 0.3rem;
  }
  .tech-card-label {
    font-size: 0.92rem;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .tech-card {
  background: var(--dark-card-bg);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .tech-card:hover {
  box-shadow: 0 16px 48px rgba(var(--highlight-rgb), 0.22);
  border-color: var(--highlight);
}
[data-theme="dark"] .tech-card-label {
  color: var(--light-text);
}

/* Dark Theme Adjustments */
[data-theme="dark"] .skills-list li {
  background: var(--dark-card-bg);
  border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .skills-list li:hover {
  background: var(--dark-hover-bg);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .skills-list li i {
  background: var(--dark-accent-bg);
}

/* Dark theme specific colors for skills icons */
[data-theme="dark"] .skills-list li .fa-js-square { color: #F7DF1E; background: rgba(247, 223, 30, 0.2); } 
[data-theme="dark"] .skills-list li .fa-php { color: #777BB4; background: rgba(119, 123, 180, 0.2); }
[data-theme="dark"] .skills-list li .fa-python { color: #3776AB; background: rgba(55, 118, 171, 0.2); }
[data-theme="dark"] .skills-list li .fa-html5 { color: #E34F26; background: rgba(227, 79, 38, 0.2); }
[data-theme="dark"] .skills-list li .fa-css3-alt { color: #1572B6; background: rgba(21, 114, 182, 0.2); }
[data-theme="dark"] .skills-list li .fa-database { color: #4479A1; background: rgba(68, 121, 161, 0.2); }
[data-theme="dark"] .skills-list li .fa-bootstrap { color: #7952B3; background: rgba(121, 82, 179, 0.2); }
[data-theme="dark"] .skills-list li .fa-git-alt { color: #F05032; background: rgba(240, 80, 50, 0.2); }
[data-theme="dark"] .skills-list li .fa-draw-polygon { color: #62C462; background: rgba(98, 196, 98, 0.2); }

/* Dark theme hover states for specific skills icons */
[data-theme="dark"] .skills-list li:hover .fa-js-square { background: #F7DF1E; color: #333; } 
[data-theme="dark"] .skills-list li:hover .fa-php { background: #777BB4; color: #fff; }
[data-theme="dark"] .skills-list li:hover .fa-python { background: #3776AB; color: #fff; }
[data-theme="dark"] .skills-list li:hover .fa-html5 { background: #E34F26; color: #fff; }
[data-theme="dark"] .skills-list li:hover .fa-css3-alt { background: #1572B6; color: #fff; }
[data-theme="dark"] .skills-list li:hover .fa-database { background: #4479A1; color: #fff; }
[data-theme="dark"] .skills-list li:hover .fa-bootstrap { background: #7952B3; color: #fff; }
[data-theme="dark"] .skills-list li:hover .fa-git-alt { background: #F05032; color: #fff; }
[data-theme="dark"] .skills-list li:hover .fa-draw-polygon { background: #62C462; color: #fff; }

[data-theme="dark"] .project-tech span {
  /* background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1); */
}

/* Dark theme specific colors for project tech stack */
[data-theme="dark"] .project-tech span:has(.fa-html5) { color: #E34F26; background: rgba(227, 79, 38, 0.1); border-color: rgba(227, 79, 38, 0.2); }
[data-theme="dark"] .project-tech span:has(.fa-css3-alt) { color: #1572B6; background: rgba(21, 114, 182, 0.1); border-color: rgba(21, 114, 182, 0.2); }
[data-theme="dark"] .project-tech span:has(.fa-js) { color: #F7DF1E; background: rgba(247, 223, 30, 0.1); border-color: rgba(247, 223, 30, 0.2); }
[data-theme="dark"] .project-tech span:has(.fa-php) { color: #777BB4; background: rgba(119, 123, 180, 0.1); border-color: rgba(119, 123, 180, 0.2); }
[data-theme="dark"] .project-tech span:has(.fa-database) { color: #4479A1; background: rgba(68, 121, 161, 0.1); border-color: rgba(68, 121, 161, 0.2); }
[data-theme="dark"] .project-tech span:has(.fa-bootstrap) { color: #7952B3; background: rgba(121, 82, 179, 0.1); border-color: rgba(121, 82, 179, 0.2); }
[data-theme="dark"] .project-tech span:has(.fa-git-alt) { color: #F05032; background: rgba(240, 80, 50, 0.1); border-color: rgba(240, 80, 50, 0.2); }

/* Dark theme specific colors for project tech stack on hover */
[data-theme="dark"] .project-tech span:has(.fa-html5):hover { background: #E34F26; color: #fff; }
[data-theme="dark"] .project-tech span:has(.fa-css3-alt):hover { background: #1572B6; color: #fff; }
[data-theme="dark"] .project-tech span:has(.fa-js):hover { background: #F7DF1E; color: #333; }
[data-theme="dark"] .project-tech span:has(.fa-php):hover { background: #777BB4; color: #fff; }
[data-theme="dark"] .project-tech span:has(.fa-database):hover { background: #4479A1; color: #fff; }
[data-theme="dark"] .project-tech span:has(.fa-bootstrap):hover { background: #7952B3; color: #fff; }
[data-theme="dark"] .project-tech span:has(.fa-git-alt):hover { background: #F05032; color: #fff; }

/* Responsive Adjustments */
@media (max-width: 767.98px) {
  .skills-list li {
    padding: 1rem;
  }

  .skills-list li i {
    font-size: 1.4rem;
    padding: 0.6rem;
    width: 2.8rem;
    height: 2.8rem;
  }

  .project-tech span {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 575.98px) {
  .skills-list li {
    padding: 0.8rem;
  }

  .skills-list li i {
    font-size: 1.2rem;
    padding: 0.5rem;
    width: 2.4rem;
    height: 2.4rem;
  }

  .project-tech span {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }
}