/*
 * Hub colourways. A hub picks one of twelve colourways on its page in Wagtail; its nav, header, buttons,
 * weekly schedule, dot and accents all follow. The colourway is set as data-hub="<colourway>" on <body>.
 *
 * Teal, Plum and Amber keep the hand-tuned looks from the Webflow design (body classes st-neots / wimbledon /
 * peterborough plus nav and header variants). Every other colourway gets the same parts by formula below,
 * so a new hub needs no new styles.
 *
 * Each colourway has a base colour, a text colour that passes WCAG AA on it ("on"), and a light tint.
 */
:root {
  --_hub-colourways---hub--teal: #41c0a3;   --_hub-colourways---hub--teal--on: #17110d;   --_hub-colourways---hub--teal--tint: #e1f2ed;
  --_hub-colourways---hub--amber: #ec940d;  --_hub-colourways---hub--amber--on: #17110d;  --_hub-colourways---hub--amber--tint: #f9ecd8;
  --_hub-colourways---hub--plum: #44113f;   --_hub-colourways---hub--plum--on: #fff;      --_hub-colourways---hub--plum--tint: #e1d9df;
  --_hub-colourways---hub--coral: #f2785c;  --_hub-colourways---hub--coral--on: #17110d;  --_hub-colourways---hub--coral--tint: #fae8e3;
  --_hub-colourways---hub--cobalt: #2a4db3; --_hub-colourways---hub--cobalt--on: #fff;    --_hub-colourways---hub--cobalt--tint: #dee2ef;
  --_hub-colourways---hub--forest: #1e5a3e; --_hub-colourways---hub--forest--on: #fff;    --_hub-colourways---hub--forest--tint: #dce4df;
  --_hub-colourways---hub--sky: #7ec6ea;    --_hub-colourways---hub--sky--on: #17110d;    --_hub-colourways---hub--sky--tint: #eaf3f7;
  --_hub-colourways---hub--rose: #ec8fae;   --_hub-colourways---hub--rose--on: #17110d;   --_hub-colourways---hub--rose--tint: #f9ebee;
  --_hub-colourways---hub--rust: #9e3d1c;   --_hub-colourways---hub--rust--on: #fff;      --_hub-colourways---hub--rust--tint: #eee0da;
  --_hub-colourways---hub--lime: #bcd34c;   --_hub-colourways---hub--lime--on: #17110d;   --_hub-colourways---hub--lime--tint: #f2f5e1;
  --_hub-colourways---hub--lilac: #b8a4e3;  --_hub-colourways---hub--lilac--on: #17110d;  --_hub-colourways---hub--lilac--tint: #f2eef6;
  --_hub-colourways---hub--navy: #1b2b4b;   --_hub-colourways---hub--navy--on: #fff;      --_hub-colourways---hub--navy--tint: #dcdde1;
}

/* The current hub's colourway. --hub-btn is the button / chip colour that sits on the base colour:
   a lighter shade under dark text, a darker shade under white text. */
[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); }
[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); }
[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); }
[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); }
[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); }
[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); }
[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); }
[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); }
[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); }
[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); }
[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); }
[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); }

[data-hub=coral], [data-hub=sky], [data-hub=rose], [data-hub=lime], [data-hub=lilac] {
  --hub-btn: color-mix(in srgb, var(--hub) 62%, #fff);
  --hub-btn-hover: color-mix(in srgb, var(--hub) 40%, #fff);
}
[data-hub=cobalt], [data-hub=forest], [data-hub=rust], [data-hub=navy] {
  --hub-btn: color-mix(in srgb, var(--hub) 74%, #17110d);
  --hub-btn-hover: color-mix(in srgb, var(--hub) 56%, #17110d);
}

/* By formula, for colourways without a hand-tuned look: the same theme values the design sets for its own hubs,
   on the page, the nav and the hub header (the nav and header set their own defaults, so they're named here). */
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,
body[data-hub]:not([data-hub=teal]):not([data-hub=plum]):not([data-hub=amber]) .hub-header-hero {
  --_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: var(--hub-btn);
  --_hub-theme---colour--btnbg--hover: var(--hub-btn-hover);
  --_hub-theme---colour--btnbg--active: var(--hub-btn);
  --_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);
}

/* Email and LinkedIn under a person's bio */
.ch-person-links { margin-top: 1em; }