/* ─────────────  GLOBAL  ───────────── */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #f9f5ef;
  color: #4d3b2a;
  text-align: center;
  scroll-margin-top: 56px;   /* so in-page links aren’t hidden under nav */
}

/* ──────────  SITE NAV  ────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgb(146,73,37); /* dark-brown bar */
  display: flex;
  justify-content: center;    /* CENTERED */
  align-items: center;
  gap: 20px;
  padding: 8px 0;
  margin: 0;
}
.site-nav a {
  color: #fff;
  text-decoration: none;
  padding: 6px 10px;
  background: rgb(110,166,149); /* light-green pill */
  border-radius: 4px;
  font-weight: bold;
}
.site-nav a:hover { background: rgb(58,117,84); }
.site-nav span { color: #fff; }

/* ─────────────  HEADER  ───────────── */
.stats-header {
  background: #fff;
  padding: 20px 0;
}
.stats-logo {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* ───────── page-level heading ───────── */
.stats-heading {
  font-size: 24px;
  font-weight: bold;
  color: rgb(146,73,37);
  margin: 20px 0 10px 0;
  text-align: center;
}

/* ─────────────  ROW-1  (BAR | PIE) ───────────── */
.charts-row {
  display: flex;
  flex-wrap: wrap;              /* stacks on phones */
  justify-content: center;
  align-items: flex-start;      /* top-align */
  gap: 40px;
  padding: 40px 0;
}
.chart-block {
  min-height: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 430px;
  max-width: 430px;
}
.chart-block canvas#travelPieChart {
  width: 100%;
  max-width: 430px;
  height: 520px;
}

.chart-block canvas {
  width: 100%;
  max-width: 430px;
  height: auto;                 /* default – overridden below for bar */
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,.1);
}

/* give the Guest / Pups bar chart generous height */
#guestCountChart {
  height: 600px;                /* ensures 5-unit ticks */
}

/* ─────────────  ROW-3  (MODELS | STATES) ───────────── */
.models-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 40px 0;
}
.chart-block.wide {
  flex: 2 1 600px;
  max-width: 700px;
}
.chart-block.wide canvas {     /* horizontal model chart */
  width: 100%;
  height: 520px;
}

/* ─────────────  STATE TABLE  ───────────── */
.state-table-block {
  flex: 1 1 500px;              /* allow it to grow a bit wider */
  max-width: 500px;
}
#stateTable {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,.1);
  overflow: hidden;
}
#stateTable thead {
  background: #934924;
  color: #fff;
  font-weight: bold;
}
#stateTable th,
#stateTable td {
  padding: 6px 12px;
  border-bottom: 1px solid #ddd;
}
#stateTable tr:last-child td { border-bottom: none; }

/* state names */
#stateTable td:first-child {
  text-align: left;
  color: rgb(146,73,37);
  font-weight: 600;
}
/* counts */
#stateTable td.st-count {
  text-align: center;
  color: rgb(110,166,149);
  font-weight: bold;
  width: 80px;
}

/* ───────── phone tweaks ───────── */
@media (max-width: 768px) {
  .models-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 40px 0;
}
}
@media (max-width: 480px) {
  .chart-block {
  min-height: 580px; 
    overflow-x: auto;
  }
}

.models-row .chart-block canvas#travelPieChart {
  width: 100%;
  max-width: 430px;
  height: 520px;
}

.chart-block canvas {
  width: 100%;
  height: 100% !important;
}


/* ───────────── Scoped Desktop & Mobile Overrides ───────────── */
/* 1. Only bottom row charts get extra vertical space */
.models-row .chart-block {
  min-height: 580px;
  min-height: 800px;
}
.models-row .chart-block canvas#travelPieChart {
  width: 100%;
  max-width: 430px;
  height: 520px;
}

.chart-block canvas {
  width: 100%;
  height: 100% !important;
}

/* 2. Ensure truck chart responds like the others */
.chart-block canvas#truckBrandChart {
  width: 100%;
  max-width: 430px;
  height: auto !important;
}


/* Explicit height for Models + State charts */
canvas#modelBarChart,
canvas#stateBarChart {
  height: 800px !important;
}

/* Travel Pie Chart (right) */
canvas#travelPieChart {
  width: 100%;
  max-width: 430px;
  height: 520px;
}

.chart-block canvas {
  width: 100%;
  max-width: 430px;
  height: auto;                 /* default – overridden below for bar */
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,.1);
}

/* give the Guest / Pups bar chart generous height */
#guestCountChart {
  height: 600px;                /* ensures 5-unit ticks */
}

/* ─────────────  ROW-3  (MODELS | STATES) ───────────── */
.models-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 40px 0;
}
.chart-block.wide {
  flex: 2 1 600px;
  max-width: 700px;
}
.chart-block.wide canvas {     /* horizontal model chart */
  width: 100%;
  height: 520px;
}

/* ─────────────  STATE TABLE  ───────────── */
.state-table-block {
  flex: 1 1 500px;              /* allow it to grow a bit wider */
  max-width: 500px;
}
#stateTable {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,.1);
  overflow: hidden;
}
#stateTable thead {
  background: #934924;
  color: #fff;
  font-weight: bold;
}
#stateTable th,
#stateTable td {
  padding: 6px 12px;
  border-bottom: 1px solid #ddd;
}
#stateTable tr:last-child td { border-bottom: none; }

/* state names */
#stateTable td:first-child {
  text-align: left;
  color: rgb(146,73,37);
  font-weight: 600;
}
/* counts */
#stateTable td.st-count {
  text-align: center;
  color: rgb(110,166,149);
  font-weight: bold;
  width: 80px;
}

/* ───────── phone tweaks ───────── */
@media (max-width: 768px) {
  .models-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 40px 0;
}
}
@media (max-width: 480px) {
  .chart-block {
  min-height: 580px; 
    overflow-x: auto;
  }
}

.models-row .chart-block /* Travel Pie Chart (right) */
/* ─────────────  ROW-2  (WIDE BAR) ───────────── */

/* Truck Brands Chart (full width) */
canvas#truckBrandChart {
  width: 100%;
  max-width: 430px;
  height: auto !important;
}


/* Explicit height for Models + State charts */
/* ─────────────  ROW-3  (TWIN BAR) ───────────── */

/* Brinkley Models Chart (left) */
/* ─────────────  ROW-3  (TWIN BAR) ───────────── */

/* Brinkley Models Chart (left) */
canvas#modelBarChart,
/* State Breakdown Chart (right) */
/* State Breakdown Chart (right) */
canvas#stateBarChart {
  height: 800px !important;
}

/* ───────────── FORCE HEIGHT FOR CHART BLOCKS ───────────── */
.chart-block#guestCountBox,
.chart-block#travelPieBox {
  height: 500px;
}