/*
Theme Name: Virginia Ferre
Theme URI: https://www.virginiaferre.es/
Author: Virginia Ferre
Description: Tema hijo de Twenty Twenty-Five que reproduce el diseño de virginiaferre.es (tipografía Bubbler One autoalojada, paleta y componentes del original).
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 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: virginiaferre
*/

/* ==========================================================================
   Tokens extra (los colores de la paleta viven en theme.json:
   var(--wp--preset--color--{base|contrast|primary|secondary|accent|soft|neutral}))
   ========================================================================== */
:root {
	--vf-header-h: 82px;          /* alto de la cabecera fija en escritorio (original: 82px) */
	--vf-adminbar-h: 0px;
	--vf-section-pad: 50px;       /* padding vertical por defecto de cada bloque del original */
	--vf-gutter: 15px;            /* medio gutter de Bootstrap (col padding / container padding) */
	--vf-gray-1: #f7f7f7;         /* fondos claros usados en algunas secciones del original */
	--vf-gray-2: #f2f2f2;
	--vf-text-alt: #7d7669;       /* texto secundario (reseñas/eventos) */
	--vf-dark: #333333;
	--vf-radius: 3px;
	--vf-font-btn: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (max-width: 992px) {
	:root { --vf-header-h: 70px; }
}

body.admin-bar { --vf-adminbar-h: 32px; }

@media (max-width: 782px) {
	body.admin-bar { --vf-adminbar-h: 46px; }
}

/* ==========================================================================
   Base
   ========================================================================== */
/* Modelo de caja de Bootstrap (el original): el padding no ensancha columnas */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Anclas del menú: que el título no quede bajo la cabecera fija */
:where([id]) {
	scroll-margin-top: calc(var(--vf-header-h) + var(--vf-adminbar-h));
}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* Plantillas front-page / page-sin-titulo: sin huecos entre cabecera, contenido y pie */
:root .wp-site-blocks > .vf-main,
:root .wp-site-blocks > .vf-main + * {
	margin-block-start: 0;
}

:root .wp-site-blocks > .vf-main {
	margin-block-end: 0;
	padding: 0;
}

:root .vf-main > .wp-block-post-content {
	margin-block: 0;
}

/* ==========================================================================
   Sección (.vf-section = un bloque del original). Usar con .vf-sNN
   ========================================================================== */
:root .vf-section {
	position: relative;
	margin-block: 0;
	padding-top: var(--vf-section-pad);
	padding-bottom: var(--vf-section-pad);
}

:root .vf-section.vf-pt-0 { padding-top: 0; }
:root .vf-section.vf-pb-0 { padding-bottom: 0; }

/* ==========================================================================
   Botones: idénticos a .boton-generico del original
   (fuente Montserrat no cargada => Helvetica Neue/Arial, 20px, 700, MAYÚSCULAS,
   padding 10px 20px, radio 3px, sin borde). El hover no cambia colores, como en el original.
   ========================================================================== */
.wp-element-button,
.wp-block-button__link,
.vf-btn {
	display: inline-block;
	font-family: var(--vf-font-btn);
	font-size: 20px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
	white-space: normal;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--vf-radius);
	cursor: pointer;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.vf-btn:hover,
.wp-element-button:focus,
.wp-block-button__link:focus,
.vf-btn:focus {
	text-decoration: none;
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.vf-btn:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
}

/* Variantes de color (en el original cada bloque pinta su botón con el color de su título) */
:root .vf-btn--primary,   :root .vf-btn--primary .wp-block-button__link   { background-color: var(--wp--preset--color--primary);   color: var(--wp--preset--color--base); }
:root .vf-btn--secondary, :root .vf-btn--secondary .wp-block-button__link { background-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--base); }
:root .vf-btn--neutral,   :root .vf-btn--neutral .wp-block-button__link   { background-color: var(--wp--preset--color--neutral);   color: var(--wp--preset--color--base); }
:root .vf-btn--contrast,  :root .vf-btn--contrast .wp-block-button__link  { background-color: var(--wp--preset--color--contrast);  color: var(--wp--preset--color--base); }
:root .vf-btn--accent,    :root .vf-btn--accent .wp-block-button__link    { background-color: var(--wp--preset--color--accent);    color: var(--wp--preset--color--base); }

/* Botón CONTACTO de la cabecera (lo usa P7): Bubbler One 14px, fondo blanco, texto primary */
:root .vf-btn--nav,
:root .vf-btn--nav .wp-block-button__link {
	font-family: var(--wp--preset--font-family--bubbler-one);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 10px 1.2rem;
	border-radius: .2rem;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	transition: all .4s;
}

:root .vf-btn--nav:hover,
:root .vf-btn--nav .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   Utilidades mínimas
   ========================================================================== */

/* Título de bloque (.bloque-title del original) */
:root .vf-title {
	text-align: center;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.1;
	margin-top: 10px;
	margin-bottom: 45px;
}

:root .vf-title--lg { margin-bottom: 90px; }            /* bloques de iconos */
:root .vf-title--sm { margin-top: 0; margin-bottom: 15px; } /* blog, testimonios, botón */

@media (max-width: 768px) {
	:root .vf-title { margin-bottom: 60px; padding-inline: 15px; }
	:root .vf-title--lg { margin-bottom: 90px; }  /* en el original los iconos mantienen 90px */
	:root .vf-title--sm { margin-bottom: 15px; }
}

/* Columna de texto de los bloques texto+imagen (.bg .text del original) */
:root .vf-textcol {
	padding: 75px 6%;
}

@media (max-width: 991.98px) {
	:root .vf-textcol { padding: 0 30px; }
}

/* Columnas que se apilan por debajo de 992px (col-lg-* de Bootstrap) */
@media (max-width: 991.98px) {
	:root .vf-stack-lg.wp-block-columns { flex-wrap: wrap !important; }
	:root .vf-stack-lg.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}

/* Fila a sangre sin hueco entre columnas (imagen pegada al borde) */
:root .vf-flush.wp-block-columns { gap: 0; margin-block: 0; }

/* Imagen que cubre su columna (bg_cover del original) */
:root .vf-cover-img,
:root .vf-cover-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Texto en mayúsculas y centrado */
.vf-upper { text-transform: uppercase; }
.vf-center { text-align: center; }

/* Ocultar solo en móvil / solo en escritorio */
@media (max-width: 767.98px) { .vf-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .vf-hide-desktop { display: none !important; } }

/* Orquestador (Fase 2): TT25 aplica text-wrap:pretty a títulos y párrafos; el original usa el corte normal. */
:root :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, caption, figcaption) {
	text-wrap: wrap;
}