/* Custom styles for animations and specific overrides */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    /* Start hidden */
}

/* Glassmorphism utilities */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Scroll handling for header */
header.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1);
    height: 5rem;
}

/* Change text colors when scrolled */
header.scrolled nav a {
    color: #334155;
    /* slate-700 */
}

header.scrolled nav a:hover {
    color: #BF1E2E;
    /* secondary */
}

/* Update separator lines */
header.scrolled .bg-white\/30 {
    background-color: #cbd5e1;
    /* slate-300 */
}

/* Update logo text and simple text elements */
header.scrolled .text-white,
header.scrolled .text-white\/90,
header.scrolled .text-white\/80 {
    color: #0F172A;
    /* primary/slate-900 */
}

header.scrolled .text-white\/70 {
    color: #64748b;
    /* slate-500 */
}

/* Keep button text white */
header.scrolled a.bg-secondary {
    color: #ffffff !important;
}

/* Mobile Icon */
header.scrolled .ph-list {
    color: #0F172A;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Google Translate Customization - Hiding the Top Bar */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body {
    top: 0px !important;
}

/* Hide the Google Translate iframe that pushes content down */
iframe.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

/* Hide the specific element container */
#google_translate_element {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* Hide tooltips */
.goog-tooltip {
    display: none !important;
}

.goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure no padding is added to body */
body.goog-te-banner-show {
    top: 0px !important;
    margin-top: 0px !important;
}

/* Aggressive Google Top Bar Hiding */
.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

iframe.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

/* Hide the wrapper that Google sometimes adds */
.skiptranslate {
    display: none !important;
}

/* Exception: Don't hide the language dropdown if it has skiptranslate (it usually doesn't, but safer to be specific) */
.goog-te-combo {
    display: block !important;
}

/* Re-hide our custom hidden element just in case */
#google_translate_element {
    display: none !important;
}

/* Fix for disappearing text during translation */
/* Google Translate can interfere with IntersectionObserver animations that set opacity: 0 */
html.translated-ltr [style*="opacity: 0"],
html.translated-rtl [style*="opacity: 0"],
html.translated-ltr .animate-fade-in-up,
html.translated-rtl .animate-fade-in-up,
.goog-te-combo~* [style*="opacity: 0"] {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    /* Stop animation interference */
}