/* Custom Tailwind extensions and component overrides */
:root {
  --brand-primary: #1c3f5c;
  --brand-secondary: #2f5d7c;
  --brand-accent: #4f83a6;
  --brand-light: #f2f6fa;
}

.bg-brand-gradient {
  background: linear-gradient(135deg, rgba(28, 63, 92, 0.95), rgba(47, 93, 124, 0.85));
}

.bg-subtle-gradient {
  background: linear-gradient(135deg, rgba(76, 110, 133, 0.15), rgba(224, 234, 244, 0.6));
}

.shadow-soft {
  box-shadow: 0 15px 45px rgba(15, 34, 54, 0.08);
}

.timeline::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(76, 110, 133, 0.5), rgba(47, 93, 124, 0.3));
}

.timeline-step::before {
  content: attr(data-step);
  position: absolute;
  left: -3.5rem;
  top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--brand-secondary);
  color: #fff;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .timeline::before {
    left: 0.75rem;
  }

  .timeline-step::before {
    left: -1rem;
    width: 2rem;
    height: 2rem;
    top: -0.75rem;
  }
}

.accordion-item[open] summary .indicator {
  transform: rotate(180deg);
}

.nav-active {
  color: #1c3f5c !important;
  font-weight: 600;
}

.cookie-banner.hidden {
  display: none;
}

.cookie-banner {
  width: min(100% - 2rem, 24rem);
  right: 1rem;
  left: 1rem;
}

@media (min-width: 640px) {
  .cookie-banner {
    left: auto;
    right: 1.5rem;
    width: 24rem;
  }
}