/**
 * ==================================================================================
 * █  LEUK 404 - TECHNICAL GRID BACKGROUND
 * ==================================================================================
 * Descrição: Adiciona um fundo de papel milimétrico configurável.
 * A tipografia é controlada pelo Elementor.
 */

:root {
    /* --- ⚙️ PAINEL DE CONFIGURAÇÃO --- */
    
    /* 1. Tamanho dos quadrados da grelha */
    --leuk-grid-size: 40px; 
    
    /* 2. Cor das linhas da grelha (Use rgba para transparência) */
    /* Sugestão: rgba(0, 0, 0, 0.03) para muito subtil, 0.08 para mais visível */
    --leuk-grid-color: rgba(0, 0, 0, 0.08); 
    
    /* 3. Cor de Fundo da página (Deve bater certo com o site) */
    --leuk-bg-color: #ffffff;
    
    /* 4. Vinheta (O "fumo" branco à volta para focar o centro) */
    /* Mude para 'none' se não quiser o efeito de foco */
    --leuk-vignette: radial-gradient(circle, transparent 40%, var(--leuk-bg-color) 90%);
}

/* --- APLICAÇÃO --- */

/* Classe a colocar na Secção/Container do Elementor */
.leuk-404-bg {
    position: relative;
    background-color: var(--leuk-bg-color);
    
    /* Desenha a Grelha */
    background-image: 
        linear-gradient(var(--leuk-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--leuk-grid-color) 1px, transparent 1px);
    
    /* Define o tamanho */
    background-size: var(--leuk-grid-size) var(--leuk-grid-size);
    
    /* Garante que o fundo não sai da secção */
    overflow: hidden;
    isolation: isolate; 
}

/* Cria a vinheta (foco no centro) sem tapar o conteúdo */
.leuk-404-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--leuk-vignette);
    pointer-events: none; /* Deixa clicar nos botões por baixo */
    z-index: -1;
}

/* Ajuste Opcional para Ecrãs Pequenos (Mobile) */
@media (max-width: 767px) {
    :root {
        --leuk-grid-size: 25px; /* Grelha mais pequena no telemóvel */
    }
}