/* Digital City Hall — demo components, layered on the city's existing style.css
   Palette pulled from the live site (teal/navy). Fonts inherited: Montserrat + Merriweather. */

:root{
  --dch-teal:#1a5c5c;
  --dch-teal-dark:#134545;
  --dch-teal-light:#237878;
  --dch-gold:#c8a24a;
  --dch-ink:#1f2a2a;
  --dch-muted:#6b7b7b;
  --dch-line:#e3e9e9;
  --dch-bg:#f6f8f8;
}

/* DEMO ribbon so no one mistakes the prototype for the live site */
.demo-banner{
  background:repeating-linear-gradient(45deg,#c8a24a,#c8a24a 12px,#b8923a 12px,#b8923a 24px);
  color:#1f2a2a;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;
  text-align:center;padding:8px 16px;letter-spacing:.04em;
}
.demo-banner span{background:rgba(255,255,255,.85);padding:3px 10px;border-radius:4px;}

/* Page intro */
.dch-intro{background:var(--dch-teal);color:#fff;padding:54px 0;text-align:center;}
.dch-intro h1{font-family:'Merriweather',serif;font-size:38px;margin:0 0 10px;font-weight:700;}
.dch-intro p{font-family:'Montserrat',sans-serif;font-size:16px;max-width:680px;margin:0 auto;opacity:.92;line-height:1.6;}

.dch-section{max-width:1120px;margin:0 auto;padding:48px 20px;}
.dch-eyebrow{font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--dch-gold);font-weight:700;margin:0 0 6px;}
.dch-h2{font-family:'Merriweather',serif;font-size:26px;color:var(--dch-ink);margin:0 0 8px;}
.dch-sub{font-family:'Montserrat',sans-serif;color:var(--dch-muted);font-size:15px;margin:0 0 28px;line-height:1.6;}

/* Service hub grid */
.dch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;}
.dch-card{display:block;background:#fff;border:1px solid var(--dch-line);border-radius:12px;padding:26px 22px;
  text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.dch-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(26,92,92,.14);border-color:var(--dch-teal-light);}
.dch-card .ic{width:48px;height:48px;border-radius:10px;background:var(--dch-bg);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--dch-teal);}
.dch-card h3{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:700;margin:0 0 6px;color:var(--dch-ink);}
.dch-card p{font-family:'Montserrat',sans-serif;font-size:13.5px;color:var(--dch-muted);margin:0;line-height:1.5;}
.dch-card .tag{display:inline-block;margin-top:14px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:20px;}
.tag-live{background:#e4f3ec;color:#1d7a4d;}
.tag-soon{background:#fdf4e3;color:#9a7b1f;}

/* Report-It form */
.ri-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start;}
@media(max-width:840px){.ri-wrap{grid-template-columns:1fr;}.dch-intro h1{font-size:30px;}}
.ri-card{background:#fff;border:1px solid var(--dch-line);border-radius:12px;padding:26px;}
.ri-label{display:block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;color:var(--dch-ink);margin:18px 0 8px;}
.ri-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media(max-width:520px){.ri-cats{grid-template-columns:repeat(2,1fr);}}
.ri-cat{cursor:pointer;border:1.5px solid var(--dch-line);border-radius:10px;padding:14px 8px;text-align:center;
  font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:600;color:var(--dch-ink);background:#fff;transition:all .12s;}
.ri-cat:hover{border-color:var(--dch-teal-light);}
.ri-cat.sel{border-color:var(--dch-teal);background:var(--dch-teal);color:#fff;}
.ri-cat .em{display:block;font-size:22px;margin-bottom:5px;}
.ri-input,.ri-textarea{width:100%;box-sizing:border-box;font-family:'Montserrat',sans-serif;font-size:14px;
  border:1.5px solid var(--dch-line);border-radius:8px;padding:11px 12px;color:var(--dch-ink);}
.ri-input:focus,.ri-textarea:focus{outline:none;border-color:var(--dch-teal);}
.ri-textarea{min-height:96px;resize:vertical;}
.ri-file{font-family:'Montserrat',sans-serif;font-size:13px;color:var(--dch-muted);}
.ri-btn{margin-top:22px;width:100%;background:var(--dch-teal);color:#fff;border:none;border-radius:8px;
  padding:14px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;cursor:pointer;transition:background .15s;}
.ri-btn:hover{background:var(--dch-teal-dark);}
.ri-auto{position:relative;}
.ri-suggest{position:absolute;z-index:5;left:0;right:0;background:#fff;border:1px solid var(--dch-line);
  border-top:none;border-radius:0 0 8px 8px;max-height:180px;overflow:auto;}
.ri-suggest div{padding:9px 12px;font-family:'Montserrat',sans-serif;font-size:13px;cursor:pointer;}
.ri-suggest div:hover{background:var(--dch-bg);}

/* confirmation */
.ri-ok{background:#e4f3ec;border:1px solid #b7e0c7;border-radius:12px;padding:24px;text-align:center;}
.ri-ok h3{font-family:'Merriweather',serif;color:#1d7a4d;margin:0 0 8px;}
.ri-ok .tk{font-family:'Montserrat',monospace;font-weight:700;font-size:22px;color:var(--dch-teal);letter-spacing:.05em;margin:10px 0;}
.ri-ok p{font-family:'Montserrat',sans-serif;font-size:13.5px;color:var(--dch-muted);margin:4px 0;}

/* status board */
.ri-board h3{font-family:'Montserrat',sans-serif;font-size:15px;color:var(--dch-ink);margin:0 0 14px;}
.ri-item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--dch-line);border-radius:10px;padding:13px 14px;margin-bottom:10px;background:#fff;}
.ri-item .em{font-size:20px;}
.ri-item .meta{flex:1;}
.ri-item .meta b{font-family:'Montserrat',sans-serif;font-size:13.5px;color:var(--dch-ink);display:block;}
.ri-item .meta small{font-family:'Montserrat',sans-serif;font-size:11.5px;color:var(--dch-muted);}
.ri-status{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 9px;border-radius:20px;white-space:nowrap;}
.st-new{background:#fde9e7;color:#c0392b;}
.st-prog{background:#fdf4e3;color:#9a7b1f;}
.st-done{background:#e4f3ec;color:#1d7a4d;}

.dch-note{background:var(--dch-bg);border-left:4px solid var(--dch-gold);padding:16px 20px;border-radius:0 8px 8px 0;
  font-family:'Montserrat',sans-serif;font-size:13px;color:var(--dch-muted);line-height:1.6;margin-top:24px;}