/* ----------------------------------------------------
   North Cape Organics — styles.css (mobile-first)
   • Crisp hero image (no fade, no overlap)
   • Clean responsive layout + sticky nav
----------------------------------------------------- */

/* ===== Base / Reset ===== */
* { box-sizing: border-box; }
:root{
  --brand:#0f5132; --brand-2:#0c3f27;
  --ink:#132018; --ink-mute:#5b6e64;
  --bg:#f6faf7; --card:#ffffff;
  --shadow:0 10px 20px rgba(0,0,0,.08);
  --radius:.85rem; --container:1100px;
  --header-h:64px;
}
html,body{
  margin:0; padding:0;
  line-height:1.45;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}
.sr-only{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;z-index:9999;background:#fff;padding:.5rem .75rem;border-radius:.5rem;box-shadow:var(--shadow)}
/* smooth anchor offsets for sticky header */
.hero, .section{scroll-margin-top:calc(var(--header-h) + 12px)}

/* ===== Header / Navigation ===== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(4px);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.navbar{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-text{font-weight:800;color:var(--brand);font-size:clamp(1.05rem,2.4vw,1.35rem)}
/* hamburger (mobile) */
.nav-toggle{
  display:inline-grid;place-items:center;gap:4px;
  width:44px;height:44px;border:0;background:transparent;border-radius:.6rem;cursor:pointer;
}
.nav-toggle .bar{width:22px;height:2px;background:var(--brand);display:block}
/* mobile menu */
.nav-menu{
  position:fixed; inset:var(--header-h) 0 auto 0; background:#fff;
  transform:translateY(-120%); transition:transform .25s ease;
  border-bottom:1px solid #e6efe9; box-shadow:0 14px 22px rgba(0,0,0,.08);
}
.nav-menu.open{transform:translateY(0)}
.nav-menu ul{list-style:none;margin:0;padding:.75rem 1rem 1.1rem}
.nav-menu li{border-top:1px solid #eef3ef}
.nav-menu li:first-child{border-top:0}
.nav-menu a{display:block;padding:.9rem 0;font-weight:700;color:var(--brand)}
.nav-menu a.cta{background:var(--brand);color:#fff;text-align:center;border-radius:.6rem;margin-top:.5rem}
body.menu-open{overflow:hidden}
/* desktop nav */
@media (min-width:768px){
  .nav-toggle{display:none}
  .nav-menu{position:static;transform:none;border:0;box-shadow:none;background:transparent}
  .nav-menu ul{display:flex;gap:1.25rem;padding:0}
  .nav-menu li{border:0}
  .nav-menu a{padding:.35rem 0}
  .nav-menu a.cta{padding:.45rem .8rem;border-radius:.6rem}
}

/* ===== Hero (stacked, no overlap) ===== */
.hero{
  position:relative; isolation:isolate;
  background:#f7fbf8;
  padding: clamp(5rem, 9vh, 7rem) 0 clamp(2rem, 7vh, 4rem);
  display:grid;
  grid-template-areas:
    "content"
    "image";
  row-gap: clamp(1rem, 3vh, 2rem);
  justify-items:center;
  text-align:center;
  overflow:hidden; /* keeps image inside */
}
.hero-inner{ grid-area:content; position:relative; z-index:2 }
.hero-title{
  margin:0 auto 1rem; color:#0b2f20; line-height:1.1;
  font-size:clamp(1.8rem,6vw,3.6rem);
  max-width:20ch;                 /* prevents overly-wide headline */
  text-shadow:0 2px 0 rgba(255,255,255,.6);
}
.lead{max-width:56ch;margin:0 auto 1.25rem;font-size:clamp(1rem,2.4vw,1.25rem)}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:.85rem 1.15rem;border-radius:.6rem;font-weight:800;border:0}
.btn:hover{background:var(--brand-2)}
/* image sits below text in normal flow — no absolute positioning */
.hero-art{
  grid-area:image; position:static;
  width:min(880px, 94vw); max-width:calc(var(--container) - 2rem);
  height:auto; opacity:1; filter:none; pointer-events:none;
  box-shadow:0 10px 24px rgba(0,0,0,.08); border-radius:4px;
}
@media (min-width:1200px){
  .hero-art{ width:min(960px, 52vw); }
}

/* ===== Sections / Cards ===== */
.section{padding:3.25rem 0}
.section h2{margin:.25rem 0 1rem;color:var(--brand);font-size:clamp(1.6rem,4vw,2.1rem)}
.pattern{background:repeating-linear-gradient(135deg,#e5f2ea,#e5f2ea 14px,#f4fbf7 14px,#f4fbf7 28px)}
.card{background:var(--card);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}
.two-col{display:grid;gap:1.25rem}
@media (min-width:720px){.two-col{grid-template-columns:1fr 1fr}}
.checklist{display:grid;gap:.55rem;padding-left:1.25rem}
.small{color:var(--ink-mute);font-size:.95rem}

/* ===== Tables (responsive) ===== */
.table-wrap{overflow-x:auto;background:#fff;border-radius:.6rem;box-shadow:var(--shadow)}
.table{width:100%;border-collapse:collapse;min-width:420px}
.table th{background:var(--brand);color:#fff;text-align:left;padding:.9rem 1rem}
.table td{padding:1rem;border-bottom:1px solid #eef3ef}
@media (max-width:540px){
  .table{min-width:0;border-collapse:separate;border-spacing:0 .75rem}
  .table thead{display:none}
  .table tr{display:block;background:#fff;border-radius:.6rem;box-shadow:var(--shadow);padding:.25rem .25rem}
  .table td{display:grid;grid-template-columns:10rem 1fr;gap:.75rem;border:0;padding:.7rem 1rem}
  .table td::before{content:attr(data-label);font-weight:700;color:var(--brand)}
}

/* ===== Video Card ===== */
.video-card{
  position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  box-shadow:0 14px 28px rgba(0,0,0,.12);background:#000
}
.video-card .thumb{width:100%;height:100%;object-fit:cover}
.video-card .overlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(600px 280px at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.55));
  color:#fff;text-align:center
}
.video-card .label{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(15,81,50,.92);padding:.75rem 1.1rem;border-radius:.6rem;font-weight:800
}

/* ===== Forms ===== */
.form{display:grid;gap:.9rem;margin-top:.5rem}
.form label{display:grid;gap:.35rem;font-weight:700;color:var(--brand)}
.form input,.form select,.form textarea{
  width:100%;padding:.85rem 1rem;border-radius:.6rem;
  border:1px solid #cfe3d7;background:#fff;font:inherit
}
.form textarea{min-height:130px;resize:vertical}

/* ===== Footer ===== */
.footer{background:var(--brand);color:#eaf5ef;text-align:center;padding:1.25rem}
.footer a{color:#fff;text-decoration:underline}

/* ===== Motion preferences ===== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}