/* General Body Styles */
body {
	background-color: #1b4a4a;
	color: var(--white-1);
	font-family: var(--font-stack);
}

/* Main container for the blog post */
.single-blog-main {
	padding-top: 10rem; /* Adjust for fixed header */
	padding-bottom: 6rem;
    /* Remove max-width and margin from here, it will be handled by blog-layout-container */
}

.article-container {
    /* max-width: 800px; Removed, now controlled by grid */
    /* margin: 0 auto; Removed, now controlled by grid */
	padding: 0; /* Remove padding here, add to article-header/body */
	background: #1f5a5a;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.blog-layout-container {
    display: grid;
    grid-template-columns: 1fr 300px; /* Article takes more space, sidebar 300px */
    gap: 4rem;
    max-width: 1200px; /* Max width for the entire layout */
    margin: 0 auto;
    padding: 0 2rem;
}

.about-sidebar {
    padding: 2rem;
    background: #1f5a5a; /* Same background as article for consistency */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 10rem; /* Changed from 0 back to 10rem to stick below the header */
    align-self: start; /* Sticks to the top of its grid area */
    height: fit-content; /* Only take up necessary height */
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none;  /* For Internet Explorer and Edge */
}

/* Removed: .about-sidebar::-webkit-scrollbar { display: none; } */

.about-sidebar .about__image {
    margin-bottom: 1.5rem;
    text-align: center;
}

.about-sidebar .about__photo {
    width: 120px; /* Smaller image for sidebar */
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--secondary-color);
}

.about-sidebar .about__text p {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--white-1);
    margin-bottom: 1.5rem;
}

.about-sidebar .about__text h4 {
    font-size: 1.6rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.about-sidebar .link--cta {
    font-size: 1.4rem;
    display: inline-block;
    margin-top: 1rem;
}

/* Responsive Design for Sidebar */
@media (max-width: 992px) { /* Adjust breakpoint as needed */
    .blog-layout-container {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
        gap: 2rem;
    }
    .about-sidebar {
        position: static; /* Remove sticky positioning */
        top: auto;
        order: -1; /* Place sidebar above article on small screens */
    }
}

@media (max-width: 768px) {
    .blog-layout-container {
        padding: 0 1rem;
    }
    .about-sidebar { /* Add this rule */
        display: none;
    }
}

.article-body strong {
    color: var(--secondary-color);
    font-weight: bold; /* Ensure it's bold as well */
}

.value-item i,
.value-item p {
    vertical-align: middle;
}

/* Article Header */
.article-header {
	padding: 3rem 2rem 2rem;
	text-align: left; /* Changed to left-align */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.article-title {
	font-family: 'Jost', sans-serif;
	font-size: 3.5rem; /* Reduced original size */
	line-height: 1.2;
	color: var(--secondary-color); /* Changed from var(--white) to var(--secondary-color) */
	margin-bottom: 1.5rem;
}

.article-meta {
	font-size: 1.6rem;
	color: var(--white-1);
	font-family: 'Hk Grotesk', sans-serif;
    display: flex;
    justify-content: flex-start; /* Changed to left-align */
    gap: 1rem; /* Reduce gap slightly for tighter grouping */
    margin-top: 1.5rem;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.article-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem; /* Add padding */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    border-radius: 5px; /* Slightly rounded corners */
    background-color: rgba(0, 0, 0, 0.1); /* Subtle background */
    transition: all 0.3s ease; /* Smooth transition for hover */
}

.article-meta .meta-item:hover {
    background-color: rgba(0, 0, 0, 0.2); /* Darker background on hover */
    border-color: var(--secondary-color); /* Highlight border on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

.article-meta .meta-item i {
    color: var(--secondary-color);
    font-size: 1.8rem; /* Slightly larger icons */
}

.article-meta .meta-item span {
    font-weight: normal;
    color: var(--white-1);
}

/* Make author's name bold */
.article-meta .meta-item span:nth-child(3) { /* Targets the span containing the author's name */
    font-weight: bold;
}

/* Article Thumbnail */
.article-thumbnail-container {
	width: 100%;
	/* Removed: max-height: 400px; */
	overflow: hidden;
}

.article-thumbnail {
	width: 100%;
	height: auto; /* Changed from 100% to auto */
	object-fit: contain; /* Changed from cover to contain */
}

/* Article Body */
.article-body {
	padding: 3rem 2rem;
	font-size: 1.8rem;
	line-height: 1.8;
	color: var(--white-1);
}

.article-body h2,
.article-body h3,
.article-body h4 {
	font-family: 'Jost', sans-serif;
	color: var(--white);
	margin: 3rem 0 1.5rem;
}

.article-body h2 {
	font-size: 2.8rem;
}

.article-body h3 {
	font-size: 2.4rem;
}

.article-body p {
	margin-bottom: 2rem;
}

.article-body a {
	color: #b88917;
	text-decoration: underline;
}

.article-body a:hover {
	color: #dabd5f;
}

.article-body ul,
.article-body ol {
	margin-bottom: 2rem;
	padding-left: 2.5rem;
}

.article-body blockquote {
	margin: 2rem 0;
	padding: 1.5rem 2rem;
	background: rgba(0, 0, 0, 0.1);
	border-left: 4px solid #b88917;
	font-style: italic;
}

/* Share Section */
.article-share {
	padding: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap; /* Allows items to stack on small screens */
	gap: 2rem;
}

.share-prompt {
	display: flex;
	align-items: center;
	gap: 1.5rem;
  flex-wrap: wrap; /* Allows share links to wrap if needed */
}

.article-share p {
	font-size: 1.6rem;
	color: var(--white);
	margin: 0; /* Removed bottom margin */
}

.share-links {
  display: flex;
  gap: 0.5rem;
}

.share-links a {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
  text-align: center;
	border-radius: 50%;
	color: #fff;
	background-color: #333;
	transition: all 0.3s ease;
	font-size: 1.8rem;
}

.share-links a:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.share-links .twitter {
	background-color: #1da1f2;
}
.share-links .linkedin {
	background-color: #0077b5;
}
.share-links .whatsapp {
	background-color: #25d366;
}
.share-links .email {
	background-color: #777;
}

/* Spinner */
.spinner-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(27, 74, 74, 0.9);
	z-index: 2000;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.spinner-container.hidden {
	opacity: 0;
	visibility: hidden;
}

/* Responsive Design */
@media (max-width: 768px) {
	.article-title {
		font-size: 3.5rem;
	}
	.single-blog-main {
		padding-top: 10rem;
	}
	.article-container {
		margin: 0 1rem;
		padding: 0 1rem;
	}
	.article-header,
	.article-body,
	.article-share {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
  .article-share {
    justify-content: center; /* Center items on mobile */
  }
}

@media (max-width: 600px) {
    .article-meta {
        gap: 0.5rem; /* Reduce gap */
        font-size: 1.2rem; /* Reduce font size for text */
    }
    .article-meta .meta-item {
        padding: 0.3rem 0.6rem; /* Reduce padding */
    }
    .article-meta .meta-item i {
        font-size: 1.4rem; /* Reduce font size for icons */
    }
}

@media (max-width: 480px) {
    .article-title {
        font-size: 2.5rem; /* Further reduce font size for very small screens */
    }
}

.explore-more-link .all-articles-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--white-1);
  transition: color 0.3s ease;
}

.explore-more-link .all-articles-link:hover {
  color: var(--secondary-color);
}

.explore-more-link .all-articles-link i {
  transition: transform 0.3s ease;
}

.explore-more-link .all-articles-link:hover i {
  transform: translateX(5px); /* Move right on hover */
}