/*
Theme Name: Plantão Esportivo
Description: Tema personalizado do portal Plantão Esportivo (compatível com Elementor).
Version: 1.0.0
Text Domain: plantao-esportivo
*/

:root {
  --pe-verde: #66C938;
  --pe-azul: #0000C4;
  --pe-fundo: #F8F7F2;
  --pe-texto: #1a1a1a;
  --pe-branco: #ffffff;
  --pe-foco: #ffbf00;
  --pe-largura: 1200px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--pe-fundo);
  color: var(--pe-texto);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--pe-azul); }
a:focus, button:focus { outline: 3px solid var(--pe-foco); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
}
.skip-link:focus {
  left: 1rem; top: 1rem; background: var(--pe-branco); padding: .5rem 1rem; z-index: 100;
}

.container { max-width: var(--pe-largura); margin: 0 auto; padding: 0 1rem; }

/* Cabeçalho e menu */
.site-header {
  background: linear-gradient(to bottom, var(--pe-verde), var(--pe-azul));
  color: var(--pe-branco);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; padding-bottom: .75rem;
}
.site-title a { color: var(--pe-branco); text-decoration: none; font-weight: 700; font-size: 1.4rem; }

.menu-toggle {
  display: none; background: transparent; color: var(--pe-branco);
  border: 2px solid var(--pe-branco); border-radius: 4px; padding: .4rem .8rem; cursor: pointer;
}

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.main-nav a { color: var(--pe-branco); text-decoration: none; font-weight: 600; }
.main-nav a:hover { text-decoration: underline; }
.main-nav .sub-menu {
  display: none; position: absolute; background: var(--pe-azul); padding: .5rem 1rem; border-radius: 4px; list-style: none;
}
.main-nav li { position: relative; }
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { display: block; }
.main-nav .sub-menu li { margin: .4rem 0; }

@media (max-width: 800px) {
  .menu-toggle { display: inline-block; }
  .main-nav { display: none; width: 100%; }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: .5rem; padding: .75rem 0; }
  .main-nav .sub-menu { position: static; display: block; background: transparent; padding-left: 1rem; }
  .site-header .container { flex-wrap: wrap; }
}

/* Espaços de anúncio (gerenciados no painel do WordPress) */
.ad-slot { margin: 1.5rem 0; text-align: center; min-height: 0; }
.ad-slot:empty { display: none; }

/* Página inicial: destaque, cards e lista */
.destaque {
  display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin: 2rem 0;
}
.destaque-principal img { border-radius: 8px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.destaque-principal h2 { font-size: 2rem; margin: .75rem 0 .5rem; }
.lista-compacta { list-style: none; padding: 0; margin: 0; }
.lista-compacta li { border-bottom: 1px solid #ddd; padding: .75rem 0; }
.lista-compacta a { color: var(--pe-texto); text-decoration: none; font-weight: 600; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 2rem 0; }
.card { background: var(--pe-branco); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card-body { padding: 1rem; }
.card-body h3 { margin: .25rem 0 .5rem; font-size: 1.15rem; }
.meta { font-size: .85rem; color: #555; }

@media (max-width: 800px) {
  .destaque { grid-template-columns: 1fr; }
}

/* Notícia individual */
.article { background: var(--pe-branco); border-radius: 8px; padding: 1.5rem; margin: 2rem auto; max-width: 820px; }
.article h1 { font-size: 2rem; margin: .5rem 0; }
.article .subtitulo { font-size: 1.2rem; color: #444; margin: 0 0 1rem; }
.article .capa { border-radius: 8px; margin-bottom: 1rem; }
.article .meta a { color: inherit; }
.share { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0; }
.share a {
  background: var(--pe-azul); color: var(--pe-branco); padding: .4rem .8rem; border-radius: 4px; text-decoration: none; font-size: .9rem;
}
.related { margin: 2rem auto; max-width: 820px; }

/* Rodapé */
.site-footer { background: var(--pe-azul); color: var(--pe-branco); padding: 2rem 0; margin-top: 3rem; }
.site-footer a { color: var(--pe-branco); }