:root {
  /* Spacing */
  --knowledge-hub-spacing-s: 5px;
  --knowledge-hub-spacing-m: 10px;
  --knowledge-hub-spacing-l: 20px;
  --knowledge-hub-spacing-xl: 30px;
  --knowledge-hub-spacing-2xl: 40px;

  /* Neutrals */
  --knowledge-hub-white: #ffffff;
  --knowledge-hub-sand-light: #eee8dc;
  --knowledge-hub-grey: #414451;
  --knowledge-hub-ash-dark: #414451;
  --black: #000000;

  /* Browns (light → dark) */
  --knowledge-hub-camel: #a87c4f;
  --knowledge-hub-walnut: #603917;
  --knowledge-hub-chestnut: #722b15;
  --knowledge-hub-mahogany: #6b220c;
  --knowledge-hub-coffee: #3a2416;

  /* Accents */
  --knowledge-hub-orange: #e95726;
  --knowledge-hub-yellow: #faaf40;
  --knowledge-hub-dark-blue: #2192b9;
}

.kh-floating-arrow {
  position: absolute;
  top: -45px;
  left: 0;
  right: 0;
  width: 50px;
  margin-inline: auto;
  transform: rotate(90deg);
}

.position-relative {
  position: relative;
}

/* Knowledge Facets */
#knowledge-facets .facetwp-facet {
  margin-bottom: 0;
}
#knowledge-facets .facetwp-facet[data-name="knowledge_region"] select {
  color: #faaf40;
  border-color: #faaf40;
}
#knowledge-facets .facetwp-facet[data-name="knowledge_thematic"] select {
  color: #2192b9;
  border-color: #2192b9;
}
#knowledge-facets .facetwp-facet[data-name="knowledge_languages"] select {
  color: #667085;
  border-color: #667085;
}
#knowledge-facets .facetwp-facet[data-name="knowledge_media_type"] select,
.topic-hub .facetwp-facet[data-name="knowledge_media_type"] select {
  color: var(--knowledge-hub-orange);
  border-color: var(--knowledge-hub-orange);
}
#knowledge-facets .facetwp-facet[data-name="knowledge_search"] input {
  border-color: #faaf40;
}

/* Knowledge Hub Load More */
.kh-load-more .facetwp-facet {
  margin-bottom: 0;
  display: flex;
  justify-content: center;
}

.kh-load-more .facetwp-facet button {
  font-size: 16px;
  line-height: 18px;
  padding: 15px 40px 15px 40px;
  color: #ffffff !important;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  background-color: #e95726;
  border: 1px solid #e95726;
}

.kh-load-more .facetwp-facet button:hover,
.kh-load-more .facetwp-facet button:focus-visible {
  color: #ffffff !important;
  background-color: #2192b9;
  border-color: #2192b9;
}

/* Knowledge Type Archive Pages */
.knowledge-hub-radio .facetwp-facet-knowledge_orgranizations {
  flex-direction: row !important;
  gap: 80px;
  margin-bottom: 0;
}

.knowledge-hub-radio .facet-wrap {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 2rem;
}

@media ((max-width: 768px)) {
  .knowledge-hub-radio .facetwp-facet-knowledge_orgranizations {
    gap: 0px;
    flex-direction: column !important;
  }
}

.knowledge-hub-radio .facetwp-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--knowledge-hub-spacing-s);
  padding: var(--knowledge-hub-spacing-s) var(--knowledge-hub-spacing-m);
  color: var(--black);
  cursor: pointer;
  background: none;
  background-image: none;
  text-decoration: none;
}

.knowledge-hub-radio .facetwp-radio::before {
  display: none;
}

.knowledge-hub-radio .facetwp-radio[data-value="ifip-resources"] {
  color: var(--knowledge-hub-dark-blue);
}

.knowledge-hub-radio
  .facetwp-radio[data-value="ifip-global-community-resources"] {
  color: var(--knowledge-hub-orange);
}

.knowledge-hub-radio .facetwp-radio:hover,
.knowledge-hub-radio .facetwp-radio:focus {
  text-decoration: underline;
  text-decoration-color: var(--knowledge-hub-yellow);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

.knowledge-hub-radio .facetwp-radio:focus {
  outline: 3px solid var(--knowledge-hub-yellow);
  outline-offset: 2px;
}

.knowledge-hub-radio .facetwp-radio.checked {
  background-image: none;
  text-decoration: underline;
  text-decoration-color: var(--knowledge-hub-yellow);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

.knowledge-hub-radio .facetwp-counter {
  display: none;
}

/* Knowledge Hub Page */
.knowledge-hub-accordion
  .uabb-adv-accordion-item
  .uabb-adv-accordion-content
  a {
  text-decoration: underline;
}

.border-decor {
  position: relative;
}

.border-decor::before,
.border-decor::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 294px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.border-decor.top::before {
  top: 0;
  left: 50%;
  width: 100vw;
  height: auto;
  aspect-ratio: 1728 / 294;
  transform: translate(-50%, -50%);
  background-image: url(../images/row-seperator.svg);
  background-size: 100% 100%;
  z-index: 1;
}

/* Form Pages */
.knowledge-hub-form-title {
  font-size: 1rem;
  text-transform: capitalize;
  color: #002f50;
}

/* Knowledge Hub Themer Layouts */
.back-to-knowledge-hub:hover .back-text,
.back-to-knowledge-hub:focus-visible .back-text {
  text-decoration: underline;
}

/* Knowledge Hub Cards (single FacetWP query) */
.knowledge-hub-card-group {
  margin-block: calc(var(--knowledge-hub-spacing-l) * 2);
}

.knowledge-hub-card-group .knowledge-hub-card-group__view-all,
.knowledge-hub-card-group .knowledge-hub-card__link {
  text-decoration: none !important;
}

/* !important is needed on both of these: it overrides Astra's own
   `.ast-single-post .entry-content a` underline rule, and once the resting
   state above is !important the hover state has to match it to win. */
.knowledge-hub-card-group .knowledge-hub-card-group__view-all:hover,
.knowledge-hub-card-group .knowledge-hub-card-group__view-all:focus-visible {
  text-decoration: underline !important;
}

/* Section accent, keyed on the knowledge_type term slug. Sections are built
   from the live taxonomy, so a term without a rule here falls back to camel
   rather than rendering unstyled. */
.knowledge-hub-card-group {
  --kh-section-accent: var(--knowledge-hub-camel);
}

.knowledge-hub-card-group--publications-reports {
  --kh-section-accent: var(--knowledge-hub-chestnut);
}

.knowledge-hub-card-group--data-insights {
  --kh-section-accent: var(--knowledge-hub-dark-blue);
}

.knowledge-hub-card-group--toolkits {
  --kh-section-accent: var(--knowledge-hub-yellow);
}

.knowledge-hub-card-group--articles-blogs-statements {
  --kh-section-accent: var(--knowledge-hub-orange);
}

.knowledge-hub-card-group--case-studies {
  --kh-section-accent: var(--knowledge-hub-walnut);
}

.knowledge-hub-card-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--knowledge-hub-spacing-l);
  margin-bottom: var(--knowledge-hub-spacing-2xl);
  border-bottom: 4px solid;
  border-color: var(--kh-section-accent);
}

.knowledge-hub-card-group__title {
  margin-block: 0;
  margin-inline: var(--knowledge-hub-spacing-s);
}

.knowledge-hub-card-group .knowledge-hub-card-group__view-all {
  color: var(--kh-section-accent);
}

.knowledge-hub-card-group__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--knowledge-hub-spacing-s);
  flex-shrink: 0;
  white-space: nowrap;
}

.knowledge-hub-card-group__view-all-icon {
  width: auto;
  height: 1em;
  flex-shrink: 0;
}

.knowledge-hub-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--knowledge-hub-spacing-l);
}

@media (max-width: 1024px) {
  .knowledge-hub-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .knowledge-hub-card-grid {
    grid-template-columns: 1fr;
  }
}

.knowledge-hub-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--knowledge-hub-spacing-m);
}

/* Cover band colour cycles across five cards, by position in the grid. The
   cycle is one longer than the four-column grid, so the colours step across
   each row instead of stacking into single-colour columns. */
.knowledge-hub-card {
  --kh-card-cover: var(--knowledge-hub-orange);
}

.knowledge-hub-card:nth-child(5n + 2) {
  --kh-card-cover: var(--knowledge-hub-dark-blue);
}

.knowledge-hub-card:nth-child(5n + 3) {
  --kh-card-cover: var(--knowledge-hub-camel);
}

.knowledge-hub-card:nth-child(5n + 4) {
  --kh-card-cover: var(--knowledge-hub-chestnut);
}

.knowledge-hub-card:nth-child(5n + 5) {
  --kh-card-cover: var(--knowledge-hub-yellow);
}

.knowledge-hub-card__link {
  display: block;
  /* flex: 1; */
  color: inherit;
  background-color: #eadbc2;
  border: 10px solid #eadbc2;
  border-radius: 20px;
  overflow: hidden;
}

.knowledge-hub-card__media {
  position: relative;
  height: 100%;
  aspect-ratio: 3 / 4;
  background-color: #d3d3d3;
  overflow: hidden;
  border-radius: 10px;
}

.knowledge-hub-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  will-change: transform;
  transition: all 0.2s linear;
}

.knowledge-hub-card__link:hover .knowledge-hub-card__image,
.knowledge-hub-card__link:focus-visible .knowledge-hub-card__image {
  transform: scale(1.05);
}

.knowledge-hub-card__badge {
  position: absolute;
  top: var(--knowledge-hub-spacing-m);
  left: var(--knowledge-hub-spacing-m);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--knowledge-hub-mahogany);
  z-index: 1;
}

.knowledge-hub-card__badge svg {
  display: block;
  width: auto;
  height: 20px;
}

/* Cover treatment: the featured photo runs full-bleed behind a wave-topped
   colour band carrying the title, so every card reads as a designed cover.
   The band colour comes from --kh-card-cover, cycled per card below. */
.knowledge-hub-card__cover {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  /* The wave path is fill="currentColor", so it tracks the band colour. */
  color: var(--kh-card-cover);
  z-index: 1;
}

.knowledge-hub-card__wave {
  display: block;
  width: 100%;
  height: 28px;
  /* Overlap the band by a pixel so no hairline seam shows between them. */
  margin-bottom: -1px;
}

.knowledge-hub-card__cover-body {
  background-color: var(--kh-card-cover);
  padding: var(--knowledge-hub-spacing-l);
}

/* Title printed on the cover band. */
.knowledge-hub-card__title {
  color: var(--knowledge-hub-white);
  font-size: 0.9rem;
  line-height: 1.3;
  text-transform: none;
}

/* Clamped to 4 lines so a long title can't grow the band over the photo, and
   held at 4 lines tall so short titles reserve the same space -- keeps every
   band and every tag strip on a row lined up. */
.knowledge-hub-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  min-height: calc(4 * 1lh);
  overflow: hidden;
}

/* Hide the whole tags module when the post has no knowledge-tag terms, so
   the empty wrapper doesn't leave its margins/padding behind. */
.knowledge-hub-tags:not(:has(.fl-knowledge-tag > span)),
.knowledge-hub-action:not(:has(.fl-knowledge-tag > span)) .fl-module-separator {
  display: none;
}

.knowledge-hub-tags .fl-knowledge-tag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--knowledge-hub-spacing-s);
  margin: 0;
  padding: 0;
}

.knowledge-hub-tags .fl-knowledge-tag > span > span {
  display: inline-block;
  padding-inline: var(--knowledge-hub-spacing-m);
  border: 1px solid;
  border-radius: 100px;
  /* !important beats UABB's text-editor rule, which resets font-size and
     line-height to inherit with a higher-specificity :not(h1)...:not(h6). */
  font-size: 0.8125rem !important;
  line-height: 1.7 !important;
  white-space: nowrap;
  text-decoration: none;
}

/* Pills cycle the accordion accents: yellow / camel / sand. */
.knowledge-hub-tags .fl-knowledge-tag > span:nth-child(3n + 1) > span {
  border-color: var(--knowledge-hub-yellow);
  background-color: var(--knowledge-hub-yellow);
  color: var(--knowledge-hub-white);
}

.knowledge-hub-tags .fl-knowledge-tag > span:nth-child(3n + 2) > span {
  border-color: var(--knowledge-hub-camel);
  background-color: var(--knowledge-hub-camel);
  color: var(--knowledge-hub-white);
}

.knowledge-hub-tags .fl-knowledge-tag > span:nth-child(3n) > span {
  border-color: #eadbc2;
  background-color: #eadbc2;
  color: var(--knowledge-hub-coffee);
}

/* FacetWP "Load more" pager button (styled to match the design) */
.facetwp-load-more {
  display: block;
  cursor: pointer;
  font: inherit;
  transition: all 0.2s linear;
}

.facetwp-load-more:hover,
.facetwp-load-more:focus-visible {
  opacity: 0.9;
}

/* Knowledge Hub Accordion shortcode
   [knowledge_hub_accordion] / [knowledge_hub_accordion_item] */
.kh-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--knowledge-hub-spacing-l);
}

/* Accent cycles yellow / camel / sand by position (items 1, 2, 3, then
   repeating). Override one item with an inline
   style="--kh-accordion-accent: #hex" on its div. */
.kh-accordion__item {
  --kh-accordion-accent: var(--knowledge-hub-yellow);
  border: 4px solid var(--knowledge-hub-white);
  border-radius: 30px;
  overflow: hidden;
}

.kh-accordion__item:nth-of-type(3n + 2) {
  --kh-accordion-accent: var(--knowledge-hub-camel);
}

.kh-accordion__item:nth-of-type(3n + 3) {
  --kh-accordion-accent: #eadbc2;
}

.kh-accordion__heading {
  margin: 0;
}

.kh-accordion__toggle {
  display: flex;
  align-items: center;
  gap: var(--knowledge-hub-spacing-l);
  width: 100%;
  padding: var(--knowledge-hub-spacing-2xl);
  background-color: var(--kh-accordion-accent);
  border: none;
  color: var(--knowledge-hub-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.kh-accordion__toggle:focus {
  color: var(--knowledge-hub-white) !important;
  background-color: var(--kh-accordion-accent) !important;
  border-color: var(--kh-accordion-accent) !important;
}

.kh-accordion__toggle:hover,
.kh-accordion__toggle:focus-visible {
  background-color: var(--kh-accordion-accent);
  color: var(--knowledge-hub-white);
}

.kh-accordion__toggle:focus-visible {
  outline: 3px solid var(--knowledge-hub-white);
  outline-offset: -6px;
}

.kh-accordion__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 126px;
  height: 126px;
}

.kh-accordion__icon img,
.kh-accordion__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.kh-accordion__chevron {
  flex-shrink: 0;
  margin-left: auto;
  transition: all 0.2s linear;
}

.kh-accordion__item.is-open .kh-accordion__chevron {
  transform: rotate(180deg);
}

/* Open/close animates via the grid-rows 0fr -> 1fr trick, so the panel height
   is never hard-coded. Padding lives on __content (not __panel-inner) because
   vertical padding on the clipped element would stop it collapsing to 0. */
.kh-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: all 0.2s linear;
}

.kh-accordion__item.is-open .kh-accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.kh-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.kh-accordion__content {
  padding-inline: var(--knowledge-hub-spacing-2xl);
  padding-block: var(--knowledge-hub-spacing-xl);
}

/* .kh-accordion__content p {
  margin-bottom: 1em;
} */

.kh-accordion__content > :first-child {
  margin-top: 0;
}

.kh-accordion__content > :last-child {
  margin-bottom: 0;
}

.kh-accordion__content a:not(.kh-learn-more) {
  text-decoration: none;
}
.kh-accordion__content a:not(.kh-learn-more):hover,
.kh-accordion__content a:not(.kh-learn-more):focus-visible {
  text-decoration: underline;
  color: var(--ast-global-color-0);
}

.kh-accordion__content .kh-acc-content-title {
  font-weight: 700;
}

#online-giving {
  color: var(--knowledge-hub-orange);
}

/* Learn More button - matches the site-wide .fm-button: orange, going dark
   blue (#2192b9) on hover. The transition lives on the base rule so it eases
   both into and out of the hover colour, not just on the way in.

   No !important here. Astra colours content links through
   `.ast-single-post .entry-content a:hover` (specificity 0,2,1), so the
   selectors below pair a context class with the `a` element type to reach
   0,3,1 and win on specificity instead. The bare .kh-learn-more selectors
   cover the button outside entry content, e.g. in Beaver Themer layouts. */
.kh-learn-more,
.ast-single-post .entry-content .kh-learn-more {
  display: inline-block;
  padding: 10px 25px;
  background-color: var(--knowledge-hub-orange);
  border: none;
  border-radius: 50px;
  color: var(--knowledge-hub-white);
  cursor: pointer;
  line-height: normal;
  margin-top: 10px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s linear;
}

/* Hold the resting look against Astra's plain a:focus styles. :focus-visible
   below is the case that should actually read as focused, so a mouse click
   doesn't leave the button stuck in its hover colour. */
:is(.entry-content, .kh-accordion__content) a.kh-learn-more:focus {
  background-color: var(--knowledge-hub-orange);
  color: var(--knowledge-hub-white);
}

.kh-learn-more:is(:hover, :focus-visible, :active),
:is(.entry-content, .kh-accordion__content)
  a.kh-learn-more:is(:hover, :focus-visible, :active) {
  background-color: var(--knowledge-hub-dark-blue);
  color: var(--knowledge-hub-white);
  text-decoration: none;
}

.kh-learn-more:focus-visible,
:is(.entry-content, .kh-accordion__content) a.kh-learn-more:focus-visible {
  outline: 3px solid var(--knowledge-hub-dark-blue);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .kh-accordion__toggle {
    gap: var(--knowledge-hub-spacing-m);
    padding: var(--knowledge-hub-spacing-l);
  }

  .kh-accordion__content {
    padding: var(--knowledge-hub-spacing-l);
  }

  .kh-accordion__icon {
    width: 44px;
    height: 44px;
  }

  .kh-accordion__title {
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-accordion__panel,
  .kh-accordion__chevron {
    transition: none;
  }
}

/* Menu Dropdown */
.main-header-menu > .menu-item:not(.astra-megamenu-li) > .sub-menu {
  padding: 15px;
}

/* ---------------------------------------------------------------------------
   Report Content - three-dot trigger with a dropdown of links.
   See inc/shortcodes/report-content.php.
   --------------------------------------------------------------------------- */
.kh-report-content {
  display: inline-block;
  position: relative;
}

/* Two-class selectors throughout so the bare-button reset beats Astra's own
   button styles. font-size drives the whole control: the toggle is 1em square
   and the glyph inside it is a fraction of that. */
.kh-report-content .kh-report-content__toggle {
  align-items: center;
  background: transparent;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  box-sizing: border-box;
  color: #d9d9d9;
  cursor: pointer;
  display: inline-flex;
  font-size: 70px;
  height: 1em;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
  width: 1em;
}

/* Hold the resting look against Astra's :focus styles. Overridden below for
   focus-visible, which is the case that should actually read as focused. */
.kh-report-content .kh-report-content__toggle:focus {
  background: transparent;
  border-color: #d9d9d9;
  color: #d9d9d9;
}

.kh-report-content .kh-report-content__toggle:focus-visible {
  outline: 3px solid var(--knowledge-hub-yellow);
  outline-offset: 2px;
}

/* Hover / keyboard focus: the toggle fills brown and the dots go white. */
.kh-report-content .kh-report-content__toggle:hover,
.kh-report-content .kh-report-content__toggle:focus-visible {
  background: var(--knowledge-hub-chestnut); /* #722b15 */
  border-color: var(--knowledge-hub-chestnut);
  color: #fff;
}

/* Three-dot glyph, sized relative to the toggle. */
.kh-report-content .kh-report-content__icon {
  display: block;
  width: 0.75em;
  height: 0.75em;
}

/* Dropdown menu. */
.kh-report-content__menu {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  left: 0;
  margin-top: 8px;
  max-width: calc(100vw - 24px);
  min-width: 180px;
  padding: 6px 0;
  position: absolute;
  top: 100%;
  z-index: 50;
}

.kh-report-content__menu[hidden] {
  display: none;
}

/* Right-aligned menu: opens toward the left of the icon. Added by the script
   when the default left-aligned menu would run off screen. */
.kh-report-content__menu--right {
  left: auto;
  right: 0;
}

.kh-report-content__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kh-report-content__item {
  margin: 0;
}

.kh-report-content .kh-report-content__link {
  color: #1a1a1a;
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  white-space: nowrap;
}

.kh-report-content .kh-report-content__link:hover,
.kh-report-content .kh-report-content__link:focus-visible {
  background: #f4f4f4;
}

/* ---------------------------------------------------------------------------
   Download Buttons - one full-width pill per languages row.
   See inc/shortcodes/download-buttons.php. Matches the FM Button settings these replaced:
   #e95726 -> #2192b9 on hover, white text, 50px radius, 15px/20px padding.
   --------------------------------------------------------------------------- */
.kh-download-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Two-class selectors so these beat Astra's own link/button styles. */
.kh-download-btns .kh-download-btns__btn {
  align-items: center;
  background: var(--knowledge-hub-orange); /* #e95726 */
  border: 1px solid var(--knowledge-hub-orange);
  border-radius: 50px;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  gap: 10px;
  justify-content: center;
  line-height: 1;
  padding: 15px 20px;
  text-decoration: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  width: 100%;
}

/* Secondary languages in the default (language-only) layout. */
.kh-download-btns .kh-download-btns__btn--outline {
  background: #fff;
  color: var(--knowledge-hub-orange);
}

.kh-download-btns .kh-download-btns__btn:hover,
.kh-download-btns .kh-download-btns__btn:focus-visible {
  background: var(--knowledge-hub-dark-blue); /* #2192b9 */
  border-color: var(--knowledge-hub-dark-blue);
  color: #fff;
}

.kh-download-btns .kh-download-btns__icon {
  display: block;
  flex-shrink: 0;
  height: 1em;
  width: auto;
}

.kh-download-btns .kh-download-btns__label {
  font-weight: 700;
}