/*
Theme Name: Divine Bridge
Theme URI: https://wordpress.org/
Author: Divine Bridge
Description: Tema alineado al design system «Sovereign Authority»: mar profundo y oro editorial, tipografía Noto Serif + Manrope, capas sin líneas duras. Compatible con Elementor y Theme Builder (Pro).
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
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: divine-bridge
Tags: blog, custom-menu, featured-images, full-width-template, translation-ready
*/

/* --------------------------------------------------------------------------
   Design tokens — Sovereign Authority
   -------------------------------------------------------------------------- */
:root {
	/* Superficies (jerarquía tonal, sin bordes duros entre secciones) */
	--db-surface: #f8f9fa;
	--db-surface-container-low: #f3f4f5;
	--db-surface-container: #edeeef;
	--db-surface-container-high: #eaebec;
	--db-surface-container-highest: #e4e5e7;
	--db-surface-container-lowest: #ffffff;

	/* Marca */
	--db-primary-container: #0d1c32;
	--db-secondary: #775a19;
	--db-secondary-container: #fed488;
	--db-secondary-fixed-dim: #4d3a11;
	--db-on-secondary-fixed: #1c1408;

	/* Texto (nunca negro puro) */
	--db-on-surface: #1b1c1e;
	--db-on-background: #1b1c1e;
	--db-on-surface-variant: #45474a;

	/* Contornos «fantasma» */
	--db-outline-variant: rgba(27, 28, 30, 0.15);
	--db-ambient-shadow: 0 20px 40px rgba(27, 28, 30, 0.05);

	/* Tipografía */
	--db-font-display: "Noto Serif", Georgia, "Times New Roman", serif;
	--db-font-body: "Manrope", system-ui, -apple-system, sans-serif;

	/* Escala tipográfica */
	--db-display-lg: 3.5rem;
	--db-body-lg: 1rem;
	--db-label-tracking: 0.1em;

	/* Radios */
	--db-radius-sm: 0.25rem;
	--db-radius-md: 0.375rem;
	--db-radius-xl: 0.75rem;

	/* Espaciado (tokens del documento) */
	--db-space-4: 1.4rem;
	--db-space-8: 2.75rem;
	--db-space-16: 5.5rem;

	/* Compatibilidad con reglas anteriores del tema */
	--color-bg: var(--db-surface);
	--color-text: var(--db-on-surface);
	--color-muted: var(--db-on-surface-variant);
	--color-accent: var(--db-secondary);
	--color-accent-hover: #8f6f24;
	--font-sans: var(--db-font-body);
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--content-max: 42rem;
	--header-max: 72rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--db-font-body);
	font-size: var(--db-body-lg);
	line-height: 1.65;
	color: var(--db-on-surface);
	background: var(--db-surface);
}

a {
	color: var(--db-secondary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
	color: var(--color-accent-hover);
}

img,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.entry__content img,
.entry__thumb img,
.wp-block-image img {
	border-radius: var(--db-radius-xl);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Cabecera tipo cristal (surface_container_lowest ~70 % + blur) */
.site-header {
	background: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: var(--db-ambient-shadow);
}

.site-header__inner {
	max-width: var(--header-max);
	margin: 0 auto;
	padding: var(--space-sm) var(--space-md);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}

.site-title {
	margin: 0;
	font-family: var(--db-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--db-on-surface);
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

.site-title a:hover,
.site-title a:focus-visible {
	color: var(--db-secondary);
}

.site-main {
	flex: 1;
	max-width: var(--header-max);
	width: 100%;
	margin: 0 auto;
	padding: var(--db-space-8) var(--space-md);
}

.site-footer {
	margin-top: auto;
	background: var(--db-surface-container-low);
	padding: var(--space-md);
	text-align: center;
	font-size: 0.875rem;
	color: var(--db-on-surface-variant);
}

/* --------------------------------------------------------------------------
   Navegación
   -------------------------------------------------------------------------- */
.primary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-md);
}

.primary-nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--db-on-surface);
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
	color: var(--db-secondary);
}

.primary-nav .current-menu-item > a {
	color: var(--db-secondary);
	text-decoration: none;
	border-bottom: 1px solid rgba(119, 90, 25, 0.35);
	padding-bottom: 2px;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

/* --------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */
.entry-list {
	display: flex;
	flex-direction: column;
	gap: var(--db-space-16);
}

.entry {
	max-width: var(--content-max);
}

.entry__title {
	margin: 0 0 var(--space-xs);
	font-family: var(--db-font-display);
	font-size: clamp(1.75rem, 4vw, var(--db-display-lg));
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--db-on-surface);
}

.entry__title a {
	color: inherit;
	text-decoration: none;
}

.entry__title a:hover,
.entry__title a:focus-visible {
	color: var(--db-secondary);
}

.entry__meta {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--db-label-tracking);
	text-transform: uppercase;
	color: var(--db-secondary);
	margin-bottom: var(--space-sm);
}

.entry__content > *:first-child {
	margin-top: 0;
}

.entry__content > *:last-child {
	margin-bottom: 0;
}

.pagination {
	margin-top: var(--db-space-8);
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

/* Botón «Jewel» (tema, no Elementor) */
button,
input[type="submit"],
.wp-block-button__link {
	font-family: var(--db-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: var(--db-radius-md);
	color: var(--db-on-secondary-fixed);
	background-color: transparent;
	background-image: linear-gradient(
		45deg,
		var(--db-secondary) 0%,
		var(--db-secondary-fixed-dim) 100%
	);
	box-shadow: var(--db-ambient-shadow);
	transition:
		filter 0.2s ease,
		transform 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	filter: brightness(1.08);
}

button:active,
input[type="submit"]:active,
.wp-block-button__link:active {
	transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   Comentarios y formularios
   -------------------------------------------------------------------------- */
.comments-area {
	margin-top: var(--db-space-8);
	max-width: var(--content-max);
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-md);
}

.comment-body {
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: none;
	box-shadow: 0 1px 0 var(--db-outline-variant);
}

input[type="text"],
input[type="email"],
input[type="url"],
textarea {
	width: 100%;
	max-width: 100%;
	padding: var(--space-xs) var(--space-sm);
	font: inherit;
	font-family: var(--db-font-body);
	border: 1px solid transparent;
	border-radius: var(--db-radius-md);
	background: var(--db-surface-container-highest);
	color: var(--db-on-surface);
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus {
	outline: none;
	background: var(--db-surface-container-lowest);
	border-color: rgba(119, 90, 25, 0.45);
	box-shadow: 0 0 0 1px rgba(119, 90, 25, 0.2);
}

/* --------------------------------------------------------------------------
   Elementor (ancho completo con plantilla del tema)
   -------------------------------------------------------------------------- */
/*
 * .site-main usa padding vertical (--db-space-8) por defecto; en páginas
 * Elementor (plantilla «Default» del tema) eso deja franjas gris/claro arriba
 * y abajo del contenido. Canvas no usa .site-main (plantilla propia).
 */
body.elementor-page:not(.elementor-template-canvas) .site-main {
	max-width: none;
	width: 100%;
	padding: 0;
}

body.elementor-page:not(.elementor-template-canvas) .entry {
	max-width: none;
	margin: 0;
}

body.elementor-page:not(.elementor-template-canvas) .entry__content {
	margin: 0;
	padding: 0;
}

body.elementor-page:not(.elementor-template-canvas) .comments-area {
	max-width: none;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

/* Plantilla «Elementor Canvas»: sin envoltorio del tema; evita márgenes extra */
body.elementor-template-canvas {
	margin: 0;
	padding: 0;
}

/*
 * Con sesión iniciada, WordPress aplica margin-top al html por la admin bar;
 * el hueco suele verse «blanco» si el fondo del html no coincide con el body.
 */
html.admin-bar {
	background-color: var(--db-surface);
}