: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_topic_hub"] 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_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-network"] {
  color: var(--knowledge-hub-orange);
}

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

.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__heading-link,
.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,
.knowledge-hub-card-group .knowledge-hub-card__heading-link:hover,
.knowledge-hub-card-group .knowledge-hub-card__heading-link:focus-visible {
  text-decoration: underline !important;
}

.knowledge-hub-card-group .knowledge-hub-card__heading-link:hover,
.knowledge-hub-card-group .knowledge-hub-card__heading-link:focus-visible {
  color: var(--knowledge-hub-dark-blue);
}

/* 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--blogs-articles {
  --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);
  /* Gutter either side so the cards sit inside the header underline. Dropped
     once the viewport is no wider than the 1200px container, where there is
     no spare room either side. */
  padding-inline: 100px;
}

@media (max-width: 1200px) {
  .knowledge-hub-card-grid {
    padding-inline: 0;
  }
}

@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: 1rem;
  line-height: 1.3;
  text-transform: none;
}

/* Heading under the card, repeating the title on the cover as a real link.
   Clamped to 4 lines to match. */
.knowledge-hub-card__heading {
  margin: 0;
  color: var(--knowledge-hub-dark-blue);
}

.knowledge-hub-card__heading-link {
  color: inherit;
}

/* 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,
.knowledge-hub-card__heading-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  min-height: calc(4 * 1lh);
  overflow: hidden;
}

ul.knowledge-hub-card__tags,
.knowledge-hub-tags .fl-post_tag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--knowledge-hub-spacing-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Under-card strip: one fixed-height row (never wraps, extra pills clip) so
   every card ends at the same height whether it has 0, 1 or 3 tags. 26px fits
   a pill: 0.8125rem x 1.7 line-height + 2px border. */
/* ul.knowledge-hub-card__tags {
  flex-wrap: nowrap;
  height: 26px;
  overflow: hidden;
} */

.knowledge-hub-card__tag {
  flex-shrink: 0;
  white-space: nowrap;
}

.knowledge-hub-card__tag,
.knowledge-hub-tags .fl-post_tag span a {
  display: inline-block;
  padding-inline: var(--knowledge-hub-spacing-m);
  border: 1px solid;
  border-radius: 100px;
  font-size: 0.8125rem;
  line-height: 1.7;
  text-decoration: none;
}

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

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

.knowledge-hub-card__tag:nth-child(3n),
.knowledge-hub-tags .fl-post_tag span:nth-child(3n) a {
  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;
}

/* 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: 0;
  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;
  width: 100%;
}

.kh-download-btns .kh-download-btns__btn:hover,
.kh-download-btns .kh-download-btns__btn:focus-visible {
  background: var(--knowledge-hub-dark-blue); /* #2192b9 */
  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;
}