/* The federal banner. It renders inside any theme, so every rule is
   anchored on the banner's own root with id-level specificity, the root
   resets everything it inherits (all: initial), and its children start
   from the browser defaults (all: revert). !important appears only on
   properties themes force with !important on links, selects and focus.
   Sizes are in em from the banner's own root (font-size: medium), so a
   theme's html { font-size: 62.5% } does not shrink it.
   The settings form shows the same markup as .fedbanner--preview. */

/* ---- Root and presets ---------------------------------------------- */
:is(#fedbanner, .fedbanner--preview) {
  all: initial;
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: var(--fedbanner-z, 499);
  margin: 0;
  container: fedbanner / inline-size;
  background: var(--fedbanner-bg);
  color: var(--fedbanner-fg);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: medium;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
}
/* For editors: the admin toolbar or Navigation sidebar (Gin) moves the page
   canvas aside and publishes its width; the banner sits outside that canvas,
   so it moves aside by the same offsets. 0 for visitors. Not for the
   previews on the settings form, which sit inside the canvas. */
#fedbanner {
  margin: 0 var(--drupal-displace-offset-right, 0px) 0 var(--drupal-displace-offset-left, 0px);
}
/* From 64rem the Navigation module's top bar (also under Gin) is fixed at the
   top and pushes the page canvas down with a top margin of the same size; the
   banner sits between the bar and the canvas, so it moves below the bar, and
   its negative bottom margin cancels the canvas margin (they collapse).
   Narrower, the bar is part of the page and the banner simply follows it. */
@media (min-width: 64rem) {
  html:has(.top-bar[data-drupal-admin-styles]) #fedbanner.fedbanner--top {
    margin-block: var(--drupal-displace-offset-top, 0px) calc(-1 * var(--drupal-displace-offset-top, 0px));
  }
}
:is(#fedbanner, .fedbanner--preview) :where(*:not(svg, svg *)) {
  all: revert;
  box-sizing: border-box;
}
/* Driekleur (the default): white, the current language dark with a gold
   line under it. */
:is(#fedbanner, .fedbanner--preview).fedbanner--preset-driekleur {
  --fedbanner-bg: #ffffff;
  --fedbanner-fg: #3b4252;
  --fedbanner-link: #14213d;
  --fedbanner-muted: #4a5263;
  --fedbanner-accent: #e8b10d;
  --fedbanner-control: #6b7280;
  --fedbanner-focus: #003ecc;
  --fedbanner-lang: #1f7c93;
  --fedbanner-current-bg: #454545;
  --fedbanner-current-fg: #ffffff;
  border-bottom: 1px solid #e3e6ec;
}
/* The black-yellow-red line along the top: an option (style.tricolour), on
   any look. */
:is(#fedbanner, .fedbanner--preview).fedbanner--tricolour::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #1b1b1b 0 33.33%, #e8b10d 33.33% 66.66%, #d6262f 66.66% 100%);
}
/* Marine: a navy band, the codes in an outlined pill. */
:is(#fedbanner, .fedbanner--preview).fedbanner--preset-marine {
  --fedbanner-bg: #14213d;
  --fedbanner-fg: #dfe4ee;
  --fedbanner-link: #ffffff;
  --fedbanner-muted: #dfe4ee;
  --fedbanner-accent: #ffffff;
  --fedbanner-control: #8f9ab3;
  --fedbanner-focus: #e8b10d;
  --fedbanner-lang: #dfe4ee;
  --fedbanner-current-bg: #ffffff;
  --fedbanner-current-fg: #14213d;
}
/* Sober: quiet light grey. */
:is(#fedbanner, .fedbanner--preview).fedbanner--preset-sober {
  --fedbanner-bg: #f4f5f7;
  --fedbanner-fg: #4a5263;
  --fedbanner-link: #14213d;
  --fedbanner-muted: #4a5263;
  --fedbanner-accent: #14213d;
  --fedbanner-control: #6b7280;
  --fedbanner-focus: #003ecc;
  --fedbanner-lang: #1b6f84;
  --fedbanner-current-bg: #454545;
  --fedbanner-current-fg: #ffffff;
  border-bottom: 1px solid #e3e6ec;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--bottom.fedbanner--preset-driekleur,
:is(#fedbanner, .fedbanner--preview).fedbanner--bottom.fedbanner--preset-sober {
  border-bottom: 0;
  border-top: 1px solid #e3e6ec;
}

/* ---- Layout -------------------------------------------------------- */
:is(#fedbanner, .fedbanner--preview) .fedbanner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.375em 1.5em;
  max-width: var(--fedbanner-max-w, 80em);
  min-block-size: 2.75em;
  margin: 0 auto;
  padding: 0.25em var(--fedbanner-pad-inline, 1.5em);
}
:is(#fedbanner, .fedbanner--preview).fedbanner--width-full .fedbanner__inner {
  max-width: none;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--density-compact .fedbanner__inner {
  min-block-size: 2.25em;
  padding-block: 0.125em;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--density-comfortable .fedbanner__inner {
  min-block-size: 3.25em;
  padding-block: 0.5em;
}

/* The black-yellow-red line under the content only (style.edges:
   content, the default) or the full width. The bottom border always runs
   the full width. */
:is(#fedbanner, .fedbanner--preview).fedbanner--edges-content.fedbanner--tricolour::before {
  content: none;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--edges-content.fedbanner--tricolour .fedbanner__inner {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #1b1b1b 0 33.33%, #e8b10d 33.33% 66.66%, #d6262f 66.66% 100%) 1;
  border-image-width: 3px 0 0 0;
}

/* ---- The sentence and the belgium.be link --------------------------- */
:is(#fedbanner, .fedbanner--preview) .fedbanner__official {
  margin: 0;
  padding: 0;
  color: var(--fedbanner-fg);
  font-size: 0.8125em;
  line-height: 1.4;
}
:is(#fedbanner, .fedbanner--preview) .fedbanner__belgium {
  color: var(--fedbanner-link) !important; /* themes colour links with !important */
  background: none !important;
  font-weight: inherit;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--preset-marine .fedbanner__belgium {
  text-decoration-color: #e8b10d !important;
}
/* The .be mark after www.belgium.be: decorative, inside the link; the
   letters take the link colour, the yellow and red stay. */
:is(#fedbanner, .fedbanner--preview) .fedbanner__logo {
  display: inline-block;
  width: auto;
  height: 1.2em;
  margin-left: 0.5em;
  vertical-align: -0.2em;
  overflow: visible;
}
:is(#fedbanner, .fedbanner--preview) .fedbanner__logo-ink {
  fill: var(--fedbanner-link);
}

/* ---- The language list --------------------------------------------- */
:is(#fedbanner, .fedbanner--preview) .fedbanner__switcher {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
:is(#fedbanner, .fedbanner--preview) .fedbanner__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(#fedbanner, .fedbanner--preview) .fedbanner__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(#fedbanner, .fedbanner--preview) .fedbanner__item::marker,
:is(#fedbanner, .fedbanner--preview) .fedbanner__item::before {
  content: none;
}
/* The languages: shared base. The look (switcher.look) decides how the
   current language and the others show: box (the default, as on
   kanselarij.belgium.be: the current one in a filled box), underline (a
   gold line under the current one), pill (an outlined pill, the current one
   filled) or plain (words, the current one bold). */
:is(#fedbanner, .fedbanner--preview) .fedbanner__lang {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25em;
  min-inline-size: 24px;
  margin: 0;
  padding: 0 0.75em;
  border: 0 !important; /* themes border and colour links with !important */
  border-radius: 0;
  background: none !important;
  color: var(--fedbanner-muted) !important;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  transition: color 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--codes-upper .fedbanner__code {
  text-transform: uppercase;
}
/* Box: the current one in a filled box with slightly rounded corners, the
   others as links; hovering one fills it the same way. */
:is(#fedbanner, .fedbanner--preview).fedbanner--look-box .fedbanner__list {
  gap: 0.25em;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--look-box .fedbanner__lang {
  min-block-size: 2.25em;
  padding: 0 0.75em;
  border-radius: 4px;
  color: var(--fedbanner-lang) !important;
  font-size: 0.875em;
  font-weight: 400;
  letter-spacing: 0.02em;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--look-box a.fedbanner__lang:hover,
:is(#fedbanner, .fedbanner--preview).fedbanner--look-box .fedbanner__lang--current {
  background: var(--fedbanner-current-bg) !important;
  color: var(--fedbanner-current-fg) !important;
}
/* Underline: a gold (accent) line under the current one. */
:is(#fedbanner, .fedbanner--preview).fedbanner--look-underline .fedbanner__lang {
  padding-top: 0.125em;
  border-bottom: 2px solid transparent !important;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--look-underline a.fedbanner__lang:hover {
  color: var(--fedbanner-link) !important;
  border-bottom-color: var(--fedbanner-control) !important;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--look-underline .fedbanner__lang--current {
  color: var(--fedbanner-link) !important;
  border-bottom-color: var(--fedbanner-accent) !important;
}
/* Pill: an outlined pill, the current one filled. */
:is(#fedbanner, .fedbanner--preview).fedbanner--look-pill .fedbanner__list {
  gap: 0;
  padding: 3px;
  border: 1px solid var(--fedbanner-control);
  border-radius: 999px;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--look-pill .fedbanner__lang {
  min-block-size: 2em;
  padding: 0 0.9em;
  border-radius: 999px;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--look-pill a.fedbanner__lang:hover {
  color: var(--fedbanner-link) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--look-pill .fedbanner__lang--current {
  background: var(--fedbanner-current-bg) !important;
  color: var(--fedbanner-current-fg) !important;
}
/* Plain: words, the current one bold. */
:is(#fedbanner, .fedbanner--preview).fedbanner--look-plain .fedbanner__lang {
  padding: 0 0.5em;
  font-weight: 400;
  letter-spacing: 0;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--look-plain a.fedbanner__lang:hover {
  color: var(--fedbanner-link) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--look-plain .fedbanner__lang--current {
  color: var(--fedbanner-link) !important;
  font-weight: 700;
}

/* ---- The select on small screens (only with JavaScript) ------------- */
:is(#fedbanner, .fedbanner--preview) .fedbanner__picker {
  display: none;
}
:is(#fedbanner, .fedbanner--preview) .fedbanner__select-wrap {
  position: relative;
  display: inline-block;
}
:is(#fedbanner, .fedbanner--preview) .fedbanner__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.85em;
  width: 0.45em;
  height: 0.45em;
  margin-top: -0.3em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--fedbanner-link);
  transform: rotate(45deg);
  pointer-events: none;
}
:is(#fedbanner, .fedbanner--preview) .fedbanner__select {
  -webkit-appearance: none !important;
  appearance: none !important;
  min-block-size: 44px;
  margin: 0;
  padding: 0 2.25em 0 0.75em !important;
  border: 1px solid var(--fedbanner-control) !important;
  border-radius: 6px;
  background: var(--fedbanner-bg) !important;
  color: var(--fedbanner-link) !important;
  font: 600 16px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif !important; /* 16px: iOS does not zoom */
  box-shadow: none !important;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--preset-marine .fedbanner__select {
  border-radius: 999px;
  background: #22325a !important;
}
:is(#fedbanner, .fedbanner--preview).fedbanner--preset-sober .fedbanner__select {
  border: 0 !important;
  border-bottom: 1px solid var(--fedbanner-link) !important;
  border-radius: 0;
  background: transparent !important;
  padding-left: 0.125em !important;
}
/* Below the chosen width the select replaces the list. */
@container fedbanner (max-width: 30em) {
  #fedbanner.fedbanner--js.fedbanner--switch-at-30 .fedbanner__picker { display: block; }
  #fedbanner.fedbanner--js.fedbanner--switch-at-30 .fedbanner__list { display: none; }
}
@container fedbanner (max-width: 40em) {
  #fedbanner.fedbanner--js.fedbanner--switch-at-40 .fedbanner__picker { display: block; }
  #fedbanner.fedbanner--js.fedbanner--switch-at-40 .fedbanner__list { display: none; }
}
@container fedbanner (max-width: 48em) {
  #fedbanner.fedbanner--js.fedbanner--switch-at-48 .fedbanner__picker { display: block; }
  #fedbanner.fedbanner--js.fedbanner--switch-at-48 .fedbanner__list { display: none; }
}
@container fedbanner (max-width: 64em) {
  #fedbanner.fedbanner--js.fedbanner--switch-at-64 .fedbanner__picker { display: block; }
  #fedbanner.fedbanner--js.fedbanner--switch-at-64 .fedbanner__list { display: none; }
}
/* Small screens, list mode (the default): the languages centred above the
   centred sentence, in markup order, with a little more room between them. */
@container fedbanner (max-width: 30em) {
  :is(#fedbanner, .fedbanner--preview).fedbanner--mobile-list.fedbanner--switch-at-30 .fedbanner__inner { flex-direction: column; justify-content: center; text-align: center; gap: 0.5em; }
  :is(#fedbanner, .fedbanner--preview).fedbanner--mobile-list.fedbanner--switch-at-30 .fedbanner__list { gap: 0.75em; }
  :is(#fedbanner, .fedbanner--preview).fedbanner--logo-mobile-hide.fedbanner--switch-at-30 .fedbanner__logo { display: none; }
}
@container fedbanner (max-width: 40em) {
  :is(#fedbanner, .fedbanner--preview).fedbanner--mobile-list.fedbanner--switch-at-40 .fedbanner__inner { flex-direction: column; justify-content: center; text-align: center; gap: 0.5em; }
  :is(#fedbanner, .fedbanner--preview).fedbanner--mobile-list.fedbanner--switch-at-40 .fedbanner__list { gap: 0.75em; }
  :is(#fedbanner, .fedbanner--preview).fedbanner--logo-mobile-hide.fedbanner--switch-at-40 .fedbanner__logo { display: none; }
}
@container fedbanner (max-width: 48em) {
  :is(#fedbanner, .fedbanner--preview).fedbanner--mobile-list.fedbanner--switch-at-48 .fedbanner__inner { flex-direction: column; justify-content: center; text-align: center; gap: 0.5em; }
  :is(#fedbanner, .fedbanner--preview).fedbanner--mobile-list.fedbanner--switch-at-48 .fedbanner__list { gap: 0.75em; }
  :is(#fedbanner, .fedbanner--preview).fedbanner--logo-mobile-hide.fedbanner--switch-at-48 .fedbanner__logo { display: none; }
}
@container fedbanner (max-width: 64em) {
  :is(#fedbanner, .fedbanner--preview).fedbanner--mobile-list.fedbanner--switch-at-64 .fedbanner__inner { flex-direction: column; justify-content: center; text-align: center; gap: 0.5em; }
  :is(#fedbanner, .fedbanner--preview).fedbanner--mobile-list.fedbanner--switch-at-64 .fedbanner__list { gap: 0.75em; }
  :is(#fedbanner, .fedbanner--preview).fedbanner--logo-mobile-hide.fedbanner--switch-at-64 .fedbanner__logo { display: none; }
}
:is(#fedbanner, .fedbanner--preview).fedbanner--mobile-list.fedbanner--switch-at-always .fedbanner__inner { flex-direction: column; justify-content: center; text-align: center; gap: 0.5em; }
:is(#fedbanner, .fedbanner--preview).fedbanner--mobile-list.fedbanner--switch-at-always .fedbanner__list { gap: 0.75em; }
:is(#fedbanner, .fedbanner--preview).fedbanner--logo-mobile-hide.fedbanner--switch-at-always .fedbanner__logo { display: none; }
#fedbanner.fedbanner--js.fedbanner--switch-at-always .fedbanner__picker { display: block; }
#fedbanner.fedbanner--js.fedbanner--switch-at-always .fedbanner__list { display: none; }
@container fedbanner (max-width: 48em) {
  :is(#fedbanner, .fedbanner--preview) .fedbanner__inner { padding-inline: min(var(--fedbanner-pad-inline, 1em), 1em); gap: 0.5em 1em; }
}

/* ---- Focus and hidden text ----------------------------------------- */
:is(#fedbanner, .fedbanner--preview) :is(a, select):focus-visible {
  outline: 2px solid var(--fedbanner-focus) !important; /* themes remove outlines */
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--fedbanner-bg) !important;
}
:is(#fedbanner, .fedbanner--preview) .fedbanner__vh {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* ---- Sticky -------------------------------------------------------- */
#fedbanner.fedbanner--sticky.fedbanner--top {
  position: sticky;
  top: var(--drupal-displace-offset-top, 0px);
}
#fedbanner.fedbanner--sticky.fedbanner--bottom {
  position: sticky;
  bottom: var(--drupal-displace-offset-bottom, 0px);
}
html:has(#fedbanner.fedbanner--sticky.fedbanner--top) {
  scroll-padding-top: calc(var(--fedbanner-block-size, 3em) + var(--drupal-displace-offset-top, 0px) + var(--fedbanner-extra-scroll-offset, 0px));
}
html:has(#fedbanner.fedbanner--sticky.fedbanner--bottom) {
  scroll-padding-bottom: calc(var(--fedbanner-block-size, 3em) + var(--drupal-displace-offset-bottom, 0px) + var(--fedbanner-extra-scroll-offset, 0px));
}
@media (max-width: 48em) {
  #fedbanner.fedbanner--sticky:not(.fedbanner--sticky-mobile) { position: relative; }
}
@media (max-height: 30em) {
  #fedbanner.fedbanner--sticky { position: relative; }
}

/* ---- Print, motion, forced colours ---------------------------------- */
@media print {
  #fedbanner:not(.fedbanner--print-show) { display: none !important; }
  #fedbanner { position: static !important; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#fedbanner, .fedbanner--preview) .fedbanner__lang { transition: none; }
}
@media (forced-colors: active) {
  :is(#fedbanner, .fedbanner--preview) { border-bottom: 1px solid CanvasText; }
  :is(#fedbanner, .fedbanner--preview) .fedbanner__belgium,
  :is(#fedbanner, .fedbanner--preview) a.fedbanner__lang { color: LinkText !important; }
  :is(#fedbanner, .fedbanner--preview) .fedbanner__lang--current { border: 2px solid Highlight !important; color: CanvasText !important; background: Canvas !important; }
  :is(#fedbanner, .fedbanner--preview) .fedbanner__select { border: 1px solid ButtonText !important; }
  :is(#fedbanner, .fedbanner--preview) .fedbanner__logo-ink { fill: currentColor; }
}