/*
Theme Name: Gavinter
Theme URI: https://gavinter.com/
Author: Glaydston Veloso
Author URI: https://gilbertoatencio.com/
Description: Tema de bloques (Full Site Editing) para Gavinter, consultora de servicios juridicos internacionales del Despacho Gilberto Atencio. Paleta azul marino de marca, tipografia sans-serif limpia. Disenado para respetar la landing de portada en bloques.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gavinter
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, translation-ready, business
*/

/* --------------------------------------------------------------------------
   Titulares: evitar que las palabras se partan/silaben en escritorio.
   Corrige casos como "¿Hablamo s de tu futuro?" en headings anchos.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
	overflow-wrap: normal;
	word-break: normal;
	word-wrap: normal;
	-webkit-hyphens: none;
	hyphens: none;
}

/* En pantallas amplias, permitir que los titulares largos usen todo el ancho
   disponible sin cortes bruscos. */
@media (min-width: 782px) {
	h1, h2, .wp-block-heading {
		text-wrap: balance;
	}
}


/* ---------------------------------------------------------------------------
   Anchos de contenido — arreglo de layout (4 ago 2026)
   PROBLEMA: los bloques wp:cover de la landing traen su contenedor interno como
   "is-layout-flow" (sin constrained), así que ignoraban el contentSize de
   theme.json y el texto se pegaba a los bordes (1665px en un viewport de 1728).
   Se constriñe aquí, en el tema, para no tener que reescribir el contenido.
--------------------------------------------------------------------------- */
.wp-block-cover__inner-container {
  max-width: var(--wp--style--global--content-size, 1200px);
  margin-inline: auto;
  width: 100%;
}

/* La "píldora" del hero (párrafo con fondo) era block y ocupaba todo el ancho.
   Debe ajustarse a su contenido, como en el diseño de Figma. */
.wp-block-cover__inner-container > p.has-background:first-child {
  display: inline-block;
  width: auto;
}


/* ---------------------------------------------------------------------------
   Nota (4 ago 2026) — colisión de clases resuelta en theme.json.
   El slug de paleta «border» hacía que WordPress generase
   `.has-border-color{color:var(--wp--preset--color--border)!important}`,
   que chocaba con la clase `has-border-color` que el propio WordPress añade a
   CUALQUIER bloque con color de borde propio. Resultado: el texto de esos
   bloques (botones outline del hero, tarjetas del blog) salía en gris #e2e8f0,
   ilegible. El slug se ha renombrado a «line»; no hace falta CSS extra.
--------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   Formulario de contacto (Contact Form 7)
   CF7 no aporta estilos propios: sin esto los campos salen como inputs nativos
   del navegador, muy lejos del diseño de Figma (campos grandes, fondo gris
   claro, esquinas muy redondeadas y botón azul a ancho completo).
--------------------------------------------------------------------------- */
.wpcf7 p { margin: 0 0 1rem; }

.wpcf7 label {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	color: #172554;
	line-height: 1.4;
}

.wpcf7 label br { display: none; }

.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 0.4rem; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.95rem 1.15rem;
	background-color: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: #0f172a;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7 textarea { resize: vertical; min-height: 8rem; }

/* Ojo: aqui habia un `outline: none`. Lo unico que quedaba entonces era el
   box-shadow al 18% de opacidad, practicamente invisible. El anillo de foco lo
   pone ahora la regla global :focus-visible de mas abajo; este resaltado del
   borde es solo el complemento visual del campo activo. */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	border-color: #1d4ed8;
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.22);
}

/* #9ca3af sobre el #f9fafb del campo daba 2.4:1. #6b7280 da 4.8:1 y sigue
   distinguiendose del texto ya escrito (#0f172a). */
.wpcf7 ::placeholder { color: #6b7280; font-weight: 500; }

/* --------------------------------------------------------------------------
   Foco visible (WCAG 2.4.7)
   El tema no definia ninguna regla de foco: el unico indicador era el outline
   por defecto del navegador, anulado ademas en los campos del formulario. Sin
   esto, recorrer la pagina con Tab es a ciegas.
   Se usa :focus-visible (no :focus) para que el anillo no salte al hacer clic
   con el raton, solo al navegar con teclado.
   -------------------------------------------------------------------------- */
:where(a[href], button, summary, input, select, textarea,
       [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid #1d4ed8;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Sobre el azul marino de marca (#172554) un anillo azul no se distingue del
   fondo. Son la seccion CTA "¿Hablamos de tu futuro?" y la tarjeta destacada
   del blog. */
.has-brand-background-color :focus-visible,
[style*="#172554"] :focus-visible,
[style*="rgb(23, 37, 84)"] :focus-visible {
	outline-color: #ffffff;
}

/* Casilla de consentimiento RGPD */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: #475569;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.15rem;
	flex: 0 0 auto;
	accent-color: #1e3a8a;
}

/* Boton de envio */
.wpcf7 input[type="submit"] {
	width: 100%;
	margin-top: 0.5rem;
	padding: 1.05rem 2rem;
	background-color: #1e3a8a;
	color: #ffffff;
	border: 0;
	border-radius: 16px;
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 800;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wpcf7 input[type="submit"]:hover { background-color: #172554; }
.wpcf7 input[type="submit"]:disabled { opacity: 0.6; cursor: default; }

/* Mensajes de validacion */
.wpcf7 .wpcf7-not-valid-tip { font-size: 0.8rem; font-weight: 600; color: #b91c1c; margin-top: 0.3rem; }
.wpcf7 .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.1rem;
	border-width: 1px;
	border-radius: 14px;
	font-size: 0.9rem;
}


/* Píldoras: cualquier párrafo/etiqueta con fondo que haga de "pill" debe ajustarse
   a su contenido, no ocupar el ancho del contenedor. Antes solo se corregía dentro
   de wp:cover, y las de las secciones en wp:group seguían estirándose. */
.gv-pill,
.wp-block-cover__inner-container > p.has-background:first-child,
.wp-block-post .wp-block-post-terms.has-background {
  display: inline-block;
  width: auto;
  max-width: max-content;
}