/* Basic responsive layout and simple branding */
:root{
  --brand:#0b5aa7;
  --muted:#666;
  --bg:#d9dde3;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;margin:0;background:var(--bg);color:#111;display:flex;flex-direction:column;align-items:center;text-align:center}
.container{max-width:900px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;align-items:center;text-align:center}

/* Hero section: full viewport height */
.hero{height:100vh;width:100%;background:linear-gradient(90deg,var(--brand),#0b6fb3);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;position:relative}
.hero-logo{position:absolute;top:2rem;left:2rem;height:140px;width:auto}
.hero-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;}
.hero-title{margin:0;font-size:3rem;font-weight:600}
.hero-tagline{margin:0;font-size:1.25rem;opacity:0.95}

/* Sticky header: visible on all pages except index.html */
.site-header{background:linear-gradient(90deg,var(--brand),#0b6fb3);color:#fff;padding:1.25rem 0;width:100%}
.site-header .header-content{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;justify-content:flex-start;}
.logo{height:60px;width:auto;flex-shrink:0}
.header-text{flex:1}
.site-header h1{margin:0;font-size:1.5rem}
.tagline{margin:0.25rem 0 0;font-weight:400;opacity:0.95}
.main{padding:2rem 0;width:100%}
.intro p{max-width:60ch;margin:0 auto}
.info ol,.info ul{text-align:left;margin:0.5rem auto 0;display:block;max-width:60ch}
.info li{margin:0.35rem 0}
.actions{display:flex;gap:1rem;margin-top:1.25rem;justify-content:center}
.btn{display:inline-block;padding:0.75rem 1.25rem;border-radius:6px;text-decoration:none;text-align:center;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease}
.btn.primary{background:var(--brand);color:#fff;border:1px solid transparent}
.btn.secondary{background:#e6eef8;color:var(--brand);border:1px solid rgba(11,90,167,0.12)}

/* Hover: invert button background and text colors */
.btn:hover{cursor:pointer}
.btn.primary:hover{background:#fff;color:var(--brand);border-color:var(--brand)}
.btn.secondary:hover{background:var(--brand);color:#e6eef8;border-color:var(--brand)}
.card{background:var(--card);padding:1rem;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,0.04);max-width:420px;width:100%;margin:0 auto}

/* map container used on officer dashboard */
.map-container{height:500px;width:100%;margin-bottom:1rem}
.form{display:flex;flex-direction:column;gap:0.5rem;width:100%}
label{font-size:0.9rem;color:var(--muted);text-align:left}
input[type="text"],input[type="email"],input[type="password"]{padding:0.6rem;border:1px solid #d7dfe9;border-radius:6px;width:100%}
.muted{color:var(--muted);margin-top:0.75rem}
.site-footer{padding:1rem 0;text-align:center;color:var(--muted);width:100%}

/* Grid used on public login page: center columns */
.grid{display:flex;gap:1.5rem;align-items:flex-start;justify-content:center;width:100%}
.grid section,.grid aside{flex:0 1 420px}

@media (max-width:750px){
  .hero-title{font-size:2rem}
  .hero-tagline{font-size:1rem}
  .hero-logo{height:140px}
  .grid{flex-direction:column;gap:1rem}
  .actions{flex-direction:column}
  label{text-align:left}
}