/* assets/css/style.css v3 */
:root { --brand:#0a84ff; --brand-dark:#085fcc; --brand-soft:#e8f1ff; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#1a1a1a; background:#fff; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* Header full-width color bar */
.site-header { position:sticky; top:0; z-index:10; background:#fff; }
.header-bar { height:6px; width:100%; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); }
.header-inner { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; max-width:1100px; margin:0 auto; padding:12px 16px; }
.logo { justify-self:start; }
.logo img { height:40px; width:auto; display:block; }
.main-nav { justify-self:center; }
.spacer { justify-self:end; }

/* Fancy menu links */
.main-nav ul { list-style:none; display:flex; gap:18px; padding:0; margin:0; }
.main-nav li a { position:relative; padding:8px 10px; border-radius:8px; font-weight:600; }
.main-nav li a::after { content:''; position:absolute; left:10px; right:10px; bottom:6px; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.main-nav li a:hover::after, .main-nav li.active a::after { transform:scaleX(1); }
.main-nav li a:hover { color:var(--brand-dark); text-shadow:0 0 1px var(--brand-soft); }

/* Cards */
.card-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin:16px 0; }
.card { background:#fff; border-radius:14px; box-shadow: 0 4px 16px rgba(0,0,0,.08); overflow:hidden; border:1px solid #eee; display:flex; flex-direction:column; }
.card-image img { width:100%; height:180px; object-fit:cover; display:block; }
.card-body { padding:12px; display:flex; flex-direction:column; gap:8px; }
.card-body h2 { font-size:18px; margin:0; }
.card-body p { font-size:14px; color:#444; }

/* Buttons */
.btn { display:inline-block; padding:10px 14px; border-radius:10px; font-weight:600; text-align:center; }
.btn-primary { background:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-dark); }
.center { display:block; margin-left:auto; margin-right:auto; }

/* Forms */
.form { max-width: 640px; }
.form-row { display:flex; flex-direction:column; margin-bottom:12px; }
.form-row input, .form-row textarea { padding:10px; font-size:16px; border:1px solid #ccc; border-radius:10px; }
button { padding:10px 16px; font-size:16px; border:0; border-radius:10px; background:#111; color:#fff; cursor:pointer; }
button:hover { opacity:.9; }

.result { margin-top:10px; font-size:14px; }
.result.success { color: #0a7a2f; }
.result.error { color: #a00; }

/* Pagination */
.pagination ul { list-style:none; padding:0; margin:24px 0; display:flex; flex-wrap:wrap; gap:8px; }
.pagination a { display:block; padding:8px 12px; border:1px solid #ddd; border-radius:8px; }
.pagination li.active a, .pagination a:hover { background:#111; color:#fff; border-color:#111; }

/* Footer full-width color bar */
.site-footer { background:#fafafa; border-top:1px solid #eee; }
.footer-bar { height:6px; width:100%; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); }

@media (max-width: 900px) {
  .card-image img { height:160px; }
}
@media (max-width: 700px) {
  .main-nav ul { flex-wrap:wrap; justify-content:center; }
  .card-grid { grid-template-columns: 1fr; }
}

/* v4 updates per request */
.header-inner { background:#222; }
.header-inner .logo a, .header-inner .logo, .header-inner, .header-inner * { color:#fff; }
.main-nav li a { color:#fff; }
.main-nav li a:hover { color:#ffffff; text-shadow:0 0 6px rgba(255,255,255,.2); }

.site-footer { background:#222; color:#fff; }
.site-footer a { color:#fff; }
.site-footer .container { color:#fff; }

/* Stronger bottom-only shadow for cards */
.card { box-shadow: 0 18px 28px -12px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.05); }

/* v5 updates */
.site-header { background:#222; } /* full-width dark */
.header-inner { background:transparent; }
.logo a { color:#fff; }
.main-nav li a { color:#fff; }
.main-nav li a:hover { color:#fff; }
.site-footer { background:#222; color:#fff; }
.site-footer a { color:#fff; }

/* Forms: bold labels and two-column layout with left content area */
.form-page { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; }
.form-page .left-content { background:#f7f7f7; border:1px solid #e5e5e5; border-radius:12px; padding:16px; }
.form-page .left-content h3 { margin-top:0; }
.form-page .right-form { background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; }
.form-row label { font-weight:700; } /* bold labels */
@media (max-width: 900px) {
  .form-page { grid-template-columns: 1fr; }
}