/* Substack Sidebar Styles - Completely isolated from page flow */
.substack-trigger-wrapper {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	z-index: 99999 !important;
	pointer-events: none !important;
	overflow: visible !important;
	display: block !important;
}

.substack-trigger {
	position: fixed !important;
	right: 2rem !important;
	bottom: 2rem !important;
	background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
	color: #ffffff !important;
	padding: 1.25rem 1.75rem !important;
	border-radius: 50px !important;
	text-decoration: none !important;
	font-weight: 700 !important;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
	z-index: 99999 !important;
	transition: all 0.3s ease !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	border: none !important;
	margin: 0 !important;
	pointer-events: auto !important;
	white-space: nowrap !important;
	font-size: 1rem !important;
}

.substack-trigger::before {
	content: '📰';
	font-size: 1.5rem;
}

.substack-trigger:hover {
	transform: translateY(-3px) scale(1.05) !important;
	box-shadow: 0 15px 40px rgba(30, 58, 138, 0.4) !important;
}

.substack-sidebar {
	position: fixed !important;
	right: -450px !important;
	top: 0 !important;
	width: 450px !important;
	height: 100% !important;
	height: 100dvh !important;
	background: #ffffff !important;
	box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15) !important;
	z-index: 100000 !important;
	transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 2rem !important;
	margin: 0 !important;
	pointer-events: auto !important;
}

.substack-sidebar.active {
	right: 0 !important;
}

.substack-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	height: 100dvh !important;
	background: rgba(0, 0, 0, 0.5) !important;
	z-index: 99999 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: all 0.3s ease !important;
	backdrop-filter: blur(5px) !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
}

.substack-overlay.active {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.substack-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 2rem !important;
	padding-bottom: 1.5rem !important;
	border-bottom: 2px solid #f8fafc !important;
}

.substack-header h2 {
	font-size: 1.75rem !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	margin: 0 !important;
}

.close-btn {
	background: none !important;
	border: none !important;
	font-size: 2rem !important;
	color: #1e293b !important;
	cursor: pointer !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	transition: all 0.3s ease !important;
	padding: 0 !important;
	line-height: 1 !important;
	margin: 0 !important;
}

.close-btn:hover {
	background: #f8fafc !important;
	transform: rotate(90deg) !important;
}

.substack-posts {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

.substack-post {
	background: #f8fafc !important;
	border-radius: 12px !important;
	padding: 1.5rem !important;
	transition: all 0.3s ease !important;
	border-left: 4px solid transparent !important;
}

.substack-post:hover {
	background: #ffffff !important;
	border-left-color: #1e3a8a !important;
	transform: translateX(5px) !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.substack-post-image-link {
	display: block !important;
	margin-bottom: 0.75rem !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	line-height: 0 !important;
}

.substack-post-image {
	width: 100% !important;
	height: 140px !important;
	object-fit: cover !important;
	border-radius: 8px !important;
	transition: transform 0.3s ease !important;
}

.substack-post:hover .substack-post-image {
	transform: scale(1.03) !important;
}

.substack-post h3 {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	margin-bottom: 0.5rem !important;
	color: #0f172a !important;
	line-height: 1.4 !important;
	margin-top: 0 !important;
}

.substack-post .date {
	font-size: 0.875rem !important;
	color: #64748b !important;
	margin-bottom: 0.75rem !important;
	font-weight: 500 !important;
}

.substack-post p {
	font-size: 0.95rem !important;
	color: #1e293b !important;
	line-height: 1.6 !important;
	margin-bottom: 1rem !important;
}

.substack-post .read-more {
	font-size: 0.875rem !important;
	color: #1e3a8a !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	transition: gap 0.3s ease !important;
}

.substack-post .read-more:hover {
	gap: 0.75rem !important;
}

.substack-post .read-more::after {
	content: '→';
	transition: transform 0.3s ease;
}

.substack-post .read-more:hover::after {
	transform: translateX(5px);
}

/* Tablet */
@media (max-width: 1024px) {
	.substack-sidebar {
		width: 85vw !important;
		right: -85vw !important;
	}

	.substack-sidebar.active {
		right: 0 !important;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.substack-trigger {
		right: 1rem !important;
		bottom: 1rem !important;
		padding: 0.875rem 1.25rem !important;
		font-size: 0.85rem !important;
		gap: 0.5rem !important;
	}

	.substack-trigger::before {
		font-size: 1.25rem;
	}

	.substack-sidebar {
		width: 100vw !important;
		max-width: 100vw !important;
		right: -100vw !important;
		padding: 1.5rem !important;
		border-radius: 0 !important;
	}

	.substack-sidebar.active {
		right: 0 !important;
	}

	.substack-header h2 {
		font-size: 1.4rem !important;
	}

	.substack-post {
		padding: 1.25rem !important;
	}

	.substack-post h3 {
		font-size: 1rem !important;
	}

	.substack-post p {
		font-size: 0.875rem !important;
	}
}

/* Very small screens - icon only trigger */
@media (max-width: 400px) {
	.substack-trigger {
		padding: 0.875rem !important;
		font-size: 0 !important;
		width: 50px !important;
		height: 50px !important;
		justify-content: center !important;
	}

	.substack-trigger::before {
		font-size: 1.5rem;
		margin: 0 !important;
	}
}