/*
Theme Name:   Storely Child
Theme URI:    https://obavix.com.br
Description:  Child theme para customizações da Obavix
Author:       Cleyton Mendes
Author URI:   https://obavix.com.br
Template:     storely
Version:      1.0.4
Text Domain:  storely-child
*/

/* Palette — baseada na logo (#0B03A4) */
:root {
    --bs-primary:        #0B03A4;
    --bs-primary-dark:   #08027B;
    --bs-primary-light:  #8e8bc7;
    --bs-primary-shadow: rgb(11 3 164 / 0.5);
    /* --bs-secondary:      #F2FE07;
    --bs-secondary-dark: #98a005; */
}

/* =========================================
   FIX: CLS Header Sticky
   ========================================= */

/**
 * Corrige o "pulo" ao scrollar causado pelo header sticky.
 *
 * Problema: .main-navigation muda para position:fixed (sai do fluxo),
 * mas o container pai (.navigation-middle) colapsa para altura 0,
 * fazendo o conteúdo abaixo "pular" para cima.
 *
 * Solução: Garantir que o container pai mantenha altura fixa
 * equivalente ao header, mesmo quando o filho ficar fixed.
 */

/* Desktop: Container do header mantém altura fixa */
.main-navigation-area {
    min-height: 110px; /* Altura aproximada do header desktop */
}

/* Mobile: Container mobile mantém altura fixa */
.main-mobile-nav {
    min-height: 100px; /* Altura aproximada do header mobile */
}

/* Remover animação fadeInDown que causa movimento brusco */
.is-sticky-menu {
    animation: none !important;
    -webkit-animation: none !important;
}

/* Transição suave quando header muda de posição */
.is-sticky-on {
    transition: all 0.3s ease;
}

.browse-section{
    position: relative;
    z-index: 10;
}

.woocommerce-demo-store header{
    top: 0;
}

.product-category-btn{
    background-color: var(--bs-primary)!important;
    color: var(--bs-white);
}

.product-category-btn:hover{
    background-color: var(--bs-primary-dark)!important;
}

.browse-section{
    margin-top: 0;
}

/* =========================================
   FIX: Cores dos Links do Menu Header
   ========================================= */

/**
 * Corrige links invisíveis do menu (branco sobre branco).
 *
 * Problema: Tema usa --bs-secondary (branco) para links normais,
 * mas o header também é branco → links invisíveis.
 *
 * Solução: Inverter as cores:
 * - Estado normal: Azul escuro (visível)
 * - Estado hover/active: Azul mais escuro (contraste)
 */

/* Desktop: Links do menu principal */
.main-navbar .main-menu > li.menu-item:not(.focus):not(.active):not(:hover) > a:not(:focus):not(:hover) {
    color: var(--bs-primary) !important; /* Azul escuro da logo */
}

.main-navbar .main-menu > li:hover > a,
.main-navbar .main-menu > li.focus > a,
.main-navbar .main-menu .menu-item.active > a {
    color: var(--bs-primary-dark) !important; /* Azul mais escuro no hover */
}

/* Mobile: Links do menu mobile */
.main-mobile-menu ul.main-menu > li a {
    color: var(--bs-primary) !important;
}

.main-mobile-menu ul.main-menu > li a:hover,
.main-mobile-menu ul.main-menu > li.focus a,
.main-mobile-menu ul.main-menu > li.active a {
    color: var(--bs-primary-dark) !important;
}

/* Submenu: Garantir que submenus também tenham boa legibilidade */
.main-navbar .main-menu .sub-menu li a {
    color: #333 !important; /* Cinza escuro para submenus */
}

.main-navbar .main-menu .sub-menu li a:hover {
    color: var(--bs-primary) !important;
}

.product-single .product-content{
    padding: 0 10px;
}

.product-single .product-content a{
    color: var(--bs-primary);
    font-size: 16px;
    text-decoration: none;
}

/* =========================================
   FIX: Páginas com colunas de segurança
   ========================================= */

#st-secondary-content{
    display: none;
}

#st-primary-content{
    width: 100% !important;
}