.elementor-3443 .elementor-element.elementor-element-1b1a1a6{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-3443 .elementor-element.elementor-element-1b1a1a6 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-3443 .elementor-element.elementor-element-1b1a1a6:after{content:"0.66";}.elementor-3443 .elementor-element.elementor-element-1b1a1a6 .elementor-post__thumbnail__link{width:100%;}.elementor-3443 .elementor-element.elementor-element-1b1a1a6.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-3443 .elementor-element.elementor-element-1b1a1a6.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-3443 .elementor-element.elementor-element-1b1a1a6.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-3443 .elementor-element.elementor-element-1b1a1a6 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-3443 .elementor-element.elementor-element-1b1a1a6:after{content:"0.5";}.elementor-3443 .elementor-element.elementor-element-1b1a1a6 .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS for section, class: .elementor-element-15effd6 *//* =========================================================
   TURAAS JOURNAL — Blog Page Custom CSS
   Paste this whole file into:
   WP Admin → Appearance → Customize → Additional CSS
   ========================================================= */

/* ---------- 1. Brand tokens ---------- */
:root{
  --turaas-cream:      #F4EFE3;
  --turaas-cream-dark: #EAE2CF;
  --turaas-green:      #24402E;
  --turaas-green-dark: #16281B;
  --turaas-terracotta: #B0502F;
  --turaas-text-muted: #6E6A5E;
  --turaas-border:     #E3DAC2;
  --turaas-white:      #FFFFFF;
}

/* Optional serif heading font — matches the wireframe's headline style.
   Remove this @import line if the theme already loads a serif font. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap');


/* ---------- 2. Page background ---------- */
body.page,
.elementor-section-wrap{
  background-color: var(--turaas-cream);
}


/* ---------- 3. Hero banner ("BLOGS") ---------- */
/* Keeps your photo hero, just tightens type + adds a soft dark overlay
   so the wordmark reads clearly, matching the client's tone. */
.elementor-heading-title{
  font-family: 'Playfair Display', Georgia, serif;
}


/* ---------- 4. NEW intro block: "The Turaas Journal" + filters ----------
   These elements (breadcrumb, journal title, intro line, category pills)
   don't exist on the live page yet — CSS can only style what's already
   in the page. Add them in Elementor first (see the steps in chat), give
   them the CSS classes below, and this styling will apply automatically. */

.turaas-breadcrumb{
  background: var(--turaas-white);
  border-radius: 10px;
  padding: 16px 24px;
  font-size: 14px;
  color: var(--turaas-text-muted);
  margin-bottom: 24px;
}
.turaas-breadcrumb a{
  color: var(--turaas-text-muted);
  text-decoration: none;
}
.turaas-breadcrumb strong{
  color: var(--turaas-green-dark);
}

.turaas-journal-intro{
  background: var(--turaas-cream-dark);
  border-radius: 14px;
  padding: 40px 32px;
  text-align: center;
  margin-bottom: 32px;
}
.turaas-journal-intro h2{
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--turaas-green-dark);
  margin: 0 0 12px;
}
.turaas-journal-intro p{
  font-family: 'Inter', sans-serif;
  color: var(--turaas-text-muted);
  font-size: 16px;
  margin: 0 0 24px;
}

.turaas-filter-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.turaas-filter-btn{
  display: inline-block;
  background: var(--turaas-white);
  color: var(--turaas-green-dark);
  border: 1px solid var(--turaas-border);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}
.turaas-filter-btn:hover{
  border-color: var(--turaas-green);
}
.turaas-filter-btn.is-active{
  background: var(--turaas-green-dark);
  color: var(--turaas-white);
  border-color: var(--turaas-green-dark);
}


/* ---------- 5. Blog post grid (Elementor "Posts" widget) ----------
   These ARE the real classes Elementor outputs for your existing loop —
   confirmed by the "///" meta separator visible on the live page. */

.elementor-posts-container{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1024px){
  .elementor-posts-container{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .elementor-posts-container{ grid-template-columns: 1fr; }
}

.elementor-post{
  background: var(--turaas-white);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--turaas-border);
  box-shadow: 0 2px 10px rgba(36,64,46,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.elementor-post:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(36,64,46,0.12);
}

.elementor-post__thumbnail__link,
.elementor-post__thumbnail{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.elementor-post__text{
  padding: 20px 22px 24px;
}

/* Category label — the wireframe shows a terracotta eyebrow above the
   title (e.g. "HOME CARE GUIDES"). The current Posts widget doesn't
   output category text, so add it via a Text widget per post, or the
   Pro "Posts" widget's Terms meta field, with this class: */
.turaas-post-category{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--turaas-terracotta);
  margin-bottom: 8px;
}

.elementor-post__title{
  font-family: 'Playfair Display', Georgia, serif;
  margin: 0 0 8px;
}
.elementor-post__title a,
.elementor-post__title a:link,
.elementor-post__title a:visited{
  color: var(--turaas-green-dark) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1.3;
}
.elementor-post__title a:hover{
  color: var(--turaas-terracotta) !important;
  text-decoration: none !important;
}

.elementor-post__meta-data{
  font-family: 'Inter', sans-serif;
  font-size: 13px !important;
  color: var(--turaas-text-muted) !important;
  margin-bottom: 10px;
}
.elementor-post__meta-data *{
  color: var(--turaas-text-muted) !important;
  text-decoration: none !important;
}

.elementor-post__excerpt,
.elementor-post__excerpt p{
  font-family: 'Inter', sans-serif;
  font-size: 14px !important;
  color: var(--turaas-text-muted) !important;
  font-weight: 400 !important;
  line-height: 1.5;
  margin: 0;
}

.elementor-post__read-more,
.elementor-post__read-more:link,
.elementor-post__read-more:visited{
  display: inline-block;
  margin-top: 12px;
  color: var(--turaas-green) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}


/* ---------- 6. Pagination (if present) ---------- */
.elementor-pagination a,
.elementor-pagination span{
  border-radius: 8px !important;
  color: var(--turaas-green-dark) !important;
}
.elementor-pagination .page-numbers.current{
  background: var(--turaas-green-dark) !important;
  color: var(--turaas-white) !important;
}/* End custom CSS */