/* ---------- Fonts & base ---------- */

body {
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  margin: 0;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}

.up-header,
.up-header * {
  box-sizing: border-box;
}

.up-header__nav,
.up-header__logo {
  font-family: "Varela Round", system-ui, sans-serif;
}

/* ---------- Header ---------- */

.up-header {
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
}

.up-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 14px;

  display: flex;
  align-items: center;
  gap: 24px;
}

.up-header__logo img {
  height: 120px;     /* bigger logo */
  width: auto;
  display: block;
}

/* search should NOT eat the nav */
.up-header__search {
  flex: 0 0 360px;  /* controlled width */
  max-width: 360px;
  position: relative;
}

#up-q {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;

  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
}

#up-q::placeholder {
  color: #777;
}

.up-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);

  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  z-index: 1000;
}

.up-hit { border-bottom: 1px solid #eee; }
.up-hit:last-child { border-bottom: none; }

.up-hit a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: #111;
  font-family: "Roboto", sans-serif;
}

.up-hit a:hover { background: #f6f6f6; }

.up-hit--hint {
  padding: 10px 14px;
  color: #777;
  font-style: italic;
  background: #fafafa;
}


.up-header__nav {
  margin-left: auto;  /* push menu to the right */
  display: flex;
  gap: 22px;
  white-space: nowrap;
}

.up-header__nav a {
  font-size: 20px;    /* bigger nav text */
  text-decoration: none;
  color: #111;
  line-height: 1.2;
}

.up-header__nav a:hover { text-decoration: underline; }

/* ---------- Page content wrapper ---------- */

.page-content {
  padding-left: 16px;
  padding-right: 16px;
}

.up-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 18px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .up-header__inner { flex-wrap: wrap; }

  .up-header__search {
    flex: 1 1 100%;
    max-width: none;
    order: 3;
  }

  .up-header__nav {
    width: 100%;
    justify-content: flex-start;
    order: 4;
  }
}
/* Community navigation bar (forced) */

nav.comm-nav{
  display: block;
  background: #3b51a3;
  width: 100%;
font-family: "Varela Round", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
margin-bottom: 12px;   /* try 10–16px */
}

.comm-nav__lead{
  color: #fff;
  font-weight: 600;
  opacity: 0.95;
  pointer-events: none;
}

nav.comm-nav > ul.comm-nav__list{
  list-style: none;
  margin: 0;
  padding: 10px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
}

nav.comm-nav > ul.comm-nav__list > li{
  margin: 0;
  padding: 0;
}

nav.comm-nav a{
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.92;
}

nav.comm-nav a:hover{
  opacity: 1;
  text-decoration: underline;
}

nav.comm-nav li.is-active a{
  opacity: 1;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 2px solid #fff;
  padding-bottom: 2px;
}

nav.comm-nav li.comm-nav__item--more{
  margin-left: auto;
}
/* Green dot separator between template tabs (Home | Government | Education | Nearby) */
nav.comm-nav li.comm-nav__item + li.comm-nav__item::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#9ed197;

  position: relative;
  left: -14px;              /* exactly half of your 28px gap */
  transform: translateY(1px);
}



/* ---------- Place descrip ---------- */
.up-crumb {
  font-family: "Varela Round", sans-serif;
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 14px 0;
}
/* ---------- magnifying glass ---------- */
#up-q {
  padding-left: 36px;          /* make room for icon */
  background-image: url('/assets/images/search-active.svg');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px 16px;
}
/* ---------- layout to create sidebar ---------- */
.comm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: start;
}

/* Main content area */
.comm-main {
  min-width: 0; /* prevents grid overflow bugs */
  grid-column: 1;
}

/* Sidebar */
.comm-sidebar {
  background-color: #f3faf5; /* very pale green */
  padding: 1rem;
  position: relative;
  grid-column: 2;
}

.sidebar-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--up-shadow);
  padding: 4px;
  margin-bottom: 20px;
 background: transparent !important;
}

.sidebar-card h3 {
  margin-top: 0;
  font-size: 1rem;
}

/* Sidebar nav title */
.sidebar-card__title{
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Clean list */
.sidebar-links{
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-links li{
  margin: 0.25rem 0;
  position: relative;
  padding-left: 0.9rem;  /* room for bullet */
}

.sidebar-links li::before{
  content: "\2022";          /* bullet */
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.2;
  opacity: 0.85;
}


/* Link styling: make it look like nav, not body text */
.sidebar-links a{
  font-weight: 600;
  text-decoration: none;
}

.sidebar-links a:hover{
  text-decoration: underline;
}

/* Current page: italic instead of underline */
.sidebar-links li.is-active a{
  font-style: italic;
  font-weight: 600;  /* keep same weight so italics do the work */
  text-decoration: none;
}



.sidebar-card--promo {
  border-left: 4px solid var(--up-accent);
}
/* Keep the logo (and any images) contained */
.comm-sidebar img{
  max-width:100%;
  height:auto;
  display:block;
}
@media (max-width: 900px) {
  .comm-layout {
    grid-template-columns: 1fr;
  }

  .comm-sidebar {
    order: 2; /* below main content */
  }
}


/* ---------- grid ---------- */
.up-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}

.up-cell { min-width: 0; }

/* optional hooks */
.up-cell--left {}
.up-cell--right {}




/* ---------- Component cards ---------- */
.up-card {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fff;
  padding: 12px 12px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.up-card__title{
  font-family: "Varela Round", sans-serif;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 8px 0;
}

.up-card__titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.up-card__actions{ position:relative; }

.up-actions-btn{
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.up-actions-icon {
  width: 40px;   /* ← this is the real knob */
  height: 40px;
  display: block;
  color: #3b51a3;
}

.up-card__actions.is-open .up-actions-icon{
  color: #1f2f73; /* slightly darker on open, optional */
}


.up-actions-menu{
  display:none;
  position:absolute;
  right:0;
  top:100%;
  margin-top:6px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  min-width:170px;
  z-index:50;
  overflow:hidden;
}

.up-actions-menu a,
.up-actions-menu button{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  background:transparent;
  cursor:pointer;
  font:inherit;
  color:inherit;
  text-decoration:none;
}

.up-actions-menu a:hover,
.up-actions-menu button:hover{
  background:rgba(0,0,0,.05);
}

.up-card__actions.is-open .up-actions-menu{ display:block; }


.up-card__body {
  display: flow-root;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}
.medianIncomeCommCountyCard{
  grid-column: 1 / span 2;   /* spans two columns */
}

.medianIncomeCountyCard .chartWrap{
  position: relative;
  height: 320px;   /* tweak for your grid row height */
  width: 100%;
}
.up-card--edu-note{
  background: #f1f8f3;   /* very light green */
  border: 1px solid #d9eee0;
}


/* Main paragraphs */
.up-card p {
  font-size: 17px;        /* bump from base 16 */
  line-height: 1.55;     /* more breathable */
  margin: 0 0 12px 0;
  color: #222;
}

/* Last paragraph tighter */
.up-card p:last-child {
  margin-bottom: 0;
}
.up-cell--full { grid-column: 1 / -1; }

.up-svgchart { display: block; width: 100%; height: auto; }

.up-axis { stroke: #999; stroke-width: 1; }
.up-axislabel, .up-xlabel { fill: #666; font-size: 12px; }

.up-line { fill: none; stroke: #c156c1; stroke-width: 2.5; }
.up-dot  { fill: #111; }

.up-source {
  margin-top: 6px;
  color: #777;
  font-size: 11px;
  line-height: 1.25;
}
.up-card__meta{
  margin-bottom: 0.9rem;  /* creates breathing room before SVG */
}

.comm-disambig{
  font-size: 0.95em;
    background-color: #c6e7c2; 
    padding: 10px; 
  opacity: 0.9;
  margin-top: 0.5rem;
}

/* ---------- Community thumbnail in commTextBox ---------- */

:root{
  --comm-thumb-width: 120px;  /* change this any time */
}

.comm-thumb{
  float: right;
  width: var(--comm-thumb-width);
  margin: 0 0 0.75rem 0.75rem;  /* space from text */
}

.comm-thumb img{
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- FRED API ---------- */

.up-kpi-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:0.95rem;
  margin-bottom:10px;
}

.up-spark{
  width:100%;
  height:auto;
  display:block;
  opacity:0.95;
}

.up-card__note{
  margin-top:8px;
  font-size:0.85rem;
  opacity:0.75;
}

.up-miniChart{
  width:100%;
  height:auto;
  display:block;
}

.imgSidebar {
padding: inherit;
margin: auto;
  width:100%;
text-align: center;
}

/* ---------- BAR CHART COLORS ---------- */

.up-bar {
  fill: #3b51a3;   /* normal bars - blue */
}

.up-bar--selected {
  fill: #fcba6f;   /* selected community - gold */
}

.up-bar-green {
  fill: #79ac7d;   /* normal bars - blue */
}


/* ---------- SMALL LABELS FOR TREE MAPS ---------- */
.tm-label-small {
  font: 7px/1.1 Roboto, Arial, sans-serif;
  fill: #ffffff;
  opacity: 0.9;
}
$breakLabels = [
  'Public safety',
  'General government',
  'Economic development'
];

if (in_array($label, $breakLabels)) {
  [$a, $b] = explode(' ', $label, 2);
  echo '<text class="treemap-label" x="'.$x.'" y="'.$y.'">
          <tspan x="'.$x.'" dy="0">'.$a.'</tspan>
          <tspan x="'.$x.'" dy="1.1em">'.$b.'</tspan>
        </text>';
} else {
  echo '<text class="treemap-label" x="'.$x.'" y="'.$y.'">'.$label.'</text>';
}
$shortLabels = [
  'Public safety' => 'Safety',
  'General government' => 'Govt'
];

$displayLabel = $shortLabels[$label] ?? $label;

/* --- Community navigation bar --- */

.comm-nav{
  background: #3b51a3;
  margin: 0;
}

.comm-nav__list{
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 18px;
  margin: 0;
  list-style: none;
}

.comm-nav__item a{
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  opacity: 0.9;
}

.comm-nav__item a:hover{
  opacity: 1;
  text-decoration: underline;
}

.comm-nav__item.is-active a{
  opacity: 1;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid #fff;
  padding-bottom: 2px;
}

/* push More to the right */
.comm-nav__item--more{
  margin-left: auto;
}

/* =========================================================
   Educational Attainment (final, clean)
   - Slim vertical bars
   - Numbers aligned across the top (not tied to bar height)
   - Diagonal x labels below bars
   ========================================================= */

.educattainv-chart--oneRow{
  display:flex;
  gap: 10px;
  align-items:flex-end;

  overflow-x: clip;
  overflow-y: visible;

   padding: 6px 8px 8px 18px; 
  min-height: 360px;
}

/* each category */
.educattainv-item{
  flex: 0 0 auto;
  width: 46px;
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;

  padding-bottom: 70px; /* reserved space for diagonal labels */
}

/* bars */
.educattainv-barwrap{
  width: 14px;
  height: 220px;
  position: relative;
}

.educattainv-bar{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background: var(--up-accent, #3b51a3);
  border-radius: 8px 8px 0 0;
}

/* numbers across the top */
.educattainv-val{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;              /* <-- THIS fixes your right-most value */
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin: 0;
  z-index: 5;
  background: #fff;
  padding: 0 3px;
}

/* x-axis labels */
.educattainv-lbl{
  position:absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) rotate(-35deg);
  transform-origin: left top;

  font-size: 12px;
  color:#222;
  white-space:nowrap;
}

/* keep chart inside card edge but allow labels */
.educattain-v .up-card__body{
  overflow-x: hidden;
  overflow-y: visible;
}

/* small screens */
@media (max-width: 900px){
  .educattainv-chart--oneRow{
    overflow-x: auto;
    padding-right: 28px;
    scrollbar-width: none;
  }
  .educattainv-chart--oneRow::-webkit-scrollbar{ height: 0; }
}

@media (max-width: 700px){
  .educattainv-barwrap{ height: 190px; }
  .educattainv-item{ padding-bottom: 64px; }
}

/* ---------- PHONE DISPLAY --------------- */

/* =========================
   Mobile layout fixes
   ========================= */
@media (max-width: 900px) {

  /* Force the two-column community layout to stack */
  .comm-layout{
    display: block !important;
  }

  .comm-main,
  .comm-sidebar{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Put sidebar AFTER main content on mobile (optional but recommended) */
  .comm-sidebar{
    order: 2;
    margin-top: 16px;
  }
  .comm-main{
    order: 1;
  }

  /* If comm-layout is flex in your CSS, make order work */
  .comm-layout{
    display: flex !important;
    flex-direction: column !important;
  }

  /* Make your internal grid single-column on mobile */
  .up-grid{
    grid-template-columns: 1fr !important;
  }

  /* Ensure cells don't force weird widths */
  .up-cell{
    min-width: 0;
  }
}
/* Charts/images should scale down instead of overflowing or collapsing */
.up-card svg,
.up-card canvas,
.up-card img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent grid/flex children from forcing overflow */
.comm-main,
.up-cell,
.up-card{
  min-width: 0;
}

/* If any wrapper is clipping charts, loosen it */
.up-card__body{
  overflow: visible;
}
/* Assessment bar list */
.assmt-card__header { padding-bottom: 6px; }
.assmt-card__title { margin: 0; }
.assmt-card__subtitle{
  margin-top: 4px;
  font-size: 0.95rem;
  opacity: 0.85;
}
.assmt-card__subtitle{ margin-top:4px; font-size:.95rem; opacity:.85; }
.assmt-card__source{ margin-top:10px; font-size:.9rem; opacity:.8; }


.assmt-bars{
  display: grid;
  gap: 10px;
}

.assmt-bars__row{
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) 3fr 56px;
  align-items: center;
  gap: 10px;
}

.assmt-bars__label{
  line-height: 1.15;
}

.assmt-bars__barwrap{
  height: 14px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}

.assmt-bars__bar{
  height: 100%;
  border-radius: 999px;
}

.assmt-bars__value{
  text-align: right;
  white-space: nowrap;
}


/* Mobile: give labels more room and let bars breathe */
@media (max-width: 700px){
  .assmt-bars__row{
    grid-template-columns: minmax(140px, 1.6fr) 3fr 52px;
  }
}
/* Education Row 2 layout helpers */
.edu-row{
  display: grid;
  gap: 16px;
}

.edu-row--twoCol{
  grid-template-columns: 1fr 1fr;
}

.edu-row--stacked{
  grid-template-columns: 1fr;
}

/* If you want “ELA only” to still fill the row even in twoCol contexts */
.edu-card--full{
  grid-column: 1 / -1;
}
/* Row 2 dynamic layout wrapper */
.edu-row2{
  display: grid;
  gap: 16px;
}

.edu-row2--twoCol{
  grid-template-columns: 1fr 1fr;
}

.edu-row2--stacked{
  grid-template-columns: 1fr;
}

/* Mobile: always stack */
@media (max-width: 800px){
  .edu-row2--twoCol{
    grid-template-columns: 1fr;
  }
}


/* =========================================
   Mobile: community page layout
   ========================================= */
@media (max-width: 900px){

  /* Ensure we size things based on the phone viewport */
  html, body { width: 100%; overflow-x: hidden; }

  /* 1) Collapse the 2-col community layout into a single column */
  .comm-layout{
    display: flex !important;
    flex-direction: column !important;
  }

  .comm-main,
  .comm-sidebar{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Put main first, sidebar second (if your sidebar is coming first) */
  .comm-main{ order: 1; }
  .comm-sidebar{ order: 2; }

  /* 2) Collapse internal grid to one column */
  .up-grid{
    grid-template-columns: 1fr !important;
  }

  /* 3) Prevent “sliver” behavior from grid/flex minimum sizing */
  .comm-main, .comm-sidebar, .up-cell, .up-card{
    min-width: 0 !important;
  }

  /* 4) Make charts/images responsive */
  .up-card svg,
  .up-card canvas,
  .up-card img{
    max-width: 100%;
    height: auto;
    display: block;
  }
}
/* =========================================
   Mobile fix: stop sidebar from taking over
   ========================================= */
@media (max-width: 900px){

  /* Force the community 2-col wrapper to become 1-col */
  .comm-layout{
    display: block !important;
  }

  /* Ensure both columns can actually shrink/stack */
  .comm-main,
  .comm-sidebar{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* If comm-layout is grid/flex on desktop, neutralize column behavior */
  .comm-layout{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  /* Make your internal content grid single-column on phones */
  .up-grid{
    grid-template-columns: 1fr !important;
  }

  /* Prevent “sliver” overflow effects */
  html, body{ overflow-x: hidden; }

  /* Make charts/images responsive */
  .up-card svg,
  .up-card canvas,
  .up-card img{
    max-width: 100%;
    height: auto;
    display: block;
  }
}
/* =================================================
   MOBILE OVERRIDES — Community pages only
   Fix sidebar squeezing main content
   ================================================= */
@media (max-width: 900px){

  .comm-layout{
    display: block !important;
  }

  .comm-main,
  .comm-sidebar{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .comm-layout{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  .up-grid{
    grid-template-columns: 1fr !important;
  }

  html, body{
    overflow-x: hidden;
  }

  .up-card svg,
  .up-card canvas,
  .up-card img{
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* ===== Global source / footnote styling ===== */

.up-source,
.up-footnote,
.educattainv-foot{
  font-size: .9rem;
  opacity:.8;
  margin-top:10px;
}
/* ============================= */
/* Standard Informational Text Box */
/* ============================= */

.up-textbox{
  background: #f1f8f3;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0;

  font-size: 0.95rem;
  line-height: 1.45;

  border: 1px solid rgba(0,0,0,.05);
}

.up-textbox__title{
  font-family: "Varela Round", sans-serif;
  font-size: 18px !important;
  margin: 0 0 8px 0;
}

.up-textbox ul{
  margin: 6px 0 0 18px;
  padding: 0;
}

.up-textbox li{
  margin: 2px 0;
}
.up-twoColList__meta{
  font-size: 0.92rem;
  opacity: .85;
  margin-top: 1px;
}

.trendLabel{
  font: 13px "Varela Round", sans-serif;
  fill:#111;
}

.trendPoint{
  fill:#111;
}

.trendLine{
  fill:none;
  stroke:#111;
  stroke-width:2.2;
}
.nearby-list{
  margin: 0;
  padding-left: 18px;
}

.nearby-list li{
  margin: 4px 0;
}
.up-grid--nearby{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px; /* main + narrow sidebar */
  gap: 16px;
  align-items: start;
}
.nearby-list--cols{
  columns: 2;
  column-gap: 24px;
  margin: 0;
  padding-left: 18px;
}

.nearby-list--cols li{
  break-inside: avoid;
  margin: 4px 0;
}

@media (max-width: 900px){
  .up-grid--nearby{
    grid-template-columns: 1fr; /* stack on mobile */
  }
}


/* ====================== */
/* Universal Headline Style */
/* ====================== */

.up-title{
  font-family: "Varela Round", sans-serif;
  font-size: 18px;
  margin: 0 0 8px 0;
  font-weight: 500;
}