/* Opolski Advocacia — Direito Digital · estilos globais
   Estética V2.1: advocacia contemporânea — ink quente, ivory/creme, ember
   (laranja queimado) e champagne discreto. Editorial, humano, sem cara de SaaS. */

/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {
    /* Famílias tipográficas */
    --font-display: 'Fraunces', Georgia, serif;
    --font-sans: 'Sora', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    /* Paleta quente */
    --ink-950: #0D0C0A;
    --ink-900: #141210;
    --ink-800: #1C1916;
    --ink-700: #2A251F;
    --ink-600: #3C352C;
    --ivory-50: #FAF7F0;
    --ivory-100: #F3EEE3;
    --ivory-200: #E8E0CF;
    --ivory-300: #D4C9B2;
    --ivory-400: #AFA28A;
    --ivory-500: #8B7F6A;
    --ember-300: #F2A26B;
    --ember-400: #E88A4A;
    --ember-500: #D9752F;
    --ember-600: #B85C20;
    --champagne-400: #C8B078;
    --champagne-500: #A78E52;

    /* Line heights */
    --leading-tight: 1.12;
    --leading-snug: 1.3;
    --leading-relaxed: 1.65;

    /* Pesos */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
}

/* ==========================================================================
   BASE
   ========================================================================== */

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

html, body {
    background-color: var(--ink-950);
    color: var(--ivory-100);
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: var(--leading-relaxed);
    font-weight: var(--font-normal);
    min-height: 100vh;
}

/* Títulos: Fraunces (editorial) */
h1, h2, h3, .heading-display {
    font-family: var(--font-display);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
}

h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}

::selection {
    background: rgba(217, 117, 47, 0.35);
    color: var(--ivory-50);
}

/* Foco visível — ember */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ember-400);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Elementos não interativos sem outline (inclui focus trap do Blazor) */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
p:focus, span:focus, div:focus, section:focus,
h1:focus-visible, h2:focus-visible, h3:focus-visible,
p:focus-visible, div:focus-visible, section:focus-visible,
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none !important;
}

a, button {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* Autofill em formulários escuros */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--ivory-100);
    -webkit-box-shadow: 0 0 0px 1000px var(--ink-800) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================================================
   UTILITÁRIOS EDITORIAIS
   ========================================================================== */

/* Rótulo pequeno padrão (sans, small caps) — substitui o excesso de mono */
.eyebrow {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ember-400);
}

.eyebrow--muted {
    color: var(--ivory-500);
}

/* Mono reservado a raríssimos detalhes técnicos (ficha, OAB) */
.eyebrow-mono {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ivory-500);
}

/* Linha-fio horizontal (quente) */
.hairline {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 201, 178, 0.20), transparent);
}

.hairline--dark {
    background: linear-gradient(90deg, transparent, rgba(20, 18, 16, 0.18), transparent);
}

/* Linha que se desenha ao entrar na viewport (usar com .rv) */
.rule-draw {
    height: 2px;
    background: linear-gradient(90deg, var(--ember-500), rgba(217, 117, 47, 0));
    transform-origin: left center;
}

/* Cartão editorial: profundidade mínima, calor no hover */
.card-editorial {
    background: linear-gradient(180deg, rgba(250, 247, 240, 0.03), rgba(250, 247, 240, 0.01));
    border: 1px solid rgba(212, 201, 178, 0.12);
    border-radius: 0.375rem;
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.card-editorial:hover {
    border-color: rgba(232, 138, 74, 0.5);
}

/* Cartão sobre fundo claro */
.card-light {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(20, 18, 16, 0.10);
    border-radius: 0.375rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card-light:hover {
    border-color: rgba(184, 92, 32, 0.45);
}

/* Moldura de figura com fallback gracioso (contrato photosThiago) */
.fig-slot {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(217, 117, 47, 0.10), rgba(13, 12, 10, 0) 55%),
        var(--ink-800);
}

.fig-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fig-slot.fig-missing img {
    display: none;
}

.fig-slot .fig-fallback {
    display: none;
}

.fig-slot.fig-missing .fig-fallback {
    display: flex;
}

/* ==========================================================================
   MOTION SYSTEM (reveal.js) — transform/opacity, respeita reduced-motion
   ========================================================================== */

/* Estado inicial oculto só se aplica com JS ativo (html.rv-armed via reveal.js):
   sem JS, crawler ou leitor vê tudo visível. */
html.rv-armed .rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--rv-delay, 0ms);
    will-change: opacity, transform;
}

html.rv-armed .rv[data-rv="fade"] { transform: none; }

html.rv-armed .rv[data-rv="left"] { transform: translateX(-28px); }

html.rv-armed .rv[data-rv="right"] { transform: translateX(28px); }

html.rv-armed .rv[data-rv="scale"] { transform: scale(0.96); }

html.rv-armed .rv[data-rv="line"] {
    transform: scaleX(0);
    transition-duration: 0.9s;
}

html.rv-armed .rv.rv-in {
    opacity: 1;
    transform: none;
}

html.rv-armed .rv[data-rv="line"].rv-in {
    transform: scaleX(1);
}

/* Sem JS (ou prerender antes do observer): garante conteúdo visível ao imprimir */
@media print {
    .rv { opacity: 1 !important; transform: none !important; }
}

/* Reduced motion: tudo visível, sem deslocamento */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .rv {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}