:root{
  --brown: #47200a;
  --green: #055D17;
  --gold: #c0a136;
}

/* Page margins: left 2in, right 0.5in */
body{
  margin-left: 2in;
  margin-right: 0.5in;
  margin-top: 0.5in;
  margin-bottom: 0.1in;
  font-family: 'League Spartan', 'Montserrat', system-ui, -apple-system, sans-serif;
  color: var(--brown);
  background: #d3ceba;
}

.site-header{
  display:flex;
  align-items:left;
  gap:1rem;
  margin-bottom: 1rem;
}

.logo{max-height:64px; display:block;}
.titles{flex:1}
.main-title{font-family:'League Spartan', sans-serif; color:var(--brown); margin:0; font-size:2rem;}
.tagline{font-family:'Montserrat', sans-serif; color:var(--green); margin:0.25rem 0 0 0; font-size:1.1rem;}

.map-section{margin:1rem 0}
.map-box{height:420px; border:4px solid rgba(0,0,0,0.05); box-shadow:0 6px 18px rgba(0,0,0,0.08);}

.counts-section{display:flex; gap:1rem; margin-top:1.25rem; align-items:stretch}
.count-card{flex:1; background-color: #333; border-radius:8px; padding:1rem; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.count-number{font-size:2.5rem; font-weight:700; color:#c0a136;}
.count-label{font-size:1.6.rem; color:var(--green); margin-top:0.5rem}

.site-footer{
  /* make footer taller, black, centered content */
  font-size:1rem;
  height:120px;
  margin-top:2rem;
  border-top:0;
  padding:18px 12px;
  background-color: #000; /* black */
  color: #fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.footer-inner{display:flex; gap:12px; color:#fff; font-size:0.95rem; align-items: center;}
.footer-inner a{color:var(--gold); text-decoration:underline}

/* Attribute panel styling */
.attribute-panel{margin-top:1rem; background:#fff; color:#111; padding:0.75rem; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08); max-width:100%;}
.attribute-panel h3{margin:0 0 0.5rem 0; font-size:1rem; color:var(--brown)}
#attr-content{font-size:0.9rem; max-height:220px; overflow:auto}
.attr-table{width:100%; border-collapse:collapse}
.attr-table th{text-align:left; padding:6px 8px; background:#f4f4f4; width:35%;}
.attr-table td{padding:6px 8px;}

/* Responsive tweaks */
@media (max-width:900px){
  body{margin-left:1rem; margin-right:1rem}
  .counts-section{flex-direction:column}
}