/* style.css
   Bright & Fresh — polished UI for Senior Gardening homepage
   - Keep image filenames unchanged (hero.jpg, plants.jpg, raised-bed.jpg, tools.jpg, seasonal.jpg)
*/

/* ---------- Variables & Base ---------- */
:root{
  --bg: #fbfdf9;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #1f2937;
  --accent: #4caf50;      /* primary green */
  --accent-2: #ff9800;    /* secondary orange */
  --accent-ghost: rgba(76,175,80,0.08);
  --glass: rgba(255,255,255,0.65);
  --radius: 14px;
  --container: 1200px;

  /* Slightly shorter, consistent durations for smooth, stable transitions */
  --ease-quick: 160ms;
  --ease-medium: 260ms;
  --shadow-soft: 0 6px 24px rgba(16,24,40,0.06);
  --shadow-strong: 0 20px 40px rgba(16,24,40,0.12);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :root { --ease-quick: 0ms; --ease-medium: 0ms; }
  * { scroll-behavior: auto !important; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg), #ffffff);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.5;
  font-size: 16px;
}

/* Utility */
.container { width: 92%; max-width: var(--container); margin: 0 auto; }
.sr-only { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 120;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.55));
  border-bottom: 1px solid rgba(72,166,85,0.06);
  transition: padding var(--ease-medium), box-shadow var(--ease-medium);
  padding: 18px 0;
}
.site-header.shrink { padding: 10px 0; box-shadow: var(--shadow-soft); }

.header-inner { display:flex; align-items:center; justify-content:space-between; gap: 18px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--accent); font-weight:800; font-size:1.15rem; }
.logo .logo-text{ letter-spacing:0.2px; }

.nav { display:block; }
.nav-list { list-style:none; display:flex; gap:20px; align-items:center; margin:0; padding:0; }
.nav-link { color:var(--text); text-decoration:none; font-weight:700; padding:8px 6px; border-radius:8px; transition: background var(--ease-quick), color var(--ease-quick); }
.nav-link:hover, .nav-link:focus { background:var(--accent-ghost); color:var(--accent); outline:none; }

/* Mobile toggle */
.menu-toggle { display:none; border:0; background:transparent; padding:8px; cursor:pointer; }
.menu-toggle .bar{ display:block; width:22px; height:2px; background:var(--text); margin:4px 0; transition: transform var(--ease-medium); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 460px;
  display:flex; align-items:center;
  background-image: linear-gradient(180deg, rgba(14,78,13,0.18), rgba(255,255,255,0.0)), url("../images/hero.jpg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  overflow: hidden;
  /* avoid using background-attachment: fixed (can cause jank) — keep scrolling for stability */
}

/* subtle parallax for desktop (removed fixed attachment for stability) */
@media (min-width: 900px){
  .hero { background-attachment: scroll; }
}

.hero-inner { display:flex; gap:28px; align-items:center; width:100%; padding:56px 0; }
.hero-copy { flex: 1 1 540px; color:var(--card); text-align:left; }
.hero-title { color:#fff; font-size: clamp(1.8rem, 3.2vw, 3.2rem); margin-bottom: 12px; line-height:1.03; text-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.hero-sub { color: rgba(255,255,255,0.95); font-size: clamp(1rem, 1.2vw, 1.2rem); margin-bottom: 20px; max-width: 56ch; text-shadow: 0 6px 14px rgba(0,0,0,0.32); }

.hero-ctas { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* hero decorative art */
.hero-art { display:none; }
@media (min-width:1000px){
  .hero-art { display:block; opacity:0.98; transform: translateY(6px) translateX(6px); }
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px; padding: 12px 18px; font-weight:700; text-decoration:none;
  transition: transform var(--ease-quick), box-shadow var(--ease-quick), background var(--ease-quick);
  border: 2px solid transparent; cursor: pointer;
}
.btn-primary { background: linear-gradient(90deg,var(--accent), #3b9e3b); color: #fff; box-shadow: 0 8px 20px rgba(76,175,80,0.12); }
.btn-primary:hover, .btn-primary:focus { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.18); }

/* CTA alternate used in newsletter */
.btn-cta { background: linear-gradient(90deg,var(--accent-2), #ff8a00); color:#fff; padding: 12px 22px; }

/* ---------- Section Titles ---------- */
.section-title { text-align:center; color:var(--accent); font-size:1.8rem; margin-bottom:1rem; }

/* ---------- Cards / Featured ---------- */
.featured-articles { padding: 56px 0; background: linear-gradient(180deg, rgba(250,255,250,0.6), transparent); }
.card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; align-items:stretch; }
.card { background: var(--card); border-radius: 12px; overflow:hidden; box-shadow: var(--shadow-soft); transition: transform var(--ease-medium), box-shadow var(--ease-medium); display:flex; flex-direction:column; }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-strong); }
.card-media { position:relative; overflow:hidden; flex:0 0 auto; }
.card-image {
  width:100%; height: 200px; object-fit:cover; display:block;
  transition: transform var(--ease-medium) cubic-bezier(.03,.98,.52,1);
  will-change: transform;
}
.card:hover .card-image { transform: scale(1.06); }
.card-body { padding:18px 20px 22px; flex:1 1 auto; display:flex; flex-direction:column; gap:8px; }
.card h3 { margin:0; font-size:1.12rem; color:var(--text); }
.card p { color:var(--muted); margin:0; line-height:1.45; }
.card-link { margin-top:auto; display:inline-flex; align-items:center; gap:8px; color:var(--accent-2); font-weight:700; }

/* ---------- Split Section ---------- */
.split-section { padding: 48px 0; display:block; }
.seasonal-spotlight { display:flex; gap:20px; border-radius:12px; overflow:hidden; box-shadow: var(--shadow-soft); background: linear-gradient(180deg,#f6fff5, #ffffff); }
.seasonal-figure { flex: 0 0 44%; max-width:44%; }
.seasonal-image { width:100%; height:100%; object-fit:cover; display:block; }
.seasonal-content { padding: 28px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.quick-tips { flex: 0 0 34%; max-width:34%; padding: 22px; background: var(--card); border-left: 1px solid rgba(16,24,40,0.03); border-radius: 8px; }

/* Tips list */
.tips-list { list-style:none; display:flex; flex-direction:column; gap:14px; padding:0; margin:0; }
.tip-item { display:flex; gap:12px; align-items:flex-start; }
.tip-icon { font-size:1.6rem; background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2)); border-radius:8px; padding:6px; }

/* ---------- Newsletter ---------- */
.newsletter-signup { padding: 44px 0; background: linear-gradient(180deg, rgba(75,175,80,0.06), rgba(255,255,255,0.02)); text-align:center; }
.newsletter-inner { max-width:760px; margin:0 auto; background: linear-gradient(180deg,#ffffff, #fbfff7); padding:28px; border-radius:12px; box-shadow: var(--shadow-soft); }
.muted { color:var(--muted); }
.newsletter-form { display:flex; gap:0; align-items:center; justify-content:center; margin-top:18px; }
.newsletter-form input[type="email"] { padding:12px 16px; border-radius:999px 0 0 999px; border:1px solid rgba(16,24,40,0.06); min-width:260px; outline:none; font-size:1rem; }
.newsletter-form input[type="email"]:focus { box-shadow: 0 6px 20px rgba(76,175,80,0.08); border-color:var(--accent); }
.newsletter-message { margin-top:14px; font-weight:700; }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, #f8fbf8, #f1f7f1); padding:28px 0; margin-top:28px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer-nav { display:flex; gap:16px; align-items:center; }
.footer-nav a { color:var(--muted); text-decoration:none; font-weight:600; }
.footer-nav a:hover { color:var(--accent-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .seasonal-spotlight { flex-direction:column; }
  .seasonal-figure, .quick-tips { max-width:100%; flex-basis:auto; }
  .seasonal-image { height:260px; }
  .quick-tips { order:2; }
}

@media (max-width: 768px){
  .nav { display:none; position:absolute; top:64px; left:0; right:0; background: #fff; box-shadow: var(--shadow-soft); padding:12px 0; }
  .nav.active { display:block; }
  .nav-list { flex-direction:column; gap:8px; padding:8px 0; }
  .menu-toggle { display:inline-flex; }
  .hero-inner { padding:36px 0; flex-direction:column; align-items:flex-start; }
  .hero { padding:40px 0; min-height:420px; background-attachment: scroll; }
  .hero-art { display:none; }
  .card-image { height:180px; }
  .card-grid { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction:column; }
  .newsletter-form input { border-radius:999px; width:100%; text-align:center; }
  .newsletter-form .btn-cta { margin-top:10px; border-radius:999px; width:100%; }
}

/* Focus outlines for keyboard users */
:focus { outline: 3px solid rgba(76,175,80,0.18); outline-offset: 2px; border-radius:8px; }

/* Reveal animation helpers */
.reveal {
  opacity: 0;
  transform: translateY(14px) scale(0.998);
  transition: opacity var(--ease-medium) cubic-bezier(.2,.9,.3,1), transform var(--ease-medium) cubic-bezier(.2,.9,.3,1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }