/* ==========================================================================
   pixelframe — new header (pf-header.css)
   Enqueue this separately from theme style.css so it can be cached/versioned
   independently. See integration notes for the wp_enqueue_style() call.
   ========================================================================== */

@font-face {
	font-family: 'pixelframe';
	src: url('/wp-content/themes/cesis/includes/fonts/pixelframe/SwankGothicW90-Condensed-Regular.woff2') format('woff2'),
	     url('/wp-content/themes/cesis/includes/fonts/pixelframe/SwankGothicW90-Condensed-Regular.woff') format('woff'),
	     url('/wp-content/themes/cesis/includes/fonts/pixelframe/SwankGothicW90-Condensed-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ---- Full-bleed backgrounds ----
   Utility for any element that needs to ignore a max-width ancestor and
   span the full viewport. Not needed for most content anymore now that the
   header.php wrapper is scoped to singular posts/pages only (see header.php) —
   keep this around for one-off cases going forward. */

.pf-full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

:root {
	--pf-header-height: 88px;
	--pf-header-bg: #000000;
	--pf-header-text: #f4efea;
	--pf-header-text-dim: rgba(244, 239, 234, 0.75);
	--pf-hero-min-height: 420px;
	/* Fine-tuning knob for the mega menu's vertical position. If the panel
	   still looks too high/low relative to the header on the live site,
	   nudge this number in devtools until it lines up, then update it here
	   -- safer than reusing --pf-header-height itself, which also drives
	   the header bar's own height and several hero paddings elsewhere in
	   this file, so changing it to fix the menu would shift other things. */
	--pf-mega-menu-offset: 22px;
}

/* ---- Bar ---- */

/* ---- Ad placements ---- */

[data-fuse="article2_header"] {
	background: #000;
}

.pf-ad-incontent-wrap {
	background: #fff;
	text-align: center;
	padding: 12px 0;
}

[data-fuse="article2_incontent_1"] {
	background: #fff;
}

/* Hidden by default — only revealed by JS once the ad slot actually
   fills, so subscribers (who never load an ad at all) never see this. */
.pf-ad-gofree {
	display: none;
	font-size: 12px;
	color: #666;
	text-decoration: underline;
	margin-bottom: 8px;
}

.pf-ad-gofree.pf-ad-gofree--visible {
	display: inline-block;
}

.pf-header {
	position: relative;
}

.pf-header__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 1400px;
	z-index: 20;
	height: var(--pf-header-height);
	display: flex;
	align-items: center;
	padding: 0 40px;
	gap: 32px;
}

.pf-header__logo {
	flex: 0 0 auto;
}

.pf-header__logo img {
	display: block;
	height: clamp(30px, 3.3vw + 18px, 65px);
	width: auto;
}

.pf-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.pf-main-menu {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pf-main-menu a {
	color: var(--pf-header-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	opacity: 0.9;
	transition: opacity 0.15s ease;
}

.pf-main-menu a:hover {
	opacity: 1;
}

.pf-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

/* Default (desktop) state — hidden. Declared here, before any media
   query, so the mobile override further down the file always comes
   later in source order and reliably wins for equal-specificity rules,
   regardless of what other stylesheets (e.g. the Cesis parent theme)
   might also declare for this same class. */
.pf-header__mobile-toggle {
	display: none;
}

/* This design only ever shows the search icon, never Cesis's accompanying
   "Search" text label — hide it ourselves rather than relying on Cesis's
   own cesis_desktop_hidden CSS rule to do it (which has repeatedly not
   applied reliably against our new header markup). Left unhidden, that
   text can add just enough width on a real mobile viewport to push the
   subscribe button/hamburger past the screen edge, since flex items don't
   shrink below their content's natural width by default. */
.pf-header__actions .cesis_desktop_hidden {
	display: none;
}

.pf-header__actions .cesis_search_icon a,
.pf-header__actions .cesis_search_icon i {
	color: var(--pf-header-text);
	transition: color 0.15s ease;
}

.pf-header__actions .cesis_search_icon a:hover,
.pf-header__actions .cesis_search_icon:hover i {
	color: #ff2439;
}

.pf-header__signin {
	color: var(--pf-header-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	border: 1px solid rgba(244, 239, 234, 0.4);
	border-radius: 999px;
	padding: 8px 20px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.pf-header__signin:hover {
	border-color: var(--pf-header-text);
	background: rgba(244, 239, 234, 0.08);
}

.pf-header__subscribe {
	color: #000;
	background: #dff74b;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	border-radius: 999px;
	padding: 9px 22px;
	display: inline-block;
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.pf-header__subscribe:hover {
	background: #cdec2f;
	box-shadow: 0 2px 10px rgba(223, 247, 75, 0.35);
}

.pf-header__subscribe:active {
	background: #b8d61a;
	transform: scale(0.96);
	box-shadow: none;
}

/* ---- Hero / page title area ---- */

.pf-header__hero {
	position: relative;
	min-height: var(--pf-hero-min-height);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-top: var(--pf-header-height);
}

.pf-header__hero-bg {
	position: absolute;
	inset: -16px; /* small buffer so blur() samples real image pixels near
	                 the edges instead of transparent space, which reads as
	                 a dark inner-shadow — clipped away by the parent's
	                 overflow:hidden, so it doesn't change the visible size */
	background-image: var(--pf-hero-image);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	filter: blur(6px);
	transform: scale(1);
}

.pf-header__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		#000 0,
		#000 calc(var(--pf-header-height) - 20px),
		rgba(0, 0, 0, 0.9) calc(var(--pf-header-height) + 60px),
		rgba(0, 0, 0, 0.68) calc(var(--pf-header-height) + 180px),
		rgba(0, 0, 0, 0.5) calc(var(--pf-header-height) + 320px),
		rgba(0, 0, 0, 0.45) 100%
	);
}

.pf-header__hero-content {
	position: relative;
	z-index: 5;
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 40px 70px;
	text-align: center;
}

.pf-header__category {
	display: inline-block;
	color: var(--pf-header-text-dim);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

/* Term/category/tag archive description — same size and centered layout as
   the original custom-archive-header block (max-width:800px, 16px/1.6),
   recolored for the dark hero background instead of the old light gray box. */
.pf-header__description {
	max-width: 800px;
	margin: 20px auto 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--pf-header-text);
}

.pf-header__description a {
	color: #ff2439;
	text-decoration: none;
}

.pf-header__description a:hover {
	color: var(--pf-header-text);
	text-decoration: underline;
}

/* Content relocated from the page body via "pf-move-to-header" (see
   pf-header-relocator.php). Mostly resets — the relocated block brings
   its own WPBakery-generated layout/columns/images, this just makes sure
   it isn't forced into the centered/max-width text treatment meant for
   the title/description above it. */
/* ---- Home page hero content ----
   Hardcoded (not dynamic/relocated) since this content is finished and
   won't need further page-builder edits — see pf-header-relocator.php
   for the reasoning on why this one page gets hand-built markup instead. */

.pf-header__hero--home {
	align-items: stretch;
	justify-content: flex-start;
	padding-top: calc(var(--pf-header-height) + 110px);
	padding-bottom: 150px;
	background: #fff;
}

/* Diagonal bottom crop for the background photo layer — clip-path only,
   no background override here, so the actual photo (set via
   background-image on .pf-header__hero-bg) is preserved. */
.pf-header__hero--home .pf-header__hero-bg {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 140px), 0 calc(100% - 20px));
}

.pf-header__hero--home .pf-header__hero-overlay {
	background: linear-gradient(
		to bottom,
		#000000de 0,
		#000000a8 calc(var(--pf-header-height) - 20px),
		rgb(0 0 0 / 50%) calc(var(--pf-header-height) + 60px),
		rgb(0 0 0 / 33%) calc(var(--pf-header-height) + 180px),
		rgb(0 0 0 / 21%) calc(var(--pf-header-height) + 320px),
		rgb(0 0 0 / 0%) 100%
	);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 140px), 0 calc(100% - 20px));
}

.pf-header__home-intro,
.pf-header__generator-feed {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 40px;
	position: relative;
	z-index: 5;
}

.pf-header__home-intro {
	display: flex;
	align-items: center;
	gap: 60px;
	margin-top: 65px;
	margin-bottom: 65px;
}

.pf-header__home-intro-text {
	flex: 1 1 480px;
}

.pf-header__title--left {
	text-align: left;
}

.pf-header__home-body {
	margin: 24px 0 0;
	max-width: 480px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--pf-header-text);
}

.pf-header__home-intro-image {
	flex: 1 1 45%;
	min-height: 260px;
	position: relative;
	overflow: visible; /* tiles bleed rightward past this column — clipped
	                       naturally at the actual viewport edge by
	                       .pf-header__hero's own overflow:hidden */
}

/* ---- Recent posts carousel ----
   All tiles render into the DOM up front. JS assigns each a data-slot
   (its index relative to the active tile); every visual property below
   is driven purely by that attribute, so the browser animates the
   transition automatically whenever JS updates it — no animation logic
   in JS itself. */

.pf-carousel {
	position: relative;
}

.pf-carousel-track {
	position: relative;
	height: 420px;
}

/* Suppresses transitions for the very first slot assignment on page load,
   so tiles snap directly to their correct position/size instead of
   visibly animating from the fallback base style. Removed via JS right
   after the initial paint — normal transitions resume for arrow clicks. */
.pf-carousel-track.pf-carousel--no-transition .pf-carousel-tile {
	transition: none !important;
}

.pf-carousel-tile {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 420px;
	height: 420px;
	border-radius: 6px;
	overflow: hidden;
	background: #111;
	opacity: 0;
	pointer-events: none;
	transform-origin: left center;
	/* Fixed box size (420px) for every tile — all positioning/resizing is
	   done via transform (translateX + scale) instead of animating left/
	   width/height. transform and opacity are GPU-composited and don't
	   trigger layout recalculation, unlike left/width/height, which makes
	   this meaningfully cheaper to animate on mobile.
	   Default/fallback state below: correctly vertically centered, parked
	   at a generic off-canvas position continuing the slot spacing
	   pattern. This is the resting state for any slot outside the
	   explicitly defined -1/0/1/2 range further down. Only opacity
	   transitions here — position/scale snap instantly, since these tiles
	   are never meant to be seen mid-motion; they should simply not be in
	   the viewport, then fade if they were previously visible. */
	transform: translateY(-50%) translateX(calc(var(--slot, 0) * 340px)) scale(0.81);
	transition: opacity 0.4s ease;
}

.pf-carousel-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.pf-carousel-tile:hover img {
	transform: scale(1.04);
}

/* Active (main) tile */
.pf-carousel-tile[data-slot="0"] {
	opacity: 1;
	pointer-events: auto;
	z-index: 3;
	transform: translateY(-50%) translateX(0) scale(1);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Next tile — partially overlapped by the active tile, bleeds toward/past
   the viewport edge */
.pf-carousel-tile[data-slot="1"] {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
	transform: translateY(-50%) translateX(340px) scale(0.905); /* 380/420 */
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Third tile — only meaningfully visible on very wide viewports, per spec */
.pf-carousel-tile[data-slot="2"] {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
	transform: translateY(-50%) translateX(680px) scale(0.81); /* 340/420 */
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Previous active tile, mid-exit after advancing: shifts left and fades */
.pf-carousel-tile[data-slot="-1"] {
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	transform: translateY(-50%) translateX(-420px) scale(0.92);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.pf-carousel-controls {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.pf-carousel-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: #dff74b;
	color: #000;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.pf-carousel-arrow:hover:not(:disabled) {
	background: #cdec2f;
	box-shadow: 0 2px 10px rgba(223, 247, 75, 0.35);
}

.pf-carousel-arrow:active:not(:disabled) {
	background: #b8d61a;
	transform: scale(0.9);
	box-shadow: none;
}

.pf-carousel-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (max-width: 1300px) {
	.pf-carousel-tile[data-slot="2"] {
		opacity: 0; /* third tile only intended for very wide screens */
		pointer-events: none;
	}
}

.pf-header__generator-feed {
	margin-top: 60px;
}

.pf-header__generator-feed-label {
	color: var(--pf-header-text-dim);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.pf-generator-feed-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.pf-generator-feed-item {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
}

.pf-generator-feed-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.pf-generator-feed-item:hover img {
	transform: scale(1.04);
}

.pf-generator-feed-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.pf-generator-feed-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #000;
	background: #dff74b;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	border-radius: 999px;
	padding: 12px 32px;
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.pf-generator-feed-more:hover {
	background: #cdec2f;
	box-shadow: 0 2px 10px rgba(223, 247, 75, 0.35);
}

.pf-generator-feed-more:active {
	background: #b8d61a;
	transform: scale(0.96);
	box-shadow: none;
}

.pf-generator-feed-more[aria-disabled="true"] {
	opacity: 0.7;
	cursor: default;
	pointer-events: none;
}

/* Spinner shown alongside the "Loading…" text while the AJAX request is
   in flight — gives a clear, sustained signal (beyond the initial click
   itself) that the click registered and something is actively happening,
   especially useful if the request is slow. */
.pf-generator-feed-more[aria-disabled="true"]::after {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid rgba(0, 0, 0, 0.25);
	border-top-color: #000;
	border-radius: 50%;
	animation: pf-spin 0.6s linear infinite;
}

@keyframes pf-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 900px) {
	.pf-header__home-intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.pf-header__home-intro-image {
		width: 100%;
		min-height: 180px;
	}

	.pf-carousel-track {
		height: 320px;
	}

	.pf-carousel-tile[data-slot="0"] {
		transform: translateY(-50%) translateX(0) scale(0.76); /* ~320/420 */
	}

	.pf-carousel-tile[data-slot="1"] {
		transform: translateY(-50%) translateX(300px) scale(0.68); /* mostly off-screen — only a sliver peeks in at the right edge */
	}

	.pf-carousel-tile[data-slot="-1"] {
		transform: translateY(-50%) translateX(-320px) scale(0.76);
	}

	.pf-generator-feed-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.pf-header__category:hover {
	color: var(--pf-header-text);
}

/* Applied to <body> via pf-header.js while the mobile menu is open —
   prevents the page underneath from scrolling instead of the menu. */
body.pf-scroll-locked {
	overflow: hidden;
}

/* The bar itself has no background normally (it sits transparently over
   the hero image). While the mobile menu is open, the bar — being
   position:absolute and therefore fixed in place on the (now scroll-
   locked) page — would otherwise let the menu's own internally-scrolling
   content show through behind it. Giving it an opaque background only in
   this state fixes that overlap. */
body.pf-scroll-locked .pf-header__bar {
	background: #000;
}

/* Cart badge positioning fix — the existing cart-badge script anchors to
   .pf-header__logo (see earlier note about updating its selector fallback
   chain); this repositions the badge so it doesn't overlap the logo. */
.pf-header-cart-badge-link.pf-visible {
	display: inline-flex !important;
	left: 52px !important;
	top: -1px !important;
}

.pf-header__title {
	font-family: 'pixelframe', sans-serif;
	font-weight: 500;
	color: var(--pf-header-text);
	text-transform: uppercase;

	line-height: 0.95;
	font-size: clamp(40px, 9vw, 64px);
	margin: 0;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
	.pf-header__nav {
		display: none; /* mobile nav handled separately, unchanged */
	}

	.pf-header__signin {
		display: none;
	}

	/* Subscribe moves into the mobile menu itself (added there separately)
	   instead of sitting in the top bar — this also frees up room for the
	   cart badge to sit left of the search icon on mobile. */
	.pf-header__subscribe {
		display: none;
	}

	.pf-header__logo {
		flex: 1 1 0%;
		min-width: 0;
		display: flex;
		align-items: center;
	}

	.pf-header__logo img {
		width: 100%;
		height: auto;
		max-height: 65px;
		max-width: 226px; /* natural desktop size — logo grows to fill space but won't exceed its real proportions */
	}

	.pf-header__actions {
		flex: 0 0 auto; /* sized tightly to its own content now, no margin-auto needed */
	}

	.pf-header__mobile-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 10px;
		cursor: pointer;
	}

	.pf-header__bar {
		padding: 0 20px;
		gap: 16px;
	}

	.pf-header__actions {
		gap: 12px;
	}

	.pf-header__subscribe {
		padding: 9px 16px;
		white-space: nowrap;
	}

	.pf-header__hero-content {
		padding: 40px 20px 50px;
	}
}

.pf-header__bar .pf-header__mobile-toggle {
	/* Overrides an existing site-wide rule (.cesis_mobile_menu_switch{position:absolute})
	   that assumed this button lives inside .header_logo. Higher specificity here
	   keeps it in normal flex flow regardless of stylesheet load order. */
	position: static;
	right: auto;
}

/* Hamburger icon color — the "lines" (bars) are typically drawn with the
   span itself plus ::before/::after pseudo-elements. !important guarantees
   this wins regardless of load order against other site CSS touching the
   same class. */
.pf-header__mobile-toggle {
	color: var(--pf-header-text);
}

.pf-header__mobile-toggle .lines,
.pf-header__mobile-toggle .lines::before,
.pf-header__mobile-toggle .lines::after {
	background-color: var(--pf-header-text) !important;
}

/* ---- Mobile menu panel ----
   Self-contained styling (not depending on any external Cesis stylesheet).
   Positioning/open-close mechanics (.header_mobile / .menu-open, opacity +
   transform + visibility) are handled by an existing site-wide script/CSS
   snippet already on the site — this block only adds the visual panel
   styling on top of that. */
@media (max-width: 900px) {
	.header_mobile {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		max-height: 100vh;
		overflow-y: auto;
		background: #0c0c0c;
		z-index: 15; /* below .pf-header__bar's z-index:20, so the hamburger/close-X stays visible and clickable on top of the panel */
		padding: calc(var(--pf-header-height) + 8px) 24px 40px;
	}

	/* An existing site-wide rule sets .header_mobile{height:auto!important},
	   which means opening the menu forces a layout recalculation (auto
	   height depends on content) at the same time as the open/close
	   opacity+transform transition — that combination is what causes the
	   visible "jump". Forcing a fixed height here (doubled selector for
	   higher specificity than a same-specificity !important rule) makes
	   opening the menu a pure compositor-level fade, no layout involved. */
	/* An existing site-wide script/stylesheet animates this panel's own
	   opacity/height, which conflicts with our top:0 fixed-height setup —
	   the result is a visible overshoot-then-correct "jump" as both
	   animations fight each other. Rather than keep patching around it,
	   this takes full ownership of the open/close animation: a simple
	   slide in from the right using only transform (no height/opacity
	   involved at all), with !important throughout so it wins regardless
	   of the other stylesheet's rules or load order. Positioning it fully
	   off-screen via translateX also means it doesn't need opacity/
	   visibility to be "hidden" while closed. */
	.header_mobile.header_mobile {
		height: 100vh !important;
		opacity: 1 !important;
		visibility: visible !important;
		
		
		transition: transform 0.35s ease !important;
	}

	.header_mobile.header_mobile.menu-open {
		transform: translateX(0) !important;
		pointer-events: auto !important;
	}

	#mobile-navigation .mobile-menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#mobile-navigation .mobile-menu li {
		border-bottom: 1px solid rgba(244, 239, 234, 0.1);
	}

	#mobile-navigation .mobile-menu li a {
		display: block;
		padding: 14px 0;
		color: var(--pf-header-text);
		text-decoration: none;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 0.5px;
		text-transform: uppercase;
	}

	/* Section-header items (e.g. "ALL GENERATORS", "POPULAR ARTISTS") get
	   extra top spacing and no bottom border, so they read as group labels
	   rather than regular links. Their red accent color/weight/size already
	   comes from an existing site-wide rule targeting .mobile-menu-section
	   span, left untouched here. */
	#mobile-navigation .mobile-menu li.mobile-menu-section {
		border-bottom: none;
		margin-top: 20px;
	}

	#mobile-navigation .mobile-menu li.mobile-menu-section:first-child {
		margin-top: 4px;
	}

	#mobile-navigation .mobile-menu li.mobile-menu-section a {
		padding-bottom: 6px;
	}
}
/* ==========================================================================
   Mega menu — full-width dropdown panel per top-level nav item
   ========================================================================== */

/* Only items with a configured panel (pf-mega-menu.php / Pf_Mega_Menu_Walker)
   get this class — plain nav items are completely unaffected. */
.pf-main-menu li.pf-has-mega-menu {
	position: relative;
}

/* Panel is position:fixed (viewport-relative) rather than nested inside the
   nav's own centered/max-width flex layout — this sidesteps having to fight
   that layout's own containing-block math to achieve a true full-bleed
   width, at the cost of the panel not scrolling with the page. Since the
   header bar itself isn't sticky, the only time a panel can be open is while
   the header is already at the top of the viewport, so this trade-off is
   invisible in normal use; pf-header.js also force-closes any open panel on
   scroll as a safety net. */
.pf-mega-menu {
	position: fixed;
	top: calc(var(--pf-header-bottom, var(--pf-header-height)) + var(--pf-mega-menu-offset));
	left: 0;
	right: 0; /* pins to the true visible viewport edges, unlike width:100vw
	             (which is measured including the scrollbar and pushed the
	             page into horizontal overflow) */
	z-index: 30;
	background: #fff;
	color: #111;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform-origin: top center;
	transform: scaleY(0.94);
	/* This (slower/smoother) transition is what governs CLOSING: when JS
	   removes .is-open, the element falls back to matching only this base
	   rule, so this is the transition that's active for the trip back to
	   opacity:0/scaleY(0.94). Kept deliberately longer than the opening
	   transition below so the close reads as a smooth fade rather than a
	   sudden flash. */
	transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s linear 0.32s;
	pointer-events: none;
}

.pf-mega-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: scaleY(1);
	/* Governs OPENING (this rule is more specific than the base one, so it
	   wins while .is-open is present). Scaling up from the top edge with
	   transform-origin:top reads as the panel expanding downward out of the
	   parent nav item, rather than just fading in in place. Quicker than the
	   close transition so opening still feels snappy. */
	transition: opacity 0.2s ease-out, transform 0.22s ease-out;
	pointer-events: auto;
}

/* Small triangular tab that reads as an extension of the white panel itself
   (same background color, seamlessly touching its top edge) poking up into
   the header to indicate which nav item is active — a symmetric, centered
   triangle, not a corner/flag shape. Horizontal position is set by
   pf-header.js (via --pf-pointer-left, in px, relative to the viewport) to
   sit under whichever nav item is currently hovered/focused. */
.pf-mega-menu__pointer {
	position: absolute;
	top: -10px;
	left: var(--pf-pointer-left, 50%);
	width: 22px;
	height: 10px;
	background: #fff;
	clip-path: polygon(50% 0, 0 100%, 100% 100%);
	transform: translateX(-50%);
}

.pf-mega-menu__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 22px 40px;
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.pf-mega-menu__title-col {
	flex: 0 0 auto;
}

.pf-mega-menu__title {
	font-family: 'pixelframe', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	color: #451416 !important;
	line-height: 0.85;
	font-size: clamp(30px, 3vw, 48px);
	margin: 0;
	white-space: nowrap;
}

.pf-mega-menu__divider {
	flex: 0 0 auto;
	align-self: stretch;
	width: 1px;
	background: rgba(0, 0, 0, 0.12);
}

.pf-mega-menu__label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: #8a8a8a;
	margin-bottom: 1px;
}

.pf-mega-menu__latest {
	flex: 0 0 auto;
}

.pf-mega-menu__latest-tile {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 4px;
	overflow: hidden;
	background: #eee;
}

.pf-mega-menu__latest-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.pf-mega-menu__latest-tile:hover img {
	transform: scale(1.05);
}

.pf-mega-menu__col {
	flex: 0 1 auto;
	min-width: 130px;
}

.pf-mega-menu__links {
	list-style: none;
	margin: 0;
	padding: 0;
	column-gap: 34px;
}

.pf-mega-menu__links li {
	break-inside: avoid;
	margin-bottom: 7px;
	line-height: 1;
	max-width: 150px;
}

.pf-mega-menu__links a {
	/* display:block (not inline-block) is deliberate: an inline-block link
	   sits inside an anonymous inline formatting context, which reserves
	   "descender" space below it based on default line-height/vertical-align
	   metrics -- and that reserved space does NOT scale consistently between
	   a single-line label and one that wraps to two lines, which is exactly
	   what caused the uneven gap in your closeup screenshot (the 2-line
	   items had less visible space after them than the 1-line ones). A
	   block-level box has no such baseline reservation, so the visible gap
	   after every item is purely margin-bottom, with no wrapping-dependent
	   variance. */
	display: block;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: #333;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: break-word;
	transition: color 0.15s ease;
}

.pf-mega-menu__links a:hover {
	color: #ff2439;
}

/* Mega menu is desktop-only, matching .pf-header__nav's own breakpoint —
   mobile navigation already has a completely separate, simpler menu. */
@media (max-width: 900px) {
	.pf-mega-menu {
		display: none;
	}
}