/* Doctrine Inc — global styles */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Font weight utilities to pair with Tailwind numeric classes */
.font-800 { font-weight: 800; }
.font-900 { font-weight: 900; }
.font-700 { font-weight: 700; }
.font-600 { font-weight: 600; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #0b5cff;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Smooth details marker */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* Prevent layout shift from scrollbar */
html { scrollbar-gutter: stable; }

/* Simple fade-in on load for hero */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: fadeUp .6s ease both; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ── Hero banner slider ─────────────────────────────────────────────── */
.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
/* Subtle Ken-Burns zoom + content rise for the active slide */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-active > img { animation: heroZoom 7s ease-out both; }
  @keyframes heroZoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }
  .hero-slide.is-active .max-w-xl { animation: heroRise .9s ease .1s both; }
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
.hero-dot { cursor: pointer; }

/* ── Modern header / navigation ─────────────────────────────────────── */
/* Compact the top strip + shadow when the page is scrolled */
#site-header.is-scrolled #nav-bar {
  box-shadow: 0 8px 30px -12px rgba(11, 18, 32, 0.18);
  background-color: rgba(255, 255, 255, 0.92);
}

/* Animated underline for desktop nav links */
.nav-link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0b5cff, #0047e0);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }

/* Animated hamburger → X icon */
.menu-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
.menu-icon span {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 6px; }
.menu-icon span:nth-child(3) { top: 12px; }
#mobile-menu-btn[aria-expanded='true'] .menu-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
#mobile-menu-btn[aria-expanded='true'] .menu-icon span:nth-child(2) { opacity: 0; }
#mobile-menu-btn[aria-expanded='true'] .menu-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Mobile menu open state (JS toggles .is-open on #mobile-menu) */
#mobile-menu.is-open #mobile-menu-backdrop { opacity: 1; }
#mobile-menu.is-open #mobile-menu-panel { transform: translateX(0); }

/* Staggered entrance for mobile nav items */
@media (prefers-reduced-motion: no-preference) {
  #mobile-menu.is-open .mobile-nav-item {
    animation: mnItem 0.4s ease both;
    animation-delay: calc(var(--i) * 0.05s + 0.12s);
  }
  @keyframes mnItem {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
  }
}

/* Lock body scroll while the mobile menu is open */
body.menu-open { overflow: hidden; }