/*
Theme Name: Divalyo
Theme URI: https://www.divalyo.es
Author: David Alegria S.L.
Author URI: http://www.davidalegria.com
Description: Tema desarrollado en exclusiva por David Alegria para Divalyo.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU/GPL Version 2 or later
License URI: http://www.gnu.org/licenses/gpl.html
Text Domain: DAWeb
Tags: bootstrap, custom-menu, featured-images, translation-ready
Copyright: (c) 2025 David Alegria S.L.
*/


/* ==========================================================================
   1. TOKENS
   Un único sitio donde cambiar color, tipografía o forma. Antes el azul de
   marca estaba escrito como la palabra `blue` en 30 sitios distintos.
   ========================================================================== */

:root {

	/* Color */
	--dv-primary: #0000ff;
	--dv-primary-rgb: 0, 0, 255;
	--dv-primary-dark: #0000cc;

	/* Texto. #777 sobre blanco da 4.48:1 y se queda a un pelo del 4.5:1 que
	   exige WCAG 2.1 AA. #6d6d6d da 5.05:1 y es indistinguible a simple vista. */
	--dv-ink: #6d6d6d;
	--dv-ink-strong: #444444;
	--dv-surface: #ffffff;
	--dv-muted: #f5f5f5;

	/* Tipografía */
	--dv-font-sans: 'Syne', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--dv-fs-base: 1.25rem;
	--dv-fs-h1: 2rem;
	--dv-fs-h1-big: 3rem;
	--dv-fs-small: 75%;

	/* Forma */
	--dv-radius: .25rem;
	--dv-rule: 7px;
	--dv-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	--dv-shadow-hover: 0 16px 40px rgba(0, 0, 0, .08);
	--dv-transition: .25s ease;
}


/* --------------------------------------------------------------------------
   1.b Puente con Bootstrap
   Bootstrap 5.3 se configura con variables CSS. Sobrescribirlas aquí evita
   tener que repetir reglas con !important por todo el archivo.
   -------------------------------------------------------------------------- */

:root {
	--bs-body-font-family: var(--dv-font-sans);
	--bs-body-font-size: var(--dv-fs-base);
	--bs-body-color: var(--dv-ink);
	--bs-primary: var(--dv-primary);
	--bs-primary-rgb: var(--dv-primary-rgb);
	--bs-link-color: var(--dv-primary);
	--bs-link-color-rgb: var(--dv-primary-rgb);
	--bs-link-hover-color: var(--dv-ink);
	--bs-border-radius: var(--dv-radius);
	--bs-heading-color: var(--dv-primary);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
	font-family: var(--dv-font-sans);
	font-weight: 400;
	font-style: normal;
	color: var(--dv-ink);
	font-size: var(--dv-fs-base);
	font-optical-sizing: auto;
}

p { padding: 0; margin: 0 0 10px 0; }

a { color: var(--dv-primary); text-decoration: none; }
a:hover, a:focus { color: var(--dv-ink); text-decoration: none; }

/* El foco visible es requisito de WCAG 2.4.7. Antes se anulaba con
   `outline: none` en todos los enlaces, dejando la navegación por teclado a
   ciegas. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--dv-primary);
	outline-offset: 2px;
}

/* Excepción: los contenedores con tabindex="-1" —el <main> al que apunta el
   enlace de salto, el offcanvas— no están en el orden de tabulación. Reciben el
   foco por programa, y también al pulsar un anclaje interno, porque el navegador
   busca el ancestro enfocable del destino. Recuadrar media página no orienta a
   nadie: el desplazamiento ya es la señal. No afecta a WCAG 2.4.7, que habla de
   componentes que se manejan con el teclado. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
	outline: none;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--dv-primary); }
h1, .h1 { font-size: var(--dv-fs-h1); margin-bottom: 1.5rem; line-height: 1.1; }
h1 span.title { border-bottom: solid var(--dv-rule) var(--dv-primary); color: var(--dv-primary); }
h1.title { font-family: var(--dv-font-sans); font-weight: 800; font-style: normal; text-transform: uppercase; font-size: 1rem; letter-spacing: 2px; }
h1.title a { text-decoration: none; color: var(--dv-primary); }
h4 { font-weight: bold; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
h5 { font-weight: 400; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
h1.big { font-size: var(--dv-fs-h1-big); font-weight: normal; }

.title-tratamiento { font-size: 2rem; line-height: 1; color: var(--dv-primary); }

blockquote {
	padding-left: 30px;
	margin-left: 30px;
	border-left: solid 6px var(--dv-primary);
	color: var(--dv-primary);
	font-size: var(--dv-fs-base);
	line-height: 1.5rem;
}

.alignright, .alignleft, .alignnone { float: none; margin: 15px 0; width: 100%; height: auto; }
.block-img { width: 100%; height: auto; margin-bottom: 15px; }
.elcolor { color: var(--dv-primary); }
hr { border-top: 1px solid var(--dv-primary); opacity: 1; }
.wp-block-image img { border-radius: var(--dv-radius); }

b, strong { font-weight: 600; }
h1 strong, h3 strong { font-weight: 800; }
.small, small { font-size: var(--dv-fs-small); line-height: 1.2; }

p + h5, p + h4, ul + h4, ol + h4,
table + h4, table + h5,
figure + h5, figure + h4,
h4 + h5, p + h3 { margin-top: 3rem; }


/* ==========================================================================
   3. COMPONENTES
   ========================================================================== */

/* --- Botones --------------------------------------------------------------
   Bootstrap 5.3 usa variables locales por botón: tocarlas es más limpio que
   sobrescribir background-color y arrastrar problemas en :hover y :active. */

.btn-primary {
	--bs-btn-bg: var(--dv-primary);
	--bs-btn-border-color: var(--dv-primary);
	--bs-btn-hover-bg: var(--dv-primary-dark);
	--bs-btn-hover-border-color: var(--dv-primary-dark);
	--bs-btn-active-bg: var(--dv-primary-dark);
	--bs-btn-active-border-color: var(--dv-primary-dark);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
}

.btn-outline-primary {
	--bs-btn-color: var(--dv-primary);
	--bs-btn-border-color: var(--dv-primary);
	--bs-btn-hover-bg: var(--dv-primary);
	--bs-btn-hover-border-color: var(--dv-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--dv-primary-dark);
	--bs-btn-active-border-color: var(--dv-primary-dark);
}

/* --- Fondos ---------------------------------------------------------------
   .bg-primary-dv es la clase correcta para pintar un bloque del azul de marca.

   DEUDA TÉCNICA: .bg-light se mantiene redefinido porque hay contenido
   publicado que lo usa esperando el fondo azul. Es un secuestro de una utilidad
   de Bootstrap: cualquier componente de terceros que use bg-light saldrá azul.
   Plan: sustituir bg-light por bg-primary-dv en el contenido y borrar la regla.
   Ver documentacion/02-auditoria.md */

.bg-primary-dv { background-color: var(--dv-primary) !important; color: #fff; }
.bg-light { background-color: var(--dv-primary) !important; }
.bg-primary { background-color: var(--dv-primary) !important; }

/* .bg-cdc apuntaba a img/franja.jpg, que no existe en el theme: cada uso
   provocaba un 404. Se reactiva cuando se suba la imagen.
.bg-cdc { background-image: url('img/franja.jpg'); background-position: center; background-repeat: repeat; background-size: contain; }
*/

.logo img { max-width: 300px; }

/* --- Estados de formulario --- */
.error { border: solid var(--bs-danger, #dc3545) 2px; }
.success-message { display: none; }

div#pdcc-message-container { background-color: var(--dv-muted) !important; }

.offcanvas-bottom { height: auto; min-height: 50vh; }

/* --- Enlace de salto ------------------------------------------------------
   Primer elemento enfocable de la página. Invisible hasta que recibe el foco.
   Requisito de WCAG 2.4.1. */

.skip-link {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 1080;
	background: var(--dv-primary);
	color: #fff;
	padding: .5rem 1rem;
	border-radius: var(--dv-radius);
}

/* --- Tarjetas --- */
.elev-card {
	border: 0;
	overflow: hidden;
	box-shadow: var(--dv-shadow);
	transition: transform var(--dv-transition), box-shadow var(--dv-transition);
}
.elev-card:hover { transform: translateY(-2px); box-shadow: var(--dv-shadow-hover); }
.elev-card .card-body { padding: 2rem; }
.elev-card .h4 { font-weight: 600; text-shadow: 0 0 15px rgba(0, 0, 0, .9); }
.elev-card .h4 strong { text-shadow: none; }
.elev-card a { text-decoration: none !important; }
.elev-card .card-footer { background: transparent; border-top: 0; padding: 0 2rem 2rem 2rem; }

.card { color: var(--dv-ink); }

/* --- Revelado al hacer scroll --------------------------------------------
   js/script.js añadía y quitaba estas clases, pero no existía ni una regla
   para ellas: la animación no hacía absolutamente nada. */

.reveal-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
	transition-delay: calc(var(--stagger, 0) * 60ms);
}
.reveal-up.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.reveal-up { opacity: 1; transform: none; transition: none; }
	* { scroll-behavior: auto !important; }
}


/* ==========================================================================
   4. NAVEGACIÓN
   ========================================================================== */

.navbar-brand { margin: 0; }
.navbar-toggler { border: none; font-size: 1.5rem; padding: 0; }
.nav-link { padding: 0 1rem; font-size: 2rem; }

.menu_nav:hover { color: var(--dv-ink); }
.menu_nav:focus { color: var(--dv-primary); }
.menu_nav_on i { color: var(--dv-primary); }

.menu_ken li a { color: var(--dv-primary); }
.menu_ken li a:hover, .menu_ken li a:focus { text-decoration: none; color: var(--dv-ink); }

.navbar-light .navbar-nav li.current-menu-item .nav-link,
.navbar-light .navbar-nav li.current_page_ancestor .nav-link,
.navbar-light .navbar-nav li.current_page_parent .nav-link { color: var(--dv-ink); }

.menu_ken_sec { margin: 0; padding: 0; }
.menu_ken_sec li { list-style: none; display: inline-block; line-height: 1.1rem; margin-right: 10px; }
.menu_ken_sec li a { color: var(--dv-primary); }
.menu_ken_sec li a:hover, .menu_ken_sec li a:focus { text-decoration: none; color: var(--dv-ink); }
.menu_ken_sec li.current-menu-item a,
.menu_ken_sec li.current_page_ancestor a,
.menu_ken_sec li.current_page_parent a { color: var(--dv-ink); }

.offcanvas { background-color: var(--dv-primary); }
.offcanvas .menu_ken li a { color: #fff; }
.offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }


/* ==========================================================================
   5. CONTENIDO
   El contenedor conserva el nombre .containter_da (con la errata original)
   porque hay contenido publicado que depende de él. Renombrarlo exige revisar
   el contenido de todas las páginas.
   ========================================================================== */

.fondo {
	background: var(--dv-primary);
	position: fixed;
	inset: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.containter_da { border: solid 0 var(--dv-primary); }
.containter_da ul li { list-style: square; }
.containter_da p a, .containter_da a { text-decoration: underline; }
.containter_da p.noticia-date a,
.containter_da a.btn,
.containter_da p a.btn,
.noticia h2 a, .noticia h3 a,
.containter_da h5 a, .containter_da h2 a,
.servicio a,
.containter_da .pagination li a { text-decoration: none; }
.containter_da ul, .containter_da ol { padding-left: 30px; }
.containter_da .embed-responsive { margin: 15px 0; }
.containter_da .pagination li { list-style: none; }
.containter_da ul.pagination { padding: 0; }

.container_padding { padding-bottom: 50px; }
.noticia-date { margin-top: 0; text-transform: uppercase; letter-spacing: 1px; }


/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

/* Móvil apaisado y superior */
@media (min-width: 576px) {
	.nav-link { padding: 0 1rem; font-size: 1.3rem; }
	.logo { font-size: 3rem; }
}