/*
Theme Name: ClickUS
Template: news-magazine-x
Version: 1.2
Description: Child theme do News Magazine X aplicando a identidade visual do ClickUS (Ink, Azul ClickUS, Azul claro, Papel; Space Grotesk + Archivo).
Author: ClickUS
*/

:root{
  --clickus-ink:#11151C;
  --clickus-blue:#2F6BFF;
  --clickus-blue-light:#5B8BFF;
  --clickus-paper:#FBFBFD;
  --clickus-card:#171B24;
  --clickus-border:#2A2F3A;
  --clickus-text-muted:#9AA0AC;
}

body,
input,
textarea,
select,
button{
  font-family:'Archivo', sans-serif;
  color: var(--clickus-paper);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.widget-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight: 600;
}

body,
.site,
.site-content,
.entry-content{
  background-color: var(--clickus-ink);
  color: var(--clickus-paper);
}

a{
  color: var(--clickus-blue-light);
}
a:hover{
  color: var(--clickus-blue);
}

.site-header,
.main-navigation{
  background-color: var(--clickus-ink);
  border-bottom: 1px solid var(--clickus-border);
}

.site-title a,
.site-title{
  color: var(--clickus-paper) !important;
  font-weight: 700;
}

.main-navigation a{
  color: var(--clickus-text-muted);
}

/* Reforço de contraste: qualquer texto/ícone dentro do header ou da navegação
   deve ficar claro sobre o fundo escuro, não importa a classe exata do tema. */
header,
header a,
header span,
header li,
.site-header,
.site-header a,
.site-header span,
.site-header li,
nav,
nav a,
nav span,
nav li,
.main-navigation,
.main-navigation a,
.main-navigation span,
.main-navigation li,
.menu-item a,
.wp-block-navigation-item a,
.wp-block-navigation-item__label{
  color: var(--clickus-paper) !important;
}

/* Hover mais sutil, usando o azul claro da marca */
header a:hover,
.site-header a:hover,
nav a:hover,
.main-navigation a:hover,
.menu-item a:hover,
.wp-block-navigation-item a:hover{
  color: var(--clickus-blue-light) !important;
}

/* Ícones SVG (setas de dropdown, redes sociais) também precisam ficar claros */
header svg,
.site-header svg,
nav svg,
.main-navigation svg{
  fill: var(--clickus-paper) !important;
  color: var(--clickus-paper) !important;
}

/* Submenus (dropdowns do menu principal) precisam de fundo e texto próprios,
   já que o tema assume por padrão um fundo claro nesses painéis. */
.sub-menu,
ul.sub-menu,
.children,
.wp-block-navigation__submenu-container{
  background-color: var(--clickus-card) !important;
  border: 1px solid var(--clickus-border) !important;
  box-shadow: none !important;
}

.sub-menu li,
ul.sub-menu li,
.children li,
.wp-block-navigation__submenu-container li{
  background-color: transparent !important;
}

.sub-menu a,
ul.sub-menu a,
.children a,
.wp-block-navigation__submenu-container a,
.wp-block-navigation-submenu__toggle{
  color: var(--clickus-paper) !important;
}

.sub-menu a:hover,
ul.sub-menu a:hover,
.children a:hover,
.wp-block-navigation__submenu-container a:hover{
  color: var(--clickus-blue-light) !important;
  background-color: rgba(91, 139, 255, 0.08) !important;
}

button,
.button,
input[type="submit"],
.wp-block-button__link{
  background-color: var(--clickus-blue);
  color: var(--clickus-paper);
  border: none;
  border-radius: 8px;
  font-weight: 500;
}
button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover{
  background-color: var(--clickus-blue-light);
}

.post,
.hentry,
article,
.widget,
.card{
  background-color: var(--clickus-card);
  border: 1px solid var(--clickus-border);
  border-radius: 10px;
}

.site-footer{
  background-color: var(--clickus-ink);
  border-top: 1px solid var(--clickus-border);
  color: var(--clickus-text-muted);
}

.category, .cat-links, .entry-category{
  color: var(--clickus-blue-light) !important;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
}