/*
 * assets/css/main.css — Design System Viatta Viagens
 * Todas as variáveis em style.css :root
 * Para PRODUÇÃO: substitua Tailwind CDN por bundle compilado
 */

/* ── FONTES ────────────────────────────────────────────── */
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; color: var(--navy); }
h1,h2,h3,h4,h5 { font-family: var(--font-head); line-height: 1.2; }

/* ── HEADER STATES ─────────────────────────────────────── */
#mainHeader { transition: all 0.3s ease; }
#mainHeader.is-solid {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 30px rgba(10,50,66,0.08);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
/* Logo: no hero = clara (filter invert para fundo escuro),
         is-solid = escura (sem filter) */
#mainHeader #logoLight  { display: block; filter: brightness(0) invert(1); }
#mainHeader #logoDark   { display: none; }
#mainHeader.is-solid #logoLight { display: none; }
#mainHeader.is-solid #logoDark  { display: block; filter: none; }
/* Links: branco no hero, navy no sólido */
#mainHeader .nav-link                { color: rgba(255,255,255,0.85); }
#mainHeader.is-solid .nav-link       { color: var(--navy); }
#mainHeader .nav-link::after         { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--turquoise); transition:width 0.3s; }
#mainHeader .nav-link:hover::after   { width:100%; }

/* ── REVEAL ANIMATION ──────────────────────────────────── */
.viatta-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(.25,.46,.45,.94), transform 0.7s cubic-bezier(.25,.46,.45,.94);
}
.viatta-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .viatta-reveal { opacity:1; transform:none; transition:none; }
}

/* ── DAY ACCORDION ─────────────────────────────────────── */
.day-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.day-item.active .day-body { max-height: 900px; }
.day-item.active .day-header svg:last-child { transform: rotate(180deg); }
.day-item.active .w-10.rounded-full { background-color: var(--turquoise) !important; }

/* ── FAQ ACCORDION ─────────────────────────────────────── */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-answer { max-height: 400px; }
.faq-item.active .faq-question svg { transform: rotate(45deg); color: var(--turquoise); }
.faq-item.active .faq-question { color: var(--turquoise); }

/* ── WHATSAPP PULSE ─────────────────────────────────────── */
@keyframes viatta-wpp-pulse {
    0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.35); }
    50%      { box-shadow: 0 4px 32px rgba(37,211,102,0.55); }
}
.viatta-wpp-pulse { animation: viatta-wpp-pulse 2s infinite; }

/* ── PROSE OVERRIDES (posts do blog) ───────────────────── */
.prose h2 { font-family: var(--font-head); font-size: 1.4rem; color: var(--navy); margin-top: 2rem; margin-bottom: 0.75rem; }
.prose h3 { font-family: var(--font-head); font-size: 1.15rem; color: var(--navy); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose p  { margin-bottom: 1.25rem; line-height: 1.8; }
.prose a  { color: var(--turquoise); text-decoration: underline; }

/* ── BLOG FILTER ────────────────────────────────────────── */
.viatta-cat-filter { transition: all 0.3s; cursor: pointer; border: none; }
.viatta-cat-filter.active { background: var(--navy) !important; color: white !important; }

/* ── LINE CLAMP ─────────────────────────────────────────── */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── MOBILE ADJUSTMENTS ─────────────────────────────────── */
@media (max-width: 768px) {
    #mainHeader { padding-left: 1rem; padding-right: 1rem; }
}