/*
Theme Name: Carta Terapia
Theme URI: https://cartaterapia.com.br
Description: Tema da loja Carta Terapia — child theme do Storefront (tema padrão do WooCommerce), com a identidade visual oficial da marca (ver Logotipo/carta-terapia-brand-kit/brand-guide.md).
Author: André Ciaramello
Template: storefront
Version: 1.0.0
Text Domain: carta-terapia
*/

/* ==========================================================================
   Paleta oficial (brand-guide.md) — mesmos valores usados no logotipo.
   ========================================================================== */
:root {
    --ct-ameixa: #6B2255;
    --ct-ameixa-escura: #45123A;
    --ct-vinho: #2A0D25;
    --ct-vinho-escuro: #180712;
    --ct-dourado: #D9A93B;
    --ct-dourado-claro: #F0CE7A;
    --ct-dourado-escuro: #B5812A;
    --ct-branco: #FFFFFF;
}

/* ==========================================================================
   Tipografia — CARTA em Poppins Bold, "terapia"/assinaturas em Sacramento
   (carregadas via functions.php, wp_enqueue_style). Corpo do site em
   Poppins normal pra manter a família única.
   ========================================================================== */
body,
button,
input,
select,
textarea {
    font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

/* Uso pontual da fonte script — aplicar a classe .ct-assinatura em textos
   de destaque (ex: frase de efeito, categoria em destaque), não no corpo
   inteiro do texto (Sacramento não é feita pra blocos longos de leitura). */
.ct-assinatura {
    font-family: 'Sacramento', cursive;
    font-weight: 400;
}

/* ==========================================================================
   Cores — cabeçalho, rodapé e elementos de destaque em degradê
   ameixa->vinho (mesmo fundo de marca dos posts/stories).
   ========================================================================== */
.site-header,
.site-footer {
    background: linear-gradient(135deg, var(--ct-ameixa-escura) 0%, var(--ct-vinho-escuro) 100%);
    color: var(--ct-branco);
}

.site-header a,
.site-footer a,
.site-header .site-title a {
    color: var(--ct-branco);
}

.site-header .woocommerce-active .site-search .search-toggle,
.site-header .handheld-navigation .toggle-icon {
    color: var(--ct-branco);
}

/* Achado ao vivo 2026-08-10: o Storefront tem seletores mais específicos
   pro texto do menu (desktop E mobile/handheld) que sobrepõem a regra
   genérica acima — texto do menu ficava quase invisível (mesma cor do
   fundo escuro). Reforça com seletores tão ou mais específicos que os
   do Storefront, cobrindo os dois estados (padrão e :hover/:focus). */
.site-header .main-navigation ul li a,
.site-header .main-navigation ul li a:visited,
.site-header .handheld-navigation .main-navigation ul li a,
.site-header .main-navigation .nav-menu li a,
.site-header #site-navigation a {
    color: var(--ct-branco);
}

.site-header .main-navigation ul li a:hover,
.site-header .main-navigation ul li a:focus,
.site-header .main-navigation ul li.current-menu-item > a {
    color: var(--ct-dourado-claro);
}

/* Submenu (dropdown) do Storefront normalmente abre com fundo branco —
   nesse caso o texto branco herdado ficaria invisível ao contrário; força
   texto escuro só dentro do submenu, que tem fundo claro próprio. */
.site-header .main-navigation ul ul,
.site-header .main-navigation ul ul li a {
    background: var(--ct-branco);
    color: var(--ct-vinho);
}

/* Botões primários (Adicionar ao carrinho, Finalizar compra etc.) —
   dourado sobre fundo escuro, mesma dupla de cores do logotipo. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button.alt,
button.alt {
    background-color: var(--ct-dourado);
    border-color: var(--ct-dourado-escuro);
    color: var(--ct-vinho);
    font-weight: 700;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
a.button.alt:hover,
button.alt:hover {
    background-color: var(--ct-dourado-escuro);
    color: var(--ct-branco);
}

/* Preço, badge "Novo"/"Promoção" — dourado, igual brilho/estrelas do
   logotipo. Pedido da Flávia (10/08): dourado bem destacado, roxo mais
   escuro só de fundo. */
.woocommerce span.onsale,
.price ins,
.price > .woocommerce-Price-amount,
.woocommerce ul.products li.product .price {
    color: var(--ct-dourado-escuro);
    font-weight: 700;
}

.woocommerce span.onsale {
    background-color: var(--ct-dourado);
    color: var(--ct-vinho);
}

/* ==========================================================================
   Seções da Home (layout inspirado no Empório & Cia — ver APONTAMENTO.md):
   banner de destaque, "Mais Vendidos", "Destaques". Usa os shortcodes
   nativos do WooCommerce ([sale_products]/[best_selling_products]) dentro
   do editor da página inicial — essas classes só estilizam o resultado.
   ========================================================================== */
.ct-home-banner {
    background: linear-gradient(135deg, var(--ct-ameixa-escura) 0%, var(--ct-vinho-escuro) 100%);
    color: var(--ct-branco);
    text-align: center;
    padding: 64px 24px;
    border-radius: 8px;
    margin-bottom: 40px;
}

.ct-home-banner h1 {
    color: var(--ct-dourado-claro);
    font-size: clamp(28px, 5vw, 44px);
    margin: 0 0 12px;
}

.ct-home-banner p {
    max-width: 52ch;
    margin: 0 auto;
    opacity: .92;
}

.ct-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 48px 0 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ct-ameixa);
}

.ct-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ct-dourado);
    opacity: .5;
}

/* Categorias por finalidade espiritual — cartão com borda dourada fina,
   eco do contorno das cartas do logotipo. */
.ct-categoria-card {
    border: 1px solid var(--ct-dourado);
    border-radius: 8px;
    padding: 18px;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

.ct-categoria-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(107, 34, 85, .18);
}