/**
 * Flavor Theme — MOSHPIT EDITION v5
 * Concert Photography Portfolio — Magazine Style
 *
 * IMPORTANT: No .mg-* classes here — MoshpitGallery handles its own CSS.
 */

/* ============================================================
   CSS CUSTOM PROPERTIES — Dark/Light Mode
   ============================================================ */
:root {
	--flavor-base: #0a0a0a;
	--flavor-base-rgb: 10, 10, 10;
	--flavor-surface: #1a1a1a;
	--flavor-surface-alt: #2a2a2a;
	--flavor-border: #333333;
	--flavor-muted: #999999;
	--flavor-text: #e0e0e0;
	--flavor-heading: #ffffff;
	--flavor-accent: #c0392b;
	--flavor-accent-hover: #e74c3c;
	--flavor-accent-rgb: 192, 57, 43;
	--flavor-mosaic-filter: grayscale(60%) brightness(0.55) contrast(1.1);
	--flavor-overlay-alpha: 0.88;
	--flavor-card-bg: #0a0a0a;
	--flavor-code-bg: #111;
	--flavor-quote-bg: rgba(255,255,255,0.03);
	--flavor-scrollbar-track: #0a0a0a;
	--flavor-grayscale: grayscale(100%) contrast(1.1);
	--flavor-grayscale-hover: grayscale(0%) contrast(1);
}

[data-theme="light"] {
	--flavor-base: #f0f0f0;
	--flavor-base-rgb: 240, 240, 240;
	--flavor-surface: #ffffff;
	--flavor-surface-alt: #e8e8e8;
	--flavor-border: #cccccc;
	--flavor-muted: #666666;
	--flavor-text: #222222;
	--flavor-heading: #111111;
	--flavor-accent: #c0392b;
	--flavor-accent-hover: #a5281c;
	--flavor-accent-rgb: 192, 57, 43;
	--flavor-mosaic-filter: grayscale(30%) brightness(0.9) contrast(0.9);
	--flavor-overlay-alpha: 0.92;
	--flavor-card-bg: #ffffff;
	--flavor-code-bg: #f5f5f5;
	--flavor-quote-bg: rgba(0,0,0,0.03);
	--flavor-scrollbar-track: #e0e0e0;
	--flavor-grayscale: grayscale(60%) contrast(1);
	--flavor-grayscale-hover: grayscale(0%) contrast(1);

	/* Override WP preset colors */
	--wp--preset--color--base: #f0f0f0;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--surface-alt: #e8e8e8;
	--wp--preset--color--border: #cccccc;
	--wp--preset--color--muted: #666666;
	--wp--preset--color--text: #222222;
	--wp--preset--color--heading: #111111;
}

/* ============================================================
   ROOT & BODY
   ============================================================ */
body {
	background-color: var(--flavor-base) !important;
	transition: background-color 0.4s ease, color 0.4s ease;
}

/* ============================================================
   HEADER — TRANSPARENT FLOATING
   ============================================================ */
.site-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: rgba(var(--flavor-base-rgb), 0.6) !important;
	backdrop-filter: blur(12px) saturate(1.1);
	-webkit-backdrop-filter: blur(12px) saturate(1.1);
	border-bottom: none !important;
	transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}

.site-header.scrolled {
	background: rgba(var(--flavor-base-rgb), 0.6) !important;
	backdrop-filter: blur(12px) saturate(1.1);
	-webkit-backdrop-filter: blur(12px) saturate(1.1);
}

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

/* Push content below fixed header */
body > .wp-site-blocks > main,
body > .wp-site-blocks > :first-child:not(header) {
	padding-top: 0;
}

/* Logo in header */
.site-header .wp-block-site-logo img { max-height: 40px; width: auto; }
.site-header .wp-block-site-title { font-size: clamp(0.9rem, 1.5vw, 1.2rem) !important; }

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
	background: none;
	border: 1px solid var(--flavor-border);
	color: var(--flavor-text);
	cursor: pointer;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: border-color 0.3s, color 0.3s, transform 0.3s;
	flex-shrink: 0;
}

.theme-toggle:hover {
	border-color: var(--flavor-accent);
	color: var(--flavor-accent);
	transform: rotate(15deg);
}

.theme-toggle svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Show/hide icons based on theme */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ============================================================
   NAVIGATION — CLEAN UNDERLINES
   ============================================================ */
.wp-block-navigation a {
	position: relative !important;
	transition: color 0.3s !important;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

[data-theme="light"] .wp-block-navigation a {
	text-shadow: none;
}

.wp-block-navigation a::after {
	content: '' !important;
	position: absolute !important;
	bottom: -4px !important;
	left: 0 !important;
	width: 0 !important;
	height: 2px !important;
	background: var(--flavor-accent) !important;
	transition: width 0.3s ease !important;
}

.wp-block-navigation a:hover::after { width: 100% !important; }
.wp-block-navigation a:hover { color: var(--flavor-accent) !important; }

/* ============================================================
   MAGAZINE GRID
   ============================================================ */
.wp-block-post-template.is-layout-grid {
	grid-template-columns: 1fr 1fr !important;
	gap: 4px !important;
}

/* First post spans full width */
.wp-block-post-template.is-layout-grid > .wp-block-post:first-child {
	grid-column: 1 / -1 !important;
}

/* Cards — clean, no extra borders */
.wp-block-post-template .wp-block-post {
	position: relative !important;
	overflow: hidden !important;
	background: var(--flavor-card-bg) !important;
	border: none !important;
}

/* Images — show full image, grayscale → color on hover */
.wp-block-post-template .wp-block-post .wp-block-post-featured-image {
	margin: 0 !important;
	overflow: hidden;
}

.wp-block-post-template .wp-block-post .wp-block-post-featured-image img {
	width: 100% !important;
	display: block !important;
	transition: transform 0.6s ease, filter 0.6s ease !important;
	filter: var(--flavor-grayscale) !important;
}

.wp-block-post-template .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03) !important;
	filter: var(--flavor-grayscale-hover) !important;
}

/* First post (hero) — image stays colorful */
.wp-block-post-template .wp-block-post:first-child .wp-block-post-featured-image img {
	filter: none !important;
}

.wp-block-post-template .wp-block-post:first-child:hover .wp-block-post-featured-image img {
	transform: scale(1.02) !important;
	filter: none !important;
}

/* Text overlay below image */
.wp-block-post-template .wp-block-post .card-overlay {
	background: var(--flavor-card-bg) !important;
	padding: 0.8rem 1rem !important;
}

/* Post titles */
.wp-block-post-template .wp-block-post .wp-block-post-title {
	margin: 0 0 0.2rem !important;
}

.wp-block-post-template .wp-block-post .wp-block-post-title a {
	color: var(--flavor-heading) !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	transition: color 0.3s !important;
}

.wp-block-post-template .wp-block-post:hover .wp-block-post-title a {
	color: var(--flavor-accent) !important;
}

/* Hero title bigger */
.wp-block-post-template .wp-block-post:first-child .wp-block-post-title {
	font-size: clamp(1.2rem, 2.2vw, 1.65rem) !important;
}

/* Regular card title */
.wp-block-post-template .wp-block-post:not(:first-child) .wp-block-post-title {
	font-size: clamp(0.85rem, 1.3vw, 1.1rem) !important;
}

/* Date — small mono */
.wp-block-post-template .wp-block-post .wp-block-post-date {
	font-size: 0.65rem !important;
	color: var(--flavor-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	font-family: var(--wp--preset--font-family--mono) !important;
}

/* Red accent line on hover */
.wp-block-post-template .wp-block-post::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--flavor-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s ease;
	z-index: 5;
}

.wp-block-post-template .wp-block-post:hover::after {
	transform: scaleX(1);
}

/* ============================================================
   SINGLE POST — IMMERSIVE HERO
   ============================================================ */
.single-hero {
	margin-top: -80px !important;
	margin-bottom: 0 !important;
	position: relative;
	overflow: hidden;
}

.single-hero img {
	width: 100% !important;
	max-height: 45vh !important;
	object-fit: cover !important;
	will-change: transform;
}

/* Gradient fade to dark */
.single-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(to top, var(--flavor-base) 0%, rgba(var(--flavor-base-rgb), 0.5) 50%, transparent 100%);
	pointer-events: none;
}

/* Post title pulled up over the hero gradient */
.single-post-title {
	margin-top: -4rem !important;
	position: relative;
	z-index: 5;
	font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
}

/* Content heading size reduction — only inside post/page content */
.entry-content h1, .wp-block-post-content h1 { font-size: clamp(1.2rem, 2.5vw, 1.65rem) !important; }
.entry-content h2, .wp-block-post-content h2 { font-size: clamp(1.1rem, 2.2vw, 1.5rem) !important; }
.entry-content h3, .wp-block-post-content h3 { font-size: clamp(1rem, 1.8vw, 1.3rem) !important; }
.entry-content h4, .wp-block-post-content h4 { font-size: clamp(0.9rem, 1.5vw, 1.1rem) !important; }

/* ============================================================
   ARCHIVE TITLE — centered, dramatic
   ============================================================ */
.wp-block-query-title {
	text-align: center;
	position: relative;
	padding-bottom: 1rem !important;
	margin-bottom: 2rem !important;
}

.wp-block-query-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 3px;
	background: var(--flavor-accent);
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
h2.wp-block-heading,
section h2 {
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	font-weight: 700 !important;
	position: relative;
	padding-bottom: 0.8rem !important;
}

/* Red accent bar removed — was interfering with gallery headings */

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.flavor-breadcrumb {
	padding: 0.8rem 0 !important;
	font-size: 0.7rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	font-family: var(--wp--preset--font-family--mono) !important;
}

.flavor-breadcrumb a {
	color: var(--flavor-accent) !important;
	text-decoration: none !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.wp-block-button__link,
.wp-element-button {
	background: transparent !important;
	color: var(--flavor-accent) !important;
	border: 2px solid var(--flavor-accent) !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	transition: all 0.3s !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--flavor-accent) !important;
	color: #fff !important;
	box-shadow: 0 0 25px rgba(var(--flavor-accent-rgb), 0.4);
}

/* ============================================================
   BLOCKQUOTES
   ============================================================ */
.wp-block-quote {
	border-left: 4px solid var(--flavor-accent) !important;
	background: var(--flavor-quote-bg) !important;
	padding: 1.5rem 2rem !important;
}

/* ============================================================
   SEPARATORS
   ============================================================ */
.wp-block-separator {
	border: none !important;
	height: 1px !important;
	background: linear-gradient(to right, transparent, var(--flavor-accent), transparent) !important;
	opacity: 0.6 !important;
}

/* ============================================================
   CONTENT LINKS
   ============================================================ */
.wp-block-post-content a:not(.wp-block-button__link),
.entry-content a:not(.wp-block-button__link) {
	color: var(--flavor-accent) !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(var(--flavor-accent-rgb), 0.3);
	transition: border-color 0.3s !important;
}

.wp-block-post-content a:not(.wp-block-button__link):hover,
.entry-content a:not(.wp-block-button__link):hover {
	border-bottom-color: var(--flavor-accent) !important;
}

/* ============================================================
   SOCIAL LINKS
   ============================================================ */
.wp-block-social-links .wp-social-link {
	transition: transform 0.3s !important;
}

.wp-block-social-links .wp-social-link:hover {
	transform: scale(1.2) !important;
}

/* ============================================================
   FOOTER — MINIMAL
   ============================================================ */
footer.wp-block-group,
.wp-block-template-part footer {
	border-top: 1px solid rgba(var(--flavor-accent-rgb), 0.4) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.wp-block-query-pagination-numbers .page-numbers {
	padding: 0.4rem 0.7rem !important;
	border: 1px solid var(--flavor-border) !important;
	transition: all 0.3s !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.8rem !important;
}

.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers:hover {
	border-color: var(--flavor-accent) !important;
	color: var(--flavor-accent) !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--flavor-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--flavor-accent); }
html { scrollbar-width: thin; scrollbar-color: var(--flavor-accent) var(--flavor-scrollbar-track); }

/* ============================================================
   SELECTION + FOCUS
   ============================================================ */
::selection {
	background: var(--flavor-accent) !important;
	color: #fff !important;
}

:focus-visible {
	outline: 2px solid var(--flavor-accent) !important;
	outline-offset: 2px;
}

/* ============================================================
   FADE-IN ANIMATION
   ============================================================ */
.fade-in-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger children */
.fade-in-up:nth-child(2) { transition-delay: 0.1s; }
.fade-in-up:nth-child(3) { transition-delay: 0.2s; }
.fade-in-up:nth-child(4) { transition-delay: 0.15s; }
.fade-in-up:nth-child(5) { transition-delay: 0.2s; }
.fade-in-up:nth-child(6) { transition-delay: 0.25s; }

/* ============================================================
   MOBILE OVERLAY NAV
   ============================================================ */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 99999 !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(var(--flavor-base-rgb), 0.98) !important;
	padding: 2rem !important;
	overflow-y: auto !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 1.5rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.3rem !important;
	padding: 0.5rem 0 !important;
	color: var(--flavor-text) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--flavor-accent) !important;
}

/* Hamburger / close button */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--flavor-heading) !important;
	z-index: 100000 !important;
}

.wp-block-navigation__responsive-container-close {
	position: fixed !important;
	top: 1.5rem !important;
	right: 1.5rem !important;
}

/* Submenu in overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	width: 100% !important;
	padding-left: 1rem !important;
	background: transparent !important;
	border: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}

	.wp-block-post-template .wp-block-post:first-child {
		min-height: 50vh;
	}

	.wp-block-post-template .wp-block-post:not(:first-child) {
		min-height: 250px;
	}

	.single-hero img {
		height: 40vh !important;
	}
}

/* ============================================================
   HERO SECTION (pattern)
   ============================================================ */
.hero-section {
	margin-bottom: 0 !important;
}

.hero-section .wp-block-site-logo img,
.hero-section .hero-logo img {
	max-width: 350px;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 40px rgba(var(--flavor-accent-rgb), 0.3));
}

/* ============================================================
   BENTO GRID
   ============================================================ */
.bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(280px, auto);
	gap: 3px;
}

.bento-tile {
	overflow: hidden;
	position: relative;
}

.bento-tile--featured { grid-column: span 2; grid-row: span 2; }
.bento-tile--wide { grid-column: span 2; }

.bento-tile__cover {
	transition: transform 0.6s ease;
	will-change: transform;
}
.bento-tile:hover .bento-tile__cover { transform: scale(1.05); }

@media (max-width: 960px) {
	.bento-grid { grid-template-columns: repeat(2, 1fr); }
	.bento-tile--featured { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 480px) {
	.bento-grid { grid-template-columns: 1fr; }
	.bento-tile--featured, .bento-tile--wide { grid-column: span 1; }
}

/* ============================================================
   CODE BLOCKS
   ============================================================ */
.wp-block-code {
	background: var(--flavor-code-bg) !important;
	border-left: 3px solid var(--flavor-accent) !important;
}

/* ============================================================
   GALLERY
   ============================================================ */
.wp-block-gallery {
	gap: 3px !important;
}

/* ============================================================
   BACKGROUND MOSAIC
   ============================================================ */
.bg-mosaic {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	overflow: hidden;
	background: var(--flavor-base);
	filter: var(--flavor-mosaic-filter);
	opacity: 1;
	pointer-events: none;
	transition: filter 0.4s ease;
}

.bg-mosaic img {
	flex: 1 0 180px;
	height: 160px;
	object-fit: cover;
	display: block;
}

.bg-mosaic-overlay {
	display: none;
}

/* All main content sits above the mosaic */
body {
	background-color: var(--flavor-base) !important;
	position: relative;
}

.site-header,
.site-header.scrolled {
	position: fixed;
	z-index: 10;
}

main.wp-block-group {
	position: relative;
	z-index: 1;
}

/* Footer: solid background */
footer.wp-block-group {
	position: relative;
	z-index: 2;
	background: var(--flavor-base) !important;
}

.wp-block-template-part:last-child {
	position: relative;
	z-index: 2;
	background: var(--flavor-base);
	padding-bottom: 0;
}

.wp-block-template-part:last-child::after {
	content: '';
	display: block;
	height: 100vh;
	background: var(--flavor-base);
}

/* Content dark center stripe */
main.wp-block-group > * {
	position: relative;
	z-index: 1;
}

main.wp-block-group::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1440px;
	height: 100%;
	background: rgba(var(--flavor-base-rgb), var(--flavor-overlay-alpha));
	z-index: 0;
	pointer-events: none;
}

@media (max-width: 768px) {
	.bg-mosaic {
		display: none;
	}
	main.wp-block-group::before {
		max-width: 100%;
	}
}

/* ============================================================
   PIT REPORT HEADER
   ============================================================ */
.pit-report-header {
	text-align: center;
	padding-top: 1rem;
}

.pit-report-header h1 {
	margin-bottom: 0.3rem !important;
	opacity: 0.85;
}

.pit-report-header p {
	opacity: 0.7;
}

/* ============================================================
   PIT FILTER — Category Buttons
   ============================================================ */
.pit-filter {
	display: flex;
	justify-content: center;
	gap: 0;
}

.filter-btn {
	background: transparent;
	color: var(--flavor-muted);
	border: 1px solid var(--flavor-border);
	padding: 0.6rem 1.8rem;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.filter-btn:first-child {
	border-radius: 4px 0 0 4px;
}

.filter-btn:last-child {
	border-radius: 0 4px 4px 0;
}

.filter-btn:not(:first-child) {
	border-left: none;
}

.filter-btn:hover {
	color: var(--flavor-heading);
	border-color: #555;
	background: rgba(255, 255, 255, 0.05);
}

.filter-btn.active {
	color: #fff;
	background: var(--flavor-accent);
	border-color: var(--flavor-accent);
}

.filter-btn.active + .filter-btn {
	border-left-color: var(--flavor-accent);
}

/* Filtered posts animation */
.magazine-grid .wp-block-post {
	transition: opacity 0.4s ease, transform 0.4s ease;
}

@media (max-width: 600px) {
	.filter-btn {
		padding: 0.5rem 1rem;
		font-size: 0.7rem;
	}
}

/* ============================================================
   BLUR-UP LAZY LOADING
   ============================================================ */
.blur-up {
	filter: blur(20px);
	transition: filter 0.6s ease;
	transform: scale(1.05);
}

.blur-up.is-loaded {
	filter: blur(0);
	transform: scale(1);
}


/* ============================================================
   NEWS CARDS — theme-aware backgrounds
   ============================================================ */
.news-card {
	background: var(--flavor-surface) !important;
	border-color: var(--flavor-border) !important;
}