/* Blog posts list page specific styles
 *
 * Paste your /blog/posts/styles.css contents here.
 */
/* Blog Post Page Styles */
:root {
   --primary-color: #203557;
   --secondary-color: #719976;
   --accent-color: #ffa500;
   --text-color: #333333;
   --light-gray: #f5f5f5;
   --border-color: #e0e0e0;
   --white: #ffffff;
   --black: #000000;
 }
 
 /* Main Layout */
 .main.blog-post-page {
   width: 100%;
   min-height: 100vh;
   background-color: var(--white);
 }
 
 /* Hero Section */
 .blog-hero {
   width: 100%;
   height: 400px;
   background: url("https://newvashaepz.com/wp-content/uploads/2025/03/4f205-0a0a3421.webp")
     center/cover;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: var(--white);
   position: relative;
 }
 
 .blog-hero::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #000000;
   opacity: 0.85;
   z-index: 2;
 }
 
 .blog-hero .hero-content {
   position: relative;
   z-index: 3;
 
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
 
   width: 90%;
   height: auto;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
   margin-top: 50px;
 }
 
 .blog-hero .hero-content h1 {
   font-size: 3.5rem;
   font-weight: 700;
   margin-bottom: 1rem;
   text-transform: uppercase;
   letter-spacing: 2px;
 }
 
 .blog-hero .hero-content p {
   font-size: 1.2rem;
   opacity: 0.9;
   font-weight: 300;
 }
 
 /* Breadcrumbs */
 .breadcrumbs {
   background-color: var(--light-gray);
   padding: 1rem 0;
   border-bottom: 1px solid var(--border-color);
 
   width: 100%;
   height: 100%;
 
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .breadcrumb-nav {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
   color: var(--text-color);
 
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
   height: 100%;
 
   display: flex;
   align-items: center;
   justify-content: flex-start;
 }
 
 .breadcrumb-nav a {
   color: var(--text-color);
   text-decoration: none;
   transition: color 0.3s ease;
 }
 
 .breadcrumb-nav a:hover {
   color: var(--secondary-color);
 }
 
 .breadcrumb-nav .separator {
   color: #999;
   margin: 0 0.5rem;
 }
 
 .breadcrumb-nav .current {
   color: var(--secondary-color);
   font-weight: 500;
 }
 
 /* Main Content Grid */
 .blog-content {
   padding: 4rem 0;
   width: 100%;
   height: 100%;
 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
 .blog-content .container{
   padding: 0;
 }
 
 .content-grid {
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 2rem;
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
   height: 100%;
 }
 
 /* Sidebar */
 .sidebar {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   position: sticky;
   top: 2rem;
   height: fit-content;
   max-height: calc(100vh - 4rem);
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 1rem;
   scrollbar-width: thin;
   scrollbar-color: var(--secondary-color) transparent;
 }
 
 /* Custom scrollbar for sidebar */
 .sidebar::-webkit-scrollbar {
   width: 6px;
 }
 
 .sidebar::-webkit-scrollbar-track {
   background: transparent;
 }
 
 .sidebar::-webkit-scrollbar-thumb {
   background-color: var(--secondary-color);
   border-radius: 3px;
 }
 
 .sidebar::-webkit-scrollbar-thumb:hover {
   background-color: var(--primary-color);
 }
 
 .sidebar-section h3 {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--text-color);
   margin-bottom: 1rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   border-bottom: 2px solid var(--secondary-color);
   padding-bottom: 0.5rem;
 }
 
 /* Category List */
 .category-list {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .category-list li {
   margin-bottom: 0.8rem;
 }
 
 .category-list a {
   display: block;
   padding: 0rem 0rem 0rem 0rem;
   color: var(--text-color);
   text-decoration: none;
   border-radius: 4px;
   transition: all 0.3s ease;
   font-size: 0.95rem;
   border-left: 3px solid transparent;
 }
 
 .category-list a:hover {
   color: var(--secondary-color);
 }
 
 /* Links List */
 .links-list {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .links-list li {
   margin-bottom: 0.8rem;
 }
 
 .links-list a {
   display: block;
   padding: 0rem 0rem 0rem 0rem;
   color: var(--text-color);
   text-decoration: none;
   border-radius: 4px;
   transition: all 0.3s ease;
   font-size: 0.95rem;
   border-left: 3px solid transparent;
 }
 
 .links-list a:hover {
   background-color: var(--light-gray);
   color: var(--secondary-color);
   border-left-color: var(--secondary-color);
 }
 
 /* Quote Button */
 .quote-btn {
   display: block;
   width: 100%;
   box-sizing: border-box;
   padding: 1rem 1.5rem;
   background-color: var(--primary-color);
   color: var(--white);
   text-decoration: none;
   text-align: center;
   border-radius: 4px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.3s ease;
   border: none;
   cursor: pointer;
 }
 
 .quote-btn:hover {
   background-color: var(--secondary-color);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 /* Main Content */
 .main-content {
   background-color: var(--white);
 }
 
 .post-image {
   width: 100%;
   height: 450px;
   margin-bottom: 2rem;
   border-radius: 0px;
   overflow: hidden;
 }
 
 .post-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
 }
 
 .post-image:hover img {
   transform: scale(1.05);
 }
 
 .main-content h2 {
   font-size: 2.5rem;
   font-weight: 700;
   color: var(--text-color);
   margin-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 1px;
 }
 
 /* Download Buttons */
 .download-buttons {
   display: flex;
   gap: 1rem;
   margin-bottom: 2rem;
 
   display: none !important;
 }
 
 .download-btn {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 1rem 1.5rem;
   background-color: var(--white);
   border: 2px solid var(--secondary-color);
   color: var(--text-color);
   text-decoration: none;
   border-radius: 4px;
   font-weight: 600;
   transition: all 0.3s ease;
   cursor: pointer;
   font-size: 0.95rem;
 }
 
 .download-btn.doc {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 1rem 1.5rem;
   background-color: var(--secondary-color);
   border: 2px solid var(--secondary-color);
   color: var(--white);
   text-decoration: none;
   border-radius: 4px;
   font-weight: 500;
   transition: all 0.3s ease;
   cursor: pointer;
   font-size: 0.95rem;
 }
 
 .download-btn:hover {
   background-color: var(--secondary-color);
   color: var(--white);
   transform: translateY(0px);
   box-shadow: 0 4px 12px rgba(113, 153, 118, 0.3);
 }
 
 .download-btn i {
   font-size: 1.2rem;
   color: var(--secondary-color);
 }
 
 .download-btn.doc i{
   color: #ffffff;
 }
 
 .download-btn:hover i {
   color: var(--white);
 }
 
 /* Post Content */
 .post-content {
   line-height: 1.8;
   color: var(--text-color);
 }
 
 .post-content p {
   margin-bottom: 1rem;
   font-size: 1rem;
   text-align: justify;
 }
 
 /* Share section */
 .post-share {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1.5rem 0 2rem 0;
   border-top: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
   margin: 2rem 0 3rem 0;
 }
 
 .post-share .share-label {
   font-weight: 700;
   color: var(--text-color);
 }
 
 .post-share .share-icons a {
   color: var(--text-color);
   margin-right: 1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   transition: all 0.3s ease;
 }
 
 .post-share .share-icons a:hover {
   color: var(--secondary-color);
   transform: translateY(-2px);
 }
 
 /* Recommended posts */
 .recommended {
   margin-top: 2rem;
 }
 
 .recommended-title {
   font-size: 1.4rem;
   font-weight: 700;
   margin-bottom: 1.5rem;
   color: var(--text-color);
 }
 
 .recommended-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
 }
 
 .rec-card {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 
 .rec-card a.rec-link {
   text-decoration: none;
   color: var(--text-color);
   transition: all 0.3s ease;
 
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
 .rec-image {
   width: 100%;
   height: 220px;
   overflow: hidden;
 }
 
 .rec-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
 }
 
 .rec-card:hover .rec-image img {
   transform: scale(1.05);
 }
 
 .rec-meta {
   display: flex;
   align-items: center;
   gap: 1rem;
   color: #777;
   font-size: 0.9rem;
 }
 
 .rec-meta i {
   margin-right: 6px;
   color: var(--accent-color);
 }
 
 .rec-title {
   font-size: 1.2rem;
   font-weight: 700;
   color: var(--text-color);
   line-height: 1.4;
   transition: all 0.3s ease;
 }
 
 .rec-card .rec-title:hover {
   color: var(--secondary-color);
 }
 
 .rec-excerpt {
   color: #666;
   font-size: 0.95rem;
   line-height: 1.6;
 }
 
 @media (max-width: 968px) {
   .recommended-grid {
     grid-template-columns: 1fr 1fr;
   }
 }
 
 @media (max-width: 600px) {
   .recommended-grid {
     grid-template-columns: 1fr;
   }
 }
 
 /* Responsive Design */
 @media (max-width: 1200px) {
   .content-grid {
     grid-template-columns: 250px 1fr;
     gap: 3rem;
   }
 
   .blog-hero .hero-content h1 {
     font-size: 3rem;
   }
 }
 
 @media (max-width: 968px) {
   .content-grid {
     grid-template-columns: 1fr;
     gap: 2rem;
   }
 
   .sidebar {
     order: 2;
     position: static;
     max-height: none;
     overflow-y: visible;
   }
 
   .main-content {
     order: 1;
   }
 
   .blog-hero .hero-content h1 {
     font-size: 2.5rem;
   }
 
   .main-content h2 {
     font-size: 2rem;
   }
 
   .download-buttons {
     flex-direction: row;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 1rem;
   }
 
   .download-btn {
     justify-content: center;
     width: 100%;
   }
 }
 
 @media (max-width: 768px) {
   .blog-hero {
     height: 300px;
   }
 
   .blog-hero .hero-content {
     width: 90% !important;
 
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding-top: 50px;
   }
 
   .blog-hero .hero-content h1 {
     font-size: 2rem;
   }
 
   .blog-hero .hero-content p {
     font-size: 1rem;
   }
 
   .blog-content {
     padding: 2rem 0;
     box-sizing: border-box;
   }
 
   .blog-content .container {
     width: 95% !important;
   }
 
   .content-grid {
     gap: 1.5rem;
   }
 
   .main-content h2 {
     font-size: 1.8rem;
   }
 
   .post-image {
     height: 250px;
   }
 
   .sidebar-section h3 {
     font-size: 1rem;
   }
 
   .category-list a,
   .links-list a {
     padding: 0rem 0rem;
     font-size: 0.9rem;
   }
 
   .quote-btn {
     padding: 0.8rem 1rem;
     font-size: 0.9rem;
   }
 }
 
 @media (max-width: 480px) {
   .blog-hero .hero-content h1 {
     font-size: 1.8rem;
   }
 
   .main-content h2 {
     font-size: 1.5rem;
   }
 
   .post-image {
     height: 200px;
   }
 
   .download-btn {
     padding: 0.8rem 1rem;
     font-size: 0.9rem;
   }
 
   .post-content p {
     font-size: 1rem;
     padding: 0 !important;
     margin-bottom: 1.05rem !important;
     line-height: 1.4;
   }
 
   .breadcrumb-nav {
     font-size: 0.8rem;
   }
 
   .download-btn {
     padding: 1rem 0 !important;
   }
 
   /* Share section */
   .post-share {
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
     align-items: center;
     gap: 1rem;
     padding: 1.5rem 0 2rem 0;
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
     margin: 2rem 0 3rem 0;
   }
 
   .post-share .share-label {
     font-weight: 700;
     color: var(--text-color);
   }
 
   .post-share .share-icons a {
     color: var(--text-color);
     margin-right: 1rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     transition: all 0.3s ease;
   }
 
   .post-share .share-icons a:hover {
     color: var(--secondary-color);
     transform: translateY(-2px);
   }
 }
 
 /* Animation for content */
 .main-content {
   animation: fadeInUp 0.8s ease-out;
 }
 
 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
 
 /* Hover effects for interactive elements */
 .category-list a,
 .links-list a,
 .download-btn,
 .quote-btn {
   position: relative;
   overflow: hidden;
 }
 
 .category-list a::before,
 .links-list a::before,
 .download-btn::before,
 .quote-btn::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.5s;
 }
 
 .category-list a:hover::before,
 .links-list a:hover::before,
 .download-btn:hover::before,
 .quote-btn:hover::before {
   left: 100%;
 }
 
 /* Focus states for accessibility */
 .category-list a:focus,
 .links-list a:focus,
 .download-btn:focus,
 .quote-btn:focus {
   outline: 2px solid var(--secondary-color);
   outline-offset: 2px;
 }
 
 /* Print styles */
 @media print {
   .sidebar,
   .download-buttons,
   .breadcrumbs {
     display: none;
   }
 
   .content-grid {
     grid-template-columns: 1fr;
   }
 
   .main-content {
     color: black;
   }
 }