/* Pedro Pontes Advocacia - Custom Styles */

/* ==========================================================================
   SISTEMA TIPOGRÁFICO GLOBAL
   ========================================================================== */

:root {
    /* Famílias tipográficas */
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-serif-alt: 'Merriweather', Georgia, serif;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* Tamanhos - Escala Modular (1.25 ratio) */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4.5rem;      /* 72px */
    
    /* Line Heights */
    --leading-tight: 1.15;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.8;
    
    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    
    /* Pesos */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
}

/* Base Typography */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-normal);
}

/* Heading Styles - Serif para autoridade */
h1, h2, h3, .heading-serif {
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

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

/* Paragraph and body text */
p, .body-text {
    font-family: var(--font-sans);
    line-height: var(--leading-relaxed);
}

/* Small/Caption text */
small, .caption, .text-caption {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

/* Labels e navegação */
.label, .nav-text {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* CTAs e botões - destaque */
.cta-text {
    font-family: var(--font-sans);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
}

/* Destaques com serifa secundária */
.highlight-serif {
    font-family: var(--font-serif-alt);
    font-weight: var(--font-bold);
}

/* ==========================================================================
   FUNDO GLOBAL ESCURO
   ========================================================================== */
html, body {
    background-color: #0a0a0a;
    color: #FAFAFA;
}

/* Fundo gradiente sutil para todo o site */
body {
    background: 
        linear-gradient(180deg, 
            #0a0a0a 0%, 
            #0d0d0d 50%, 
            #0a0a0a 100%
        );
    background-attachment: fixed;
    min-height: 100vh;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
CUSTOM SCROLLBAR - Controlada via JS (custom-scrollbar.js)
A scrollbar nativa é ocultada e substituída por uma versão customizada
com comportamentos modernos de UI/UX
========================================================================== */

/* Selection color */
::selection {
    background: rgba(212, 175, 55, 0.3);
    color: #F4F4F4;
}

/* Focus styles - only for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 2px;
}

/* Remove outline from all non-interactive elements */
h1, h2, h3, h4, h5, h6, p, span, div, section, article, main, header, footer, nav {
    outline: none !important;
}

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, h4:focus-visible, h5:focus-visible, h6:focus-visible,
p:focus-visible, span:focus-visible, div:focus-visible, section:focus-visible {
    outline: none !important;
}

/* Blazor focus trap elements should have no outline */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
[blazor-focus] {
    outline: none !important;
}

/* Smooth transitions for interactive elements */
a, button {
    transition: all 0.2s ease-in-out;
}

/* Gradient text utility */
.text-gradient-gold {
    background: linear-gradient(135deg, #E6C547 0%, #D4AF37 50%, #C9A227 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animation for pulse effect */
@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(212, 175, 55, 0);
    }
}

.animate-pulse-gold {
    animation: pulse-gold 2s infinite;
}

/* Form input styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #F4F4F4;
    -webkit-box-shadow: 0 0 0px 1000px #2B2C2F inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Shared image effects - clean version without darkening */
.image-effect-container {
    position: relative;
    overflow: hidden;
}

.image-effect-container img {
    transition: transform 0.5s ease;
    filter: none;
}

.image-effect-container:hover img {
    transform: scale(1.02);
}