/* ========== ROOT VARIABLES (for Dark Mode) ========== */
:root {
  --bg: #0f111a;
  --text: #eee;
  --accent: #00ffff;
  --box: #1c1e26;
  --shadow-color-light: rgba(0, 255, 255, 0.1);
  --shadow-color-medium: rgba(0, 255, 255, 0.3);
}

/* Base Body Styles */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth; /* Ensure smooth scrolling for anchor links */
  /* Background and text colors are now dynamically controlled by JS and --bg/--text variables */
  background-color: var(--bg); /* Default to dark background */
  color: var(--text); /* Default to light text */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for theme change */
  overflow-x: hidden; /* Prevent horizontal scroll due to animations */
}



/* Common Section Styling (Tailwind utility classes handle most, but this adds max-width and center alignment) */
.section {
    max-width: 1200px; /* Aligns with max-w-7xl used in HTML for consistency */
    margin: auto;
    /* Padding is now handled by py-16 and px-5 directly in index.html for each section */
}

/* Custom styles for the nav-link active state, since Tailwind doesn't have a direct ':active' class for this kind of dynamic highlighting based on scrollSpy */
.nav-link::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--accent); /* Use CSS variable for consistency */
  transition: width 0.3s ease-in-out;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}


/* Hamburger Menu Specifics for small screens */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 60px; /* Adjust based on your navbar height */
    right: 0;
    background: var(--bg); /* Use CSS variable */
    flex-direction: column;
    align-items: flex-start;
    width: 200px;
    padding: 10px 20px;
    border-left: 1px solid #2c2c2c; /* Ensure border contrasts with light mode */
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.5);
    /* `display: none` is handled by Tailwind's `hidden` class, `display: flex` by JS toggling `hidden` */
  }
  .nav-links li {
    margin: 30px 0; /* Slightly increased for better spacing on mobile */
  }
}

/* Devicon color override (to ensure they are not "blunt" if 'colored' class is removed) */
/* This makes sure the 'text-text-light' class applies correctly. */
/* If you want the original colored icons, you'd need to put 'colored' back in HTML
   and adjust this rule or remove it so devicon's own styles win. */
[class^="devicon-"], [class*=" devicon-"] {
  /* In this setup, Tailwind's text color classes are intended to apply */
  /* If you want original Devicon colors *with* the colored class, you'd use:
     &.colored {
         color: initial !important;
     }
  */
}


/* Certificate card background image fit */
.cert-card > div:first-child { /* Target the inner div with background image */
    background-size: contain; /* Ensures the entire image is seen */
    background-repeat: no-repeat; /* Prevent repetition if image is smaller */
    background-color: var(--box); /* Fallback for empty space if aspect ratio mismatch */
    background-position: center; /* Center the contained image */
}

/* ========== Skill Proficiency Bars ========== */
.proficiency-bar {
  width: 0; /* Initial state, animated to data-proficiency % by JS */
  transition: width 1.5s ease-out; /* Smooth transition for filling the bar */
}

/* ========== Interactive Contact Bubble ========== */
#contactBubble {
  /* Tailwind classes handle primary positioning and initial styling */
  /* fixed bottom-8 right-8 z-[1000] bg-accent-cyan text-black w-14 h-14 rounded-full flex items-center justify-center shadow-lg cursor-pointer transform hover:scale-110 transition-transform duration-300 */
}

#contactIcon {
  transition: transform 0.3s ease; /* Smooth spin transition */
}

#contactBubble.expanded #contactIcon {
  transform: rotate(360deg); /* Spin icon when expanded */
}

#contactEmail {
  /* Tailwind classes handle initial position, padding, background, text color, border-radius, shadow */
  /* absolute right-16 px-4 py-2 bg-box-dark text-text-light rounded-lg shadow-xl */
  opacity: 0; /* Initially hidden */
  transform: scale(0); /* Initially scaled down */
  transform-origin: right;
  transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
  white-space: nowrap; /* Prevent email from wrapping */
  pointer-events: none; /* Make it unclickable when hidden */
}

#contactBubble.expanded #contactEmail {
  opacity: 1; /* Fully visible when expanded */
  transform: scale(1); /* Full size when expanded */
  pointer-events: auto; /* Make it clickable when visible */
}


/* ========== Project Filter Buttons ========== */
/* Tailwind handles default button styles. This handles the active state visually. */
.filter-btn.active {
    background-color: var(--accent) !important; /* Force active state color */
    color: black !important; /* Text color for active button */
    box-shadow: 0 0 10px var(--accent) !important; /* Add glow */
}
/* Ensure default filter buttons (non-active) use box-dark and text-light initially */
.filter-btn {
    background-color: var(--box);
    color: var(--text);
    transition: all 0.3s ease;
}
/* Hover styles for filter buttons (re-stated for clarity) */
.filter-btn:hover {
    background-color: var(--accent); /* Hover to accent color */
    color: black;
}
/* Light mode specific adjustments for filter buttons to ensure contrast */
body.light .filter-btn.active {
    background-color: var(--accent) !important;
    color: white !important; /* Adjust for light mode if accent is light */
}
body.light .filter-btn:hover {
    background-color: var(--accent);
    color: white;
}


/* ========== My Journey / Interactive Timeline ========== */
.timeline {
  position: relative;
  margin: 0 auto;
  padding: 0;
}

/* The vertical line */
.timeline::before {
  content: '';
  position: absolute;
  width: 4px; /* Thickness of the line */
  background-color: var(--accent); /* Timeline line color */
  top: 0;
  bottom: 0;
  left: 50%; /* Center the line */
  margin-left: -2px; /* Adjust to perfectly center */
  border-radius: 2px;
}

/* Container for all timeline items */
.timeline-item {
  padding: 10px 0;
  position: relative;
  width: 50%;
  box-sizing: border-box;
}

/* Left side timeline items */
.left-timeline {
  left: 0;
  padding-right: 45px; /* Space for the line and dot */
}

/* Right side timeline items */
.right-timeline {
  left: 50%;
  padding-left: 45px; /* Space for the line and dot */
}

/* Dots on the timeline line */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 20px; /* Size of the dot */
  height: 20px;
  background-color: var(--accent); /* Dot color */
  border: 4px solid var(--bg); /* Border to make it pop against the line */
  top: 25px; /* Vertical position */
  border-radius: 50%;
  z-index: 1; /* Ensure dot is above the line */
}

/* Positioning for dots on left items */
.left-timeline::after {
  right: -10px; /* Position dot on the right side of the left item, on the central line */
}

/* Positioning for dots on right items */
.right-timeline::after {
  left: -10px; /* Position dot on the left side of the right item, on the central line */
}

/* Content boxes for timeline items */
.timeline-content {
  position: relative;
  border-left: 4px solid var(--accent); /* Left border for content card */
  padding-left: 15px; /* Space for the border */
}

/* Media queries for responsiveness */
@media screen and (max-width: 768px) {
  .timeline::before {
    left: 20px; /* Move line to the left for mobile */
    margin-left: 0;
  }

  .timeline-item {
    width: 100%; /* Full width for items */
    padding-left: 45px; /* Padding for content on mobile */
    padding-right: 15px; /* Reduce right padding */
    left: 0; /* Align all items to the left */
  }

  .left-timeline::after,
  .right-timeline::after {
    left: 10px; /* Position dots consistently on the left */
  }

  .timeline-content {
    /* No change needed here, general padding works */
  }
}