/* ══════════════════════════════════════════════════
   BLOG POST STYLESHEET — style-blog.css
   Imported by all blog subpages. Uses same color 
   theme as main site with blog-specific styles.
   ══════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --white:#ffffff;
  --off-white:#f8f9f7;
  --light-green:#eef4f0;
  --sage:#2d6a4f;
  --sage-mid:#40916c;
  --sage-light:#d8eddf;
  --sage-dark:#1b4332;
  --text:#1a1a1a;
  --text2:#444444;
  --text3:#767676;
  --amber:#c17f24;
  --amber-light:#fef3e2;
  --dark:#1b2b1e;
  --dark2:#243328;
  --border:rgba(0,0,0,0.1);
  --border2:rgba(0,0,0,0.16);
}

html{scroll-behavior:smooth}
body{
  font-family:'Lato',sans-serif;
  background:var(--white);
  color:var(--text);
  font-size:17px;
  line-height:1.75;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── ANNOUNCEMENT BAR ── */
.ann-bar{
  background:var(--sage-dark);
  color:#b7d9c5;
  text-align:center;
  padding:10px 20px;
  font-size:13px;
  letter-spacing:0.03em;
}
.ann-bar strong{color:#ffffff;font-weight:700}

/* ── NAV ── */
nav{
  background:var(--white);
  border-bottom:2px solid var(--sage-light);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;height:70px;
}
.nav-logo{
  font-family:'Cormorant+Garamond',serif;
  font-size:22px;font-weight:600;
  color:var(--dark);
  display:flex;align-items:center;gap:10px;
}
.nav-logo-dot{
  width:10px;height:10px;
  background:var(--sage);border-radius:50%;flex-shrink:0;
}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{
  font-size:14px;font-weight:600;letter-spacing:0.02em;
  color:var(--text2);
  transition:color 0.2s;
}
.nav-links a:hover,.nav-active{color:var(--sage)!important}
.nav-cta{
  background:var(--sage);
  color:#fff!important;
  padding:10px 22px;
  border-radius:8px;
  font-size:13px!important;
  font-weight:700!important;
  transition:background 0.2s,transform 0.15s!important;
}
.nav-cta:hover{background:var(--sage-mid)!important;transform:translateY(-1px)}

/* ── ARTICLE HERO ── */
.article-hero{
  background:var(--dark2);
  padding:72px 32px 64px;
  position:relative;overflow:hidden;
}
.article-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 80%,rgba(64,145,108,0.25) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 10%,rgba(64,145,108,0.1) 0%,transparent 50%);
  pointer-events:none;
}
.article-hero-inner{max-width:860px;margin:0 auto;position:relative;z-index:1}
.article-breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:#6aab84;margin-bottom:24px;
}
.article-breadcrumb a{color:#6aab84;transition:color 0.2s}
.article-breadcrumb a:hover{color:#9ed4b4}
.article-breadcrumb span{color:#3d5c47}
.article-tag{
  display:inline-block;
  background:rgba(64,145,108,0.25);
  border:1px solid rgba(64,145,108,0.45);
  color:#9ed4b4;
  padding:5px 14px;border-radius:6px;
  font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:18px;
}
.article-hero h1{
  font-family:'Cormorant+Garamond',serif;
  font-size:clamp(36px,5vw,58px);
  font-weight:600;color:#f0ece4;
  line-height:1.12;margin-bottom:20px;
}
.article-hero h1 em{font-style:italic;color:#9ed4b4}
.article-hero-sub{
  font-size:18px;font-weight:300;
  color:#8aaa94;
  max-width:680px;
  line-height:1.7;
  margin-bottom:32px;
}
.article-meta{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid rgba(255,255,255,0.08);
}
.article-meta-author{
  display:flex;align-items:center;gap:10px;
}
.article-meta-dot{
  width:36px;height:36px;
  background:var(--sage-mid);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.article-meta-name{font-size:14px;font-weight:700;color:#e0ddd7}
.article-meta-role{font-size:12px;color:#6a8070}
.article-meta-divider{width:1px;height:32px;background:rgba(255,255,255,0.08)}
.article-meta-info{font-size:13px;color:#6a8070;display:flex;gap:16px}

/* ── ARTICLE BODY ── */
.article-layout{
  max-width:1200px;margin:0 auto;padding:64px 32px;
  display:grid;
  grid-template-columns:1fr 320px;
  gap:64px;align-items:start;
}
.article-body{max-width:740px}

.prose h2{
  font-family:'Cormorant+Garamond',serif;
  font-size:30px;font-weight:600;color:var(--dark);
  line-height:1.2;margin:48px 0 16px;
  padding-bottom:10px;
  border-bottom:2px solid var(--sage-light);
}
.prose h3{
  font-family:'Cormorant+Garamond',serif;
  font-size:22px;font-weight:600;color:var(--dark);
  margin:32px 0 10px;
}
.prose h4{
  font-size:17px;font-weight:700;color:var(--dark);
  margin:16px 0 6px;
}
.prose p{
  font-size:17px;color:var(--text2);
  line-height:1.82;margin-bottom:22px;
}
.prose p strong{color:var(--text);font-weight:700}
.prose ul,.prose ol{
  margin:0 0 22px 0;padding-left:24px;
}
.prose li{
  font-size:17px;color:var(--text2);
  line-height:1.75;margin-bottom:8px;
}
.prose a{color:var(--sage);text-decoration:underline;text-decoration-color:var(--sage-light);text-underline-offset:3px;transition:color 0.2s}
.prose a:hover{color:var(--sage-dark)}

/* Pull quote */
.pull-quote{
  background:var(--light-green);
  border-left:4px solid var(--sage);
  border-radius:0 10px 10px 0;
  padding:24px 28px;
  margin:36px 0;
}
.pull-quote p{
  font-family:'Cormorant+Garamond',serif;
  font-size:22px;font-style:italic;color:var(--sage-dark);
  margin:0;line-height:1.5;
}

/* Oil card grid */
.oil-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:28px 0;
}
.oil-card{
  background:var(--white);
  border:1px solid var(--border2);
  border-radius:12px;
  padding:20px;
  display:flex;gap:16px;align-items:flex-start;
  transition:box-shadow 0.2s,border-color 0.2s;
}
.oil-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.08);border-color:var(--sage-light)}
.oil-card-img{
  width:64px;height:64px;
  border-radius:8px;
  background:var(--light-green);
  overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.oil-card-img img{
  width:100%;height:100%;
  object-fit:contain;padding:6px;
}
.oil-card-num{
  font-family:'DM+Mono',monospace;
  font-size:10px;color:var(--sage);
  letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:4px;
}
.oil-card-name{
  font-family:'Cormorant+Garamond',serif;
  font-size:17px;font-weight:600;color:var(--dark);
  margin-bottom:4px;
}
.oil-card-desc{font-size:13px;color:var(--text2);line-height:1.6;font-weight:300}

/* Step block */
.step-block{
  background:var(--off-white);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px 28px;
  margin:12px 0;
  display:flex;gap:18px;align-items:flex-start;
}
.step-num{
  width:36px;height:36px;
  background:var(--sage);
  color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'DM+Mono',monospace;
  font-size:14px;font-weight:400;
  flex-shrink:0;
  margin-top:2px;
}
.step-content h4{
  font-size:16px;font-weight:700;color:var(--dark);margin-bottom:4px;
}
.step-content p{font-size:14px;color:var(--text2);margin:0;line-height:1.65}

/* Info box */
.info-box{
  background:var(--amber-light);
  border:1px solid rgba(193,127,36,0.2);
  border-radius:10px;
  padding:20px 24px;
  margin:28px 0;
}
.info-box-title{
  font-size:13px;font-weight:700;color:var(--amber);
  text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;
}
.info-box p{font-size:14px;color:#6b4a16;margin:0;line-height:1.65}

/* CTA shop button */
.btn-shop-oil{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sage);color:#fff;
  padding:12px 24px;border-radius:8px;
  font-size:14px;font-weight:700;
  transition:background 0.2s,transform 0.15s;
  margin-top:8px;
}
.btn-shop-oil:hover{background:var(--sage-mid);transform:translateY(-2px)}

/* ── SIDEBAR ── */
.sidebar{position:sticky;top:90px}
.sidebar-card{
  background:var(--white);
  border:1px solid var(--border2);
  border-radius:12px;
  padding:24px;
  margin-bottom:20px;
}
.sidebar-card-title{
  font-family:'Cormorant+Garamond',serif;
  font-size:18px;font-weight:600;color:var(--dark);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.related-post{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--border);
  cursor:pointer;transition:opacity 0.2s;
}
.related-post:last-child{border-bottom:none}
.related-post:hover{opacity:0.75}
.related-post-emoji{font-size:24px;flex-shrink:0;line-height:1;margin-top:2px}
.related-post-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.4}
.related-post-tag{font-size:11px;color:var(--text3);margin-top:3px}

.sidebar-products .oil-mini{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.sidebar-products .oil-mini:last-child{border-bottom:none}
.oil-mini-img{
  width:44px;height:44px;
  border-radius:6px;background:var(--light-green);
  overflow:hidden;flex-shrink:0;
}
.oil-mini-img img{width:100%;height:100%;object-fit:contain;padding:4px}
.oil-mini-name{font-size:13px;font-weight:600;color:var(--text)}
.oil-mini-link{font-size:12px;color:var(--sage);font-weight:600}

.sidebar-newsletter input{
  width:100%;
  border:1px solid var(--border2);
  border-radius:8px;
  padding:11px 14px;
  font-family:'Lato',sans-serif;
  font-size:14px;color:var(--text);
  outline:none;margin-bottom:10px;
  transition:border-color 0.2s;
  background:var(--off-white);
}
.sidebar-newsletter input:focus{border-color:var(--sage)}
.sidebar-newsletter input::placeholder{color:var(--text3)}
.btn-sidebar-sub{
  width:100%;background:var(--sage);color:#fff;
  border:none;border-radius:8px;
  padding:11px;font-family:'Lato',sans-serif;
  font-size:14px;font-weight:700;
  cursor:pointer;transition:background 0.2s;
}
.btn-sidebar-sub:hover{background:var(--sage-mid)}
.sidebar-sub-text{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:14px}

/* ── ARTICLE NAV (prev/next) ── */
.article-nav{
  max-width:1200px;margin:0 auto;padding:0 32px 64px;
  display:flex;gap:20px;
}
.article-nav-link{
  flex:1;
  background:var(--off-white);
  border:1px solid var(--border2);
  border-radius:12px;
  padding:20px 24px;
  transition:border-color 0.2s,transform 0.15s;
}
.article-nav-link:hover{border-color:var(--sage);transform:translateY(-2px)}
.article-nav-dir{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px}
.article-nav-title{font-family:'Cormorant+Garamond',serif;font-size:18px;font-weight:600;color:var(--dark)}
.article-nav-link.next{text-align:right}

/* ── NEWSLETTER CTA ── */
.newsletter-cta{
  background:var(--sage);
  text-align:center;
  padding:64px 32px;
}
.newsletter-cta h2{
  font-family:'Cormorant+Garamond',serif;
  font-size:clamp(28px,4vw,42px);font-weight:600;color:#fff;
  margin-bottom:10px;
}
.newsletter-cta h2 em{font-style:italic;opacity:0.85}
.newsletter-cta p{color:rgba(255,255,255,0.8);font-size:16px;max-width:440px;margin:0 auto 28px;line-height:1.7}
.nl-form{display:flex;gap:12px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.nl-form input{
  flex:1;min-width:200px;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.35);
  border-radius:8px;
  padding:13px 18px;
  font-family:'Lato',sans-serif;font-size:15px;color:#fff;
  outline:none;transition:border-color 0.2s;
}
.nl-form input::placeholder{color:rgba(255,255,255,0.55)}
.nl-form input:focus{border-color:rgba(255,255,255,0.75)}
.btn-nl{
  background:#fff;color:var(--sage);
  border:none;border-radius:8px;
  padding:13px 24px;font-family:'Lato',sans-serif;
  font-size:15px;font-weight:700;cursor:pointer;transition:background 0.2s;
}
.btn-nl:hover{background:var(--light-green)}

/* ── FOOTER ── */
footer{background:var(--dark);color:#7a9080;padding:56px 32px 32px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-brand{
  font-family:'Cormorant+Garamond',serif;
  font-size:20px;font-weight:600;color:#e8ede8;
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.footer-brand-dot{width:8px;height:8px;background:var(--sage-mid);border-radius:50%}
.footer-desc{font-size:13.5px;line-height:1.75;font-weight:300;max-width:260px;color:#6a8070}
.footer-col h4{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#9dc4a8;font-weight:700;margin-bottom:14px}
.footer-col a{display:block;font-size:13.5px;color:#5a7565;margin-bottom:8px;font-weight:400;transition:color 0.2s}
.footer-col a:hover{color:#9dc4a8}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding-top:24px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px}
.footer-legal{font-size:12px;line-height:1.7;color:#4a6055;max-width:600px}
.footer-mono{font-family:'DM+Mono',monospace;font-size:11px;color:#3a4f44}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp 0.6s ease both}
.fade-up-1{animation-delay:0.1s}
.fade-up-2{animation-delay:0.2s}

@media(max-width:960px){
  .article-layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .oil-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .nav-links{display:none}
  .article-nav{flex-direction:column}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:420px){
  .footer-top{grid-template-columns:1fr}
}