/* ===========================================
   Custom styles for effects not achievable with Tailwind
   =========================================== */

/* Navbar base state - fallback if Tailwind doesn't load */
#navbar {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Desktop menu - show on screens >= 768px */
@media (min-width: 768px) {
  #navbar .hidden.md\:flex {
    display: flex !important;
  }
  #navbar button.md\:hidden {
    display: none !important;
  }
}

/* Mobile menu button - show on screens < 768px */
@media (max-width: 767px) {
  #navbar .hidden.md\:flex {
    display: none !important;
  }
  #navbar button.md\:hidden {
    display: block !important;
  }
}

/* Navbar scrolled state (toggled via JS) */
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Gradient backgrounds */
.hero-gradient {
  background: linear-gradient(135deg, #fafafa, white, rgba(219, 234, 254, 0.3));
}

.services-gradient {
  background: linear-gradient(180deg, #fafafa, white);
}

.portfolio-gradient {
  background: linear-gradient(180deg, #fafafa, white);
}

.contact-info-gradient {
  background: linear-gradient(135deg, #fafafa, rgba(219, 234, 254, 0.3));
}

/* Accent gradient bar */
.gradient-accent {
  background: linear-gradient(90deg, #06b6d4, #f97316);
}

/* Service card accent (shows on hover) */
.service-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #06b6d4, #f97316);
  border-radius: 0.75rem 0.75rem 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover .service-accent {
  opacity: 1;
}

/* Timeline line and dots (desktop only) */
.timeline-line {
  display: none;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #06b6d4, #1e3a8a, #f97316);
  transform: translateX(-50%);
}

.timeline-dot {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1rem;
  height: 1rem;
  background: #1e3a8a;
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .timeline-line {
    display: block;
  }

  .timeline-dot {
    display: block;
  }

  .timeline-item::after {
    content: '';
    display: block;
    flex: 1;
  }
}

/* Hidden utility (for JS toggles) */
.hidden {
  display: none !important;
}