/*
Theme Name: Dios Edifica la Familia
Theme URI: https://diosedificalafamilia.org.do
Description: Tema hijo de Twenty Twenty-Five para el portal de la Fundación Dios Edifica la Familia. Incorpora los colores del logo institucional (azul marino #073071, azul marino profundo #01255F y azul rey #0149AB), las tipografías Spectral y Archivo alojadas en el propio servidor, y los patrones de bloques del sitio.
Author: Fundación Dios Edifica la Familia
Template: twentytwentyfive
Version: 1.2.1
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dios-edifica-la-familia
Tags: non-profit, block-patterns, full-site-editing
*/

/* =========================================================================
   Alias legibles sobre las variables que genera theme.json.
   Si cambias un color en Apariencia > Editor > Estilos, estos lo siguen solos.
   ========================================================================= */
:root {
	--dief-blanco:          var(--wp--preset--color--base);
	--dief-tinta:           var(--wp--preset--color--contrast);
	--dief-tinta-suave:     var(--wp--preset--color--accent-6);
	--dief-marino:          var(--wp--preset--color--accent-1);
	--dief-marino-profundo: var(--wp--preset--color--accent-5);
	--dief-azul-rey:        var(--wp--preset--color--accent-2);
	--dief-dorado:          var(--wp--preset--color--accent-3);
	--dief-dorado-oscuro:   var(--wp--preset--color--dorado-oscuro);
	--dief-fondo:           var(--wp--preset--color--accent-4);
	--dief-linea:           var(--wp--preset--color--linea);
	--dief-cielo:           var(--wp--preset--color--cielo);
	--dief-laurel:          var(--wp--preset--color--verde-laurel);

	--dief-serif: var(--wp--preset--font-family--spectral);
	--dief-sans:  var(--wp--preset--font-family--archivo);

	--dief-radio: 12px;
	--dief-sombra: var(--wp--preset--shadow--tarjeta);
}

/* =========================================================================
   Base
   ========================================================================= */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* El texto largo se lee mejor equilibrado */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Foco visible en todo el sitio: requisito de accesibilidad */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--dief-azul-rey);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   Identidad · logo
   El logo es azul marino: sobre fondo oscuro desaparece.
   Esta clase lo pone sobre pastilla blanca.
   ========================================================================= */
.dief-logo-pastilla img,
.dief-logo-pastilla .custom-logo {
	background: #fff;
	border-radius: 10px;
	padding: 4px;
	box-shadow: 0 0 0 1px rgba(1, 37, 95, .12);
}

.dief-logo-tarjeta {
	background: #fff;
	border-radius: 20px;
	padding: clamp(20px, 3vw, 34px);
	box-shadow: 0 20px 55px -22px rgba(0, 0, 0, .55);
	max-width: 340px;
	margin-inline: auto;
}
.dief-logo-tarjeta img { display: block; width: 100%; height: auto; }

/* =========================================================================
   Portada
   ========================================================================= */
.dief-portada {
	position: relative;
	overflow: hidden;
	color: #fff;
}
.dief-portada :where(h1, h2, h3, p) { color: #fff; }
.dief-portada .dief-entrada { color: var(--dief-dorado); }
.dief-portada .dief-bajada { color: #C9D9F2; }

/* Cinta dorada y azul al pie de la portada */
.dief-portada::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 14px;
	background: repeating-linear-gradient(90deg, #D9A227 0 30px, #0149AB 30px 60px);
	opacity: .9;
}

/* Botón claro sobre la portada marina */
.dief-portada .wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--dief-dorado);
	color: #2A1C00;
}
.dief-portada .wp-block-button.is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
}
.dief-portada .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
}

/* =========================================================================
   Antetítulo y versículo
   ========================================================================= */
.dief-entrada {
	font-family: var(--dief-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--dief-marino);
}

.dief-versiculo {
	border-block: 1px solid var(--dief-linea);
	background: var(--dief-blanco);
	text-align: center;
}
.dief-versiculo p {
	font-family: var(--dief-serif);
	font-style: italic;
	font-size: clamp(1.05rem, 2.2vw, 1.4rem);
	line-height: 1.45;
	color: var(--dief-marino);
	max-width: 46ch;
	margin-inline: auto;
}
.dief-versiculo cite,
.dief-versiculo .dief-cita-fuente {
	display: block;
	margin-top: .6rem;
	font-family: var(--dief-sans);
	font-style: normal;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--dief-dorado-oscuro);
}

/* =========================================================================
   Cifras de impacto
   ========================================================================= */
.dief-cifras {
	border: 1px solid var(--dief-linea);
	border-radius: var(--dief-radio);
	overflow: hidden;
	background: var(--dief-linea);
	gap: 1px !important;
}
.dief-cifras > .wp-block-column {
	background: var(--dief-blanco);
	padding: 1.4rem 1.25rem;
	margin: 0;
}
.dief-cifra-numero {
	font-family: var(--dief-serif);
	font-size: clamp(1.9rem, 4.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1;
	color: var(--dief-marino);
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.dief-cifra-texto {
	font-size: .84rem;
	line-height: 1.4;
	color: var(--dief-tinta-suave);
	margin: .5rem 0 0;
}

/* =========================================================================
   Tarjetas de programa
   ========================================================================= */
.dief-programa {
	background: var(--dief-blanco);
	border: 1px solid var(--dief-linea);
	border-radius: var(--dief-radio);
	overflow: hidden;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	position: relative;
}
.dief-programa::before {
	content: "";
	display: block;
	height: 6px;
	background: var(--dief-color-programa, var(--dief-azul-rey));
}
.dief-programa > * { padding-inline: 1.5rem; }
.dief-programa > *:first-child { padding-top: 1.4rem; }
.dief-programa > *:last-child { padding-bottom: 1.4rem; }
.dief-programa h3 {
	color: var(--dief-color-programa, var(--dief-azul-rey));
	font-size: 1.3rem;
	margin: 0;
}
.dief-programa p { font-size: .95rem; color: var(--dief-tinta-suave); }
.dief-programa ul { font-size: .92rem; color: var(--dief-tinta-suave); }
.dief-programa .dief-etiqueta {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dief-tinta-suave);
	margin: 0 0 .35rem;
}

/* Colores por programa: se aplican con una clase en la columna */
.dief-programa-1 { --dief-color-programa: var(--dief-azul-rey); }
.dief-programa-2 { --dief-color-programa: var(--dief-dorado-oscuro); }
.dief-programa-3 { --dief-color-programa: var(--dief-laurel); }
.dief-programa-4 { --dief-color-programa: var(--dief-marino-profundo); }

/* =========================================================================
   Rejilla de valores
   ========================================================================= */
.dief-valores {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--dief-linea);
	border: 1px solid var(--dief-linea);
	border-radius: var(--dief-radio);
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
}
.dief-valores li {
	background: var(--dief-blanco);
	padding: 1rem 1.15rem;
	font-family: var(--dief-serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--dief-marino);
}

/* =========================================================================
   Tarjetas genéricas
   ========================================================================= */
.dief-tarjeta {
	background: var(--dief-blanco);
	border: 1px solid var(--dief-linea);
	border-radius: var(--dief-radio);
	padding: 1.5rem;
}

/* =========================================================================
   Donaciones
   ========================================================================= */
.dief-aporte {
	background: var(--dief-blanco);
	border: 1px solid var(--dief-linea);
	border-radius: var(--dief-radio);
	padding: 1.35rem;
}
.dief-aporte-monto {
	font-family: var(--dief-serif);
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--dief-dorado-oscuro);
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.dief-aporte p:not(.dief-aporte-monto) {
	font-size: .92rem;
	color: var(--dief-tinta-suave);
	margin: .5rem 0 0;
}

/* Lista de datos (banco, contacto): etiqueta a la izquierda, valor a la derecha */
.dief-datos { list-style: none; margin: 0; padding: 0; }
.dief-datos li {
	display: flex;
	justify-content: space-between;
	gap: .9rem;
	font-size: .92rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--dief-linea);
}
.dief-datos li:last-child { border-bottom: 0; }
.dief-datos li > :first-child { color: var(--dief-tinta-suave); flex: none; }
.dief-datos li > :last-child { font-weight: 700; text-align: right; word-break: break-word; }

/* =========================================================================
   Nota para el editor · solo visible dentro del administrador
   ========================================================================= */
.nota-editor {
	font-size: .82rem;
	line-height: 1.5;
	color: var(--dief-tinta-suave);
	background: var(--dief-fondo);
	border-left: 3px solid var(--dief-dorado);
	border-radius: 0 7px 7px 0;
	padding: .7rem .9rem;
}
/* En el sitio público no se muestra: es una instrucción interna, no contenido */
body:not(.wp-admin) .nota-editor { display: none; }

/* =========================================================================
   Pie del sitio
   ========================================================================= */
.dief-pie {
	background: var(--dief-marino-profundo);
	color: #BFD2EE;
}
.dief-pie :where(p, li, .wp-block-site-tagline) { color: #BFD2EE; font-size: .92rem; }
.dief-pie :where(h2, h3, h4) {
	color: #fff;
	font-family: var(--dief-sans);
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.dief-pie a { color: #BFD2EE; text-decoration: none; }
.dief-pie a:hover { color: #fff; text-decoration: underline; }
.dief-pie .wp-block-navigation { font-size: .92rem; }
.dief-pie-legal {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 1rem;
	font-size: .78rem;
	color: #8FA7CC;
}

/* =========================================================================
   Encabezado
   ========================================================================= */
.dief-encabezado {
	background: var(--dief-blanco);
	border-bottom: 1px solid var(--dief-linea);
}
.dief-encabezado .wp-block-navigation { font-size: .92rem; }
.dief-encabezado .wp-block-navigation a { text-decoration: none; }
.dief-encabezado .wp-block-navigation .current-menu-item > a {
	color: var(--dief-marino);
	font-weight: 700;
}

/* =========================================================================
   Eventos
   ========================================================================= */
.dief-evento {
	background: var(--dief-blanco);
	border: 1px solid var(--dief-linea);
	border-radius: var(--dief-radio);
	padding: 1.1rem 1.25rem;
	align-items: center;
}
.dief-evento-fecha {
	background: var(--dief-cielo);
	border-radius: 9px;
	text-align: center;
	padding: .55rem .4rem;
}
.dief-evento-fecha .dief-dia {
	display: block;
	font-family: var(--dief-serif);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1;
	color: var(--dief-marino-profundo);
	margin: 0;
}
.dief-evento-fecha .dief-mes {
	display: block;
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dief-marino);
	margin: .2rem 0 0;
}

/* =========================================================================
   Marcador de fotografía pendiente
   ========================================================================= */
.dief-foto-pendiente {
	border: 1.5px dashed var(--dief-linea);
	border-radius: var(--dief-radio);
	background: var(--dief-fondo);
	padding: 1.6rem 1.25rem;
	text-align: center;
	color: var(--dief-tinta-suave);
	font-size: .85rem;
}
.dief-foto-pendiente strong {
	display: block;
	font-family: var(--dief-serif);
	color: var(--dief-tinta);
	font-size: .95rem;
	margin-bottom: .3rem;
}

/* =========================================================================
   Formularios (Charitable, WPForms, The Events Calendar)
   Les damos el mismo aspecto que al resto del sitio.
   ========================================================================= */
.dief-tarjeta input[type="text"],
.dief-tarjeta input[type="email"],
.dief-tarjeta input[type="tel"],
.dief-tarjeta input[type="number"],
.dief-tarjeta select,
.dief-tarjeta textarea,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea,
.charitable-form-field input,
.charitable-form-field select,
.charitable-form-field textarea {
	font-family: var(--dief-sans);
	font-size: 1rem;
	color: var(--dief-tinta);
	background: var(--dief-fondo);
	border: 1px solid var(--dief-linea);
	border-radius: 8px;
	padding: .7rem .8rem;
	width: 100%;
}

.wpforms-container button[type="submit"],
.charitable-form .charitable-submit-field button,
.tribe-common .tribe-common-c-btn {
	font-family: var(--dief-sans) !important;
	font-weight: 700 !important;
	background: var(--dief-marino) !important;
	color: #fff !important;
	border-radius: 8px !important;
	border: 0 !important;
	padding: .7rem 1.25rem !important;
}
.wpforms-container button[type="submit"]:hover,
.charitable-form .charitable-submit-field button:hover,
.tribe-common .tribe-common-c-btn:hover {
	background: var(--dief-azul-rey) !important;
}

/* El botón de donar siempre en dorado, para que destaque sobre el resto */
.dief-boton-donar .wp-block-button__link,
.charitable-donation-form .charitable-submit-field button {
	background-color: var(--dief-dorado) !important;
	color: #2A1C00 !important;
}
.dief-boton-donar .wp-block-button__link:hover {
	background-color: #EDC268 !important;
	color: #2A1C00 !important;
}

/* =========================================================================
   Impresión
   ========================================================================= */
@media print {
	.dief-portada::after,
	.wp-block-navigation,
	.dief-pie { display: none !important; }
	body { background: #fff; }
}