/*
  BLACKBX hand-off components (templates/Includes/BlackbxServiceBox.ss and
  BlackbxBridge.ss).

  Plain CSS in its own file, linked from Page.ss after style.css, on purpose:
  style.css is compiled from src/scss by an old gulp/node-sass toolchain, and
  rebuilding it for two small components would risk changing everything else.
  Colours are the theme's own ($color-dark #000, $color-white #fff,
  $color-cyan #67f9dd in src/scss/style.scss).
*/

:root {
  --blackbx-ink: #000000;
  --blackbx-paper: #ffffff;
  --blackbx-accent: #67f9dd;
  --blackbx-muted: rgba(255, 255, 255, 0.72);
}

/* ---- End-of-article box (Services pages) -------------------------------- */

.blackbx-box {
  margin-top: 3rem;
  max-width: 45rem;
  padding: 2rem 2rem 2.25rem;
  background: var(--blackbx-ink);
  color: var(--blackbx-paper);
  border-radius: 0.25rem;
}

.blackbx-box p {
  margin: 0;
  max-width: none;
  color: inherit;
  /* The theme's content paragraph size (.title-group p in src/scss/_base.scss:
     rem-calc(16), line-height 24/16); the page body itself is 20px. */
  font-size: 1rem;
  line-height: 1.5;
}

/* Type is the theme's own: the heading is an h2 styled as the theme's .h4
   (Moderat), the label is sized like the theme's .subtitle and the body is a
   plain theme paragraph (Neue Haas Unica). Only colour and spacing are set
   here, because the panel is black inside a white section. */
.blackbx-box .blackbx-box__label {
  font-weight: 400;
  color: var(--blackbx-muted);
  margin-bottom: 0.625rem;
}

.blackbx-box .blackbx-box__heading {
  color: var(--blackbx-paper);
  margin: 0 0 0.75rem;
}

.blackbx-box .blackbx-box__body {
  color: var(--blackbx-muted);
  margin-bottom: 1.75rem;
}

/* The theme's white outline pill only turns white inside .section.bg-black
   (style.css); the same three rules, scoped to the panel. */
.blackbx-box .button-outline-white {
  color: var(--blackbx-paper);
  background-color: transparent;
  border: 2px solid var(--blackbx-paper);
}

.blackbx-box .button-outline-white .button-fill {
  background-color: var(--blackbx-paper);
}

.blackbx-box .button-outline-white:hover .button-text-inner,
.blackbx-box .button-outline-white:focus-visible .button-text-inner {
  transition: color 0.3s ease-in 0.1s;
  color: var(--blackbx-ink);
}

/* Keyboard focus: the theme slides .button-fill in on mouseenter only
   (src/js/script.js), so fill the button here or the black text would sit
   on the black panel. */
.blackbx-box .button-outline-white:focus-visible {
  background-color: var(--blackbx-paper);
  outline: 2px solid var(--blackbx-accent);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .blackbx-box {
    margin-top: 2rem;
    padding: 1.5rem 1.25rem 1.75rem;
  }
}

/* ---- Bridge (UnDigital service pages) ----------------------------------
   The same panel, full column width, at the bottom of the page just above
   FooterTop. The section keeps the theme's normal padding, so the panel
   stands clear of the grey or black section that ends the page. */

.blackbx-box.blackbx-box--bridge {
  margin-top: 0;
  max-width: none;
}

/* Screen-reader-only text, scoped so it can't collide with theme rules. */
.blackbx-box .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}