/*
Theme Name: Beyond 210
Theme URI: https://example.com/beyond-210
Author: Beyond 210
Description: A block theme for development news. Built around a status system — filed, in review, approved, permitted, building — with a project tracker, hearing agendas, and a stage bar that shows how far along anything is. Ships with the Overpass typeface bundled locally, so no external font requests.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beyond-210
Tags: news, blog, block-patterns, full-site-editing, custom-colors, custom-logo
*/

:root {
  --b210-navy: #1B3A4B;
  --b210-green: #3E6B52;
  --b210-orange: #E8541E;
  --b210-paper: #F2EDE4;
  --b210-card: #FBF9F5;
  --b210-slate: #6B7A81;
  --b210-hairline: #D8D0BF;
  --b210-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

body { -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------- masthead */
.b210-masthead {
  border-bottom: 2px solid var(--b210-navy);
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--b210-paper);
}
.b210-masthead .wp-block-site-logo img { max-width: 172px; height: auto; }
.b210-nav a {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.b210-nav a:hover { border-bottom-color: var(--b210-orange); }

/* ticker strip under the masthead */
.b210-ticker {
  background: var(--b210-navy);
  color: var(--b210-paper);
  font-family: var(--b210-mono);
  font-size: .6875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.b210-ticker p { margin: 0; padding: .55rem 0; }
.b210-ticker strong { color: #9FB3BC; font-weight: 400; }

/* ---------------------------------------------------------- eyebrows */
.b210-eyebrow {
  font-family: var(--b210-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--b210-green);
  margin: 0 0 .6rem;
}
.b210-section-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--b210-green);
  margin: 0 0 1.35rem;
}
.b210-section-head::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--b210-orange);
}

/* ---------------------------------------------------------- status chips */
.b210-chip,
.wp-block-post-terms.is-style-b210-chips a {
  display: inline-block;
  font-family: var(--b210-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--b210-paper);
  background: var(--b210-navy);
  padding: .25rem .55rem;
  border-radius: 3px;
  text-decoration: none;
  line-height: 1.5;
}
.wp-block-post-terms.is-style-b210-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wp-block-post-terms.is-style-b210-chips .wp-block-post-terms__separator { display: none; }

/* status colours are set by the taxonomy slug, added as a body/term class */
.b210-chip--approved,
.term-approved .b210-chip,
.wp-block-post-terms.is-style-b210-chips a[href*="approved"] { background: var(--b210-green); }
.b210-chip--building,
.wp-block-post-terms.is-style-b210-chips a[href*="building"],
.wp-block-post-terms.is-style-b210-chips a[href*="construction"] { background: var(--b210-orange); }
.b210-chip--filed,
.b210-chip--review { background: var(--b210-navy); }

/* ---------------------------------------------------------- stage bar */
/* Five segments: filed, review, approved, permitted, building.
   Set data-stage="0".."4" on .b210-stage. Reads as lane markings. */
.b210-stage { margin: 1rem 0 0; max-width: 460px; }
.b210-stage__segs { display: flex; gap: 3px; align-items: flex-end; }
.b210-stage__seg {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: var(--b210-hairline);
}
.b210-stage[data-stage="1"] .b210-stage__seg:nth-child(-n+1),
.b210-stage[data-stage="2"] .b210-stage__seg:nth-child(-n+2),
.b210-stage[data-stage="3"] .b210-stage__seg:nth-child(-n+3),
.b210-stage[data-stage="4"] .b210-stage__seg:nth-child(-n+4) { background: var(--b210-green); }
.b210-stage[data-stage="0"] .b210-stage__seg:nth-child(1),
.b210-stage[data-stage="1"] .b210-stage__seg:nth-child(2),
.b210-stage[data-stage="2"] .b210-stage__seg:nth-child(3),
.b210-stage[data-stage="3"] .b210-stage__seg:nth-child(4),
.b210-stage[data-stage="4"] .b210-stage__seg:nth-child(5) { background: var(--b210-orange); height: 13px; }
.b210-stage__labels {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-family: var(--b210-mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--b210-slate);
}
.b210-stage--mini { max-width: none; margin-top: .8rem; }
.b210-stage--mini .b210-stage__seg { height: 6px; }
.b210-stage--mini .b210-stage__labels { display: none; }

/* ---------------------------------------------------------- cards & lists */
.b210-card {
  background: var(--b210-card);
  border: 1px solid var(--b210-hairline);
  border-radius: 10px;
  padding: 1.15rem;
  height: 100%;
}
.b210-card h3 { margin: .8rem 0 0; letter-spacing: -.01em; }
.b210-card p {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--b210-slate);
  margin: .55rem 0 0;
}
.b210-meta {
  font-family: var(--b210-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--b210-slate);
  margin-top: .9rem;
}

/* query loop rows on archives */
.b210-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--b210-hairline);
}
.b210-row h3 { margin: 0; }

/* ---------------------------------------------------------- tracker table */
.b210-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.b210-table th {
  font-family: var(--b210-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--b210-slate);
  text-align: left;
  padding: 0 .75rem .6rem 0;
  border-bottom: 2px solid var(--b210-navy);
}
.b210-table td {
  padding: .95rem .75rem .95rem 0;
  border-bottom: 1px solid var(--b210-hairline);
  vertical-align: top;
}
.b210-table tr:hover td { background: rgba(62,107,82,.05); }
.b210-table .proj { font-weight: 700; }
.b210-table .devl {
  font-family: var(--b210-mono);
  font-size: .6875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--b210-slate);
  margin-top: .2rem;
}
.b210-table .num { font-family: var(--b210-mono); white-space: nowrap; }
@media (max-width: 719px) { .b210-table .hide-sm { display: none; } }

/* ---------------------------------------------------------- agenda list */
.b210-hearing {
  display: flex;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--b210-hairline);
  align-items: baseline;
}
.b210-hearing .date {
  font-family: var(--b210-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--b210-paper);
  background: var(--b210-navy);
  padding: .3rem .5rem;
  border-radius: 3px;
  flex: none;
}
.b210-hearing .what { font-weight: 600; line-height: 1.4; }
.b210-hearing .where {
  font-family: var(--b210-mono);
  font-size: .6875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--b210-slate);
  margin-top: .25rem;
}

/* ---------------------------------------------------------- signup blade */
/* Same construction as the logo: a colour field with a keyline set in. */
.b210-blade { background: var(--b210-green); border-radius: 10px; padding: 12px; }
.b210-blade__inner {
  border: 1.5px solid rgba(242,237,228,.55);
  border-radius: 5px;
  padding: 2rem 1.4rem;
  text-align: center;
  color: var(--b210-paper);
}
.b210-blade__inner h2 { margin: 0; color: var(--b210-paper); }
.b210-blade__inner p {
  font-family: Georgia, "Iowan Old Style", serif;
  margin: .75rem auto 1.25rem;
  max-width: 44ch;
  color: rgba(242,237,228,.86);
}

/* ---------------------------------------------------------- footer */
.b210-footer { background: var(--b210-navy); color: var(--b210-paper); }
.b210-footer a { color: rgba(242,237,228,.8); }
.b210-footer a:hover { color: var(--b210-orange); }
.b210-footer .wp-block-site-logo img { max-width: 190px; height: auto; }
.b210-colophon {
  font-family: var(--b210-mono);
  font-size: .6875rem;
  letter-spacing: .05em;
  color: #7E93A0;
  border-top: 1px solid rgba(242,237,228,.16);
  padding-top: 1rem;
  margin-top: 1.6rem;
}

/* ---------------------------------------------------------- misc */
.b210-plat {
  border: 1px solid var(--b210-hairline);
  border-radius: 8px;
  overflow: hidden;
  background: #DED8CA;
}
.b210-plat svg { display: block; width: 100%; height: auto; }

.wp-block-post-title a { text-decoration: none; }
.wp-block-post-featured-image img { border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}