/* Hub chrome v1: the parts every Hub Culture ecosystem site shares.
   Canonical copy: hubculture.com/c/hub-chrome/hub-chrome.css (hub/Hub c/hub-chrome/).
   Sites keep a copy and update it with their sync script; never edit a copy
   in place. Each site restyles it only through the --hub-* variables, so it
   keeps that site's own colours and fonts. Markup and rules: README.md. */

/* ---- The globe slot: far left of every header, before the site's logo ---- */
.hub-globe-slot {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: 8px;
}
.hub-globe-slot .globe { display: inline-flex; padding: 8px; border-radius: 50%; line-height: 0; }
.hub-globe-slot .globe:hover, .hub-globe-slot .globe:focus-visible { background: var(--hub-globe-hover, rgba(0, 0, 0, 0.06)); }
.hub-globe-slot .globe svg { fill: var(--hub-globe-ink, #9d9d9d); }

/* Sites that draw the globe themselves: a click outside the open drawer closes it. */
.hub-globe-backdrop { position: fixed; inset: 0; z-index: 98; background: transparent; }

/* ---- The footer ---- */
.hub-footer {
  --hub-footer-bg: #111827;
  --hub-footer-ink: #f5f5f4;
  --hub-footer-muted: rgba(245, 245, 244, 0.66);
  --hub-footer-rule: rgba(245, 245, 244, 0.14);
  --hub-footer-accent: #ffffff;
  --hub-footer-tile: rgba(255, 255, 255, 0.06);
  --hub-footer-font: inherit;
  --hub-footer-display: inherit;
  background: var(--hub-footer-bg);
  color: var(--hub-footer-ink);
  font-family: var(--hub-footer-font);
  font-size: 15px;
  line-height: 1.6;
}
.hub-footer *, .hub-footer *::before, .hub-footer *::after { box-sizing: border-box; }
.hub-footer a { color: inherit; text-decoration: none; }
.hub-footer a:hover { color: var(--hub-footer-accent); text-decoration: underline; text-underline-offset: 3px; }
.hub-footer a:focus-visible { outline: 2px solid var(--hub-footer-accent); outline-offset: 3px; border-radius: 4px; }
.hub-footer ul { list-style: none; margin: 0; padding: 0; }
.hub-footer h2, .hub-footer h3 { margin: 0; }
.hub-footer__inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* 1. The site's own part: brand, its columns and its call to action. */
.hub-footer__site { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(0, 2fr); gap: 48px; padding: 64px 0 48px; }
.hub-footer__name { font-family: var(--hub-footer-display); font-size: 26px; line-height: 1.2; color: var(--hub-footer-ink); }
.hub-footer__tagline { color: var(--hub-footer-muted); margin: 10px 0 20px; max-width: 360px; }
.hub-footer__cta { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--hub-footer-accent); color: var(--hub-footer-bg) !important; font-weight: 600; font-size: 14px; }
.hub-footer__cta:hover { text-decoration: none !important; opacity: 0.9; }
.hub-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 32px 24px; }
.hub-footer__col-title, .hub-footer__eco-title { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-footer-muted); margin-bottom: 14px; }
.hub-footer__col li { margin-bottom: 10px; }

/* 2. The ecosystem: the same sites as the globe, this one marked. */
.hub-footer__eco { border-top: 1px solid var(--hub-footer-rule); padding: 32px 0; }
.hub-footer__eco-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hub-footer__eco-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; line-height: 1.25; }
.hub-footer__eco-list a:hover { background: var(--hub-footer-tile); text-decoration: none; }
.hub-footer__eco-list a[aria-current="true"] { background: var(--hub-footer-tile); color: var(--hub-footer-accent); font-weight: 600; }
.hub-footer__eco-list img { flex: none; width: 28px; height: 28px; border-radius: 6px; object-fit: cover; background: #ffffff; }

/* 3. Hub Culture: the shared links, legal line and social. */
.hub-footer__hub { border-top: 1px solid var(--hub-footer-rule); padding: 24px 0 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; font-size: 14px; color: var(--hub-footer-muted); }
.hub-footer__hub-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hub-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.hub-footer__social { display: flex; gap: 14px; }
.hub-footer__social svg { width: 20px; height: 20px; fill: currentColor; display: block; }

@media (max-width: 860px) {
  .hub-footer__site { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
  .hub-footer__hub { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-footer * { transition: none !important; }
}