/* =====================================================
   Navigation & Logo (Final Clean Version)
=====================================================*/

/* Slim fixed header */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px; /* slimmer height */
  background: rgba(24, 24, 24, 0.9);
  border-bottom: 1px solid #2c2c2c;
  z-index: 1000;
  display: flex;
  align-items: center;
  overflow: visible; /* let logo overhang */
  line-height: 60px;
}
/* D-Clips logo stays small */
nav img[alt="D-Clips Logo"] {
  height: 3rem; /* ~48px */
  width: auto;
  display: block;
}

/* Big Night In logo */
.logo-wrapper .logo-img {
  height: 10rem;    /* large */
  width: auto;
  display: block;
  position: relative;
   margin-left: -48px; /* move it LEFT (negative values) */
  bottom: -20px;    /* pushes the logo down so its bottom sits at nav bottom */
  z-index: 3;       /* above beams */
  pointer-events: none;
}

/* Desktop menu aligned right */
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  z-index: 2; /* above logo */
}

/* =====================================================
   Buttons
=====================================================*/

.btn-primary {
  background: linear-gradient(45deg, #6c5ce7, #a29bfe);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(108, 92, 231, 0.3);
}

/* =====================================================
   Cards
=====================================================*/

.equipment-card {
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.equipment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card img {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.service-card .p-6 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.service-card:hover {
  transform: translateY(-6px) scale(1.02);
}
.service-card:hover img {
  transform: scale(1.05);
}
.service-card:nth-child(1):hover {
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5),
              0 0 15px rgba(147, 51, 234, 0.6); /* purple */
}
.service-card:nth-child(2):hover {
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5),
              0 0 15px rgba(59, 130, 246, 0.6); /* blue */
}
.service-card:nth-child(3):hover {
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5),
              0 0 15px rgba(236, 72, 153, 0.6); /* pink */
}

/* =====================================================
   Testimonials
=====================================================*/

.testimonial-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =====================================================
   Hero Gradient
=====================================================*/

.hero-gradient {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.glow-text {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

nav,
nav .container,
nav .flex {
  overflow: visible !important;
}

/* Secondary hero custom look */
#intro {
  background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%);
}
#intro h2 {
  color: #fff;
}

/* ===== HEADER FIX (final) ===== */

/* Slim fixed header */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* slim, fixed height */
  background: rgba(24, 24, 24, 0.9);
  border-bottom: 1px solid #2c2c2c;
  z-index: 1000;
  display: flex;
  align-items: center;
  overflow: visible; /* let contents escape */
}

/* Ensure the inner container never clips */
nav .container {
  position: relative;
  overflow: visible;
}

/* Left logos group stays inline */
nav .flex.items-center.space-x-3 {
  overflow: visible;
}

/* D-Clips stays small */
nav img[alt="D-Clips Logo"] {
  height: 3rem;
  width: auto;
  display: block;
  z-index: 2;
}

/* Big Night In wrapper uses normal flow (no absolute) */
.logo-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end; /* align image baseline to header bottom */
  height: 100%;
  overflow: visible;
}

/* Big Night In logo: large and overflowing BELOW the header */
.logo-wrapper .logo-img {
  position: relative !important;  /* cancel any old absolute rules */
  height: 10rem;                  /* adjust size as you like */
  width: auto;
  display: block;
  margin-bottom: -24px;           /* pulls it below the 80px header */
  z-index: 2;
  pointer-events: none;           /* keeps links clickable around it */
}

/* Menu on the right */
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Optional: ensure the hero starts below the fixed header */
.hero-gradient {
  padding-top: 5rem; /* ~80px; keep or adjust if your logo overlaps too much */
}  


/* =====================================================
   Mobile Menu (Clean & Right-Aligned)
=====================================================*/

#mobile-menu {
  display: none;
  flex-direction: column;
  background-color: #111827; /* Tailwind gray-900 */
  border-left: 1px solid #374151; /* subtle divider */
  position: absolute;
  top: 0;       /* align with top of nav */
  right: 0;     /* push to right side */
  height: 100vh; /* full screen height */
  width: 70%;   /* take up right side of screen */
  z-index: 50;
  padding-top: 80px; /* push below header */
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

/* Show state */
#mobile-menu.show {
  display: flex;
  transform: translateX(0);
}

/* Menu links */
#mobile-menu a {
  padding: 1rem;
  text-align: left;
  font-size: 1.125rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#mobile-menu.show a {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered animation for links */
#mobile-menu.show a:nth-child(1) { transition-delay: 0.1s; }
#mobile-menu.show a:nth-child(2) { transition-delay: 0.2s; }
#mobile-menu.show a:nth-child(3) { transition-delay: 0.3s; }
#mobile-menu.show a:nth-child(4) { transition-delay: 0.4s; }
#mobile-menu.show a:nth-child(5) { transition-delay: 0.5s; }
#mobile-menu.show a:nth-child(6) { transition-delay: 0.6s; }

/* Hamburger to X animation */
#menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translateY(10px);
}
#menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
#menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translateY(-10px);
}
#menu-toggle span {
  transition: all 0.3s ease;
}

/* =====================================================
   Header & Logos
===================================================== */

/* Force header slim height */
nav {
  height: 80px;
  overflow: visible;
}

/* D-Clips logo (small, fixed size) */
nav img[alt="D-Clips Logo"] {
  height: 3rem; /* 48px */
  width: auto;
  flex-shrink: 0;
}



/* Stop logos squashing on resize */
.logo-wrapper img,
nav img[alt="D-Clips Logo"] {
  max-width: none;
}

/* =====================================================
   Mobile Menu Drawer
===================================================== */

#mobile-menu {
  display: none;
  flex-direction: column;
  background-color: #111827; /* gray-900 */
  position: fixed;
  top: 80px;  /* start just below header */
  right: 0;
  width: 75%; /* drawer width */
  height: calc(100vh - 80px);
  padding: 1.5rem;
  z-index: 50;

  /* Start hidden (slide out to right) */
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#mobile-menu.show {
  display: flex;
  transform: translateX(0);
  opacity: 1;
}

#mobile-menu a {
  padding: 0.75rem 0;
  font-size: 1.125rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* =====================================================
   Hamburger Button (menu-toggle)
===================================================== */

#menu-toggle {
  z-index: 60; /* stays clickable above logo */
  position: relative;
}

/* ===== Header: size & stacking ===== */
nav {
  position: fixed;
  top: 0; left: 0; width: 100%;
  height: 80px;                   /* slim header */
  background: rgba(24,24,24,0.9);
  border-bottom: 1px solid #2c2c2c;
  z-index: 1000;
  display: flex; align-items: center;
  overflow: visible;              /* let overhang show */
}
nav .container { position: relative; overflow: visible; }

/* Left logos row must not shrink */
nav .flex.items-center.space-x-3 { flex: 0 0 auto; overflow: visible; }

/* D-Clips (inside header, fixed size) */
nav img[alt="D-Clips Logo"] {
  height: 3rem; width: auto; display: block;
  flex-shrink: 0; z-index: 10;
}

/* Big Night In: center + anchored to header bottom with overhang */
.logo-wrapper {
  position: absolute;             /* take out of left flex group */
  left: 50%;
  bottom: 0;                      /* sit on the floor of the header */
  transform: translateX(-50%);
  height: 0;                      /* we size the image only */
  pointer-events: none;
  z-index: 30;                    /* above header bg, below hamburger */
}
.logo-wrapper .logo-img {
  height: 10rem; width: auto;
  display: block;
  transform: translateY(0%);     /* push it down to overhang */
  /* tweak 35% if you want more/less overhang */
}

/* Stop logos from squashing on resize */
nav img[alt="D-Clips Logo"], .logo-wrapper .logo-img { max-width: none; }

/* ===== Desktop nav links row ===== */
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 2rem; z-index: 20; }

/* ===== Mobile hamburger (animated) ===== */
.hamburger {
  width: 32px; height: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; z-index: 60; /* always clickable above logo */
}
.hamburger span {
  display: block; height: 2px; width: 100%;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ===== Mobile drawer (slides from right, below header) ===== */
#mobile-menu {
  display: flex; flex-direction: column;
  position: fixed; right: 0; top: 80px;               /* start under header */
  width: 75%; height: calc(100vh - 80px);
  background: #111827;                                 /* gray-900 */
  padding: 1.25rem 1.5rem;
  border-left: 1px solid #374151;                      /* gray-700 */
  z-index: 55;

  transform: translateX(100%); opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#mobile-menu.show {
  transform: translateX(0); opacity: 1;
}
#mobile-menu a {
  font-size: 1.125rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* ===== Hero starts below header (unchanged) ===== */
.hero-gradient { padding-top: 5rem; } /* ~80px */

@media (max-width: 768px) {
  .logo-wrapper {
    margin-left: -12px; /* tweak until hamburger no longer clashes */
  }

/* Make gallery images feel clickable */
.glightbox img {
  cursor: zoom-in;
}

/* =====================================================
   Gallery Hints (Mobile Pulse)
=====================================================*/
@keyframes pulse-hint {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.2); opacity: 0.8; }
}

.gallery-hint {
  animation: pulse-hint 1.5s infinite;
}

.gallery-more {
  display: inline-block;
  opacity: 1;              /* always visible */
  animation: pulse-hint 1.5s infinite; /* keep the pulsing effect */
}

/* Pulse animation for gallery badge */
.gallery-count {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.6); /* purple glow */
  }
  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 10px rgba(147, 51, 234, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0);
  }
}