/*
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.0
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;
}

.tempo-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
}

body.admin-bar .tempo-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .tempo-site-header {
		top: 46px;
	}
}

/* Mobile nav toggle + panel (site-header.js).
   Markup: [data-tempo-nav-toggle] + [data-tempo-nav-panel] inside .tempo-site-header. */
.tempo-site-header__toggle {
	display: none;
	appearance: none;
	margin: 0;
	padding: 0.55rem;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.tempo-site-header__toggle-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 1.25rem;
	height: 0.875rem;
}

.tempo-site-header__toggle-bar {
	display: block;
	height: 2px;
	width: 100%;
	border-radius: 1px;
	background: currentColor;
	transform-origin: center;
}

html {
	scrollbar-gutter: stable;
}

body.tempo-nav-open {
	overflow: hidden;
}

@media (max-width: 781px) {
	/* Header hamburger — stays in the header; the open drawer stacks above it. */
	.tempo-site-header > [data-tempo-nav-toggle] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		position: relative;
		z-index: 1;
	}

	/* Separate drawer close control (injected by site-header.js). */
	.tempo-site-header__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 1rem;
		right: 1rem;
		margin: 0;
		z-index: 2;
	}

	.tempo-site-header__close .tempo-site-header__toggle-bar:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.tempo-site-header__close .tempo-site-header__toggle-bar:nth-child(2) {
		opacity: 0;
	}

	.tempo-site-header__close .tempo-site-header__toggle-bar:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* Dimmed scrim — over page content only; below sticky header (1000). */
	body::before {
		content: '';
		position: fixed;
		inset: 0;
		z-index: 998;
		background: rgba(0, 0, 0, 0.48);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.28s ease-in-out, visibility 0.28s;
	}

	body.tempo-nav-open::before {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/*
	 * Hamburger drawer: slides in from the right over page content.
	 * Above the header hamburger (z-index 1) so the menu covers that button.
	 */
	.tempo-site-header > [data-tempo-nav-panel] {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 2;
		width: min(20.5rem, 86vw);
		height: 100%;
		max-height: none;
		margin: 0;
		overflow: auto;
		box-sizing: border-box;
		transform: translateX(100%);
		visibility: hidden;
		pointer-events: none;
		box-shadow: none;
		transition:
			transform 0.28s ease-in-out,
			visibility 0.28s,
			box-shadow 0.28s ease-in-out;
	}

	.tempo-site-header.is-nav-open > [data-tempo-nav-panel] {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
		box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
	}

	body.admin-bar .tempo-site-header > [data-tempo-nav-panel] {
		top: 46px;
		height: calc(100% - 46px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tempo-site-header__toggle-bar,
	.tempo-site-header > [data-tempo-nav-panel],
	body::before {
		transition: none;
	}
}

/* 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;
	}
}

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