/* Blog Page Custom Styles */

/* Custom styles for blog post images */
.thumb-info-wrapper img {
	width: 100%;
	height: 200px; /* Reduced height for better proportion */
	object-fit: contain; /* Shows the full image without cropping */
	object-position: center; /* Centers the image */
	background-color: #ffffff; /* Light background for transparent images */
}

.thumb-info-wrapper {
	height: 200px; /* Match the image height */
	overflow: hidden;
	background-color: #ffffff !important; /* Force white background */
	background: #ffffff !important; /* Override any shorthand background properties */
}

/* Override any grey backgrounds from theme CSS variables */
.thumb-info-wrapper,
.thumb-info-wrapper * {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

/* Ensure the card maintains good proportions */
.card.card-default {
	height: 100%;
	transition: transform 0.3s ease;
	background-color: #ffffff !important;
	background: #ffffff !important;
}

.card.card-default .card-body {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

.card.card-default .card-body.text-center {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

.card.card-default .card-body.p-0 {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

.card.card-default .blog-thumb-original {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

/* Override Bootstrap's default card styling */
.card {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

.card-body {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

.card.card-default:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Blog title font styling to match description */
.card-title.blog-title {
	font-family: "Poppins", Arial, sans-serif !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #6c757d !important;
}

.card-title.blog-title a {
	color: #6c757d !important;
}

.card-title.blog-title a:hover {
	color: #495057 !important;
}

/* Make entire card clickable */
.card-link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease;
}

.card-link:hover {
	text-decoration: none;
	color: inherit;
}

.card-link:hover .card-title.blog-title {
	color: #495057 !important;
}

/* Ensure card hover effects work with the link */
.card.card-default:hover .card-link {
	text-decoration: none;
}

/* Disable hover effects for blog thumbnails */
.blog-thumbnail.thumb-info:hover .thumb-info-wrapper:after {
	opacity: 0 !important;
	background: transparent !important;
}

.blog-thumbnail.thumb-info:hover img {
	transform: scale(1, 1) !important;
}

.blog-thumbnail.thumb-info img {
	transition: none !important;
}

/* Disable the lighten overlay completely */
.blog-thumbnail.thumb-info-lighten .thumb-info-wrapper:after {
	background: transparent !important;
	opacity: 0 !important;
}

.blog-thumbnail.thumb-info-lighten:hover .thumb-info-wrapper:after {
	background: transparent !important;
	opacity: 0 !important;
}

/* Additional specific rules to override theme CSS */
div.blog-thumbnail.thumb-info.thumb-info-no-borders.thumb-info-lighten .thumb-info-wrapper:after {
	background: transparent !important;
	opacity: 0 !important;
}

div.blog-thumbnail.thumb-info.thumb-info-no-borders.thumb-info-lighten:hover .thumb-info-wrapper:after {
	background: transparent !important;
	opacity: 0 !important;
}

div.blog-thumbnail.thumb-info.thumb-info-no-borders.thumb-info-lighten:hover img {
	transform: scale(1, 1) !important;
}

div.blog-thumbnail.thumb-info.thumb-info-no-borders.thumb-info-lighten img {
	transition: none !important;
}

/* Make the overlay completely invisible */
div.blog-thumbnail.thumb-info.thumb-info-no-borders.thumb-info-lighten .thumb-info-wrapper:after {
	display: none !important;
}

/* Force no transform on hover */
div.blog-thumbnail.thumb-info.thumb-info-no-borders.thumb-info-lighten:hover .thumb-info-wrapper img {
	transform: none !important;
}

/* Additional aggressive rules to override any theme CSS */
.blog-thumbnail .thumb-info-wrapper:after {
	display: none !important;
	opacity: 0 !important;
	background: transparent !important;
	pointer-events: none !important;
}

.blog-thumbnail .thumb-info-wrapper:hover:after {
	display: none !important;
	opacity: 0 !important;
	background: transparent !important;
}

.blog-thumbnail img {
	transform: none !important;
	transition: none !important;
}

.blog-thumbnail:hover img {
	transform: none !important;
	transition: none !important;
}

/* Target the specific image element directly */
.blog-thumbnail .thumb-info-wrapper img {
	transform: none !important;
	transition: none !important;
}

.blog-thumbnail:hover .thumb-info-wrapper img {
	transform: none !important;
	transition: none !important;
}

/* EXTREMELY AGGRESSIVE OVERRIDES - These should override ANY theme CSS */
.blog-thumbnail *,
.blog-thumbnail *:before,
.blog-thumbnail *:after {
	transition: none !important;
	transform: none !important;
}

.blog-thumbnail:hover *,
.blog-thumbnail:hover *:before,
.blog-thumbnail:hover *:after {
	transition: none !important;
	transform: none !important;
}

/* Target the specific pseudo-element that creates the grey overlay */
.blog-thumbnail .thumb-info-wrapper:after,
.blog-thumbnail .thumb-info-wrapper:before {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

.blog-thumbnail:hover .thumb-info-wrapper:after,
.blog-thumbnail:hover .thumb-info-wrapper:before {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

/* Force remove any transforms on all elements within blog thumbnail */
.blog-thumbnail .thumb-info-wrapper,
.blog-thumbnail .thumb-info-wrapper img,
.blog-thumbnail .thumb-info-wrapper * {
	transform: none !important;
	transform-origin: center center !important;
	transition: none !important;
	transition-property: none !important;
	transition-duration: 0s !important;
	transition-timing-function: none !important;
	transition-delay: 0s !important;
}

.blog-thumbnail:hover .thumb-info-wrapper,
.blog-thumbnail:hover .thumb-info-wrapper img,
.blog-thumbnail:hover .thumb-info-wrapper * {
	transform: none !important;
	transform-origin: center center !important;
	transition: none !important;
	transition-property: none !important;
	transition-duration: 0s !important;
	transition-timing-function: none !important;
	transition-delay: 0s !important;
}

/* ULTIMATE OVERRIDE - These rules should override everything */
.blog-thumbnail .thumb-info-wrapper:after,
.blog-thumbnail .thumb-info-wrapper:before {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: -1 !important;
}

.blog-thumbnail:hover .thumb-info-wrapper:after,
.blog-thumbnail:hover .thumb-info-wrapper:before {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: -1 !important;
}

.blog-thumbnail .thumb-info-wrapper img,
.blog-thumbnail:hover .thumb-info-wrapper img {
	transform: none !important;
	transition: none !important;
	transition-property: none !important;
	transition-duration: 0s !important;
	transition-timing-function: none !important;
	transition-delay: 0s !important;
}

/* Force remove any CSS variables that might be set */
.blog-thumbnail .thumb-info-wrapper {
	--thumb-info-overlay-opacity: 0 !important;
	--thumb-info-overlay-background: transparent !important;
}

.blog-thumbnail:hover .thumb-info-wrapper {
	--thumb-info-overlay-opacity: 0 !important;
	--thumb-info-overlay-background: transparent !important;
}

/* THEME CSS OVERRIDE - These rules specifically target and override theme-elements.css */
/* Override the base overlay rule from theme-elements.css line 19359 */
.blog-thumbnail.thumb-info .thumb-info-wrapper:after,
.blog-thumbnail.thumb-info .thumb-info-wrapper .thumb-info-wrapper-overlay:before {
	content: none !important;
	background: transparent !important;
	background-color: transparent !important;
	opacity: 0 !important;
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: -1 !important;
}

/* Override the hover overlay rule from theme-elements.css line 19542 */
.blog-thumbnail.thumb-info:hover .thumb-info-wrapper:after,
.blog-thumbnail.thumb-info:hover .thumb-info-wrapper .thumb-info-wrapper-overlay:before {
	content: none !important;
	background: transparent !important;
	background-color: transparent !important;
	opacity: 0 !important;
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: -1 !important;
}

/* Override the lighten overlay rule from theme-elements.css line 19567 */
.blog-thumbnail.thumb-info.thumb-info-lighten .thumb-info-wrapper:after,
.blog-thumbnail.thumb-info.thumb-info-lighten:hover .thumb-info-wrapper:after {
	content: none !important;
	background: transparent !important;
	background-color: transparent !important;
	opacity: 0 !important;
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: -1 !important;
}

/* Override the image transform rule from theme-elements.css line 19555 */
.blog-thumbnail.thumb-info:hover img,
.blog-thumbnail.thumb-info.thumb-info-lighten:hover img {
	transform: none !important;
	transform: scale(1, 1) !important;
	transition: none !important;
}

/* Override the no-borders overlay rule from theme-elements.css line 19916 */
.blog-thumbnail.thumb-info.thumb-info-no-borders .thumb-info-wrapper:after,
.blog-thumbnail.thumb-info.thumb-info-no-borders:hover .thumb-info-wrapper:after {
	content: none !important;
	background: transparent !important;
	background-color: transparent !important;
	opacity: 0 !important;
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: -1 !important;
}

/* FINAL NUCLEAR OPTION - Override ALL possible theme CSS combinations */
.blog-thumbnail.thumb-info.thumb-info-no-borders.thumb-info-lighten .thumb-info-wrapper:after,
.blog-thumbnail.thumb-info.thumb-info-no-borders.thumb-info-lighten:hover .thumb-info-wrapper:after,
.blog-thumbnail.thumb-info.thumb-info-no-borders.thumb-info-lighten .thumb-info-wrapper .thumb-info-wrapper-overlay:before,
.blog-thumbnail.thumb-info.thumb-info-no-borders.thumb-info-lighten:hover .thumb-info-wrapper .thumb-info-wrapper-overlay:before {
	content: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	opacity: 0 !important;
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: -1 !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	border-radius: 0 !important;
	transition: none !important;
	transition-property: none !important;
	transition-duration: 0s !important;
	transition-timing-function: none !important;
	transition-delay: 0s !important;
}

/* PERFECT REPLICATION - Mimics thumb-info structure exactly but without grey overlay */
.blog-thumb-replica {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	background: white;
}

.blog-thumb-replica:hover {
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.blog-thumb-replica .thumb-info-wrapper {
	position: relative;
	overflow: hidden;
	background: #f8f9fa;
	height: 200px;
}

.blog-thumb-replica .thumb-info-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 0.3s ease;
}

.blog-thumb-replica:hover .thumb-info-wrapper img {
	transform: scale(1.1, 1.1);
}

.blog-thumb-replica .card-body {
	padding: 1.25rem;
	text-align: center;
	background: white;
}

.blog-thumb-replica .card-title {
	font-family: "Poppins", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #6c757d;
	margin-bottom: 0.5rem;
}

.blog-thumb-replica .card-text {
	color: #6c757d;
	margin-bottom: 0.5rem;
}

.blog-thumb-replica .small {
	color: #6c757d;
	font-size: 0.875em;
}

/* Alternative: Keep original structure but override the problematic CSS */
.blog-thumb-original {
	/* This class will be applied to the original thumb-info structure */
	/* to override the grey overlay while keeping the exact same layout */
}

.blog-thumb-original.thumb-info .thumb-info-wrapper:after {
	content: none !important;
	background: transparent !important;
	background-color: transparent !important;
	opacity: 0 !important;
	display: none !important;
}

.blog-thumb-original.thumb-info:hover .thumb-info-wrapper:after {
	content: none !important;
	background: transparent !important;
	background-color: transparent !important;
	opacity: 0 !important;
	display: none !important;
}

.blog-thumb-original.thumb-info.thumb-info-lighten .thumb-info-wrapper:after {
	content: none !important;
	background: transparent !important;
	background-color: transparent !important;
	opacity: 0 !important;
	display: none !important;
}

.blog-thumb-original.thumb-info.thumb-info-lighten:hover .thumb-info-wrapper:after {
	content: none !important;
	background: transparent !important;
	background-color: transparent !important;
	opacity: 0 !important;
	display: none !important;
}

.blog-thumb-original.thumb-info:hover img {
	transform: scale(1.1, 1.1) !important;
}

.blog-thumb-original.thumb-info img {
	transition: transform 0.3s ease !important;
}

/* Page Layout and Footer Styling */
html, body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.main {
	flex: 1 0 auto;
}

#footer {
	flex-shrink: 0;
	margin-top: auto;
}

/* Blog page specific styling */
.blog-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.blog-content {
	flex: 1;
	padding: 2rem 0;
}

/* Ensure proper spacing for single blog post */
.blog-single-post {
	margin-bottom: 3rem;
}

/* Add some visual interest to the blog section */
.blog-section {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	padding: 3rem 0;
	min-height: 400px;
}

/* Improve card appearance */
.blog-card {
	height: 100%;
	transition: all 0.3s ease;
}

.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Add some spacing and visual elements */
.blog-header {
	margin-bottom: 2rem;
}

.blog-description {
	color: #6c757d;
	font-size: 1.1rem;
	margin-bottom: 3rem;
}

/* Empty state styling when only one post */
.blog-empty-state {
	text-align: center;
	padding: 4rem 0;
	color: #6c757d;
}

.blog-empty-state h3 {
	color: #495057;
	margin-bottom: 1rem;
}

.blog-empty-state p {
	font-size: 1.1rem;
	margin-bottom: 2rem;
}