/*
Theme Name: Jenileigh Portfolio
Author: Jen McKeon
Description: Custom portfolio theme.
Version: 1.0
*/
html {
  scroll-behavior: smooth;
}
#form-message {
  transition: opacity 1s ease;
}

.work-post {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.work-post.fade-out {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.work-post.fade-in {
  opacity: 1;
  transform: scale(1);
}

.filter-btn.active {
  background-color: #db2777; /* Tailwind's pink-600 */
  color: #ffffff !important;
}

/* Matches Tailwind: max-w-2xl mx-auto w-full mt-16 mb-16 */
#blog-post-content .section {
  max-width: 48rem;       /* Tailwind: max-w-2xl */
  width: 100%;            /* Tailwind: w-full */
  margin: 4rem auto;      /* Tailwind: my-16 */
}

#blog-post-content .section ul {
  list-style-type:disc;
  margin: 0 0 1.5rem 1rem; 
}
#blog-post-content .section ol {
  list-style-type:decimal;
  margin: 0 0 1.5rem 1rem; 
}

/* Matches Tailwind: leading-[1.5] font-bold */
#blog-post-content .section h2,
#blog-post-content .section h3,
#blog-post-content .section h4 {
  line-height: 1.5;        /* Tailwind: leading-[1.5] */
  font-weight: 700;        /* Tailwind: font-bold */
}

/* Matches Tailwind: text-[1.875rem] (30px), mb-8 */
#blog-post-content .section h2 {
  font-size: 1.875rem;     /* Tailwind: text-3xl */
  margin-bottom: 0.75rem;     /* Tailwind: mb-3 */
}

/* Matches Tailwind: text-2xl (24px), mb-8 */
#blog-post-content .section h3 {
  font-size: 1.5rem;       /* Tailwind: text-2xl */
  margin-bottom: 0.75rem;     /* Tailwind: mb-3 */
}

/* Matches Tailwind: text-lg (18px) */
#blog-post-content .section h4 {
  font-size: 1.125rem;     /* Tailwind: text-lg */
}

/* Matches Tailwind: text-[1.875rem] (30px), mb-8 */
#blog-post-content .section p {
  margin-bottom: 1.5rem;     /* Tailwind: mb-6 */
}

/* Matches Tailwind: rounded-lg */
#blog-post-content img {
  border-radius: 0.5rem;   /* Tailwind: rounded-lg */
}

/* Matches Tailwind: text-sm, text-gray-700, leading-[1.5], my-2, max-w-2xl, text-center */
#blog-post-content .caption {
  font-size: 0.875rem;     /* Tailwind: text-sm */
  line-height: 1.5;        /* Tailwind: leading-[1.5] */
  margin: 0.5rem auto 4rem auto;     /* Tailwind: my-2 */
  text-align: center;      /* Tailwind: text-center */
  max-width: 28rem;        /* Tailwind: max-w-md */
  color: #374151;          /* Tailwind: text-gray-700 */
}

/* Laptop */
#blog-post-content div.laptop-mockup {
  position: relative;
  width: 100%;
  max-width: 1083px;
  margin: 0 auto;
}

#blog-post-content div.laptop-mockup .laptop-img {
  width: 100%;
  display: block;
  height: auto;
}

#blog-post-content div.laptop-mockup div.scroll-screen {
  position: absolute;
  top: 4.25%;
  left: 12.2%;
  max-width: 811px;
  width: 75.6%;
  max-height: 511px;
  height: 80%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

#blog-post-content div.scroll-screen div.scroll-inner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
}

#blog-post-content div.device-iphone {
    position: relative;
    margin: 0 auto;
    max-width: 591px;
    width: 100%;
}

#blog-post-content div.device-iphone video, #blog-post-content div.device-iphone .prototype {
    top: 12.45%;
    left: 18.09%;
    position: absolute;
    overflow: hidden;
    width: 63.45%;
    object-fit: cover;
    border-radius: 24px;
}

#blog-post-content div.iframe-container {
  position: relative;
  width: 100%;
  max-width: 390px; /* optional */
  aspect-ratio: 9 / 18.5; /* Modern, clean solution */
  margin: 0 auto;
  background-color: #F3F4F6;
}

#blog-post-content div.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 24px;
}


@media screen and (max-width: 64em) {
  #blog-post-content div.device-iphone video, #blog-post-content div.device-iphone .prototype {
      top: 13.58%;
  }
}

#blog-post-content div.device-iphone img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

/*#blog-post-content .marquee-screen .scroll-track {
  animation: scroll-up 40s linear infinite;
  animation-delay: 5s;
}

#blog-post-content .marquee-screen .scroll-track img {
  display: block;
  width: 100%;
  height: auto;
} */

/* Animation keyframes */
/*@keyframes scroll-up {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-71.5%);
  }
} */