/*
 * main.css — Sedola Trabalhista Theme
 * Estilos complementares ao Tailwind CSS.
 * Não duplicar classes do Tailwind aqui; usar apenas para
 * elementos que o Tailwind CDN não cobre nativamente.
 */

/* ── Reset / Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Material Symbols — variações default ───────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
    user-select: none;
}

/* ── Logo do WordPress (custom-logo) ────────────────────────────────────── */
.custom-logo-link {
    display: block;
    min-width: 120px;
    min-height: 48px;
}
.custom-logo-link img,
.custom-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ── Animação do menu mobile ────────────────────────────────────────────── */
#mobile-menu {
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#mobile-menu.hidden {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}
#mobile-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── FAQ — animação suave do <details> ──────────────────────────────────── */
details > p {
    animation: fadeSlideIn 0.25s ease;
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}



/* ── Estilos do step connector (linha entre etapas) ─────────────────────── */
@media (min-width: 768px) {
    .step-connector {
        position: absolute;
        top: 2rem; /* metade do círculo */
        left: 50%;
        width: 100%;
        height: 2px;
        background-color: #ddc0bf; /* outline-variant */
        z-index: 0;
    }
}

/* ── Hover cards: elevação suave ────────────────────────────────────────── */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(121,23,35,.08);
}

/* ── Scroll offset para âncoras (compensar header fixo) ─────────────────── */
section[id] {
    scroll-margin-top: 88px;
}

/* ── Texto de seleção ────────────────────────────────────────────────────── */
::selection {
    background-color: #992f38;
    color: #ffb8b9;
}

/* ── Ajuste fino do <summary> para remover triângulo nativo ─────────────── */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ── Responsividade: max-w-container-max como classe utilitária extra ────── */
.container-max {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Print: ocultar elementos desnecessários ────────────────────────────── */
@media print {
    header, #floating-whatsapp, footer { display: none !important; }
    body { font-size: 12pt; color: #000; }
}