/*
 * Build Digital colour preview (0.51.0), off by default.
 *
 * Two looks a reviewer can turn on with ?look=bd-bands or ?look=bd-tints
 * (bd-look.js). Every rule here is scoped to the class that script puts on
 * <html>, or to the preview pill it builds, so a page without a look renders
 * exactly as before. The persona detail pages and their Overview don't load
 * this file.
 *
 * Colour comes only from the shared tokens (design-tokens.css): magenta,
 * deep teal and blue, as the three hubs. The tints are those tokens mixed
 * with white; no other colour is introduced.
 *
 * Contrast: white on the BD blue is about 4:1, so blue carries large
 * headings, borders and rules only, never body text, links or controls.
 * Small text that names Digi Innovate is set in ink.
 *
 * Full width: the Navigator's blank template puts <main> straight under
 * <body> (no theme page box), and plugin-shell.css clips sideways overflow
 * on <html>. A band is drawn with border-image outset, which paints past
 * the content column without adding scrollable width or clipping the
 * filter menus that hang below the controls.
 */

/* --- Shared by both looks: colour follows the hubs ------------------- */

:root.bdk-look {
  --bdk-look-adopt-tint: color-mix(in srgb, var(--bdk-color-pillar-adopt) 7%, var(--bdk-color-white));
  --bdk-look-implement-tint: color-mix(in srgb, var(--bdk-color-pillar-implement) 7%, var(--bdk-color-white));
  --bdk-look-innovate-tint: color-mix(in srgb, var(--bdk-color-pillar-innovate) 9%, var(--bdk-color-white));
  --bdk-look-on-colour: var(--bdk-color-white);
  --bdk-look-hairline: color-mix(in srgb, var(--bdk-color-white) 45%, transparent);
}

/* Adoption pathway: Step 1 Make the case is Digi Adopt, Step 2 Plan your
   adoption Digi Implement, Step 3 Enable it with technology Digi Innovate. */
:root.bdk-look .bdk-pathway__stepper li:nth-child(1),
:root.bdk-look .bdk-pathway__steps > .bdk-pathway__step:nth-of-type(1) {
  --bdk-look-hub: var(--bdk-color-pillar-adopt);
  --bdk-look-hub-tint: var(--bdk-look-adopt-tint);
}

:root.bdk-look .bdk-pathway__stepper li:nth-child(2),
:root.bdk-look .bdk-pathway__steps > .bdk-pathway__step:nth-of-type(2) {
  --bdk-look-hub: var(--bdk-color-pillar-implement);
  --bdk-look-hub-tint: var(--bdk-look-implement-tint);
  --bdk-pathway-accent: var(--bdk-color-pillar-implement);
  --bdk-pathway-accent-ink: var(--bdk-color-pillar-implement);
}

:root.bdk-look .bdk-pathway__stepper li:nth-child(3),
:root.bdk-look .bdk-pathway__steps > .bdk-pathway__step:nth-of-type(3) {
  --bdk-look-hub: var(--bdk-color-pillar-innovate);
  --bdk-look-hub-tint: var(--bdk-look-innovate-tint);
  --bdk-pathway-accent: var(--bdk-color-pillar-innovate);
  /* Blue is too light for small text on white. */
  --bdk-pathway-accent-ink: var(--bdk-color-ink);
}

/* The step number is set large enough that white on blue passes as large
   text (AA, 3:1). */
:root.bdk-look .bdk-pathway__number {
  font-size: 1.1875rem;
}

:root.bdk-look .bdk-pathway__number--large {
  font-size: 1.625rem;
}

/* The hub buttons: each wears its hub's colour. A chosen hub takes its tint
   and a double rule rather than a fill, so the count stays ink on every hub
   (white on the blue fill would fail AA at this size). */
:root.bdk-look .bdk-navigator-panel .bdk-demo__pillar-filters button {
  border-color: var(--bdk-pillar-choice-color);
  color: var(--bdk-color-ink);
}

:root.bdk-look .bdk-navigator-panel .bdk-demo__pillar-filters button[data-bdk-pillar-choice="adopt"] {
  --bdk-look-choice-tint: var(--bdk-look-adopt-tint);
}

:root.bdk-look .bdk-navigator-panel .bdk-demo__pillar-filters button[data-bdk-pillar-choice="implement"],
:root.bdk-look .bdk-navigator-panel .bdk-demo__pillar-filters button:first-child {
  --bdk-look-choice-tint: var(--bdk-look-implement-tint);
}

:root.bdk-look .bdk-navigator-panel .bdk-demo__pillar-filters button[data-bdk-pillar-choice="innovate"] {
  --bdk-look-choice-tint: var(--bdk-look-innovate-tint);
}

:root.bdk-look .bdk-navigator-panel .bdk-demo__pillar-filters button:hover {
  background: var(--bdk-look-choice-tint);
}

:root.bdk-look .bdk-navigator-panel .bdk-demo__pillar-filters button[aria-pressed="true"] {
  border-color: var(--bdk-pillar-choice-color);
  background: var(--bdk-look-choice-tint);
  box-shadow: inset 0 0 0 1px var(--bdk-pillar-choice-color);
  color: var(--bdk-color-ink);
  font-weight: 700;
}

:root.bdk-look .bdk-navigator-panel .bdk-demo__pillar-filters button[aria-pressed="true"] img {
  filter: none;
}

/* Small text in a Digi Innovate colour is set in ink: the blue is 3.96:1
   on white. The blue stays on the card's edge and arrow. These fail AA on
   the default page too; the looks put them right. */
:root.bdk-look .bdk-demo-card--material[data-pillar^="innovate"] .bdk-demo-card__primary-copy strong {
  color: var(--bdk-color-ink);
}

:root.bdk-look .bdk-research-card--conference .bdk-research-card__chip--type {
  background: var(--bdk-look-innovate-tint);
  color: var(--bdk-color-ink);
}

:root.bdk-look .bdk-research-card--conference .bdk-research-card__primary,
:root.bdk-look .bdk-research-card--conference .bdk-research-card__primary:hover,
:root.bdk-look .bdk-research-card--conference .bdk-research-card__primary:focus-visible {
  color: var(--bdk-color-ink) !important;
}

:root.bdk-look .bdk-research-card--conference .bdk-research-card__primary:hover,
:root.bdk-look .bdk-research-card--conference .bdk-research-card__primary:focus-visible {
  background: var(--bdk-look-innovate-tint);
}

/* The hero's small type, full white so it passes on magenta. */
:root.bdk-look .bdk-navigator-panel .bdk-demo__hero .bdk-demo__eyebrow,
:root.bdk-look .bdk-navigator-panel .bdk-demo__hero.bdk-demo__hero--catalogue > p:last-child {
  color: var(--bdk-look-on-colour);
  opacity: 1;
}

/* --- bd-bands: full-width colour bands, as on builddigital.ie ---------- */

:root.bdk-look--bd-bands body.bdk-plugin-shell,
:root.bdk-look--bd-bands {
  background: var(--bdk-color-white);
}

:root.bdk-look--bd-bands .bdk-demo {
  padding-top: 0;
  padding-bottom: 0;
}

/* The panel's frame gives way to bands: the panel itself is a white band,
   ruled off below, and its tabs and title paint the magenta over it. */
:root.bdk-look--bd-bands .bdk-navigator-panel {
  margin-bottom: 2.25rem;
  border: 0;
  border-radius: 0;
  border-image: linear-gradient(to top, var(--bdk-color-border) 1px, var(--bdk-color-white) 1px) fill 0 / 0 / 0 100vmax;
  background: var(--bdk-color-white);
}

/* Magenta masthead: the tabs and the title, with the ring from the logo. */
:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__journeys,
:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__hero.bdk-demo__hero--catalogue {
  border-image: linear-gradient(var(--bdk-color-magenta) 0 0) fill 0 / 0 / 0 100vmax;
}

:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__journeys {
  min-height: 0;
  gap: 6px;
  align-items: center;
  padding: 18px 0 6px;
  border-bottom: 0;
  border-radius: 0;
  background: var(--bdk-color-magenta);
}

:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__journeys a {
  height: 36px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--bdk-look-hairline);
  border-radius: 4px;
  background: transparent;
  color: var(--bdk-look-on-colour);
  font-weight: 500;
}

:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__journeys a:hover {
  border-color: var(--bdk-look-on-colour);
  background: transparent;
  color: var(--bdk-look-on-colour);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__journeys a[aria-current="page"]:not(.bdk-demo__journey-secondary) {
  height: 36px;
  padding: 0 16px;
  border-color: var(--bdk-look-on-colour);
  background: var(--bdk-look-on-colour);
  color: var(--bdk-color-magenta);
  font-weight: 700;
}

:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__journeys a[aria-current="page"]:not(.bdk-demo__journey-secondary)::after {
  content: none;
}

/* On colour, the focus ring is white. */
:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__journeys a:focus-visible,
:root.bdk-look--bd-bands .bdk-pathway__next a:focus-visible,
:root.bdk-look--bd-bands .bdk-demo__banner--footer a:focus-visible {
  outline: 3px solid var(--bdk-look-on-colour);
  outline-offset: 2px;
}

:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__hero.bdk-demo__hero--catalogue {
  gap: 32px;
  margin-top: 0;
  padding: 30px 0 38px;
}

:root.bdk-look--bd-bands .bdk-navigator-panel__title {
  flex-direction: column-reverse;
  gap: 10px;
  padding: 0;
  border-left: 0;
}

:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__hero.bdk-demo__hero--catalogue h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
}

:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__hero.bdk-demo__hero--catalogue > p:last-child {
  max-width: 34rem;
  margin-left: auto;
  font-size: 1.0625rem;
  font-weight: 300;
}

/* The ring motif (assets/brand/brand-ribbons.svg, the logo's ribbons),
   faint white, cut off by the title's own box (overflow: hidden) so it adds
   no sideways scroll. */
:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__hero.bdk-demo__hero--catalogue::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -7rem;
  width: 26rem;
  aspect-ratio: 1;
  background: var(--bdk-look-on-colour);
  content: "";
  mask: url("../brand/brand-ribbons.svg") center / contain no-repeat;
  opacity: 0.14;
  pointer-events: none;
  transform: translateY(-50%) rotate(-8deg);
}

/* The controls sit on the panel's white band. */
:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__tools,
:root.bdk-look--bd-bands.bdk-look .bdk-client-demo--courses .bdk-navigator-panel .bdk-demo__tools {
  padding-inline: 0;
  border-bottom: 0;
  background: var(--bdk-color-white);
}

:root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__pillar-filters {
  padding-inline: 0;
}

:root.bdk-look--bd-bands .bdk-navigator-panel > .bdk-course-finder {
  margin-top: 18px;
}

/* Adoption pathway: the steps strip sits on white under the masthead,
   each step card topped by its hub. */
:root.bdk-look--bd-bands .bdk-pathway__stepper {
  padding-inline: 0;
  border-top: 0;
}

:root.bdk-look--bd-bands .bdk-pathway__stepper a {
  border-top-width: 6px;
  border-top-color: var(--bdk-look-hub);
}

/* Each step opens on a band in its hub's colour that carries the number
   and the step's heading (large type, so white passes on the blue too).
   The step's label, lead and outcomes follow on white. */
:root.bdk-look--bd-bands .bdk-pathway__step-head {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "number title"
    ". eyebrow"
    ". lead"
    ". outcomes";
  gap: 0.5rem 1.25rem;
  align-items: center;
  padding-bottom: 0;
  border-bottom: 0;
}

:root.bdk-look--bd-bands .bdk-pathway__step-head > div {
  display: contents;
}

:root.bdk-look--bd-bands .bdk-pathway__step-head > .bdk-pathway__number {
  position: relative;
  z-index: 1;
  grid-area: number;
  background: var(--bdk-look-on-colour);
  color: var(--bdk-look-hub);
}

:root.bdk-look--bd-bands .bdk-pathway__step-head h2 {
  grid-area: title;
  margin-bottom: 0.75rem;
  padding: 1.5rem 0;
  border-image: linear-gradient(var(--bdk-look-hub) 0 0) fill 0 / 0 / 0 100vmax;
  background: var(--bdk-look-hub);
  color: var(--bdk-look-on-colour);
  font-size: 2rem;
}

:root.bdk-look--bd-bands .bdk-pathway__step-head > .bdk-pathway__number {
  margin-bottom: 0.75rem;
}

:root.bdk-look--bd-bands .bdk-pathway__step-head .bdk-pathway__eyebrow {
  grid-area: eyebrow;
}

:root.bdk-look--bd-bands .bdk-pathway__step-head p:not(.bdk-pathway__eyebrow) {
  grid-area: lead;
}

:root.bdk-look--bd-bands .bdk-pathway__step-head .bdk-pathway__outcomes {
  grid-area: outcomes;
}

:root.bdk-look--bd-bands .bdk-pathway__steps {
  gap: 3rem;
}

/* Deep-teal close: what to do next on the pathway, and the attribution
   line on every tab. */
:root.bdk-look--bd-bands .bdk-pathway__next {
  margin-top: 1.5rem;
  padding-inline: 0;
  border-image: linear-gradient(var(--bdk-color-deep-teal) 0 0) fill 0 / 0 / 0 100vmax;
}

:root.bdk-look--bd-bands .bdk-demo__banner--footer {
  margin-top: 3rem;
  padding: 1.5rem 0 2rem;
  border: 0;
  border-radius: 0;
  border-image: linear-gradient(var(--bdk-color-deep-teal) 0 0) fill 0 / 0 / 0 100vmax;
  background: var(--bdk-color-deep-teal);
  color: var(--bdk-look-on-colour);
}

:root.bdk-look--bd-bands .bdk-pathway__next + .bdk-demo__banner--footer,
:root.bdk-look--bd-bands .bdk-pathway__layout + .bdk-material-video + .bdk-demo__banner--footer,
:root.bdk-look--bd-bands .bdk-pathway__layout ~ .bdk-demo__banner--footer {
  margin-top: 0;
  padding-top: 0.5rem;
}

:root.bdk-look--bd-bands .bdk-pathway__layout {
  margin-bottom: 0;
}

@media (max-width: 64rem) {
  :root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__hero.bdk-demo__hero--catalogue {
    gap: 14px;
    padding: 22px 0 26px;
  }

  :root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__hero.bdk-demo__hero--catalogue > p:last-child {
    max-width: 40rem;
    margin-left: 0;
    padding: 0;
  }
}

@media (max-width: 48rem) {
  :root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__journeys {
    padding: 12px 0 4px;
  }

  :root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__journeys a:not(.bdk-demo__journey-secondary) {
    padding-inline: 12px;
  }

  :root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__hero.bdk-demo__hero--catalogue::after {
    right: -9rem;
    width: 18rem;
  }

  :root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__tools,
  :root.bdk-look--bd-bands .bdk-navigator-panel .bdk-demo__pillar-filters {
    padding-inline: 0;
  }

  :root.bdk-look--bd-bands .bdk-pathway__step-head h2 {
    padding: 1.125rem 0;
    font-size: 1.5rem;
  }
}

/* --- bd-tints: light tints behind sections, the cards stay the focus --- */

:root.bdk-look--bd-tints body.bdk-plugin-shell,
:root.bdk-look--bd-tints {
  background: var(--bdk-color-white);
}

/* The panel sits on a magenta tint that runs the full width. The tint is
   the panel's border image, pushed out past the column; the panel's own
   children cover it inside, and the outline keeps the panel's edge. */
:root.bdk-look--bd-tints .bdk-demo {
  padding-top: 1.5rem;
}

:root.bdk-look--bd-tints .bdk-navigator-panel {
  border-image: linear-gradient(var(--bdk-look-adopt-tint) 0 0) fill 0 / 0 / 1.5rem 100vmax 0.625rem;
  outline: 1px solid var(--bdk-color-border-warm);
  outline-offset: -1px;
}

:root.bdk-look--bd-tints .bdk-navigator-panel .bdk-demo__journeys,
:root.bdk-look--bd-tints .bdk-navigator-panel .bdk-demo__tools,
:root.bdk-look--bd-tints.bdk-look .bdk-client-demo--courses .bdk-navigator-panel .bdk-demo__tools {
  background: var(--bdk-color-white);
}

:root.bdk-look--bd-tints .bdk-navigator-panel .bdk-demo__pillar-filters button {
  background: var(--bdk-look-choice-tint);
}

/* Adoption pathway: each step on its hub's tint, the full width. */
:root.bdk-look--bd-tints .bdk-pathway__stepper a {
  border-top-width: 5px;
  background: var(--bdk-look-hub-tint);
}

:root.bdk-look--bd-tints .bdk-pathway__steps {
  gap: 0;
}

:root.bdk-look--bd-tints .bdk-pathway__step {
  padding: 2.5rem 0 3rem;
  border-image: linear-gradient(var(--bdk-look-hub-tint) 0 0) fill 0 / 0 / 0 100vmax;
}

:root.bdk-look--bd-tints .bdk-pathway__step-head {
  border-bottom-width: 3px;
}

:root.bdk-look--bd-tints .bdk-pathway__howto,
:root.bdk-look--bd-tints .bdk-pathway__before,
:root.bdk-look--bd-tints .bdk-pathway__panel {
  border-color: var(--bdk-color-border-warm);
}

:root.bdk-look--bd-tints .bdk-pathway__next {
  margin-top: 1.5rem;
}

/* The attribution line closes on a deep-teal tint. */
:root.bdk-look--bd-tints .bdk-demo {
  padding-bottom: 0;
}

:root.bdk-look--bd-tints .bdk-demo__banner--footer {
  padding: 1.25rem 0 1.75rem;
  border: 0;
  border-radius: 0;
  border-image: linear-gradient(var(--bdk-look-implement-tint) 0 0) fill 0 / 0 / 0 100vmax;
  background: var(--bdk-look-implement-tint);
}

/* --- The preview pill -------------------------------------------------
   Built by bd-look.js only while a look is on. Fixed in the lower-left
   corner on wide screens (the site's chat button takes the right); on a
   phone it is a bar at the top of the page, in the flow, so it covers
   nothing. */

.bdk-look-pill {
  position: fixed;
  z-index: 100000;
  bottom: 16px;
  left: 16px;
  display: flex;
  box-sizing: border-box;
  gap: 2px;
  align-items: center;
  padding: 4px 4px 4px 14px;
  border-radius: 999px;
  background: var(--bdk-color-ink);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--bdk-color-ink) 35%, transparent);
  color: var(--bdk-color-white);
  font-family: var(--bdk-font-interface);
  font-size: 13px;
  line-height: 1;
}

.bdk-look-pill__label {
  margin-right: 6px;
  font-weight: 700;
}

.bdk-look-pill__choice {
  min-width: 44px;
  min-height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bdk-color-white);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
}

.bdk-look-pill__choice:hover {
  background: color-mix(in srgb, var(--bdk-color-white) 16%, transparent);
}

.bdk-look-pill__choice[aria-pressed="true"] {
  background: var(--bdk-color-white);
  color: var(--bdk-color-ink);
  font-weight: 700;
}

.bdk-look-pill__choice:focus-visible {
  outline: 2px solid var(--bdk-color-white);
  outline-offset: 2px;
}

@media (max-width: 48rem) {
  .bdk-look-pill {
    position: static;
    justify-content: center;
    width: 100%;
    padding: 6px 8px;
    border-radius: 0;
    box-shadow: none;
  }
}

@media print {
  .bdk-look-pill {
    display: none;
  }
}