/**
 * Inbox Academy — Estilos Customizados do Site
 * 
 * A maior parte dos estilos é feita via classes Tailwind CSS inline.
 * Este arquivo contém apenas customizações que não são possíveis com Tailwind.
 */

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* Esconder scrollbar em elementos com overflow */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animações do Hero */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes bounce-slow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 4s ease-in-out infinite;
}

/* Header de Página Profissional e Elegante */
.page-header-bg {
    position: relative;
    overflow: hidden;
    background-color: #0f172a;
    /* Slate 900 */
    color: white !important;
}

.page-header-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(163, 230, 53, 0.08) 0%, rgba(15, 23, 42, 0) 70%);
    /* Subtle Lime glow */
    pointer-events: none;
}

.page-header-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
}

.page-header-bg h1 {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.page-header-bg p {
    color: #cbd5e1 !important;
    /* Slate 300 */
}

/* Breadcrumb integrado ao Header */
.breadcrumb-nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 10;
}

.breadcrumb-nav * {
    color: rgba(255, 255, 255, 0.6) !important;
}

.breadcrumb-nav .font-medium {
    color: white !important;
}

.breadcrumb-nav a:hover {
    color: #a3e635 !important;
}