/* ================================================
   LogPro Relocation — Global Stylesheet
   Custom styles that complement Tailwind CDN.
   ================================================ */

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Navbar scroll shadow ── */
#navbar .nav-card { transition: box-shadow 0.3s; }
#navbar.scrolled .nav-card { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); }

/* ── Mobile menu slide-in overlay ── */
#mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
#mobile-menu.open { transform: translateX(0); }

/* ── Section label ── */
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #0a0a0a;
}
.section-label .bracket { color: #ee471b; }

/* ── Accent line ── */
.accent-line {
  width: 50px;
  height: 2px;
  background: #ee471b;
  flex-shrink: 0;
}

/* ── Service tabs (index.html) ── */
.tab-btn {
  color: #0a0a0a;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.tab-btn.active {
  background: #042970;
  color: #fff;
  border-radius: 8px;
}

/* ── FAQ accordion (index.html) ── */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer.open { max-height: 200px; }
.chevron-icon { transition: transform 0.3s ease; }
.faq-item.open .chevron-icon { transform: rotate(180deg); }

/* ── Fade-up page & scroll animations ── */
.anim-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays set dynamically via JS on sibling animated elements */