/**
 * Custom CSS for Mori Katsuki Official Theme
 * Using Tailwind utility classes where possible
 */

/* Smooth transitions */
.section-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all .7s ease;
}

.section-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero section animations */
.hero-text {
    transition: all 1s ease;
}

.hero-buttons {
    transition: all .7s ease .4s;
}

/* News items */
.news-item {
    transition: all .7s ease;
}

.news-item:hover .flex.items-center.text-red-600 {
    transform: translateX(8px);
}

/* Profile section */
.profile-image,
.profile-content {
    transition: all .7s ease .2s;
}

/* Schedule items */
.schedule-item {
    transition: all .7s ease;
}

/* Movie items */
.movie-item {
    transition: all .7s ease;
}

/* Content highlight items */
.content-item {
    transition: all .7s ease;
}

/* Sponsor items */
.sponsor-item {
    transition: all .7s ease;
}

/* Membership benefits */
.membership-benefit {
    transition: all .4s ease;
}

/* Tailwind utilities not covered */
@media (min-width: 1024px) {
    .lg\:flex {
        display: flex !important;
    }

    .lg\:hidden {
        display: none !important;
    }
}

/* Backdrop blur fallback */
@supports not (backdrop-filter: blur(12px)) {
    .backdrop-blur-sm {
        background-color: rgba(0, 0, 0, .8);
    }
}

/* Custom drop shadow for text */
.drop-shadow-\[0_0_30px_rgba\(239\,68\,68\,0\.5\)\] {
    filter: drop-shadow(0 0 30px rgba(239, 68, 68, .5));
}

/* Ensure proper z-index stacking */
#site-header {
    z-index: 50;
}

.sns-sidebar {
    z-index: 40;
}

/* Smooth scroll behavior */
/* Remove blue highlight on mobile tap */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* WordPress specific classes */
.wp-post-image {
    height: auto;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin-right: 1.5em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
}

.s-title {
    padding-left: 30px;

    @media screen and (max-width: 768px) {
        padding-left: 0;
    }
}

.offical-title {
    line-height: 1.2;
}

@media screen and (max-width: 600px) {
    .hero-block {
        bottom: -4%;
    }

    .hero-text h1 {
        font-size: 2rem;
    } 

    .hero-text p {
        font-size: .8rem;
        margin-bottom: 1.8rem;
    } 
}

@media screen and (max-width: 453px) {
    .hero-buttons a {
        width: 80%;
        margin: 0 auto;
    }

    .hero-buttons a:first-child {
        margin-bottom: 20px;
    }
}