/* Minimal custom CSS - only for things Tailwind can't do */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* Accordion open/close */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(.4, 0, .2, 1);
}

.faq-body.open {
  grid-template-rows: 1fr;
}

.faq-body>div {
  overflow: hidden;
}

/* Rotating arrow */
.faq-arrow {
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}

.faq-item.open .faq-arrow {
  transform: rotate(45deg);
}

/* Active item accent */
.faq-item.open {
  border-color: rgba(255, 180, 46, 0.55) !important;
}

.faq-item.open .faq-dot {
  background: #ffb42e;
}

/* Sticky category pill */
.cat-pill.active {
  background: #01307a;
  color: #F6EDD9;
}

/* Number counter style */
.faq-num {
  font-variant-numeric: tabular-nums;
}

/* Grain overlay */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* Highlight marker on category titles */
.cat-heading::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 6px;
  background: rgba(255, 180, 46, 0.22);
  z-index: -1;
}