/*
Theme Name:   Swipet
Theme URI:    https://swipet.es/
Description:  Tema hijo de Hello Elementor con la cabecera, el pie y el estilo de la web nueva de Swipet (2026) en todas las páginas que sirve WordPress, y las dos plantillas del blog (fichas de raza y artículos). Ver LEEME_plantillas.md.
Author:       Swipet
Author URI:   https://swipet.es/
Template:     hello-elementor
Version:      1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License:      Propietario (uso interno de Swipet)
Text Domain:  swipet
*/

/* ==========================================================================
   Integración de la cabecera y el pie de la web nueva (swipet.css) dentro de WordPress. Solo se carga donde el tema
   los pinta (body.swipet-v2). Neutraliza lo que meten el kit del sitio de Elementor (post-37.css) y el <style> de
   algunas entradas, que chocan con la web nueva (.site-header y .site-footer existen en los dos lados).

   Ojo: en las páginas hechas con Elementor (/razas-de-perros/, legales…) el body conserva la clase del kit
   (elementor-kit-37), porque su contenido usa sus colores y tamaños. Por eso aquí no se toca el body: solo la
   cabecera, el pie y los menús. En las entradas del blog el tema quita esa clase (functions.php).
   ========================================================================== */

/* El <style> de algunas entradas pone «html, body { overflow-x: hidden }»: con el html así, la cabecera deja de
   quedarse fija al bajar. La web nueva solo lo pone en el body. */
html.swp-html{overflow-x:visible}

/* Letra base de la cabecera, el pie y los menús: la de la web nueva (el kit pone 24 px al body y Hello, la del
   sistema). Con :where() pesa cero: las piezas que fijan su tamaño (la barra de arriba, 12 px) lo conservan. */
:where(body.swipet-v2 :is(.announcement,.site-header,.site-footer,.mbar,.mnav,.fab)){font-size:17px;line-height:1.5;font-weight:400;font-family:var(--font)}
@media(max-width:600px){:where(body.swipet-v2 :is(.announcement,.site-header,.site-footer,.mbar,.mnav,.fab)){font-size:16px}}

/* El kit pone «.site-header{padding-inline:8%; background-color:#fff}» y «.site-footer{background-color:#FFF6F6}», y
   theme.css de Hello centra los dos en una caja de 500 a 1140 px. La web nueva los quiere a todo el ancho. */
body.swipet-v2 .site-header{width:auto;max-width:none;margin-inline:0;padding-inline:0;padding-block:0;background-color:rgba(255,253,249,.96);display:block;flex-wrap:nowrap}
body.swipet-v2 .site-footer{width:auto;max-width:none;margin-inline:0;padding-inline:0;background-color:var(--paper)}

/* El kit pinta todos los enlaces con «.elementor-kit-37 a{color:#FFF6F6}» y «a:hover{color:#FFF}» (casi blanco).
   En la cabecera, el pie y los menús se vuelve a los colores de swipet.css: primero «heredar» (a{color:inherit}) y
   luego los colores propios de cada pieza, con un punto más de peso que la regla del kit. */
body.swipet-v2 :is(.announcement,.site-header,.site-footer,.mbar,.mnav) a,
body.swipet-v2 :is(.announcement,.site-header,.site-footer,.mbar,.mnav) a:hover{color:inherit}
body.swipet-v2 a.skip-link{color:var(--ink)}
body.swipet-v2 a.fab{color:#fff}
body.swipet-v2 a.fab:hover{color:var(--ink)}
body.swipet-v2 :is(.site-header,.site-footer,.mbar,.mnav) a.btn--dark,
body.swipet-v2 :is(.site-header,.site-footer,.mbar,.mnav) a.btn--dark:hover{color:#fff}
body.swipet-v2 :is(.site-header,.site-footer,.mbar,.mnav) a.btn--coral,
body.swipet-v2 :is(.site-header,.site-footer,.mbar,.mnav) a.btn--coral:hover{color:var(--ink)}
body.swipet-v2 :is(.site-header,.site-footer,.mbar,.mnav) a.btn--outline{color:var(--ink)}
body.swipet-v2 :is(.site-header,.site-footer,.mbar,.mnav) a.btn--outline:hover{color:#fff}
body.swipet-v2 .mbar a.icon-btn,body.swipet-v2 .mbar a.icon-btn:hover{color:#fff}
body.swipet-v2 .site-header .nav a{color:var(--ink)}
body.swipet-v2 .site-header .nav a:hover{color:var(--coral-ink)}
body.swipet-v2 .site-header .drop a:hover{color:var(--ink)}
body.swipet-v2 .site-footer .footer-cols a{color:var(--muted)}
body.swipet-v2 .site-footer .footer-cols a:hover{color:var(--ink)}
body.swipet-v2 .site-footer .footer-contact a{color:var(--ink)}
body.swipet-v2 .site-footer .social a:hover{color:#fff}
body.swipet-v2 .site-footer .footer-bottom a:hover{color:var(--ink)}

/* reset.css de Hello (se queda en las páginas de Elementor) pinta todos los botones con borde, letra y, al pasar o
   enfocar, fondo granate (#c36). Los botones de la cabecera, el pie y el menú móvil vuelven a ser los de la web nueva. */
body.swipet-v2 :is(.site-header,.mnav) .menu-btn{padding:1px 6px;border:0;border-radius:0;color:var(--ink);font-size:inherit}
body.swipet-v2 :is(.site-header,.mnav) .menu-btn:is(:hover,:focus,:active){background-color:transparent;color:var(--ink)}
body.swipet-v2 .site-header .nav .nav-drop{border-radius:0}
body.swipet-v2 .site-header .nav .nav-drop:is(:hover,:focus,:active){background-color:transparent}
body.swipet-v2 .site-footer .f-acc,
body.swipet-v2 .site-footer .f-acc:is(:hover,:focus,:active){background-color:transparent;color:var(--ink);border:0;border-radius:0}
body.swipet-v2 :is(.site-header,.site-footer,.mnav,.mbar) a:is(:hover,:active){text-decoration:none}

/* El texto de la cabecera, el pie y los menús, en tinta (en las páginas de Elementor el body es #333, el de Hello) */
body.swipet-v2 :is(.site-header,.site-footer,.mnav){color:var(--ink)}

/* --- Contenido de las páginas hechas con Elementor (todo menos las entradas) -------------------------------------
   swipet.css trae una base para la web nueva (Futura LT, títulos en negrita y apretados, listas sin sangría, imágenes
   en bloque…). Dentro del contenido de estas páginas se vuelve a la base de Hello que tenían hasta ahora, para que su
   contenido se vea igual. Con :where() estas reglas pesan lo mínimo: las de Elementor y las de cada página siguen
   mandando. */
/* En el body y con el peso de «body» (0,0,1): gana a swipet.css (va antes) y pierde con el <style> de la propia
   página (va después), que en algunas (p. ej. la Kalibo antigua) pone su propia letra al body. */
body:where(.swipet-v2:not(.swipet-post)){
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  color:#333;line-height:1.5
}
:where(body.swipet-v2:not(.swipet-post) #contenido) :is(h1,h2,h3,h4,h5,h6){
  margin-block:.5rem 1rem;margin-inline:0;font-family:inherit;font-weight:500;line-height:1.2;letter-spacing:normal;color:inherit;text-wrap:wrap
}
:where(body.swipet-v2:not(.swipet-post) #contenido) h1{font-size:2.5rem}
:where(body.swipet-v2:not(.swipet-post) #contenido) h2{font-size:2rem}
:where(body.swipet-v2:not(.swipet-post) #contenido) h3{font-size:1.75rem}
:where(body.swipet-v2:not(.swipet-post) #contenido) h4{font-size:1.5rem}
:where(body.swipet-v2:not(.swipet-post) #contenido) :is(p,li){text-wrap:wrap}
:where(body.swipet-v2:not(.swipet-post) #contenido) p{margin-block:0 .9rem;margin-inline:0}
:where(body.swipet-v2:not(.swipet-post) #contenido) :is(ul,ol){margin:revert;padding:revert}
:where(body.swipet-v2:not(.swipet-post) #contenido) :is(img,svg,video){display:revert}
:where(body.swipet-v2:not(.swipet-post) #contenido) picture{display:revert}
/* Dos clases de swipet.css que también usa una página de Elementor (la /alternativa-a-kalibo/ antigua, página 835,
   que se sustituye en el paso 4.2): .section (120 px de relleno) y .hero (alto de pantalla, texto blanco). Se dejan
   como estaban; el <style> de la propia página, que va después, sigue mandando. */
:where(body.swipet-v2:not(.swipet-post) #contenido) .section{padding-block:0}
:where(body.swipet-v2:not(.swipet-post) #contenido) .hero{
  position:static;color:inherit;overflow:visible;min-height:0;height:auto;max-height:none;display:block;flex-direction:row
}
/* (los valores del titular de esa página hoy: 48 px, 32 px hasta 768 px, interletra 0,5 px) */
:where(body.swipet-v2:not(.swipet-post) #contenido) .hero h1{color:inherit;font-size:3rem;line-height:1.2;letter-spacing:.5px;max-width:none}
@media(max-width:768px){:where(body.swipet-v2:not(.swipet-post) #contenido) .hero h1{font-size:2rem}}

/* Enlace «Saltar al contenido» de la web nueva por encima de la barra de administración de WordPress */
body.swipet-v2.admin-bar .skip-link:focus{top:44px}
/* Con la barra de administración (solo usuarios conectados) la cabecera fija baja con ella */
@media(min-width:783px){body.swipet-v2.admin-bar .site-header{top:32px}}
@media(max-width:782px){body.swipet-v2.admin-bar .site-header{top:0}}