/*
   Tropicália Zine Analógico - Design System
   Estética: Impressão de risografia, colagens manuais dos anos 70.
*/

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Lora:ital,wght@0,400..700;1,400..700&family=Permanent+Marker&display=swap');

/* Font Swap for PageSpeed */
:root {
    font-display: swap;
}

:root {
    /* 1. Paleta de Cores (Quente e Terrosa) */
    --color-primary: #E2B13C;
    /* Mostarda - sol */
    --color-secondary: #D95D39;
    /* Terracota - urucum */
    --color-tertiary: #2F5938;
    /* Verde Mata - folha profundo */
    --color-accent: #3A6EA5;
    /* Azul Retrô - caneta vintage */
    --color-bg: #F4F1E8;
    /* Creme Envelhecido - papel */
    --color-text: #2A2A2A;
    /* Preto suave - tinta de carimbo */

    /* Typography */
    --font-heading: 'Bangers', cursive;
    --font-body: 'Lora', serif;
    --font-manual: 'Permanent Marker', cursive;
}

/* 3. Texturas e Fundos (Efeito Analógico Refinado) */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 500;
    /* Thicker "ink" for body text */
    margin: 0;
    padding: 0;
    line-height: 1.7;
    /* Better readability on textured background */
    position: relative;
    overflow-x: hidden;
    /* Fix horizontal scroll from rotations */
    /* Container global para conter Elementor Backgrounds */
    width: 100vw;
}

/* Optimized Background */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Reduzindo chamadas externas usando gradientes se possível, mantendo apenas 1 essencial */
    /* Optimized Background - Pilar 8 */
    background-image:
        linear-gradient(rgba(244, 241, 232, 0.95), rgba(244, 241, 232, 0.95)),
        url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAA6f9Y5AAAABlBMVEUAAAD///+l2Z/dAAAAbUlEQVR4XqXQSwoAIAhF0Ufx/ldWi4IsfBfOfYsgmllcl6BfK9CSAnS7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S4B9pYArwE8RBAAAAAElFTkSuQmCC');
    background-size: auto;
    opacity: 0.5;
    z-index: -2;
    /* Força ficar atrás de tudo, inclusive backgrounds do WP/Elementor */
}

/* Camada extra de sujeira no topo visual, mas não clica */
.grain-overlay {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAA6f9Y5AAAABlBMVEUAAAD///+l2Z/dAAAAbUlEQVR4XqXQSwoAIAhF0Ufx/ldWi4IsfBfOfYsgmllcl6BfK9CSAnS7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S4B9pYArwE8RBAAAAAElFTkSuQmCC');
    opacity: 0.1;
    pointer-events: none;
    z-index: 9997;
    /* Fica abaixo do grain principal, não bloqueia fundo */
}

/* Film Grain and Risograph noise overlay */
.grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAA6f9Y5AAAABlBMVEUAAAD///+l2Z/dAAAAbUlEQVR4XqXQSwoAIAhF0Ufx/ldWi4IsfBfOfYsgmllcl6BfK9CSAnS7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S7A7S4B9pYArwE8RBAAAAAElFTkSuQmCC');
    opacity: 0.04;
    pointer-events: none;
    z-index: 9998;
}

/* Styles for the Quiz (Pilar 4) */
.quiz-box {
    margin: 30px auto !important;
    background: #fff;
    border: 3px solid var(--color-text);
    box-shadow: 8px 8px 0px var(--color-accent) !important;
    transform: rotate(-0.5deg) !important;
}

.btn-primary {
    background: var(--color-secondary);
    color: white;
    border: 2px solid var(--color-text);
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 4px 4px 0px var(--color-text);
    transition: 0.2s;
    margin: 5px;
}

.btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--color-text);
}

/* --- Container e Colagem --- */
#content,
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* 2. Tipografia (Estilo "Recorte" e Manual) */
/* Resto do CSS original comprimido para performance */
h1,
h2,
h3,
h4,
.elementor-heading-title {
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
}

h1 {
    font-size: 4rem;
    color: var(--color-secondary);
    text-shadow: 3px 3px 0px var(--color-primary);
}

h1 strong {
    background: var(--color-accent);
    color: white;
    padding: 0 15px;
    border-radius: 2px 8px 3px 6px;
    /* Borda irregular */
}

h2 {
    font-size: 2.5rem;
    color: var(--color-tertiary);
}

h3 {
    font-family: var(--font-manual);
    font-size: 2.2rem;
    text-shadow: 2px 2px 0px var(--color-secondary);
}

/* 4. Elementos de UI (Estética de Colagem Fluida / Broken Grid) */
section,
article,
.zine-card {
    background: white;
    padding: 2rem;
    margin: -2rem auto 2rem auto;
    /* Overlap the sections vertically */
    border: 3px solid var(--color-text);
    /* Sombras (Hard Shadow - Mais profundas para parallax) */
    box-shadow: 10px 10px 0px var(--color-secondary);
    border-radius: 5px 35px 5px 65px;
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 95%;
    /* Prevent full width to allow visible offset */
    transform: rotate(1deg);
}

/* FORÇAR SVGs e Ícones para ficarem PEQUENOS a qualquer custo */
.elementor-icon svg,
.elementor-widget-icon svg,
.icon-box svg,
.elementor-icon-box-icon svg,
section svg,
article svg,
.zine-card svg,
img[src*=".svg"] {
    width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
    display: block !important;
    margin: 0 auto !important;
}

section img:not([src*=".svg"]),
article img:not([src*=".svg"]) {
    max-width: 100% !important;
    height: auto !important;
}

/* Iconography (Textura de Recorte Geométrico) */
.elementor-icon,
.icon-box,
.zine-card i,
.zine-card svg {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 45px !important;
    max-height: 45px !important;
    padding: 15px;
    /* Borda muito irregular para simular tesoura */
    border-radius: 12px 3px 18px 5px !important;
    border: 3px solid var(--color-text);
    /* Bolhas / Formas sólidas com Hard Shadow */
    background: var(--color-primary) !important;
    color: var(--color-text) !important;
    fill: var(--color-text) !important;
    box-shadow: 4px 4px 0px 0px var(--color-tertiary);
    transform: rotate(-3deg);
    transition: all 0.2s;
}

.elementor-icon:hover {
    background: var(--color-secondary) !important;
    transform: rotate(0deg) scale(1.1);
    box-shadow: 2px 2px 0px 0px var(--color-text);
}

/* Base text within cards & Elementor fixes */
section p,
article p,
.zine-card p,
.elementor-text-editor,
.elementor-text-editor p {
    color: var(--color-text) !important;
    font-weight: 500 !important;
    font-family: var(--font-body) !important;
    font-size: 1.3rem !important;
    line-height: 1.6 !important;
}

h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-heading) !important;
}

/* Grid rules removed — custom layout handled by zine-theme.css */

/* Widgets flutuando / desalinhados */
.elementor-widget-text-editor,
.elementor-widget-heading {
    transform: rotate(1.5deg) !important;
}

/* Make headers break out of the zine cards violently */
section h2,
.elementor-heading-title {
    position: relative !important;
    top: -30px !important;
    left: -20px !important;
    z-index: 20 !important;
}

section:nth-child(even) h2,
.elementor-section:nth-child(even) .elementor-heading-title {
    left: 20px !important;
}

/* Column rules removed — handled by zine-theme.css */

/* 5. Footer Collage (Recorte Brutalista) */
footer,
.site-footer {
    background: var(--color-tertiary);
    color: var(--color-bg);
    padding: 5rem 2rem;
    margin-top: 5rem;
    border-top: 5px solid var(--color-text);
    position: relative;
    overflow: hidden;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: repeating-linear-gradient(45deg,
            var(--color-primary),
            var(--color-primary) 10px,
            var(--color-secondary) 10px,
            var(--color-secondary) 20px);
}

footer a {
    color: var(--color-primary) !important;
    font-family: var(--font-heading);
    font-size: 1.5rem;
}

footer h2,
footer h3 {
    color: white;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}

/* Global button rules removed — specific .btn-primary and .btn-submit in zine-theme.css */

/* Risograph Offset Effect on Global Links */
a {
    transition: text-shadow 0.2s;
}

a:hover {
    text-shadow: 3px 3px 0px var(--color-secondary) !important;
}

/* Header / Nav Menu Extremo */
header,
.elementor-location-header {
    background: var(--color-bg) !important;
    border-bottom: 5px solid var(--color-text);
    box-shadow: 0px 5px 0px 0px var(--color-primary);
    position: relative;
    z-index: 999;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px;
    background: var(--color-primary);
    padding: 25px;
    border: 4px solid var(--color-text);
    box-shadow: 6px 6px 0px var(--color-text);
    margin: 20px auto;
    max-width: 900px;
    transform: rotate(-0.5deg);
}

nav a {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    text-transform: uppercase;
    color: #1a1a1a !important;
    /* Maximized contrast */
    text-decoration: none !important;
}

nav a:hover {
    color: #D95D39 !important;
    /* Terracota transition */
    transform: translateY(-3px);
}

/* Layout Mobile */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    section {
        padding: 1rem;
    }
}