/*
Theme Name: OpsRoom
Theme URI: https://opsroom.com.br
Author: Victor Santos
Description: Tema de blocos do OpsRoom — mesma identidade dos videos do canal: fundo #0d1117, laranja #f0883e e tipografia de leitura longa. Escuro por natureza, porque e onde o publico do canal passa o dia.
Version: 1.0.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: opsroom
Tags: blog, one-column, block-patterns, full-site-editing, custom-colors
*/

/* O theme.json resolve cor, tipografia e espacamento. Aqui fica so o que ele
   nao alcanca: estados de interacao, detalhes de composicao e o brilho do topo. */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Brilho laranja no topo, como o fundo dos slides da serie. Fixo e atras de
   tudo — nao acompanha o scroll, entao some conforme a pessoa le. */
body::before {
  content: "";
  position: fixed;
  top: -30vh;
  left: 50%;
  width: 90vw;
  max-width: 1100px;
  height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(240, 136, 62, 0.16), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ---------------------------------------------------------------- cabecalho */

.opsroom-marca {
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.opsroom-marca:hover { color: var(--wp--preset--color--texto); }

/* O ponto laranja depois do nome: assinatura barata de fazer e que aparece
   ate no favicon mental de quem visita duas vezes. */
.opsroom-marca::after {
  content: "";
  display: inline-block;
  width: 0.36em;
  height: 0.36em;
  margin-left: 0.18em;
  border-radius: 50%;
  background: var(--wp--preset--color--laranja);
  vertical-align: baseline;
}

.opsroom-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  flex-wrap: wrap;
}

.opsroom-nav a {
  text-decoration: none;
  color: var(--wp--preset--color--mudo);
  font-size: var(--wp--preset--font-size--pequeno);
}

.opsroom-nav a:hover,
.opsroom-nav a:focus-visible { color: var(--wp--preset--color--texto); }

/* Icone + rotulo: o icone herda a cor do link, entao acende junto no hover. */
.opsroom-social {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.opsroom-nav svg,
.opsroom-redes svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* -------------------------------------------------------------- submenu */

/* details/summary: abre por toque, clique e teclado sem JavaScript. Menu que
   depende de :hover nao existe no celular. */
.opsroom-menu { position: relative; }

.opsroom-menu > summary {
  list-style: none;
  cursor: pointer;
  color: var(--wp--preset--color--mudo);
  font-size: var(--wp--preset--font-size--pequeno);
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.opsroom-menu > summary::-webkit-details-marker { display: none; }

.opsroom-menu > summary::after {
  content: "";
  width: 0.34em;
  height: 0.34em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.06em, -0.06em);
  transition: transform 0.15s ease;
}

.opsroom-menu[open] > summary::after { transform: rotate(-135deg) translate(-0.1em, -0.1em); }

.opsroom-menu > summary:hover,
.opsroom-menu[open] > summary { color: var(--wp--preset--color--texto); }

.opsroom-menu ul {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.7rem);
  left: -0.9rem;
  min-width: 12rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--borda);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.opsroom-menu li { margin: 0; }

.opsroom-menu ul a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
}

.opsroom-menu ul a:hover { background: rgba(240, 136, 62, 0.12); }

/* No celular o dropdown flutuante fica apertado contra a borda: vira lista
   normal, empurrando o conteudo para baixo. */
@media (max-width: 600px) {
  .opsroom-nav { gap: 1rem; }
  .opsroom-menu { width: 100%; }
  .opsroom-menu ul {
    position: static;
    min-width: 0;
    margin-top: 0.5rem;
  }
}

/* ----------------------------------------------------- redes no rodape */

.opsroom-redes {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.opsroom-redes a {
  color: var(--wp--preset--color--mudo);
  display: inline-flex;
  line-height: 0;
}

.opsroom-redes a:hover,
.opsroom-redes a:focus-visible { color: var(--wp--preset--color--laranja); }

.opsroom-redes svg { width: 1.15rem; height: 1.15rem; }

/* ---------------------------------------------------------------- listagem */

/* Sem imagem destacada nos posts, o card seria uma caixa vazia com texto.
   Entao a lista e tipografica: o titulo carrega o peso e a linha de cima
   funciona como etiqueta. */
.opsroom-item {
  border-top: 1px solid var(--wp--preset--color--borda);
  padding-top: var(--wp--preset--spacing--30);
  transition: border-color 0.2s ease;
}

.opsroom-item:hover { border-top-color: var(--wp--preset--color--laranja); }

.opsroom-item .wp-block-post-title a {
  text-decoration: none;
  color: var(--wp--preset--color--texto);
}

.opsroom-item .wp-block-post-title a:hover { color: var(--wp--preset--color--laranja); }

.opsroom-etiqueta {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laranja);
}

.opsroom-etiqueta a { text-decoration: none; color: inherit; }

/* ---------------------------------------------------------------- artigo */

/* Medida de leitura: linha longa demais cansa em texto tecnico com codigo no
   meio. 44rem no theme.json ja segura, isto e o ajuste fino do ritmo. */
.opsroom-artigo p { margin-block: 1.15em; }

.opsroom-artigo h2 { margin-top: 2.4em; }

.opsroom-artigo h3 { margin-top: 1.8em; color: var(--wp--preset--color--laranja); }

.opsroom-artigo :where(code):not(pre code) {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.88em;
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--borda);
  border-radius: 4px;
  padding: 0.12em 0.38em;
}

.opsroom-artigo .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}

.opsroom-artigo .wp-block-table :where(th, td) {
  border: 1px solid var(--wp--preset--color--borda);
  padding: 0.6rem 0.8rem;
  text-align: left;
}

.opsroom-artigo .wp-block-table th {
  background: var(--wp--preset--color--superficie);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mudo);
}

/* Tabela larga rola dentro do proprio bloco. Sem isto, a pagina inteira ganha
   scroll horizontal no celular — que e o defeito mais comum de blog tecnico. */
.opsroom-artigo .wp-block-table { overflow-x: auto; }

.opsroom-artigo .wp-block-embed iframe {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--wp--preset--color--borda);
}

/* ---------------------------------------------------------------- rodape */

.opsroom-rodape a { text-decoration: none; }
.opsroom-rodape a:hover { text-decoration: underline; }