/*
Theme Name: Crias Theme
Theme URI: https://paraisopolis.org/
Author: Joildo Barreto dos Santos
Author URI: https://joildo.org
Description: Tema WordPress para Instituto Crias, inspirado no design system v7.0.
Version: 1.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crias-theme
*/

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root {
   --preto-rico: #0D0D0D;
   --verde-neon: #9AFF00;
   --teal-autoridade: #00796B;
   --vermelho-urgencia: #E53935;
   --amarelo-luz: #FDD835;
   --branco: #FFFFFF;
   --cinza-texto: #CCCCCC;
   --off-white: #F5F5F0;
}

body {
   min-height: 100vh;
   background: var(--preto-rico);
   font-family: 'Inter', sans-serif;
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 40px 20px;
}

/* Simplify WordPress layout */
#content {
   width: 100%;
   max-width: 1080px;
   flex: 1;
   background: var(--preto-rico);
   display: flex;
   flex-direction: column;
   padding: 80px;
   position: relative;
}

/* Facho */
.facho {
   display: flex;
   flex-direction: column;
   gap: 6px;
   transform: rotate(-15deg);
   position: absolute;
   top: 60px; right: 60px;
}
.facho-line {height:4px;background:var(--verde-neon);border-radius:2px;}

/* Grain */
.grain {position:relative;}
.grain::after {content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:0.04;pointer-events:none;z-index:1;}

/* Header */
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:60px;position:relative;z-index:2;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:var(--verde-neon);letter-spacing:2px;}
.logo span{color:var(--branco);font-size:14px;display:block;margin-top:4px;}
nav a{color:var(--cinza-texto);text-decoration:none;font-size:14px;font-weight:500;margin-left:30px;transition:color .3s;}
nav a:hover{color:var(--verde-neon);}

/* Hero */
.tag{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:3px;color:var(--teal-autoridade);text-transform:uppercase;margin-bottom:30px;}
h1{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:700;color:var(--branco);margin-bottom:30px;}
.subtitle{font-family:'Inter',sans-serif;font-size:20px;color:var(--cinza-texto);max-width:70%;margin-bottom:40px;}
.cta-button{display:inline-block;padding:15px 40px;background:var(--verde-neon);color:var(--preto-rico);text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1px;transition:all .3s;}
.cta-button:hover{opacity:.9;transform:translateX(5px);}

footer{position:absolute;bottom:80px;left:80px;right:80px;display:flex;justify-content:space-between;align-items:center;z-index:2;}
.handle{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--cinza-texto);}