/*
 * Hub colourways. Everything hub-coloured reads from the hub's colourway, set as data-hub="<colourway>" on <body>
 * (the colourway variables --hub, --hub-on and --hub-tint come from facelift.css). Pick a colourway on the hub page
 * and its nav, header, buttons, dots and accents follow; a new hub needs no new styles.
 *
 * Teal, Plum and Amber also keep the hand-tuned nav and theme modes from the Webflow design (body classes
 * st-neots / wimbledon / peterborough and the nav variants); every other colourway gets the same parts by formula.
 */
[data-hub] { --hub-ink: var(--hub-on); }

/* The colourway values again, after the homepage's own defaults, so hub cards and links take their hub's colour */
[data-hub=teal] { --hub: var(--_hub-colourways---hub--teal); --hub-on: var(--_hub-colourways---hub--teal--on); --hub-tint: var(--_hub-colourways---hub--teal--tint); --hub-ink: var(--_hub-colourways---hub--teal--on); }
[data-hub=amber] { --hub: var(--_hub-colourways---hub--amber); --hub-on: var(--_hub-colourways---hub--amber--on); --hub-tint: var(--_hub-colourways---hub--amber--tint); --hub-ink: var(--_hub-colourways---hub--amber--on); }
[data-hub=plum] { --hub: var(--_hub-colourways---hub--plum); --hub-on: var(--_hub-colourways---hub--plum--on); --hub-tint: var(--_hub-colourways---hub--plum--tint); --hub-ink: var(--_hub-colourways---hub--plum--on); }
[data-hub=coral] { --hub: var(--_hub-colourways---hub--coral); --hub-on: var(--_hub-colourways---hub--coral--on); --hub-tint: var(--_hub-colourways---hub--coral--tint); --hub-ink: var(--_hub-colourways---hub--coral--on); }
[data-hub=cobalt] { --hub: var(--_hub-colourways---hub--cobalt); --hub-on: var(--_hub-colourways---hub--cobalt--on); --hub-tint: var(--_hub-colourways---hub--cobalt--tint); --hub-ink: var(--_hub-colourways---hub--cobalt--on); }
[data-hub=forest] { --hub: var(--_hub-colourways---hub--forest); --hub-on: var(--_hub-colourways---hub--forest--on); --hub-tint: var(--_hub-colourways---hub--forest--tint); --hub-ink: var(--_hub-colourways---hub--forest--on); }
[data-hub=sky] { --hub: var(--_hub-colourways---hub--sky); --hub-on: var(--_hub-colourways---hub--sky--on); --hub-tint: var(--_hub-colourways---hub--sky--tint); --hub-ink: var(--_hub-colourways---hub--sky--on); }
[data-hub=rose] { --hub: var(--_hub-colourways---hub--rose); --hub-on: var(--_hub-colourways---hub--rose--on); --hub-tint: var(--_hub-colourways---hub--rose--tint); --hub-ink: var(--_hub-colourways---hub--rose--on); }
[data-hub=rust] { --hub: var(--_hub-colourways---hub--rust); --hub-on: var(--_hub-colourways---hub--rust--on); --hub-tint: var(--_hub-colourways---hub--rust--tint); --hub-ink: var(--_hub-colourways---hub--rust--on); }
[data-hub=lime] { --hub: var(--_hub-colourways---hub--lime); --hub-on: var(--_hub-colourways---hub--lime--on); --hub-tint: var(--_hub-colourways---hub--lime--tint); --hub-ink: var(--_hub-colourways---hub--lime--on); }
[data-hub=lilac] { --hub: var(--_hub-colourways---hub--lilac); --hub-on: var(--_hub-colourways---hub--lilac--on); --hub-tint: var(--_hub-colourways---hub--lilac--tint); --hub-ink: var(--_hub-colourways---hub--lilac--on); }
[data-hub=navy] { --hub: var(--_hub-colourways---hub--navy); --hub-on: var(--_hub-colourways---hub--navy--on); --hub-tint: var(--_hub-colourways---hub--navy--tint); --hub-ink: var(--_hub-colourways---hub--navy--on); }

/* Nav, hub row and older components (by formula, for colourways without a hand-tuned mode) */
body[data-hub]:not([data-hub=teal]):not([data-hub=plum]):not([data-hub=amber]),
body[data-hub]:not([data-hub=teal]):not([data-hub=plum]):not([data-hub=amber]) .ch-nav {
  --_hub-theme---colour--basebg: var(--hub);
  --_hub-theme---colour--btntext: var(--hub-on);
  --_hub-theme---colour--text: var(--hub-on);
  --_hub-theme---colour--logo: var(--hub-on);
  --_hub-theme---colour--accent: var(--hub-on);
  --_hub-theme---colour--btnbg: color-mix(in srgb, var(--hub) 78%, #17110d);
  --_hub-theme---colour--btnbg--hover: color-mix(in srgb, var(--hub) 62%, #17110d);
  --_hub-theme---colour--btnbg--active: color-mix(in srgb, var(--hub) 78%, #17110d);
  --_hub-theme---colour--pillactive: color-mix(in srgb, var(--hub-on) 24%, transparent);
  --_hub-theme---colour--pillhover: color-mix(in srgb, var(--hub-on) 12%, transparent);
  --_hub-theme---colour--rule: color-mix(in srgb, var(--hub-on) 22%, transparent);
  --_scemantic-colour---colour--bg--accent: var(--hub);
  --_scemantic-colour---colour--font--inverted: var(--hub-on);
}

/* Hub home header in the hub's colour, with buttons and chips that read on it */
[data-hub] .wg-hubhero { background-color: var(--hub); color: var(--hub-on); }
[data-hub] .wg-hubhero .wg-crumb, [data-hub] .wg-hubhero .wg-crumbs, [data-hub] .wg-hubhero .wg-eyebrow,
[data-hub] .wg-hubhero .wg-lede, [data-hub] .wg-hubhero .wg-hubname { color: var(--hub-on); }
[data-hub] .wg-hubhero .wg-btn { background-color: var(--hub-on); color: var(--hub); border-color: var(--hub-on); }
[data-hub] .wg-hubhero .wg-btn-line { color: var(--hub-on); border-color: var(--hub-on); background-color: transparent; }
[data-hub] .wg-hubhero .wg-chip { background-color: var(--hub-tint); color: #17110d; border-color: transparent; }

/* Small hub accents across the hub's pages */
[data-hub] .wg-eyebrow { color: color-mix(in srgb, var(--hub) 70%, #17110d); }
[data-hub] .wg-hubhero .wg-eyebrow { color: var(--hub-on); }
[data-hub] .wg-day, [data-hub] .wg-fig, [data-hub] .wg-col { border-top-color: var(--hub); }
[data-hub] .wg-sess-dot { background-color: var(--hub); }
[data-hub] .wg-disc { border-left-color: var(--hub); }
[data-hub] .wg-empty-icon { background-color: var(--hub-tint); }