/* ============================================================
   Não Sei Cozinhar — child theme styles
   Paleta: roxo/marinho escuro + neon (ciano/rosa), a mesma
   linguagem visual do logo do site.
   ============================================================ */

:root {
    --nsc-bg:        #1B1330;  /* fundo principal do site */
    --nsc-bg-soft:   #251A42;  /* secções alternadas / hero (tom 1) */
    --nsc-bg-soft-2: #4A1D3E;  /* hero (tom 2, para gradiente) */
    --nsc-card:      #2A2050;  /* fundo dos cards */
    --nsc-card-border: rgba(255,255,255,.08);

    --nsc-text:      #F5F0FF;
    --nsc-text-soft: #B7A8DA;

    --nsc-primary:      #FF3EA5;  /* rosa neon - CTA, links, destaque */
    --nsc-primary-dark: #D6187F;
    --nsc-accent:       #4DEEEA;  /* ciano neon - detalhes, títulos secundários */

    /* Cores por nível de dificuldade — ligeiramente mais claras para contraste no escuro */
    --nsc-easy:   #8FD97F;  /* facil-facilima */
    --nsc-medium: #FFC15E;  /* meio-media */
    --nsc-hard:   #FF6B6B;  /* quase-profissional */

    /* Aliases usados nas heros de categoria/single/search (mesmo tom da hero da home) */
    --nsc-hero-bg-1: var(--nsc-bg-soft);
    --nsc-hero-bg-2: var(--nsc-bg-soft-2);

    --nsc-radius: 14px;
    --nsc-shadow: 0 4px 20px rgba(0,0,0,.35);
    --nsc-shadow-hover: 0 10px 28px rgba(255,62,165,.28);
    --nsc-font: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Reset local para não sofrer com os estilos globais do Yummy Bites */
#nsc-app, #nsc-app * {
    box-sizing: border-box;
}

#nsc-app {
    font-family: var(--nsc-font);
    color: var(--nsc-text);
    background: var(--nsc-bg);
}

#nsc-app a {
    color: var(--nsc-primary);
    text-decoration: none;
}
#nsc-app a:hover { color: var(--nsc-accent); text-decoration: underline; }

#nsc-app button,
#nsc-app input,
#nsc-app select {
    all: unset;
    box-sizing: border-box !important;
    font-family: var(--nsc-font);
    min-width: 0;
}

/* O tema pai (Yummy Bites) define uma fonte serifada própria para h1-h6
   com um selector mais específico que o nosso — forçamos aqui. */
#nsc-app h1,
#nsc-app h2,
#nsc-app h3,
#nsc-app h4,
#nsc-app h5,
#nsc-app h6 {
    font-family: var(--nsc-font) !important;
    color: var(--nsc-text);
}

.nsc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(120deg, var(--nsc-primary), var(--nsc-accent)) !important;
    color: var(--nsc-bg) !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.nsc-btn:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none !important; }

.nsc-btn-outline {
    background: transparent !important;
    color: var(--nsc-accent) !important;
    border: 2px solid var(--nsc-accent) !important;
}

.nsc-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Badge de dificuldade — reutilizado em card, single, category */
.nsc-diff-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--nsc-bg);
}
.nsc-diff-badge.facil-facilima     { background: var(--nsc-easy); }
.nsc-diff-badge.meio-media         { background: var(--nsc-medium); }
.nsc-diff-badge.quase-profissional { background: var(--nsc-hard); }

/* Card de receita — usado na home, category, search */
.nsc-card {
    background: var(--nsc-card);
    border: 1px solid var(--nsc-card-border);
    border-radius: var(--nsc-radius);
    box-shadow: var(--nsc-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.nsc-card:hover { box-shadow: var(--nsc-shadow-hover); transform: translateY(-2px); border-color: var(--nsc-primary); }
.nsc-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.nsc-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nsc-card-title { font-size: 1.05rem; font-weight: 800; line-height: 1.3; color: var(--nsc-text); }
.nsc-card-meta { display: flex; gap: 12px; font-size: .82rem; color: var(--nsc-text-soft); align-items: center; }
.nsc-emoji { display: inline-block; vertical-align: -3px; margin-right: 3px; }

.nsc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
}

/* Campo de busca da hero — partilhado entre front-page.php e search.php */
.nsc-hero-search { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.nsc-hero-search input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    background: rgba(255,255,255,.95);
    color: var(--nsc-bg);
    border-radius: 999px !important;
    padding: 12px 18px !important;
    box-shadow: var(--nsc-shadow);
}
.nsc-hero-search .nsc-btn { flex: 0 0 auto; white-space: nowrap; }

/* Formulário de newsletter (fallback sem MailPoet) — usado na home e no footer */
.nsc-newsletter-fallback { display: flex; gap: 8px; max-width: 420px; margin: 18px auto 0; }
.nsc-newsletter-fallback input { flex: 1; background: #fff; border-radius: 999px !important; padding: 12px 16px !important; color: var(--nsc-bg); }
.nsc-newsletter-fallback button { background: var(--nsc-bg) !important; color: #fff !important; padding: 12px 20px !important; border-radius: 999px !important; font-weight: 700; cursor: pointer; }

@media (max-width: 640px) {
    .nsc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .nsc-card-title { font-size: .92rem; }
}