/* =========================================================
   SG_ARTICLE_DESIGN_V1 (2026-10-19)
   Animated design for every Blog Master article.
   Works on top of blog.css and uses the same theme colours
   (--bm-navy, --bm-gold, --bm-cream, --bm-line).
   Only the written article content (.bm-content) is touched.
   Reading text keeps one font and one size from blog.css.
   ========================================================= */

.bm-content>:first-child,
.bm-content>.sg-sec:first-child>:first-child{margin-top:0!important}

/* ---------- Scroll reveal (only after the script confirms motion is OK) ---------- */
.bm-content.sg-anim .sg-sec{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.bm-content.sg-anim .sg-sec.is-in{opacity:1;transform:none}

/* ---------- H2: gold bar that grows over the existing underline ---------- */
.bm-content h2{position:relative;scroll-margin-top:110px}
.bm-content h2::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:72px;background:var(--bm-gold,#d7aa2e);border-radius:2px}
.bm-content.sg-anim .sg-sec h2::after{width:0;transition:width .8s ease .25s}
.bm-content.sg-anim .sg-sec.is-in h2::after{width:72px}
.bm-content h3{scroll-margin-top:110px}

/* ---------- Bullets: soft cream cards, keeping the site's gold dot ---------- */
.bm-content ul.sg-bullets>li{margin:0 0 10px;padding:11px 16px 11px 2.5em;background:var(--bm-cream,#f6f0e5);border:1px solid var(--bm-line,#e3dac7);border-left:3px solid var(--bm-gold,#d7aa2e);border-radius:0 12px 12px 0}
.bm-content ul.sg-bullets>li:before{left:.95em;top:1.15em}
.bm-content.sg-anim ul.sg-bullets>li{opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .5s ease;transition-delay:var(--sg-d,0s)}
.bm-content.sg-anim .sg-sec.is-in ul.sg-bullets>li{opacity:1;transform:none}

/* ---------- Numbered steps: site's navy circles joined by a timeline ---------- */
.bm-content ol.sg-steps>li{padding-bottom:.55em}
.bm-content ol.sg-steps>li:after{content:"";position:absolute;left:.92em;top:2.15em;bottom:-.55em;width:2px;background:var(--bm-line,#e3dac7)}
.bm-content ol.sg-steps>li:last-child:after{display:none}
.bm-content.sg-anim ol.sg-steps>li:before{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:var(--sg-d,0s)}
.bm-content.sg-anim .sg-sec.is-in ol.sg-steps>li:before{transform:scale(1)}

/* ---------- FAQ cards ---------- */
.bm-content .sg-faq{margin:0 0 14px;padding:4px 20px 2px;background:#fff;border:1px solid var(--bm-line,#e3dac7);border-radius:14px;transition:box-shadow .3s ease,transform .3s ease}
.bm-content .sg-faq:hover{box-shadow:0 12px 28px rgba(8,47,59,.10);transform:translateY(-2px)}
.bm-content .sg-faq h3{position:relative;margin:.75em 0 .45em;padding-left:38px}
.bm-content .sg-faq h3:before{content:"?";position:absolute;left:0;top:.12em;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--bm-gold,#d7aa2e);color:var(--bm-navy,#082f3b);font:800 15px/1 "DM Sans",sans-serif}
.bm-content .sg-faq p:last-child{margin-bottom:1em}

/* ---------- "Written by" line inside the content ---------- */
.bm-content .sg-author{display:flex;align-items:center;gap:12px;margin-top:2em;padding-top:1em;border-top:1px solid var(--bm-line,#e3dac7)}
.bm-content .sg-author:before{content:"";flex:0 0 40px;height:40px;border-radius:50%;background:var(--bm-navy,#082f3b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d7aa2e'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 2c-4.4 0-8 2.2-8 5v2h16v-2c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") center/22px no-repeat}

/* ---------- Closing call to action (uses the site's gold button) ---------- */
.bm-content .sg-cta-wrap{margin:.2em 0 1.6em}
.bm-content a.sg-cta{position:relative;overflow:hidden;text-decoration:none}
.bm-content a.sg-cta:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:sgShine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes sgShine{0%,60%{left:-60%}100%{left:130%}}

/* ---------- Links in the reading text ---------- */
.bm-content p a:not(.sg-cta),.bm-content li a{text-decoration:underline;text-decoration-color:rgba(215,170,46,.55);text-underline-offset:3px;text-decoration-thickness:2px;transition:text-decoration-color .2s ease}
.bm-content p a:not(.sg-cta):hover,.bm-content li a:hover{text-decoration-color:var(--bm-gold,#d7aa2e)}

/* ---------- No motion for visitors who ask for less ---------- */
@media (prefers-reduced-motion:reduce){
  .bm-content *,.bm-content *:before,.bm-content *:after{animation:none!important;transition:none!important}
}