/*
DOCUMENTAÇÃO DO ARQUIVO: css/components/header.css
Aparência principal do cabeçalho fixado no topo durante a rolagem. Inclui logomarca, menu horizontal, barra informativa, WhatsApp e filtros do catálogo.
*/
/**
 * ==========================================================
 * Projeto.....: Cor & Papel
 * Arquivo.....: header.css
 * Versão......: 0.1.0
 * ----------------------------------------------------------
 * Descrição:
 * Estilos do cabeçalho principal do site.
 * ==========================================================
 */

/* ==========================================================
   HEADER
========================================================== */

/* Aplica as declarações abaixo a #header. */
#header{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:100%;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FFEEF3 !important;

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:sticky;

    /* Distância da borda superior na referência de posicionamento. */
    top:0;

    /* Ordem de sobreposição dentro do contexto de empilhamento. */
    z-index:1000;

    /* Sombra externa: deslocamentos, desfoque e cor criam a sensação de profundidade. */
    box-shadow:0 4px 15px rgba(0,0,0,.08);

}
/* ==========================================================
   CONTAINER
========================================================== */

/* Aplica as declarações abaixo a #header .container. */
#header .container{

    /* Limite máximo de largura; 100% evita ultrapassar a largura disponível. */
    max-width:1200px;

    /* Espaço externo; com quatro valores, a ordem é cima, direita, baixo e esquerda; auto pode distribuir o espaço disponível. */
    margin:auto;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:8px 20px;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content:space-between;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:50px;

}

/* ==========================================================
   LOGO
========================================================== */

/* Aplica as declarações abaixo a .logo img. */
.logo img{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:150px;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:block;

}


/* ==========================================================
   LOGO + ILUSTRAÇÃO
========================================================== */

/* Aplica as declarações abaixo a .logo-area. */
.logo-area{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:18px;

}

/* Aplica as declarações abaixo a .logo-ilustracao. */
.logo-ilustracao{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:70px;

    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:auto;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:block;

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:.30s;

}

/* Aplica as declarações abaixo a .logo-ilustracao:hover. :hover corresponde ao ponteiro sobre o elemento. */
.logo-ilustracao:hover{

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:rotate(-6deg) scale(1.08);

}


/* ==========================================================
   MENU
========================================================== */

/* Aplica as declarações abaixo a .main-menu ul. */
.main-menu ul{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:40px;

}

/* Aplica as declarações abaixo a .main-menu a. */
.main-menu a{

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#444;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:16px;

    /* Peso das letras; números maiores produzem traços mais fortes quando a fonte oferece esse peso. */
    font-weight:600;

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:.30s;

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:relative;

}

/* Linha animada */

/* Aplica as declarações abaixo a .main-menu a::after. O pseudoelemento desenha conteúdo adicional sem uma tag própria no HTML. */
.main-menu a::after{

    /* Conteúdo gerado por um pseudoelemento, como a linha decorativa dos links. */
    content:"";

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:absolute;

    /* Distância da borda esquerda na referência de posicionamento. */
    left:0;

    /* Distância da borda inferior na referência de posicionamento. */
    bottom:-6px;

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:0;

    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:3px;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:var(--color-primary);

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:.30s;

}

/* Aplica as declarações abaixo a .main-menu a:hover. :hover corresponde ao ponteiro sobre o elemento. */
.main-menu a:hover{

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:var(--color-primary);

}

/* Aplica as declarações abaixo a .main-menu a:hover::after. :hover corresponde ao ponteiro sobre o elemento. O pseudoelemento desenha conteúdo adicional sem uma tag própria no HTML. */
.main-menu a:hover::after{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:100%;

}

/* ==========================================================
   BOTÃO WHATSAPP
========================================================== */

/* Aplica as declarações abaixo a .btn-whatsapp. */
.btn-whatsapp{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content:center;

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:8px;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:12px 28px;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#25D366;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#FFF;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:50px;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:15px;

    /* Peso das letras; números maiores produzem traços mais fortes quando a fonte oferece esse peso. */
    font-weight:600;

    /* Controla enfeites do texto, como o sublinhado dos links. */
    text-decoration:none;

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:.30s;

}

/* Aplica as declarações abaixo a .btn-whatsapp:hover. :hover corresponde ao ponteiro sobre o elemento. */
.btn-whatsapp:hover{

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translateY(-2px);

    /* Sombra externa: deslocamentos, desfoque e cor criam a sensação de profundidade. */
    box-shadow:0 8px 18px rgba(0,0,0,.15);

}

/* ==========================================================
   BARRA SUPERIOR
========================================================== */

/* Aplica as declarações abaixo a .header-top. */
.header-top{

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FFFFFF;

   /* height:38px;*/

    /* Borda apenas no lado indicado no nome da propriedade. */
    border-bottom:1px solid #F4E3E8;

}

/* Aplica as declarações abaixo a .header-top .container. */
.header-top .container{

    /* Limite máximo de largura; 100% evita ultrapassar a largura disponível. */
    max-width:1200px;

    /* Espaço externo; com quatro valores, a ordem é cima, direita, baixo e esquerda; auto pode distribuir o espaço disponível. */
    margin:auto;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:8px 20px;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Distribui os itens no eixo principal do flex ou dentro da grade. */
    justify-content:flex-end;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:relative;

}
/* Aplica as declarações abaixo a .header-top-slogan. */
.header-top-slogan{

    /* Referência de posicionamento: relative ancora filhos, absolute sai do fluxo, fixed usa a janela e sticky acompanha a rolagem até o limite do pai. */
    position:absolute;

    /* Distância da borda esquerda na referência de posicionamento. */
    left:50%;

    /* Distância da borda superior na referência de posicionamento. */
    top:50%;

    /* Transformação visual: translate desloca, scale amplia e rotate gira sem reorganizar os demais elementos. */
    transform:translate(-50%, -50%);

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:6px;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#7A3D53;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:14px;

    /* Peso das letras; números maiores produzem traços mais fortes quando a fonte oferece esse peso. */
    font-weight:600;

    /* Tratamento dos espaços e quebras de linha; nowrap mantém o texto em uma linha. */
    white-space:nowrap;

    /* Altura das linhas; valores sem unidade multiplicam o tamanho da fonte. */
    line-height:1;

}

/* Aplica as declarações abaixo a .header-top-info. */
.header-top-info{

    /* Espaço externo na direção esquerda. */
    margin-left:auto;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:28px;

}

/* Aplica as declarações abaixo a .header-top-info span. */
.header-top-info span{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Alinha os itens no eixo transversal do flex ou no eixo de bloco da grade. */
    align-items:center;

    /* Espaçamento entre itens do flex ou entre linhas e colunas da grade. */
    gap:6px;

}

/* Aplica as declarações abaixo a .icon-whatsapp. */
.icon-whatsapp{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:18px;

    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:18px;

    /* Quanto o item pode encolher; 0 evita redução por falta de espaço no flex. */
    flex-shrink:0;

}

/* ==========================================================
   SELETOR DE CATEGORIAS
========================================================== */

/* Aplica as declarações abaixo a .categoria-selector. */
.categoria-selector{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:flex;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FFF;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:40px;

    /* Tratamento do conteúdo que ultrapassa os limites; hidden recorta a parte excedente. */
    overflow:hidden;

    /* Espessura, estilo e cor da borda; none remove a borda. */
    border:2px solid #F7C7D9;

}

/* Aplica as declarações abaixo a .categoria-btn. */
.categoria-btn{

    /* Espessura, estilo e cor da borda; none remove a borda. */
    border:none;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:transparent;

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:12px 26px;

    /* Formato do ponteiro; pointer indica ação e zoom-in indica possibilidade de ampliar. */
    cursor:pointer;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:15px;

    /* Peso das letras; números maiores produzem traços mais fortes quando a fonte oferece esse peso. */
    font-weight:600;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#777;

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:.30s;

}

/* Aplica as declarações abaixo a .categoria-btn:hover. :hover corresponde ao ponteiro sobre o elemento. */
.categoria-btn:hover{

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#FFF6F9;

}

/* Aplica as declarações abaixo a .categoria-btn.active. A classe active indica a categoria selecionada. */
.categoria-btn.active{

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#F56A9A;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#FFF;

}

/* ==========================================================
   MENU MOBILE
========================================================== */

/* Aplica as declarações abaixo a .menu-toggle. */
.menu-toggle{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:none;

    /* Espessura, estilo e cor da borda; none remove a borda. */
    border:none;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:none;

    /* Tamanho das letras; rem é relativo à fonte do elemento raiz. */
    font-size:30px;

    /* Formato do ponteiro; pointer indica ação e zoom-in indica possibilidade de ampliar. */
    cursor:pointer;

    /* Cor do texto e referência para desenhos que usam currentColor. */
    color:#7A3D53;

}

/* Condição de aplicação: (max-width:768px). min-width e max-width delimitam a largura em pixels; hover:none identifica dispositivos sem sobrevoo. */
@media (max-width:768px){

   
    /* Aplica as declarações abaixo a .main-menu. */
.main-menu{

        /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
        display:none;

    }

    /* Aplica as declarações abaixo a .main-menu.active. A classe active indica a categoria selecionada. */
.main-menu.active{

        /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
        display:block;

    }

}

/* Aplica as declarações abaixo a .menu-toggle span. */
.menu-toggle span{

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:block;

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:26px;

    /* Altura desejada; auto acompanha o conteúdo ou a proporção natural da imagem. */
    height:3px;

    /* Fundo do elemento, que pode ser uma cor, imagem ou gradiente. */
    background:#7A3D53;

    /* Espaço externo; com quatro valores, a ordem é cima, direita, baixo e esquerda; auto pode distribuir o espaço disponível. */
    margin:4px 0;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:3px;

    /* Propriedades e duração da mudança animada; s representa segundos. */
    transition:.3s;

}