/* assets/css/styles.css - Global styles for the homepage and forms */
:root{
  --bg:#ffffff;
  --fg:#1f2937;
  --muted:#6b7280;
  --brand:#2563eb;
  --brand-2:#f59e0b;
  --card:#f8fafc;
  --border:#e5e7eb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height:1.6;
  color:var(--fg);
  background:var(--bg);
}

.container{ max-width: 1000px; margin: 0 auto; padding: 1.25rem; }

header{
  background: linear-gradient(135deg, var(--brand) 0%, #3b82f6 100%);
  color:white;
  padding: 2.5rem 1rem;
  text-align:center;
}

header h1{ margin:0; font-size: clamp(2rem, 5vw, 3rem); }
header p.tagline{ margin:.25rem 0 0; opacity:.95; }

nav{
  position: sticky; top:0; z-index:99;
  background: #0b1020; color:white;
  border-bottom:1px solid rgba(255,255,255,.1);
}
nav .inner{ display:flex; gap:.5rem; overflow:auto; padding:.5rem 1rem; }
nav a{
  color:white; text-decoration:none; padding:.5rem .75rem; border-radius:999px;
  white-space:nowrap; border:1px solid rgba(255,255,255,.15);
}
nav a:hover{ background: rgba(255,255,255,.08); }

section{
  background: var(--card); border:1px solid var(--border);
  border-radius: 1rem; padding: 1rem; margin: 1rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
section h2{ margin-top:0; }

.grid-2{
  display:grid; grid-template-columns: 1fr; gap:1rem;
}
@media(min-width: 900px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
}

blockquote{
  background:#fff; border-left:4px solid var(--brand-2); padding: .75rem 1rem; margin:0;
  font-style: italic; color:#374151;
}

.gallery{ display:grid; grid-template-columns: 1fr; gap:1rem; }
@media(min-width:700px){ .gallery{ grid-template-columns: 1fr 1fr; } }
.gallery img{ width:100%; height:auto; display:block; border-radius:.75rem; border:1px solid var(--border); }

/* Table styles */
table{ width:100%; border-collapse: collapse; background:#fff; border-radius:.75rem; overflow:hidden; }
thead th{ background:#111827; color:#f9fafb; text-align:left; padding:.75rem; }
tbody td{ border-top:1px solid var(--border); padding:.75rem; vertical-align: top; }
tbody tr:nth-child(even) td{ background:#f9fafb; }
caption{ caption-side: bottom; color:var(--muted); font-size:.9rem; padding-top:.5rem; }

/* Footer info */
footer{ text-align:center; color:var(--muted); padding:2rem 1rem; }

/* Buttons & badges */
.button{
  display:inline-block; padding:.65rem 1rem; border-radius:.75rem;
  border:1px solid var(--border); text-decoration:none; color:white;
  background: var(--brand);
}
.button.secondary{ background:#111827; }

.badge{ background:#e5f2ff; color:#1e40af; border:1px solid #bfdbfe; padding:.25rem .5rem; border-radius:.5rem; }

/* Simple form styling (used on /forms pages too) */
form{ display:grid; gap:.75rem; }
label{ font-weight:600; }
input, select, textarea{
  width:100%; padding:.65rem .75rem; border:1px solid var(--border); border-radius:.5rem;
  font: inherit; background:white;
}
input[type="submit"], button[type="submit"]{ cursor:pointer; }
hr{ border:none; border-top:1px solid var(--border); margin:1rem 0; }
.small{ font-size:.9rem; color:var(--muted); }