/*
Theme Name: Abad Associats
Theme URI:
Description: Tema WordPress independiente para Abad Associats Advocats (despacho de abogados, Costa Brava). Construido con bloques nativos de Gutenberg y ACF para los campos editables. Multilenguaje (CA/ES/EN).
Author:
Author URI:
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: abad-associats
*/

/* -----------------------------------------------------------------------
 * Reset básico
 * ----------------------------------------------------------------------- */
:root {
	/* Altura aproximada del header (.site-header), usada por bloques como
	   el Hero para calcular una altura "pantalla completa" que no se pase
	   del viewport una vez sumada la cabecera. */
	--header-height: 88px;
}

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

body {
	margin: 0;
	overflow-x: hidden;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Reparte el texto de los títulos entre líneas de forma equilibrada en
   lugar de dejar un huérfano suelto (p. ej. una sola palabra en la última
   línea). Es el motivo por el que los H1/H2 traducidos a catalán/castellano
   -más largos que el original en inglés- ya no rompen de forma torpe;
   se ignora sin más en navegadores que no soportan la propiedad. */
h1,
h2,
h3 {
	text-wrap: balance;
}

/* -----------------------------------------------------------------------
 * Utilidades de layout
 * ----------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: 20px;
}

/*
 * Los bloques con alineación "ancha" o "completa" (align: wide / full en
 * block.json) deben poder escapar de .container, aunque estén anidados
 * dentro de page.php/index.php. Truco estándar: recentrar respecto al
 * viewport en lugar del contenedor padre.
 */
.alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* -----------------------------------------------------------------------
 * Accesibilidad
 * ----------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--wp--preset--color--dark, #141414);
	color: var(--wp--preset--color--base, #fff);
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

/* -----------------------------------------------------------------------
 * Header
 * ----------------------------------------------------------------------- */
.site-header {
	background: var(--wp--preset--color--dark, #141414);
}

.site-header__inner {
	display: flex;
	/* Salvavidas: si el menú y las acciones no caben junto al logo en una
	   sola fila (idiomas con textos más largos, ventanas más estrechas),
	   la fila entera hace wrap en lugar de comprimir o partir el texto
	   de los enlaces (ver white-space:nowrap en .main-navigation a). */
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	min-height: var(--header-height);
	padding-block: 16px;
}

.site-branding {
	/* Recuadro blanco detrás del logo: sobre el fondo oscuro del header el
	   logo (con su propio blanco/negro internos) perdía legibilidad.
	   Altura fija + overflow:hidden para que el recuadro no sobresalga ni
	   un píxel del propio logo (coincide con el max-height de abajo). */
	display: flex;
	align-items: center;
	height: 56px;
	overflow: hidden;
	background: var(--wp--preset--color--base, #fff);
	line-height: 0;
	/* Pegado más al margen izquierdo real del viewport, compensando el
	   padding-inline de .container. */
	margin-left: -20px;
}

.site-branding .site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large, 1.375rem);
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

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

.site-branding .custom-logo {
	display: block;
	width: auto;
	max-height: 56px;
}

/* Menú principal (nivel superior, en línea). Los submenús (.sub-menu) se
   estilan aparte más abajo: no deben heredar este flex en fila. */
.main-navigation > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* white-space:nowrap evita que las etiquetas más largas en catalán/castellano
   se partan a media palabra: si no caben, el elemento entero salta de línea
   (ver flex-wrap arriba) en lugar de romper el texto dentro de un mismo enlace. */
.main-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--base, #fff);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.main-navigation a:hover {
	color: var(--wp--preset--color--accent, #a6873c);
}

/* Elemento de menú con submenú (p. ej. "Property advice"): flecha y
   posicionamiento relativo para anclar el desplegable. */
.main-navigation .menu-item-has-children {
	position: relative;
}

.main-navigation .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.main-navigation .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

/* Desplegable: oculto por defecto, visible al pasar el ratón o al tener
   el foco (teclado) dentro del elemento de menú. */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 260px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: var(--wp--preset--color--dark, #141414);
	border-top: 2px solid var(--wp--preset--color--accent, #a6873c);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu a {
	display: block;
	padding: 10px 24px;
	white-space: nowrap;
}

/* -----------------------------------------------------------------------
 * Acciones del header: selector de idioma + botón CTA
 * ----------------------------------------------------------------------- */
.header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* El selector de idioma (.lang-nav) es un <nav class="main-navigation
   lang-nav">, así que hereda el estilo de enlace, tamaño de fuente y el
   comportamiento de desplegable (flecha + .sub-menu al hover/foco) de las
   reglas de .main-navigation de más arriba sin duplicarlas. */
.lang-nav > ul {
	gap: 0;
}

.header-cta ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-cta a.btn {
	padding: 10px 20px;
	white-space: nowrap;
}

/* -----------------------------------------------------------------------
 * Menú móvil (hamburguesa)
 * En escritorio el botón permanece oculto y `.site-header__nav` no genera
 * caja propia (display:contents), así que `.main-navigation` y
 * `.header-actions` siguen siendo hijos directos de `.site-header__inner`
 * exactamente como antes: cero cambios visuales por encima del breakpoint.
 * ----------------------------------------------------------------------- */
.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.nav-toggle__box {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--base, #fff);
	transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.nav-toggle__bar {
	top: 7px;
}

.nav-toggle__bar::before {
	content: "";
	top: -7px;
}

.nav-toggle__bar::after {
	content: "";
	top: 7px;
}

/* Estado abierto: la barra central desaparece y las otras dos forman una X. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
	top: 0;
	transform: rotate(-45deg);
}

.site-header__nav {
	display: contents;
}

/* -----------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------------- */
.site-footer {
	background: var(--wp--preset--color--dark, #141414);
	color: var(--wp--preset--color--base, #fff);
	margin-top: 64px;
}

.site-footer__inner {
	padding-block: 40px;
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.footer-navigation a {
	color: var(--wp--preset--color--base, #fff);
	text-decoration: none;
}

.footer-navigation a:hover {
	color: var(--wp--preset--color--accent, #a6873c);
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	opacity: 0.8;
}

/* -----------------------------------------------------------------------
 * Contenido / entradas
 * ----------------------------------------------------------------------- */
.site-main {
	display: block;
}

.post-list {
	display: grid;
	gap: 40px;
	padding-block: 40px;
}

.page-header,
.page-content {
	padding-block: 40px;
}

.single-entry__thumbnail {
	margin-bottom: 24px;
}

.single-entry__thumbnail img {
	width: 100%;
	height: auto;
}

.single-entry__meta {
	margin: 0 0 24px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2, #6b7280);
}

.single-entry__content {
	max-width: 760px;
}

.single-entry__content :where(h2, h3) {
	margin-top: 1.6em;
}

/* -----------------------------------------------------------------------
 * MÓVIL / TABLET — header
 * Por debajo de este ancho el menú, el selector de idioma y el CTA no
 * caben en una sola fila junto al logo, así que se agrupan en un panel
 * desplegable controlado por `.nav-toggle` (ver custom.js).
 * ----------------------------------------------------------------------- */
@media (max-width: 860px) {
	.nav-toggle {
		display: inline-flex;
		order: 2;
		margin-left: auto;
	}

	.site-header__nav {
		display: none;
		order: 3;
		flex: 1 0 100%;
	}

	.site-header__nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding-top: 20px;
		padding-bottom: 24px;
		margin-top: 8px;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.site-header__nav .main-navigation,
	.site-header__nav .header-actions {
		width: 100%;
	}

	.site-header__nav .main-navigation > ul,
	.site-header__nav .header-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	/* En el panel móvil el desplegable de idioma no depende del hover (no
	   existe en táctil): se muestra siempre expandido en línea, en vez de
	   flotar sobre el resto del contenido. */
	.site-header__nav .main-navigation .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		transform: none;
		width: 100%;
		margin-top: 10px;
		padding: 0 0 0 16px;
		border-top: 0;
		box-sizing: border-box;
	}

	.site-header__nav .main-navigation .menu-item-has-children > a::after {
		display: none;
	}

	.header-cta {
		width: 100%;
	}

	.header-cta a.btn {
		width: 100%;
		justify-content: center;
	}
}