/* =========================================================
   Belina Single Article Template
   ========================================================= */

.belina-article{
  background:#fff;
  color:#111827;
  font-family:Arial, sans-serif;
}

.belina-article-breadcrumb{
  max-width:1120px;
  margin:2.2rem auto 0;
  padding:0 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  align-items:center;
  font-size:.9rem;
  color:#6b7280;
}

.belina-article-breadcrumb a{
  color:#111827;
  text-decoration:none;
  font-weight:700;
}

.belina-article-breadcrumb a:hover{
  text-decoration:underline;
}

.belina-article-shell{
  max-width:1120px;
  margin:0 auto;
  padding:1.5rem 1rem 2rem;
}

.belina-article-hero{
  max-width:860px;
  margin:0 auto 1.6rem;
}

.belina-article-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:.38rem .7rem;
  font-size:.78rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.02em;
}

.belina-article-title{
  margin:.95rem 0 .8rem;
  font-size:clamp(2.25rem,7vw,4.8rem);
  line-height:.95;
  letter-spacing:-.055em;
  font-weight:950;
  color:#111;
}

.belina-article-intro{
  margin:0 0 1.25rem;
  font-size:clamp(1.08rem,2.5vw,1.35rem);
  line-height:1.55;
  color:#374151;
}

.belina-article-meta{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding-top:.9rem;
  border-top:1px solid #e5e7eb;
  color:#4b5563;
}

.belina-article-author-photo img{
  width:56px;
  height:56px;
  border-radius:999px;
  display:block;
}

.belina-article-meta-text{
  display:flex;
  flex-direction:column;
  gap:.12rem;
  font-size:.94rem;
}

.belina-article-meta-text strong{
  color:#111;
  font-weight:900;
}

.belina-article-featured-image{
  max-width:1040px;
  margin:1.7rem auto 2rem;
}

.belina-article-featured-image img{
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:cover;
  border-radius:22px;
  display:block;
}

.belina-article-layout{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:260px minmax(0,760px);
  gap:3rem;
  align-items:start;
}

.belina-article-sidebar{
  position:sticky;
  top:96px;
}

.belina-article-toc{
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:1rem;
  background:#fafafa;
  color:#4b5563;
  font-size:.95rem;
}

.belina-article-toc strong{
  display:block;
  margin-bottom:.35rem;
  color:#111;
  font-weight:900;
}

.belina-article-toc p{
  margin:0;
  line-height:1.55;
}

.belina-article-content{
  font-size:1.08rem;
  line-height:1.78;
  color:#1f2937;
}

.belina-article-content > *:first-child{
  margin-top:0;
}

.belina-article-content h2{
  margin:2.2rem 0 .8rem;
  font-size:clamp(1.7rem,4vw,2.45rem);
  line-height:1.08;
  letter-spacing:-.035em;
  color:#111;
}

.belina-article-content h3{
  margin:1.7rem 0 .65rem;
  font-size:1.45rem;
  line-height:1.2;
  color:#111;
}

.belina-article-content p{
  margin:0 0 1.15rem;
}

.belina-article-content a{
  color:#A26514;
  font-weight:800;
}

.belina-article-content img{
  max-width:100%;
  height:auto;
  border-radius:16px;
}

.belina-article-content blockquote{
  margin:1.7rem 0;
  padding:1rem 1.2rem;
  border-left:4px solid #111;
  background:#f9fafb;
  border-radius:12px;
  color:#111;
}

.belina-article-content ul,
.belina-article-content ol{
  margin:0 0 1.2rem 1.25rem;
  padding:0;
}

.belina-related-articles{
  max-width:1120px;
  margin:2.5rem auto 3rem;
  padding:2rem 1rem 0;
  border-top:1px solid #e5e7eb;
}

.belina-related-head{
  margin-bottom:1rem;
}

.belina-related-head h2{
  margin:0 0 .35rem;
  font-size:2rem;
  line-height:1.1;
  letter-spacing:-.035em;
}

.belina-related-head p{
  margin:0;
  color:#6b7280;
}

.belina-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.belina-related-card{
  border:1px solid #e5e7eb;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}

.belina-related-card a{
  color:inherit;
  text-decoration:none;
  display:block;
  height:100%;
}

.belina-related-image img,
.belina-related-placeholder{
  width:100%;
  height:190px;
  object-fit:cover;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
  font-weight:900;
}

.belina-related-body{
  padding:1rem;
}

.belina-related-body h3{
  margin:.75rem 0 .55rem;
  font-size:1.15rem;
  line-height:1.2;
}

.belina-related-body p{
  margin:0;
  color:#4b5563;
  line-height:1.55;
  font-size:.95rem;
}

@media (max-width:900px){
  .belina-article-layout{
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .belina-article-sidebar{
    position:static;
  }

  .belina-article-toc{
    display:none;
  }

  .belina-related-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .belina-article-breadcrumb{
    font-size:.82rem;
  }

  .belina-article-title{
    font-size:clamp(2rem,6vw,2.5rem);
  }

  .belina-article-meta{
    align-items:flex-start;
  }

  .belina-article-featured-image img{
    border-radius:16px;
  }

  .belina-article-content{
    font-size:1rem;
    line-height:1.72;
  }
}


/* Editorial breadcrumb styling */
.belina-article-breadcrumb a{
  color:#A26514;
  font-weight:700;
  text-decoration:none;
}

.belina-article-breadcrumb a:hover{
  text-decoration:underline;
}

.belina-article-breadcrumb span:last-child{
  color:#9ca3af;
  font-weight:500;
}

/* Refined editorial featured image sizing */
.belina-article-featured-image{
  max-width:720px !important;
  margin:2rem auto 2.5rem !important;
}

.belina-article-featured-image img{
  aspect-ratio:16 / 9;
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  border-radius:18px;
}

/* Mobile keeps fuller width */
@media (max-width: 768px){
  .belina-article-featured-image{
    max-width:100% !important;
    margin:1.5rem auto 2rem !important;
  }

  .belina-article-featured-image img{
    border-radius:14px;
  }
}

/* Article featured image: left aligned on desktop */
.belina-article-featured-image{
  margin-left:0 !important;
  margin-right:auto !important;
}

/* Mobile remains natural/full width */
@media (max-width:768px){
  .belina-article-featured-image{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Align featured image with title/content column */
.belina-article-featured-image{
  width:100%;
  max-width:720px !important;
  margin:2rem 0 2.5rem 0 !important;
}

.belina-article-featured-image img{
  width:100%;
  display:block;
  border-radius:18px;
}

/* Mobile */
@media (max-width:768px){
  .belina-article-featured-image{
    max-width:100% !important;
    margin:1.5rem 0 2rem 0 !important;
  }
}

/* Featured image: align to article hero/title axis on desktop */
@media (min-width: 901px){
  .belina-article-featured-image{
    max-width:720px !important;
    margin-top:2rem !important;
    margin-bottom:2.5rem !important;
    margin-left:calc((100% - 860px) / 2) !important;
    margin-right:auto !important;
  }
}

/* Mobile/tablet keeps normal flow */
@media (max-width:900px){
  .belina-article-featured-image{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Article sidebar widget layout */
.belina-article-layout{
  grid-template-columns:minmax(0,760px) 280px !important;
}

.belina-article-content{
  order:1;
}

.belina-article-sidebar{
  order:2;
}

.belina-article-widget{
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:1rem;
  background:#fafafa;
  margin-bottom:1rem;
}

.belina-article-toc ol{
  margin:.85rem 0 0;
  padding-left:1.1rem;
}

.belina-article-toc li{
  margin:.5rem 0;
  line-height:1.35;
}

.belina-article-toc a{
  color:#111827;
  text-decoration:none;
  font-weight:700;
}

.belina-article-toc a:hover{
  color:#A26514;
  text-decoration:underline;
}

.belina-article-cta p{
  margin:.5rem 0 .85rem;
  color:#4b5563;
  line-height:1.5;
}

.belina-article-cta a{
  display:inline-flex;
  color:#A26514;
  font-weight:900;
  text-decoration:none;
}

.belina-article-cta a:hover{
  text-decoration:underline;
}

@media (max-width:900px){
  .belina-article-layout{
    grid-template-columns:1fr !important;
  }

  .belina-article-sidebar{
    order:1;
  }

  .belina-article-content{
    order:2;
  }

  .belina-article-toc{
    display:block !important;
  }
}

/* Editorial sidebar alignment refinement */
@media (min-width:901px){

  .belina-article-layout{
    align-items:start;
  }

  .belina-article-sidebar{
    padding-top:3.25rem;
  }

  .belina-article-widget{
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
}

/* Mobile/tablet */
@media (max-width:900px){

  .belina-article-sidebar{
    padding-top:0;
  }
}

/* Profile-style two-column article layout */
.belina-article-layout{
  max-width:1120px !important;
  margin:0 auto !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:1.25rem !important;
}

.belina-article-content{
  flex:1 1 720px !important;
  max-width:760px !important;
  min-width:0 !important;
  order:1 !important;
}

.belina-article-sidebar{
  flex:0 0 300px !important;
  max-width:320px !important;
  width:100% !important;
  order:2 !important;
  padding-top:0 !important;
  position:sticky !important;
  top:96px !important;
}

.belina-article-widget{
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:10px !important;
  padding:1rem !important;
  margin-bottom:1rem !important;
  box-shadow:none !important;
}

/* Keep featured image aligned to the article main column */
.belina-article-featured-image{
  max-width:760px !important;
  margin:2rem auto 2rem !important;
}

/* Mobile: stack cleanly */
@media (max-width:900px){
  .belina-article-layout{
    display:flex !important;
    flex-direction:column !important;
    gap:1rem !important;
  }

  .belina-article-content,
  .belina-article-sidebar{
    flex:1 1 100% !important;
    max-width:100% !important;
    width:100% !important;
    order:initial !important;
    position:static !important;
    top:auto !important;
  }

  .belina-article-sidebar{
    margin-top:0 !important;
  }

  .belina-article-featured-image{
    max-width:100% !important;
    margin:1.5rem 0 2rem !important;
  }
}

/* FINAL: featured image belongs inside the main article column */
.belina-article-content .belina-article-featured-image{
  width:100% !important;
  max-width:100% !important;
  margin:0 0 2rem 0 !important;
}

.belina-article-content .belina-article-featured-image img{
  width:100% !important;
  aspect-ratio:16 / 9;
  height:auto !important;
  object-fit:cover;
  display:block;
  border-radius:18px;
}

@media (max-width:900px){
  .belina-article-content .belina-article-featured-image{
    margin:0 0 1.5rem 0 !important;
  }
}

/* Mobile: article content first, widgets below */
@media (max-width:900px){
  .belina-article-content{
    order:1 !important;
  }

  .belina-article-sidebar{
    order:2 !important;
    margin-top:1.5rem !important;
  }
}

/* Final: force article author avatar into a true circle */
.belina-article-meta .belina-article-author-photo{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  display:block !important;
}

.belina-article-meta .belina-article-author-photo img,
.belina-article-meta .belina-article-author-photo .avatar{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Desktop: add breathing room below H1 before meta divider */
@media (min-width:901px){

  .belina-article-title{
    margin-bottom:1.35rem !important;
    line-height:1.08 !important;
  }

  .belina-article-meta{
    padding-top:1.35rem !important;
  }
}

/* Desktop: slightly tighter H1 line spacing */
@media (min-width:901px){

  .belina-article-title{
    line-height:0.98 !important;
    margin-bottom:1.1rem !important;
  }

}

/* Article body: branded square bullet points */
.belina-article-content ul{
  list-style:none !important;
  margin:1rem 0 1.25rem 0 !important;
  padding:0 !important;
}

.belina-article-content ul li{
  position:relative;
  padding-left:1.45rem;
  margin-bottom:.75rem;
  line-height:1.7;
}

.belina-article-content ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:.48rem;
  height:.48rem;
  background:#A26514;
  border-radius:1px;
}

.belina-article-content ol{
  margin:1rem 0 1.25rem 1.35rem !important;
  padding:0 !important;
}

.belina-article-content ol li::marker{
  color:#A26514;
  font-weight:900;
}

/* =========================================================
   Final article hyperlink styling
   - Branded colour
   - Regular font weight
   - No underline
   ========================================================= */

.belina-article-content a{
  color:#A26514 !important;
  font-weight:400 !important;
  text-decoration:none !important;
  transition:color .18s ease;
}

.belina-article-content a:hover{
  color:#8b5710 !important;
  text-decoration:none !important;
}

/* =========================================================
   Article hyperlinks
   - Regular weight
   - Brand colour
   - Underline only on interaction
   ========================================================= */

.belina-article-content a{
  color:#A26514 !important;
  font-weight:400 !important;
  text-decoration:none !important;
  transition:color .18s ease;
}

.belina-article-content a:hover,
.belina-article-content a:focus,
.belina-article-content a:active{
  color:#8b5710 !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}

/* =========================================================
   Desktop article H1 refinement
   Reduce visual scale by ~30%
   Mobile remains unchanged
   ========================================================= */

@media (min-width:901px){

  .belina-article-title{
    font-size:2.8rem !important;
    line-height:1.02 !important;
    letter-spacing:-0.04em !important;
  }

}

/* =========================================================
   Desktop H2 refinement
   Slightly reduce section heading scale
   Mobile remains unchanged
   ========================================================= */

@media (min-width:901px){

  .belina-article-content h2{
    font-size:1.3rem !important;
    line-height:1.2 !important;
  }

}

/* =========================================================
   Revert desktop H2 sizing
   Restore stronger editorial hierarchy
   ========================================================= */

@media (min-width:901px){

  .belina-article-content h2{
    font-size:1.45rem !important;
    line-height:1.2 !important;
  }

}

/* =========================================================
   Desktop H2 refinement
   Slightly larger editorial section headings
   ========================================================= */

@media (min-width:901px){

  .belina-article-content h2{
    font-size:1.58rem !important;
    line-height:1.22 !important;
    letter-spacing:-0.02em !important;
  }

}

/* =========================================================
   Desktop H2 editorial refinement
   Slightly stronger hierarchy
   ========================================================= */

@media (min-width:901px){

  .belina-article-content h2{
    font-size:1.72rem !important;
    line-height:1.24 !important;
    letter-spacing:-0.025em !important;
    margin-top:2.1rem !important;
    margin-bottom:.8rem !important;
  }

}

/* =========================================================
   Article intro / summary refinement
   ========================================================= */

.belina-article-intro{
  font-size:17.28px !important;
  line-height:1.65 !important;
}

/* =========================================================
   Belina Gutenberg Details / FAQ Accordion
   ========================================================= */

.belina-article-content details,
.belina-article-content .wp-block-details{
  border-top:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
  padding:1.05rem 0;
  margin:0 0 1rem;
  background:transparent;
}

.belina-article-content details summary,
.belina-article-content .wp-block-details summary{
  cursor:pointer;
  list-style:none;
  font-size:1.08rem;
  line-height:1.35;
  font-weight:800;
  color:#111827;
  position:relative;
  padding-right:2.5rem;
}

.belina-article-content details summary::-webkit-details-marker,
.belina-article-content .wp-block-details summary::-webkit-details-marker{
  display:none;
}

.belina-article-content details summary::after,
.belina-article-content .wp-block-details summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:#A26514;
  font-size:1.65rem;
  font-weight:700;
  line-height:1;
}

.belina-article-content details[open] summary::after,
.belina-article-content .wp-block-details[open] summary::after{
  content:"−";
}

.belina-article-content details p,
.belina-article-content .wp-block-details p{
  margin:.9rem 0 0;
  color:#4b5563;
  line-height:1.75;
}

.belina-article-content details summary:hover,
.belina-article-content .wp-block-details summary:hover{
  color:#A26514;
}

/* =========================================================
   Belina Details / FAQ Q icon
   ========================================================= */

.belina-article-content details summary,
.belina-article-content .wp-block-details summary{
  padding-left:3.7rem !important;
  min-height:2.2rem;
  display:flex;
  align-items:center;
}

.belina-article-content details summary::before,
.belina-article-content .wp-block-details summary::before{
  content:"Q";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:2.15rem;
  height:2.15rem;
  border-radius:50%;
  background:#A26514;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  font-weight:900;
  line-height:1;
}

@media (max-width:640px){
  .belina-article-content details summary,
  .belina-article-content .wp-block-details summary{
    padding-left:3.1rem !important;
  }

  .belina-article-content details summary::before,
  .belina-article-content .wp-block-details summary::before{
    width:1.9rem;
    height:1.9rem;
    font-size:.85rem;
  }
}

/* =========================================================
   Desktop article body typography refinement
   Closer to modern editorial 20px reading size
   Mobile remains unchanged
   ========================================================= */

@media (min-width:901px){

  .belina-article-content{
    font-size:20px !important;
    line-height:1.78 !important;
  }

}

/* =========================================================
   Desktop article body typography refinement
   Balanced editorial reading size
   Mobile remains unchanged
   ========================================================= */

@media (min-width:901px){

  .belina-article-content{
    font-size:18px !important;
    line-height:1.78 !important;
  }

}

/* =========================================================
   Belina FAQ accordion refinement
   Rounded enclosed cards + chevron dropdown
   ========================================================= */

.belina-article-content details,
.belina-article-content .wp-block-details{
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  padding:0 !important;
  margin:0 0 1rem !important;
  background:#fff !important;
  overflow:hidden !important;
  box-shadow:0 1px 2px rgba(0,0,0,.03) !important;
}

/* Remove old divider styling */
.belina-article-content details + details,
.belina-article-content .wp-block-details + .wp-block-details{
  border-top:none !important;
}

.belina-article-content details summary,
.belina-article-content .wp-block-details summary{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  min-height:78px !important;

  padding:
    1.2rem
    4.2rem
    1.2rem
    4.2rem !important;

  cursor:pointer !important;
  list-style:none !important;

  font-size:1.12rem !important;
  line-height:1.35 !important;
  font-weight:850 !important;
  color:#111827 !important;

  background:#fff !important;
}

/* Hide native marker */
.belina-article-content details summary::-webkit-details-marker,
.belina-article-content .wp-block-details summary::-webkit-details-marker{
  display:none !important;
}

/* Refined Q badge */
.belina-article-content details summary::before,
.belina-article-content .wp-block-details summary::before{
  content:"Q" !important;

  position:absolute !important;
  left:1.2rem !important;
  top:50% !important;
  transform:translateY(-50%) !important;

  width:2.2rem !important;
  height:2.2rem !important;

  border-radius:50% !important;

  background:#A26514 !important;
  color:#fff !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:.92rem !important;
  font-weight:900 !important;
  line-height:1 !important;
}

/* Replace plus with chevron arrow */
.belina-article-content details summary::after,
.belina-article-content .wp-block-details summary::after{
  content:"" !important;

  position:absolute !important;
  right:1.5rem !important;
  top:50% !important;

  width:.72rem !important;
  height:.72rem !important;

  border-right:2px solid #A26514 !important;
  border-bottom:2px solid #A26514 !important;

  transform:
    translateY(-65%)
    rotate(45deg) !important;

  transition:transform .18s ease !important;
}

/* Open state arrow */
.belina-article-content details[open] summary::after,
.belina-article-content .wp-block-details[open] summary::after{
  transform:
    translateY(-35%)
    rotate(225deg) !important;
}

/* Open state divider */
.belina-article-content details[open] summary,
.belina-article-content .wp-block-details[open] summary{
  border-bottom:1px solid #f1f1f1 !important;
}

/* FAQ answer content */
.belina-article-content details p,
.belina-article-content .wp-block-details p{
  margin:0 !important;

  padding:
    1rem
    1.4rem
    1.3rem
    4.2rem !important;

  color:#4b5563 !important;
  font-size:1rem !important;
  line-height:1.75 !important;

  background:#fff !important;
}

/* Hover refinement */
.belina-article-content details summary:hover,
.belina-article-content .wp-block-details summary:hover{
  color:#A26514 !important;
}

/* Mobile refinement */
@media (max-width:640px){

  .belina-article-content details summary,
  .belina-article-content .wp-block-details summary{

    min-height:68px !important;

    padding:
      1rem
      3.4rem
      1rem
      3.4rem !important;

    font-size:1rem !important;
  }

  .belina-article-content details summary::before,
  .belina-article-content .wp-block-details summary::before{
    left:1rem !important;

    width:1.9rem !important;
    height:1.9rem !important;

    font-size:.82rem !important;
  }

  .belina-article-content details p,
  .belina-article-content .wp-block-details p{
    padding:
      .85rem
      1rem
      1.1rem
      3.4rem !important;
  }

  .belina-article-content details summary::after,
  .belina-article-content .wp-block-details summary::after{
    right:1.1rem !important;
  }
}

/* =========================================================
   FAQ card depth refinement
   Subtle lower-edge editorial shadow
   ========================================================= */

.belina-article-content details,
.belina-article-content .wp-block-details{
  box-shadow:
    0 1px 2px rgba(0,0,0,.03),
    0 8px 18px -14px rgba(0,0,0,.22),
    0 2px 0 rgba(0,0,0,.025) !important;

  transition:
    box-shadow .18s ease,
    transform .18s ease !important;
}

/* Slight hover lift */
.belina-article-content details:hover,
.belina-article-content .wp-block-details:hover{
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 12px 24px -16px rgba(0,0,0,.26),
    0 2px 0 rgba(0,0,0,.03) !important;
}

/* =========================================================
   Article sidebar width refinement
   Expand desktop widget column by ~20%
   ========================================================= */

@media (min-width:901px){

  .belina-article-layout{
    max-width:1240px !important;
    gap:1.5rem !important;
  }

  .belina-article-sidebar{
    flex:0 0 360px !important;
    max-width:384px !important;
  }

}

/* =========================================================
   Restore stable Neil Patel-style article layout
   Desktop: article left, widget sidebar right
   Mobile: widgets below article
   ========================================================= */

@media (min-width:901px){

  .belina-article-layout{
    max-width:1120px !important;
    margin:0 auto !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:1.25rem !important;
  }

  .belina-article-content{
    flex:0 1 760px !important;
    max-width:760px !important;
    min-width:0 !important;
    order:1 !important;
  }

  .belina-article-sidebar{
    flex:0 0 300px !important;
    max-width:320px !important;
    width:300px !important;
    order:2 !important;
    position:sticky !important;
    top:96px !important;
  }

}

/* Mobile: article first, sidebar/widgets below */
@media (max-width:900px){

  .belina-article-layout{
    display:flex !important;
    flex-direction:column !important;
    max-width:100% !important;
    gap:1rem !important;
  }

  .belina-article-content{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .belina-article-sidebar{
    order:2 !important;
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:1.5rem !important;
  }

}

/* =========================================================
   Neil Patel-style article spacing refinement
   Desktop only: wider breathing room, stable sidebar
   ========================================================= */

@media (min-width:901px){

  .belina-article-shell{
    max-width:1200px !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .belina-article-layout{
    max-width:1160px !important;
    gap:1.5rem !important;
    flex-wrap:nowrap !important;
  }

  .belina-article-content{
    flex:0 1 790px !important;
    max-width:790px !important;
  }

  .belina-article-sidebar{
    flex:0 0 300px !important;
    max-width:320px !important;
    width:300px !important;
  }

  .belina-article-widget{
    padding:1.25rem 1.25rem !important;
  }

  .belina-article-toc strong{
    font-size:1rem !important;
    margin-bottom:.75rem !important;
  }

  .belina-article-toc ol{
    margin-top:.75rem !important;
    padding-left:1.15rem !important;
  }

  .belina-article-toc li{
    margin:.65rem 0 !important;
    line-height:1.45 !important;
  }

}

/* =========================================================
   Desktop sidebar width refinement
   Wider widget feel without forcing sidebar below article
   ========================================================= */

@media (min-width:901px){

  .belina-article-shell{
    max-width:1280px !important;
  }

  .belina-article-layout{
    max-width:1220px !important;
    gap:1.75rem !important;
    flex-wrap:nowrap !important;
  }

  .belina-article-content{
    flex:0 1 790px !important;
    max-width:790px !important;
  }

  .belina-article-sidebar{
    flex:0 0 340px !important;
    width:340px !important;
    max-width:340px !important;
  }

  .belina-article-widget{
    padding:1.35rem !important;
  }

}

/* =========================================================
   FAQ answer lists: align bullets with FAQ paragraph text
   ========================================================= */

.belina-article-content details ul,
.belina-article-content .wp-block-details ul{
  margin:0 !important;
  padding:1rem 1.4rem 1.3rem 4.2rem !important;
  list-style:none !important;
  background:#fff !important;
}

.belina-article-content details ul li,
.belina-article-content .wp-block-details ul li{
  position:relative !important;
  padding-left:1.35rem !important;
  margin:0 0 .65rem 0 !important;
  color:#4b5563 !important;
  line-height:1.75 !important;
}

.belina-article-content details ul li:last-child,
.belina-article-content .wp-block-details ul li:last-child{
  margin-bottom:0 !important;
}

.belina-article-content details ul li::before,
.belina-article-content .wp-block-details ul li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.78em !important;
  width:.42rem !important;
  height:.42rem !important;
  background:#A26514 !important;
  border-radius:1px !important;
}

@media (max-width:640px){
  .belina-article-content details ul,
  .belina-article-content .wp-block-details ul{
    padding:.85rem 1rem 1.1rem 3.4rem !important;
  }
}

/* =========================================================
   Editorial Table of Contents widget
   Neil Patel-inspired Belina styling
   ========================================================= */

.belina-article-toc{
  border-radius:14px !important;
  border:1px solid #e5e7eb !important;
  background:#fff !important;
  padding:1.35rem 1.35rem 1.2rem !important;
}

.belina-toc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.85rem;
  border-bottom:2px solid #A26514;
  margin-bottom:1rem;
}

.belina-toc-head strong{
  margin:0 !important;
  font-size:1.2rem !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#111827 !important;
}

.belina-toc-share{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-shrink:0;
}

.belina-toc-share span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.35rem;
  height:1.35rem;
  font-size:.78rem;
  line-height:1;
  font-weight:900;
  color:#111827;
}

.belina-article-toc > strong{
  display:none !important;
}

.belina-article-toc ol{
  list-style:none !important;
  counter-reset:none !important;
  margin:0 !important;
  padding:0 !important;
}

.belina-article-toc li{
  position:relative !important;
  margin:0 0 .75rem !important;
  padding-left:1.25rem !important;
  line-height:1.45 !important;
}

.belina-article-toc li:last-child{
  margin-bottom:0 !important;
}

.belina-article-toc li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.56em !important;
  width:.45rem !important;
  height:.45rem !important;
  background:#A26514 !important;
  border-radius:1px !important;
}

.belina-article-toc a{
  color:#4b5563 !important;
  font-size:.95rem !important;
  font-weight:500 !important;
  text-decoration:none !important;
  transition:color .18s ease;
}

.belina-article-toc a:hover,
.belina-article-toc a:focus{
  color:#A26514 !important;
  text-decoration:none !important;
}

/* Mobile: keep TOC clean when widgets stack below article */
@media (max-width:900px){
  .belina-toc-share{
    display:none !important;
  }

  .belina-toc-head strong{
    font-size:1.1rem !important;
  }
}

/* =========================================================
   TOC typography refinement
   Match tighter editorial sidebar sizing
   ========================================================= */

.belina-article-toc a{
  font-size:14px !important;
  line-height:1.5 !important;
}


/* =========================================================
   Clean desktop sidebar widening
   Wider widget column, article column shifts left naturally
   Mobile remains stacked
   ========================================================= */

@media (min-width:1100px){

  .belina-article-shell{
    max-width:1320px !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .belina-article-layout{
    max-width:1260px !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    gap:2rem !important;
  }

  .belina-article-content{
    flex:0 1 790px !important;
    max-width:790px !important;
    min-width:0 !important;
    order:1 !important;
  }

  .belina-article-sidebar{
    flex:0 0 390px !important;
    width:390px !important;
    max-width:390px !important;
    order:2 !important;
    position:sticky !important;
    top:96px !important;
  }

  .belina-article-widget{
    width:100% !important;
    box-sizing:border-box !important;
  }

}

/* Tablet/smaller desktop: keep stable previous layout */
@media (min-width:901px) and (max-width:1099px){

  .belina-article-layout{
    flex-wrap:nowrap !important;
  }

  .belina-article-sidebar{
    flex:0 0 300px !important;
    width:300px !important;
    max-width:320px !important;
  }

}

/* Mobile: widgets remain below article */
@media (max-width:900px){

  .belina-article-layout{
    flex-direction:column !important;
  }

  .belina-article-content{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .belina-article-sidebar{
    order:2 !important;
    position:static !important;
    width:100% !important;
    max-width:100% !important;
  }

}

/* Symmetrical desktop article layout margins */
@media (min-width:1100px){

  .belina-article-layout{
    margin-left:auto !important;
    margin-right:auto !important;
    justify-content:center !important;
  }

}

/* =========================================================
   Editorial TOC surface refinement
   ========================================================= */

.belina-article-toc{
  background:#f9fafb !important;
  border:1px solid #ebeef0 !important;
}


/* =========================================================
   TOC social icon sizing refinement
   ========================================================= */

.belina-toc-share{
  gap:.7rem !important;
}

.belina-toc-share span{
  min-width:1.7rem !important;
  height:1.7rem !important;
  font-size:1rem !important;
  line-height:1 !important;
}


/* Clean SVG social icons inside TOC */
.belina-toc-share span{
  width:1.85rem !important;
  height:1.85rem !important;
  min-width:1.85rem !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.belina-toc-share svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
  fill:#111827 !important;
}

.belina-toc-share span:hover svg{
  fill:#A26514 !important;
}

/* =========================================================
   TOC social icon refinement
   Slightly larger + tighter grouping
   ========================================================= */

.belina-toc-share{
  gap:.28rem !important;
}

.belina-toc-share span{
  width:2rem !important;
  height:2rem !important;
  min-width:2rem !important;
}

.belina-toc-share svg{
  width:20px !important;
  height:20px !important;
}


/* =========================================================
   TOC social icons
   Ultra-tight editorial grouping
   ========================================================= */

.belina-toc-share{
  gap:.08rem !important;
}

.belina-toc-share span{
  margin:0 !important;
  padding:0 !important;
}


/* =========================================================
   TOC social icons
   Compact premium inline grouping
   ========================================================= */

.belina-toc-share{
  gap:0 !important;
}

.belina-toc-share span{
  width:1.72rem !important;
  min-width:1.72rem !important;
  margin:0 -1px !important;
}


/* TOC social links */
.belina-toc-share a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
}

.belina-toc-share a svg{
  transition:fill .18s ease, transform .18s ease !important;
}

.belina-toc-share a:hover svg{
  fill:#A26514 !important;
  transform:translateY(-1px);
}

/* Breadcrumb home icon */
.belina-article-breadcrumb .belina-breadcrumb-home{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#A26514 !important;
  text-decoration:none !important;
}

.belina-article-breadcrumb .belina-breadcrumb-home svg{
  width:17px !important;
  height:17px !important;
  display:block !important;
}

/* =========================================================
   Breadcrumb home icon hover refinement
   ========================================================= */

.belina-article-breadcrumb .belina-breadcrumb-home{
  transition:
    color .18s ease,
    transform .18s ease,
    opacity .18s ease !important;
}

.belina-article-breadcrumb .belina-breadcrumb-home:hover{
  color:#c17b1c !important;
  opacity:.92 !important;
  transform:translateY(-1px) !important;
}

.belina-article-breadcrumb .belina-breadcrumb-home:hover svg{
  filter:drop-shadow(0 1px 2px rgba(162,101,20,.18));
}


/* Align blog breadcrumbs with the main article content column */
@media (min-width:1100px){
  .belina-article-breadcrumb{
    max-width:1260px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:24px !important;
    padding-right:24px !important;
    box-sizing:border-box !important;
  }
}

@media (min-width:1100px){
  .belina-article-breadcrumb{
    transform:translateX(0) !important;
  }
}

@media (max-width:1099px){
  .belina-article-breadcrumb{
    padding-left:1rem !important;
    padding-right:1rem !important;
  }
}

/* =========================================================
   Breadcrumb vertical spacing refinement
   Drop breadcrumbs lower into article flow
   ========================================================= */

.belina-article-breadcrumb{
  margin-top:1.8rem !important;
  margin-bottom:1.8rem !important;
}

@media (max-width:900px){
  .belina-article-breadcrumb{
    margin-top:1.25rem !important;
    margin-bottom:1.25rem !important;
  }
}


/* =========================================================
   Revert breadcrumb spacing back to previous layout
   ========================================================= */

.belina-article-breadcrumb{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

@media (max-width:900px){
  .belina-article-breadcrumb{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
}


/* =========================================================
   Header → breadcrumb breathing room
   Subtle spacing for desktop + mobile
   ========================================================= */

.belina-article-breadcrumb{
  padding-top:.85rem !important;
}

@media (max-width:900px){
  .belina-article-breadcrumb{
    padding-top:.65rem !important;
  }
}


/* =========================================================
   Extra subtle breadcrumb spacing refinement
   ========================================================= */

.belina-article-breadcrumb{
  padding-top:1.15rem !important;
}

@media (max-width:900px){
  .belina-article-breadcrumb{
    padding-top:.9rem !important;
  }
}


/* =========================================================
   Sidebar CTA widgets
   Match Table of Contents visual style
   ========================================================= */

.belina-article-sidebar .belina-article-cta{
  background:#f9fafb !important;
  border:1px solid #ebeef0 !important;
  border-radius:14px !important;
  padding:1.35rem !important;
  box-shadow:none !important;
}

.belina-article-sidebar .belina-article-cta strong{
  display:block !important;
  font-size:1.02rem !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#111827 !important;
  padding-bottom:.85rem !important;
  margin-bottom:1rem !important;
  border-bottom:2px solid #A26514 !important;
}

.belina-article-sidebar .belina-article-cta p{
  color:#4b5563 !important;
  font-size:14px !important;
  line-height:1.6 !important;
  margin:0 0 1rem !important;
}

.belina-article-sidebar .belina-article-cta a{
  color:#A26514 !important;
  font-size:14px !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

.belina-article-sidebar .belina-article-cta a:hover{
  color:#8b5710 !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}

/* =========================================================
   Need Help widget CTA button refinement
   ========================================================= */

.belina-article-sidebar .belina-article-cta:first-of-type a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:44px !important;

  padding:.78rem 1rem !important;
  border-radius:10px !important;

  background:#A26514 !important;
  border:1px solid #A26514 !important;

  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}

.belina-article-sidebar .belina-article-cta:first-of-type a:hover{
  background:#8b5710 !important;
  border-color:#8b5710 !important;
  color:#fff !important;
  text-decoration:none !important;

  transform:translateY(-1px) !important;

  box-shadow:
    0 6px 14px -8px rgba(162,101,20,.45) !important;
}


/* =========================================================
   Need Help widget button selector fix
   TOC is the first div, Need Help CTA is the second div
   ========================================================= */

.belina-article-sidebar > .belina-article-cta:nth-of-type(2) a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:.78rem 1rem !important;
  border-radius:10px !important;
  background:#A26514 !important;
  border:1px solid #A26514 !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

.belina-article-sidebar > .belina-article-cta:nth-of-type(2) a:hover{
  background:#8b5710 !important;
  border-color:#8b5710 !important;
  color:#fff !important;
  text-decoration:none !important;
  transform:translateY(-1px) !important;
  box-shadow:0 6px 14px -8px rgba(162,101,20,.45) !important;
}

/* =========================================================
   Need Help button icon refinement
   Add support/help flag icon before text
   ========================================================= */

.belina-article-sidebar > .belina-article-cta:nth-of-type(2) a::before{
  content:"⚑" !important;

  display:inline-block !important;

  margin-right:.5rem !important;

  font-size:15px !important;
  line-height:1 !important;

  transform:translateY(-.5px) !important;

  color:#fff !important;
}

.belina-article-sidebar > .belina-article-cta:nth-of-type(2) a{
  gap:.1rem !important;
}


/* =========================================================
   Need Help button
   Flat SVG icon styling
   ========================================================= */

.belina-help-btn-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:16px !important;
  height:16px !important;

  margin-right:.5rem !important;

  color:#fff !important;

  flex-shrink:0 !important;
}

.belina-help-btn-icon svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
}

.belina-article-sidebar > .belina-article-cta:nth-of-type(2) a::before{
  content:none !important;
}


/* Need Help button: profile-style flat flag icon */
.belina-help-btn-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  height:16px !important;
  margin-right:.5rem !important;
  color:#fff !important;
  flex-shrink:0 !important;
}

.belina-help-btn-icon svg{
  width:16px !important;
  height:16px !important;
  display:block !important;
}

.belina-article-sidebar > .belina-article-cta:nth-of-type(2) a::before{
  content:none !important;
}

/* =========================================================
   Help widget depth refinement
   Subtle editorial shadow
   ========================================================= */

.belina-article-sidebar > .belina-article-cta:nth-of-type(2){
  box-shadow:
    0 1px 2px rgba(0,0,0,.03),
    0 10px 22px -18px rgba(0,0,0,.28),
    0 2px 0 rgba(0,0,0,.02) !important;

  transition:
    box-shadow .18s ease,
    transform .18s ease !important;
}

.belina-article-sidebar > .belina-article-cta:nth-of-type(2):hover{
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 16px 30px -20px rgba(0,0,0,.32),
    0 2px 0 rgba(0,0,0,.025) !important;

  transform:translateY(-1px) !important;
}


/* =========================================================
   Help widget shadow refinement
   Static subtle depth only
   ========================================================= */

.belina-article-sidebar > .belina-article-cta:nth-of-type(2){
  box-shadow:
    0 1px 2px rgba(0,0,0,.03),
    0 10px 22px -18px rgba(0,0,0,.28),
    0 2px 0 rgba(0,0,0,.02) !important;

  transition:none !important;
  transform:none !important;
}

.belina-article-sidebar > .belina-article-cta:nth-of-type(2):hover{
  box-shadow:
    0 1px 2px rgba(0,0,0,.03),
    0 10px 22px -18px rgba(0,0,0,.28),
    0 2px 0 rgba(0,0,0,.02) !important;

  transition:none !important;
  transform:none !important;

/* =========================================================
   Sidebar Guides widget
   Assigned posts list
   ========================================================= */

.belina-guides-widget .belina-guides-list{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

.belina-guides-widget .belina-guides-list li{
  position:relative !important;
  padding-left:1rem !important;
  margin:0 0 .75rem !important;
  line-height:1.45 !important;
}

.belina-guides-widget .belina-guides-list li:last-child{
  margin-bottom:0 !important;
}

.belina-guides-widget .belina-guides-list li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.55em !important;
  width:.42rem !important;
  height:.42rem !important;
  background:#A26514 !important;
  border-radius:1px !important;
}

.belina-guides-widget .belina-guides-list a{
  color:#4b5563 !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  text-decoration:none !important;
}

.belina-guides-widget .belina-guides-list a:hover{
  color:#A26514 !important;
  text-decoration:none !important;
}


/* =========================================================
   Desktop sidebar sticky
   Pure CSS, browser scroll only
   ========================================================= */

@media (min-width:1100px){

  .belina-article,
  .belina-article-shell,
  .belina-article-layout,
  .belina-article-sidebar{
    overflow:visible !important;
  }

  .belina-article-layout{
    align-items:stretch !important;
  }

  .belina-article-content{
    align-self:flex-start !important;
  }

  .belina-article-sidebar{
    position:relative !important;
    align-self:stretch !important;
  }

  .belina-article-sidebar-inner{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:110px !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

}

@media (max-width:1099px){
  .belina-article-sidebar-inner{
    position:static !important;
    top:auto !important;
  }
}

/* =========================================================
   Sticky sidebar conflict fix
   Disable old sidebar-level sticky, keep inner wrapper sticky
   ========================================================= */

@media (min-width:1100px){

  .belina-article-sidebar{
    position:relative !important;
    top:auto !important;
    align-self:stretch !important;
    overflow:visible !important;
  }

  .belina-article-sidebar-inner{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:110px !important;
    max-height:none !important;
    overflow:visible !important;
  }

}

/* =========================================================
   Final direct desktop sticky sidebar
   Sidebar rail sticks with normal browser scroll
   ========================================================= */

@media (min-width:1100px){

  .belina-article,
  .belina-article-shell,
  .belina-article-layout{
    overflow:visible !important;
  }

  .belina-article-layout{
    align-items:flex-start !important;
  }

  .belina-article-sidebar{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:110px !important;
    align-self:flex-start !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    z-index:10 !important;
  }

  .belina-article-sidebar-inner{
    position:static !important;
    top:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

}

@media (max-width:1099px){

  .belina-article-sidebar,
  .belina-article-sidebar-inner{
    position:static !important;
    top:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

}