/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* Declaração da Fonte (Vem logo após o cabeçalho de comentários) */
@font-face {
    font-family: 'Shooting Star';
    src: url('/user/themes/quark2/fonts/shooting-star/shooting-star.otf.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Aplicação nos Títulos */
.single-header h1,
.blog-header h1,
.p-name,
h1.p-name {
    font-family: 'Shooting Star', cursive, sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}

/* Mudar apenas as características da fonte usada no post quando aberto, excluindo o título */
article p {
  color: #000000;
}

/* Mudar apenas as características da fonte usada no card das publicações */
.card-body p {
  color: #000000;
}

/* Mudar apenas as características da fonte usada no cabeçalho */
.blog-page-header h1{
    font-family: 'Shooting Star', cursive, sans-serif !important;
    font-size: 7rem !important;
    font-weight: normal !important;
}

.blog-page-intro h1{
    font-family: 'Shooting Star', cursive, sans-serif !important;
    font-size: 7rem !important;
    font-weight: normal !important;
}







 

/* Aplica a imagem no body e no wrapper principal do tema */
body, 
#page-wrapper, 
#body-wrapper,
.bg-color-toggle {
  background-image: url('http://www.euamotricotar.com/user/themes/quark2/images/nevoa.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-color: transparent !important;
}

/* Remove as cores de fundo sólidas dos modos Claro e Escuro */
body.dark-mode #page-wrapper,
body.light-mode #page-wrapper,
.modular-row,
#header,
#footer {
  background-color: transparent !important;
  background: transparent !important;
}

/* Aplica um fundo levemente transparente nos cards/conteúdo para leitura */
.card, 
.blog-header,
#body-wrapper .container {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px;
  padding: 15px;
}

/* Ajuste do fundo dos cards quando o usuário estiver no modo escuro */
body.dark-mode .card,
body.dark-mode .blog-header,
body.dark-mode #body-wrapper .container {
  background-color: rgba(30, 30, 30, 0.85) !important;
  color: #fff !important;
}

/* Torna os contêineres e áreas de grid transparentes */
.container,
#body-wrapper,
#body-wrapper .container,
.blog-listing,
.blog-content-item,
.grid-config {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove as bordas e fundos brancos das laterais dos cartões de posts */
.card,
.card-header,
.card-body,
.card-footer {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* (OPCIONAL) Se o texto ficar difícil de ler sobre a imagem,
   adicione uma película suave levemente transparente APENAS no texto: */
.blog-content-item article,
.card-body {
  background-color: rgba(255, 255, 255, 0.85) !important; /* Fundo branco com 85% de opacidade */
  padding: 20px !important;
  border-radius: 8px !important;
}







/* Remove a borda inferior/linha de todos os títulos e elementos do blog */
h1, h2, h3,
.blog-header h1,
.content-item h1,
#body-wrapper h1,
.page-header h1 {
    border-bottom: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Caso a linha seja um elemento pseudo (::after) */
h1::after, h2::after, .blog-header h1::after {
    display: none !important;
    content: none !important;
}




/* Cor fixa dos títulos e links de títulos em estado normal */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: #333333 !important;
}

/* Cor do link do título especificamente ao passar o mouse (:hover e :focus) */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus,
a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6 {
    color: #111111 !important;
}






/* Oculta rigorosamente QUALQUER imagem ou SVG dentro do cabeçalho/logo */
.navbar-brand img,
.navbar-brand svg,
.navbar-brand picture,
.logo-custom,
.logo-custom img,
#header .logo img,
#header .logo svg,
a.navbar-brand img,
a.navbar-brand svg {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Zera pseudo-elementos anteriores que possam gerar duplicação */
.navbar-brand::before,
.navbar-brand::after,
#header .logo::before,
#header .logo::after,
a.navbar-brand::before {
    content: none !important;
    display: none !important;
}

/* Ajusta o link da logo para conter apenas o coração */
.navbar-brand,
a.navbar-brand,
#header .logo {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0 !important;
    text-decoration: none !important;
}

/* Insere APENAS o emoji de coração preto 🖤 como conteúdo do link */
.navbar-brand::after,
a.navbar-brand::after {
    content: "🖤" !important;
    display: inline-block !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Efeito suave ao passar o mouse */
.navbar-brand:hover::after,
a.navbar-brand:hover::after {
    transform: scale(1.15) !important;
    opacity: 0.8 !important;
}






/* Coração branco quando o tema escuro está ativo */
body.dark-mode .navbar-brand::after,
body.dark-mode a.navbar-brand::after,
body[data-theme="dark"] .navbar-brand::after,
body[data-theme="dark"] a.navbar-brand::after,
.dark .navbar-brand::after,
.dark a.navbar-brand::after {
    content: "🤍" !important;
    
    
    
    
    
    
/* Declaração da fonte local usando caminho relativo correto */
@font-face {
    font-family: 'Shooting Star';
    src: url('../fonts/shooting-star/shooting-star.otf.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Aplicação da fonte nos títulos do post e nos títulos H1 em geral */
.single-header h1,
.blog-header h1,
.p-name,
h1.p-name,
h1 {
    font-family: 'Shooting Star', cursive, sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
}