/* Tech Base Guide — design tokens and component rules
   Lifted from the prototype. Enqueue after theme.json's generated CSS.
   theme.json already emits --wp--preset--* variables; these aliases exist so the
   markup reads the same as the prototype and so non-block CSS can use them. */

:root {
  --color-bg: #f6f7f9;
  --color-surface: #eceef2;
  --color-text: #2a323c;
  --color-accent: #1a8ede;
  --color-divider: color-mix(in srgb, #2a323c 38%, transparent);

  --color-accent-100: #eef7fd;
  --color-accent-200: #d3ecfb;
  --color-accent-300: #abd9f6;
  --color-accent-400: #6cc0f1;
  --color-accent-500: #2ba0e6;
  --color-accent-600: #1179bd;
  --color-accent-700: #0d5f95;
  --color-accent-800: #0b4a73;
  --color-accent-900: #0b3856;

  --color-neutral-100: #f4f6f8;
  --color-neutral-200: #e7eaee;
  --color-neutral-300: #d3d8de;
  --color-neutral-400: #b4bbc4;
  --color-neutral-500: #949ca7;
  --color-neutral-600: #767e8a;
  --color-neutral-700: #5a626d;
  --color-neutral-800: #414850;
  --color-neutral-900: #2a323c;

  --font-heading: Archivo, system-ui, sans-serif;
  --font-body: Archivo, system-ui, sans-serif;

  --radius-md: 0px;
  --shadow-sm: 0 1px 2px rgba(42, 50, 60, .08);
  --shadow-md: 0 6px 18px rgba(42, 50, 60, .14);
  --shadow-lg: 0 18px 32px rgba(42, 50, 60, .22);

  --tbg-content: 1360px;
  --tbg-gutter: 40px;
  --tbg-rule: 2px solid var(--color-text);
  --tbg-rule-soft: 2px solid var(--color-divider);
  --tbg-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Base ─────────────────────────────────────────────── */

* { border-radius: 0 !important; }   /* remove once you trust the theme; the design has zero radius */

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

html { scroll-behavior: smooth; }

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

::selection { background: var(--color-accent-200); }

.tbg-wrap {
  max-width: var(--tbg-content);
  margin: 0 auto;
  padding: 0 var(--tbg-gutter);
}

.tbg-section { padding-top: 64px; }
.tbg-hr { border: 0; border-top: var(--tbg-rule); margin: 0; }

/* Inverted band — the only second background in the design */
.tbg-dark { background: var(--color-text); color: var(--color-bg); }
.tbg-dark a { color: var(--color-accent-400); }
.tbg-dark a:hover { color: #fff; }

/* ── Type ─────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
h3, h4 { font-weight: 700; }
h4 { letter-spacing: 0; }

.tbg-display { font-size: 56px; letter-spacing: -0.03em; }
.tbg-kicker,
.tbg-breadcrumb,
.tbg-statlabel {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tbg-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tbg-blurb { font-size: 15px; max-width: 68ch; }
.text-muted { color: var(--color-neutral-600); }

/* ── Grid of cells with drawn rules ───────────────────── */
/* 3-up. Rules are drawn per-cell via nth-child so a half-empty
   last row never leaves a floating divider. */

.tbg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tbg-grid > * {
  padding: 24px 24px 24px 0;
  border-top: var(--tbg-rule-soft);
}
.tbg-grid > *:not(:nth-child(3n)) { border-right: var(--tbg-rule-soft); }
.tbg-grid > *:nth-child(-n+3) { border-top: 0; }

@media (max-width: 1000px) {
  .tbg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbg-grid > *:not(:nth-child(3n)) { border-right: 0; }
  .tbg-grid > *:nth-child(odd) { border-right: var(--tbg-rule-soft); }
  .tbg-grid > *:nth-child(-n+3) { border-top: var(--tbg-rule-soft); }
  .tbg-grid > *:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 680px) {
  .tbg-grid { grid-template-columns: 1fr; }
  .tbg-grid > * { border-right: 0 !important; border-top: var(--tbg-rule-soft) !important; padding-right: 0; }
  .tbg-grid > *:first-child { border-top: 0 !important; }
}

/* Vertical divider cell (used in the mega menu and stat rows) */
.tbg-cell { border-left: var(--tbg-rule-soft); padding: 0 24px; }
.tbg-cell:first-child { border-left: 0; padding-left: 0; }

/* ── Stat row ─────────────────────────────────────────── */

.tbg-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tbg-stats > * { padding: 26px 24px; border-left: var(--tbg-rule-soft); }
.tbg-stats > *:first-child { padding-left: 0; border-left: 0; }
.tbg-stat-value { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.tbg-stat-label { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: .7; }

/* ── Card ─────────────────────────────────────────────── */

.tbg-card {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  transition: background .14s ease, transform .24s var(--tbg-ease), box-shadow .24s ease;
}
.tbg-card:hover {
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.tbg-card:hover h3,
.tbg-card:hover h4 { color: var(--color-accent); }
.tbg-card h3, .tbg-card h4 { transition: color .16s ease; }

.tbg-frame { overflow: hidden; }
.tbg-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--tbg-ease); }
.tbg-card:hover .tbg-frame img { transform: scale(1.04); }

.tbg-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* ── Tag chip ─────────────────────────────────────────── */

.tbg-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}
.tbg-tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tbg-tag-solid { background: var(--color-accent); color: var(--color-bg); }

/* ── Header / nav ─────────────────────────────────────── */

.tbg-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: var(--tbg-rule);
}
.tbg-wordmark { height: 32px; width: auto; display: block; mix-blend-mode: multiply; }

.tbg-nav-btn {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 24px 0;
  cursor: pointer;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 transparent;
  transition: box-shadow .12s, color .12s;
}
.tbg-nav-btn:hover,
.tbg-nav-btn[aria-expanded="true"] {
  color: var(--color-accent);
  box-shadow: inset 0 -3px 0 var(--color-accent);
}

/* Scroll progress */
.tbg-progress { height: 3px; background: transparent; }
.tbg-progress > span { display: block; height: 3px; background: var(--color-accent); width: 0; }

/* Search */
.tbg-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  border-bottom: var(--tbg-rule-soft);
  flex: 1 1 210px;
  min-width: 150px;
  max-width: 280px;
  transition: border-color .2s ease;
}
.tbg-search:hover { border-bottom-color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.tbg-search:focus-within { border-bottom-color: var(--color-accent); }
.tbg-search input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 0; font-size: 13px; }
.tbg-search svg { opacity: .5; flex: none; transition: color .2s ease, opacity .2s ease; }
.tbg-search:focus-within svg { color: var(--color-accent); opacity: 1; }

/* ── Mega menu ────────────────────────────────────────── */

.tbg-menu {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s var(--tbg-ease);
}
.tbg-menu[data-open] { max-height: 460px; }
.tbg-menu-panel {
  border-top: var(--tbg-rule);
  background: var(--color-neutral-100);
  box-shadow: var(--shadow-lg);
}
/* Both pillar panels stack; the active one cross-fades in */
.tbg-menu-pane { grid-area: 1 / 1; opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.tbg-menu-pane[data-active] { opacity: 1; pointer-events: auto; }
.tbg-menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
.tbg-mh { display: block; color: var(--color-accent-700); text-decoration: none; transition: color .16s ease; }
.tbg-mh:hover { color: var(--color-accent); }
.tbg-mi {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .12s, border-color .12s;
}
.tbg-mi:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

@media (max-width: 900px) {
  .tbg-menu-grid { grid-template-columns: 1fr; }
  .tbg-menu[data-open] { max-height: none; }
}

/* ── Filter chips ─────────────────────────────────────── */

.tbg-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: var(--tbg-rule);
  padding-bottom: 16px;
}
.tbg-chip {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 2px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.tbg-chip:hover { border-color: var(--color-text); }
.tbg-chip[aria-pressed="true"],
.tbg-chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* ── Jump nav (inside long articles) ──────────────────── */

.tbg-jump {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  padding: 14px 0;
  box-shadow: inset 0 -3px 0 transparent;
  transition: box-shadow .12s, color .12s;
}
.tbg-jump:hover { color: var(--color-accent); box-shadow: inset 0 -3px 0 var(--color-accent); }

/* ── Hero ─────────────────────────────────────────────── */

.tbg-hero { position: relative; border-bottom: var(--tbg-rule); overflow: hidden; }
.tbg-hero-photo { position: absolute; inset: -6% 0; }
.tbg-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.tbg-hero-scrim {
  position: relative;
  background: linear-gradient(90deg, rgba(42,50,60,.95) 0%, rgba(42,50,60,.90) 52%, rgba(42,50,60,.78) 100%);
  color: var(--color-bg);
}
.tbg-slide { transition: opacity .5s ease; }
.tbg-slide:not([data-active]) { opacity: 0; pointer-events: none; }

/* Carousel controls invert on hover — never blue on blue */
.tbg-cbtn {
  background: var(--color-accent);
  color: var(--color-bg);
  border: 2px solid var(--color-accent);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tbg-cbtn:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
.tbg-cbtn:active { background: var(--color-neutral-300); }
.tbg-dot { transition: background .18s ease; cursor: pointer; }
.tbg-dot:hover { background: var(--color-bg); }

/* ── Table ────────────────────────────────────────────── */

.tbg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbg-table th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 16px 14px 0;
  border-bottom: var(--tbg-rule);
}
.tbg-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.tbg-table tbody tr { transition: background .16s ease; }
.tbg-table tbody tr:hover { background: var(--color-accent-100); }

/* ── Motion ───────────────────────────────────────────── */

@keyframes tbgRise  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes tbgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tbgParallax {
  from { transform: translate3d(0, -5%, 0) scale(1.12); }
  to   { transform: translate3d(0,  5%, 0) scale(1.12); }
}

/* Scroll-linked reveal. Chrome honours this natively; other browsers show the
   final state, which is correct. Swap for IntersectionObserver if you'd rather
   have it everywhere. */
.tbg-reveal {
  animation: tbgRise .75s var(--tbg-ease) both;
  animation-timeline: view();
  animation-range: entry 2% entry 58%;
}
.tbg-hero-photo {
  animation: tbgParallax linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .tbg-card:hover { transform: none; }
}