/*
Theme Name: GeneratePress — AJ Automoción
Theme URI:
Description: Tema hijo de GeneratePress para AJ Automoción. Contiene lo que es del sitio y no del plugin de reservas: la apariencia de las páginas del editor, la de alquiler y los retoques del pie.
Author: AJ Automoción
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-aj
*/

/**
 * Apariencia de las páginas hechas con el editor.
 *
 * El plugin de reservas trae su propio diseño para el catálogo y las fichas. Las
 * páginas normales —quiénes somos, opiniones, legales, alquiler— las pinta
 * WordPress con los bloques de siempre, y sin esto se veían con el aspecto por
 * defecto del tema: otra escala de títulos, listas sin aire, citas planas. Aquí
 * se les da el mismo lenguaje visual que al catálogo.
 *
 * Ni un color escrito a mano: todo sale de las variables --vor-* que publica el
 * plugin. Si mañana se cambia la paleta en Ajustes, estas páginas cambian con
 * ella. Por eso este fichero no sabe si el tema es claro u oscuro, y no le hace
 * falta saberlo.
 *
 * Las reglas de ELEMENTO (a, p, li, h2…) van envueltas en :where(), que no suma
 * especificidad. Hace falta porque el catálogo del plugin se pinta dentro de
 * .entry-content —es una página con shortcode— y sin esto una regla tan inocente
 * como «.entry-content a { color: acento }» le ganaba a .vor-btn--primario y
 * dejaba el botón de reservar en rojo sobre rojo. Con :where() estas reglas
 * visten lo que nadie ha vestido y se apartan en cuanto el plugin dice algo.
 */

/* Tipografía y ritmo ------------------------------------------------------ */

:where(.entry-content) > * + * { margin-top: 1.15em; }

:where(.entry-content h2, .entry-content h3, .entry-content h4) {
	color: var(--vor-ink);
	line-height: 1.2;
	margin-top: 1.9em;
	margin-bottom: .55em;
}

:where(.entry-content h2) { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
:where(.entry-content h3) { font-size: clamp(1.1rem, 2vw, 1.3rem); }

:where(.entry-content > h2:first-child, .entry-content > h3:first-child) { margin-top: 0; }

:where(.entry-content p) { color: var(--vor-ink-2); }
:where(.entry-content strong) { color: var(--vor-ink); }

/*
 * El título de la página. GeneratePress lo pinta fuera de .entry-content, así
 * que hay que nombrarlo aparte o se queda con la escala del tema.
 */
.page .entry-title {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	line-height: 1.1;
	color: var(--vor-ink);
	margin-bottom: .7em;
}

/* Enlaces ----------------------------------------------------------------- */

:where(.entry-content a) {
	color: var(--vor-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:where(.entry-content a:hover) { color: var(--vor-accent-hi); }

/* Listas ------------------------------------------------------------------ */

:where(.entry-content ul, .entry-content ol) {
	color: var(--vor-ink-2);
	padding-left: 1.15em;
}

:where(.entry-content li) { margin-bottom: .5em; }
:where(.entry-content li::marker) { color: var(--vor-accent); }

/* Citas: son las opiniones de clientes, y se leen mejor como tarjetas ------ */

.entry-content .wp-block-quote {
	margin: 0;
	padding: 18px 22px 18px 24px;
	border: 0;
	border-left: 3px solid var(--vor-accent);
	border-radius: var(--vor-r-s);
	background: var(--vor-surface);
	font-style: normal;
	quotes: none;
}

.entry-content .wp-block-quote p {
	margin: 0;
	color: var(--vor-ink);
	font-size: .98rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.entry-content .wp-block-quote cite {
	display: block;
	margin-top: 8px;
	font-size: .82rem;
	font-style: normal;
	color: var(--vor-ink-3);
}

/* Separadores ------------------------------------------------------------- */

.entry-content .wp-block-separator {
	max-width: none;
	margin: 2.4em 0;
	border: 0;
	border-top: 1px solid var(--vor-line);
	opacity: 1;
}

/* Botones ----------------------------------------------------------------- */

.entry-content .wp-block-button__link {
	padding: 13px 24px;
	border: 0;
	border-radius: var(--vor-r-s);
	background: var(--vor-accent);
	color: var(--vor-accent-ink);
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s;
}

.entry-content .wp-block-button__link:hover {
	background: var(--vor-accent-hi);
	color: var(--vor-accent-ink);
}

.entry-content .wp-block-buttons { margin-top: 1.6em; }

/* Tablas ------------------------------------------------------------------ */

.entry-content .wp-block-table table {
	border-collapse: collapse;
	font-size: .92rem;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--vor-line-soft);
	color: var(--vor-ink-2);
	text-align: left;
}

.entry-content .wp-block-table thead th {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vor-ink-3);
	border-bottom-color: var(--vor-line);
}

/* Una tabla ancha se desplaza dentro de su caja; nunca empuja la página. */
.entry-content .wp-block-table { overflow-x: auto; }

/* Pie --------------------------------------------------------------------- */

.site-footer .footer-widgets { border-top: 1px solid var(--vor-line); }

.site-footer .widget-title,
.site-footer h3 {
	font-size: 1.05rem;
	color: var(--vor-ink);
}

:where(.site-footer p, .site-footer li) { color: var(--vor-ink-2); }

:where(.site-footer a) { color: var(--vor-accent); }
:where(.site-footer a:hover) { color: var(--vor-accent-hi); }

.site-info,
.copyright-bar {
	color: var(--vor-ink-3);
	font-size: .84rem;
}

/* Cabecera ---------------------------------------------------------------- */

/*
 * El logotipo llega a 1459 px de ancho y el tema lo pinta a tamaño real: sin
 * esto empujaba la cabecera hasta 1761 px y aparecía barra de desplazamiento
 * horizontal en toda la web. La altura manda sobre la anchura porque el
 * logotipo es apaisado (2:1) y lo que hay que fijar es lo que ocupa de alto.
 */
.site-logo .header-image {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 62px;
}

/* Con el logotipo puesto, el nombre en texto al lado sobra: lo dice el propio
   logotipo. Se mantiene accesible para lectores de pantalla. */
.site-logo + .site-branding .main-title,
.site-logo ~ .site-branding .main-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 768px) {
	.site-logo .header-image { max-height: 46px; }
}


/**
 * Bloques de página con el lenguaje del plugin.
 *
 * El catálogo y las fichas se ven como se ven porque están hechos de cabeceras
 * con tinte de acento y de tarjetas sobre la superficie. Las páginas normales
 * pueden usar lo mismo poniendo estas clases a un grupo del editor, y así el
 * salto de «Coches disponibles» a «Quiénes somos» no se nota.
 *
 *   .aj-hero      cabecera de página, con su rotulillo en acento
 *   .aj-seccion   tarjeta de contenido
 *   .aj-eyebrow   rotulillo en versalitas y acento
 */

.aj-hero,
.aj-seccion {
	padding: 34px 32px;
	margin-bottom: 26px;
	border: 1px solid var(--vor-line);
	border-radius: var(--vor-r-l);
	background: var(--vor-surface);
}

/* Solo la cabecera lleva el tinte: si lo llevaran todas, no destacaría ninguna. */
.aj-hero {
	padding: 40px 32px;
	margin-bottom: 32px;
	background:
		linear-gradient(180deg, rgb(var(--vor-accent-rgb) / .08), transparent 260px),
		var(--vor-surface);
}

.aj-eyebrow {
	display: block;
	margin-bottom: 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vor-accent);
}

.entry-content :is(.aj-hero, .aj-seccion) > .wp-block-group__inner-container > *:first-child { margin-top: 0; }
.entry-content :is(.aj-hero, .aj-seccion) > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }

.entry-content .aj-hero h2 {
	margin: 0 0 12px;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.14;
	color: var(--vor-ink);
}

.entry-content .aj-hero p { max-width: 64ch; color: var(--vor-ink-2); }

/*
 * Título de sección con el filete que lo acompaña hasta el borde, igual que
 * .vor-seccion__titulo en el catálogo.
 *
 * El selector pasa por .wp-block-group__inner-container porque el editor lo
 * inserta entre el grupo y sus hijos: «.aj-seccion > h2» no casa con nada.
 */
.entry-content .aj-seccion > .wp-block-group__inner-container > h2 {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 0;
	margin-bottom: 18px;
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

.entry-content .aj-seccion > .wp-block-group__inner-container > h2::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--vor-accent);
}

@media (max-width: 600px) {
	.aj-hero,
	.aj-seccion {
		padding: 24px 18px;
		border-radius: var(--vor-r-m);
	}
}

/* Faldón del Kit Digital -------------------------------------------------- */

/*
 * Banda blanca a propósito. El faldón oficial son logotipos y texto oscuros
 * sobre transparente, y el pie de este sitio es casi negro: encima no se leería.
 * Las marcas institucionales no se pueden recolorear ni invertir, así que lo que
 * cede es el fondo.
 */
.aj-kit-digital {
	padding: 18px 20px;
	background: #fff;
}

.aj-kit-digital__interior {
	max-width: 1100px;
	margin: 0 auto;
}

.aj-kit-digital__imagen {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * En un móvil, un faldón de 10:1 se queda en una tira ilegible de 30 px de alto.
 * Se deja que ocupe más ancho que la pantalla y se desplace: es preferible a
 * enseñarlo a un tamaño en el que no se distingue ninguno de los logotipos.
 */
@media (max-width: 782px) {
	.aj-kit-digital { padding: 14px 0; overflow-x: auto; }

	.aj-kit-digital__interior { width: 760px; padding: 0 16px; }
}