/*
Theme Name: CruxDeals Child
Description: Tema hijo de Blocksy para CruxDeals. Base de desarrollo local sin diseño personalizado todavía.
Author: CruxDeals
Template: blocksy
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cruxdeals-child
*/

/* Variables compartidas CruxDeals — globales (portada + footer). */
:root {
  --cruxdeals-bg: #ffffff;
  --cruxdeals-surface: #ffffff;
  --cruxdeals-text: #121417;
  --cruxdeals-muted: #6b7280;
  --cruxdeals-border: #e5e7eb;
  --cruxdeals-border-strong: #d1d5db;
  --cruxdeals-accent: #121417;
  --cruxdeals-accent-contrast: #ffffff;
  --cruxdeals-accent-soft: #f3f4f6;
  --cruxdeals-brand: #d71920;
  --cruxdeals-radius: 16px;
  --cruxdeals-radius-sm: 10px;
  --cruxdeals-radius-pill: 999px;
  --cruxdeals-space-xs: 8px;
  --cruxdeals-space-sm: 14px;
  --cruxdeals-space-md: 22px;
  --cruxdeals-space-lg: 36px;
  --cruxdeals-space-xl: 64px;
  --cruxdeals-max: 1120px;
  --cruxdeals-catalog-max: 1500px;
  --cruxdeals-content-max: 760px;
  --cruxdeals-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cruxdeals-line: 1.5;
}

/* ------------------------------------------------------------------
   Neutralización global del acento azul heredado de Blocksy.
   Se corrige el origen común (las variables --theme-* que el tema padre
   escribe en :root según la paleta por defecto, cuyo color 1 y 2 son
   azules #2872fa / #1559ed) en lugar de parchear elemento a elemento.
   Enlaces, botones, focos, campos y selección usan negro/blanco; los
   bordes quedan en gris neutro (#e5e7eb). No se edita el tema padre.
   ------------------------------------------------------------------ */
:root,
body {
  --theme-palette-color-1: #121417;
  --theme-palette-color-2: #121417;
  --theme-palette-color-3: #121417;
  --theme-text-color: #121417;
  --theme-link-initial-color: #121417;
  --theme-link-hover-color: #121417;
  --theme-link-active-color: #121417;
  --theme-button-text-initial-color: #ffffff;
  --theme-button-text-hover-color: #ffffff;
  --theme-button-background-initial-color: #121417;
  --theme-button-background-hover-color: #121417;
  --theme-form-field-border-focus-color: #121417;
  --theme-selection-text-color: #ffffff;
  --theme-selection-background-color: #121417;
  --theme-border-color: #e5e7eb;
}

/* ------------------------------------------------------------------
   Menu principal Blocksy: comportamiento unico en todas las paginas
   (portada, fichas e interiores).
   Selectores acotados a .ct-header (la cabecera real: barra escritorio
   + cajon movil #offcanvas, ambos emitidos por el tema padre). Nunca
   afecta al menu del footer (footer-menu-inline). Sin !important.
   ------------------------------------------------------------------ */

/* Normal: texto negro, fondo transparente, sin subrayado, sin marco. */
.ct-header .menu-container > ul > li > a.ct-menu-link,
.ct-header .menu-container > ul > li > a.ct-menu-link:visited {
  color: var(--cruxdeals-text);
  background: transparent;
  text-decoration: none;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* Hover: negro en negrita, sin fondo, sin subrayado, sin marco.
   La copia oculta de 700 en ::after reserva el ancho, por lo que el
   resto del menu no se desplaza al pasar el raton. */
.ct-header .menu-container > ul > li:hover > a.ct-menu-link,
.ct-header .menu-container > ul > li:hover > a.ct-menu-link:visited {
  color: var(--cruxdeals-text);
  background: transparent;
  text-decoration: none;
  font-weight: 700;
}

/* Activo: el mismo aspecto para todas las variantes de WordPress/Blocksy
   (current-menu-item, current_page_*, aria-current="page") y para el
   estado propio de la portada (cruxdeals-menu-active / aria-current="page"). */
.ct-header .menu-container > ul > li.current-menu-item > a.ct-menu-link,
.ct-header .menu-container > ul > li.current-menu-parent > a.ct-menu-link,
.ct-header .menu-container > ul > li.current-menu-ancestor > a.ct-menu-link,
.ct-header .menu-container > ul > li.current_page_item > a.ct-menu-link,
.ct-header .menu-container > ul > li.current_page_parent > a.ct-menu-link,
.ct-header .menu-container > ul > li.current_page_ancestor > a.ct-menu-link,
.ct-header .menu-container > ul > li[aria-current] > a.ct-menu-link,
.ct-header .menu-container > ul > li.cruxdeals-menu-active > a.ct-menu-link,
.ct-header .menu-container > ul > li > a.ct-menu-link.cruxdeals-menu-active,
.ct-header .menu-container > ul > li > a.ct-menu-link[aria-current="page"],
.ct-header .menu-container > ul > li > a.ct-menu-link.cruxdeals-menu-active:visited {
  color: var(--cruxdeals-text);
  background: transparent;
  text-decoration: none;
  font-weight: 700;
}

/* Reserva de ancho para la negrita: copia oculta de la etiqueta con
   font-weight 700 (data-cruxdeals-bold se inyecta en nav_menu_link_attributes,
   ver functions.php). No consume espacio vertical (height 0). */
.ct-header .menu-container > ul > li > a.ct-menu-link::after {
  content: attr(data-cruxdeals-bold);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  white-space: nowrap;
}

/* Foco de teclado: contorno negro discreto, solo con :focus-visible.
   Con el raton no se muestra (Blocksy ya elimina el outline en :focus). */
.ct-header .menu-container > ul > li > a.ct-menu-link:focus-visible {
  outline: 2px solid var(--cruxdeals-text);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Selector de idioma: componente compartido entre la portada y el pie
   de pagina. Mismo marcado vía cruxdeals_render_lang_selector(). Azul
   acordado #0000FF. Seleccionado: fondo #0000FF y texto #FFFFFF. No
   seleccionado: fondo #FFFFFF, texto y borde #0000FF. Foco azul. Sin
   !important. (El selector del pie define su propio aspecto compacto.)
   ------------------------------------------------------------------ */
.cruxdeals-lang__inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cruxdeals-lang__btn,
.cruxdeals-lang__btn:visited {
  background: #ffffff;
  border: 1px solid #0000ff;
  color: #0000ff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  line-height: inherit;
}

.cruxdeals-lang__btn:hover,
.cruxdeals-lang__btn.is-active {
  background: #0000ff;
  border-color: #0000ff;
  color: #ffffff;
}

.cruxdeals-lang__btn:focus-visible {
  outline: 2px solid #0000ff;
  outline-offset: 2px;
}

.cruxdeals-lang__sep {
  color: #9ca3af;
  font-weight: 400;
}

/* Listados del tema base (categoría de ofertas y /ofertas/): área de imagen
   cuadrada, proporcionada y responsive. Las fotos verticales, horizontales y
   cuadradas se ven completas, centradas y sin deformación ni recorte, con
   espacio blanco alrededor y fondo #FFFFFF sin bordes ni sombras. */
body.tax-categoria_oferta .entry-card .ct-media-container,
body.post-type-archive-oferta .entry-card .ct-media-container {
  position: relative;
  display: block;
  background: #ffffff;
}

body.tax-categoria_oferta .entry-card .ct-media-container::before,
body.post-type-archive-oferta .entry-card .ct-media-container::before {
  padding-bottom: 0;
}

body.tax-categoria_oferta .entry-card .ct-media-container img,
body.post-type-archive-oferta .entry-card .ct-media-container img {
  position: relative !important;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain;
  background: #ffffff;
  box-sizing: border-box;
  padding: clamp(8px, 1.8vw, 16px);
}

body.tax-categoria_oferta .entry-card,
body.tax-categoria_oferta .entry-card:hover,
body.post-type-archive-oferta .entry-card,
body.post-type-archive-oferta .entry-card:hover {
  background: #ffffff;
  border: 0;
  box-shadow: none;
  border-radius: var(--cruxdeals-radius);
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Paginación nativa de WordPress (.cruxdeals-pagination + .page-numbers).
   Componente compartido: lo usan la portada del catálogo (cruxdeals-home.css
   ya no lo define) y el listado del blog (cruxdeals-blog.css). Vive aquí para
   que las dos páginas se sirvan del mismo CSS en un solo sitio.
   ------------------------------------------------------------------ */
.cruxdeals-pagination {
  margin: 22px 0 0;
}
.cruxdeals-pagination .page-numbers {
  display: inline-flex;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  margin-right: 6px;
  border: 1px solid var(--cruxdeals-text);
  border-radius: var(--cruxdeals-radius-pill);
  color: var(--cruxdeals-text);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}
.cruxdeals-pagination .page-numbers.current {
  background: var(--cruxdeals-text);
  color: #fff;
}
.cruxdeals-pagination .page-numbers.dots {
  border-style: dashed;
  color: var(--cruxdeals-muted);
}
.cruxdeals-pagination .page-numbers:hover,
.cruxdeals-pagination .page-numbers:active {
  border-width: 2px;
  padding: 0 9px;
  font-weight: 700;
}
.cruxdeals-pagination .page-numbers:focus-visible {
  outline: 2px solid var(--cruxdeals-text);
  outline-offset: 2px;
}
/* paginate_links() con type=list envuelve las píldoras en <ul
   class="page-numbers">, que por eso recibe las reglas anteriores. Aquí se
   desactiva todo lo que es propio de una lista (marco, altura fija,
   viñetas, margen y relleno por defecto) para que solo se vean las
   píldoras individuales, y se permite el salto de línea en móvil. */
.cruxdeals-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  list-style: none;
}
.cruxdeals-pagination ul.page-numbers > li {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cruxdeals-pagination ul.page-numbers:hover,
.cruxdeals-pagination ul.page-numbers:active {
  padding: 0;
  border-width: 0;
  font-weight: inherit;
}