/* ==========================================================================
   JC Batteries — Blog & FAQ page styling
   Reskinned to a LIGHT theme to match the live site's actual look
   (the reference HTML mockups you sent use a dark palette — this version
   swaps that for the site's real white/green/navy brand instead).

   IMPORTANT: the color values used directly in the declarations below are
   close estimates read from screenshots of the live site, NOT pulled from
   its actual CSS (that lives in Elementor's generated stylesheet).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

.jc-container{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

*{box-sizing:border-box !important;}

.jcb-hero, .jcf-banner, .jcf-pack-wrap, .jcf-wrap, .jcb-grid-wrap, .jcb-section-head{
  font-family: 'Poppins', sans-serif !important;
}
.jcb-hero *, .jcf-banner *, .jcf-pack-wrap *, .jcf-wrap *, .jcb-grid-wrap *, .jcb-section-head *{
  font-family: inherit !important;
}

/* ---------- shared type ---------- */
.jcb-hero h1, .jcf-banner h1{
  font-size: clamp(34px, 5vw, 58px) !important;
  line-height: 1.12 !important;
  margin: 14px 0 0 !important;
  color: #14213D !important;
  font-weight: 700 !important;
}
.jcf-banner h1{ color: #fff !important; }
.jcb-hero h1 em, .jcf-banner h1 em{
  font-style: normal !important;
  color: #7CB93B !important;
}
.jcb-hero p{
  margin-top: 18px !important;
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  color: #6B7280 !important;
  font-weight:500!important;
  max-width: 62ch !important;
}
.jcb-eyebrow{
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #7CB93B !important;
  font-weight: 600 !important;
}

/* ---------- blog hero / section head ---------- */
.jcb-hero{ padding: 56px 24px 32px !important; }
.jcb-section-head{
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  padding: 32px 24px 20px !important;
  border-bottom: 1px solid #E7E9EC !important;
}
.jcb-section-head h2{
  font-size: 33px !important;
  margin: 0 !important;
  color: #14213D !important;
  font-weight:600 !important;
}
.jcb-count{
  font-size: 12px !important;
  color: #6B7280 !important;
  letter-spacing: 0.04em !important;
}

/* ---------- blog grid ---------- */
.jcb-grid-wrap{ padding: 0 24px 80px !important; }
.jcb-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 24px !important;
}
@media (max-width: 980px){ .jcb-grid{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px){ .jcb-grid{ grid-template-columns: 1fr !important; } }

.jcb-card{
  background: #FFFFFF !important;
  border: 1px solid #E7E9EC !important;
  border-radius: 10px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}
.jcb-card:hover{
  box-shadow: 0 10px 30px rgba(20,33,61,0.08) !important;
  border-color: #D6D9DE !important;
  transform: translateY(-2px) !important;
}
.jcb-card.featured{ grid-column: span 2 !important; }
@media (max-width: 640px){ .jcb-card.featured{ grid-column: span 1 !important; } }

.jcb-thumb{
  margin: -24px -24px 18px !important;
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
  aspect-ratio: 16/9 !important;
}
.jcb-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.jcb-tag{
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  border: 1px solid #D6D9DE !important;
  border-radius: 999px !important;
  color: #7CB93B !important;
  width: fit-content !important;
  margin-bottom: 14px !important;
  font-weight: 600 !important;
}

.jcb-card h3{
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight:600 !important;
  margin: 0 0 10px !important;
  color: #14213D !important;
}
.jcb-card.featured h3{ font-size: 26px !important; }
.jcb-card h3 a{ color: inherit !important; text-decoration: none !important; }
.jcb-card h3 a:hover{ color: #7CB93B !important; }

.jcb-card p{
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #6B7280 !important;
  margin: 0 0 16px !important;
  font-weight:500 !important;
}

.jcb-meta{
  font-size: 12px !important;
  color: #6B7280 !important;
  font-weight:500!important;
  margin-bottom: 14px !important;
}

.jcb-read{
  margin-top: auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #7CB93B !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.jcb-read .jcb-arrow{ transition: transform .15s ease !important; }
.jcb-card:hover .jcb-read .jcb-arrow{ transform: translateX(4px) !important; }

.jcb-empty{ color: #6B7280 !important; padding: 40px 0 !important; }

/* ---------- pagination ---------- */
.jcb-pagination{ margin-top: 48px !important; display: flex !important; justify-content: center !important; }
.jcb-pagination ul{
  display: flex !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}
.jcb-pagination a, .jcb-pagination span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid #E7E9EC !important;
  border-radius: 6px !important;
  color: #14213D !important;
  text-decoration: none !important;
  font-size: 13px !important;
}
.jcb-pagination a:hover{ border-color: #7CB93B !important; color: #7CB93B !important; }
.jcb-pagination span.current{
  background: #7CB93B !important;
  border-color: #7CB93B !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* ---------- faq banner ---------- */
.jcf-banner{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 70px 0 64px !important;
  position: relative !important;
}
.jcf-banner-inner{ position: relative !important; z-index: 1 !important; }
.jcf-breadcrumb{
  font-size: 13px !important;
  color: rgba(255,255,255,0.8) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.jcf-breadcrumb a{ color: rgba(255,255,255,0.8) !important; text-decoration: none !important; }
.jcf-breadcrumb a:hover{ color: #fff !important; }
.jcf-breadcrumb span:last-child{ color: #7CB93B !important; font-weight: 600 !important; }
.jcf-banner p{
  margin-top: 16px !important;
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.86) !important;
  max-width: 62ch !important;
}

/* ---------- faq category filter ---------- */
.jcf-pack-wrap{
  background: #FFFFFF !important;
  border-bottom: 1px solid #E7E9EC !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}
.jcf-pack{
  display: flex !important;
  gap: 10px !important;
  padding: 18px 24px !important;
  flex-wrap: wrap !important;
}
.jcf-btn{
  background: #F5F7F8 !important;
  border: 1px solid #D6D9DE !important;
  color: #6B7280 !important;
  font-family: 'Poppins'!important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.jcf-btn:hover{ color: #14213D !important; border-color: #7CB93B !important; }
.jcf-btn.active{
  color: #fff !important;
  background: #7CB93B !important;
  border-color: #7CB93B !important;
  box-shadow: 0 6px 16px rgba(124,185,59,0.35) !important;
}

/* ---------- faq list ---------- */
.jcf-wrap{ padding: 48px 24px 90px !important; }
.jcf-group + .jcf-group{ margin-top: 40px !important; }
.jcf-group-title{
  font-size: 18px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #7CB93B !important;
  margin-bottom: 16px !important;
  font-weight: 700 !important;
}

.jcf-item{
  background: #FFFFFF !important;
  border: 1px solid #E7E9EC !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  transition: box-shadow .2s ease, border-color .2s ease !important;
}
.jcf-item:hover{ border-color: #D6D9DE !important; box-shadow: 0 10px 30px rgba(20,33,61,0.07) !important; }
.jcf-item.open{ border-color: #7CB93B !important; box-shadow: 0 18px 45px rgba(20,33,61,0.12) !important; }

.jcf-q{
  width: 100% !important;
  background: none !important;
  border: none !important;
  color: #14213D !important;
  text-align: left !important;
  padding: 20px 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  cursor: pointer !important;
  font-family: 'Poppins'!important;
}
.jcf-terminal{
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #F5F7F8 !important;
  border: 1px solid #D6D9DE !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  color: #7CB93B !important;
  transition: transform .2s ease, background .2s ease, color .2s ease !important;
}
.jcf-item.open .jcf-terminal{
  background: #7CB93B !important;
  color: #fff !important;
  border-color: #7CB93B !important;
  transform: rotate(45deg) !important;
}
.jcf-qtext{ font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; }
.jcf-item.open .jcf-qtext{ color: #7CB93B !important; }

.jcf-a{
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height .28s ease !important;
}
.jcf-item.open .jcf-a{ max-height: 300px !important; }
.jcf-a-inner{
  padding: 0 22px 22px 68px !important;
  color: #000 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  max-width: 100% !important;
}

@media (max-width: 640px){
  .jcf-banner{ padding: 50px 0 44px !important; }
  .jcf-a-inner{ padding-left: 22px !important; }
}

@media (prefers-reduced-motion: reduce){
  .jcf-a, .jcf-terminal, .jcb-card, .jcf-item{ transition: none !important; }
}

/* ==========================================================================
   Single blog post (single.php)
   ========================================================================== */
.jcs-article{ font-family: 'Poppins'!important; }
.jcs-article *{ font-family: inherit !important; }

.jcs-banner{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 64px 0 56px !important;
}
.jcs-banner .jcb-tag{
  margin-bottom: 16px !important;
}
.jcs-banner h1{
  color: #fff !important;
  font-size: clamp(28px, 4.2vw, 46px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  max-width: 26ch !important;
}
.jcs-meta{
  margin-top: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight:500!important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.75) !important;
}
.jcs-meta-dark{ color: #6B7280 !important; }

.jcs-header-noimg{ padding: 56px 24px 0 !important; }
.jcs-header-noimg .jcf-breadcrumb{ color: #6B7280 !important; }
.jcs-header-noimg .jcf-breadcrumb a{ color: #6B7280 !important; }
.jcs-header-noimg .jcf-breadcrumb span:last-child{ color: #7CB93B !important; }
.jcs-title-noimg{
  font-size: clamp(28px, 4.2vw, 46px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  color: #14213D !important;
  margin: 16px 0 0 !important;
  max-width: 100% !important;
}

/* two-column layout: content + sidebar */
.jcs-layout{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 48px !important;
  padding: 48px 24px 90px !important;
  align-items: start !important;
}
@media (max-width: 900px){
  .jcs-layout{ grid-template-columns: 1fr !important; padding: 36px 24px 70px !important; }
}

.jcs-content{
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #1C1F26 !important;
}
.jcs-content p{ margin: 0 0 20px !important; }
.jcs-content h2{
  font-size: 24px !important;
  color: #14213D !important;
  margin: 40px 0 16px !important;
  font-weight: 700 !important;
}
.jcs-content h3{
  font-size: 19px !important;
  color: #14213D !important;
  margin: 32px 0 14px !important;
  font-weight: 600 !important;
}
.jcs-content img{
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  margin: 12px 0 24px !important;
}
.jcs-content ul, .jcs-content ol{ margin: 0 0 20px !important; padding-left: 22px !important; }
.jcs-content li{ margin-bottom: 8px !important; }
.jcs-content a{ color: #7CB93B !important; text-decoration: underline !important; }
.jcs-content blockquote{
  margin: 28px 0 !important;
  padding: 18px 24px !important;
  border-left: 3px solid #7CB93B !important;
  background: #F5F7F8 !important;
  border-radius: 0 12px 12px 0 !important;
  color: #6B7280 !important;
  font-style: italic !important;
}
.jcs-pagelinks{ margin-top: 24px !important; display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.jcs-comments{ margin-top: 48px !important; border-top: 1px solid #E7E9EC !important; padding-top: 32px !important; }

/* sidebar */
.jcs-sidebar{ display: flex !important; flex-direction: column !important; gap: 28px !important; }
.jcs-widget{
  background: #FFFFFF !important;
  border: 1px solid #E7E9EC !important;
  border-radius: 12px !important;
  padding: 22px !important;
}
.jcs-widget h3{
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #14213D !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #E7E9EC !important;
}

.jcs-related-list{ list-style: none !important; margin: 0 !important; padding: 0 !important; }
.jcs-related-list li + li{ margin-top: 14px !important; padding-top: 14px !important; border-top: 1px solid #E7E9EC !important; }
.jcs-related-item{
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  text-decoration: none !important;
}
.jcs-related-thumb{
  flex: 0 0 auto !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: block !important;
}
.jcs-related-thumb img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.jcs-related-text{ display: flex !important; flex-direction: column !important; gap: 4px !important; }
.jcs-related-title{
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #14213D !important;
}
.jcs-related-item:hover .jcs-related-title{ color: #7CB93B !important; }
.jcs-related-date{ font-size: 11.5px !important; color: #6B7280 !important; }
.jcs-empty-sidebar{ font-size: 13px !important; color: #6B7280 !important; margin: 0 !important; }

.jcs-cat-list{ list-style: none !important; margin: 0 !important; padding: 0 !important; }
.jcs-cat-list li + li{ margin-top: 8px !important; }
.jcs-cat-list a{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight:600!important;
  color: #1C1F26 !important;
  text-decoration: none !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  transition: background .15s ease, color .15s ease !important;
}
.jcs-cat-list a:hover{ background: #F5F7F8 !important; color: #7CB93B !important; }
.jcs-cat-list a span{
  font-size: 11px !important;
  color: #6B7280 !important;
  background: #F5F7F8 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
}

/* .jcs-widget-cta{
  background: #14213D !important;
  border-color: #14213D !important;
}
.jcs-widget-cta h3{ color: #fff !important; border-bottom-color: rgba(255,255,255,0.15) !important; }
.jcs-widget-cta p{ color: rgba(255,255,255,0.75) !important; font-size: 13.5px !important; line-height: 1.6 !important; margin: 0 0 16px !important; }
.jcs-widget-cta .jcf-cta-btn{
  display: inline-block !important;
  width: 100% !important;
  text-align: center !important;
} */