/**
 * Modern Post Archive Stylesheet
 * Soft Tech Design - Modern, unique, and gentle tech-inspired palette.
 * Optimized for CLS and LCP performance.
 */

/* ------------------------------ */
/* ----- Remove Unwanted Highlights */
/* ------------------------------ */

/* Remove tap highlights globally */
* {
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
}

/* Remove text selection highlights but allow selection for content */
.post-card__title,
.post-card__excerpt,
.post-card__content p,
.archive-hero-title,
.archive-hero-description,
.post-card__meta-item {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

/* Prevent selection on interactive elements that cause unwanted highlights */
a,
button,
.post-card,
.post-card__image-link,
.archive-sort-btn,
.archive-author-item,
.post-category-list a,
.mobile-sticky-bottom-menu__browse-btn,
.mobile-sticky-bottom-menu__sort-btn {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Remove selection highlight color */
*::selection {
	background: transparent;
	color: inherit;
}

*::-moz-selection {
	background: transparent;
	color: inherit;
}

/* Remove focus outlines on all elements */
*:focus {
	outline: none !important;
}

*:focus-visible {
	outline: none !important;
}

/* Remove focus outlines on interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
	outline: none !important;
	box-shadow: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Remove tap highlights on mobile */
a,
button,
input,
textarea,
select,
.post-card,
.post-card__image-link,
.archive-sort-btn,
.archive-author-item,
.post-category-list a {
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Remove active state highlights */
a:active,
button:active,
.post-card:active {
	background-color: inherit;
	-webkit-tap-highlight-color: transparent;
}

/* Remove hover highlights that might show as unwanted highlights */
.post-card:hover,
.post-card:focus {
	outline: none !important;
	box-shadow: inherit;
}

/* Remove browser default outlines */
input:focus,
textarea:focus,
select:focus,
button:focus {
	outline: none !important;
	outline-offset: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Remove all focus state visual changes - no highlights anywhere */
.post-category-list a:focus,
.post-category-list .submenu a:focus,
.post-category-list .submenu .submenu .submenu a:focus,
.post-category-list summary .category-link:focus,
.post-category-list summary:focus,
.archive-sort-btn:focus,
.archive-author-item:focus,
.post-card:focus,
.post-card__image-link:focus,
.post-card__get-button:focus,
.load-more-button:focus,
.mobile-sticky-bottom-menu__browse-btn:focus,
.mobile-sticky-bottom-menu__sort-btn:focus,
.categories-toggle-button:focus,
.telegram-join-button:focus {
	background: inherit !important;
	box-shadow: inherit !important;
	transform: none !important;
	outline: none !important;
	border: inherit !important;
	color: inherit !important;
}

/* Remove focus pseudo-elements that create highlights */
.post-category-list a:focus::before,
.post-category-list a:focus::after,
.post-category-list .submenu a:focus::before,
.post-category-list .submenu a:focus::after,
.post-category-list .submenu .submenu .submenu a:focus::before,
.post-category-list .submenu .submenu .submenu a:focus::after {
	display: none !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	content: none !important;
}

/* Remove focus-within highlights */
.archive-search-wrapper .input:focus-within,
.archive-search-wrapper:focus-within {
	box-shadow: inherit !important;
}

.archive-search-wrapper .input:focus-within svg,
.archive-search-wrapper:focus-within svg {
	color: inherit !important;
}

.archive-search-wrapper .input:focus-within .svg path {
	animation: none !important;
}

/* Remove search input focus highlights */
.archive-search-wrapper .search:focus,
.archive-search-wrapper .search:focus-visible {
	box-shadow: inherit !important;
	background: inherit !important;
	transform: none !important;
	border: inherit !important;
	outline: none !important;
}

/* Remove all child element focus highlights */
.post-category-list a:focus .category-icon,
.post-category-list a:focus .category-name,
.post-category-list a:focus .category-count,
.post-category-list a:focus .category-tag--new,
.post-category-list a:focus .category-tag--updated,
.post-category-list .submenu a:focus .category-icon,
.post-category-list .submenu a:focus .category-name,
.post-category-list .submenu a:focus .category-count {
	transform: none !important;
	filter: inherit !important;
	opacity: inherit !important;
	color: inherit !important;
	background: inherit !important;
	box-shadow: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
}

/* ------------------------------ */
/* ----- CLS & LCP Optimizations */
/* ------------------------------ */

/* ==========================================
   FONT LOADING - PREVENT CLS
   ========================================== */
/* Prevent layout shifts from fonts */
* {
	font-display: swap;
}

/* Reserve space for text during font load */
.post-card__title,
.post-card__content,
.archive-hero-title,
.archive-hero-description {
	min-height: 1.2em; /* Reserve vertical space */
	line-height: 1.5;
}

/* Lock font metrics to prevent shifts */
.post-card__title {
	font-size-adjust: 0.5;
}

/* ==========================================
   IMAGE CLS PREVENTION
   ========================================== */
/* All images must have dimensions */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Prevent image layout shifts */
.post-card__image-container,
.post-card__image {
	will-change: transform;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	/* Ensure images don't cause reflow */
	contain: layout style paint;
}

/* Reserve space for images during load */
.post-card__image {
	min-height: 200px; /* Fallback minimum */
	background-color: var(--color-gray-100);
}

/* ==========================================
   DYNAMIC CONTENT CLS PREVENTION
   ========================================== */
/* Reserve space for dynamic content */
.post-card__content,
.post-card__meta-row,
.archive-filters-bar,
.archive-sort-filters {
	contain: layout style;
}

/* Lock heights for containers that might shift */
.archive-hero-section {
	min-height: 200px; /* Reserve space */
}

.post-card {
	contain: layout style paint;
}

/* Prevent badge/category shifts */
.post-card__badge,
.post-card__category {
	position: absolute;
	z-index: 10;
	min-width: 50px;
	min-height: 24px;
}

/* ==========================================
   LCP OPTIMIZATION
   ========================================== */
/* Optimize first visible card for LCP */
.post-card:first-child,
.post-card:first-of-type {
	/* Remove content-visibility for LCP element to ensure immediate rendering */
	content-visibility: visible;
	contain-intrinsic-size: auto;
}

/* Prioritize hero section rendering */
.archive-hero-section {
	/* Hero is LCP candidate, render immediately */
	content-visibility: visible;
	contain-intrinsic-size: auto;
}

/* ==========================================
   ANIMATION CLS PREVENTION
   ========================================== */
/* Use transform/opacity only - no layout shifts */
.post-card,
.post-card__image-container,
.archive-sort-btn,
.archive-author-item {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Never animate width/height - use transform instead */
.post-card:hover {
	transform: translateY(-2px); /* Use transform, not margin */
}

/* ==========================================
   ICON CLS PREVENTION
   ========================================== */
/* All icons must have explicit dimensions */
svg,
.post-card__category-icon,
.archive-sort-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
}

/* ------------------------------ */
/* ----- CSS Variables & Base --- */
/* ------------------------------ */
:root {
	--color-black: #1e293b;
	--color-white: #ffffff;
	--color-gray-50: #f8fafc;
	--color-gray-100: #f1f5f9; /* Page background */
	--color-gray-200: #e2e8f0; /* Light borders */
	--color-gray-300: #cbd5e1; /* Borders */
	--color-gray-400: #94a3b8; /* Meta text */
	--color-gray-500: #64748b; /* Secondary text */
	--color-gray-600: #475569; /* Darker text */
	--color-gray-700: #334155; /* Heading text */
	--color-gray-800: #1e293b; /* Very dark text */
	/* Soft Tech Purple - Primary */
	--color-primary: #8b5cf6; /* Soft purple */
	--color-primary-hover: #7c3aed;
	--color-primary-light: #a78bfa;
	--color-primary-dark: #6d28d9;
	/* Soft Tech Cyan - Accent */
	--color-accent: #06b6d4; /* Soft cyan */
	--color-accent-hover: #0891b2;
	--color-accent-light: #22d3ee;
	/* Soft Tech Green - Success */
	--color-success: #10b981;
	--color-success-hover: #059669;
	--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px 0 rgba(139, 92, 246, 0.08);
	--shadow-md: 0 4px 6px -1px rgba(139, 92, 246, 0.12), 0 2px 4px -1px rgba(139, 92, 246, 0.08);
	--shadow-lg: 0 10px 15px -3px rgba(139, 92, 246, 0.15), 0 4px 6px -2px rgba(139, 92, 246, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(139, 92, 246, 0.18), 0 10px 10px -5px rgba(139, 92, 246, 0.12);
	--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-medium: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-archive-container {
	background-color: var(--color-gray-50);
	font-family: var(--font-primary);
	color: var(--color-black);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* Prevent layout shift during font load */
	font-display: swap;
	/* Prevent layout shifts */
	contain: layout style paint;
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* ------------------------------ */
/* ----- Layout & Containers ---- */
/* ------------------------------ */
.cookie-archive-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    box-sizing: border-box;
    position: relative;
    overflow: visible; /* Allow off-canvas to overflow */
}


.site-main {
	display: grid;
	grid-template-columns: 275px 1fr 300px;
	gap: 15px;
	align-items: start;
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	position: relative;
	overflow: visible; /* Allow off-canvas to overflow */
}

.archive-main-content {
	min-width: 0; /* Prevents flexbox/grid overflow */
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

/* ------------------------------ */
/* ----- Hero Section (New) ----- */
/* ------------------------------ */
/* Wrapper for authors filter and hero section with unified background */
.archive-top-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: 2rem;
}

.archive-hero-section {
	position: relative;
	padding: 20px;
	margin-bottom: 0;
	background: #ffffff00;
	overflow: visible;
	border-radius: 0;
	border: none;
	contain: layout style paint;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	transition: none;
	z-index: 1;
	/* CLS Prevention: Lock height to prevent shifts */
	height: auto;
	/* Reserve space during load */
	content-visibility: auto;
	contain-intrinsic-size: 300px;
}

.archive-hero-section:hover {
	box-shadow: none;
	border-color: transparent;
	transform: none;
}

/* Animated gradient mesh background - seamless tiling - covers entire top section - fully faded */
.archive-hero-mesh-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	z-index: 0;
	pointer-events: none;
	background: 
		radial-gradient(circle at 20% 30%, rgba(74, 144, 226, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(0, 122, 255, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 50% 50%, rgba(74, 144, 226, 0.06) 0%, transparent 60%);
	background-size: 200% 200%;
	background-position: 0% 0%;
	will-change: transform, opacity, background-position;
	animation: archiveMeshFloat 15s ease-in-out infinite;
	transition: opacity 0.4s ease, filter 0.4s ease;
	filter: brightness(1) blur(0.5px);
	overflow: hidden;
}

.archive-hero-mesh-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 200%;
	background: 
		radial-gradient(circle at 30% 40%, rgba(0, 122, 255, 0.05) 0%, transparent 50%),
		radial-gradient(circle at 70% 60%, rgba(74, 144, 226, 0.04) 0%, transparent 50%),
		radial-gradient(circle at 50% 20%, rgba(74, 144, 226, 0.06) 0%, transparent 50%),
		radial-gradient(circle at 20% 80%, rgba(0, 122, 255, 0.05) 0%, transparent 50%);
	background-size: 100% 100%;
	animation: archiveMeshFlow 18s ease-in-out infinite;
	transform-origin: center center;
	opacity: 0.4;
	filter: blur(1px);
}

.archive-top-section:hover .archive-hero-mesh-bg {
	opacity: 0.35;
	filter: brightness(1.1) blur(0.5px);
	animation-duration: 15s;
}

.archive-top-section:hover .archive-hero-mesh-bg::before {
	animation-duration: 18s;
	opacity: 0.5;
}

@keyframes archiveMeshFloat {
	0% {
		background-position: 0% -100%;
		opacity: 0;
	}
	15% {
		background-position: 0% 0%;
		opacity: 0.3;
	}
	50% {
		background-position: 100% 50%;
		opacity: 0.4;
	}
	85% {
		background-position: 100% 100%;
		opacity: 0.25;
	}
	100% {
		background-position: 100% 200%;
		opacity: 0;
	}
}

@keyframes archiveMeshFlow {
	0% {
		transform: translate(0, -100%) scale(0.8);
		opacity: 0;
	}
	12% {
		transform: translate(0, -50%) scale(0.9);
		opacity: 0.25;
	}
	50% {
		transform: translate(-25%, 0%) scale(1);
		opacity: 0.5;
	}
	88% {
		transform: translate(-50%, 50%) scale(0.95);
		opacity: 0.25;
	}
	100% {
		transform: translate(-50%, 100%) scale(0.8);
		opacity: 0;
	}
}

/* Dot-grid + line-mesh overlay - seamless tiling - covers entire top section - HIDDEN LINES */
.archive-hero-mesh-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background-image: none;
	background-size: 40px 40px;
	background-position: 0 0;
	will-change: transform, background-position;
	animation: none;
	overflow: hidden;
}

.archive-hero-mesh-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 200%;
	background-image: none;
	background-size: 40px 40px;
	animation: none;
	opacity: 0;
}

@keyframes archiveGridFlow {
	0% {
		background-position: 0 -100%;
		opacity: 0;
	}
	100% {
		background-position: 0 200%;
		opacity: 0;
	}
}

@keyframes archiveGridScroll {
	0% {
		transform: translate(0, -100%);
		opacity: 0;
	}
	100% {
		transform: translate(-40px, 100%);
		opacity: 0;
	}
}

/* Floating micro-nodes - positioned relative to top section */
.archive-hero-node {
	position: absolute;
	width: 6px;
	height: 6px;
	background: #007aff;
	border-radius: 50%;
	opacity: 0.6;
	box-shadow: 0 0 12px rgba(0, 122, 255, 0.5);
	z-index: 1;
	pointer-events: none;
	will-change: transform, opacity;
}

/* Size variations for visual interest */
.archive-hero-node.small {
	width: 3px;
	height: 3px;
	box-shadow: 0 0 8px rgba(0, 122, 255, 0.4);
	opacity: 0.5;
}

.archive-hero-node.medium {
	width: 6px;
	height: 6px;
	box-shadow: 0 0 12px rgba(0, 122, 255, 0.5);
	opacity: 0.65;
}

/* Node positioning and animations - positioned from top of section */
.archive-hero-node.node-1 { top: 5%; left: 8%; animation: archiveNodeFloat1 6s ease-in-out infinite; }
.archive-hero-node.node-2 { top: 8%; right: 12%; animation: archiveNodeFloat2 7.5s ease-in-out infinite 0.8s; }
.archive-hero-node.node-3 { top: 12%; left: 18%; animation: archiveNodeFloat3 6.5s ease-in-out infinite 1.5s; }
.archive-hero-node.node-4 { top: 10%; right: 22%; animation: archiveNodeFloat4 8s ease-in-out infinite 0.4s; }
.archive-hero-node.node-5 { top: 15%; left: 4%; animation: archiveNodeFloat5 5.5s ease-in-out infinite 1.2s; }
.archive-hero-node.node-6 { top: 18%; right: 8%; animation: archiveNodeFloat6 7s ease-in-out infinite 2s; }
.archive-hero-node.node-7 { top: 20%; left: 12%; animation: archiveNodeFloat7 6.5s ease-in-out infinite 0.6s; }
.archive-hero-node.node-8 { top: 14%; right: 28%; animation: archiveNodeFloat8 8s ease-in-out infinite 1s; }
.archive-hero-node.node-9 { top: 3%; left: 45%; animation: archiveNodeFloat9 6.2s ease-in-out infinite 0.3s; }
.archive-hero-node.node-10 { top: 16%; right: 5%; animation: archiveNodeFloat10 7.2s ease-in-out infinite 1.4s; }
.archive-hero-node.node-11 { top: 22%; left: 35%; animation: archiveNodeFloat11 6.8s ease-in-out infinite 0.7s; }
.archive-hero-node.node-12 { top: 25%; right: 35%; animation: archiveNodeFloat12 7.5s ease-in-out infinite 1.8s; }
.archive-hero-node.node-13 { top: 28%; left: 55%; animation: archiveNodeFloat13 6.3s ease-in-out infinite 0.5s; }
.archive-hero-node.node-14 { top: 6%; right: 50%; animation: archiveNodeFloat14 7.8s ease-in-out infinite 1.1s; }
.archive-hero-node.node-15 { top: 11%; left: 25%; animation: archiveNodeFloat15 6.4s ease-in-out infinite 0.9s; }
.archive-hero-node.node-16 { top: 24%; right: 18%; animation: archiveNodeFloat16 7.3s ease-in-out infinite 1.6s; }
.archive-hero-node.node-17 { top: 19%; left: 30%; animation: archiveNodeFloat17 6.6s ease-in-out infinite 0.2s; }
.archive-hero-node.node-18 { top: 26%; right: 40%; animation: archiveNodeFloat18 7.1s ease-in-out infinite 1.3s; }
.archive-hero-node.node-19 { top: 13%; left: 60%; animation: archiveNodeFloat19 6.7s ease-in-out infinite 0.6s; }
.archive-hero-node.node-20 { top: 21%; left: 42%; animation: archiveNodeFloat20 7.4s ease-in-out infinite 1.5s; }

/* Node float animations - fade from top AND bottom - seamless */
@keyframes archiveNodeFloat1 {
	0% { transform: translate(0, -150px); opacity: 0; }
	12% { transform: translate(0, -50px); opacity: 0.3; }
	25% { transform: translate(0, 0); opacity: 0.5; }
	50% { transform: translate(20px, 50px); opacity: 0.6; }
	75% { transform: translate(20px, 100px); opacity: 0.4; }
	88% { transform: translate(20px, 150px); opacity: 0.2; }
	100% { transform: translate(20px, 200px); opacity: 0; }
}
/* Node float animations - fade from top AND bottom - seamless */
/* Nodes 1-10 fade from top, nodes 11-20 fade from bottom */
@keyframes archiveNodeFloat2 {
	0% { transform: translate(0, -150px); opacity: 0; }
	12% { transform: translate(0, -50px); opacity: 0.25; }
	25% { transform: translate(0, 0); opacity: 0.4; }
	50% { transform: translate(-26px, 50px); opacity: 0.55; }
	75% { transform: translate(-26px, 100px); opacity: 0.3; }
	88% { transform: translate(-26px, 150px); opacity: 0.15; }
	100% { transform: translate(-26px, 200px); opacity: 0; }
}
@keyframes archiveNodeFloat3 {
	0% { transform: translate(0, -150px); opacity: 0; }
	12% { transform: translate(0, -50px); opacity: 0.3; }
	25% { transform: translate(0, 0); opacity: 0.5; }
	50% { transform: translate(24px, 50px); opacity: 0.6; }
	75% { transform: translate(24px, 100px); opacity: 0.35; }
	88% { transform: translate(24px, 150px); opacity: 0.2; }
	100% { transform: translate(24px, 200px); opacity: 0; }
}
@keyframes archiveNodeFloat4 {
	0% { transform: translate(0, -150px); opacity: 0; }
	12% { transform: translate(0, -50px); opacity: 0.28; }
	25% { transform: translate(0, 0); opacity: 0.45; }
	50% { transform: translate(-20px, 50px); opacity: 0.55; }
	75% { transform: translate(-20px, 100px); opacity: 0.3; }
	88% { transform: translate(-20px, 150px); opacity: 0.15; }
	100% { transform: translate(-20px, 200px); opacity: 0; }
}
@keyframes archiveNodeFloat5 {
	0% { transform: translate(0, -150px); opacity: 0; }
	12% { transform: translate(0, -50px); opacity: 0.35; }
	25% { transform: translate(0, 0); opacity: 0.55; }
	50% { transform: translate(16px, 50px); opacity: 0.65; }
	75% { transform: translate(16px, 100px); opacity: 0.4; }
	88% { transform: translate(16px, 150px); opacity: 0.2; }
	100% { transform: translate(16px, 200px); opacity: 0; }
}
@keyframes archiveNodeFloat6 {
	0% { transform: translate(0, -150px); opacity: 0; }
	12% { transform: translate(0, -50px); opacity: 0.25; }
	25% { transform: translate(0, 0); opacity: 0.4; }
	50% { transform: translate(-29px, 50px); opacity: 0.55; }
	75% { transform: translate(-29px, 100px); opacity: 0.3; }
	88% { transform: translate(-29px, 150px); opacity: 0.15; }
	100% { transform: translate(-29px, 200px); opacity: 0; }
}
@keyframes archiveNodeFloat7 {
	0% { transform: translate(0, -150px); opacity: 0; }
	12% { transform: translate(0, -50px); opacity: 0.3; }
	25% { transform: translate(0, 0); opacity: 0.5; }
	50% { transform: translate(26px, 50px); opacity: 0.6; }
	75% { transform: translate(26px, 100px); opacity: 0.35; }
	88% { transform: translate(26px, 150px); opacity: 0.2; }
	100% { transform: translate(26px, 200px); opacity: 0; }
}
@keyframes archiveNodeFloat8 {
	0% { transform: translate(0, -150px); opacity: 0; }
	12% { transform: translate(0, -50px); opacity: 0.28; }
	25% { transform: translate(0, 0); opacity: 0.45; }
	50% { transform: translate(-24px, 50px); opacity: 0.55; }
	75% { transform: translate(-24px, 100px); opacity: 0.3; }
	88% { transform: translate(-24px, 150px); opacity: 0.15; }
	100% { transform: translate(-24px, 200px); opacity: 0; }
}
@keyframes archiveNodeFloat9 {
	0% { transform: translate(0, -150px); opacity: 0; }
	12% { transform: translate(0, -50px); opacity: 0.3; }
	25% { transform: translate(0, 0); opacity: 0.48; }
	50% { transform: translate(18px, 50px); opacity: 0.6; }
	75% { transform: translate(18px, 100px); opacity: 0.35; }
	88% { transform: translate(18px, 150px); opacity: 0.2; }
	100% { transform: translate(18px, 200px); opacity: 0; }
}
@keyframes archiveNodeFloat10 {
	0% { transform: translate(0, -150px); opacity: 0; }
	12% { transform: translate(0, -50px); opacity: 0.26; }
	25% { transform: translate(0, 0); opacity: 0.42; }
	50% { transform: translate(-21px, 50px); opacity: 0.53; }
	75% { transform: translate(-21px, 100px); opacity: 0.28; }
	88% { transform: translate(-21px, 150px); opacity: 0.14; }
	100% { transform: translate(-21px, 200px); opacity: 0; }
}
/* Nodes 11-20 fade from BOTTOM */
@keyframes archiveNodeFloat11 {
	0% { transform: translate(0, 200px); opacity: 0; }
	12% { transform: translate(0, 150px); opacity: 0.2; }
	25% { transform: translate(0, 100px); opacity: 0.4; }
	50% { transform: translate(22px, 50px); opacity: 0.55; }
	75% { transform: translate(22px, 0); opacity: 0.4; }
	88% { transform: translate(22px, -50px); opacity: 0.2; }
	100% { transform: translate(22px, -150px); opacity: 0; }
}
@keyframes archiveNodeFloat12 {
	0% { transform: translate(0, 200px); opacity: 0; }
	12% { transform: translate(0, 150px); opacity: 0.18; }
	25% { transform: translate(0, 100px); opacity: 0.38; }
	50% { transform: translate(-19px, 50px); opacity: 0.52; }
	75% { transform: translate(-19px, 0); opacity: 0.35; }
	88% { transform: translate(-19px, -50px); opacity: 0.18; }
	100% { transform: translate(-19px, -150px); opacity: 0; }
}
@keyframes archiveNodeFloat13 {
	0% { transform: translate(0, 200px); opacity: 0; }
	12% { transform: translate(0, 150px); opacity: 0.22; }
	25% { transform: translate(0, 100px); opacity: 0.42; }
	50% { transform: translate(17px, 50px); opacity: 0.56; }
	75% { transform: translate(17px, 0); opacity: 0.4; }
	88% { transform: translate(17px, -50px); opacity: 0.2; }
	100% { transform: translate(17px, -150px); opacity: 0; }
}
@keyframes archiveNodeFloat14 {
	0% { transform: translate(0, 200px); opacity: 0; }
	12% { transform: translate(0, 150px); opacity: 0.2; }
	25% { transform: translate(0, 100px); opacity: 0.4; }
	50% { transform: translate(-23px, 50px); opacity: 0.54; }
	75% { transform: translate(-23px, 0); opacity: 0.38; }
	88% { transform: translate(-23px, -50px); opacity: 0.19; }
	100% { transform: translate(-23px, -150px); opacity: 0; }
}
@keyframes archiveNodeFloat15 {
	0% { transform: translate(0, 200px); opacity: 0; }
	12% { transform: translate(0, 150px); opacity: 0.21; }
	25% { transform: translate(0, 100px); opacity: 0.41; }
	50% { transform: translate(19px, 50px); opacity: 0.57; }
	75% { transform: translate(19px, 0); opacity: 0.4; }
	88% { transform: translate(19px, -50px); opacity: 0.2; }
	100% { transform: translate(19px, -150px); opacity: 0; }
}
@keyframes archiveNodeFloat16 {
	0% { transform: translate(0, 200px); opacity: 0; }
	12% { transform: translate(0, 150px); opacity: 0.19; }
	25% { transform: translate(0, 100px); opacity: 0.37; }
	50% { transform: translate(-22px, 50px); opacity: 0.51; }
	75% { transform: translate(-22px, 0); opacity: 0.34; }
	88% { transform: translate(-22px, -50px); opacity: 0.17; }
	100% { transform: translate(-22px, -150px); opacity: 0; }
}
@keyframes archiveNodeFloat17 {
	0% { transform: translate(0, 200px); opacity: 0; }
	12% { transform: translate(0, 150px); opacity: 0.23; }
	25% { transform: translate(0, 100px); opacity: 0.43; }
	50% { transform: translate(23px, 50px); opacity: 0.58; }
	75% { transform: translate(23px, 0); opacity: 0.41; }
	88% { transform: translate(23px, -50px); opacity: 0.21; }
	100% { transform: translate(23px, -150px); opacity: 0; }
}
@keyframes archiveNodeFloat18 {
	0% { transform: translate(0, 200px); opacity: 0; }
	12% { transform: translate(0, 150px); opacity: 0.2; }
	25% { transform: translate(0, 100px); opacity: 0.4; }
	50% { transform: translate(-18px, 50px); opacity: 0.53; }
	75% { transform: translate(-18px, 0); opacity: 0.37; }
	88% { transform: translate(-18px, -50px); opacity: 0.19; }
	100% { transform: translate(-18px, -150px); opacity: 0; }
}
@keyframes archiveNodeFloat19 {
	0% { transform: translate(0, 200px); opacity: 0; }
	12% { transform: translate(0, 150px); opacity: 0.22; }
	25% { transform: translate(0, 100px); opacity: 0.42; }
	50% { transform: translate(20px, 50px); opacity: 0.56; }
	75% { transform: translate(20px, 0); opacity: 0.4; }
	88% { transform: translate(20px, -50px); opacity: 0.2; }
	100% { transform: translate(20px, -150px); opacity: 0; }
}
@keyframes archiveNodeFloat20 {
	0% { transform: translate(0, 200px); opacity: 0; }
	12% { transform: translate(0, 150px); opacity: 0.2; }
	25% { transform: translate(0, 100px); opacity: 0.4; }
	50% { transform: translate(-25px, 50px); opacity: 0.55; }
	75% { transform: translate(-25px, 0); opacity: 0.39; }
	88% { transform: translate(-25px, -50px); opacity: 0.2; }
	100% { transform: translate(-25px, -150px); opacity: 0; }
}

/* Decorative shapes - fade from top of section */
.archive-hero-shape {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	will-change: transform, opacity, filter;
	transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	filter: brightness(1);
	animation: archiveShapeFade 8s ease-in-out infinite;
}

.archive-hero-shape.shape-circle {
	top: 8%;
	right: 8%;
	animation-delay: 0s;
}

.archive-hero-shape.shape-hexagon {
	top: 12%;
	left: 5%;
	animation-delay: 2s;
}

.archive-hero-shape.shape-triangle {
	top: 5%;
	left: 12%;
	animation-delay: 4s;
}

.archive-top-section:hover .archive-hero-shape {
	opacity: 0.25;
	filter: brightness(1.15);
}

@keyframes archiveShapeFade {
	0% {
		transform: translateY(-80px) scale(0.8);
		opacity: 0;
	}
	15% {
		transform: translateY(-20px) scale(0.9);
		opacity: 0.1;
	}
	30% {
		transform: translateY(0) scale(1);
		opacity: 0.12;
	}
	70% {
		transform: translateY(0) scale(1);
		opacity: 0.12;
	}
	85% {
		transform: translateY(20px) scale(0.9);
		opacity: 0.08;
	}
	100% {
		transform: translateY(80px) scale(0.8);
		opacity: 0;
	}
}

.archive-hero-shape.shape-circle {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4a90e2 0%, #007aff 100%);
}

.archive-hero-shape.shape-hexagon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #4a90e2 0%, #007aff 100%);
	clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
}

.archive-hero-shape.shape-triangle {
	width: 0;
	height: 0;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-bottom: 70px solid rgba(0, 122, 255, 0.2);
}

/* Ensure containers are above background elements */
.archive-authors-filter {
	position: relative;
	z-index: 2;
}

.archive-hero-container {
	position: relative;
	z-index: 2;
}

/* Disable animations on reduced motion */
@media (prefers-reduced-motion: reduce) {
	.archive-hero-mesh-bg,
	.archive-hero-node {
		animation: none !important;
		opacity: 0.3 !important;
	}
}

/* Disable nodes on mobile for performance */
@media (max-width: 767px) {
	.archive-hero-node {
		display: none;
	}
	.archive-hero-mesh-bg {
		animation: none;
		opacity: 0.3;
	}
}

/* Background animation removed */

.archive-hero-container {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0 2rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.breadcrumb-nav ol {
	display: flex; 
	flex-wrap: wrap; 
	gap: 0.5rem 0.875rem;
	list-style: none; 
	padding: 0; 
	margin: 0 0 2rem;
	font-size: 0.875rem; 
	color: var(--color-gray-500);
	position: relative;
	z-index: 1;
	justify-content: center;
	align-items: center;
}

.breadcrumb-nav a {
	color: var(--color-gray-500);
	text-decoration: none;
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	font-weight: 500;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	position: relative;
	display: inline-block;
}

.breadcrumb-nav a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0.5rem;
	right: 0.5rem;
	height: 2px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	opacity: 0;
	transform: scaleX(0);
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 2px;
}

.breadcrumb-nav a:hover { 
	color: var(--color-primary);
	background: rgba(59, 130, 246, 0.06);
	transform: translateY(-1px);
}

.breadcrumb-nav a:hover::before {
	opacity: 1;
	transform: scaleX(1);
}

.breadcrumb-nav li:not(:last-child)::after {
	content: '›'; 
	margin-left: 0.5rem; 
	color: var(--color-gray-400);
	font-size: 1rem;
	font-weight: 300;
	transition: color 300ms ease;
}

.breadcrumb-nav li[aria-current="page"] {
	color: var(--color-gray-700);
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	background: rgba(59, 130, 246, 0.08);
}

.archive-hero-title {
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 900;
	line-height: 1.1;
	margin: 0 auto 1.25rem;
	color: var(--color-black);
	letter-spacing: -0.03em;
	/* Prevent layout shift */
	min-height: 1.1em;
	contain: layout style;
	background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #2563eb 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
	display: inline-block;
	text-align: center;
	opacity: 0;
	transform: translateY(20px);
	animation: titleReveal 0.8s ease-out 0.2s forwards;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.archive-hero-title::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	animation: titleShimmer 4s ease-in-out infinite;
	pointer-events: none;
}

/* Decorative underline for title - centered */
.archive-hero-title::before {
	content: '';
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%) scaleX(0);
	width: 80px;
	height: 4px;
	background: linear-gradient(90deg, #3b82f6, #2563eb);
	border-radius: 2px;
	opacity: 0;
	animation: underlineReveal 0.8s ease-out 1s forwards;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

@keyframes underlineReveal {
	to {
		opacity: 1;
		transform: translateX(-50%) scaleX(1);
	}
}


@keyframes titleReveal {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes titleShimmer {
	0% { left: -100%; }
	50%, 100% { left: 150%; }
}

.archive-hero-section:hover .archive-hero-title {
	transform: scale(1.01);
	filter: brightness(1.05);
}

.archive-hero-section:hover .archive-hero-title::after {
	animation-duration: 2s;
	opacity: 0.8;
}

.archive-hero-description {
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	color: var(--color-gray-600);
	margin: 0 auto;
	max-width: 70ch;
	line-height: 1.7;
	font-weight: 400;
	opacity: 0;
	transform: translateY(15px);
	animation: descriptionReveal 0.8s ease-out 0.5s forwards;
	position: relative;
	z-index: 1;
	letter-spacing: -0.01em;
	text-align: center;
}

@keyframes descriptionReveal {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.archive-hero-section:hover .archive-hero-description {
	color: var(--color-gray-700);
	transform: translateY(0) scale(1.005);
}


/* ------------------------------ */
/* -- Authors Filter List ------- */
/* ------------------------------ */
.archive-authors-filter {
	margin-bottom: 1.5rem;
	padding: 1rem 0;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}

.archive-authors-filter::-webkit-scrollbar {
	height: 6px;
}

.archive-authors-filter::-webkit-scrollbar-track {
	background: transparent;
}

.archive-authors-filter::-webkit-scrollbar-thumb {
	background: rgba(59, 130, 246, 0.3);
	border-radius: 3px;
}

.archive-authors-filter::-webkit-scrollbar-thumb:hover {
	background: rgba(59, 130, 246, 0.5);
}

.archive-authors-filter__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: nowrap;
	padding: 0 0.75rem;
	min-width: min-content;
}

.archive-author-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 14px;
	cursor: pointer;
	transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
	flex-shrink: 0;
	min-width: 64px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.archive-author-item::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 14px;
	padding: 1px;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.archive-author-item:hover::before {
	opacity: 1;
}

.archive-author-avatar {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	border: 2px solid rgba(255, 255, 255, 0.9);
	transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.1),
		0 2px 4px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	z-index: 1;
}

.archive-author-avatar::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
	opacity: 0;
	transition: opacity 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	z-index: -1;
}

.archive-author-avatar--all {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: 
		0 8px 24px rgba(102, 126, 234, 0.25),
		0 4px 8px rgba(118, 75, 162, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.archive-author-avatar-placeholder {
	font-size: 0.75rem;
	font-weight: 800;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.archive-author-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	filter: brightness(1.05) contrast(1.05);
}

.archive-author-name {
	font-size: 0.6875rem;
	font-weight: 600;
	color: #475569;
	text-align: center;
	white-space: nowrap;
	transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	font-family: 'Inter', system-ui, sans-serif;
	line-height: 1.3;
	max-width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -0.01em;
}

.archive-author-item:hover {
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 
		0 12px 32px rgba(59, 130, 246, 0.15),
		0 4px 12px rgba(0, 0, 0, 0.08),
		0 0 0 1px rgba(59, 130, 246, 0.1);
	transform: translateY(-2px);
}

.archive-author-item:hover .archive-author-avatar {
	border-color: rgba(59, 130, 246, 0.4);
	box-shadow: 
		0 8px 20px rgba(59, 130, 246, 0.25),
		0 4px 10px rgba(37, 99, 235, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	transform: translateY(-2px) scale(1.05);
}

.archive-author-item:hover .archive-author-avatar::after {
	opacity: 1;
}

.archive-author-item:hover .archive-author-avatar-img {
	transform: scale(1.08);
	filter: brightness(1.1) contrast(1.1);
}

.archive-author-item:hover .archive-author-name {
	color: #3b82f6;
	font-weight: 700;
	transform: translateY(-1px);
}

.archive-author-item.active {
	background: rgba(59, 130, 246, 0.08);
	border-color: rgba(59, 130, 246, 0.2);
	box-shadow: 
		0 8px 24px rgba(59, 130, 246, 0.2),
		0 4px 12px rgba(37, 99, 235, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.archive-author-item.active::before {
	opacity: 1;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
}

.archive-author-item.active .archive-author-avatar {
	border-color: rgba(59, 130, 246, 0.6);
	border-width: 2.5px;
	box-shadow: 
		0 8px 24px rgba(59, 130, 246, 0.3),
		0 4px 12px rgba(37, 99, 235, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 0 0 1.5px rgba(59, 130, 246, 0.1);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	transform: translateY(-2px) scale(1.06);
}

.archive-author-item.active .archive-author-avatar--all {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.archive-author-item.active .archive-author-avatar::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4));
	z-index: -1;
	opacity: 1;
	animation: authorPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	filter: blur(8px);
}

@keyframes authorPulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.6;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.8;
	}
}

.archive-author-item.active .archive-author-avatar-img {
	filter: brightness(1.15) contrast(1.1);
}

.archive-author-item.active .archive-author-name {
	color: #3b82f6;
	font-weight: 700;
	transform: translateY(-1px);
	text-shadow: 0 1px 2px rgba(59, 130, 246, 0.1);
}

/* Highlight authors that have posts in the selected category - Modern Style */
.archive-author-item.has-posts-in-category {
	background: rgba(16, 185, 129, 0.08);
	border-color: rgba(16, 185, 129, 0.25);
	box-shadow: 
		0 8px 24px rgba(16, 185, 129, 0.15),
		0 4px 12px rgba(5, 150, 105, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.archive-author-item.has-posts-in-category::before {
	opacity: 1;
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
}

.archive-author-item.has-posts-in-category .archive-author-avatar {
	border-color: rgba(16, 185, 129, 0.5);
	border-width: 2.5px;
	box-shadow: 
		0 6px 20px rgba(16, 185, 129, 0.25),
		0 3px 10px rgba(5, 150, 105, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 0 0 1.5px rgba(16, 185, 129, 0.12);
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	transform: translateY(-1px) scale(1.04);
}

.archive-author-item.has-posts-in-category .archive-author-avatar::after {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(5, 150, 105, 0.4));
	opacity: 0.8;
	animation: highlightPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes highlightPulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.6;
	}
	50% {
		transform: scale(1.15);
		opacity: 0.9;
	}
}

.archive-author-item.has-posts-in-category .archive-author-avatar-img {
	filter: brightness(1.12) contrast(1.08) saturate(1.1);
}

.archive-author-item.has-posts-in-category .archive-author-name {
	color: #059669;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(16, 185, 129, 0.1);
}

/* Enhanced hover effect for highlighted authors */
.archive-author-item.has-posts-in-category:hover {
	background: rgba(16, 185, 129, 0.12);
	border-color: rgba(16, 185, 129, 0.35);
	box-shadow: 
		0 12px 36px rgba(16, 185, 129, 0.25),
		0 6px 16px rgba(5, 150, 105, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
	transform: translateY(-3px);
}

.archive-author-item.has-posts-in-category:hover .archive-author-avatar {
	border-color: rgba(16, 185, 129, 0.7);
	border-width: 2.5px;
	box-shadow: 
		0 10px 28px rgba(16, 185, 129, 0.35),
		0 5px 14px rgba(5, 150, 105, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 0 0 2px rgba(16, 185, 129, 0.18);
	transform: translateY(-3px) scale(1.08);
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.archive-author-item.has-posts-in-category:hover .archive-author-avatar-img {
	transform: scale(1.1);
	filter: brightness(1.15) contrast(1.1) saturate(1.15);
}

.archive-author-item.has-posts-in-category:hover .archive-author-name {
	color: #047857;
	font-weight: 800;
	transform: translateY(-2px);
}

/* Combined active and highlighted state - Modern */
.archive-author-item.active.has-posts-in-category {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.3);
	box-shadow: 
		0 10px 32px rgba(59, 130, 246, 0.25),
		0 5px 16px rgba(37, 99, 235, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 0 0 1px rgba(16, 185, 129, 0.2);
}

.archive-author-item.active.has-posts-in-category::before {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4), rgba(16, 185, 129, 0.3));
}

.archive-author-item.active.has-posts-in-category .archive-author-avatar {
	border-color: rgba(59, 130, 246, 0.7);
	border-width: 2.5px;
	box-shadow: 
		0 10px 28px rgba(59, 130, 246, 0.4),
		0 5px 14px rgba(37, 99, 235, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 0 0 2px rgba(16, 185, 129, 0.25),
		0 0 0 4px rgba(59, 130, 246, 0.08);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #10b981 100%);
	transform: translateY(-2px) scale(1.08);
}

.archive-author-item.active.has-posts-in-category .archive-author-avatar::after {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(139, 92, 246, 0.5), rgba(16, 185, 129, 0.4));
	animation: combinedPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes combinedPulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.7;
	}
	50% {
		transform: scale(1.25);
		opacity: 1;
	}
}

.archive-author-item.active.has-posts-in-category .archive-author-name {
	color: #3b82f6;
	font-weight: 800;
	text-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
}

.archive-author-item.active.has-posts-in-category:hover {
	transform: translateY(-4px);
	box-shadow: 
		0 16px 48px rgba(59, 130, 246, 0.35),
		0 8px 24px rgba(37, 99, 235, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 0 0 2px rgba(16, 185, 129, 0.3);
}

.archive-author-item.active.has-posts-in-category:hover .archive-author-avatar {
	border-width: 2.5px;
	box-shadow: 
		0 12px 32px rgba(59, 130, 246, 0.5),
		0 6px 18px rgba(37, 99, 235, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 0 0 2.5px rgba(16, 185, 129, 0.35),
		0 0 0 5px rgba(59, 130, 246, 0.12);
	transform: translateY(-4px) scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 1280px) {
	.archive-authors-filter {
		margin-bottom: 1.25rem;
		padding: 0.875rem 0;
	}
	
	.archive-authors-filter__inner {
		gap: 0.625rem;
		justify-content: center;
		padding: 0px 0.625rem;
	}
	
	.archive-author-item {
		min-width: 56px;
		padding: 0.4rem;
		gap: 0.4rem;
	}
	
	.archive-author-avatar {
		width: 44px;
		height: 44px;
		border-width: 1.5px;
	}
	
	.archive-author-item.active .archive-author-avatar {
		border-width: 2px;
	}
	
	.archive-author-name {
		font-size: 0.625rem;
		max-width: 60px;
	}
}

@media (max-width: 768px) {
	.archive-authors-filter {
		margin-bottom: 1rem;
		padding: 0.75rem 0;
	}
	
	.archive-authors-filter__inner {
		gap: 0.5rem;
		padding: 0 0.5rem;
		place-content: center;
	}
	
	.archive-author-item {
		min-width: 52px;
		padding: 0.375rem;
		gap: 0.375rem;
	}
	
	.archive-author-avatar {
		width: 40px;
		height: 40px;
		border-width: 1.5px;
	}
	
	.archive-author-item.active .archive-author-avatar {
		border-width: 2px;
	}
	
	.archive-author-name {
		font-size: 0.625rem;
		max-width: 55px;
	}
}

@media (max-width: 480px) {
	.archive-authors-filter {
		margin-bottom: 0.875rem;
		padding: 0.625rem 0;
	}
	
	.archive-authors-filter__inner {
		gap: 0.5rem;
		padding: 0 0.375rem;
	}
	
	.archive-author-item {
		min-width: 48px;
		padding: 0.35rem;
		gap: 0.35rem;
	}
	
	.archive-author-avatar {
		width: 36px;
		height: 36px;
		border-width: 1.5px;
	}
	
	.archive-author-avatar-placeholder {
		font-size: 0.625rem;
	}
	
	.archive-author-name {
		font-size: 0.5625rem;
		max-width: 50px;
	}
}

/* ------------------------------ */
/* -- Filter Bar (New Design) --- */
/* ------------------------------ */
.archive-filters-bar {
	margin-bottom: 2rem;
	position: relative;
	padding-bottom: 0;
	/* CLS Prevention: Reserve minimum height */
	min-height: 60px;
	contain: layout style;
}

.archive-filters-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
}

/* Search Wrapper - Animated Sparkle Search Box */
.archive-search-wrapper {
	flex: 1;
	min-width: 280px;
	max-width: 500px;
	position: relative;
}

/* Animated Sparkle Search Input - From Uiverse.io */
.archive-search-wrapper .input {
	--icon-size: 28px;
	position: relative;
}

.archive-search-wrapper .input svg {
	position: absolute;
	width: var(--icon-size);
	height: var(--icon-size);
	top: 50%;
	left: 1rem;
	translate: 0 -50%;
	overflow: visible;
	color: rgba(59, 130, 246, 0.6);
	transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
}

.archive-search-wrapper .input:is(:hover, :focus-within) svg {
	color: inherit;
}

.archive-search-wrapper .input svg path {
	transform-box: fill-box;
	transform-origin: center;
}

.archive-search-wrapper .input:is(:hover, :focus-within) .svg path {
	animation: none !important;
}

/* Continuous animation when typing */
.archive-search-wrapper .input.typing .svg path {
	animation: pop 0.5s var(--d) infinite;
}

.archive-search-wrapper .input.typing svg {
	animation: iconPulse 1.5s ease-in-out infinite;
}

.archive-search-wrapper .input svg path:nth-of-type(1) {
	--d: 0.24s;
	--r: 20deg;
	--s: 1.5;
}

.archive-search-wrapper .input svg path:nth-of-type(2) {
	--d: 0.12s;
	--r: 10deg;
	--s: 1.4;
}

.archive-search-wrapper .input svg path:nth-of-type(3) {
	--d: 0s;
	--r: 0deg;
	--s: 1.25;
}

@keyframes pop {
	50% {
		scale: var(--s, 1);
		rotate: var(--r, 0deg);
	}
}

.archive-search-wrapper .search {
	box-shadow: 
		0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 8px 10px -6px rgba(0, 0, 0, 0.1);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	min-width: 300px;
	width: 100%;
	padding: 0.875rem 1rem 0.875rem calc(1rem + var(--icon-size) + 0.5rem);
	font-size: 0.9375rem;
	font-weight: 500;
	field-sizing: content;
	background: 
		linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
		linear-gradient(120deg, rgba(59, 130, 246, 0.4), rgba(37, 99, 235, 0.3)) border-box;
	border: 3px solid transparent;
	border-radius: 12px;
	outline: none;
	color: #1f2937;
	caret-color: #3b82f6;
	letter-spacing: -0.01em;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.archive-search-wrapper .search::placeholder {
	color: rgba(107, 114, 128, 0.6);
	opacity: 1;
}

.archive-search-wrapper .search:focus {
	box-shadow: inherit !important;
	background: inherit !important;
	transform: none !important;
	border: inherit !important;
	outline: none !important;
}

.archive-search-wrapper .search:hover {
	box-shadow: 
		0 20px 25px -5px rgba(0, 0, 0, 0.12),
		0 8px 10px -6px rgba(0, 0, 0, 0.12);
	transform: translateY(-1px);
}

/* Animation when typing */
.archive-search-wrapper .input.typing .search {
	animation: searchPulse 2s ease-in-out infinite;
	box-shadow: 
		0 20px 25px -5px rgba(59, 130, 246, 0.2),
		0 8px 10px -6px rgba(37, 99, 235, 0.15),
		0 0 0 1px rgba(59, 130, 246, 0.3);
	background: 
		linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)) padding-box,
		linear-gradient(120deg, rgba(59, 130, 246, 0.6), rgba(37, 99, 235, 0.5)) border-box;
}

@keyframes iconPulse {
	0%, 100% {
		transform: translate(0, -50%) scale(1);
		opacity: 0.9;
	}
	50% {
		transform: translate(0, -50%) scale(1.1);
		opacity: 1;
	}
}

@keyframes searchPulse {
	0%, 100% {
		box-shadow: 
			0 20px 25px -5px rgba(59, 130, 246, 0.2),
			0 8px 10px -6px rgba(37, 99, 235, 0.15),
			0 0 0 1px rgba(59, 130, 246, 0.3);
	}
	50% {
		box-shadow: 
			0 20px 25px -5px rgba(59, 130, 246, 0.3),
			0 8px 10px -6px rgba(37, 99, 235, 0.25),
			0 0 0 2px rgba(59, 130, 246, 0.4),
			0 0 20px rgba(59, 130, 246, 0.2);
	}
}

/* Sort Filters - Minimalistic Futuristic */
.archive-sort-filters {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 10px;
	padding: 0.25rem;
	border: none;
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.8),
		0 0 0 1px rgba(59, 130, 246, 0.08);
	position: relative;
}

.archive-sort-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: transparent;
	border: none;
	border-radius: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #6b7280;
	cursor: pointer;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	white-space: nowrap;
	min-width: 80px;
}

.archive-sort-btn:hover {
	color: #3b82f6;
	background: rgba(59, 130, 246, 0.08);
	transform: translateY(-1px);
}

.archive-sort-btn.active {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.9));
	color: #ffffff;
	box-shadow: 
		0 4px 12px rgba(59, 130, 246, 0.25),
		0 2px 6px rgba(37, 99, 235, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transform: translateY(-1px);
}

.archive-sort-icon {
	font-size: 1rem;
	line-height: 1;
	transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.archive-sort-btn:hover .archive-sort-icon {
	transform: scale(1.1);
}

.archive-sort-btn.active .archive-sort-icon {
	transform: scale(1.15);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.archive-sort-text {
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Remove underline animation - minimalistic design */
/* Note: Underline element removed from HTML, no longer needed */

/* Legacy support for old classes */

/* ------------------------------ */
/* ----- Post Grid & Cards ---- */
/* ------------------------------ */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    transition: opacity 0.3s ease-in-out;
    width: 100%;
    max-width: 100%;
    /* Ensure grid items size correctly */
    grid-auto-rows: min-content;
    align-items: start;
    /* CLS Prevention: Reserve space for grid items */
    contain: layout style;
    /* Performance optimization */
    will-change: contents;
}

/* State for filtering animation - prevent layout shift */
.post-grid.is-filtering {
	opacity: 0.3;
    pointer-events: none;
	/* Maintain layout during filtering */
	min-height: 200px;
	contain: layout style;
}

/* Card animation states - will be applied via JavaScript */
.post-card.animate-in {
	animation: fadeInUp 0.5s ease-out forwards;
}

/* Card entering animation */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Card exiting animation */
.post-card.post-card-hidden {
	opacity: 0;
	transform: scale(0.95);
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	animation: fadeOutDown 0.3s ease-in forwards;
	/* Prevent layout shift - keep space but make invisible */
	visibility: hidden;
	/* Use content-visibility for better performance */
	content-visibility: hidden;
}

@keyframes fadeOutDown {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateY(-10px) scale(0.9);
	}
}

/* Staggered animation for cards appearing */
.post-card.animate-in {
	animation: fadeInUp 0.5s ease-out forwards;
	animation-delay: calc(var(--card-index, 0) * 0.05s);
}

/* Smooth scale on hover during animations */
.post-card:not(.post-card-hidden):hover {
	transform: translateY(-4px) scale(1.02);
}

.post-card {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	overflow: hidden;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.04),
		0 1px 3px rgba(0, 0, 0, 0.02),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	/* CLS Prevention: Reserve space for card */
	contain: layout style paint;
	/* Performance optimization */
	will-change: transform;
}
.post-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.6));
	opacity: 0;
	transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
}
.post-card:hover {
	border-color: rgba(59, 130, 246, 0.3);
	box-shadow: 
		0 8px 24px rgba(59, 130, 246, 0.12),
		0 4px 12px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.85);
}
.post-card:hover::before {
	opacity: 1;
}

.post-card__inner { 
	display: flex; 
	flex-direction: column;
	align-items: stretch;
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	/* Remove extra spacing */
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Ensure no extra space after content */
.post-card__inner {
	/* Remove any bottom spacing */
	gap: 0;
}

.post-card__inner > *:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.post-card__image-container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	flex-shrink: 0;
	overflow: hidden;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border-bottom: 1px solid rgba(226, 232, 240, 0.5);
	transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
	/* CLS Prevention: Reserve space with aspect-ratio */
	position: relative;
	min-height: 0;
	/* Fallback height for browsers without aspect-ratio support */
	height: 0;
	padding-bottom: 62.5%; /* 10/16 = 0.625 */
	/* Performance optimization */
	contain: layout style paint;
	will-change: transform;
	/* Prevent layout shift */
	background-color: var(--color-gray-100);
}

/* Modern browsers with aspect-ratio support */
@supports (aspect-ratio: 16 / 10) {
	.post-card__image-container {
		height: auto;
		padding-bottom: 0;
	}
}

/* If inline aspect-ratio is set, use it */
.post-card__image-container[style*="aspect-ratio"] {
	padding-bottom: 0 !important;
	height: auto !important;
}
.post-card__image-container img,
.post-card__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	/* Optimize image rendering */
	image-rendering: auto;
	/* Prevent layout shift during load */
	background-color: var(--color-gray-100);
	/* LCP optimization */
	content-visibility: auto;
	/* Performance optimization */
	will-change: transform;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}
.post-card__image-container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0);
	transition: background 0.4s ease;
	z-index: 2;
	pointer-events: none;
}
.post-card:hover .post-card__image-container {
	border-bottom-color: rgba(59, 130, 246, 0.2);
	background: linear-gradient(135deg, #f8fafc 0%, rgba(59, 130, 246, 0.03) 100%);
}
.post-card:hover .post-card__image-container::after {
	background: rgba(0, 0, 0, 0.25);
}
.post-card:hover .post-card__image-container > a:first-of-type {
	pointer-events: none;
}

.post-card__image-container > a:first-of-type,
.post-card__image-link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

/* Overlay for button */
.post-card__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0);
	transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.post-card:hover .post-card__overlay {
	background: rgba(0, 0, 0, 0.4);
	pointer-events: auto;
}

.post-card__image-container img.post-card__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
	filter: brightness(1) saturate(1);
	/* CLS Prevention */
	background-color: #f1f5f9;
	/* Performance optimization */
	will-change: transform;
	backface-visibility: hidden;
}
.post-card:hover .post-card__image-container img {
	transform: scale(1.05);
	filter: brightness(0.9) saturate(1.05);
}

/* Read More Button - Overlay on Image */
.post-card__get-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0.35rem;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	color: #1f2937;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 
		0 4px 16px rgba(0, 0, 0, 0.15),
		0 2px 6px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(0.95);
	transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
	letter-spacing: 0.02em;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, 0.8);
	overflow: hidden;
	pointer-events: none;
	cursor: pointer;
	position: relative;
	width: 2.4rem;
	height: 2.4rem;
	min-width: 2.4rem;
	min-height: 2.4rem;
}

.post-card__get-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.6s ease;
}

.post-card__get-button-text {
	position: relative;
	z-index: 1;
	/* Icon-only button text (always hidden in the UI) */
	display: none;
}

.post-card__get-button-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card:hover .post-card__get-button {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.post-card__get-button:hover {
	background: rgba(59, 130, 246, 0.95);
	color: #ffffff;
	box-shadow: 
		0 6px 20px rgba(59, 130, 246, 0.4),
		0 3px 8px rgba(37, 99, 235, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transform: translateY(-2px) scale(1.03);
	border-color: rgba(255, 255, 255, 0.4);
}

.post-card__get-button:hover .post-card__get-button-icon {
	transform: translateX(4px);
}

.post-card__get-button:hover::before {
	left: 100%;
}

.post-card__get-button:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4), 0 2px 4px rgba(6, 182, 212, 0.2);
}

/* Post Badge - NEW and UPDATED - Modern Style */
.post-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 3;
	padding: 0.25rem 0.625rem;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #ffffff;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
	border-radius: 8px;
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.2),
		0 1px 3px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	/* CLS Prevention: Lock dimensions */
	min-width: 50px;
	min-height: 20px;
	white-space: nowrap;
	contain: layout style;
}

/* NEW Badge - Green */
.post-card__badge--new {
	background: rgba(16, 185, 129, 0.95);
	box-shadow: 
		0 2px 8px rgba(16, 185, 129, 0.3),
		0 1px 3px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
	0%, 100% {
		box-shadow: 
			0 2px 8px rgba(16, 185, 129, 0.3),
			0 1px 3px rgba(0, 0, 0, 0.1),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}
	50% {
		box-shadow: 
			0 3px 12px rgba(16, 185, 129, 0.5),
			0 2px 6px rgba(5, 150, 105, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.3);
	}
}

/* UPDATED Badge - Blue */
.post-card__badge--updated {
	background: rgba(59, 130, 246, 0.95);
	box-shadow: 
		0 2px 8px rgba(59, 130, 246, 0.3),
		0 1px 3px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.post-card:hover .post-card__badge--new {
	transform: scale(1.05);
	box-shadow: 
		0 4px 12px rgba(16, 185, 129, 0.4),
		0 2px 6px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.post-card:hover .post-card__badge--updated {
	transform: scale(1.05);
	box-shadow: 
		0 4px 12px rgba(59, 130, 246, 0.4),
		0 2px 6px rgba(37, 99, 235, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.post-card__content {
	padding: 1.125rem 1.125rem 0 1.125rem;
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	margin-bottom: 0;
}
.post-card:hover .post-card__content {
	background: linear-gradient(to right, transparent 0%, rgba(59, 130, 246, 0.02) 100%);
}

/* Category Label - Icon Only - Positioned on Image Top Right */
.post-card__category {
    font-size: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 5px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(59, 130, 246, 0.1);
    width: 10px;
    height: 10px;
    min-width: 30px;
    min-height: 30px;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: categoryIconPulse 2s ease-in-out infinite;
}

@keyframes categoryIconPulse {
    0%, 100% {
        box-shadow: 
            0 2px 8px rgba(59, 130, 246, 0.2), 
            0 1px 3px rgba(0, 0, 0, 0.1), 
            inset 0 1px 0 rgba(255, 255, 255, 0.9), 
            0 0 0 2px rgba(59, 130, 246, 0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 4px 12px rgba(59, 130, 246, 0.4), 
            0 2px 6px rgba(0, 0, 0, 0.15), 
            inset 0 1px 0 rgba(255, 255, 255, 0.9), 
            0 0 0 3px rgba(59, 130, 246, 0.2);
        transform: scale(1.05);
    }
}

/* Show and style the icon */
.post-card__category img,
.post-card__category svg,
.post-card__category-icon,
.post-card__category .category-icon {
    font-size: 1rem; /* Restore size for icon */
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
}

.post-card:hover .post-card__category {
	background: rgba(255, 255, 255, 0.98);
	border-color: rgba(59, 130, 246, 0.5);
	box-shadow: 
		0 4px 12px rgba(59, 130, 246, 0.3),
		0 2px 6px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		0 0 0 3px rgba(59, 130, 246, 0.15);
	transform: scale(1.1);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: none;
}

.post-card:hover .post-card__category img,
.post-card:hover .post-card__category svg,
.post-card:hover .post-card__category-icon,
.post-card:hover .post-card__category .category-icon {
	transform: none;
	margin: 0 auto;
}

.post-card__title {
	font-size: 0.9375rem;
	margin: 0 0 0.5rem;
	line-height: 1.4;
	font-weight: 600;
	color: #1f2937;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	/* CLS Prevention: Reserve space for title */
	min-height: 2.8em; /* Reserve space for 2 lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
	letter-spacing: -0.01em;
}
.post-card__title a { 
	text-decoration: none; 
	color: inherit; 
	transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}
.post-card__title a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #3b82f6, #2563eb);
	border-radius: 2px;
	transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.post-card__title a:hover {
	color: #3b82f6;
}
.post-card__title a:hover::after {
	width: 100%;
}

/* Post Excerpt */
.post-card__excerpt {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #6b7280;
	margin: 0 0 0.875rem 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	letter-spacing: -0.005em;
}

.post-card:hover .post-card__excerpt {
	color: #4b5563;
}

/* Meta Row - Author, Date & Views - Modern Style */
.post-card__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.875rem 0 1.125rem 0;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  color: #64748b;
  font-size: 0.6875rem;
  line-height: 1.3;
  font-weight: 500;
  transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  justify-content: space-around;
  flex-shrink: 0;
}
.post-card:hover .post-card__meta-row {
  border-top-color: rgba(203, 213, 225, 0.8);
}

.post-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  color: #64748b;
  font-size: 10px;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  padding: 0px 5px;
  border-radius: 6px;
  flex-shrink: 1;
  min-width: 0;
  max-width: fit-content;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.post-card__meta-item:first-child {
  flex-shrink: 1;
  min-width: 0;
  max-width: 40%;
}

.post-card__meta-item:nth-child(2) {
  flex-shrink: 0;
  max-width: fit-content;
}

.post-card__meta-item:last-child {
  flex-shrink: 0;
  max-width: fit-content;
  margin-left: 0px;
}
.post-card__meta-item:hover {
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
}

.post-card__meta-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: #94a3b8;
  stroke-width: 2;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.post-card__meta-item:hover .post-card__meta-icon {
  color: #3b82f6;
  transform: scale(1.08);
}

.post-card__meta-item strong {
    color: #1e293b;
    font-weight: 600;
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.post-card:hover .post-card__meta-item strong {
    color: #3b82f6;
}

.post-card__meta-separator {
    display: none;
}

/* Style for views count specifically */
.post-card__meta-item:last-of-type {
    color: #475569;
    font-weight: 500;
}

.post-card:hover .post-card__meta-item:last-of-type {
    color: #3b82f6;
}

/* No Results Message - Minimalistic Futuristic - No Box */
.no-results-message {
	display: none;
	padding: 2rem 2rem;
	text-align: center;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-radius: 0;
	border: none;
	margin-top: 1rem;
	box-shadow: none;
	position: relative;
	overflow: visible;
	animation: fadeInUp 0.5s ease-out;
}

.no-results-message::before {
	display: none;
}

.no-results-message > * {
	position: relative;
	z-index: 1;
}

.no-results-message__icon {
	font-size: 4rem;
	margin-bottom: 1.5rem;
	opacity: 0.7;
	display: inline-block;
	animation: iconFloat 3s ease-in-out infinite;
	filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.2));
}

@keyframes iconFloat {
	0%, 100% { 
		opacity: 0.7;
		transform: translateY(0) scale(1);
	}
	50% { 
		opacity: 0.9;
		transform: translateY(-10px) scale(1.05);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.no-results-message__title {
	margin: 0 0 1rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: #1f2937;
	letter-spacing: -0.02em;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.no-results-message__text {
	margin: 0 auto;
	color: #6b7280;
	font-size: 1rem;
	line-height: 1.7;
	max-width: 480px;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Legacy support */
.no-results-message h3 { 
	margin: 0 0 0.5rem; 
	font-size: 1.5rem; 
}
.no-results-message p {
	margin: 0;
	color: var(--color-gray-700);
	justify-self: anchor-center;
}

/* Hidden post cards for filtering */
.post-card-hidden {
	display: none !important;
}

/* Load More Button */
.load-more-wrapper {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	min-height: 100px !important;
	justify-content: center;
	align-items: center;
	margin-top: 5rem !important;
	margin-bottom: 5rem !important;
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
	width: 100% !important;
	position: relative;
	z-index: 1;
}

.load-more-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.875rem 2rem;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	color: #1e293b !important;
	font-size: 0.875rem !important;
	font-weight: 600;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	letter-spacing: 0.02em;
	border: 1px solid rgba(226, 232, 240, 0.8);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 
		0 4px 16px rgba(0, 0, 0, 0.08),
		0 2px 8px rgba(0, 0, 0, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	position: relative;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	min-width: 200px !important;
	min-height: 48px !important;
	z-index: 2;
	transform: translateY(0);
	text-align: center;
	line-height: 1.5;
}

/* Ensure all text content is visible */
.load-more-button,
.load-more-button *,
.load-more-button span,
.load-more-button .load-more-button__text {
	font-size: 0.875rem !important;
	color: #1e293b !important;
}

/* Explicitly show text content - override any font-size: 0 rules */
.load-more-button .load-more-button__text,
button#load-more-button .load-more-button__text,
.load-more-button span.load-more-button__text {
	font-size: 0.875rem !important;
	color: #1e293b !important;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	text-indent: 0 !important;
	clip: auto !important;
	clip-path: none !important;
	-webkit-text-fill-color: #1e293b !important;
}

.load-more-button * {
	color: #1e293b !important;
}

.load-more-button span,
.load-more-button .load-more-button__text,
button.load-more-button span.load-more-button__text {
	color: #1e293b !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: inline-block !important;
	position: relative !important;
	z-index: 10 !important;
	line-height: 1.5 !important;
	white-space: nowrap !important;
	text-indent: 0 !important;
	letter-spacing: 0.01em !important;
}

.load-more-button__text {
	position: relative !important;
	z-index: 10 !important;
	color: #1e293b !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-shadow: none !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: inline-block !important;
	opacity: 1 !important;
	visibility: visible !important;
	letter-spacing: 0.01em !important;
	line-height: 1.5 !important;
	white-space: nowrap !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: auto !important;
	min-height: auto !important;
	overflow: visible !important;
	text-overflow: clip !important;
	content: '' !important;
	-webkit-text-fill-color: #1e293b !important;
	text-rendering: optimizeLegibility !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

.load-more-button__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	position: relative;
	z-index: 10 !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	filter: none;
	color: #3b82f6 !important;
	stroke: #3b82f6 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.load-more-button:hover .load-more-button__icon {
	transform: translateX(4px);
	color: #2563eb !important;
	stroke: #2563eb !important;
}

.load-more-button:hover .load-more-button__text {
	color: #2563eb !important;
	-webkit-text-fill-color: #2563eb !important;
}

/* Force text to be visible - highest priority */
button.load-more-button:not(.hidden) .load-more-button__text,
#load-more-button:not(.hidden) .load-more-button__text,
.load-more-wrapper .load-more-button:not(.hidden) .load-more-button__text {
	font-size: 0.875rem !important;
	color: #1e293b !important;
	-webkit-text-fill-color: #1e293b !important;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	z-index: 999 !important;
	text-indent: 0 !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	width: auto !important;
	height: auto !important;
	line-height: 1.5 !important;
	white-space: nowrap !important;
	font-weight: 600 !important;
}

.load-more-button::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, 
		rgba(59, 130, 246, 0.05) 0%,
		rgba(139, 92, 246, 0.05) 50%,
		rgba(6, 182, 212, 0.05) 100%
	);
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 12px;
	z-index: 1 !important;
	pointer-events: none;
}

.load-more-button::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: 1;
}

.load-more-button:hover {
	background: rgba(255, 255, 255, 1);
	border-color: rgba(59, 130, 246, 0.3);
	box-shadow: 
		0 8px 24px rgba(59, 130, 246, 0.15),
		0 4px 12px rgba(139, 92, 246, 0.1),
		0 2px 6px rgba(6, 182, 212, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 1);
	transform: translateY(-2px);
}

.load-more-button:hover::before {
	opacity: 1;
}

.load-more-button:hover::after {
	width: 200px;
	height: 200px;
}

.load-more-button:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 
		0 2px 8px rgba(59, 130, 246, 0.12),
		0 1px 4px rgba(139, 92, 246, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	background: rgba(255, 255, 255, 0.98);
}

.load-more-button:active .load-more-button__icon {
	transform: translateX(2px);
}

.load-more-button:focus {
	outline: none;
	box-shadow: 
		0 8px 24px rgba(59, 130, 246, 0.15),
		0 4px 12px rgba(139, 92, 246, 0.1),
		0 0 0 3px rgba(59, 130, 246, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 1);
	border-color: rgba(59, 130, 246, 0.4);
}

.load-more-button:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.load-more-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	background: rgba(241, 245, 249, 0.8);
	border-color: rgba(226, 232, 240, 0.6);
	color: #94a3b8 !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.load-more-button:disabled:hover {
	transform: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	background: rgba(241, 245, 249, 0.8);
}

.load-more-button:disabled * {
	color: #94a3b8 !important;
}

/* Entrance animation */
@keyframes loadMoreButtonFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.load-more-button:not(.hidden) {
	animation: loadMoreButtonFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.load-more-button.hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

.load-more-button.hidden .load-more-button__text {
	display: none !important;
}

/* When button is visible, text MUST be visible */
.load-more-button:not(.hidden) .load-more-button__text {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	font-size: 0.875rem !important;
	color: #1e293b !important;
	-webkit-text-fill-color: #1e293b !important;
	position: relative !important;
	z-index: 999 !important;
}

/* Ensure button shows when hidden class is removed - higher specificity */
.load-more-wrapper .load-more-button:not(.hidden) {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	overflow: visible !important;
}

/* Also ensure wrapper is visible */
.load-more-wrapper:has(.load-more-button:not(.hidden)) {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
}

/* Ultimate text visibility rule - highest specificity */
button#load-more-button.load-more-button:not(.hidden) span.load-more-button__text,
.load-more-wrapper button.load-more-button:not(.hidden) .load-more-button__text {
	content: normal !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: #1e293b !important;
	-webkit-text-fill-color: #1e293b !important;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	z-index: 9999 !important;
	text-indent: 0 !important;
	clip: auto !important;
	clip-path: none !important;
	overflow: visible !important;
	width: auto !important;
	height: auto !important;
	line-height: 1.5 !important;
	white-space: nowrap !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Removed duplicate .load-more-wrapper rule - using flex display from main rule */

/* Hide ads in archive */
.cookie-archive-container .piximfix-inline-ad,
.cookie-archive-container .piximfix-ad-tracking-wrapper,
.cookie-archive-container .adsbygoogle,
.cookie-archive-container .ad,
.cookie-archive-container .advertisement,
.cookie-archive-container [class*="ad-"],
.cookie-archive-container [id*="ad-"],
.archive-main-content .piximfix-inline-ad,
.archive-main-content .piximfix-ad-tracking-wrapper,
.archive-main-content .adsbygoogle,
.archive-main-content .ad,
.archive-main-content .advertisement,
.archive-main-content [class*="ad-"],
.archive-main-content [id*="ad-"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* AdSense Widget Styles - Moved from inline styles */
.adsbygoogle-widget .desktopx .adsbygoogle {
	display: inline-block !important;
	width: 728px !important;
	height: 90px !important;
}

.adsbygoogle-widget .mobilex .adsbygoogle {
	display: inline-block !important;
	width: 300px !important;
	height: 250px !important;
}

/* ------------------------------ */
/* ----- Sidebar & Widgets ------ */
/* ------------------------------ */
.post-filter-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 7rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.post-sidebar { 
	display: flex; 
	flex-direction: column; 
	gap: 1.75rem;
	position: -webkit-sticky;
	position: sticky;
	top: 7rem;
	align-self: start;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.sidebar-widget {
	background: #ffffff;
	border-radius: 16px;
	border: 1px solid #e5e7eb;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
	transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	position: relative;
	overflow: hidden;
	/* Reserve space to prevent CLS */
	min-height: 200px;
	contain: layout style;
	backdrop-filter: blur(10px);
}

/* Subtle gradient overlay on hover */
.sidebar-widget::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(37, 99, 235, 0.01) 100%);
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
	z-index: 0;
}

.sidebar-widget:hover {
	box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12), 0 4px 12px rgba(0, 0, 0, 0.1);
	border-color: #cbd5e1;
	transform: translateY(-2px);
}

.sidebar-widget:hover::before {
	opacity: 1;
}
.sidebar-widget__title {
	font-size: 0.75rem; 
	font-weight: 700; 
	font-family: 'Inter', system-ui, sans-serif;
	margin: 0 0 16px;
	color: #6b7280;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding-bottom: 12px;
	border-bottom: 1px solid #f3f4f6;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

/* Categories Toggle Button */
.categories-toggle {
	cursor: pointer;
	user-select: none;
}

.categories-toggle-button {
	background: transparent;
	border: none;
	padding: 0.25rem;
	margin-left: auto;
	cursor: pointer;
	display: none; /* Hidden on desktop */
	align-items: center;
	justify-content: center;
	color: var(--color-gray-600);
	transition: all 0.3s ease;
	border-radius: 6px;
	width: 32px;
	height: 32px;
}

.categories-toggle-button:hover {
	background: rgba(139, 92, 246, 0.1);
	color: var(--color-primary);
}

.categories-toggle-button:focus {
	outline: none !important;
	box-shadow: none !important;
}

.toggle-icon {
	transition: transform 0.3s ease;
}

.categories-toggle-button[aria-expanded="true"] .toggle-icon {
	transform: rotate(180deg);
}

.categories-list {
	transition: max-height 0.3s ease, opacity 0.3s ease;
	overflow: hidden;
}
.sidebar-widget__title::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 40px;
	height: 2px;
	background: linear-gradient(90deg, #4A90E2, #007AFF);
	border-radius: 2px;
}
.sidebar-widget ul { list-style: none; padding: 0; margin: 0; }

/* Tabbed Widget */
.tab-switcher__header {
	display: flex; 
	background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
	border-radius: 12px; 
	padding: 5px; 
	margin-bottom: 1rem;
	border: 1px solid var(--color-gray-200);
	box-shadow: inset 0 1px 2px rgba(139, 92, 246, 0.05);
}
.tab-switcher__button {
	flex: 1; 
	padding: 0.625rem 1rem; 
	background: transparent; 
	border: none;
	border-radius: 8px; 
	font-size: 0.875rem; 
	font-weight: 600;
	color: var(--color-gray-600); 
	cursor: pointer; 
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}
.tab-switcher__button:hover {
	color: var(--color-primary);
	background-color: rgba(139, 92, 246, 0.1);
}
.tab-switcher__button.active {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3), 0 1px 3px rgba(6, 182, 212, 0.2);
}
.tab-switcher__content { 
	display: none; 
	animation: fadeIn 0.3s ease;
}
.tab-switcher__content.active { 
	display: block; 
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}
.tab-switcher__content ul { 
	display: flex; 
	flex-direction: column; 
	gap: 10px; 
}
.tab-switcher__content li {
	transition: transform 0.2s ease;
}
.tab-switcher__content li:hover {
	transform: translateX(4px);
}
.tab-switcher__content li a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	padding: 0px;
	border-radius: 10px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: transparent;
	border: 1px solid transparent;
}
.tab-switcher__content li a:hover {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(6, 182, 212, 0.06) 100%);
	border-color: rgba(139, 92, 246, 0.2);
	box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
}
.tab-switcher__content img, 
.widget-post-image,
.widget-post-placeholder {
	width: 60px; 
	height: 60px; 
	flex-shrink: 0; 
	object-fit: cover;
	border-radius: 10px;
	display: block;
	aspect-ratio: 1 / 1;
	min-width: 60px;
	min-height: 60px;
	border: 2px solid var(--color-gray-200);
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(139, 92, 246, 0.1);
}
.tab-switcher__content li a:hover img,
.tab-switcher__content li a:hover .widget-post-placeholder {
	border-color: var(--color-primary-light);
	box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
	transform: scale(1.05);
}
.widget-post-placeholder { 
	background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
	/* Prevent layout shift - fixed dimensions */
	display: block;
	flex-shrink: 0;
	min-width: 60px;
	min-height: 60px;
}
.widget-post-info { 
	display: flex; 
	flex-direction: column; 
	gap: 0.25rem; 
	flex: 1;
	min-width: 0;
}
.widget-post-title {
	font-weight: 600; 
	color: var(--color-gray-800); 
	line-height: 1.4;
	transition: color 0.3s ease;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0;
}
.tab-switcher__content li a:hover .widget-post-title { 
	color: var(--color-primary);
}
.widget-post-date, .widget-post-meta { 
	font-size: 0.75rem; 
	color: var(--color-gray-500); 
}


.category-name {
	flex-grow: 1;
	color: var(--color-black);
}
.category-count {
	font-size: 0.8rem;
	background-color: var(--color-gray-100);
	color: var(--color-gray-700);
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-pill);
	font-weight: 600;
	transition: var(--transition-fast);
	line-height: 1;
}


/* Telegram Channel Widget */
.sidebar-widget--telegram {
	background: linear-gradient(135deg, #0088cc 0%, #006699 50%, #005580 100%);
	border: none;
	color: #ffffff;
	position: relative;
	overflow: hidden;
}
.sidebar-widget--telegram::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	animation: telegramShine 8s ease-in-out infinite;
	opacity: 0.5;
}
@keyframes telegramShine {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(-20%, -20%) rotate(180deg); }
}
.sidebar-widget--telegram:hover {
	box-shadow: 0 12px 32px rgba(0, 136, 204, 0.35), 0 6px 16px rgba(0, 102, 153, 0.25);
	transform: translateY(-2px);
}
.sidebar-widget--telegram .sidebar-widget__title {
	color: #ffffff;
	border-bottom-color: rgba(255, 255, 255, 0.25);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.sidebar-widget--telegram .sidebar-widget__title::after {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
	width: 60px;
}

.telegram-message {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.98);
	margin: -0.5rem 0 1.25rem;
	line-height: 1.7;
	font-weight: 500;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 1;
}

.telegram-widget {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.telegram-stats {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.125rem;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
	border-radius: 14px;
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}
.telegram-stats::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.6s ease;
}
.sidebar-widget--telegram:hover .telegram-stats::before {
	left: 100%;
}
.sidebar-widget--telegram:hover .telegram-stats {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.15) 100%);
	border-color: rgba(255, 255, 255, 0.35);
	transform: scale(1.02);
}

.telegram-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
	border-radius: 14px;
	color: #ffffff;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}
.telegram-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.4s ease, height 0.4s ease;
}
.sidebar-widget--telegram:hover .telegram-icon::after {
	width: 100px;
	height: 100px;
}
.sidebar-widget--telegram:hover .telegram-icon {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.telegram-icon svg {
	width: 32px;
	height: 32px;
	position: relative;
	z-index: 1;
	transition: transform 0.3s ease;
}
.sidebar-widget--telegram:hover .telegram-icon svg {
	transform: scale(1.1);
}

.telegram-info {
	flex: 1;
}

.telegram-count {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.telegram-count-number {
	font-size: 1.75rem;
	font-weight: 900;
	color: #ffffff;
	line-height: 1.2;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	display: inline-block;
	position: relative;
}
.sidebar-widget--telegram:hover .telegram-count-number {
	transform: scale(1.05);
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.telegram-count-number::after {
	content: '👥';
	font-size: 0.875rem;
	margin-left: 0.375rem;
	opacity: 0.8;
	animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
	0%, 100% { opacity: 0.8; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.1); }
}

.telegram-count-label {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.9);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.telegram-join-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	color: #0088cc;
	text-decoration: none;
	border-radius: 14px;
	font-weight: 800;
	font-size: 0.9375rem;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 136, 204, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.5);
	position: relative;
	overflow: hidden;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.telegram-join-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(0, 136, 204, 0.15), transparent);
	transition: left 0.6s ease;
}

.telegram-join-button::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(0, 136, 204, 0.2) 0%, transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.5s ease, height 0.5s ease;
}

.telegram-join-button:hover {
	background: linear-gradient(135deg, #ffffff 0%, #e8f4f8 100%);
	color: #006699;
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 10px 30px rgba(0, 136, 204, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
	border-color: rgba(255, 255, 255, 0.8);
}

.telegram-join-button:hover::before {
	left: 100%;
}

.telegram-join-button:hover::after {
	width: 300px;
	height: 300px;
}

.telegram-join-button:active {
	transform: translateY(-1px) scale(0.98);
	box-shadow: 0 4px 15px rgba(0, 136, 204, 0.25);
}

.telegram-join-icon {
	font-size: 1.25rem;
	line-height: 1;
	transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	display: inline-block;
}

.telegram-join-button:hover .telegram-join-icon {
	transform: translateX(4px) rotate(15deg) scale(1.2);
}

.telegram-join-text {
	line-height: 1;
	position: relative;
	z-index: 1;
}

/* ------------------------------ */
/* ----- Responsive ------------- */
/* ------------------------------ */
@media (max-width: 1280px) {
	.site-main {
		grid-template-columns: 1fr 320px;
		gap: 2rem;
		max-width: 100%;
		width: 100%;
	}
	.post-filter-sidebar {
		grid-row: 1;
		grid-column: 1 / -1;
		position: static;
		max-width: 100%;
	}
	.archive-main-content {
		grid-column: 1 / 2;
		max-width: 100%;
		width: 100%;
	}
	.post-sidebar {
		grid-column: 2 / 3;
		position: static;
		max-width: 100%;
	}
}

@media (max-width: 1280px) {
	.cookie-archive-container { 
		padding: 1.5rem 1.25rem; 
		max-width: 100%;
		width: 100%;
	}
	.site-main {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		max-width: 100%;
		width: 100%;
	}
	
	/* Show categories sidebar normally on mobile */
	.post-filter-sidebar {
		position: static !important;
		display: block !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		z-index: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
		visibility: visible !important;
	}
	
	.archive-main-content,
	.post-sidebar {
		grid-column: 1 / -1;
		max-width: 100%;
		width: 100%;
	}
	.post-sidebar {
		position: static;
	}
	
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
		width: 100%;
		max-width: 100%;
	}
	
	/* GeneratePress grid responsive */
	.generate-columns.grid-33,
	.grid-sizer.grid-33 {
		width: 50%;
		max-width: 50%;
	}
	
	/* Mobile: Show Read More button centered on thumbnail */
	.post-card__overlay {
		background: rgba(0, 0, 0, 0.2);
		pointer-events: auto;
		z-index: 3;
	}
	
	.post-card__get-button {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) scale(1) !important;
		pointer-events: auto !important;
		width: 2.4rem;
		min-width: 2.4rem;
		padding: 0.3rem;
		gap: 0;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		box-shadow: 
			0 4px 16px rgba(0, 0, 0, 0.2),
			0 2px 6px rgba(0, 0, 0, 0.15),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}
	
	.post-card__get-button-icon {
		width: 14px;
		height: 14px;
		flex-shrink: 0;
	}
	
	/* Hero Section Responsive */
	.archive-hero-section {
		padding: 3.5rem 0 2.5rem;
		margin-bottom: 2rem;
		border-radius: 20px;
		min-height: 260px;
	}
	
	.archive-hero-container {
		padding: 0 1.5rem;
	}
	
	.archive-hero-title {
		font-size: 2.5rem;
		margin-bottom: 1rem;
	}
	
	.archive-hero-title::before {
		width: 60px;
		height: 3px;
		bottom: -10px;
	}
	
	.archive-hero-description {
		font-size: 1.125rem;
	}
	
	.breadcrumb-nav ol {
		margin-bottom: 1.5rem;
	}
	
	/* Filter Bar Responsive */
	.archive-filters-bar {
		margin-bottom: 2rem;
	}
	
	.archive-filters-bar__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
	
	.archive-search-wrapper {
		max-width: 100%;
	}
	
	/* Hide sort filters on mobile - they're in sticky bottom menu */
	.archive-sort-filters {
		display: none !important;
	}
	
	/* Legacy support */
	.post-archive-header {
		margin-bottom: 2rem;
	}
}

/* Categories toggle breakpoint at 1280px */
@media (max-width: 1280px) {
	/* Show toggle button only on desktop sidebar (not in off-canvas) */
	.post-filter-sidebar .categories-toggle-button {
		display: flex;
	}
	
	/* Collapse categories by default on mobile */
	.post-filter-sidebar .categories-list {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	
	/* Expanded state on mobile */
	.post-filter-sidebar .categories-list.expanded {
		max-height: 2000px;
		opacity: 1;
		margin-top: 1rem;
	}
}

@media (max-width: 768px) {
	.cookie-archive-container { 
		padding: 1.25rem 1rem; 
	}
	.site-main {
		gap: 1.25rem;
	}
	
	/* Hero Section Mobile */
	.archive-hero-section {
		padding: 2.5rem 0 1.5rem;
		margin-bottom: 1.5rem;
		border-radius: 16px;
		min-height: 220px;
	}
	
	.archive-hero-container {
		padding: 0 1rem;
	}
	
	.archive-hero-title { 
		font-size: 2rem; 
		line-height: 1.2;
		margin-bottom: 0.75rem;
	}
	
	.archive-hero-title::before {
		width: 50px;
		height: 3px;
		bottom: -8px;
	}
	
	.archive-hero-description { 
		font-size: 1rem; 
		margin-top: 0;
		line-height: 1.6;
	}
	
	.breadcrumb-nav ol {
		font-size: 0.8125rem;
		margin-bottom: 1.25rem;
		gap: 0.375rem 0.625rem;
	}
	
	.breadcrumb-nav a {
		padding: 0.2rem 0.4rem;
	}
	
	/* Filter Bar Mobile */
	.archive-filters-bar {
		margin-bottom: 1.5rem;
		padding-bottom: 0.75rem;
	}
	
	.archive-filters-bar__inner {
		gap: 0.875rem;
	}
	
	.archive-search-wrapper .input {
		--icon-size: 24px;
	}
	
	.archive-search-wrapper .search {
		padding: 0.75rem 0.875rem 0.75rem calc(0.875rem + var(--icon-size) + 0.5rem);
		font-size: 0.875rem;
		min-width: 250px;
	}
	
	/* Hide sort filters on mobile - they're in sticky bottom menu */
	.archive-sort-filters {
		display: none !important;
	}
	
	.archive-sort-icon {
		font-size: 0.875rem;
	}
	
	/* Legacy support */
	.post-archive-header {
		margin-bottom: 1.5rem;
	}
	#post-search-input.input {
		height: 38px;
		font-size: 14px;
		padding-left: 12px;
		padding-right: 12px;
	}
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.875rem;
		width: 100%;
		max-width: 100%;
	}
	
	/* GeneratePress grid responsive - 2 columns on mobile */
	.generate-columns.grid-33,
	.grid-sizer.grid-33 {
		width: 50%;
		max-width: 50%;
	}
	.post-card {
		border-radius: 10px;
	}
	.post-card__image-container {
		width: 100%;
		aspect-ratio: 16 / 10;
		border-bottom: 1px solid var(--color-gray-200);
	}
	.post-card__image-container img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}
	
	/* Mobile: Show Read More button centered on thumbnail */
	.post-card__overlay {
		background: rgba(0, 0, 0, 0.2);
		pointer-events: auto;
		z-index: 3;
	}
	
	.post-card__get-button {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) scale(1) !important;
		pointer-events: auto !important;
		width: 2.4rem;
		min-width: 2.4rem;
		padding: 0.3rem;
		gap: 0;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		box-shadow: 
			0 4px 16px rgba(0, 0, 0, 0.2),
			0 2px 6px rgba(0, 0, 0, 0.15),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}
	
	.post-card__get-button-icon {
		width: 14px;
		height: 14px;
		flex-shrink: 0;
	}
	
	.post-card__content {
		padding: 14px;
	}
	.post-card__title {
		font-size: 0.9375rem;
		line-height: 1.5;
	}
	.post-card__excerpt {
		font-size: 0.75rem;
		margin: 0.375rem 0 0.5rem;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	.post-card__meta-row {
		font-size: 0.7rem;
		padding-top: 0.625rem;
		gap: 6px;
	}
	
	/* No Results Message Mobile */
	.no-results-message {
		padding: 3rem 1.5rem;
	}
	
	.no-results-message__icon {
		font-size: 3rem;
		margin-bottom: 1.25rem;
	}
	
	.no-results-message__title {
		font-size: 1.5rem;
		margin-bottom: 0.875rem;
	}
	
	.no-results-message__text {
		font-size: 0.9375rem;
		max-width: 100%;
	}
	.post-card__meta-icon {
		width: 11px;
		height: 11px;
	}
	.load-more-wrapper {
		margin-top: 3rem !important;
		margin-bottom: 3rem !important;
	}
	.load-more-button {
		padding: 0.875rem 2rem;
		font-size: 0.875rem;
		width: 100%;
		max-width: 300px;
	}
	.sidebar-widget {
		padding: 1rem;
	}
	.sidebar-widget__title {
		font-size: 1rem;
		margin-bottom: 1rem;
		padding-bottom: 0.625rem;
	}
	.tab-switcher__header {
		margin-bottom: 1rem;
		padding: 4px;
	}
	.tab-switcher__button {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
	}
	.tab-switcher__content img, 
	.widget-post-placeholder {
		width: 50px;
		height: 50px;
	}
	.widget-post-title {
		font-size: 0.8125rem;
	}
	.telegram-stats {
		padding: 0.875rem;
		gap: 0.875rem;
	}
	.telegram-icon {
		width: 48px;
		height: 48px;
	}
	.telegram-icon svg {
		width: 28px;
		height: 28px;
	}
	.telegram-count-number {
		font-size: 1.5rem;
	}
	.telegram-join-button {
		padding: 0.875rem 1.25rem;
		font-size: 0.875rem;
	}
	.post-category-list a {
		padding: 0.5rem 0.625rem;
		font-size: 0.8125rem;
	}
}

@media (max-width: 600px) {
	.cookie-archive-container { 
		padding: 1rem 0.875rem; 
	}
	.site-main {
		gap: 1rem;
	}
	
	/* Hero Section Small Mobile */
	.archive-hero-section {
		padding: 2rem 0 1.25rem;
		margin-bottom: 1.25rem;
		border-radius: 14px;
		min-height: 200px;
	}
	
	.archive-hero-container {
		padding: 0 0.75rem;
	}
	
	.archive-hero-title { 
		font-size: 1.875rem; 
		line-height: 1.2;
		margin-bottom: 0.625rem;
	}
	
	.archive-hero-title::before {
		width: 40px;
		height: 2px;
		bottom: -6px;
	}
	
	.archive-hero-description { 
		font-size: 0.9375rem; 
		margin-top: 0;
		line-height: 1.6;
	}
	
	.breadcrumb-nav ol {
		font-size: 0.8125rem;
		margin-bottom: 1rem;
		gap: 0.25rem 0.5rem;
	}
	
	.breadcrumb-nav a {
		padding: 0.15rem 0.35rem;
	}
	
	.breadcrumb-nav li:not(:last-child)::after {
		margin-left: 0.375rem;
	}
	
	/* Filter Bar Small Mobile */
	.archive-filters-bar {
		margin-bottom: 1.25rem;
		padding-bottom: 0.625rem;
	}
	
	.archive-search-wrapper .input {
		--icon-size: 20px;
	}
	
	.archive-search-wrapper .search {
		padding: 0.625rem 0.75rem 0.625rem calc(0.75rem + var(--icon-size) + 0.5rem);
		font-size: 0.8125rem;
		min-width: 200px;
		border-width: 2px;
	}
	
	/* Hide sort filters on mobile - they're in sticky bottom menu */
	.archive-sort-filters {
		display: none !important;
	}
	
	/* Legacy support */
	.post-archive-header {
		margin-bottom: 1.25rem;
	}
	#post-search-input.input {
		height: 36px;
		font-size: 13px;
		padding-left: 12px;
		padding-right: 12px;
		letter-spacing: 0.5px;
	}
	.post-grid {
		gap: 0.875rem;
	}
	.post-card {
		border-radius: 8px;
	}
	/* Mobile: Ensure Read More button is visible and centered */
	.post-card__overlay {
		background: rgba(0, 0, 0, 0.2);
		pointer-events: auto;
	}
	
	.post-card__get-button {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) scale(1) !important;
		width: 2.4rem;
		min-width: 2.4rem;
		padding: 0.3rem;
		gap: 0;
	}
	
	.post-card__get-button-icon {
		width: 12px;
		height: 12px;
	}
	
	.post-card__content {
		padding: 12px;
	}
	.post-card__category {
		font-size: 0.625rem;
		padding: 0.2rem 0.45rem;
		margin-bottom: 0.375rem;
	}
	.post-card__title {
		font-size: 0.875rem;
		line-height: 1.4;
	}
	.post-card__excerpt {
		font-size: 0.6875rem;
		margin: 0.25rem 0 0.375rem;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	.post-card__meta-row {
		font-size: 0.65rem;
		padding-top: 0.5rem;
		gap: 5px;
	}
	
	/* No Results Message Small Mobile */
	.no-results-message {
		padding: 2.5rem 1rem;
	}
	
	.no-results-message__icon {
		font-size: 2.5rem;
		margin-bottom: 1rem;
	}
	
	.no-results-message__title {
		font-size: 1.25rem;
		margin-bottom: 0.75rem;
	}
	
	.no-results-message__text {
		font-size: 0.875rem;
		max-width: 100%;
	}
	.post-card__meta-item {
		font-size: 0.65rem;
		padding: 2px 3px;
	}
	.post-card__meta-icon {
		width: 10px;
		height: 10px;
	}
	.post-card__get-button {
		padding: 0.35rem;
		font-size: 0.75rem;
		width: 2.4rem;
		min-width: 2.4rem;
		min-height: 2.4rem;
		gap: 0;
	}
	.load-more-button {
		padding: 0.75rem 1.5rem;
		font-size: 0.8125rem;
		width: 100%;
		max-width: 100%;
		min-height: 44px; /* Touch-friendly minimum */
	}
	.sidebar-widget {
		padding: 0.875rem;
		border-radius: 12px;
	}
	.sidebar-widget__title {
		font-size: 0.9375rem;
		margin-bottom: 0.875rem;
		padding-bottom: 0.5rem;
	}
	.post-sidebar {
		gap: 1.25rem;
	}
	.tab-switcher__header {
		margin-bottom: 0.875rem;
		padding: 3px;
	}
	.tab-switcher__button {
		padding: 0.5rem 0.625rem;
		font-size: 0.75rem;
	}
	.tab-switcher__content ul {
		gap: 0.625rem;
	}
	.tab-switcher__content li a {
		padding: 0.5rem;
		gap: 0.75rem;
	}
	.tab-switcher__content img, 
	.widget-post-placeholder {
		width: 45px;
		height: 45px;
	}
	.widget-post-title {
		font-size: 0.75rem;
	}
	.telegram-message {
		font-size: 0.8125rem;
		margin: -0.5rem 0 1rem;
		line-height: 1.6;
	}
	.telegram-stats {
		padding: 0.75rem;
		gap: 0.75rem;
	}
	.telegram-icon {
		width: 44px;
		height: 44px;
	}
	.telegram-icon svg {
		width: 24px;
		height: 24px;
	}
	.telegram-count-number {
		font-size: 1.375rem;
	}
	.telegram-count-label {
		font-size: 0.75rem;
	}
	.telegram-join-button {
		padding: 0.75rem 1rem;
		font-size: 0.8125rem;
		min-height: 44px; /* Touch-friendly minimum */
	}
	.tab-switcher__button {
		min-height: 40px; /* Touch-friendly minimum */
	}
	.post-category-list a {
		min-height: 44px; /* Touch-friendly minimum */
	}
	.post-category-list a {
		padding: 0.5rem 0.625rem;
		font-size: 0.8125rem;
	}
	.post-category-list .category-count {
		font-size: 0.7rem;
		padding: 0.2rem 0.5rem;
	}
}

@media (max-width: 480px) {
	.cookie-archive-container { 
		padding: 0.875rem 0.75rem; 
	}
	
	/* Hero Section Extra Small */
	.archive-hero-section {
		padding: 0.75rem 0 0rem;
		margin-bottom: 0rem;
		border-radius: 12px;
		min-height: 140px;
	}
	
	.archive-hero-title { 
		font-size: 1.625rem; 
		line-height: 1.2;
		margin-bottom: 0.5rem;
	}
	
	.archive-hero-title::before {
		width: 35px;
		height: 2px;
		bottom: -5px;
	}
	
	.archive-hero-description { 
		font-size: 0.875rem; 
		margin-top: 0;
		line-height: 1.5;
	}
	
	.breadcrumb-nav ol {
		font-size: 0.75rem;
		margin-bottom: 0.75rem;
		gap: 0.25rem 0.375rem;
	}
	
	/* Filter Bar Extra Small */
	.archive-input-container {
		padding: 0.5rem 0.625rem;
	}
	
	.archive-search-input {
		font-size: 0.75rem;
	}
	
	/* Post Grid Extra Small - 2 Columns */
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.875rem;
	}
	
	.archive-sort-btn {
		padding: 0.4375rem 0.5rem;
		font-size: 0.6875rem;
		min-width: 60px;
	}
	
	/* Legacy support */
	#post-search-input.input {
		height: 34px;
		font-size: 12.5px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.post-card__content {
		padding: 10px;
	}
	.post-card__title {
		font-size: 0.8125rem;
	}
	.sidebar-widget {
		padding: 0.75rem;
	}
	.tab-switcher__content img, 
	.widget-post-placeholder {
		width: 40px;
		height: 40px;
	}
	.telegram-icon {
		width: 40px;
		height: 40px;
	}
	.telegram-count-number {
		font-size: 1.25rem;
	}
	.breadcrumb-nav ol {
		font-size: 0.75rem;
		margin-bottom: 0.75rem;
		gap: 0.25rem 0.375rem;
	}
	.breadcrumb-nav li:not(:last-child)::after {
		margin-left: 0.25rem;
	}
}

/* Touch-friendly improvements for all mobile devices */
@media (hover: none) and (pointer: coarse) {
	.post-card__get-button,
	.load-more-button,
	.telegram-join-button,
	.tab-switcher__button,
	.post-category-list a {
		min-height: 44px;
	}
	.post-card__get-button:active,
	.load-more-button:active,
	.telegram-join-button:active {
		transform: scale(0.98);
	}
	/* Make get button always visible on touch devices */
	.post-card__get-button {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, -50%) scale(0.9);
		pointer-events: auto;
	}
	.post-card:active .post-card__get-button {
		transform: translate(-50%, -50%) scale(1);
	}
}

/* Additional mobile optimizations */
@media (max-width: 768px) {
	/* Ensure proper spacing for touch targets */
	.post-card__get-button {
		padding: 0.3rem;
		font-size: 0.75rem;
		width: 2.4rem;
		min-width: 2.4rem;
		min-height: 2.4rem;
		gap: 0;
	}
	/* Improve card touch interaction */
	.post-card {
		-webkit-tap-highlight-color: transparent;
	}
	.post-card__image-container a {
		-webkit-tap-highlight-color: transparent;
	}
}



/* ------------------------------ */
/* --- Left Sidebar Categories ---*/
/* ------------------------------ */

.post-category-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove all bullet points and markers */
.post-category-list li::marker,
.post-category-list li::before,
.post-category-list summary::marker {
	display: none;
	content: none;
	list-style: none;
}

/* Enhanced visual appearance when author filtering is active - Minimalistic Futuristic */
.post-category-list.author-filtered {
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 12px;
	padding: 8px;
	box-shadow: 
		0 2px 12px rgba(0, 0, 0, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 0 0 1px rgba(59, 130, 246, 0.08);
	border: none;
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-category-list.author-filtered::before {
	opacity: 0.4;
	background: 
		radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.06) 0%, transparent 50%);
}

/* Subtle background pattern for category list */
.post-category-list::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.02) 0%, transparent 50%);
	opacity: 0;
	transition: opacity 400ms ease;
	pointer-events: none;
	z-index: 0;
}

.sidebar-widget:hover .post-category-list::before {
	opacity: 1;
}

.post-category-list li {
	margin: 0;
}

.post-category-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 10px 14px;
	border-radius: 8px;
	text-decoration: none;
	color: #1f2937;
	font-size: 0.8125rem;
	font-weight: 500;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	position: relative;
	border: none;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow: hidden;
	box-shadow: 
		0 1px 2px rgba(0, 0, 0, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
	width: 100%;
	opacity: 1;
	pointer-events: auto !important; /* Ensure links are always clickable */
	z-index: 1; /* Ensure links are above pseudo-elements */
}

/* Subtle background glow on hover for main categories */
.post-category-list a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 400ms ease, height 400ms ease;
	z-index: 0;
	pointer-events: none;
}

/* Minimalistic left border indicator - Futuristic */
.post-category-list a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	bottom: 50%;
	width: 2px;
	background: linear-gradient(180deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.6));
	opacity: 0;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 0 2px 2px 0;
	transform: scaleY(0);
	transform-origin: center;
}

.post-category-list a:hover,
.post-category-list a:focus {
	background: inherit !important;
	box-shadow: inherit !important;
	transform: none !important;
	outline: none !important;
	color: inherit !important;
}

.post-category-list a:hover::before,
.post-category-list a:focus::before {
	opacity: 0 !important;
	display: none !important;
}

.post-category-list a:hover::after,
.post-category-list a:focus::after {
	width: 0 !important;
	height: 0 !important;
	display: none !important;
}

.post-category-list a.active {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.9));
	color: #ffffff !important;
	font-weight: 600;
	box-shadow: 
		0 4px 16px rgba(59, 130, 246, 0.3),
		0 2px 8px rgba(37, 99, 235, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	border: none;
	transform: translateX(0);
	z-index: 2;
	position: relative;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.post-category-list a.active::after {
	width: 0;
	height: 0;
}

.post-category-list a.active::before {
	opacity: 1;
	top: 15%;
	bottom: 15%;
	width: 3px;
	background: rgba(255, 255, 255, 0.4);
	transform: scaleY(1);
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Enhanced styling for categories available for selected author - Minimalistic */
.post-category-list.author-filtered a.author-available {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 
		0 2px 8px rgba(59, 130, 246, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.8),
		0 0 0 1px rgba(59, 130, 246, 0.06);
	position: relative;
	opacity: 1;
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-category-list.author-filtered a.author-available::before {
	opacity: 0.5;
	top: 25%;
	bottom: 25%;
	width: 2px;
	background: linear-gradient(180deg, rgba(59, 130, 246, 0.6), rgba(37, 99, 235, 0.5));
	transform: scaleY(1);
}

.post-category-list.author-filtered a.author-available:hover {
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 
		0 4px 16px rgba(59, 130, 246, 0.15),
		0 2px 8px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 0 0 1px rgba(59, 130, 246, 0.12);
	transform: translateX(3px);
}

.post-category-list.author-filtered a.author-available:hover::before {
	opacity: 1;
	top: 20%;
	bottom: 20%;
	width: 2.5px;
}

/* Fade-in animation for categories appearing when author is selected */
@keyframes fadeInCategory {
	from {
		opacity: 0;
		transform: translateX(-10px) scale(0.95);
	}
	to {
	opacity: 1;
		transform: translateX(0) scale(1);
	}
}

.post-category-list a.fade-in-category {
	animation: fadeInCategory 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Enhanced styling for parent categories with author posts - Minimalistic */
.post-category-list.author-filtered details.has-author-posts {
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 8px;
	padding: 2px;
	margin: 2px 0;
	border: none;
	box-shadow: 
		0 1px 4px rgba(59, 130, 246, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 1;
}

.post-category-list.author-filtered details.has-author-posts summary .category-link {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: none;
	box-shadow: 
		0 1px 2px rgba(59, 130, 246, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.post-category-list.author-filtered details.has-author-posts[open] summary .category-link {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 
		0 2px 8px rgba(59, 130, 246, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Visual indicator badge removed - minimalistic design */
.post-category-list.author-filtered a.author-available {
	position: relative;
}

/* Icon + name + count layout with enhanced animations */
.post-category-list .category-icon,
.post-category-list .post-category-list__icon {
	font-size: 0.6875rem;
	opacity: 0.75;
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	z-index: 1;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.post-category-list .category-icon img,
.post-category-list .post-category-list__icon img,
.post-category-list summary .category-link .category-icon img,
.post-category-list summary .category-link .post-category-list__icon img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), filter 300ms ease;
}
.post-category-list a:hover .category-icon,
.post-category-list a:focus .category-icon,
.post-category-list summary .category-link:hover .category-icon,
.post-category-list summary .category-link:focus .category-icon,
.post-category-list a:hover .post-category-list__icon,
.post-category-list a:focus .post-category-list__icon,
.post-category-list summary .category-link:hover .post-category-list__icon,
.post-category-list summary .category-link:focus .post-category-list__icon {
	opacity: inherit !important;
	transform: none !important;
	filter: inherit !important;
}

.post-category-list a:hover .category-icon img,
.post-category-list a:focus .category-icon img,
.post-category-list a:hover .post-category-list__icon img,
.post-category-list a:focus .post-category-list__icon img,
.post-category-list summary .category-link:hover .category-icon img,
.post-category-list summary .category-link:focus .category-icon img,
.post-category-list summary .category-link:hover .post-category-list__icon img,
.post-category-list summary .category-link:focus .post-category-list__icon img {
	transform: none !important;
	filter: inherit !important;
}

.post-category-list a.active .category-icon,
.post-category-list a.active .post-category-list__icon,
.post-category-list summary .category-link.active .category-icon,
.post-category-list summary .category-link.active .post-category-list__icon {
	opacity: 1;
	transform: scale(1.25);
	filter: brightness(1.3) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

.post-category-list a.active .category-icon img,
.post-category-list a.active .post-category-list__icon img,
.post-category-list summary .category-link.active .category-icon img,
.post-category-list summary .category-link.active .post-category-list__icon img {
	transform: scale(1.15);
	filter: brightness(1.3);
}

.post-category-list .category-name {
	flex: 1;
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	font-family: 'Inter', system-ui, sans-serif;
	position: relative;
	z-index: 1;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.post-category-list a:hover .category-name,
.post-category-list a:focus .category-name {
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	transform: none !important;
}
.post-category-list a.active .category-name {
	font-weight: 700;
	color: #ffffff !important;
	letter-spacing: -0.015em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.post-category-list .category-count {
	font-size: 0.75rem;
	font-weight: 600;
	font-family: 'Inter', system-ui, sans-serif;
	padding: 0.25rem 0.6rem;
	border-radius: 12px;
	background: #f1f5f9;
	color: #64748b;
	transition: all 200ms ease;
	min-width: 28px;
	text-align: center;
	line-height: 1.2;
	position: relative;
	z-index: 1;
}

/* Category Tags - NEW and UPDATED */
.post-category-list .category-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.125rem 0.5rem;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 6px;
	line-height: 1.2;
	white-space: nowrap;
	position: relative;
	z-index: 1;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
	font-family: 'Inter', system-ui, sans-serif;
}

.post-category-list .category-tag--new {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.9));
	color: #ffffff;
	box-shadow: 
		0 2px 6px rgba(16, 185, 129, 0.3),
		0 1px 3px rgba(5, 150, 105, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
	animation: tagPulse 2s ease-in-out infinite;
}

@keyframes tagPulse {
	0%, 100% {
		box-shadow: 
			0 2px 6px rgba(16, 185, 129, 0.3),
			0 1px 3px rgba(5, 150, 105, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}
	50% {
		box-shadow: 
			0 3px 10px rgba(16, 185, 129, 0.5),
			0 2px 5px rgba(5, 150, 105, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.3);
	}
}

.post-category-list .category-tag--updated {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.9));
	color: #ffffff;
	box-shadow: 
		0 2px 6px rgba(59, 130, 246, 0.3),
		0 1px 3px rgba(37, 99, 235, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.post-category-list a:hover .category-tag--new,
.post-category-list a:focus .category-tag--new {
	transform: none !important;
	box-shadow: inherit !important;
}

.post-category-list a:hover .category-tag--updated,
.post-category-list a:focus .category-tag--updated {
	transform: none !important;
	box-shadow: inherit !important;
}

.post-category-list a.active .category-tag--new,
.post-category-list summary .category-link.active .category-tag--new {
	background: rgba(255, 255, 255, 0.3);
	color: #ffffff;
	box-shadow: 
		0 2px 6px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.post-category-list a.active .category-tag--updated,
.post-category-list summary .category-link.active .category-tag--updated {
	background: rgba(255, 255, 255, 0.3);
	color: #ffffff;
	box-shadow: 
		0 2px 6px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Category tags in submenu items - smaller size */
.post-category-list .submenu a .category-tag {
	font-size: 0.5625rem;
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
}

.post-category-list .submenu a:hover .category-tag--new,
.post-category-list .submenu a:hover .category-tag--updated {
	transform: scale(1.08);
}

.post-category-list .submenu a.active .category-tag--new,
.post-category-list .submenu a.active .category-tag--updated {
	background: rgba(255, 255, 255, 0.3);
	color: #ffffff;
}
.post-category-list a:hover .category-count,
.post-category-list a:focus .category-count {
	background: #e2e8f0;
	color: #475569;
}
.post-category-list a.active .category-count {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

/* Accordion for parent/child categories */
.post-category-list details {
	margin: 0;
	padding: 0;
	display: block;
}

/* Ensure submenu is visible when details is open - with smooth animation */
.post-category-list details[open] .submenu {
	display: flex !important;
	flex-direction: column;
	visibility: visible;
	opacity: 1;
	overflow: visible;
	min-height: 0;
	animation: slideDown 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Ensure submenu is hidden when details is closed - with smooth animation */
.post-category-list details:not([open]) .submenu {
	display: none;
	visibility: hidden;
	opacity: 0;
	animation: slideUp 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Smooth slide down animation for expanding submenus */
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
		max-height: 0;
	}
	to {
		opacity: 1;
		transform: translateY(0);
		max-height: 2000px;
	}
}

/* Smooth slide up animation for collapsing submenus */
@keyframes slideUp {
	from {
		opacity: 1;
		transform: translateY(0);
		max-height: 2000px;
	}
	to {
		opacity: 0;
		transform: translateY(-8px);
		max-height: 0;
	}
}

.post-category-list summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	padding: 0;
	border-radius: 10px;
	cursor: default;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.post-category-list summary.category-summary {
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	transition: all 200ms ease;
	position: relative;
	overflow: visible;
	box-shadow: none;
}

/* Category link inside summary - clickable - styled like normal category */
.post-category-list summary .category-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex: 1;
	text-decoration: none;
	color: #374151;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: 'Inter', system-ui, sans-serif;
	cursor: pointer;
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	padding: 14px 16px;
	margin: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0; /* Allow flex item to shrink */
	overflow: hidden;
}

/* Subtle background glow on hover for category links in summary */
.post-category-list summary .category-link::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 400ms ease, height 400ms ease;
	z-index: 0;
	pointer-events: none;
}

.post-category-list summary .category-link .category-name {
	flex: 1;
	min-width: 0; /* Allow flex item to shrink */
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	font-family: 'Inter', system-ui, sans-serif;
	position: relative;
	z-index: 1;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.post-category-list summary .category-link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, #3b82f6, #2563eb);
	opacity: 0;
	transition: opacity 300ms ease;
	border-radius: 12px 0 0 12px;
}

.post-category-list summary .category-link:hover {
	border-color: #cbd5e1;
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15), 0 3px 10px rgba(0, 0, 0, 0.1);
	background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
	color: #111827;
	transform: translateX(4px) translateY(-2px) scale(1.02);
	z-index: 1;
}

.post-category-list summary .category-link:hover .category-name {
	font-weight: 700;
	letter-spacing: -0.015em;
	transform: translateX(2px);
}

.post-category-list summary .category-link:hover::after {
	width: 300px;
	height: 300px;
}

.post-category-list summary .category-link:hover::before {
	opacity: 1;
	width: 4px;
}


.post-category-list summary .category-link.active {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	color: #ffffff !important;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(59, 130, 246, 0.45), 0 4px 12px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	border-color: transparent;
	transform: translateX(0) scale(1.03);
	z-index: 2;
	position: relative;
}

.post-category-list summary .category-link.active .category-name {
	font-weight: 700;
	color: #ffffff !important;
	letter-spacing: -0.015em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.post-category-list summary .category-link.active::after {
	width: 0;
	height: 0;
}

.post-category-list summary .category-link.active::before {
	opacity: 1;
	background: rgba(255, 255, 255, 0.3);
}


/* Toggle button for submenu - hidden */
.post-category-list summary .category-toggle {
	display: none;
}

.post-category-list summary::marker {
	display: none;
}

.post-category-list summary::-webkit-details-marker {
	display: none;
}

.post-category-list summary::after {
	display: none; /* Hide default arrow, we use custom toggle button */
}

.post-category-list summary.category-summary:hover {
	background: transparent;
	border: none;
	box-shadow: none;
}

.post-category-list details[open] > summary.category-summary {
	background: transparent;
	border: none;
	box-shadow: none;
}

.post-category-list .submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 1.25rem;
	flex-direction: column;
	gap: 6px;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	overflow: visible;
	min-height: 0;
	border-left: 3px solid transparent;
	transition: border-color 300ms ease;
}

/* Blue vertical indicator line for submenu hierarchy */
.post-category-list .submenu::before {
	content: '';
	position: absolute;
	left: -3px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #3b82f6, #2563eb);
	opacity: 0;
	transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 0 3px 3px 0;
	z-index: 0;
}

/* Show indicator when submenu is open or has active child */
.post-category-list details[open] > .submenu::before,
.post-category-list .submenu.has-active::before {
	opacity: 1;
}

.post-category-list .submenu:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}


.post-category-list .submenu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 500;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	padding: 8px 12px;
	margin: 0;
	margin-bottom: 0;
	border-radius: 6px;
	text-decoration: none;
	color: #374151;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	position: relative;
	border: none;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 
		0 1px 2px rgba(0, 0, 0, 0.03),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
	width: 100%;
	min-width: 0;
	overflow: hidden;
	opacity: 1;
}

/* Subtle background glow on hover */
.post-category-list .submenu a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 400ms ease, height 400ms ease;
	z-index: 0;
	pointer-events: none;
}

.post-category-list .submenu a:last-child {
	margin-bottom: 0;
}

/* Smaller icons for submenu items with smooth animations */
.post-category-list .submenu a .category-icon,
.post-category-list .submenu a .post-category-list__icon {
	font-size: 0.625rem;
	width: 14px;
	height: 14px;
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease, filter 300ms ease;
	opacity: 0.75;
	position: relative;
	z-index: 1;
}

.post-category-list .submenu a .category-icon img,
.post-category-list .submenu a .post-category-list__icon img {
	width: 14px;
	height: 14px;
	object-fit: contain;
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), filter 300ms ease;
}

.post-category-list .submenu a:hover .category-icon,
.post-category-list .submenu a:hover .post-category-list__icon,
.post-category-list .submenu a:focus .category-icon,
.post-category-list .submenu a:focus .post-category-list__icon {
	opacity: inherit !important;
	transform: none !important;
	filter: inherit !important;
}

.post-category-list .submenu a:hover .category-icon img,
.post-category-list .submenu a:hover .post-category-list__icon img,
.post-category-list .submenu a:focus .category-icon img,
.post-category-list .submenu a:focus .post-category-list__icon img {
	transform: none !important;
	filter: inherit !important;
}

.post-category-list .submenu a.active .category-icon,
.post-category-list .submenu a.active .post-category-list__icon {
	opacity: 1;
	transform: scale(1.2);
	filter: brightness(1.3) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.post-category-list .submenu a.active .category-icon img,
.post-category-list .submenu a.active .post-category-list__icon img {
	transform: scale(1.1);
	filter: brightness(1.3);
}

/* Minimalistic left border indicator for submenu - Futuristic */
.post-category-list .submenu a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	bottom: 50%;
	width: 2px;
	background: linear-gradient(180deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.6));
	opacity: 0;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 0 2px 2px 0;
	transform: scaleY(0);
	transform-origin: center;
}

.post-category-list .submenu a:hover,
.post-category-list .submenu a:focus {
	background: inherit !important;
	box-shadow: inherit !important;
	transform: none !important;
	outline: none !important;
	color: inherit !important;
}

.post-category-list .submenu a:hover::after,
.post-category-list .submenu a:focus::after {
	width: 0 !important;
	height: 0 !important;
	display: none !important;
}

.post-category-list .submenu a:hover::before,
.post-category-list .submenu a:focus::before {
	opacity: 0 !important;
	display: none !important;
}

.post-category-list .submenu a.active {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.9));
	color: #ffffff !important;
	font-weight: 600;
	box-shadow: 
		0 4px 12px rgba(59, 130, 246, 0.25),
		0 2px 6px rgba(37, 99, 235, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	border: none;
	transform: translateX(0);
	z-index: 2;
	position: relative;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.post-category-list .submenu a.active::after {
	width: 0;
	height: 0;
}

.post-category-list .submenu a.active::before {
	opacity: 1;
	top: 15%;
	bottom: 15%;
	width: 2.5px;
	background: rgba(255, 255, 255, 0.4);
	transform: scaleY(1);
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.post-category-list .submenu a .category-name {
	flex: 1;
	min-width: 0; /* Allow flex item to shrink */
	line-height: 1.3; /* Tighter line height for smaller text */
}

.post-category-list .submenu a .category-count {
	font-size: 0.5625rem;
	font-weight: 600;
	font-family: 'Inter', system-ui, sans-serif;
	padding: 0.1rem 0.35rem;
	border-radius: 10px;
	background: #f1f5f9;
	color: #64748b;
	transition: all 200ms ease;
	line-height: 1.2;
	position: relative;
	z-index: 1;
	min-width: 18px;
}

.post-category-list .submenu a:hover .category-count,
.post-category-list .submenu a:focus .category-count {
	background: inherit !important;
	color: inherit !important;
}

.post-category-list .submenu a.active .category-count {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

/* Nested submenus - support for subcategories of subcategories (Level 2) */
.post-category-list .submenu .submenu {
	margin: 0;
	padding: 0;
	padding-left: 1.25rem;
	gap: 6px;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: visible;
	min-height: 0;
	position: relative;
	border-left: 3px solid transparent;
	transition: border-color 300ms ease;
}

/* Blue vertical indicator line for nested submenus (Level 2) */
.post-category-list .submenu .submenu::before {
	content: '';
	position: absolute;
	left: -3px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #3b82f6, #2563eb);
	opacity: 0;
	transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 0 3px 3px 0;
	z-index: 0;
}

.post-category-list .submenu details[open] > .submenu .submenu::before,
.post-category-list .submenu .submenu.has-active::before {
	opacity: 1;
}

.post-category-list .submenu .submenu:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

/* Support for deeper nesting levels (Level 3+) */
.post-category-list .submenu .submenu .submenu {
	margin: 0;
	padding: 0;
	padding-left: 1.25rem;
	gap: 6px;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: visible;
	min-height: 0;
	position: relative;
	border-left: 3px solid transparent;
	transition: border-color 300ms ease;
}

/* Blue vertical indicator line for deeper nested submenus (Level 3+) */
.post-category-list .submenu .submenu .submenu::before {
	content: '';
	position: absolute;
	left: -3px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #3b82f6, #2563eb);
	opacity: 0;
	transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 0 3px 3px 0;
	z-index: 0;
}

.post-category-list .submenu .submenu details[open] > .submenu .submenu::before,
.post-category-list .submenu .submenu .submenu.has-active::before {
	opacity: 1;
}

.post-category-list .submenu .submenu .submenu:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

/* Ensure li elements in submenu display correctly */
.post-category-list .submenu li {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
}

.post-category-list .submenu details {
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
	overflow: visible;
	min-height: 0;
}

/* Ensure nested submenu is visible when details is open */
.post-category-list .submenu details[open] .submenu {
	display: flex !important;
	flex-direction: column;
	visibility: visible;
	opacity: 1;
	overflow: visible;
	min-height: 0;
}

/* Ensure nested submenu is hidden when details is closed */
.post-category-list .submenu details:not([open]) .submenu {
	display: none;
	visibility: hidden;
	opacity: 0;
}

/* Ensure nested details elements are visible when open */
.post-category-list .submenu details[open] {
	display: block !important;
	width: 100%;
}

.post-category-list .submenu details {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Ensure nested li elements containing details are displayed */
.post-category-list .submenu li {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	min-height: 0;
}

/* Ensure nested submenu details are properly displayed at all levels */
.post-category-list .submenu details.category-details,
.post-category-list .submenu .submenu details.category-details,
.post-category-list .submenu .submenu .submenu details.category-details {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	min-height: 0;
}

.post-category-list .submenu details.category-details[open],
.post-category-list .submenu .submenu details.category-details[open],
.post-category-list .submenu .submenu .submenu details.category-details[open] {
	display: block !important;
	width: 100%;
	overflow: visible;
	min-height: 0;
}

/* Nested submenu items - Level 2 (even more compact) */
.post-category-list .submenu .submenu a {
	font-size: 0.625rem; /* Smaller font */
	padding: 5px 7px; /* Smaller padding */
	margin: 0;
	margin-bottom: 4px; /* Smaller margin */
	width: 100%;
	border: 1px solid #e5e7eb;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	border-radius: 6px; /* Smaller border radius */
	min-width: 0; /* Allow flex item to shrink */
}

.post-category-list .submenu .submenu a .category-name {
	flex: 1;
	min-width: 0;
	line-height: 1.3; /* Tighter line height */
}

.post-category-list .submenu .submenu a:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

/* Nested submenu summary items - Level 2 */
.post-category-list .submenu .submenu summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 5px 7px; /* Smaller padding */
	margin: 0;
	margin-bottom: 4px; /* Smaller margin */
	border-radius: 6px; /* Smaller border radius */
	cursor: pointer;
	position: relative;
	border: 1px solid #e5e7eb;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	list-style: none;
	width: 100%;
	min-width: 0; /* Allow flex item to shrink */
}

.post-category-list .submenu .submenu summary .category-name {
	flex: 1;
	min-width: 0;
	line-height: 1.3; /* Tighter line height */
}

.post-category-list .submenu .submenu summary:last-of-type {
	margin-bottom: 0;
}

/* Deeper nesting levels (Level 3+) - progressively more compact */
.post-category-list .submenu .submenu .submenu a {
	font-size: 0.5625rem; /* Smaller font */
	padding: 4px 6px; /* Smaller padding */
	margin: 0;
	margin-bottom: 3px; /* Smaller margin */
	width: 100%;
	border: 1px solid #e5e7eb;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	border-radius: 5px; /* Smaller border radius */
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	min-width: 0; /* Allow flex item to shrink */
}

.post-category-list .submenu .submenu .submenu a .category-name {
	flex: 1;
	min-width: 0;
	line-height: 1.3;
	font-size: 110%;
}

.post-category-list .submenu .submenu .submenu a:last-child {
	margin-bottom: 0;
}

.post-category-list .submenu .submenu .submenu a:hover,
.post-category-list .submenu .submenu .submenu a:focus {
	border-color: inherit !important;
	box-shadow: inherit !important;
	background: inherit !important;
	color: inherit !important;
	transform: none !important;
	outline: none !important;
}

.post-category-list .submenu .submenu .submenu a.active {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	color: #ffffff !important;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35), 0 2px 6px rgba(37, 99, 235, 0.25);
	border-color: transparent;
	z-index: 1;
}

.post-category-list .submenu .submenu .submenu summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 4px 6px; /* Smaller padding */
	margin: 0;
	margin-bottom: 3px; /* Smaller margin */
	border-radius: 5px; /* Smaller border radius */
	cursor: pointer;
	position: relative;
	border: 1px solid #e5e7eb;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	list-style: none;
	width: 100%;
	min-width: 0; /* Allow flex item to shrink */
}

.post-category-list .submenu .submenu .submenu summary .category-name {
	flex: 1;
	min-width: 0;
	line-height: 1.3; /* Tighter line height */
}

.post-category-list .submenu .submenu .submenu summary:last-of-type {
	margin-bottom: 0;
}

.post-category-list .submenu .submenu .submenu summary:hover {
	background: #f9fafb;
	border-color: #d1d5db;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
	transform: translateX(2px) translateY(-1px);
}

.post-category-list .submenu .submenu .submenu details[open] > summary {
	background: #f3f4f6;
	border-color: #d1d5db;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.post-category-list .submenu .submenu a .category-count {
	font-size: 0.5625rem;
	padding: 0.1rem 0.35rem;
	min-width: 18px;
}

/* Even smaller icons for nested submenu items - Level 2 */
.post-category-list .submenu .submenu a .category-icon,
.post-category-list .submenu .submenu a .post-category-list__icon,
.post-category-list .submenu .submenu summary .category-icon,
.post-category-list .submenu .submenu summary .post-category-list__icon {
	font-size: 0.5625rem;
	width: 12px;
	height: 12px;
}

.post-category-list .submenu .submenu a .category-icon img,
.post-category-list .submenu .submenu a .post-category-list__icon img,
.post-category-list .submenu .submenu summary .category-icon img,
.post-category-list .submenu .submenu summary .post-category-list__icon img {
	width: 12px;
	height: 12px;
	object-fit: contain;
}

/* Smallest icons for deeper nesting levels (Level 3+) */
.post-category-list .submenu .submenu .submenu a .category-icon,
.post-category-list .submenu .submenu .submenu a .post-category-list__icon,
.post-category-list .submenu .submenu .submenu summary .category-icon,
.post-category-list .submenu .submenu .submenu summary .post-category-list__icon {
	font-size: 0.5rem;
	width: 10px;
	height: 10px;
}

.post-category-list .submenu .submenu .submenu a .category-icon img,
.post-category-list .submenu .submenu .submenu a .post-category-list__icon img,
.post-category-list .submenu .submenu .submenu summary .category-icon img,
.post-category-list .submenu .submenu .submenu summary .post-category-list__icon img {
	width: 10px;
	height: 10px;
	object-fit: contain;
}

/* Icons in submenu summary items */
.post-category-list .submenu summary .category-icon,
.post-category-list .submenu summary .post-category-list__icon {
	font-size: 0.625rem;
	width: 14px;
	height: 14px;
}

.post-category-list .submenu summary .category-icon img,
.post-category-list .submenu summary .post-category-list__icon img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.post-category-list .submenu summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	padding: 6px 8px; /* Smaller padding */
	margin: 0;
	margin-bottom: 4px; /* Smaller margin */
	border-radius: 8px; /* Smaller border radius */
	cursor: pointer;
	position: relative;
	border: 1px solid #e5e7eb;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	list-style: none;
	width: 100%;
	min-width: 0; /* Allow flex item to shrink */
	overflow: hidden;
}

/* Subtle background glow on hover for summary */
.post-category-list .submenu summary::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 400ms ease, height 400ms ease;
	z-index: 0;
	pointer-events: none;
}

.post-category-list .submenu summary:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
}

.post-category-list .submenu summary::-webkit-details-marker {
	display: none;
}

.post-category-list .submenu summary::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #3b82f6, #2563eb);
	opacity: 0;
	transition: opacity 250ms ease;
	border-radius: 10px 0 0 10px;
}

.post-category-list .submenu summary::after {
	display: none;
}

.post-category-list .submenu summary:hover {
	background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
	border-color: #cbd5e1;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
	transform: translateX(3px) translateY(-2px) scale(1.01);
	z-index: 1;
}

.post-category-list .submenu summary:hover::before {
	opacity: 1;
}

.post-category-list .submenu summary:hover::after {
	width: 200px;
	height: 200px;
}

.post-category-list .submenu details[open] > summary {
	background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
	border-color: #93c5fd;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15), 0 2px 6px rgba(37, 99, 235, 0.1);
	transform: translateX(2px);
}

.post-category-list .submenu details[open] > summary::before {
	opacity: 1;
	width: 3px;
}

.post-category-list .submenu details[open] > summary::after {
	width: 0;
	height: 0;
}

.post-category-list .submenu summary .category-name {
	flex: 1;
	min-width: 0; /* Allow flex item to shrink */
	font-size: 0.625rem; /* Smaller font */
	font-weight: 400;
	color: #64748b;
	transition: color 200ms ease, font-weight 200ms ease;
	font-family: 'Inter', system-ui, sans-serif;
	line-height: 1.3; /* Tighter line height */
}

.post-category-list .submenu summary:hover .category-name {
	color: #334155;
	font-weight: 600;
}

.post-category-list .submenu details[open] > summary .category-name {
	color: #334155;
	font-weight: 600;
}

.post-category-list .submenu summary .category-count {
	font-size: 0.5625rem;
	font-weight: 600;
	font-family: 'Inter', system-ui, sans-serif;
	padding: 0.1rem 0.35rem;
	border-radius: 10px;
	background: #f1f5f9;
	color: #64748b;
	transition: all 200ms ease;
	min-width: 18px;
	text-align: center;
	line-height: 1.2;
}

.post-category-list .submenu summary:hover .category-count {
	background: #e2e8f0;
	color: #475569;
}

.post-category-list .submenu details[open] > summary .category-count {
	background: #e2e8f0;
	color: #475569;
}

/* GeneratePress Grid Columns - Fix for grid layout */
.generate-columns.grid-33,
.grid-sizer.grid-33 {
	width: 33.333333%;
	width: -webkit-fill-available;
	max-width: 33.333333%;
	box-sizing: border-box;
}

/* Ensure GeneratePress grid works within our custom CSS Grid */
.post-grid .generate-columns,
.post-grid .grid-sizer,
.post-grid .generate-columns.grid-33,
.post-grid .grid-sizer.grid-33 {
	width: 100% !important;
	max-width: 100% !important;
	/* Reset any float-based grid properties */
	float: none;
	display: block;
}

/* Fix for GeneratePress grid container */
.grid-container {
	max-width: 100%;
	width: 100%;
}

/* Ensure grid items don't overflow */



@media (min-width: 1281px) {
	/* Ensure sidebar is visible on desktop */
	.post-filter-sidebar {
		position: -webkit-sticky;
		position: sticky;
		top: 7rem;
		width: 100%;
		max-width: 100%;
		transform: translateX(0) !important;
		height: auto;
		overflow: visible;
		display: block !important;
	}

	.post-filter-sidebar .categories-toggle-button {
		display: flex;
	}
}

.post-grid > * {
	max-width: 100%;
	box-sizing: border-box;
	/* Override any width constraints from GeneratePress grid */
	width: 100% !important;
	min-width: 0;
}

/* ------------------------------ */
/* ----- Mobile Left Off-Canvas Categories Panel & Sticky Bottom Menu ----- */
/* ------------------------------ */

/* Hide existing categories sidebar on mobile */
@media (max-width: 1280px) {
	.post-filter-sidebar {
		display: none !important;
	}
}

/* Mobile Left Off-Canvas Overlay */
.mobile-categories-off-canvas-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.mobile-categories-off-canvas-overlay.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Mobile Left Off-Canvas Panel */
.mobile-categories-off-canvas {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 85vw;
	max-width: 320px;
	height: 100vh;
	height: 100dvh;
	background: #ffffff;
	z-index: 999;
	overflow-y: auto;
	overflow-x: hidden;
	transform: translateX(-100%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 
		0 10px 40px rgba(0, 0, 0, 0.15),
		0 4px 16px rgba(0, 0, 0, 0.1);
	-webkit-overflow-scrolling: touch;
	will-change: transform;
	visibility: hidden;
}

.mobile-categories-off-canvas.is-open {
	transform: translateX(0);
	visibility: visible;
}

/* Mobile Off-Canvas Header */
.mobile-categories-off-canvas__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #f3f4f6;
	background: #ffffff;
	position: sticky;
	top: 0;
	z-index: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mobile-categories-off-canvas__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: #1e293b;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	letter-spacing: -0.01em;
	flex: 1;
}

.mobile-categories-off-canvas__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 8px;
	color: #64748b;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	min-width: 40px;
	min-height: 40px;
}

.mobile-categories-off-canvas__close:hover {
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
	transform: scale(1.1);
}

.mobile-categories-off-canvas__close:active {
	transform: scale(0.95);
}

.mobile-categories-off-canvas__close svg {
	width: 24px;
	height: 24px;
	stroke-width: 2.5;
}

/* Mobile Off-Canvas Content */
.mobile-categories-off-canvas__content {
	padding: 1.5rem;
}

.mobile-categories-off-canvas__content .sidebar-widget {
	padding: 0;
	border: none;
	box-shadow: none;
	background: transparent;
	min-height: auto;
}

/* Ensure mobile categories list is properly displayed and styled */
.mobile-categories-off-canvas__content .post-category-list,
.mobile-categories-off-canvas__content .categories-list {
	display: flex !important;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	opacity: 1;
	visibility: visible;
}

.mobile-categories-off-canvas__content .post-category-list li,
.mobile-categories-off-canvas__content .categories-list li {
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
}

.mobile-categories-off-canvas__content .post-category-list a,
.mobile-categories-off-canvas__content .categories-list a {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	width: 100%;
}

/* Ensure submenus are visible in mobile off-canvas */
.mobile-categories-off-canvas__content .post-category-list details {
	display: block;
	width: 100%;
}

.mobile-categories-off-canvas__content .post-category-list .submenu {
	display: flex;
	flex-direction: column;
	visibility: visible;
	opacity: 1;
}

.mobile-categories-off-canvas__content .post-category-list details[open] .submenu {
	display: flex !important;
}

/* Sticky Bottom Menu (Mobile Only) */
.mobile-sticky-bottom-menu {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-top: 1px solid rgba(226, 232, 240, 0.8);
	box-shadow: 
		0 -4px 16px rgba(0, 0, 0, 0.08),
		0 -2px 8px rgba(0, 0, 0, 0.04);
	z-index: 997;
	padding: 0.75rem;
	/* CLS Prevention: Lock height to prevent shifts */
	min-height: 70px;
	height: auto;
	contain: layout style;
}

.mobile-sticky-bottom-menu__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mobile-sticky-bottom-menu__inner::-webkit-scrollbar {
	display: none;
}

.mobile-sticky-bottom-menu__browse-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0.75rem;
	background: rgba(59, 130, 246, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 
		0 4px 12px rgba(59, 130, 246, 0.25),
		0 2px 6px rgba(37, 99, 235, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
	min-height: 44px;
	min-width: 44px;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

.mobile-sticky-bottom-menu__browse-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, 
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0.05) 100%
	);
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-sticky-bottom-menu__browse-btn:hover::before,
.mobile-sticky-bottom-menu__browse-btn:active::before {
	opacity: 1;
}

.mobile-sticky-bottom-menu__browse-btn:hover {
	background: rgba(37, 99, 235, 0.95);
	box-shadow: 
		0 6px 20px rgba(59, 130, 246, 0.35),
		0 3px 10px rgba(37, 99, 235, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
}

.mobile-sticky-bottom-menu__browse-btn:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 
		0 2px 8px rgba(59, 130, 246, 0.25),
		0 1px 4px rgba(37, 99, 235, 0.2);
}

.mobile-sticky-bottom-menu__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.mobile-sticky-bottom-menu__icon svg {
	width: 24px;
	height: 24px;
}

.mobile-sticky-bottom-menu__text {
	display: none; /* Icon only - no text */
}

/* Sort Buttons Container in Sticky Menu */
.mobile-sticky-bottom-menu__sort-buttons {
	display: flex;
	align-items: center;
	gap: 5px;
	flex: initial;
	min-width: 0;
	justify-content: center;
}

/* Sort Buttons in Sticky Menu */
.mobile-sticky-bottom-menu__sort-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(226, 232, 240, 0.8);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 0.8125rem;
	font-weight: 600;
	color: #6b7280;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	min-height: 44px;
	flex-shrink: 0;
	min-width: 70px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	position: relative;
	overflow: hidden;
}

.mobile-sticky-bottom-menu__sort-btn:hover {
	color: #3b82f6;
	background: rgba(255, 255, 255, 1);
	border-color: rgba(59, 130, 246, 0.3);
	box-shadow: 
		0 4px 12px rgba(59, 130, 246, 0.15),
		0 2px 6px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	transform: translateY(-1px);
}

.mobile-sticky-bottom-menu__sort-btn.active {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.9));
	color: #ffffff;
	border-color: transparent;
	box-shadow: 
		0 4px 12px rgba(59, 130, 246, 0.25),
		0 2px 6px rgba(37, 99, 235, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transform: translateY(-1px);
}

.mobile-sticky-bottom-menu__sort-btn:active {
	transform: translateY(0) scale(0.98);
}

.mobile-sticky-bottom-menu__sort-btn .archive-sort-icon {
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
}

.mobile-sticky-bottom-menu__sort-btn:hover .archive-sort-icon {
	transform: scale(1.1);
}

.mobile-sticky-bottom-menu__sort-btn.active .archive-sort-icon {
	transform: scale(1.15);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mobile-sticky-bottom-menu__sort-btn .archive-sort-text {
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	font-size: 0.8125rem;
}

/* Hide sort text on very small screens, show only icons */
@media (max-width: 360px) {
	.mobile-sticky-bottom-menu__sort-btn {
		min-width: 44px;
		padding: 0.75rem;
	}
	
	.mobile-sticky-bottom-menu__sort-btn .archive-sort-text {
		display: none;
	}
	
	.mobile-sticky-bottom-menu__sort-btn {
		gap: 0;
	}
}

/* Add bottom padding to archive content on mobile to prevent overlap with sticky menu */
@media (max-width: 1280px) {
	.archive-main-content {
		padding-bottom: 0px;
	}
	
	/* Prevent body scroll when mobile categories off-canvas is open */
	body.mobile-categories-open {
		overflow: hidden;
		position: fixed;
		width: 100%;
	}
}

/* Show mobile off-canvas and sticky menu only on mobile */
@media (max-width: 1280px) {
	.mobile-categories-off-canvas-overlay {
		display: block;
	}
	
	.mobile-categories-off-canvas {
		display: block;
	}
	
	.mobile-sticky-bottom-menu {
		display: flex;
	}
}

/* Responsive adjustments for sticky bottom menu on smaller screens */
@media (max-width: 480px) {
	.mobile-sticky-bottom-menu {
		padding: 0.625rem;
	}
	
	.mobile-sticky-bottom-menu__inner {
		gap: 0.375rem;
	}
	
	.mobile-sticky-bottom-menu__browse-btn {
		padding: 0.625rem;
		min-width: 40px;
		width: 40px;
		height: 40px;
		min-height: 40px;
	}
	
	.mobile-sticky-bottom-menu__sort-btn {
		padding: 5px;
		font-size: 10px;
		min-width: 50px;
		min-height: 40px;
	}
	
	.mobile-sticky-bottom-menu__sort-btn .archive-sort-icon {
		font-size: 0.875rem;
	}
}

@media (max-width: 360px) {
	.mobile-sticky-bottom-menu {
		padding: 0.5rem;
	}
	
	.mobile-sticky-bottom-menu__inner {
		gap: 0.25rem;
	}
	
	.mobile-sticky-bottom-menu__browse-btn {
		padding: 0.625rem;
		min-width: 40px;
		width: 40px;
		height: 40px;
		gap: 0;
	}
}

/* Hide on desktop - ensure desktop is untouched */
@media (min-width: 1281px) {
	.mobile-categories-off-canvas-overlay {
		display: none !important;
	}
	
	.mobile-categories-off-canvas {
		display: none !important;
	}
	
	.mobile-sticky-bottom-menu {
		display: none !important;
	}
	
	.post-filter-sidebar {
		display: block !important;
	}
}