/* Light DOM link styles for footer */
:is(rh-footer, rh-footer-universal) a {
  color:
    /** Footer link default color; theme-adaptive */
    var(--rh-color-interactive-primary-default,
      light-dark(
        /** Footer link default color for light scheme */
        var(--rh-color-interactive-primary-default-on-light, #0066cc),
        /** Footer link default color for dark scheme */
        var(--rh-color-interactive-primary-default-on-dark, #92c5f9)
      ));
  text-decoration: none;
}

:is(rh-footer, rh-footer-universal) :is(rh-footer-block) a {
  text-decoration:
    underline
    /** Footer block link underline width */
    var(--rh-border-width-sm, 1px)
    dashed;
  text-decoration-color:
    light-dark(
        /** Footer block link underline for light scheme */
        var(--rh-color-gray-50, #707070),
        /** Footer block link underline for dark scheme */
        var(--rh-color-gray-40, #a3a3a3)
      ) !important;
  text-underline-offset: max(5px, 0.28em);
  transition-timing-function: ease;
  transition-property: text-underline-offset, color, text-decoration-color;
  transition-duration: 0.3s;
}

:is(rh-footer, rh-footer-universal) [slot^='links'] a {
  display: block;
  color:
    /** Footer link column text color; theme-adaptive */
    var(--rh-color-text-primary,
      light-dark(
        /** Footer link column text color for light scheme */
        var(--rh-color-text-primary-on-light, #151515),
        /** Footer link column text color for dark scheme */
        var(--rh-color-text-primary-on-dark, #ffffff)
      )) !important;
  font-size:
    /** Footer link size override */
    var(--rh-footer-link-font-size,
      /** Footer link body size */
      var(--rh-font-size-body-text-sm, 0.875rem));
  width: fit-content;
}

rh-footer-universal [slot^='links'] a {
  font-size: inherit;
}

:is(rh-footer, rh-footer-universal) a:hover {
  color:
    /** Footer link hover color; theme-adaptive */
    var(--rh-color-interactive-primary-hover,
      light-dark(
        /** Footer link hover color for light scheme */
        var(--rh-color-interactive-primary-hover-on-light, #003366),
        /** Footer link hover color for dark scheme */
        var(--rh-color-interactive-primary-hover-on-dark, #b9dafc)
      ));
  text-decoration:
    underline
    /** Footer link hover underline width */
    var(--rh-border-width-sm, 1px)
    dashed;
  text-decoration-color: inherit;
  text-underline-offset: max(5px, 0.28em);
  transition-timing-function: ease;
  transition-property: text-underline-offset, color, text-decoration-color;
  transition-duration: 0.3s;
}

:is(rh-footer, rh-footer-universal) a:is(:focus, :focus-within) {
  color:
    /** Footer link focus color; theme-adaptive */
    var(--rh-color-interactive-primary-hover,
      light-dark(
        /** Footer link focus color for light scheme */
        var(--rh-color-interactive-primary-hover-on-light, #003366),
        /** Footer link focus color for dark scheme */
        var(--rh-color-interactive-primary-hover-on-dark, #b9dafc)
      ));
  text-decoration:
    underline
    dashed
    /** Footer link focus underline width */
    var(--rh-border-width-sm, 1px);
  text-decoration-color: inherit;
  text-underline-offset: max(5px, 0.28em);
  transition-timing-function: ease;
  transition-property: text-underline-offset, color, text-decoration-color;
  transition-duration: 0.3s;
}

:is(rh-footer, rh-footer-universal) a:visited {
  color:
    /** Footer link visited color; theme-adaptive */
    var(--rh-color-interactive-primary-hover,
      light-dark(
        /** Footer link visited color for light scheme */
        var(--rh-color-interactive-primary-hover-on-light, #003366),
        /** Footer link visited color for dark scheme */
        var(--rh-color-interactive-primary-hover-on-dark, #b9dafc)
      ));
  text-decoration: none;
}

/* Underlines on inline links in rh-footer-block */

:is(rh-footer, rh-footer-universal) :is(rh-footer-block) a:hover {
  text-decoration-color: inherit !important;
  text-underline-offset: max(6px, 0.33em);
}

:is(rh-footer, rh-footer-universal) :is(rh-footer-block) a:is(:focus, :focus-within) {
  text-decoration-color: inherit !important;
  text-underline-offset: max(6px, 0.33em);
}

:is(rh-footer, rh-footer-universal) :is(rh-footer-block) a:visited {
  text-decoration-color: inherit;
}

/* Slotted logo mark or text. The wrapping <a> lives in shadow DOM. */
:is(rh-footer, rh-footer-universal) [slot^='logo'] {
  display: inline-block;

  /* Text logos (span, etc.) keep heading styles and a dotted underline. */
  &:not(:is(img, svg, picture)) {
    color:
      /** Logo link text color; theme-adaptive */
      var(--rh-color-text-primary,
        light-dark(
          /** Logo link text color for light scheme */
          var(--rh-color-text-primary-on-light, #151515),
          /** Logo link text color for dark scheme */
          var(--rh-color-text-primary-on-dark, #ffffff)
        ));
    font-size: var(--rh-font-size-heading-xs, 1.25rem);
    font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
    font-weight: 800;
    line-height: var(--rh-line-height-heading, 1.3);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: var(--rh-border-width-sm, 1px);
    text-decoration-color:
      /** Logo link underline color; theme-adaptive */
      var(--rh-color-border-subtle,
        light-dark(
          /** Logo link underline color for light scheme */
          var(--rh-color-border-subtle-on-light, #c7c7c7),
          /** Logo link underline color for dark scheme */
          var(--rh-color-border-subtle-on-dark, #707070)
        ));
    text-underline-offset: max(5px, 0.28em);
    transition: ease all 0.3s;

    &:hover {
      color:
        /** Logo link hover text color; theme-adaptive */
        var(--rh-color-text-primary,
          light-dark(
            /** Logo link hover text color for light scheme */
            var(--rh-color-text-primary-on-light, #151515),
            /** Logo link hover text color for dark scheme */
            var(--rh-color-text-primary-on-dark, #ffffff)
          ));
      text-decoration-color: inherit;
      text-underline-offset: max(6px, 0.33em);
    }
  }

  &:is(img, svg, picture),
  &:is(picture) > img,
  & > :is(img, svg) {
    display: block;
    width: auto;

    /** Logo image height */
    height: var(--rh-size-icon-02, 24px);
  }
}

@media screen and (min-width: 576px) {
  :is(rh-footer, rh-footer-universal) [slot^='logo'] {
    &:is(img, svg, picture),
    &:is(picture) > img,
    & > :is(img, svg) {
      /** Logo image height at viewport >= xs */
      height: var(--rh-size-icon-03, 32px);
    }

    &:not(:is(img, svg, picture)) {
      /** Subdomain name font size at viewport >= xs */
      font-size: var(--rh-font-size-heading-sm, 1.5rem);
    }
  }
}

:is(rh-footer, rh-footer-universal) :is(h1, h2, h3, h4, h5, h6) {
  color:
    /** Footer heading text color; theme-adaptive */
    var(--rh-color-text-primary,
      light-dark(
        /** Footer heading text color for light scheme */
        var(--rh-color-text-primary-on-light, #151515),
        /** Footer heading text color for dark scheme */
        var(--rh-color-text-primary-on-dark, #ffffff)
      ));

  /** Footer typeface */
  font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);

  /** Footer line height */
  line-height: var(--rh-line-height-heading, 1.3);
}

:is(rh-footer, rh-footer-universal) [slot^='links'] li {
  margin: 0;
  padding: 0;
  display: contents;
}

/* Section horizontal gutter */
:is(rh-footer, rh-footer-universal) {
  /** Default footer horizontal gutter */
  --rh-footer-section-side-gap: var(--rh-space-lg, 16px);

  overflow-y: auto;
}

/* (min-width: --rh-breakpoint-sm) */
@media screen and (min-width: 768px) {
  :is(rh-footer, rh-footer-universal) {
    /** Footer horizontal gutter at viewport >= md */
    --rh-footer-section-side-gap: var(--rh-space-2xl, 32px);
  }
}

/* (min-width: --rh-breakpoint-xl) */
@media screen and (min-width: 1440px) {
  :is(rh-footer, rh-footer-universal) {
    /** Footer horizontal gutter at viewport >= 2xl */
    --rh-footer-section-side-gap: var(--rh-space-4xl, 64px);
  }
}