/*
Theme Name: Cost of Repair
Theme URI: https://costofrepair.com
Author: Kit Web AdSense
Description: Tema de bloques para un sitio de guias de coste. Cero dependencias, cero fuentes externas, cero JavaScript de terceros. Escrito para que la lectura y las tablas de coste manden, y para que los huecos de anuncio no muevan el contenido al cargar.
Version: 1.3.7
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cost-of-repair
Tags: blog, one-column, block-patterns, full-site-editing, accessibility-ready
*/

/* ------------------------------------------------------------------
   Base
   theme.json fija color, tipografia y escalas. Aqui va solo lo que
   theme.json no sabe expresar.
   ------------------------------------------------------------------ */

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

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
}

/* Sin scroll horizontal a ningun ancho. */
html,
body {
	overflow-x: hidden;
}

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

/* ------------------------------------------------------------------
   Accesibilidad
   ------------------------------------------------------------------ */

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
	border-radius: 5px;
	text-decoration: none;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------
   Cabecera y pie
   ------------------------------------------------------------------ */

.site-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

.site-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer a {
	color: inherit;
}

/* ------------------------------------------------------------------
   Articulo
   ------------------------------------------------------------------ */

.entry-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* La etiqueta "Updated" va pegada a la fecha de modificacion, no suelta
   en la plantilla. El nucleo devuelve cadena vacia en ese bloque mientras
   la fecha de modificacion no sea POSTERIOR a la de publicacion
   (wp-includes/block-bindings/post-data.php), asi que un articulo recien
   publicado no lo imprime. Si la palabra estuviera escrita aparte en
   single.html, se quedaria huerfana justo el dia del estreno. */
.entry-meta .wp-block-post-date__modified-date::before {
	content: "Updated ";
}

/* La respuesta arriba: el rango de precio antes del primer scroll. */
.cost-answer {
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
	padding: 1.5rem;
}

.cost-answer > :first-child {
	margin-top: 0;
}

.cost-answer > :last-child {
	margin-bottom: 0;
}

.cost-answer .cost-figure {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	display: block;
}

/* Aviso de que una cifra es estimacion. Mismo criterio que el kit:
   lo medido y lo supuesto no comparten formato. */
.is-estimate {
	background: var(--wp--preset--color--highlight);
	border-radius: 6px;
	padding: 0.875rem 1.125rem;
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------------
   Tablas de coste: el formato central del nicho
   ------------------------------------------------------------------ */

.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-inline: 0;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-variant-numeric: tabular-nums;
}

.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0.7rem 0.875rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Estilo de bloque opcional: cifras a la derecha, primera columna a la
   izquierda. Se registra en functions.php. El contenido sigue siendo un
   core/table normal, asi que sobrevive a un cambio de tema. */
.wp-block-table.is-style-cost-table th:not(:first-child),
.wp-block-table.is-style-cost-table td:not(:first-child) {
	text-align: right;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Indice de contenidos
   ------------------------------------------------------------------ */

.toc {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}

.toc__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.75rem;
}

.toc ol {
	margin: 0;
	padding-left: 1.1rem;
}

.toc li + li {
	margin-top: 0.4rem;
}

.toc a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.toc a:hover {
	text-decoration: underline;
}

/* Que un ancla no quede pegada al borde superior. */
:target {
	scroll-margin-top: 1.5rem;
}

/* ------------------------------------------------------------------
   Huecos de anuncio
   La altura se reserva ANTES de que cargue el anuncio. Un contenedor
   que mide 0 hasta que llega el anuncio empuja el contenido: eso es
   CLS, y el CLS lo penaliza Google en el ranking.
   ------------------------------------------------------------------ */

.ad-slot {
	display: grid;
	place-items: center;
	contain: layout;
	margin-block: 2.5rem;
	/* Aire alrededor: un anuncio pegado a un enlace o a un boton produce
	   clics accidentales, y un clic accidental no es ingreso, es motivo
	   de suspension de la cuenta de AdSense. */
	padding: 0.5rem 0;
	min-height: 280px; /* formato movil 300x250 + etiqueta */
	overflow: hidden;
}

.ad-slot::before {
	content: "Advertisement";
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.5rem;
	text-align: center;
}

@media (min-width: 48em) {
	.ad-slot {
		min-height: 300px;
	}
}

/* ------------------------------------------------------------------
   Listados
   ------------------------------------------------------------------ */

.post-list .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	margin: 0 0 0.35rem;
}

.post-list .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.post-list .wp-block-post-title a:hover {
	text-decoration: underline;
}

.post-list .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.post-list li {
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.post-list li:last-child {
	border-bottom: 0;
}

/* Portada en los listados.
   Imagen a la izquierda y texto a la derecha: el titulo sigue siendo lo
   primero que se lee. La proporcion 3/2 la fija el bloque, asi el hueco
   existe antes de que cargue la imagen y no hay salto (CLS). Un articulo
   sin destacada se queda en una sola columna. */
.post-list li:has(.post-list__thumb) {
	display: grid;
	grid-template-columns: 200px 1fr;
	column-gap: 1.25rem;
	align-content: start;
}

.post-list li:has(.post-list__thumb) > * {
	grid-column: 2;
}

.post-list li > .post-list__thumb {
	grid-column: 1;
	grid-row: 1 / span 4;
	margin: 0;
}

.post-list__thumb img {
	border-radius: 6px;
	display: block;
}

@media (max-width: 600px) {
	.post-list li:has(.post-list__thumb) {
		grid-template-columns: 110px 1fr;
		column-gap: 0.9rem;
	}
}

/* ------------------------------------------------------------------
   Rejilla de oficios
   El color es un recurso escaso: el acento se reserva para los enlaces
   dentro del texto. El titulo de una tarjeta ya se lee como enlace por
   su posicion, no necesita ni subrayado ni color.
   ------------------------------------------------------------------ */

/* Icono de oficio.

   El SVG llega sin atributos de tamano ni de color a proposito: los pone
   el CSS, para que un solo cambio aqui valga para los once.

   `width`/`height` fijos y `display:block` significan que el hueco ya
   esta reservado desde el primer pintado. Un icono no puede mover el
   texto de debajo, que es justo lo que hacen las imagenes que cargan
   tarde y lo que penaliza el CLS. */
.trade-icon {
	display: block;
	width: 26px;
	height: 26px;
	/* El grupo de la tarjeta usa layout `constrained`, que centra a sus
	   hijos directos. Un SVG de 26px acababa centrado en la tarjeta,
	   desalineado del titulo que va justo debajo.
	   El `!important` no es pereza: el nucleo emite esos margenes con
	   `!important` en `.is-layout-constrained > :where(...)`, y sin
	   igualarlo no hay especificidad que valga. Comprobado el 2026-09-24:
	   con `margin-inline: 0 auto` a secas, el margen calculado seguia
	   siendo 120px. */
	margin-inline: 0 auto !important;
	margin-bottom: 0.65rem;
	color: var(--wp--preset--color--accent);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.trade-grid h3 {
	margin: 0;
}

.trade-grid h3 a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.trade-grid p {
	margin: 0;
}

@media (hover: hover) and (pointer: fine) {
	.trade-grid h3 a:hover {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}
}

/* Etiqueta de categoria */
.term-tag {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* ------------------------------------------------------------------
   Movimiento
   Regla del proyecto: aqui casi nada se anima. Solo transform y
   opacity, nunca junto a un hueco de anuncio.
   ------------------------------------------------------------------ */

.wp-element-button,
.wp-block-button__link,
button {
	transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.wp-element-button:active,
.wp-block-button__link:active,
button:active {
	transform: scale(0.97);
}

/* El hover solo existe donde hay raton de verdad. En tactil se queda
   pegado tras tocar. */
@media (hover: hover) and (pointer: fine) {
	.site-header a:hover,
	.site-footer a:hover {
		text-decoration: underline;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------
   Movil
   ------------------------------------------------------------------ */

@media (max-width: 47.99em) {
	.cost-answer {
		padding: 1.25rem;
	}

	.wp-block-table th,
	.wp-block-table td {
		padding: 0.6rem 0.7rem;
	}
}

/* ------------------------------------------------------------------
   Migas de pan
   ------------------------------------------------------------------ */

.breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.breadcrumbs li + li::before {
	content: "›";
	margin-right: 0.5rem;
	color: var(--wp--preset--color--border);
}

.breadcrumbs a {
	color: inherit;
}

/* El último eslabón es el título, que ya está en el h1 debajo: en móvil
   se recorta para que las migas no ocupen tres líneas. */
.breadcrumbs li:last-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* ------------------------------------------------------------------
   Calculadora de coste (assets/calc.js)
   La altura mínima reserva el hueco mientras carga el JS: sin salto.
   ------------------------------------------------------------------ */

.cost-calc {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	padding: 1.25rem 1.5rem;
	min-height: 30rem;
}

.cost-calc.is-ready {
	min-height: 0;
}

.cost-calc__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 1rem;
}

.cost-calc__field {
	display: grid;
	gap: 0.35rem;
	margin: 0 0 0.9rem;
}

.cost-calc__field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.cost-calc select,
.cost-calc input[type="number"] {
	font: inherit;
	width: 100%;
	max-width: 22rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: inherit;
}

.cost-calc__check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--small);
}

.cost-calc__result {
	margin: 1.1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.cost-calc__label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.cost-calc__result strong {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
	font-variant-numeric: tabular-nums;
}

.cost-calc__note {
	margin: 0.9rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Firma y caja de autor ------------------------------------------------ */
.byline {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}
.byline a {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}
.author-box {
	margin-top: var(--wp--preset--spacing--40);
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
}
.author-box p {
	margin: 0 0 0.5rem;
}
.author-box__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.author-box__name {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
}
.author-box__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.author-box__bio,
.author-box__links {
	font-size: var(--wp--preset--font-size--small);
}
.author-box__links {
	margin-bottom: 0;
}

/* Gráfico de rangos de la calculadora ------------------------------------ */
.range-chart {
	margin: 1.25rem 0 0;
}
.range-chart figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.5rem;
}
.range-chart__row {
	display: grid;
	grid-template-columns: minmax(0, 11rem) 1fr auto;
	gap: 0.75rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.2rem 0;
}
.range-chart__track {
	display: block;
	height: 0.6rem;
	background: var(--wp--preset--color--base);
	border-radius: 3px;
}
.range-chart__bar {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent);
	border-radius: 3px;
}
.range-chart__val {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
@media (max-width: 560px) {
	.range-chart__row {
		grid-template-columns: 1fr auto;
	}
	.range-chart__track {
		grid-column: 1 / -1;
		order: 3;
	}
}

/* Buscador de la cabecera: lupa que despliega el campo -------------------- */
.site-header .wp-block-navigation {
	margin-left: auto;
}
.header-search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 0;
	padding: 0.4rem;
	margin-left: 0;
}
.header-search .wp-block-search__button svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
}
.header-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.35rem 0.6rem;
	font-size: var(--wp--preset--font-size--small);
}
.header-search.wp-block-search__searchfield-hidden .wp-block-search__input {
	border: 0;
	padding: 0;
}

/* Tarjetas de oficio enteras clicables: el enlace del h3 se estira sobre la
   tarjeta con ::after. Un solo enlace por tarjeta, accesible y sin JS. */
.trade-grid > .wp-block-group {
	position: relative;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.trade-grid h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
}
.trade-grid > .wp-block-group:hover {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 2px 10px rgba(26, 26, 24, 0.08);
}
.trade-grid > .wp-block-group:focus-within {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
.trade-grid h3 a:focus {
	outline: none;
}

/* Latest guides de la portada en rejilla: 3 columnas en escritorio, 2 en
   tableta, 1 en móvil. Tarjeta vertical: imagen arriba, texto debajo. Se
   ensancha al mismo ancho que la rejilla de oficios (60rem). */
.post-grid > .wp-block-post-template {
	max-width: 60rem !important;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	padding: 0;
}
.post-grid > .wp-block-post-template li,
.post-grid > .wp-block-post-template li:has(.post-list__thumb) {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0;
	border: 0;
	margin: 0;
}
.post-grid > .wp-block-post-template li > * {
	margin: 0;
}
.post-grid .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium);
}
.post-grid {
	max-width: 60rem !important;
}
.post-grid > .wp-block-heading,
.post-grid > .wp-block-query-pagination {
	max-width: 60rem !important;
}
@media (max-width: 900px) {
	.post-grid > .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.post-grid > .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* Guías relacionadas al final del artículo --------------------------------- */
.related {
	margin-top: var(--wp--preset--spacing--40);
}
.related__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 1rem;
}
.related__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}
.related__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.related__card p,
.related__card h3 {
	margin: 0;
}
.related__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
}
.related__cat {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.related__name {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}
.related__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.related__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.related__card:hover .related__name a {
	text-decoration: underline;
}
@media (max-width: 560px) {
	.related__grid {
		grid-template-columns: 1fr;
	}
}
@media (min-width: 561px) and (max-width: 900px) {
	.related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.popular {
	max-width: 60rem !important;
	margin-top: 0;
}