/* Custom community theme, responsive layouts and CSS comment cards (extra credit). */
:root { --ink:#18293d; --muted:#5e6b7d; --accent:#146c94; --light:#eff7fb; --line:#dce7ef; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink); background:#f6f9fc; }
a { color:var(--accent); }
.container { width:min(100% - 36px, 950px); margin-inline:auto; }
.site-header { background:#142c45; padding:16px 0; }
.header-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.brand { font-size:1.28rem; font-weight:800; color:#fff; text-decoration:none; }
nav { display:flex; flex-wrap:wrap; gap:18px; }
nav a { text-decoration:none; color:#e6f3fb; }
nav a:hover { color:white; text-decoration:underline; }
main { padding:32px 0 65px; min-height:70vh; }
h1 { font-size:clamp(1.8rem,4vw,2.4rem); margin:0 0 8px; }
h2 { font-size:1.1rem; margin:0; }
p { margin-top:4px; }
.page-heading { margin-bottom:30px; }
.button,button { display:inline-block; margin-top:12px; border:0; border-radius:9px; background:var(--accent); color:white; font:inherit; font-weight:650; padding:11px 20px; text-decoration:none; cursor:pointer; }
.button:hover,button:hover { filter:brightness(.87); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:20px; }
.comment-card,.form-card { background:white; border:1px solid var(--line); border-radius:14px; box-shadow:0 7px 20px #1737500b; padding:24px; }
.card-top { display:flex; align-items:start; justify-content:space-between; gap:10px; }
.id-tag { background:var(--light); color:var(--accent); border-radius:20px; padding:3px 10px; font-size:.8rem; white-space:nowrap; }
.date { color:var(--muted); font-size:.85rem; margin:8px 0 18px; }
.comment-text { overflow-wrap:anywhere; white-space:normal; }
.form-card { max-width:620px; display:flex; flex-direction:column; gap:8px; }
label { font-weight:650; margin-top:8px; }
input,textarea { width:100%; padding:12px 13px; font:inherit; border:1px solid #aabaca; border-radius:8px; }
input:focus,textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { align-self:flex-start; }
.danger { background:#a92f44; }
.alert { max-width:620px; padding:12px 15px; margin:12px 0; border-radius:8px; }
.success { background:#e2f5e9; color:#14512b; }
.error { background:#fce9eb; color:#8d1d30; }
.site-footer { background:#e7eef5; padding:20px 0; color:#4b5a6b; }