/* =====================================================================
   Otway Tree Care — blog listing + blog post redesign
   Targets GoHighLevel's own blog-theme class names (clean, semantic —
   no markup changes needed). Applies to: blog.html, blogs.html,
   blogs/category/*, blogs/author/*, blogs/tag/*, and post/*.html.
   ===================================================================== */
.blog-html, .blog-items-container, .blog-author-container{font-family:'Montserrat','Inter',system-ui,-apple-system,Segoe UI,sans-serif;}

/* ---------------------------------------------------------------------
   LISTING (blog.html, blogs.html, category/author/tag archives)
   --------------------------------------------------------------------- */
/* Flexbox, not grid: with only a handful of posts so far, a fixed
   3-column grid leaves large empty tracks when there's no 2nd/3rd item
   in a row. Flex-wrap with a fixed basis lets cards sit at a natural
   width and wrap only once there are enough of them. */
.blog-items-container{max-width:100% !important;}
.blog-row{
  display:flex !important;
  flex-wrap:wrap;
  gap:28px;
  width:100% !important;
}
.blog-item.blog-column{
  width:auto !important;
  max-width:none !important;
  flex:0 1 340px !important;
  margin:0 !important;
}
.blog-column-container{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid #e7ece7;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,32,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-item.blog-column:hover .blog-column-container{
  transform:translateY(-5px);
  box-shadow:0 16px 34px rgba(16,24,32,.13);
  border-color:#cfe0d2;
}

.blog-item-box-2{margin:0 !important;flex:0 0 auto;line-height:0;}
.blog-item-box-2 img{
  display:block !important;
  width:100% !important;
  height:190px !important;
  object-fit:cover !important;
  transition:transform .35s ease;
}
.blog-item.blog-column:hover .blog-item-box-2 img{transform:scale(1.05);}

.blog-item-texts{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:22px 24px 24px !important;
}
.blog-item-category{
  order:-1;
  display:inline-block;
  align-self:flex-start;
  font-size:12px !important;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  background:#e6f4ea;
  padding:4px 10px;
  border-radius:999px;
  margin:0 0 12px !important;
}
.blog-item-category, .blog-item-category span{color:#1e6b34 !important;}
.blog-item-heading{
  font-size:19px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  color:#16321f !important;
  margin:0 0 10px !important;
}
.blog-item-heading a{color:inherit;text-decoration:none;transition:color .15s;}
.blog-item.blog-column:hover .blog-item-heading a{color:#1e6b34 !important;}
.blog-item-texts p.blog-item-description{
  font-size:14.5px !important;
  line-height:1.65 !important;
  color:#57685c !important;
  margin:0 0 16px !important;
  flex:1 1 auto;
}
.compact-more-button{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  font-size:13.5px !important;
  font-weight:700 !important;
  color:#1e6b34 !important;
  text-decoration:none !important;
  margin-top:auto;
}
.blog-item.blog-column:hover .compact-more-button{color:#039855 !important;}
.blog-item-subtexts{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px !important;
  margin-top:14px !important;
  padding-top:14px;
  border-top:1px solid #eef2ee;
}
.blog-item-subtexts, .blog-item-subtexts span{color:#8a9990 !important;}

@media (max-width:980px){.blog-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.blog-row{grid-template-columns:1fr;}}

/* ---------------------------------------------------------------------
   LISTING — the OTHER GHL widget variant used on blogs.html and the
   category/author/tag archive pages ("standard" blog-post widget,
   class prefix .blog-post-* / .blog-* Tailwind-utility based, distinct
   from the .blog-item.blog-column grid widget used on blog.html)
   --------------------------------------------------------------------- */
.blog-post-wrapper-list{display:flex !important;flex-direction:column;gap:24px;}
.blog-post-wrapper{
  display:flex !important;
  gap:0 !important;
  background:#fff;
  border:1px solid #e7ece7;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,32,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-post-wrapper:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(16,24,32,.1);
  border-color:#cfe0d2;
}
.blog-post-wrapper .hl-image-picture{flex:0 0 300px;align-self:stretch;}
.blog-post-wrapper .hl-image-picture img{
  width:100% !important;
  height:100% !important;
  min-height:200px;
  object-fit:cover !important;
  display:block;
}
.blog-box{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:24px 26px !important;
}
.blog-title{
  font-size:20px !important;
  font-weight:700 !important;
  color:#16321f !important;
  margin:0 0 10px !important;
  font-family:'Montserrat','Inter',system-ui,-apple-system,Segoe UI,sans-serif !important;
}
.blog-author, .blog-author *{color:#57685c !important;font-weight:600;font-size:13.5px !important;}
.blog-publish-date, .blog-publish-date *{color:#8a9990 !important;font-size:13.5px !important;}
.blog-tag, .blog-tag *{
  background:#e6f4ea !important;
  color:#1e6b34 !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.standard-blog-content{
  color:#57685c !important;
  font-size:14.5px !important;
  line-height:1.65 !important;
  margin:10px 0 16px !important;
}
.blog-button.readme-btn, a.blog-button.readme-btn{
  color:#1e6b34 !important;
  font-weight:700 !important;
  font-size:13.5px !important;
  text-decoration:none !important;
  margin-top:auto;
}
.blog-button.readme-btn:hover{color:#039855 !important;}

.pagination-container{display:flex;gap:8px;justify-content:center;margin-top:32px;}
.pagination-button{
  border:1px solid #e2ebe3 !important;
  background:#fff !important;
  color:#38463c !important;
  border-radius:8px !important;
  padding:8px 14px !important;
  font-weight:600 !important;
  font-size:14px !important;
}
.pagination-button.active{background:#039855 !important;color:#fff !important;border-color:#039855 !important;}
.pagination-button:disabled{opacity:.4;}

@media (max-width:700px){
  .blog-post-wrapper{flex-direction:column;}
  .blog-post-wrapper .hl-image-picture{flex-basis:auto;}
  .blog-post-wrapper .hl-image-picture img{min-height:190px;max-height:220px;}
}

/* ---------------------------------------------------------------------
   SINGLE POST (post/*.html)
   --------------------------------------------------------------------- */
/* Fixed aspect-ratio (not height:auto) so the box has a real, non-zero
   size before the image loads — with height:auto + a flex parent the
   box collapses to 0x0 pre-load, and Chromium's native loading="lazy"
   never fires for a zero-area element, so the image never loads at all. */
.blog-cover-image-container{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(16,24,32,.1);
  margin-bottom:32px !important;
  aspect-ratio:16/9;
}
.blog-cover-image-container picture{display:block !important;width:100%;height:100% !important;}
.blog-cover-image-container img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.meta-section-1{margin-bottom:16px;}
.blog-category{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.blog-category a{
  color:#1e6b34 !important;
  background:#e6f4ea;
  padding:5px 12px;
  border-radius:999px;
  text-decoration:none !important;
}
.blog-category a:hover{background:#d7ecdc;}

.blog-content-title{margin:0 0 14px !important;line-height:1.2 !important;}

.blog-author{
  display:inline-flex;
  align-items:center;
  font-size:14.5px;
  text-decoration:none;
  font-weight:600;
}
.blog-author, .blog-author span{color:#57685c !important;}
.blog-author:hover, .blog-author:hover span{color:#1e6b34 !important;}
.blog-read-time{font-size:14px;margin-left:10px;}
.blog-read-time, .blog-read-time span{color:#8a9990 !important;}

.blog-html-container-single{max-width:800px;margin:0 auto;}
.blog-html{
  font-size:17px;
  line-height:1.8;
  color:#38463c;
}
.blog-html h2{
  font-size:24px !important;
  font-weight:700 !important;
  color:#16321f !important;
  margin:38px 0 14px !important;
  line-height:1.3 !important;
}
.blog-html h3{
  font-size:20px !important;
  font-weight:700 !important;
  color:#16321f !important;
  margin:30px 0 12px !important;
}
.blog-html p{margin:0 0 20px;}
.blog-html strong,.blog-html b{color:#1e3a24;font-weight:700;}
.blog-html a{color:#1e6b34;text-decoration:underline;text-decoration-color:#cfe0d2;text-underline-offset:2px;}
.blog-html a:hover{color:#039855;}
.blog-html ul,.blog-html ol{margin:0 0 20px;padding-left:24px;}
.blog-html li{margin-bottom:8px;}
.blog-html img{border-radius:12px;margin:8px 0 24px;}
.blog-html blockquote{
  margin:28px 0;
  padding:18px 24px;
  border-left:4px solid #039855;
  background:#f2f7f1;
  border-radius:0 10px 10px 0;
  font-style:italic;
  color:#38463c;
}

/* tags row (below article body) */
.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 0;padding-top:28px;border-top:1px solid #eef2ee;}
.blog-tags .tag{
  font-size:13px;
  font-weight:600;
  color:#4a5c50;
  background:#f2f7f1;
  border:1px solid #e2ebe3;
  padding:6px 13px;
  border-radius:999px;
  text-decoration:none;
  transition:background .15s,border-color .15s;
}
.blog-tags .tag:hover{background:#e6f4ea;border-color:#cfe0d2;}

/* author bio card */
.blog-author-container{
  display:flex;
  gap:18px;
  align-items:flex-start;
  background:#f8faf8;
  border:1px solid #e7ece7;
  border-radius:16px;
  padding:24px;
  margin:28px 0 0;
}
.blog-author-image-post{
  width:56px !important;
  height:56px !important;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
}
.blog-author-details{flex:1 1 auto;}
.blog-author-details > *:first-child{font-weight:700;color:#16321f;font-size:15.5px;margin:0 0 6px;}
.blog-author-description{font-size:14.5px;line-height:1.65;color:#57685c;margin:0;}
.author-social-icon{width:20px;height:20px;margin-top:10px;opacity:.7;transition:opacity .15s;}
.author-social-icon:hover{opacity:1;}

/* article page wrapper (clean hand-built posts, e.g. post/*.html) */
.otc-article{max-width:1000px;margin:0 auto;padding:56px 20px 8px;}
@media(max-width:640px){.otc-article{padding:36px 16px 4px;}}
.otc-article .blog-content-title{font-family:'Montserrat','Inter',system-ui,sans-serif;font-size:clamp(28px,4.6vw,40px);font-weight:800;color:#16321f;}
.blog-byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 26px;}
.otc-figure{margin:8px 0 26px;}
.otc-figure img{display:block;width:100%;border-radius:12px;margin:0;}
.otc-figure figcaption{margin-top:9px;font-size:14px;color:#8a9990;font-style:italic;text-align:center;}
.otc-article .otc-cta-banner{margin-top:16px;}

/* back to blog / back to top */
.blog-back-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14.5px;
  text-decoration:none;
  margin-top:32px;
}
.blog-back-button, .blog-back-button span{color:#1e6b34 !important;}
.blog-back-button:hover, .blog-back-button:hover span{color:#039855 !important;}