/*
Theme Name:   Derma Péptidos
Theme URI:    https://dermapeptidos.com
Description:  Tema hijo de GeneratePress con la identidad de Derma Péptidos. Los tokens, la tipografía y los 11 componentes viven en assets/css/derma-peptidos-base.css; la paleta y la escala tipográfica, en theme.json. Este archivo queda para ajustes puntuales.
Author:       Derma Péptidos
Template:     generatepress
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  derma-peptidos
Tags:         blog, one-column, custom-colors, custom-menu, editor-style, accessibility-ready
*/

/* --------------------------------------------------------------------------
   Este archivo se carga DESPUÉS de derma-peptidos-base.css.
   Todo lo estructural está allí. Aquí solo van correcciones y añadidos.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1 · Puentes con GeneratePress
   GeneratePress imprime sus propias variables y algunos anchos. Se alinean
   con los tokens del sistema para que no compitan.
   -------------------------------------------------------------------------- */
:root {
  --gp-container-width: var(--contenedor);
}

.grid-container,
.site-content .container {
  max-width: var(--contenedor);
}

/* El contenido de una entrada se lee a 700px, no a 1180px */
.single .entry-content > *:not(.alignwide):not(.alignfull),
.page .entry-content > *:not(.alignwide):not(.alignfull) {
  max-width: var(--lectura);
  margin-left: auto;
  margin-right: auto;
}

/* GeneratePress fuerza un color de enlace propio: gana el token */
a { color: var(--cobre-texto); }
a:hover, a:focus { color: var(--petroleo); }

/* --------------------------------------------------------------------------
   2 · Foco visible
   Requisito de accesibilidad: el foco de teclado nunca se oculta.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cobre-azul);
  outline-offset: 2px;
  border-radius: var(--radio);
}

/* --------------------------------------------------------------------------
   3 · Saltar al contenido
   -------------------------------------------------------------------------- */
.screen-reader-text:focus {
  background: var(--blanco);
  color: var(--petroleo);
  box-shadow: var(--sombra);
  border-radius: var(--radio);
}

/* --------------------------------------------------------------------------
   4 · Logo en la cabecera
   El SVG ya viene en curvas: no depende de ninguna fuente instalada.
   -------------------------------------------------------------------------- */
.site-logo img,
.custom-logo-link img {
  width: auto;
  max-height: 44px;
}

@media (max-width: 768px) {
  .site-logo img,
  .custom-logo-link img { max-height: 36px; }
}

/* --------------------------------------------------------------------------
   5 · Cabecera oscura (petróleo)
   El logotipo ya es la variante "negativo" (fondo petróleo incrustado): al
   poner el mismo fondo en la cabecera, el logo queda de una pieza con la
   barra de navegación. Enlaces e iconos se aclaran a porcelana/cobre-claro
   para mantener el contraste sobre el fondo oscuro.
   -------------------------------------------------------------------------- */
.site-header {
  background-color: var(--petroleo);
}

/* La navegación es un bloque propio dentro de la cabecera, con su blanco
   por defecto de GeneratePress: hay que igualarlo al fondo de la cabecera. */
.main-navigation {
  background-color: var(--petroleo);
}

/* GeneratePress fija el color de los enlaces del menú con un selector más
   específico (.main-navigation .main-nav ul li a); se iguala con !important
   en vez de perseguir su especificidad, para no depender de cómo lo escriba
   cada versión del tema. */
.main-navigation a,
.main-navigation .gp-icon,
.menu-toggle .gp-icon {
  color: var(--porcelana) !important;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
  color: var(--cobre-claro) !important;
}

/* El submenú móvil hereda el mismo fondo, para que no "salte" a blanco */
.main-navigation ul ul {
  background-color: var(--petroleo);
}

/* --------------------------------------------------------------------------
   6 · Ventana de búsqueda emergente (gp-search-modal)
   -------------------------------------------------------------------------- */
.gp-search-modal .gp-modal__container {
  background-color: var(--petroleo);
  border: 1px solid var(--cobre-claro);
}

/* El formulario en sí trae un fondo blanco opaco propio de GP que tapa
   el petróleo del contenedor: hay que igualarlo también. */
.gp-search-modal .search-modal-form {
  background-color: var(--petroleo);
}

.search-modal-fields .search-field {
  background-color: transparent;
  color: var(--porcelana);
  border-bottom: 1px solid var(--cobre-claro);
}

.search-modal-fields .search-field::placeholder {
  color: var(--cobre-claro);
  opacity: .8;
}

.search-modal-form button,
.gp-search-modal .gp-icon,
.gp-modal__close .gp-icon {
  color: var(--cobre-claro);
}

/* --------------------------------------------------------------------------
   7 · Pie de página oscuro (petróleo)
   -------------------------------------------------------------------------- */
#footer-widgets {
  background-color: var(--petroleo);
}

#footer-widgets .widget-title {
  color: var(--cobre-claro);
  font-variant: small-caps;
  letter-spacing: .02em;
}

#footer-widgets .widget,
#footer-widgets .widget p,
#footer-widgets .widget a {
  color: var(--porcelana);
}

#footer-widgets .widget a:hover,
#footer-widgets .widget a:focus {
  color: var(--cobre-claro);
}

.site-info {
  background-color: var(--petroleo);
  border-top: 1px solid rgba(238, 241, 240, .15);
}

.site-info,
.site-info .copyright-bar,
.site-info .copyright {
  color: var(--porcelana);
}

.site-info a {
  color: var(--porcelana);
}

.site-info a:hover,
.site-info a:focus {
  color: var(--cobre-claro);
}

/* --------------------------------------------------------------------------
   8 · Plantillas 07-09 (listado de silo, error 404, búsqueda)
   Estas tres viven en PHP (category.php, 404.php, search.php), no en el
   editor de bloques: comparten el lenguaje visual del sistema de diseño,
   pero necesitan un puñado de reglas de maquetación propias que no encajan
   en ningún componente existente.

   Ninguna de las tres llama a generate_construct_sidebars(): no hay barra
   lateral de widgets por defecto que mostrar. Pero GeneratePress reserva el
   ancho de #primary según el ajuste global de Personalizar ("right-sidebar"
   en este sitio), así que sin este ajuste queda una franja en blanco a la
   derecha donde iría esa barra lateral que nunca se imprime.
   -------------------------------------------------------------------------- */
body.category #primary,
body.search #primary,
body.error404 #primary {
  width: 100%;
  max-width: 100%;
}

/* Error 404: columna centrada, icono + buscador + tres columnas de enlaces */
.dp-404 {
  max-width: 560px;
  margin: var(--e-9) auto;
  text-align: center;
}

.dp-404__icono {
  display: block;
  margin: 0 auto var(--e-6);
}

.dp-404 .dp-etiqueta { display: block; text-align: center; }

.dp-404 form.dp-newsletter__linea {
  max-width: 420px;
  margin: var(--e-2) auto var(--e-7);
}

.dp-404__enlaces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-6);
  text-align: left;
  border-top: 1px solid var(--linea);
  padding-top: var(--e-6);
}

.dp-404__enlaces h2 {
  font-family: var(--f-datos);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cobre-azul);
  margin: 0 0 var(--e-3);
}

.dp-404__enlaces ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.dp-404__enlaces a { color: var(--tinta); text-decoration: none; }
.dp-404__enlaces a:hover, .dp-404__enlaces a:focus { color: var(--cobre-texto); text-decoration: underline; }

/* Búsqueda: resultados a la izquierda, barra lateral propia a la derecha */
.dp-resultados {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--canalon);
  align-items: start;
}

.dp-resultados__lista { display: flex; flex-direction: column; gap: var(--e-5); }
.dp-resultados__lista .dp-tarjeta { flex-direction: row; }
.dp-resultados__lista .dp-tarjeta img { width: 200px; aspect-ratio: 4 / 3; flex: none; border-bottom: 0; border-right: 1px solid var(--linea); }
.dp-resultados__lista .dp-tarjeta__cuerpo { flex: 1; }

@media (max-width: 1023px) {
  .dp-404__enlaces { grid-template-columns: 1fr 1fr; }
  .dp-resultados { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .dp-404__enlaces { grid-template-columns: 1fr; }
  .dp-resultados__lista .dp-tarjeta { flex-direction: column; }
  .dp-resultados__lista .dp-tarjeta img { width: 100%; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--linea); }
}