/*
 * Estilos propios del proyecto Abad Associats.
 * Sistema de diseño (colores/tipografía) en theme.json — este fichero define
 * componentes reutilizables (botones, número decorativo, icono de acordeón)
 * y utilidades de sección, a la espera de construir los bloques nativos.
 */

/* -----------------------------------------------------------------------
 * Utilidades de sección (fondos alternos del diseño de referencia)
 * ----------------------------------------------------------------------- */
.section {
	padding-block: 80px;
}

.section-dark {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
}

.section-light {
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--contrast);
}

.section-white {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.section-dark a {
	color: var(--wp--preset--color--accent);
}

.section-dark a:hover {
	color: var(--wp--preset--color--base);
}

/* -----------------------------------------------------------------------
 * Componente: Botones
 * Radio de borde 0 en todo el sitio (estética recta/seria del despacho).
 * ----------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 32px;
	border: 1px solid transparent;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Botón primario: sólido, pensado para CTAs sobre foto (p. ej. el Hero). */
.btn-primary {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.btn-primary:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Botón secundario: borde dorado, para CTAs sobre fondo claro. */
.btn-secondary {
	background: transparent;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.btn-secondary:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Variante del botón secundario para usarlo sobre fondo oscuro. */
.btn-secondary--on-dark {
	color: var(--wp--preset--color--base);
}

.btn-secondary--on-dark:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--dark);
}

/* Enlace-CTA con flecha (p. ej. "View fees ⟶"), sin fondo ni borde. */
.btn-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--wp--preset--color--accent);
}

.btn-link:hover {
	color: var(--wp--preset--color--contrast);
}

.btn-link--on-dark {
	color: var(--wp--preset--color--base);
}

.btn-link--on-dark:hover {
	color: var(--wp--preset--color--accent);
}

.btn-link::after {
	content: "\2192"; /* → */
	text-decoration: none;
}

/* -----------------------------------------------------------------------
 * Componente: Número decorativo (01, 02, 03…)
 * Usado en los puntos de confianza de la intro y en las tarjetas de
 * "Property advice".
 * ----------------------------------------------------------------------- */
.deco-number {
	display: block;
	margin-bottom: 4px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

/* -----------------------------------------------------------------------
 * Componente: Icono circular "+"
 * Usado en los acordeones de "Property advice" y de FAQ. El toggle real
 * (JS + aria-expanded) se añadirá junto con esos bloques; de momento solo
 * se define el aspecto visual y el estado abierto/cerrado vía .is-open.
 * ----------------------------------------------------------------------- */
.icon-toggle {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 50%;
}

.icon-toggle::before,
.icon-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--wp--preset--color--accent);
	transition: transform 0.2s ease;
}

.icon-toggle::before {
	width: 14px;
	height: 1px;
	transform: translate(-50%, -50%);
}

.icon-toggle::after {
	width: 1px;
	height: 14px;
	transform: translate(-50%, -50%);
}

.icon-toggle.is-open::after {
	transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

/* -----------------------------------------------------------------------
 * Componente: Tarjeta de blog / guía legal
 * Usada por el bloque "Blog grid" (Home) y por archive-guia_legal.php
 * (listado completo), vía template-parts/blog-card.php — así ambas vistas
 * se ven exactamente igual.
 * ----------------------------------------------------------------------- */
.blog-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--wp--preset--color--base, #fff);
	box-shadow: 0 4px 18px rgba(20, 20, 20, 0.08);
}

.blog-card__image-link {
	display: block;
}

.blog-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.blog-card__image--placeholder {
	display: block;
	background: var(--wp--preset--color--light, #f5f3ef);
}

.blog-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 28px 28px 32px;
}

.blog-card__date {
	margin-bottom: 8px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2, #6b7280);
}

.blog-card__title {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--large, 1.375rem);
	line-height: 1.3;
}

.blog-card__title a {
	color: var(--wp--preset--color--contrast, #1a1a1a);
	text-decoration: none;
}

.blog-card__title a:hover {
	color: var(--wp--preset--color--accent);
}

.blog-card__excerpt {
	flex-grow: 1;
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2, #6b7280);
}

.blog-card__link {
	align-self: flex-start;
}

/* Cabecera + rejilla compartidas por el bloque "Blog grid" (Home) y por
   archive-guia_legal.php (listado completo). */
.blog-grid-block__header {
	max-width: 680px;
	margin: 0 0 48px;
}

/* font-size explícito porque esta cabecera se reutiliza como <h2> dentro
   del bloque de Home y como <h1> en archive-guia_legal.php: debe verse
   igual en los dos sitios, independientemente de la etiqueta. */
.blog-grid-block__title {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--x-large);
}

@media (max-width: 700px) {
	.blog-grid-block__header {
		margin-bottom: 32px;
	}
}

.blog-grid-block__intro {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2, #6b7280);
}

.blog-grid-block__empty {
	margin: 0;
	padding: 40px 0;
	color: var(--wp--preset--color--contrast-2, #6b7280);
}

.blog-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 32px;
}

@media (max-width: 700px) {
	.blog-cards-grid {
		gap: 20px;
	}
}

.blog-archive__pagination {
	margin-top: 56px;
	text-align: center;
}

.blog-archive__pagination .nav-links {
	display: inline-flex;
	align-items: center;
	gap: 24px;
}

.blog-archive__pagination a,
.blog-archive__pagination span {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--contrast, #1a1a1a);
	text-decoration: none;
}

.blog-archive__pagination a:hover {
	color: var(--wp--preset--color--accent);
}

.blog-archive__pagination .current {
	color: var(--wp--preset--color--accent);
}

/* -----------------------------------------------------------------------
 * Página de Contact: secciones de contenido bajo el Hero + mapa embebido.
 * ----------------------------------------------------------------------- */
.contact-section {
	padding-block: 56px;
}

.contact-map {
	margin-top: 24px;
}

.contact-map iframe {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
}

.contact-form-placeholder {
	padding: 24px;
	background: var(--wp--preset--color--light, #f5f3ef);
	border: 1px dashed var(--wp--preset--color--contrast-2, #6b7280);
	color: var(--wp--preset--color--contrast-2, #6b7280);
}

/* Formulario de contacto (sustituye a .contact-form-placeholder). */
.contact-form__form {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 24px;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.contact-form__field--full,
.contact-form__actions {
	grid-column: 1 / -1;
}

.contact-form__field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.contact-form__req {
	color: var(--wp--preset--color--accent, #a6873c);
}

.contact-form__field input,
.contact-form__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--contrast-2, #6b7280);
	border-radius: 0;
	background: var(--wp--preset--color--base, #fff);
	font: inherit;
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.contact-form__field textarea {
	resize: vertical;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent, #a6873c);
	outline-offset: 0;
	border-color: var(--wp--preset--color--accent, #a6873c);
}

.contact-form__actions {
	margin: 0;
}

.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__notice {
	margin: 0 0 24px;
	padding: 16px 20px;
	border-left: 3px solid;
}

.contact-form__notice--success {
	background: var(--wp--preset--color--light, #f5f3ef);
	border-color: var(--wp--preset--color--accent, #a6873c);
}

.contact-form__notice--error {
	background: #fdf2f2;
	border-color: #b42318;
	color: #b42318;
}

@media (max-width: 720px) {
	.contact-form__form {
		grid-template-columns: 1fr;
	}
}

/* Banda de teléfono destacada, justo debajo del Hero de Contact. */
.contact-phone-banner {
	padding-block: 32px;
	text-align: center;
	background: var(--wp--preset--color--dark, #2E2E2E);
}

.contact-phone-banner__label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #a6873c);
}

.contact-phone-banner__number {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	line-height: 1.1;
	color: var(--wp--preset--color--base, #fff);
	text-decoration: none;
}

.contact-phone-banner__number:hover {
	color: var(--wp--preset--color--accent, #a6873c);
}

/* -----------------------------------------------------------------------
 * Ficha de profesional (p. ej. "About us" / abogada colaboradora).
 * ----------------------------------------------------------------------- */
.lawyer-card {
	margin: 32px 0;
	padding: 32px 36px;
	background: var(--wp--preset--color--light, #f5f3ef);
	border-top: 3px solid var(--wp--preset--color--accent, #a6873c);
	box-shadow: 0 4px 18px rgba(20, 20, 20, 0.08);
}

.lawyer-card__name {
	margin: 0 0 4px;
}

.lawyer-card__firm {
	margin: 0 0 16px;
	font-style: italic;
	color: var(--wp--preset--color--contrast-2, #6b7280);
}

.lawyer-card__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #a6873c);
}

/* Líneas de texto libres dentro de la ficha (p. ej. años de experiencia,
   idiomas de atención), con el mismo cuerpo de texto que el resto del
   sitio en vez del tratamiento en mayúsculas de `.lawyer-card__meta`. */
.lawyer-card__text p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.lawyer-card__text p + p {
	margin-top: 12px;
}

/* -----------------------------------------------------------------------
 * Banda de CTA final a pantalla completa (fondo oscuro).
 * ----------------------------------------------------------------------- */
.cta-banner {
	text-align: center;
}

.cta-banner__inner {
	max-width: 680px;
	margin: 0 auto;
}

.cta-banner .btn {
	margin-top: 8px;
}

/* -----------------------------------------------------------------------
 * Lista/timeline numerada (p. ej. "Main stages of a property purchase").
 * ----------------------------------------------------------------------- */
.timeline {
	margin-top: 32px;
}

.timeline-item {
	padding: 28px 0;
	border-top: 1px solid rgba(26, 26, 26, 0.1);
}

.timeline-item:first-child {
	border-top: 0;
	padding-top: 0;
}

.timeline-item__title {
	margin: 0 0 12px;
}