/* ============================================================
   SodaSlim Blog - Dedicated Blog Stylesheet
   Palette: Teal / Coral / Cream (soda-bubble theme)
   Type: Sora (display) + DM Sans (body)
   Drop this into /blog/assets/css/ alongside the existing site.
   Self-contained: does not require the main site's stylesheet.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --teal:#0E7C7B;
  --teal-deep:#0A5958;
  --teal-light:#5FBFBD;
  --coral:#FF6B5B;
  --coral-deep:#E14F3F;
  --cream:#FBF6EE;
  --ice:#FFFCF7;
  --ink:#122623;
  --text:#122623;
  --body:#4B5B58;
  --muted:#8A9794;
  --line:rgba(18,38,35,.1);
  --white:#ffffff;
  --font-display:'Sora',sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --grad-teal:linear-gradient(135deg,#0A5958 0%,#5FBFBD 100%);
  --grad-coral:linear-gradient(135deg,#E14F3F 0%,#FF8A7A 100%);
  --grad-dark:linear-gradient(160deg,#0A1816 0%,#122623 100%);
  --shadow-sm:0 2px 10px rgba(18,38,35,.08);
  --shadow:0 10px 30px rgba(18,38,35,.14);
  --shadow-lg:0 26px 60px rgba(18,38,35,.22);
  --radius:18px;--radius-sm:12px;--radius-pill:999px;
  --transition:all .28s ease;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);color:var(--body);background:var(--white);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text);line-height:1.2;font-weight:700}
a{text-decoration:none;color:inherit;transition:var(--transition)}
img{max-width:100%;height:auto;display:block}
.sb-wrap{max-width:1160px;margin:0 auto;padding:0 1.4rem}
ul{list-style:none}

/* ---- Top strip + nav ---- */
.sb-strip{background:var(--teal-deep);color:#eafbf9;text-align:center;font-size:.8rem;padding:9px 12px;font-weight:600}
.sb-strip span{opacity:.5;margin:0 8px}
.sb-nav{position:sticky;top:0;background:#fff;z-index:1000;border-bottom:1px solid var(--line)}
.sb-nav-inner{max-width:1160px;margin:0 auto;padding:.9rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem}
.sb-logo{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--ink)}
.sb-logo span{color:var(--coral)}
.sb-nav-links{display:flex;align-items:center;gap:1.4rem;font-weight:600;font-size:.9rem}
.sb-nav-links a{color:var(--body)}
.sb-nav-links a:hover{color:var(--teal-deep)}
.sb-nav-cta{background:var(--grad-coral);color:#fff!important;padding:.6rem 1.3rem;border-radius:var(--radius-pill);font-weight:700}
.sb-mobile-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink)}

/* ---- Buttons ---- */
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-body);font-weight:700;font-size:.98rem;padding:.85rem 1.8rem;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:var(--transition);text-align:center}
.sb-btn-coral{background:var(--grad-coral);color:#fff;box-shadow:0 10px 26px rgba(225,79,63,.35)}
.sb-btn-coral:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(225,79,63,.45)}
.sb-btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.sb-btn-outline:hover{border-color:var(--teal);color:var(--teal-deep)}

/* ---- Blog hero with rising-bubble animation ---- */
.sb-hero{position:relative;background:var(--grad-dark);color:rgba(255,255,255,.9);padding:4rem 0 3.2rem;overflow:hidden;text-align:center}
.sb-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.5}
.sb-bubble{position:absolute;bottom:-60px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(95,191,189,.55), rgba(95,191,189,.05) 70%);animation:sb-rise linear infinite}
@keyframes sb-rise{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.8}100%{transform:translateY(-480px) scale(1.15);opacity:0}}
.sb-hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.sb-eyebrow{display:inline-block;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--teal-light);margin-bottom:.8rem}
.sb-hero h1{font-size:clamp(2rem,4.2vw,3rem);color:#fff;margin-bottom:1rem;line-height:1.15}
.sb-hero p{color:rgba(255,255,255,.75);font-size:1.02rem;max-width:620px;margin:0 auto}

/* ---- Filter chips ---- */
.sb-filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:-1.6rem auto 2.6rem;max-width:900px;padding:0 1.4rem;position:relative;z-index:3}
.sb-chip{background:#fff;border:1.5px solid var(--line);color:var(--body);font-size:.84rem;font-weight:700;padding:.5rem 1.1rem;border-radius:var(--radius-pill);cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm)}
.sb-chip:hover{border-color:var(--teal)}
.sb-chip.active{background:var(--grad-teal);color:#fff;border-color:transparent}

/* ---- Blog grid / cards ---- */
.sb-section{padding:1.5rem 0 5rem}
.sb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.sb-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);display:flex;flex-direction:column}
.sb-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--teal-light)}
.sb-card-top{height:6px;background:var(--grad-coral)}
.sb-card-top.teal{background:var(--grad-teal)}
.sb-card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.sb-tag{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;color:var(--teal-deep);background:var(--cream);padding:.28rem .75rem;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem}
.sb-tag.coral{color:var(--coral-deep);background:#FFF0ED}
.sb-card h3{font-size:1.08rem;margin-bottom:.7rem;line-height:1.35;font-family:var(--font-body);font-weight:700}
.sb-card p{font-size:.86rem;color:var(--body);margin-bottom:1rem;flex:1}
.sb-readmore{font-size:.84rem;font-weight:700;color:var(--teal-deep);display:inline-flex;align-items:center;gap:.3rem}
.sb-readmore:hover{color:var(--coral-deep)}

/* ---- Pagination ---- */
.sb-pagination{display:flex;justify-content:center;gap:.6rem;margin-top:3rem}
.sb-page-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;cursor:pointer;transition:var(--transition)}
.sb-page-btn.active{background:var(--grad-teal);color:#fff;border-color:transparent}
.sb-page-btn:hover{border-color:var(--teal)}

/* ---- Final CTA ---- */
.sb-final-cta{background:var(--grad-dark);padding:3.4rem 0;text-align:center;position:relative;overflow:hidden}
.sb-final-cta h2{color:#fff;margin-bottom:.8rem;font-size:1.9rem}
.sb-final-cta p{color:rgba(255,255,255,.72);margin-bottom:1.5rem;max-width:560px;margin-left:auto;margin-right:auto}

/* ---- Article page ---- */
.sb-article-header{background:var(--grad-dark);padding:2.6rem 0;color:#fff}
.sb-article-header .sb-wrap{max-width:780px}
.sb-article-header .sb-eyebrow{color:var(--teal-light)}
.sb-article-header h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.3rem);margin-top:.5rem}
.sb-article-meta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem;font-size:.82rem;color:rgba(255,255,255,.6)}
.sb-article{max-width:740px;margin:0 auto;padding:3rem 1.4rem}
.sb-breadcrumb{font-size:.82rem;color:rgba(255,255,255,.55);margin-bottom:1rem}
.sb-breadcrumb a{color:rgba(255,255,255,.8);font-weight:600}
.sb-answer{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.6rem;margin:1.6rem 0 2rem}
.sb-answer .tag{display:block;font-size:.72rem;font-weight:700;color:var(--teal-deep);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}
.sb-answer p{color:var(--body);font-size:.95rem}
.sb-article img.sb-article-img{width:100%;max-height:360px;object-fit:cover;border-radius:var(--radius);margin:0 0 2rem}
.sb-article h2{font-size:1.4rem;margin:2rem 0 .9rem;color:var(--teal-deep)}
.sb-article p,.sb-article li{color:var(--body);margin-bottom:.9rem}
.sb-article ul{padding-left:1.4rem;list-style:disc}
.sb-article a{color:var(--coral-deep);font-weight:700}
.sb-flagbox{background:#FFF0ED;border-left:4px solid var(--coral);border-radius:0 14px 14px 0;padding:1.1rem 1.4rem;font-size:.86rem;color:var(--body);margin:1.6rem 0}
.sb-article-cta{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;text-align:center;margin:2.6rem 0}
.sb-article-cta h3{margin-bottom:.6rem}
.sb-article-cta p{margin-bottom:1.2rem;color:var(--body)}
.sb-related{margin-top:2.6rem}
.sb-related h3{font-size:1.15rem;margin-bottom:1rem}
.sb-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.sb-related-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.3rem;transition:var(--transition)}
.sb-related-card:hover{border-color:var(--teal-light);transform:translateY(-3px)}
.sb-related-card b{display:block;font-size:.92rem;margin-bottom:.3rem}
.sb-related-card span{font-size:.82rem;color:var(--muted)}

/* ---- Footer (minimal, blog-local) ---- */
.sb-footer{background:#0A1816;color:rgba(255,255,255,.6);padding:2.6rem 0 1.4rem;font-size:.84rem;text-align:center}
.sb-footer a{color:rgba(255,255,255,.75);margin:0 .5rem}
.sb-footer p{margin-bottom:.8rem;max-width:720px;margin-left:auto;margin-right:auto;color:rgba(255,255,255,.45);font-size:.78rem}

@media(max-width:900px){
  .sb-grid,.sb-related-grid{grid-template-columns:1fr}
  .sb-nav-links{display:none}
  .sb-mobile-toggle{display:block}
}
@media(min-width:901px) and (max-width:1100px){
  .sb-grid{grid-template-columns:repeat(2,1fr)}
}