/**
 * ====================================================================
 * ARQUIVO: /wp-content/themes/cozinha-inventiva-kadence/assets/css/main.css
 * ====================================================================
 * 
 * ESTILOS PRINCIPAIS DO TEMA
 * 
 * O que tem aqui:
 * - Variáveis CSS (cores, fontes, tamanhos)
 * - Reset básico
 * - Tipografia
 * - Botões
 * - Cards de receita
 * - Responsividade mobile
 * 
 * ====================================================================
 */

/**
 * ============================================================
 * 1. VARIÁVEIS CSS (Cores e Configurações)
 * ============================================================
 */
:root {
    /* CORES PRINCIPAIS */
    --ci-laranja: #C65D3B;
    --ci-laranja-escuro: #A64D2B;
    --ci-laranja-claro: #E07D57;
    
    --ci-verde: #A4B952;
    --ci-verde-escuro: #8A9E42;
    --ci-verde-claro: #C0D36E;
    
    /* CORES NEUTRAS */
    --ci-preto: #1a1a1a;
    --ci-cinza-escuro: #333333;
    --ci-cinza-medio: #666666;
    --ci-cinza-claro: #cccccc;
    --ci-branco: #ffffff;
    --ci-off-white: #f8f8f8;
    
    /* TIPOGRAFIA */
    --ci-font-heading: 'Playfair Display', Georgia, serif;
    --ci-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* TAMANHOS DE FONTE */
    --ci-text-xs: 0.75rem;    /* 12px */
    --ci-text-sm: 0.875rem;   /* 14px */
    --ci-text-base: 1rem;     /* 16px */
    --ci-text-lg: 1.125rem;   /* 18px */
    --ci-text-xl: 1.25rem;    /* 20px */
    --ci-text-2xl: 1.5rem;    /* 24px */
    --ci-text-3xl: 1.875rem;  /* 30px */
    --ci-text-4xl: 2.25rem;   /* 36px */
    
    /* ESPAÇAMENTOS */
    --ci-spacing-xs: 0.5rem;
    --ci-spacing-sm: 1rem;
    --ci-spacing-md: 1.5rem;
    --ci-spacing-lg: 2rem;
    --ci-spacing-xl: 3rem;
    
    /* BORDAS */
    --ci-radius-sm: 4px;
    --ci-radius-md: 8px;
    --ci-radius-lg: 12px;
    --ci-radius-xl: 16px;
    
    /* SOMBRAS */
    --ci-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --ci-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --ci-shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
    
    /* TRANSIÇÕES */
    --ci-transition: all 0.3s ease;
}

/**
 * ============================================================
 * 2. RESET E BASE
 * ============================================================
 */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--ci-font-body);
    font-size: var(--ci-text-base);
    line-height: 1.6;
    color: var(--ci-preto);
    background-color: var(--ci-branco);
    margin: 0;
    padding: 0;
}

/**
 * ============================================================
 * 3. TIPOGRAFIA
 * ============================================================
 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ci-font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: var(--ci-spacing-sm);
    color: var(--ci-preto);
}

h1 { font-size: var(--ci-text-4xl); }
h2 { font-size: var(--ci-text-3xl); }
h3 { font-size: var(--ci-text-2xl); }
h4 { font-size: var(--ci-text-xl); }
h5 { font-size: var(--ci-text-lg); }
h6 { font-size: var(--ci-text-base); }

p {
    margin-top: 0;
    margin-bottom: var(--ci-spacing-sm);
}

a {
    color: var(--ci-laranja);
    text-decoration: none;
    transition: var(--ci-transition);
}

a:hover {
    color: var(--ci-laranja-escuro);
    text-decoration: underline;
}

/**
 * ============================================================
 * 4. BOTÕES
 * ============================================================
 */
.ci-button,
.ci-btn {
    display: inline-block;
    padding: 12px 24px;
    font-family: var(--ci-font-body);
    font-size: var(--ci-text-base);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--ci-radius-md);
    cursor: pointer;
    transition: var(--ci-transition);
    box-shadow: var(--ci-shadow-sm);
}

/* Botão Primário (Laranja) */
.ci-button-primary,
.ci-btn-primary {
    background-color: var(--ci-laranja);
    color: var(--ci-branco);
}

.ci-button-primary:hover,
.ci-btn-primary:hover {
    background-color: var(--ci-laranja-escuro);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--ci-shadow-md);
}

/* Botão Secundário (Verde) */
.ci-button-secondary,
.ci-btn-secondary {
    background-color: var(--ci-verde);
    color: var(--ci-branco);
}

.ci-button-secondary:hover,
.ci-btn-secondary:hover {
    background-color: var(--ci-verde-escuro);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--ci-shadow-md);
}

/* Botão Outline */
.ci-button-outline,
.ci-btn-outline {
    background-color: transparent;
    color: var(--ci-laranja);
    border: 2px solid var(--ci-laranja);
}

.ci-button-outline:hover,
.ci-btn-outline:hover {
    background-color: var(--ci-laranja);
    color: var(--ci-branco);
    text-decoration: none;
}

/**
 * ============================================================
 * 5. BOTÃO MODO COZINHA (Destaque!)
 * ============================================================
 */
.ci-cooking-mode-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: var(--ci-text-lg);
    font-weight: 600;
    background: linear-gradient(135deg, var(--ci-laranja) 0%, var(--ci-laranja-escuro) 100%);
    color: var(--ci-branco);
    border: none;
    border-radius: var(--ci-radius-lg);
    cursor: pointer;
    box-shadow: var(--ci-shadow-lg);
    transition: var(--ci-transition);
    margin: var(--ci-spacing-lg) 0;
}

.ci-cooking-mode-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(198, 93, 59, 0.4);
    text-decoration: none;
}

.ci-cooking-mode-button:active {
    transform: translateY(-1px);
}

/* Ícone do botão */
.ci-cooking-mode-button::before {
    content: '🍳';
    font-size: 1.5em;
}

/**
 * ============================================================
 * 6. CARDS DE RECEITA
 * ============================================================
 */
.ci-recipe-card {
    background: var(--ci-branco);
    border-radius: var(--ci-radius-lg);
    overflow: hidden;
    box-shadow: var(--ci-shadow-md);
    transition: var(--ci-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ci-recipe-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ci-shadow-lg);
}

.ci-recipe-card-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.ci-recipe-card-content {
    padding: var(--ci-spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ci-recipe-card-title {
    font-size: var(--ci-text-xl);
    margin-bottom: var(--ci-spacing-xs);
    color: var(--ci-preto);
}

.ci-recipe-card-title a {
    color: inherit;
    text-decoration: none;
}

.ci-recipe-card-title a:hover {
    color: var(--ci-laranja);
}

.ci-recipe-card-excerpt {
    font-size: var(--ci-text-sm);
    color: var(--ci-cinza-medio);
    margin-bottom: var(--ci-spacing-sm);
    flex-grow: 1;
}

.ci-recipe-card-meta {
    display: flex;
    gap: var(--ci-spacing-sm);
    font-size: var(--ci-text-sm);
    color: var(--ci-cinza-medio);
    padding-top: var(--ci-spacing-sm);
    border-top: 1px solid var(--ci-cinza-claro);
}

.ci-recipe-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/**
 * ============================================================
 * 7. RESPONSIVIDADE MOBILE
 * ============================================================
 */

/* Tablet */
@media (max-width: 768px) {
    :root {
        --ci-text-4xl: 1.875rem;  /* 30px */
        --ci-text-3xl: 1.5rem;    /* 24px */
    }
    
    .ci-cooking-mode-button {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        --ci-text-4xl: 1.5rem;    /* 24px */
        --ci-text-3xl: 1.25rem;   /* 20px */
        --ci-spacing-lg: 1.5rem;
        --ci-spacing-xl: 2rem;
    }
    
    body {
        font-size: var(--ci-text-sm);
    }
    
    .ci-button,
    .ci-btn {
        width: 100%;
        text-align: center;
    }
}

/**
 * ============================================================
 * FIM DO ARQUIVO
 * ============================================================
 */