/* SENTRADO Custom Styles - Tailwind CDN supplement */

/* Font family */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* CSS Variables from original site */
:root {
    --radius: 0.625rem;
    --background: #fff;
    --foreground: #0a0a0a;
    --card: #fff;
    --card-foreground: #0a0a0a;
    --popover: #fff;
    --popover-foreground: #0a0a0a;
    --primary: #003b72;
    --primary-foreground: #fafafa;
    --secondary: #f5f5f5;
    --secondary-foreground: #171717;
    --muted: #f5f5f5;
    --muted-foreground: #737373;
    --accent: #f5f5f5;
    --accent-foreground: #171717;
    --destructive: #e40014;
    --border: #e5e5e5;
    --input: #e5e5e5;
    --ring: #003b72;
    --sentrado-navy: #0a2463;
    --sentrado-teal: #2ec4b6;
    --sentrado-dark: #0a1628;
    --sentrado-text: #1e293b;
    --sentrado-text-muted: #64748b;
    --sentrado-light-bg: #f8fafc;
}

/* Animations from original Tailwind config */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes ping {
    75%, to { opacity: 0; transform: scale(2); }
}

@keyframes pulse {
    50% { opacity: .5; }
}

@keyframes enter {
    0% {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
            scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
            rotate(var(--tw-enter-rotate, 0));
        filter: blur(var(--tw-enter-blur, 0));
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
            scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
            rotate(var(--tw-exit-rotate, 0));
        filter: blur(var(--tw-exit-blur, 0));
    }
}

@keyframes accordion-down {
    0% { height: 0; }
    to { height: var(--radix-accordion-content-height, auto); }
}

@keyframes accordion-up {
    0% { height: var(--radix-accordion-content-height, auto); }
    to { height: 0; }
}

/* FAQ Accordion / Details animation */
details summary {
    cursor: pointer;
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::marker {
    display: none;
    content: '';
}

/* Group-open rotate for FAQ arrows */
.group-open\:rotate-180:is(:where(.group):is([open], :popover-open, :open) *) {
    rotate: 180deg;
}

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

/* Header scroll effect */
.header-scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Counter animation */
@keyframes count-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-count-up {
    animation: count-up 0.6s ease-out forwards;
}

/* Fade in animation for cards */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
}

/* Staggered animation delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Mobile menu overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile menu slide */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 80vw;
    background: white;
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}

/* Fix for Tailwind CDN - ensure arbitrary values work */
[class*="bg-\[#"] {
    background-color: var(--tw-bg-opacity, 1);
}

/* Print styles */
@media print {
    .fixed {
        position: static !important;
    }
    header {
        position: static !important;
        box-shadow: none !important;
    }
}