@import 'tailwindcss';

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@theme {
  --font-primary: 'Open Sans', sans-serif;

  --color-primary: #ff8e1b;
  --color-blue-10: #2a166f;
  --color-pup: #503374de;
}

button {
  cursor: pointer;
}

.poppins {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: normal;
}

main {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.about-cards-height {
  height: fit-content;
  @media screen and (min-width: 768px) {
    height: 400px;
  }
  &:hover {
    background: #faf5ff;
  }
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

  /* gradient background */
  background: linear-gradient(to bottom right, #faf5ff, #e9d5ff);

  text-align: center;
  padding: 1.5rem; /* same as p-6 */
}

.sidebar-button svg {
  width: 36px; /* Match w-9 (9rem * 4 = 36px) */
  height: 36px; /* Match h-9 */
  cursor: pointer;
  transition: stroke 0.5s ease-in-out; /* Smooth color transition */
}

.sidebar-button svg.lucide-x {
  stroke: #530074; /* Default color for X icon */
}

.sidebar-button svg.lucide-x:hover {
  stroke: #530075;
}

#site-nav {
  transition: background-color 0.3s ease-in-out; /* Smooth background transition */
}

#site-nav.nav--white {
  background-color: white !important; /* Force white background */
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: 100vh;
  overflow-y: auto;
  background: white;
  transform: translateY(-100%); /* Hidden above viewport */
  opacity: 0; /* Fully transparent when hidden */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth slide and fade */
}

.sidebar.sidebar--open {
  transform: translateY(0); /* Slide in to visible position */
  opacity: 1; /* Fully visible */
}

.sidebar .lucide-x {
  cursor: pointer;
}