/* ===================================
   Jovem 7 - Common Styles
   Compartilhado entre Frontend e Admin
   =================================== */

/* ========== 1. Variáveis CSS (v2 - JOVEM7 Azure Blue) ========== */
:root {
    /* Paleta de Cores - Template v2 */
    --j7-primary: #299CD5;
    /* JOVEM7 Azure Blue */
    --j7-primary-dark: #1F7BAA;
    /* Darker Blue */
    --j7-secondary: #2C2C2C;
    /* Deep Charcoal */
    --j7-accent: #FFD700;

    /* Backgrounds */
    --j7-background: #FDFDFD;
    /* Body background */
    --j7-background-surface: #FFFFFF;
    /* Card/Surface background */
    --j7-background-light: #F0F4F8;
    /* Cool light blue-grey */
    --j7-background-subtle: #F0F4F8;
    /* Subtle background (same as light) */

    /* Text Colors */
    --j7-text-title: #2C2C2C;
    /* Deep Charcoal */
    --j7-text-secondary: #5A6B7C;
    /* Blue-grey secondary */
    --j7-text-body: #5A6B7C;
    /* Blue-grey secondary (same as secondary) */
    --j7-text-light: #A0AEC0;
    /* Lighter secondary */

    /* Border */
    --j7-border-light: #E2E8F0;

    /* Tipografia */
    --j7-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --j7-font-heading: 'Outfit', sans-serif;
    --j7-font-size-base: 1rem;
    --j7-font-size-sm: 0.875rem;
    --j7-font-size-lg: 1.125rem;
    --j7-line-height-base: 1.6;

    /* Espaçamentos */
    --j7-spacing-xs: 0.5rem;
    --j7-spacing-sm: 1rem;
    --j7-spacing-md: 1.5rem;
    --j7-spacing-lg: 2rem;
    --j7-spacing-xl: 3rem;
    --j7-spacing-xxl: 5rem;

    /* Sombras (v2 - Mais suaves) */
    --j7-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --j7-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.03);
    --j7-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.05);
    --j7-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.03);
    --j7-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.05);

    /* Border Radius */
    --j7-radius-sm: 0.375rem;
    /* 6px */
    --j7-radius-md: 0.5rem;
    /* 8px */
    --j7-radius-lg: 1rem;
    /* 16px */
    --j7-radius-xl: 1.5rem;
    /* 24px */
    --j7-radius-pill: 2rem;
    /* 32px */

    /* Focus Ring */
    --j7-focus-ring: 0 0 0 4px rgba(41, 156, 213, 0.1);

    /* Glassmorphism */
    --j7-glass-bg: rgba(255, 255, 255, 0.85);
    --j7-glass-border: 1px solid rgba(255, 255, 255, 0.5);
    --j7-backdrop-blur: blur(16px);

    /* Transições */
    --j7-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Container */
    --j7-container-width: 1200px;
    --j7-header-height: 80px;
}

/* ========== 2. Fonte Inter (local) ========== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter.woff2') format('woff2');
}

/* ========== 3. Reset e Base ========== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Sempre reservar espaço para a barra de rolagem para evitar "pulos" horizontais */
    overflow-y: scroll;
    /* Comportamento padrão de scroll; animações suaves são controladas via JS quando necessário */
    scroll-behavior: auto;
}

body {
    font-family: var(--j7-font-family);
    font-size: var(--j7-font-size-base);
    line-height: var(--j7-line-height-base);
    color: var(--j7-text-body);
    background-color: var(--j7-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--j7-font-heading);
    /* Outfit para headings */
    font-weight: 500;
    color: var(--j7-text-title);
    line-height: 1.2;
    margin-bottom: var(--j7-spacing-md);
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.75rem;
    }

    h3 {
        font-size: 2.25rem;
    }
}

a {
    color: var(--j7-primary);
    text-decoration: none;
    transition: var(--j7-transition);
}

a:hover {
    color: var(--j7-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

/* Labels de formulário levemente em negrito */
.form-label {
    font-weight: 600;
    color: var(--j7-text-title);
}

/* ===================================
   Admin Context Overrides
   =================================== */

/* Reduzir tamanhos de títulos no contexto admin */
.admin-content h1,
.admin-content h2,
.admin-content h3,
.admin-content h4 {
    margin-bottom: 0.75rem;
}

.admin-content h1 {
    font-size: 1.75rem;
    line-height: 1.3;
}

.admin-content h2 {
    font-size: 1.5rem;
    line-height: 1.3;
}

.admin-content h3 {
    font-size: 1.25rem;
    line-height: 1.4;
}

.admin-content h4 {
    font-size: 1.125rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .admin-content h1 {
        font-size: 2rem;
    }

    .admin-content h2 {
        font-size: 1.75rem;
    }

    .admin-content h3 {
        font-size: 1.5rem;
    }
}

/* ========== 4. Utilitários (Compartilhados) ========== */
.text-gradient {
    background: linear-gradient(135deg, var(--j7-primary) 0%, var(--j7-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-j7-primary {
    color: var(--j7-primary) !important;
}

.text-j7-primary-dark {
    color: var(--j7-primary-dark) !important;
}

.btn-j7-primary {
    background: linear-gradient(135deg, var(--j7-primary) 0%, var(--j7-primary-dark) 100%);
    border: none;
    color: white;
    padding: var(--j7-spacing-sm) var(--j7-spacing-lg);
    border-radius: var(--j7-radius-pill);
    font-weight: 600;
    transition: var(--j7-transition);
}

.btn-j7-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--j7-shadow-md);
    color: white;
}

.j7-badge {
    background: linear-gradient(135deg, var(--j7-primary) 0%, var(--j7-primary-dark) 100%);
    color: #ffffff;
    padding: var(--j7-spacing-xs) var(--j7-spacing-sm);
    border-radius: var(--j7-radius-pill);
    font-weight: 600;
    font-size: var(--j7-font-size-sm);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    box-shadow: var(--j7-shadow-sm);
    border: 0;
    cursor: pointer;
}

.j7-badge:hover,
.j7-badge:focus-visible {
    color: #ffffff;
    text-decoration: none;
    box-shadow: var(--j7-shadow-md);
    transform: translateY(-1px);
}

.j7-badge:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* ========== 5. Animações ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 1 !important;
    transform: translateY(0) !important;
}