/* styles.css - ITWP 1000 Project 3 */
:root{--accent:#2e7d32;--accent-2:#1565c0;--bg:#f8fafc;--text:#1f2937;--muted:#6b7280}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;line-height:1.6;background:var(--bg);color:var(--text)}
header{background:white;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:10}
.wrapper{max-width:1100px;margin:0 auto;padding:0 1rem}
.site-title{display:flex;align-items:center;gap:.75rem;padding:1rem 0}
.site-title h1{font-size:1.5rem;margin:0}
nav ul{display:flex;flex-wrap:wrap;gap:.5rem 1rem;list-style:none;margin:0;padding:0 0 1rem}
nav a{color:var(--accent-2);text-decoration:none;font-weight:600}
nav a:hover{text-decoration:underline}
main{padding:2rem 0}
.hero{background:linear-gradient(135deg,var(--accent)10%,#43a047 90%);color:white;border-radius:12px;padding:2rem;margin-bottom:2rem}
.hero h2{margin:0 0 .5rem}
.card{background:white;border:1px solid #e5e7eb;border-radius:12px;padding:1.25rem;margin:1rem 0}
.grid{display:grid;gap:1rem}
@media(min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}}
figure{margin:0}
figure img{width:100%;height:auto;border-radius:8px;border:1px solid #e5e7eb}
figcaption{font-size:.9rem;color:var(--muted);margin-top:.25rem}
footer{margin-top:3rem;background:#0f172a;color:#e2e8f0}
footer a{color:#93c5fd}
.footer-inner{padding:1.5rem 0}
.small{font-size:.9rem;color:var(--muted)}
.btn{display:inline-block;background:var(--accent-2);color:white;padding:.625rem .9rem;border-radius:8px;text-decoration:none}
.btn:hover{opacity:.9}
label{display:block;margin:.5rem 0 .25rem}

input[type="radio"],
input[type="checkbox"] {
  width: auto;           
  inline-size: auto;    
  display: inline-block; 
  margin: 0 .4rem 0 0;   
  vertical-align: middle;
}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #e5e7eb;padding:.6rem;text-align:left}
.notice{background:#fffbe6;border:1px solid #fde68a;color:#92400e;border-radius:8px;padding:.75rem}