/*
 Theme Name:   Barbra Portfolio 3.8
 Description:  Update: Blue accent for Light Mode, Orange for Dark Mode.
 Template:     twentytwentyfive
 Text Domain:  twentytwentyfive-child
*/

/* ==========================================================================
   1. FONTS SETUP
   ========================================================================== */

/* IMPORTANT: Paste your font URL below */
@font-face {
    font-family: 'Departure Mono';
    src: url('https://barbraeliza.com/wp-content/uploads/2025/11/DepartureMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Apply Departure Mono to headings and UI elements */
h1, h2, h3, h4, h5, h6, 
.wp-block-site-title, 
.wp-block-site-tagline,
.wp-block-navigation a {
    font-family: 'Departure Mono', monospace !important;
    font-weight: normal !important;
}

/* ==========================================================================
   2. GLOBAL VARIABLES & GRID BACKGROUND + NOISE TEXTURE
   ========================================================================== */

/* 1. VARIÁVEIS DE COR */
:root {
    --color-bg-primary: #ffffff; 
    --color-text-primary: #1a1a1a; 
    --color-link: #0047FF; 
}

body {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
    --color-bg-primary: #101010; 
    --color-text-primary: #f0f0f0; 
    --color-link: #ff7d4d; 
}

/* 2. ANIMAÇÃO DO RUÍDO (Vibração rápida) */
@keyframes grain {
    0%, 100% { transform:translate(0, 0); }
    10% { transform:translate(-5%, -10%); }
    20% { transform:translate(-15%, 5%); }
    30% { transform:translate(7%, -25%); }
    40% { transform:translate(-5%, 25%); }
    50% { transform:translate(-15%, 10%); }
    60% { transform:translate(15%, 0%); }
    70% { transform:translate(0%, 15%); }
    80% { transform:translate(3%, 35%); }
    90% { transform:translate(-10%, 10%); }
}

/* 3. CAMADA 1: O GRID (Fica parado e estático) */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: -2; /* Fica no fundo de tudo */
    
    /* Light Mode Grid */
    background-image: 
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 30px 30px; 
}

body.dark-mode::before {
    /* Dark Mode Grid */
    background-image: 
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* 4. CAMADA 2: O RUÍDO (Fica por cima do Grid, vibrando) */
body::after {
    content: "";
    /* O tamanho é 300% para podermos mover a imagem sem ela acabar nas bordas */
    position: fixed;
    top: -100%; left: -100%; width: 300%; height: 300%;
    pointer-events: none;
    z-index: -1; /* Fica na frente do grid, mas atrás do texto */
    
    /* Gera uma textura de ruído via SVG embutido (super leve) */
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="1"/%3E%3C/svg%3E');
    
    /* Opacidade do ruído no Light Mode (bem sutil) */
    opacity: 0.05; 
    
    /* A mágica: steps(10) faz o movimento ser "travado" igual TV antiga, não liso */
    animation: grain 8s steps(10) infinite;
}

body.dark-mode::after {
    /* No modo escuro, o ruído precisa ser um pouquinho mais fraco para não parecer poeira na tela */
    opacity: 0.03; 
}

/* ==========================================================================
   3. BRANDING (Typewriter Effect & Consistency)
   ========================================================================== */

/* Animations */
@keyframes typing {
    from { width: 0; }
    to { width: calc(12ch + 20px); } 
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--color-link); } 
}

.wp-block-site-title a {
    font-family: 'Departure Mono', monospace !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-weight: normal !important;
    color: var(--color-text-primary) !important;
    font-size: 24px;
    letter-spacing: 1px;

    /* --- TYPEWRITER EFFECT SETUP --- */
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    
    border-right: 12px solid var(--color-link); 
    padding-right: 5px; 
    
    width: 0;
    animation: 
        typing 1.5s steps(12, end) forwards,
        blink-caret 0.9s step-end infinite;
}

/* Footer Tagline Style */
.wp-block-site-tagline {
     font-family: 'Inter', sans-serif !important; 
     font-size: 14px !important; 
     letter-spacing: 0.5px;
     opacity: 0.6; 
     margin-top: 5px;
}

/* ==========================================================================
   4. MAIN CONTENT FIXES (Typography & Spacing)
   ========================================================================== */

/* Hide default page title */
h1.wp-block-post-title { display: none !important; }

/* Remove Header Gap */
main.wp-block-group { margin-top: 0 !important; }

/* Ensure Text Visibility */
.wp-block-cover h2 { color: var(--color-text-primary) !important; }

/* --- IMPROVED BODY TYPOGRAPHY --- */
.wp-block-cover p {
    font-family: 'Inter', sans-serif !important; 
    font-size: 1.15rem; 
    line-height: 1.6; 
    font-weight: 300;
    max-width: 600px; 
    color: var(--color-text-primary) !important;
}

/* Hero Section Spacing */
.wp-block-cover.is-light {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    min-height: auto !important; 
}

/* Remove Default Black Overlay */
.wp-block-cover .has-background-dim:not([class*=-background-color]), 
.wp-block-cover-image .has-background-dim:not([class*=-background-color]), 
.wp-block-cover-image.has-background-dim:not([class*=-background-color]), 
.wp-block-cover.has-background-dim:not([class*=-background-color]) {
    background-color: transparent !important;
}

/* "Hey," Title Sizing */
h2.wp-block-heading {
    line-height: 0.95 !important; 
    margin-bottom: 0.5em !important;
}

/* ==========================================================================
   5. ANIMATIONS (FadeInUp)
   ========================================================================== */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animate "Hey," */
.wp-block-cover h2.wp-block-heading {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

/* Animate Bio Text */
.wp-block-cover p {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.5s;
}

/* ==========================================================================
   6. DARK MODE TOGGLE (SVG Pixel Switch)
   ========================================================================== */

.theme-switch-container {
    display: flex;
    align-items: center;
    margin-left: 25px; 
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 68px; 
    height: 32px; 
    cursor: pointer;
}

.theme-switch input { opacity: 0; width: 0; height: 0; position: absolute; }

/* The Track */
.switch-inner {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--color-bg-primary); 
    border: 3px solid var(--color-text-primary); 
    border-radius: 0; 
    transition: 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 4px;
}

/* --- PIXEL SVG STYLING --- */
.icon-pixel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    z-index: 1;
    color: var(--color-text-primary); 
    transition: color 0.3s;
}

.icon-pixel svg {
    width: 100%;
    height: 100%;
    shape-rendering: crispEdges; 
}

.icon-sun { margin-left: 2px; }
.icon-moon { margin-right: 2px; }

/* --- THE SLIDER BLOCK --- */
.switch-inner::before {
    content: "";
    position: absolute;
    height: 18px; 
    width: 18px;
    left: 4px; 
    bottom: 4px;
    background-color: var(--color-text-primary); 
    border-radius: 0; 
    transition: 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 2; 
}

/* --- HOVER STATE --- */
.theme-switch:hover .switch-inner { border-color: var(--color-link); }
.theme-switch:hover .switch-inner::before { background-color: var(--color-link); }

/* --- ACTIVE STATE (Dark Mode ON) --- */
input:checked + .switch-inner {
    background-color: var(--color-bg-primary); 
    border-color: var(--color-text-primary);
}

input:checked + .switch-inner::before {
    /* Slide right */
    transform: translateX(36px); 
    background-color: var(--color-text-primary); 
}

/* ==========================================================================
   7. MISC (Signature Button)
   ========================================================================== */
.assinatura-wrapper {
    border: 2px dashed #e0e0e0;
    padding: 25px;
    margin-top: 20px;
    background-color: #fdfdfd;
    border-radius: 8px;
}

/* ATUALIZADO: Agora usa a variável para trocar de cor automaticamente */
.btn-copiar-html {
    display: inline-block;
    background-color: var(--color-link); /* Puxa o Azul no Light, Laranja no Dark */
    color: white; /* Texto branco funciona bem nos dois */
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
    transition: filter 0.3s;
}

/* Filter brightness funciona para escurecer qualquer cor que esteja ativa */
.btn-copiar-html:hover { 
    filter: brightness(0.85); 
    background-color: var(--color-link); 
}

.feedback-assinatura { margin-top: 15px; font-weight: bold; color: green; }

/* ==========================================================================
   8. CUSTOM TEXT SELECTION (Brutalist Highlight)
   ========================================================================== */

::selection {
    background-color: var(--color-text-primary); 
    color: var(--color-bg-primary); 
}
::-moz-selection {
    background-color: var(--color-text-primary); 
    color: var(--color-bg-primary); 
}