/*
Theme Name: Tempo
Template: kadence
Description: A custom Kadence child theme by Propaganda3 for modern brand sites. Tempo keeps your branding consistent—typography, color, and layout aligned across every page—so visitors always experience a site that feels unmistakably yours.
Author: Propaganda3
Author URI: https://propaganda3.com
Version: 1.0.1
Text Domain: tempo
*/

/* Platform layout defaults (Tempo). Client brand rules live in brand.css. */

/*
 * Kadence resets .alignwide under content-width-fullwidth, but not .alignfull.
 * Tempo sites run full-width/unboxed, so the 100vw + negative-margin breakout
 * overhangs #wrapper { overflow: clip } and leaves thin white side gutters
 * (header, footer, and full-bleed rows). Keep alignfull flush to the wrapper.
 */
.content-width-fullwidth .wp-site-blocks .alignfull {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: none;
}

html {
	scrollbar-gutter: stable;
}

/* AJAX CPT listing skeleton (listing-filters.js). */
[data-tempo-listing].is-skeleton,
[data-tempo-listing-meta].is-skeleton {
	pointer-events: none;
}

/* Keep reserved height clipped while skeleton tiles are shorter/taller. */
[data-tempo-listing].is-skeleton {
	overflow: hidden;
}

/* Stabilize count text width across "Showing X of Y" lengths. */
[data-tempo-listing-meta] {
	display: block;
	min-width: 14ch;
	text-align: right;
}

.tempo-listing-skeleton__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.tempo-listing-skeleton__card {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e8e8e8;
}

.tempo-listing-skeleton__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		transparent 25%,
		rgba(255, 255, 255, 0.55) 45%,
		transparent 65%
	);
	transform: translateX(-100%);
	animation: tempo-listing-shimmer 1.15s ease-in-out infinite;
}

.tempo-listing-skeleton__tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
	width: 7.5rem;
	height: 1.4rem;
	background: rgba(255, 255, 255, 0.55);
}

.tempo-listing-skeleton__lines {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tempo-listing-skeleton__line {
	display: block;
	height: 0.85rem;
	width: 72%;
	background: rgba(255, 255, 255, 0.55);
}

.tempo-listing-skeleton__line--sm {
	width: 38%;
	height: 0.55rem;
}

.tempo-listing-skeleton__meta {
	display: inline-block;
	width: 9.5em;
	height: 0.55em;
	/* Match typical filter-meta mono size so the bar sits on the text line. */
	font-size: 11px;
	line-height: 1;
	vertical-align: baseline;
	background: #e8e8e8;
	overflow: hidden;
	position: relative;
}

.tempo-listing-skeleton__meta::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		transparent 25%,
		rgba(255, 255, 255, 0.65) 45%,
		transparent 65%
	);
	transform: translateX(-100%);
	animation: tempo-listing-shimmer 1.15s ease-in-out infinite;
}

@keyframes tempo-listing-shimmer {
	to {
		transform: translateX(100%);
	}
}

@media (max-width: 1024px) {
	.tempo-listing-skeleton__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.tempo-listing-skeleton__grid {
		grid-template-columns: 1fr;
	}
}

/* Linked Image (Adv): subtle scale on hover when Link Settings are set. */
.wp-block-kadence-image .kb-advanced-image-link img {
	transition: transform 0.3s ease-in-out;
}

.wp-block-kadence-image .kb-advanced-image-link:hover img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.tempo-listing-skeleton__card::after,
	.tempo-listing-skeleton__meta::after {
		animation: none;
	}

	.wp-block-kadence-image .kb-advanced-image-link img {
		transition: none;
	}

	.wp-block-kadence-image .kb-advanced-image-link:hover img {
		transform: none;
	}
}