/**
 * 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: #050505;
    /* Dark */
    color: white !important;
}

.page-header-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(196, 245, 0, 0.15) 0%, rgba(10, 10, 10, 0) 70%);
    /* Subtle Inboxe glow */
    pointer-events: none;
}

.page-header-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    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: #C4F500 !important;
}

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