@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Lora:wght@400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:'Nunito',Arial,sans-serif;
  background:#f7fbf8;
  color:#1f3a2a;
}

/* ─── HEADER ─────────────────────────────────────────── */
header{
  background:#1a5c38;
  color:white;
  padding:44px 20px 40px;
  text-align:center;
}
header h1{
  font-family:'Lora',serif;
  font-size:2.2rem;
  font-weight:500;
  margin:0 0 10px;
  color:#f0faf4;
}
header p{
  margin:0 auto;
  line-height:1.6;
  color:#a8d4b8;
  font-size:1rem;
  max-width:600px;
}

/* ─── NAV ─────────────────────────────────────────────── */
nav{
  background:#fff;
  border-bottom:1px solid #c8e6d4;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 8px rgba(26,92,56,0.08);
}

/* Hamburger button — hidden on desktop */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:14px 16px;
  width:100%;
  text-align:left;
  color:#1a5c38;
  font-family:'Nunito',sans-serif;
  font-weight:700;
  font-size:1rem;
  align-items:center;
  gap:10px;
}
.nav-toggle .hamburger{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:22px;
}
.nav-toggle .hamburger span{
  display:block;
  height:2.5px;
  background:#1a5c38;
  border-radius:2px;
  transition:all 0.2s;
}
/* Animate hamburger to X when open */
.nav-toggle.open .hamburger span:nth-child(1){
  transform:translateY(7.5px) rotate(45deg);
}
.nav-toggle.open .hamburger span:nth-child(2){
  opacity:0;
}
.nav-toggle.open .hamburger span:nth-child(3){
  transform:translateY(-7.5px) rotate(-45deg);
}

.navwrap{
  max-width:1100px;
  margin:auto;
  display:flex;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  flex-wrap:wrap;
}
.navbtn{
  display:inline-block;
  text-decoration:none;
  background:#edf7f1;
  color:#1a5c38;
  padding:8px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:0.9rem;
  border:1.5px solid #b8ddc4;
  transition:all 0.15s;
  white-space:nowrap;
}
.navbtn:hover{
  background:#1a5c38;
  color:#fff;
  border-color:#1a5c38;
  text-decoration:none;
}

/* ─── LAYOUT ──────────────────────────────────────────── */
.container{
  max-width:1000px;
  margin:auto;
  padding:32px 16px 48px;
}
.card{
  background:white;
  border-radius:16px;
  border:1px solid #d4ead9;
  padding:28px;
  margin-bottom:24px;
  overflow-x:auto;
}
.card h2{
  font-family:'Lora',serif;
  font-size:1.4rem;
  font-weight:500;
  color:#0f3d24;
  margin-bottom:16px;
}
.card h3{
  font-family:'Lora',serif;
  font-size:1.1rem;
  font-weight:500;
  color:#0f3d24;
  margin-bottom:12px;
}

/* ─── TOOL GRID ───────────────────────────────────────── */
.toolgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.formgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* ─── GUIDES GRID ─────────────────────────────────────── */
.guidesgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:16px;
}
.guidecard{
  display:block;
  text-decoration:none;
  background:#f4fbf6;
  border:1.5px solid #c8e6d4;
  border-radius:14px;
  padding:18px;
  color:#0f3d24;
  font-weight:700;
  font-size:0.95rem;
  transition:all 0.18s;
}
.guidecard:hover{
  background:#e4f5ea;
  border-color:#1a5c38;
  transform:translateY(-2px);
  text-decoration:none;
}

/* ─── FORM ELEMENTS ───────────────────────────────────── */
input,select{
  padding:11px 12px;
  border-radius:10px;
  border:1.5px solid #b8d4c4;
  width:100%;
  font-family:'Nunito',sans-serif;
  font-size:1rem; /* Must be 1rem+ to prevent iOS auto-zoom */
  background:#f4fbf6;
  color:#0f3d24;
  outline:none;
}
input:focus,select:focus{
  border-color:#1a5c38;
  background:#fff;
}
button{
  padding:13px 16px;
  border-radius:10px;
  border:none;
  background:#1a5c38;
  color:white;
  font-weight:700;
  font-family:'Nunito',sans-serif;
  font-size:1rem;
  cursor:pointer;
  margin-top:10px;
  width:100%;
  transition:background 0.15s;
  touch-action:manipulation; /* Prevents double-tap zoom on iOS */
}
button:hover{
  background:#0f3d24;
}

/* ─── RESULTS ─────────────────────────────────────────── */
.result{
  background:#edf7f1;
  border:1.5px solid #b8ddc4;
  padding:22px;
  border-radius:14px;
}
.big{
  font-family:'Lora',serif;
  font-size:2rem;
  font-weight:500;
  margin:10px 0;
  color:#0f3d24;
}

/* ─── TABLES ──────────────────────────────────────────── */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:14px;
  font-size:0.95rem;
}
td,th{
  border-bottom:1px solid #d4ead9;
  padding:9px 8px;
  text-align:left;
}
th{
  color:#2a8a55;
  font-weight:700;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

/* ─── TYPOGRAPHY ──────────────────────────────────────── */
p,li{
  line-height:1.75;
  color:#2a4a35;
}
.card p{
  margin-bottom:12px;
}
.card p:last-child{
  margin-bottom:0;
}
ul{
  padding-left:22px;
}
a{
  color:#1a5c38;
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}
h1,h2,h3,h4{
  line-height:1.3;
}

/* ─── FOOTER ──────────────────────────────────────────── */
footer{
  text-align:center;
  padding:32px 20px;
  color:#5a8a6e;
  font-size:0.9rem;
  border-top:1px solid #d4ead9;
}
footer a{
  color:#1a5c38;
  font-weight:700;
}
footer p{
  margin-bottom:6px;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════════ */

/* Tablet landscape */
@media(max-width:900px){
  .guidesgrid{grid-template-columns:1fr 1fr;}
}

/* Tablet portrait */
@media(max-width:800px){
  .toolgrid{grid-template-columns:1fr;}
  .formgrid{grid-template-columns:1fr 1fr;}
  .guidesgrid{grid-template-columns:1fr 1fr;}
  header h1{font-size:1.8rem;}
  .big{font-size:1.6rem;}
}

/* Mobile — hamburger nav kicks in */
@media(max-width:600px){

  /* Show hamburger button */
  .nav-toggle{display:flex;}

  /* Hide nav links by default, reveal when .open */
  .navwrap{
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:8px 12px 14px;
    gap:6px;
    border-top:1px solid #c8e6d4;
  }
  .navwrap.open{display:flex;}

  .navbtn{
    text-align:center;
    padding:11px 16px;
    font-size:1rem;
    border-radius:10px;
  }

  header{padding:28px 16px 24px;}
  header h1{font-size:1.5rem;}
  header p{font-size:0.95rem;}

  .container{padding:20px 12px 40px;}

  .card{
    padding:18px 16px;
    border-radius:12px;
  }
  .card h2{font-size:1.2rem;}

  .formgrid{grid-template-columns:1fr;}

  .big{font-size:1.4rem;}

  td,th{
    padding:8px 6px;
    font-size:0.88rem;
  }

  .guidesgrid{grid-template-columns:1fr;}
  .guidecard{padding:14px;font-size:0.9rem;}

  footer{padding:24px 16px;font-size:0.85rem;}
}

/* Very small phones */
@media(max-width:360px){
  header h1{font-size:1.3rem;}
  .big{font-size:1.2rem;}
  .card{padding:14px 12px;}
}