/* =============================
   Global variables & reset
   ============================= */
:root{
  --brand:#2E8B57;     /* primary green */
  --brand-200:#A5D6A7; /* light green */
  --ink:#111111;
  --muted:#f4f4f4;
  --bg:#ffffff;
  --card:#ffffff;
  --accent:#008CBA;
}

*,
*::before,
*::after{ box-sizing:border-box }

html,body{ margin:0; padding:0 }

body{
  font-family: Arial, sans-serif;
  color: var(--ink);
  background: var(--muted);
  line-height: 1.6;
}

/* Helpers */
.container{ max-width:1200px; margin:0 auto; padding:20px }
.hidden{ display:none !important }

/* =============================
   Navigation (sticky)
   ============================= */
nav{
  position: sticky; top:0; z-index:1000;
  background: linear-gradient(to bottom, var(--brand), #000);
  padding: 10px 0;
}
nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
}
nav li{ margin:0 15px }
nav a{
  text-decoration:none; color:#fff; font-size:16px; font-weight:bold;
  text-transform:uppercase; padding:8px 12px; display:inline-block;
  transition: color .2s ease, background-color .2s ease;
  border-radius:4px;
}
nav a:hover, nav a:focus{
  color: #fff; background-color: rgba(255,255,255,.12);
}

/* Prevent content underlap with sticky nav on direct hash links */
:target{ scroll-margin-top: 70px; }

/* =============================
   Header & Footer
   ============================= */
header{
  background-color: var(--brand);
  color:#fff; text-align:center; padding:20px;
}
footer{
  background-color: var(--brand);
  color:#fff; text-align:center; padding:10px; font-size:14px;
}

/* =============================
   Main
   ============================= */
main{ padding:20px }
@media (min-width: 1280px){
  main{ padding: 40px 20px; }
}

/* =============================
   Hero: use layered backgrounds (image + radial gradient)
   ============================= */
.hero{
  /* Put your image path below; root-relative if using a custom domain */
  /* Example: background-image: radial-gradient(...), url('/assets/img/homepage.jpg'); */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.8) 20%, rgba(0,0,0,.4) 70%, rgba(0,0,0,.2) 100%),
    url('homepage.jpg');
  background-position: center;
  background-size: cover;
  height: 90vh;
  color:#fff; text-align:center;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding: 0 20px;
}
.hero h1{
  font-size: 40px; font-weight:700; margin:0 0 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.hero p{
  font-size:18px; margin: 10px 0 20px;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.hero a{
  text-decoration:none; background-color: var(--accent); color:#fff;
  padding:10px 30px; border-radius:6px; font-size:16px; margin:6px 0; display:inline-block;
  transition: background-color .2s ease;
}
.hero a:hover{ background-color:#005f73 }

/* =============================
   Sections (green→black gradient)
   ============================= */
section{
  padding:20px 10px; margin:10px auto; max-width:90%;
  border-radius:8px; color:#fff; text-align:center;
  background: linear-gradient(to bottom, var(--brand), #000);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
section h2{ font-size:20px; margin: 0 0 10px }
section p{ font-size:14px; margin: 0 0 15px }
section a{
  display:inline-block; margin-top:20px; text-decoration:none;
  background-color: var(--brand); color:#fff;
  padding:10px 20px; border-radius:6px; font-size:16px;
  transition: background-color .2s ease;
}
section a:hover{ background-color:#046C04 }

/* =============================
   Article previews (cards)
   ============================= */
.articles-preview{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
}
.article-card{
  width:200px; text-align:center; background: var(--card);
  border-radius:8px; overflow:hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.article-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
}
.article-card img{ width:100%; height:120px; object-fit:cover; display:block }
.article-card p{ margin:10px; font-size:14px; color:var(--brand); font-weight:700 }
.article-card-content{ padding:10px }
.article-card-content h3{ margin:0; font-size:20px; color:var(--brand) }
.article-card-content p{ margin:6px 0; color:#555; font-size:14px }

/* =============================
   Banner (layered background)
   ============================= */
.banner{
  background-image:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.8) 20%, rgba(0,0,0,.4) 60%, rgba(0,0,0,0) 100%),
    url('calories-in-banner.jpg');
  background-position:center; background-size:cover;
  height:250px; display:flex; justify-content:center; align-items:center; text-align:center;
  color:#fff; padding:0 20px;
}
.banner-content{ max-width:90% }
.banner h1{ font-size:36px; font-weight:700; margin:0; text-shadow: 0 2px 6px rgba(0,0,0,.7) }
.banner p{ font-size:18px; margin-top:10px; text-shadow: 0 2px 6px rgba(0,0,0,.7) }

/* =============================
   Grid section for article lists
   ============================= */
.articles-section{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:20px; margin:20px auto;
}

/* =============================
   Misc components
   ============================= */
.cta{
  background-color: var(--brand-200); color:#fff; text-align:center;
  padding:15px; border-radius:6px; margin:20px 0;
}
.cta a{ color:#fff; font-weight:700; text-decoration:none }

.calculator{
  background:#fff; padding:20px; border-radius:8px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1); margin:20px 0; text-align:center;
}
.calculator input{
  margin:10px; padding:10px; border:1px solid #ccc; border-radius:6px;
  width: calc(100% - 24px); max-width:300px;
}
.calculator button{
  background-color: var(--brand); color:#fff; padding:10px 20px;
  border:none; border-radius:6px; cursor:pointer; font-size:16px;
}
.calculator button:hover{ background-color: var(--brand-200) }
.result{ margin-top:15px; font-size:18px; color:var(--brand) }

.bmi-scale{
  margin-top:20px; display:flex; justify-content:space-between; align-items:center;
  position:relative; height:50px;
  background: linear-gradient(to right, #A5D6A7, #FFEB3B, #FF7043, #F44336);
  border-radius:6px;
}
.bmi-scale .label{ position:absolute; top:-20px; font-size:12px }
.bmi-pointer{
  position:absolute; top:-15px; width:10px; height:60px; background:#000; border-radius:2px;
}

.disclaimer{
  background:#fff3cd; color:#856404; padding:15px; border-left:4px solid #ffeeba;
  margin:20px 0; border-radius:6px;
}

/* =============================
   Responsive
   ============================= */
@media (min-width:768px){
  nav ul{ gap:20px }
  nav a{ font-size:18px }
  .hero h1{ font-size:60px }
  .hero p{ font-size:24px }
  section{ max-width:1200px; padding:40px 20px }
  section h2{ font-size:28px }
  section p{ font-size:16px }
  .articles-preview{ gap:30px }
  .article-card{ width:250px }
  .article-card img{ height:120px }
  header{ padding:20px }
  .articles-section{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:20px; max-width:1200px;
  }
}

/* =============================
   Motion & dark mode (optional)
   ============================= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0b0b; --muted:#121212; --ink:#f4f4f4; --card:#181818;
  }
  body{ background: var(--muted); color: var(--ink) }
  .article-card p, .article-card-content p{ color:#ccc }
}