/*
Theme Name: VelkDev Theme
Theme URI: https://ejemplo.com/velkdev-theme
Author: VelkDev
Author URI: https://velkdev.com
Description: Un tema de WordPress minimalista, optimizado para la velocidad, por VelkDev. (Modo Oscuro)
Version: 1.1 /* Incrementa la versión */
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: minimalista, rapido, responsive, velkdev, dark-mode
Text Domain: velkdev-theme
*/

/* Reset Básico */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* Fuentes de Sistema para máxima velocidad y apariencia nativa */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.7;
  background-color: #121212; /* Fondo oscuro principal */
  color: #e0e0e0; /* Texto principal claro */
  padding: 20px; /* Ajustar según diseño final */
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin-bottom: 0.5em;
  line-height: 1.3;
  color: #ffffff; /* Títulos un poco más brillantes que el texto normal */
}

/* Enlaces */
a {
  color: #61dafb; /* Un azul claro y vibrante para enlaces */
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
  color: #82e9ff; /* Un poco más brillante al pasar el ratón/foco */
}

/* Mejorar legibilidad de imágenes y elementos multimedia */
img, video, embed, object {
  max-width: 100%;
  height: auto;
  display: block;
  /* Considerar un borde sutil si las imágenes se pierden en el fondo oscuro */
  /* border: 1px solid #333; */ 
}

/* Clases de utilidad para accesibilidad */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Estilos específicos para elementos del tema en modo oscuro */

/* Header */
.site-header .site-title a {
  color: #ffffff; /* Título del sitio más prominente */
}
.site-header .site-title a:hover,
.site-header .site-title a:focus {
  color: #e0e0e0;
}
.site-header .site-description {
  color: #b0b0b0; /* Descripción del sitio un poco más tenue */
}

/* Navegación (si la tienes estilizada) */
.main-navigation a {
    color: #e0e0e0;
}
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a { /* Elemento de menú actual */
    color: #ffffff;
    background-color: #1f1f1f; /* Un fondo sutil para el hover/actual */
}

/* Contenido de Entradas/Páginas */
.entry-header .entry-title a {
  color: #ffffff;
}
.entry-header .entry-title a:hover {
  color: #e0e0e0;
}

.entry-content {
  /* El color del texto ya está definido en body, pero puedes ajustarlo aquí si es necesario */
}

.entry-footer, .entry-meta { /* Para metadatos como fecha, autor, categorías */
  color: #a0a0a0; /* Metadatos un poco más tenues */
  font-size: 0.9em;
}
.entry-footer a, .entry-meta a {
  color: #7cc0d8; /* Enlaces en metadatos, un azul más suave */
}
.entry-footer a:hover, .entry-meta a:hover {
  color: #98d9ef;
}

/* Paginación */
.page-links a, .posts-navigation a {
    border: 1px solid #444; /* Bordes para botones/enlaces de paginación */
    padding: 5px 10px;
    display: inline-block;
    margin: 2px;
}
.page-links a:hover, .posts-navigation a:hover {
    background-color: #333;
    border-color: #555;
}

/* Formularios (muy básico, necesitarías más para un formulario completo) */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
    background-color: #2c2c2c;
    color: #e0e0e0;
    border: 1px solid #444;
    padding: 8px;
}
input[type="submit"],
button {
    background-color: #61dafb;
    color: #121212; /* Texto oscuro sobre botón claro */
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}
input[type="submit"]:hover,
button:hover {
    background-color: #82e9ff;
}

/* Footer */
.site-footer {
  border-top: 1px solid #333; /* Una línea sutil para separar el footer */
  padding-top: 20px;
  margin-top: 40px;
  color: #a0a0a0; /* Texto del footer un poco más tenue */
}
.site-footer a {
  color: #7cc0d8;
}
.site-footer a:hover {
  color: #98d9ef;
}