/* =============================================
   NATURAL DAILY RELIEF — Shared Stylesheet
   All pages use this file
   ============================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --white:#FFFFFF;
  --off-white:#F7F7F5;
  --bg-section:#F2F2EF;
  --navy:#0D2137;
  --navy-mid:#1A3A5C;
  --blue:#1558A8;
  --blue-hover:#1A6EC8;
  --blue-pale:#EBF2FB;
  --green:#1A6B3C;
  --green-light:#1F8049;
  --green-pale:#EAF4EE;
  --border:#E0E0DA;
  --border-dark:#C8C8C0;
  --border-mid:#C8C8C0;
  --text:#1A1C20;
  --text2:#3D4148;
  --text3:#6B7280;
  --text4:#9CA3AF;
}

html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--white);color:var(--text);-webkit-font-smoothing:antialiased;font-size:15px}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1160px;margin:0 auto;padding:0 32px}

/* ══════════════════════════════
   SITE HEADER — identical on all pages
══════════════════════════════ */
.site-header{
  background:var(--white);
  border-bottom:2px solid var(--border);
  position:sticky;
  top:0;
  z-index:200;
  box-shadow:0 2px 8px rgba(0,0,0,0.06)
}

.header-topstrip{
  background:var(--navy);
  padding:9px 0;
  text-align:center
}
.header-topstrip p{
  font-size:13px;
  color:rgba(255,255,255,0.65);
  letter-spacing:0.01em
}
.header-topstrip strong{
  color:rgba(255,255,255,0.9);
  font-weight:500
}

.header-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 32px;
  max-width:1160px;
  margin:0 auto
}

.logo-wrap{
  display:flex;
  flex-direction:column;
  gap:4px
}
.logo{
  font-family:'Lora',serif;
  font-size:28px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:-0.5px;
  line-height:1;
  text-decoration:none
}
.logo span{color:var(--green)}
.logo-tagline{
  font-size:12px;
  color:var(--text3);
  font-weight:400;
  letter-spacing:0.02em
}

.header-actions{
  display:flex;
  align-items:center;
  gap:14px
}
.header-search{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--off-white);
  border:1.5px solid var(--border);
  border-radius:8px;
  padding:10px 18px;
  cursor:pointer;
  transition:border-color .2s;
  min-width:200px
}
.header-search:hover{border-color:var(--border-dark)}
.header-search svg{
  width:16px;height:16px;
  stroke:var(--text3);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0
}
.header-search span{font-size:14px;color:var(--text3)}

.header-newsletter{
  background:var(--green);
  color:var(--white);
  font-size:14px;
  font-weight:600;
  padding:11px 24px;
  border-radius:8px;
  transition:background .2s;
  white-space:nowrap;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  text-decoration:none;
  display:inline-block
}
.header-newsletter:hover{background:var(--green-light)}

/* ── Category nav ── */
.cat-nav{
  background:var(--white);
  border-bottom:1px solid var(--border)
}
.cat-nav-inner{
  display:flex;
  align-items:center;
  max-width:1160px;
  margin:0 auto;
  padding:0 32px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}
.cat-nav-inner::-webkit-scrollbar{display:none}

.cat-nav-item{
  display:inline-flex;
  align-items:center;
  padding:14px 20px;
  font-size:14px;
  font-weight:500;
  color:var(--text2);
  white-space:nowrap;
  border-bottom:3px solid transparent;
  transition:all .2s;
  line-height:1;
  text-decoration:none
}
.cat-nav-item:hover{
  color:var(--navy);
  border-bottom-color:var(--border-dark)
}
.cat-nav-item.active{
  color:var(--green);
  border-bottom-color:var(--green);
  font-weight:600
}

/* ══════════════════════════════
   SHARED FOOTER
══════════════════════════════ */
footer{background:var(--navy);padding:56px 0 32px}

.footer-disc{
  margin-bottom:36px;
  padding:18px 22px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px
}
.footer-disc p{font-size:11px;color:rgba(255,255,255,0.3);line-height:1.8}

.footer-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:44px
}
.footer-logo{
  font-family:'Lora',serif;
  font-size:20px;
  font-weight:700;
  color:var(--white);
  display:block;
  margin-bottom:12px;
  text-decoration:none
}
.footer-logo span{color:#7DC99A}
.footer-desc{font-size:13px;color:rgba(255,255,255,0.38);line-height:1.75;max-width:260px}

.footer-col h5{
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.28);
  margin-bottom:14px
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col ul a{font-size:13px;color:rgba(255,255,255,0.48);transition:color .2s;text-decoration:none}
.footer-col ul a:hover{color:rgba(255,255,255,0.82)}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px
}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,0.28)}
.footer-legal{display:flex;gap:18px}
.footer-legal a{font-size:12px;color:rgba(255,255,255,0.28);transition:color .2s;text-decoration:none}
.footer-legal a:hover{color:rgba(255,255,255,0.6)}

/* ══════════════════════════════
   SHARED DISCLAIMER BAR
══════════════════════════════ */
.disclaimer-bar{
  background:var(--bg-section);
  border-top:1px solid var(--border);
  padding:18px 0
}
.disclaimer-bar p{
  font-size:12px;
  color:var(--text3);
  line-height:1.75;
  max-width:960px;
  margin:0 auto;
  text-align:center;
  padding:0 32px
}

/* ══════════════════════════════
   SHARED PAGE ELEMENTS
══════════════════════════════ */
.section-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:10px
}
.section-label::before{
  content:'';
  width:20px;height:1px;
  background:var(--blue);
  display:inline-block
}

h1,h2,h3,h4{font-family:'Lora',serif;color:var(--navy);line-height:1.2;letter-spacing:-0.2px}
p{font-size:15px;color:var(--text2);line-height:1.8}

.breadcrumb{
  font-size:13px;
  color:var(--text3);
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:8px
}
.breadcrumb a{color:var(--text3);transition:color .2s;text-decoration:none}
.breadcrumb a:hover{color:var(--navy)}
.breadcrumb-sep{color:var(--border-dark)}

/* Buttons */
.btn-primary{
  background:var(--green);
  color:var(--white);
  padding:13px 28px;
  border-radius:7px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.02em;
  transition:all .2s;
  display:inline-block;
  font-family:'Inter',sans-serif;
  text-decoration:none;
  border:none;
  cursor:pointer
}
.btn-primary:hover{background:var(--green-light);transform:translateY(-1px)}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .header-main{padding:14px 20px}
  .logo{font-size:22px}
  .header-search{display:none}
  .cat-nav-inner{padding:0 16px}
  .cat-nav-item{padding:12px 14px;font-size:13px}
  .footer-grid{grid-template-columns:1fr}
  .disclaimer-bar p{padding:0 20px}
  .container{padding:0 20px}
}