@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/bebas-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-600.woff2) format('woff2');}

/*
Theme Name: Acker Vibes
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ackervibes
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

/* == tokens == */
:root {
	--c-bg: var( --wp--preset--color--background );
	--c-text: var( --wp--preset--color--text );
	--c-primary: var( --wp--preset--color--primary );
	--c-surface: var( --wp--preset--color--surface );
	--c-muted: var( --wp--preset--color--muted );
	--f-display: "Bebas Neue", "Arial Narrow", sans-serif;
	--f-body: "Inter", system-ui, sans-serif;
	--ease: cubic-bezier( 0.2, 0, 0, 1 );
}

body {
	font-family: var( --f-body );
	color: var( --c-text );
	background: var( --c-bg );
	-webkit-font-smoothing: antialiased;
}

:where( h1, h2, h3, h4 ) {
	font-family: var( --f-display );
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* accent word helper */
.av-accent { color: var( --c-primary ); }
.text-muted { color: var( --c-muted ); }

/* -- buttons: skew the chip, keep the label upstraight -- */
.wp-block-button__link.wp-element-button {
	--wp--preset--color--primary: var( --c-primary );
}
.av-btn-skew { transform: skewX( -8deg ); }
.av-btn-skew > * { transform: skewX( 8deg ); }
.wp-block-button__link.wp-element-button {
	transition: filter 150ms var(--ease), transform 150ms var(--ease);
}
.wp-block-button__link.wp-element-button:hover {
	filter: brightness( 0.9 );
}

/* == site header == */
.site-header {
	position: relative;
	z-index: 50;
}
.site-header .has-global-padding {
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}
.av-wordmark {
	font-family: var( --f-display );
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.av-wordmark .av-accent { display: inline-block; }

/* == mobile nav overlay (built on the block navigation) == */
.wp-block-navigation__container.is-open {
	background: var( --c-bg );
	border-top: 1px solid color-mix( in srgb, var( --c-text ) 15%, transparent );
}
.wp-block-navigation a {
	font-family: var( --f-display );
	font-size: clamp(1.4rem, 6vw, 2rem);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* == labels / eyebrows == */
.av-label {
	font-family: var( --f-body );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --c-muted );
}
.av-label .av-accent { color: var( --c-primary ); }

/* == giant section numbers == */
.giant-num {
	font-family: var( --f-display );
	color: var( --c-primary );
	line-height: 0.8;
}

/* == section headings == */
.section-title {
	font-size: clamp(2.5rem, 7vw, 5rem);
}

/* =={{SEC2}}== */

/* == hero == */
.av-hero {
	min-height: min( 92vh, 760px );
	display: flex;
	align-items: flex-end;
}
.av-hero .claim {
	font-size: clamp(3.4rem, 13vw, 10rem);
	line-height: 0.84;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	max-width: 14ch;
}
.av-hero .sub {
	max-width: 46ch;
	color: var( --c-muted );
}

/* rotated sticker badge pinned over the hero */
.av-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var( --f-body );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.6rem 1rem;
	color: var( --c-bg );
	background: var( --c-primary );
	border: 3px solid var( --c-text );
	box-shadow: 6px 6px 0 0 var( --c-bg );
}
.av-badge.is-gold {
	background: linear-gradient( 135deg, #ffd54a, #ffb300 );
}
.av-badge-rotate { transform: rotate( -4deg ); }

/* == marquee == */
.marquee {
	overflow: hidden;
	background: var( --c-primary );
	color: var( --c-bg );
	padding-block: 0.7rem;
	border-block: 3px solid var( --c-text );
}
.marquee-track {
	display: flex;
	gap: 2.5rem;
	width: max-content;
	white-space: nowrap;
	animation: av-marquee 26s linear infinite;
}
.marquee-track span {
	font-family: var( --f-display );
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
@keyframes av-marquee {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}

/* == section opener band == */
.av-band {
	padding-block: var( --wp--preset--spacing--70 );
}
.av-band-1 { background: var( --c-bg ); }
.av-band-2 { background: var( --c-surface ); }

/* == spot card == */
.spot-card {
	background: var( --c-surface );
	border: 1px solid color-mix( in srgb, var( --c-text ) 12%, transparent );
	padding: 0;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}
.spot-card:hover {
	transform: translateY( -6px );
	border-color: var( --c-primary );
}
.spot-card__media {
	position: relative;
	overflow: hidden;
}
.spot-card__media img {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms var(--ease);
}
.spot-card:hover .spot-card__media img { transform: scale( 1.05 ); }
.spot-card__media .rarity-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
}
.spot-card__body {
	padding: 1rem 1.1rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
}
.spot-card__title {
	font-size: 1.6rem;
	line-height: 0.95;
	margin: 0;
}
.spot-card__meta {
	font-family: var( --f-body );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --c-muted );
}
.spot-card__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 0.7rem;
	border-top: 1px solid color-mix( in srgb, var( --c-text ) 12%, transparent );
}
.spot-card__link { color: var( --c-primary ); }

/* == rarity badge == */
.rarity-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.28rem 0.7rem;
	color: var( --c-text );
	border: 2px solid currentColor;
}
.is-rarity-common    { color: var( --c-text );
	background: color-mix( in srgb, var( --c-surface ) 60%, transparent ); }
.is-rarity-rare      { color: var( --c-bg ); background: var( --c-primary ); border-color: var( --c-primary ); }
.is-rarity-legendary { color: var( --c-bg ); background: linear-gradient( 135deg, #ffd54a, #ffb300 ); border-color: #ffd54a; }

/* == specs grid (single spot) == */
.specs-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 2rem;
	background: var( --c-surface );
	border: 1px solid color-mix( in srgb, var( --c-text ) 12%, transparent );
	padding: clamp(1.2rem, 3vw, 2rem);
}
.specs-rows {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.5rem;
}
.spec { display: flex; flex-direction: column; gap: 0.3rem; }
.spec-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --c-muted );
}
.spec-value {
	font-family: var( --f-display );
	font-size: 2rem;
	color: var( --c-text );
}
.specs-coolness { display: flex; flex-direction: column; gap: 0.5rem; }
.spec-gears { display: inline-flex; gap: 0.35rem; }
.spec-gears .gear { color: color-mix( in srgb, var( --c-muted ) 35%, transparent ); }
.spec-gears .gear.filled { color: var( --c-primary ); }

/* == grain overlay == */
.grain { position: relative; }
.grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ===={{SEC3}}== */

/* == footer == */
.site-footer {
	background: var( --c-surface );
	border-top: 1px solid color-mix( in srgb, var( --c-text ) 12%, transparent );
	padding-block: clamp(2rem, 6vw, 4rem);
}
.site-footer .av-wordmark { font-size: clamp(1.8rem, 6vw, 3rem); }
.footer-links a {
	color: var( --c-muted );
	text-decoration: none;
}
.footer-links a:hover { color: var( --c-primary ); }
.footer-meta {
	font-size: 0.75rem;
	color: var( --c-muted );
	letter-spacing: 0.06em;
}

/* == filter chips (spots gallery) == */
.filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.filter-chip {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --c-text );
	background: transparent;
	border: 1px solid color-mix( in srgb, var( --c-text ) 30%, transparent );
	padding: 0.5rem 0.9rem;
	text-decoration: none;
	transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.filter-chip:hover, .filter-chip.is-active {
	background: var( --c-primary );
	color: var( --c-bg );
	border-color: var( --c-primary );
}
.filter-chip a { color: inherit; text-decoration: none; }

/* == blog / post card == */
.post-card { height: 100%; display: flex; flex-direction: column; }
.post-card__title a {
	color: var( --c-text );
	text-decoration: none;
}
.post-card__title a:hover { color: var( --c-primary ); }

/* == subpage hero == */
.page-hero {
	padding-block: clamp(3rem, 9vw, 6rem) clamp(2rem, 6vw, 4rem);
}
.page-hero h1 {
	font-size: clamp(3rem, 10vw, 7rem);
	line-height: 0.86;
	text-transform: uppercase;
}

/* == stats == */
.stat-value {
	font-family: var( --f-display );
	font-size: clamp(3rem, 8vw, 5.5rem);
	line-height: 0.85;
	color: var( --c-primary );
}

/* == CTA / social band == */
.social-links a {
	color: var( --c-text );
	text-decoration: none;
	border-bottom: 3px solid var( --c-primary );
}

/* == responsive == */
@media ( max-width: 782px ) {
	.specs-grid { grid-template-columns: 1fr; gap: 1.25rem; }
	.specs-rows { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
	.av-hero { min-height: min( 80vh, 640px ); }
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 2rem 1.5rem 4rem;
		background: var( --c-bg );
	}
	.wp-block-navigation__responsive-container.is-menu-open ul {
		gap: 1.2rem;
	}
}

/* diagonal section cut */
.av-diag { clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 46px), 0 100% ); }

/* == scroll reveal (progressive enhancement) ==
   Default: visible. main.js adds .av-anim-ready (hidden start) then .av-in. */
.av-anim-ready[data-av-anim] {
	opacity: 0;
	transform: translateY( 16px );
}
.av-anim-ready[data-av-anim].av-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

/* == reduced motion == */
@media ( prefers-reduced-motion: reduce ) {
	.marquee-track { animation: none; width: 100%; overflow: hidden; }
	.spot-card, .spot-card__media img { transition: none; }
	.wp-block-button__link.wp-element-button { transition: none; }
	.av [data-av-anim] { opacity: 1; transform: none; }
}