/* Hover Effects for QuanchoaTV Theme - Simplified without scale effects */

/* === BUTTON HOVER EFFECTS === */

/* Header Contact Button - Gradient Green */
.bg-gradient-to-r.from-brand-green.to-brand-green-dark {
    transition: opacity 0.2s ease;
}

.bg-gradient-to-r.from-brand-green.to-brand-green-dark:hover {
    opacity: 0.9;
}

.bg-gradient-to-r.from-brand-green.to-brand-green-dark:active {
    opacity: 0.8;
}

/* Hero CTA Buttons */
.bg-brand-orange,
.bg-brand-blue,
.bg-brand-purple,
.bg-brand-cyan {
    transition: opacity 0.2s ease;
}

/* Orange button hover */
.bg-brand-orange:hover {
    opacity: 0.9;
}

.bg-brand-orange:active {
    opacity: 0.8;
}

/* Blue button hover */
.bg-brand-blue:hover {
    opacity: 0.9;
}

.bg-brand-blue:active {
    opacity: 0.8;
}

/* Purple button hover */
.bg-brand-purple:hover {
    opacity: 0.9;
}

.bg-brand-purple:active {
    opacity: 0.8;
}

/* Cyan button hover */
.bg-brand-cyan:hover {
    opacity: 0.9;
}

.bg-brand-cyan:active {
    opacity: 0.8;
}

/* === CARD AND SPORT CATEGORY HOVER EFFECTS === */

/* Card containers */
.bg-neutral-900 {
    transition: opacity 0.2s ease;
}

/* Featured cards hover */
[data-name="card-nhà cái"]:hover {
    opacity: 0.9;
}

/* Sport category cards hover */
[data-name="card-blogpost"]:hover {
    opacity: 0.9;
}

[data-name="card-blogpost"] img {
    transition: opacity 0.2s ease;
}

/* === NAVIGATION HOVER EFFECTS === */

/* Navigation items */
[data-name="label"]:hover p {
    color: #83ff65 !important;
    transition: color 0.3s ease;
}

[data-name="label"] p {
    transition: color 0.3s ease;
    cursor: pointer;
}

/* Social icons hover */
.bg-neutral-700:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.bg-neutral-700 {
    transition: opacity 0.2s ease;
    cursor: pointer;
}

/* === COMMENTATOR IMAGES HOVER === */

/* Commentator image containers */
[data-name="image + name blv"]:hover {
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

[data-name="image + name blv"] {
    transition: opacity 0.2s ease;
    cursor: pointer;
}

[data-name="image + name blv"] img {
    transition: opacity 0.2s ease;
}

/* === SIDEBAR CONTENT HOVER === */

/* Sidebar items hover */
.bg-neutral-900 .font-roboto.font-bold:hover {
    color: #83ff65 !important;
    cursor: pointer;
    transition: color 0.3s ease;
}

.bg-neutral-900 .font-roboto.font-bold {
    transition: color 0.3s ease;
}

/* === ACCESSIBILITY AND RESPONSIVE IMPROVEMENTS === */

/* Focus states for accessibility */
button:focus,
[role="button"]:focus,
a:focus {
    outline: 2px solid #83ff65;
    outline-offset: 2px;
}

/* Ensure hover effects work on touch devices */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover transforms on touch devices to prevent sticky hover states */
    *:hover {
        transform: none !important;
    }

    /* Keep color changes but reduce visual effects on touch */
    .bg-brand-orange:active,
    .bg-brand-blue:active,
    .bg-brand-purple:active,
    .bg-brand-cyan:active {
        opacity: 0.8;
    }

    [data-name="card-nhà cái"]:active {
        opacity: 0.9;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === LOADING STATES === */

/* Add subtle pulse for loading states */
.loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* === MOBILE SPECIFIC HOVER ADJUSTMENTS === */

@media (max-width: 768px) {
    /* Simple opacity changes for mobile - no transforms */
    [data-name="card-nhà cái"]:hover {
        opacity: 0.9;
    }

    [data-name="card-blogpost"]:hover {
        opacity: 0.9;
    }

    [data-name="image + name blv"]:hover {
        opacity: 0.9;
    }

    .bg-brand-orange:hover,
    .bg-brand-blue:hover,
    .bg-brand-purple:hover,
    .bg-brand-cyan:hover {
        opacity: 0.9;
    }
}

/* === LINK STYLING FIXES === */

/* Remove default link styling */
a.no-underline {
    text-decoration: none !important;
}

a.no-underline:hover,
a.no-underline:focus,
a.no-underline:active,
a.no-underline:visited {
    text-decoration: none !important;
}

/* Ensure button-like links maintain their appearance */
a[data-name="button/1"] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

a[data-name="button/1"]:hover,
a[data-name="button/1"]:focus,
a[data-name="button/1"]:active,
a[data-name="button/1"]:visited {
    text-decoration: none;
}

/* Ensure text inside button links doesn't change color on visit */
a[data-name="button/1"] p {
    color: inherit !important;
}

/* Navigation link styling */
[data-name="label"] a {
    display: block;
    text-decoration: none;
}

[data-name="label"] a:hover,
[data-name="label"] a:focus,
[data-name="label"] a:active,
[data-name="label"] a:visited {
    text-decoration: none;
}

/* === PERFORMANCE OPTIMIZATIONS === */

/* Simple opacity transitions for smooth interactions */
.bg-gradient-to-r.from-brand-green.to-brand-green-dark,
.bg-brand-orange,
.bg-brand-blue,
.bg-brand-purple,
.bg-brand-cyan,
[data-name="card-nhà cái"],
[data-name="card-blogpost"],
[data-name="image + name blv"] {
    will-change: opacity;
}

/* === ADDITIONAL BUTTON HOVER REFINEMENTS === */

/* Ensure consistent button heights and alignment */
a[data-name="button/1"] {
    min-height: 44px; /* Accessibility minimum touch target */
    align-items: center;
    justify-content: center;
}

/* Improve button focus states for keyboard navigation */
a[data-name="button/1"]:focus {
    outline: 2px solid #83ff65;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(131, 255, 101, 0.2);
}

/* Social icon improvements */
.bg-neutral-700:focus {
    outline: 2px solid #83ff65;
    outline-offset: 2px;
}

/* Card hover state improvements */
[data-name="card-nhà cái"] {
    cursor: pointer;
}

[data-name="card-blogpost"] {
    cursor: pointer;
}