/* ═══════════════════════════════════════════════════════════
   GO Knowledge Hub v23.0 — Stylesheet
   V23: brand color #00B4A6 everywhere (teal fix)
   Scoped under .go-hub-wrap to avoid Divi conflicts
   ═══════════════════════════════════════════════════════════ */

/* ─── CSS Variables ─────────────────────────────────────── */
.go-hub-wrap {
  /* Brand teal palette */
  --teal900:#00B4A6; --teal700:#00B4A6; --teal500:#00B4A6; --teal300:#00B4A6; --teal100:#e4f9f5;
  --teal-bg:#f0fffe;
  /* Categorical palette (GO brand) */
  --cat-blue:#0087bc; --cat-blue-light:#e6f4fa; --cat-blue-dark:#006a95;
  --cat-orange:#f18718; --cat-orange-light:#fef3e6; --cat-orange-dark:#c16a0a;
  --cat-magenta:#ce418d; --cat-magenta-light:#fae8f2; --cat-magenta-dark:#a32e6e;
  --cat-lime:#bfce00; --cat-lime-light:#f7f9e0; --cat-lime-dark:#8fa000;
  /* Extended categorical palette */
  --cat-red:#ff6766; --cat-red-light:#fff0f0; --cat-red-dark:#cc4444;
  --cat-darkred:#ba0000; --cat-darkred-light:#fde8e8; --cat-darkred-dark:#8a0000;
  --cat-steel:#648996; --cat-steel-light:#edf3f5; --cat-steel-dark:#4a6b75;
  --cat-green:#00be9a; --cat-green-light:#e6f9f4; --cat-green-dark:#008f74;
  /* Slate neutrals */
  --slate900:#0F172A; --slate800:#1E293B; --slate700:#334155; --slate600:#475569;
  --slate500:#64748B; --slate400:#94A3B8; --slate300:#CBD5E1; --slate200:#E2E8F0; --slate100:#F1F5F9;
}

/* ─── Hide Divi page title bar on HUB page ────────────── */
.page-template-hub-page .entry-title,
.page-template-hub-page .et_post_meta_wrapper,
.page-template-hub-page .et_pb_title_container,
.page-template-hub-page #main-content > .container:first-child {
  display: none !important;
}

/* ─── Reset Divi overrides ──────────────────────────────── */
.go-hub-wrap,
.go-hub-wrap *,
.go-hub-wrap *::before,
.go-hub-wrap *::after {
  box-sizing: border-box;
}

.go-hub-wrap {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--slate900);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  letter-spacing: normal;
  word-spacing: normal;
}

.go-hub-wrap h1,
.go-hub-wrap h2,
.go-hub-wrap h3,
.go-hub-wrap h4,
.go-hub-wrap p {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  padding-bottom: 0;
  margin: 0;
}

.go-hub-wrap button {
  font-family: inherit;
}

.go-hub-wrap ::selection {
  background: rgba(0, 180, 166, .3);
}

/* ─── Animations ────────────────────────────────────────── */
@keyframes go-hub-fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes go-hub-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes go-hub-fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes go-hub-spin {
  to { transform: rotate(360deg); }
}

/* ─── Breadcrumb ────────────────────────────────────────── */
.go-hub-wrap .hub-breadcrumb {
  padding: 12px 32px;
  border-bottom: 1px solid var(--slate200);
  background: #fff;
  position: relative;
  z-index: 1;
}

.go-hub-wrap .hub-breadcrumb__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}

.go-hub-wrap .hub-breadcrumb__sep {
  color: var(--slate400);
  padding: 0 2px;
}

.go-hub-wrap .hub-breadcrumb__link {
  color: var(--teal700);
  cursor: pointer;
  transition: color .2s;
  font-weight: 400;
  text-decoration: none;
}

.go-hub-wrap .hub-breadcrumb__link:hover {
  text-decoration: underline;
}

.go-hub-wrap .hub-breadcrumb__current {
  color: var(--slate800);
  font-weight: 600;
}

/* ─── Main container ────────────────────────────────────── */
.go-hub-wrap .hub-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 32px 60px;
}

.go-hub-wrap .hub-main.landing-mode {
  max-width: 1400px;
}

/* ─── App fade transition ──────────────────────────────── */
.go-hub-wrap #go-hub-app {
  transition: opacity .15s ease;
}

/* ─── Loading ───────────────────────────────────────────── */
.go-hub-wrap .hub-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--slate500);
}

.go-hub-wrap .hub-loading__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--slate200);
  border-top-color: var(--teal500);
  border-radius: 50%;
  animation: go-hub-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

/* ─── Landing / Hero ────────────────────────────────────── */
.go-hub-wrap .hub-landing {
  text-align: center;
  margin-bottom: 48px;
}

.go-hub-wrap .hub-landing__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 10px;
  background: var(--slate100);
  border: 1px solid var(--slate200);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  color: var(--teal700);
  margin-bottom: 24px;
}

.go-hub-wrap .hub-landing__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--teal500);
  border-radius: 50%;
  display: inline-block;
}

.go-hub-wrap .hub-landing__title {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 16px;
  color: var(--slate900);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.go-hub-wrap .hub-landing__title span {
  color: var(--teal500);
}

.go-hub-wrap .hub-landing__subtitle {
  font-size: 15px;
  color: var(--slate500);
  max-width: 550px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ─── Category Grid (Landing: 4 columns) ───────────────── */
.go-hub-wrap .hub-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1300px;
  margin: 0 auto;
}

/* V15: Big picture button on landing */
.go-hub-wrap .hub-landing__overview-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 24px;
  background: var(--teal500);
  color: #fff;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
}

.go-hub-wrap .hub-landing__overview-btn:hover {
  background: #F2F2F2;
  color: #00B4A6;
  transform: translateY(-1px);
}

.go-hub-wrap .hub-landing__overview-btn svg {
  width: 16px;
  height: 16px;
}

.go-hub-wrap .hub-category-card {
  background: #fff;
  border: 1px solid var(--slate200);
  padding: 24px 20px;
  border-radius: 20px;
  gap: 12px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-align: left;
  transition: all .4s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  overflow: hidden;
}

.go-hub-wrap .hub-category-card:hover {
  transform: translateY(-6px);
  background: var(--slate100);
}

.go-hub-wrap .hub-category-card__top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  opacity: 0;
  transition: opacity .4s;
}

.go-hub-wrap .hub-category-card:hover .hub-category-card__top-line {
  opacity: 1;
}

.go-hub-wrap .hub-category-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.go-hub-wrap .hub-category-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: transform .3s;
}

.go-hub-wrap .hub-category-card:hover .hub-category-card__icon {
  transform: scale(1.05);
}

.go-hub-wrap .hub-category-card__icon svg {
  width: 24px;
  height: 24px;
}

.go-hub-wrap .hub-category-card__label-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 6px 14px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 10px;
}

.go-hub-wrap .hub-category-card__name {
  font-size: 19px;
  font-weight: 700;
  color: var(--slate900);
  margin-bottom: 8px;
  line-height: 1.3;
}

.go-hub-wrap .hub-category-card__description {
  font-size: 13px;
  color: var(--slate500);
  line-height: 1.6;
}

/* ─── WYSIWYG content styling (rich text from ACF) ──────── */
.go-hub-wrap .hub-category-card__description p,
.go-hub-wrap .hub-topic-desc-box p,
.go-hub-wrap .hub-project-card__desc p {
  margin: 0 0 8px;
}
.go-hub-wrap .hub-category-card__description p:last-child,
.go-hub-wrap .hub-topic-desc-box p:last-child,
.go-hub-wrap .hub-project-card__desc p:last-child {
  margin-bottom: 0;
}
.go-hub-wrap .hub-category-card__description a,
.go-hub-wrap .hub-topic-desc-box a:not(.hub-read-more),
.go-hub-wrap .hub-project-card__desc a {
  color: var(--teal700);
  text-decoration: underline;
}
.go-hub-wrap .hub-category-card__description a:hover,
.go-hub-wrap .hub-topic-desc-box a:not(.hub-read-more):hover,
.go-hub-wrap .hub-project-card__desc a:hover {
  color: var(--teal900);
}
.go-hub-wrap .hub-category-card__description strong,
.go-hub-wrap .hub-topic-desc-box strong,
.go-hub-wrap .hub-project-card__desc strong {
  font-weight: 600;
  color: var(--slate700);
}
.go-hub-wrap .hub-category-card__description ul,
.go-hub-wrap .hub-topic-desc-box ul,
.go-hub-wrap .hub-project-card__desc ul {
  padding-left: 18px;
  margin: 6px 0;
}
.go-hub-wrap .hub-category-card__description li,
.go-hub-wrap .hub-topic-desc-box li,
.go-hub-wrap .hub-project-card__desc li {
  margin-bottom: 4px;
}

.go-hub-wrap .hub-category-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.go-hub-wrap .hub-category-card__meta {
  font-size: 12px;
  color: var(--slate500);
}

.go-hub-wrap .hub-category-card__explore {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  transition: gap .3s;
}

.go-hub-wrap .hub-category-card:hover .hub-category-card__explore {
  gap: 10px;
}

.go-hub-wrap .hub-category-card__explore svg {
  width: 18px;
  height: 18px;
}

/* ─── Selected Chips ────────────────────────────────────── */
.go-hub-wrap .hub-chips-row {
  display: flex;
  gap: 12px;
}

.go-hub-wrap .hub-selected-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 16px;
  border: 1px solid var(--slate200);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: all .3s cubic-bezier(.22, 1, .36, 1);
  width: 100%;
}

.go-hub-wrap .hub-selected-chip:hover {
  background: var(--slate100);
}

.go-hub-wrap .hub-chip-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.go-hub-wrap .hub-chip-icon svg {
  width: 24px;
  height: 24px;
}

.go-hub-wrap .hub-chip-icon-sm {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.go-hub-wrap .hub-chip-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.go-hub-wrap .hub-chip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate500);
}

.go-hub-wrap .hub-chip-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate900);
}

.go-hub-wrap .hub-chip-change {
  margin-left: auto;
  font-size: 12px;
  color: var(--slate400);
  font-weight: 500;
  padding: 4px 14px;
  border-radius: 50px;
  border: 1px solid var(--slate200);
  transition: all .2s;
  background: transparent;
  cursor: pointer;
}

.go-hub-wrap .hub-selected-chip:hover .hub-chip-change {
  color: var(--slate600);
  border-color: var(--slate300);
}

/* ─── Accordion sections ────────────────────────────────── */
.go-hub-wrap .hub-accordion-section {
  margin-bottom: 0;
}

/* ─── Section labels ────────────────────────────────────── */
.go-hub-wrap .hub-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate500);
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 12px;
}

/* ─── Topic Grid ────────────────────────────────────────── */
.go-hub-wrap .hub-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.go-hub-wrap .hub-topic-card {
  background: #fff;
  border: 1px solid var(--slate200);
  border-radius: 20px;
  padding: 22px 24px;
  cursor: pointer;
  text-align: left;
  transition: all .4s cubic-bezier(.22, 1, .36, 1);
}

.go-hub-wrap .hub-topic-card:hover {
  transform: translateY(-3px);
}

.go-hub-wrap .hub-topic-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.go-hub-wrap .hub-topic-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate900);
}

.go-hub-wrap .hub-topic-card__chevron {
  color: var(--slate500);
}

.go-hub-wrap .hub-topic-card__chevron svg {
  width: 16px;
  height: 16px;
}

.go-hub-wrap .hub-topic-card__meta {
  font-size: 12px;
  color: var(--slate500);
  margin-bottom: 12px;
}

.go-hub-wrap .hub-topic-card__desc {
  font-size: 12px;
  color: var(--slate500);
  line-height: 1.6;
  margin-bottom: 10px;
}

/* ─── Topic Description Box ─────────────────────────────── */
.go-hub-wrap .hub-topic-desc-box {
  background: var(--slate100);
  border: 1px solid var(--slate200);
  border-radius: 16px;
  padding: 18px 22px;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 13px;
  color: var(--slate600);
  line-height: 1.7;
}

.go-hub-wrap .hub-topic-desc-box .hub-read-more,
.go-hub-wrap .hub-project-card__desc .hub-read-more {
  color: var(--teal700);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-left: 4px;
}

.go-hub-wrap .hub-topic-desc-box .hub-read-more:hover,
.go-hub-wrap .hub-project-card__desc .hub-read-more:hover {
  text-decoration: underline;
}

/* ─── V20: Project description above viz ───────────────── */
.go-hub-wrap .hub-project-desc-box {
  background: var(--slate100);
  border: 1px solid var(--slate200);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--slate600);
  line-height: 1.7;
}

.go-hub-wrap .hub-project-desc-box .hub-read-more {
  color: var(--teal700);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-left: 4px;
}

.go-hub-wrap .hub-project-desc-box .hub-read-more:hover {
  text-decoration: underline;
}

/* ─── Projects Grid ─────────────────────────────────────── */
.go-hub-wrap .hub-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.go-hub-wrap .hub-project-card {
  background: #fff;
  border: 1px solid var(--slate200);
  border-radius: 20px;
  padding: 20px 22px;
  cursor: pointer;
  text-align: left;
  transition: all .3s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.go-hub-wrap .hub-project-card:hover {
  transform: translateY(-2px);
}

.go-hub-wrap .hub-project-card__icon {
  min-width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
}

.go-hub-wrap .hub-project-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate900);
  margin-bottom: 5px;
  line-height: 1.3;
}

.go-hub-wrap .hub-project-card__desc {
  font-size: 12px;
  color: var(--slate500);
  line-height: 1.5;
}

.go-hub-wrap .hub-project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.go-hub-wrap .hub-project-card__tag {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
  line-height: 1.4;
  white-space: nowrap;
}

.go-hub-wrap .hub-project-card__chevron {
  color: var(--slate600);
  margin-top: 4px;
}

.go-hub-wrap .hub-project-card__chevron svg {
  width: 16px;
  height: 16px;
}

/* ─── Coming Soon Box ───────────────────────────────────── */
.go-hub-wrap .hub-coming-soon {
  background: #fff;
  border: 1px solid var(--slate200);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
}

.go-hub-wrap .hub-coming-soon__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--teal500);
}

.go-hub-wrap .hub-coming-soon__icon svg {
  width: 24px;
  height: 24px;
}

.go-hub-wrap .hub-coming-soon__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate700);
  margin-bottom: 6px;
}

.go-hub-wrap .hub-coming-soon__text {
  font-size: 13px;
  color: var(--slate500);
  line-height: 1.6;
}

/* ─── Viz Container (iframe wrapper) ────────────────────── */
.go-hub-wrap .hub-viz-container {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--slate200);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}

.go-hub-wrap .hub-viz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--slate200);
}

.go-hub-wrap .hub-viz-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.go-hub-wrap .hub-viz-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.go-hub-wrap .hub-viz-date {
  font-size: 11px;
  color: var(--slate400);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.go-hub-wrap .hub-viz-date svg {
  width: 14px;
  height: 14px;
}

/* V14: Fullscreen button removed (replaced by Contribute) */

/* ─── Viz Tabs (multiple visualizations per project) ────── */
.go-hub-wrap .hub-viz-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid var(--slate200);
  overflow-x: auto;
}

.go-hub-wrap .hub-viz-tab {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 400;
  color: var(--slate600);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  font-family: inherit;
}

.go-hub-wrap .hub-viz-tab:hover {
  color: var(--slate800);
  background: var(--slate100);
}

.go-hub-wrap .hub-viz-tab.active {
  font-weight: 600;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

/* ─── Audience Filter Chips ────────────────────────────── */
.go-hub-wrap .hub-audience-filter {
  margin-bottom: 16px;
}

.go-hub-wrap .hub-aud-chip {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid var(--slate300);
  background: transparent;
  color: var(--slate600);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
  margin-right: 8px;
  margin-bottom: 8px;
}

.go-hub-wrap .hub-aud-chip:hover {
  border-color: var(--slate400);
  background: var(--slate100);
}

.go-hub-wrap .hub-aud-chip.active {
  font-weight: 600;
}

/* ─── Viz body (iframe area) ────────────────────────────── */
.go-hub-wrap .hub-viz-body {
  position: relative;
  min-height: 500px;
  background: #fff;
}

/* Default iframe height (Tableau, unknown embeds) */
.go-hub-wrap .hub-viz-body iframe {
  width: 100%;
  height: 700px;
  border: none;
  display: block;
}
/* Flourish iframes: height managed dynamically via postMessage relay (V9) */
.go-hub-wrap .hub-viz-body iframe[data-go-hub-flourish] {
  height: auto;
  min-height: 500px;
}

.go-hub-wrap .hub-viz-embed-container {
  width: 100%;
  min-height: 500px;
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* V21: Center Tableau vizs that are narrower than the container */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Flourish embeds: ensure they fill the container */
.go-hub-wrap .hub-viz-embed-container .flourish-embed {
  width: 100% !important;
  min-height: 600px;
}

/* Tableau embeds: center and allow vertical scroll */
.go-hub-wrap .hub-viz-embed-container .tableauPlaceholder {
  width: 100% !important;
  min-height: 800px;
  /* V21: Override Tableau's inline height to show full content (map + cards) */
  height: auto !important;
  overflow: visible !important;
}

/* V21: Additional Tableau fixes — center viz and allow scroll for tall dashboards */
.go-hub-wrap .hub-viz-embed-container .tableauViz,
.go-hub-wrap .hub-viz-embed-container object.tableauViz {
  width: auto !important;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.go-hub-wrap .hub-viz-embed-container .tableauPlaceholder iframe {
  width: 100% !important;
  /* V21: Increase height to show full dashboard including lists below maps */
  min-height: 900px;
}

/* V21: When Tableau is injected as raw HTML (not in tableauPlaceholder), center it */
.go-hub-wrap .hub-viz-embed-container > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.go-hub-wrap .hub-viz-embed-container > object,
.go-hub-wrap .hub-viz-embed-container > iframe {
  display: block;
  margin: 0 auto;
}

/* ─── Viz placeholder (coming soon in dashboard) ────────── */
.go-hub-wrap .hub-viz-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--slate400);
  text-align: center;
  padding: 40px;
}

.go-hub-wrap .hub-viz-placeholder__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--teal500);
}

.go-hub-wrap .hub-viz-placeholder__icon svg {
  width: 24px;
  height: 24px;
}

.go-hub-wrap .hub-viz-placeholder__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--slate600);
  margin-bottom: 6px;
}

.go-hub-wrap .hub-viz-placeholder__sub {
  font-size: 12px;
  color: var(--slate400);
}

/* ─── Viz loading spinner ───────────────────────────────── */
.go-hub-wrap .hub-viz-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: #fafbfb;
}

.go-hub-wrap .hub-viz-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--slate200);
  border-top-color: var(--teal500);
  border-radius: 50%;
  animation: go-hub-spin 0.8s linear infinite;
  margin-bottom: 12px;
}

.go-hub-wrap .hub-viz-loading__text {
  font-size: 13px;
  color: var(--slate500);
}

/* ─── Meta Cards (Data Source, Methodology, Contribute) ─── */
.go-hub-wrap .hub-meta-cards {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.go-hub-wrap .hub-meta-card {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  border: 1px solid var(--slate200);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all .3s cubic-bezier(.22, 1, .36, 1);
  cursor: pointer;
  text-decoration: none;
}

.go-hub-wrap .hub-meta-card:hover {
  transform: translateY(-2px);
  opacity: .85;
}

.go-hub-wrap .hub-meta-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

.go-hub-wrap .hub-meta-card__icon svg {
  width: 20px;
  height: 20px;
}

.go-hub-wrap .hub-meta-card__label {
  font-size: 10px;
  color: var(--slate500);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.go-hub-wrap .hub-meta-card__value {
  font-size: 13px;
  color: var(--slate800);
  font-weight: 500;
}

.go-hub-wrap .hub-meta-card.contribute:hover {
  opacity: .9;
}

/* V21: Disabled meta card (e.g. Data button when no URL) */
.go-hub-wrap .hub-meta-card--disabled {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* ═══ V15: Overview Tree View ═══════════════════════════════ */

/* V19: Back to Hub button */
.go-hub-wrap .hub-overview-back {
  margin-bottom: 16px;
}

.go-hub-wrap .hub-overview-back__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--slate100);
  border: 1px solid var(--slate200);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  color: var(--teal700);
  text-decoration: none;
  transition: all .2s;
}

.go-hub-wrap .hub-overview-back__btn:hover {
  background: var(--teal100);
  border-color: var(--teal300);
}

.go-hub-wrap .hub-overview-header {
  text-align: center;
  margin-bottom: 48px;
  padding-top: 8px;
}

.go-hub-wrap .hub-overview-header__title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--slate900);
  line-height: 1.2;
  margin-bottom: 12px;
}

.go-hub-wrap .hub-overview-header__sub {
  font-size: 15px;
  color: var(--slate500);
  max-width: 550px;
  margin: 0 auto;
  line-height: 1.7;
}

.go-hub-wrap .hub-overview-tree {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

/* ─── Category block ────────── */
.go-hub-wrap .hub-overview-cat {
  background: #fff;
  border: 1px solid var(--slate200);
  border-left: 4px solid var(--teal500);
  border-radius: 16px;
  padding: 28px 32px;
  transition: box-shadow .3s;
}

.go-hub-wrap .hub-overview-cat:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
}

.go-hub-wrap .hub-overview-cat__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.go-hub-wrap .hub-overview-cat__icon {
  min-width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.go-hub-wrap .hub-overview-cat__icon svg {
  width: 22px;
  height: 22px;
}

.go-hub-wrap .hub-overview-cat__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 4px;
}

.go-hub-wrap .hub-overview-cat__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--slate900);
  line-height: 1.3;
  margin: 0;
}

.go-hub-wrap .hub-overview-cat__desc {
  font-size: 13px;
  color: var(--slate500);
  line-height: 1.7;
  margin: 0 0 16px;
  padding-left: 64px;
}

/* ─── Topics ────────── */
.go-hub-wrap .hub-overview-topics {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
  padding-left: 24px;
}

.go-hub-wrap .hub-overview-topic {
  border-left: 2px solid var(--slate200);
  padding-left: 20px;
}

.go-hub-wrap .hub-overview-topic__name {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.go-hub-wrap .hub-overview-topic__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Projects ────────── */
.go-hub-wrap .hub-overview-projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.go-hub-wrap .hub-overview-project {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--slate100);
  border: 1px solid var(--slate200);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: all .2s;
  position: relative;
}

.go-hub-wrap .hub-overview-project:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.go-hub-wrap .hub-overview-project__body {
  flex: 1;
  min-width: 0;          /* allow text truncation inside flex */
  overflow: hidden;
}

.go-hub-wrap .hub-overview-project__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate900);
  line-height: 1.3;
  margin-bottom: 3px;
}

.go-hub-wrap .hub-overview-project__desc {
  font-size: 11px;
  color: var(--slate500);
  line-height: 1.5;
}

.go-hub-wrap .hub-overview-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.go-hub-wrap .hub-overview-project__tag {
  font-size: 9px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}

.go-hub-wrap .hub-overview-project__arrow {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: .4;
  transition: opacity .2s;
}

.go-hub-wrap .hub-overview-project:hover .hub-overview-project__arrow {
  opacity: 1;
}

.go-hub-wrap .hub-overview-empty {
  font-size: 12px;
  color: var(--slate400);
  font-style: italic;
  margin: 4px 0 0;
}

/* ─── Footer stats ────────── */
.go-hub-wrap .hub-overview-footer {
  text-align: center;
  margin-top: 40px;
  padding-bottom: 20px;
  font-size: 13px;
  color: var(--slate400);
  font-weight: 500;
}

.go-hub-wrap .hub-overview-footer__sep {
  margin: 0 10px;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .go-hub-wrap .hub-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .go-hub-wrap .hub-categories,
  .go-hub-wrap .hub-topics-grid {
    grid-template-columns: 1fr;
  }
  .go-hub-wrap .hub-breadcrumb,
  .go-hub-wrap .hub-main {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* V15: Overview responsive */
  .go-hub-wrap .hub-overview-cat {
    padding: 20px 18px;
  }
  .go-hub-wrap .hub-overview-cat__desc {
    padding-left: 0;
  }
  .go-hub-wrap .hub-overview-topics {
    padding-left: 12px;
  }
  .go-hub-wrap .hub-overview-projects {
    grid-template-columns: 1fr;
  }
  .go-hub-wrap .hub-viz-body iframe {
    height: 400px;
  }
  .go-hub-wrap .hub-meta-cards {
    flex-direction: column;
  }
  .go-hub-wrap .hub-viz-tabs {
    padding: 0 12px;
  }
  .go-hub-wrap .hub-selected-chip {
    padding: 10px 14px;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .go-hub-wrap .hub-category-card {
    padding: 20px 18px;
  }
  .go-hub-wrap .hub-category-card__name {
    font-size: 16px;
  }
  .go-hub-wrap .hub-viz-body iframe {
    height: 300px;
  }
}

/* ─── V26.2.1: full-bleed alignment for the Resource Library / directory ───
   The Resource Library and the directory break out of the theme container and
   centre their content in a 1520px wrap with 40px gutters (see .go-reslib in
   resources.css). The navigation above them must sit on that same content box,
   otherwise it stays inside the narrower Divi column and reads as misaligned.

   The gutter lives on the section, never on its children. hub.js emits three
   different shapes at this level (the Category chip inside a .hub-chips-row,
   the Topic and Project chips as bare buttons, plus labels, grids and module
   hosts), so padding any direct child would land on the button box itself for
   some of them and shift them outwards. That is what happened to the Project
   button in V26.2.

   50vw - 720px reproduces the module's content edge exactly: (100vw - 1520)/2
   for the wrap, plus its 40px gutter. Below 1520px the max() falls back to the
   flat 40px the wrap uses there. The section stays centred in the viewport, so
   a module nested inside it still breaks out correctly.
   The class is toggled in hub.js on every render. */
.go-hub-wrap .hub-fullbleed .hub-accordion-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(40px, calc(50vw - 720px));
  padding-right: max(40px, calc(50vw - 720px));
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .go-hub-wrap .hub-fullbleed .hub-accordion-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}