/**
 * PUMP Core — Frontend base styles.
 *
 * Regola fondamentale: NESSUN colore, font o spacing va scritto qui in
 * valore assoluto. Tutto arriva dalle CSS Custom Properties generate da
 * PHP\Core\Assets::generate_css_variables() a partire dai Design Tokens.
 * Stile: luxury streetwear, minimal, high contrast. No ombre, no gradienti.
 */

.pump-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: var(--pump-space-xl) var(--pump-space-md);
	background-color: var(--pump-color-primary-black);
	background-size: cover;
	background-position: center;
	color: var(--pump-color-ivory);
	text-align: center;
}

.pump-hero--align-left {
	justify-content: flex-start;
	text-align: left;
}

.pump-hero--align-right {
	justify-content: flex-end;
	text-align: right;
}

.pump-hero__content {
	max-width: 720px;
}

.pump-hero__title {
	font-family: var(--pump-font-heading);
	font-size: clamp(2.5rem, 6vw, 5rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 var(--pump-space-sm);
}

.pump-hero__subtitle {
	font-family: var(--pump-font-body);
	font-size: 1.125rem;
	color: var(--pump-color-sand);
	margin: 0 0 var(--pump-space-md);
}

.pump-hero__cta {
	display: inline-block;
	font-family: var(--pump-font-body);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.9rem 2rem;
	border: 1px solid var(--pump-color-ivory);
	border-radius: var(--pump-radius-none);
	color: var(--pump-color-ivory);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pump-hero__cta:hover {
	background-color: var(--pump-color-ivory);
	color: var(--pump-color-primary-black);
}

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------- */

.pump-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--pump-space-sm) var(--pump-space-md);
	background-color: var(--pump-color-primary-black);
	color: var(--pump-color-ivory);
}

.pump-header--sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}

.pump-header__logo {
	font-family: var(--pump-font-heading);
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pump-color-ivory);
	text-decoration: none;
}

.pump-header__nav ul {
	display: flex;
	gap: var(--pump-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pump-header__nav a {
	font-family: var(--pump-font-body);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pump-color-ivory);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.pump-header__nav a:hover {
	opacity: 1;
}

.pump-header__cart {
	font-family: var(--pump-font-body);
	font-size: 0.85rem;
	text-transform: uppercase;
	color: var(--pump-color-ivory);
	text-decoration: none;
	border: 1px solid var(--pump-color-ivory);
	padding: 0.4rem 1rem;
}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */

.pump-footer {
	background-color: var(--pump-color-primary-black);
	color: var(--pump-color-gray);
	padding: var(--pump-space-lg) var(--pump-space-md) var(--pump-space-md);
}

.pump-footer__columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pump-space-lg);
	max-width: 960px;
	margin: 0 auto var(--pump-space-lg);
}

.pump-footer__col h4 {
	font-family: var(--pump-font-heading);
	color: var(--pump-color-ivory);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 var(--pump-space-xs);
}

.pump-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pump-footer__col a {
	color: var(--pump-color-gray);
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 2;
}

.pump-footer__col a:hover {
	color: var(--pump-color-ivory);
}

.pump-footer__copyright {
	text-align: center;
	font-size: 0.75rem;
	margin: 0;
	border-top: 1px solid rgba(242, 240, 235, 0.1);
	padding-top: var(--pump-space-sm);
}

/* ---------------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------------- */

.pump-cta {
	text-align: center;
	padding: var(--pump-space-xl) var(--pump-space-md);
	background-color: var(--pump-color-signature-burgundy);
	color: var(--pump-color-ivory);
}

.pump-cta__title {
	font-family: var(--pump-font-heading);
	font-size: clamp(1.75rem, 4vw, 3rem);
	text-transform: uppercase;
	margin: 0 0 var(--pump-space-sm);
}

.pump-cta__button {
	display: inline-block;
	font-family: var(--pump-font-body);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.9rem 2rem;
	border: 1px solid var(--pump-color-ivory);
	color: var(--pump-color-ivory);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pump-cta__button:hover {
	background-color: var(--pump-color-ivory);
	color: var(--pump-color-signature-burgundy);
}