/* For Blog-page*/
/* =========================================
   FULL WIDTH BLOG PAGE (FEATURED + RECENT)
   ========================================= */

/* Remove theme container limits */
.blog-page,
.blog-page #primary,
.blog-page .site-main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Full width sections */
.featured-blogs,
.recent-blogs {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* ============================
   GRID LAYOUT
============================ */
.featured-blog-wrap,
.recent-blog-wrap {
  max-width: 1500px;
  margin: 0 auto;
  padding: 2em 4vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Tablet */
@media (max-width: 1024px) {
  .featured-blog-wrap,
  .recent-blog-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .featured-blog-wrap,
  .recent-blog-wrap {
    grid-template-columns: 1fr;
    padding: 2em 20px;
  }
}

/* ============================
   BLOG CARD BASE
============================ */
.featured-post,
.blog-post {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto; /* image - content - button */
}

.featured-post:hover,
.blog-post:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.15);
}

/* ============================
   IMAGES
============================ */
.featured-post img,
.blog-post img {
  width: 100% !important;
  height: 364px !important;
  display: block;
  object-fit: cover;
}

/* ============================
   CONTENT AREA
============================ */
.featured-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: start;
  padding: 20px;
  flex: 1;
  height: 100%; /* <-- Added to support sticky button */
}

.featured-content h4 {
  margin: 0;
}

/* Titles */
.featured-content h3,
.blog-post h3 {
  font-size: 1.2em;
  color: #222;
  margin: 0;
  text-align:left;
}

/* Blog text area */
.blog-post h4,
.blog-post p {
  padding: 0 15px;
}

.blog-post h4 {
  margin: 0;
  font-family: "montserratlight", Arial, Helvetica, sans-serif;
}

.blog-post p {
  flex: 1;
  margin: 0px !important;
}

/* Clamp title */
a.blog_title {
  font-size:24px;
  line-height:31.2px;
  font-weight: 600;
  font-family: "montserratlight", Arial, Helvetica, sans-serif;
  color: #f15830;
}

/* Expert text */
.expert-name {
  font-style: italic;
  color: #666;
  margin-bottom: 10px;
}

/* ============================
   READ MORE BUTTON
============================ */
.read-more-btn {
  display: inline-block;
  padding: 15px 16px 11px;
  background: #f15830;
  color: #ffffff;
  text-decoration: none;
  border-radius: 0;
  font-size: 20px;
  transition: background 0.3s ease;
  margin: 0px;
  font-family: "oswald_regularregular", Arial, Helvetica, sans-serif;

  /* ⭐ Keeps button at card bottom */
  margin-top: auto;
  text-align: center;
}

.read-more-btn:hover {
  background: #4c384c;
  color: #fff;
}

/* Remove internal WP continue reading */
.blog-post .more-link {
  display: none !important;
}

.single-post ul{
 margin-left:0;
}

@media (max-width:480px) {
    .blog-header h1 {
        font-size: 25px;
    }
}

.blog-breadcrumbs p {
    font-size: 18px;
}

.single-blog-layout a {
    color: #f15830;
    text-decoration: none;
}

.single-blog-layout a:hover {
    color: #66737f;
    text-decoration: none !important;
}
    
/* =====================================
   PAGINATION – NUMBERS ONLY
===================================== */
.blog-pagination .prev,
.blog-pagination .next,
.blog-pagination .prev.page-numbers,
.blog-pagination .next.page-numbers {
  display: none !important;
}

.blog-pagination {
  width: 100%;
  text-align: center;
  margin-top: 40px;
  padding-bottom:2em;
}

.blog-pagination .page-numbers {
  display: inline-block;
  margin: 0 6px;
  padding: 10px 16px;
  background: #f2f2f2;
  color: #333;
  border-radius: 4px;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s ease;
}

.blog-pagination .page-numbers.current {
  background: #f15830;
  color: #ffffff;
  font-weight: 600;
}

/* BLOG PAGE HEADING */
.blog-page h2,  
.blog-page h1, .category-archive h1 {
  font-family: 'oswald_regularregular';
  font-size: 70px;
  font-weight: 700;
  text-align: center;
  background: #EFEFEF;
  color: #66737f;
  padding-top: 1em;
  padding-bottom: 1em;
  margin: 0;
}

.featured-excerpt {
  margin: 0;
}

/* --- LIMIT TEXT TO 3 LINES --- */
.featured-content p,
.blog-page p,
.archive.category p{
  font-size: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: calc(1.4em * 3);
}

@media (max-width: 1024px) {
    .blog-page h1, .blog-page h2, .category-archive h1 {
        font-size: 50px;
        line-height: 60px;
    }
}


@media (max-width: 1024px) {
    .blog-page h1, .blog-page h2 {
        font-size: 35px !important;
        line-height: 60px;
    }
}

/* ============================= */
/* SINGLE BLOG PAGE DESIGN */
/* ============================= */
 
.single-blog-layout .wp-block-columns {
    display: flex !important;
    margin-bottom: 28px;
    flex-wrap: wrap;
    flex-direction: column;
}


.single-blog-layout {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}
 
/* Breadcrumbs */
.blog-breadcrumbs {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
  font-size: 14px;
  color: #333 !important;
	padding-top:4em;
}
 
/* Title */
.blog-header {
  max-width: auto;
  padding: 0 20px;
  padding-left: 10em;
}
 
.blog-title {
  font-size: 38px;
  line-height: 1.3;
  font-weight: 700;
  color: #1a1a1a;
}
 
/* Featured Image */
.blog-featured-image {
  width: 100%;
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 20px;
}
 
.blog-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
 
/* Content */
.blog-content {
  max-width: 1100px;
  margin: 40px auto 80px;
  padding: 0 20px;
  font-size: 17px;
  line-height: 1.8;
  color: #333;
}
 
/* Headings inside content */
.blog-content h2,
.blog-content h3,
.blog-content h4 {
  margin-top: 40px;
  margin-bottom: 15px;
  font-weight: 700;
}
 
.blog-content h2{
	background-color:#fff;
	font-size:40px;
	text-align: start;
	padding: 0;
	margin: 0;
}
 
/* Lists */
.blog-content ul,
.blog-content ol {
  padding-left: 25px;
  margin-bottom: 20px;
}
 
/* Paragraph spacing */
.blog-content p {
  margin-bottom: 20px;
}
 
/* Mobile */
@media (max-width: 768px) {
  .blog-title {
    font-size: 28px;
  }
 
  .blog-content {
    font-size: 16px;
  }

  .blog-header h1, .category-archive h1 {
     font-size: 30px;
   }
}
 
.blog-breadcrumbs a {
    color: #333;
}
 

/* ============================= */
/* ALIGN BREADCRUMB + TITLE ONLY */
/* ============================= */
 
/* Shared left alignment width */
.blog-breadcrumbs,
.blog-header {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
 
/* Breadcrumb styling */
.blog-breadcrumbs {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 14px;
}
 
/* Title styling ONLY */
.blog-header h1 {
  font-size: 38px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0;
}
 
/* Featured image aligned with same width */
.blog-featured-image {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 20px;
}
 
@media (max-width:600px) {
  .blog-header h1, .category-archive h1 {
    font-size: 28px !important;
  }
}

/* ================================
   CATEGORY PAGE – ISOLATED STYLES
   ================================ */
 
body.category .blog-highlight-section {
  padding: 60px 0;
  background: #ffffff;
}
 
/* Heading */
body.category .blog-section-heading h2 {
  color: #111;
  font-size: 36px;
  font-weight: 700;
	background-color: #fff;
	text-align:left;
	padding-left:1em;
}
 
/* Grid */
body.category .blog-card-grid {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
 
/* Card */
body.category .blog-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
 
/* Image */
body.category .blog-card-image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
 
/* Content */
body.category .blog-card-content {
  padding: 22px;
}
 
body.category .blog-card-content h3 {
  color: #0474bb;
  font-size: 30px;
}
 
/* Text */
body.category .blog-card-content p {
  color: #555;
}
 
/* Links (IMPORTANT FIX) */
body.category .blog-card a {
  color: #111;
  text-decoration: none;
}
 
body.category .blog-card a:hover {
  color: #0073aa;
}
 
/* Pagination */
body.category .blog-pagination a,
body.category .blog-pagination span {
  color: #111;
}
 
/* Read more button */
span.blog-read-more {
  display: inline-block;
  margin: 15px auto 25px;
  padding: 10px 22px;
  background: #0073aa;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  transition: background 0.3s ease;
  font-family: 'Work Sans';
}
 
/* Mobile */
@media (max-width: 768px) {
  body.category .blog-card-grid {
    grid-template-columns: 1fr;
  }
}
 
/* --- FOR EXPERT LINE IN 3 --- */
.page-id-3059 p{
	    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-height: calc(1.4em * 3);
	padding-left: 18px;
}
.archive.category p{
	    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-height: calc(1.4em * 3);
}