:root {
  --deck-primary-background: var(--rh-color-surface-lightest);
  --deck-primary-color: var(--rh-color-brand-red);
  --deck-aspect: 16/9;
  --fixed-font: var(--rh-font-family-code);

  color: var(--rh-color-text-primary-on-light);
  font-family: var(--rh-font-family-body-text);
  line-height: var(--rh-line-height-body-text);
}

:not(:defined), [hidden] {
  display: none !important;
}

hr {
  display: none;
}

slidem-deck {
  line-height: inherit;
  font-family: var(--rh-font-family-body-text);
}

rh-slide-title rh-avatar {
  transform-origin: bottom left;
  scale: 2;
}

#slides-progress {
  --indicator-color: var(--rh-color-brand-red);
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100vh;
  height: 4px;
  z-index: 100;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
}

[slot="notes"] {
  color: var(--rh-color-text-primary-on-dark);
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--rh-font-family-heading);
  margin-block: var(--rh-space-xl);
  line-height: 1;

  & .header-anchor {
    pointer-events: none;
    cursor: default;
  }
}

a {
  color: inherit;
  text-decoration: none;
  &[href^="http"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
  &[href^="#"] {
    pointer-events: none;
    rh-slide-closing & {
      color: #ffffff;
    }
  }
}

p,
pre[class^="language-"] {
  margin-block: var(--rh-space-lg);
}

ol {
  margin-inline-start: 1em;
}

ul, ol {
  line-height: 2;
  margin: 0 auto;
  width: max-content;
}

ul {
  li {
    padding-inline-start: 0.5em;
    &::marker {
      content: "\25b6";
      color: var(--rh-color-brand-red-on-light);
      font-size: 80%;
    }
  }
}

summary::marker {
  color: var(--rh-color-brand-red-on-light);
}

figure blockquote + figcaption {
  text-align: end;
}

blockquote {
  position: relative;
  &::before {
    content: "\201c";
    font-size: 400%;
    position: absolute;
    inset-block-start: -0.5em;
    inset-inline-start: -0.5em;
    opacity: 0.5;
  }
}

img {
  max-width: 100%;
}

h2 {
  margin-block-end: 2rem;
}

.subtitle,
rh-slide > :is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
}

table {
  text-align: center;
}

/* Code blocks */
pre[class*="language-"] {
  color: var(--rh-color-text-primary);
  line-height: 1.3;
  padding: var(--rh-space-lg);
  border-radius: var(--rh-border-radius-default);
  background-color: var(--rh-color-surface-lighter);
  min-width: 48rem;
}

pre[class*="language-"], code {
  font-family: var(--rh-font-family-code);
}

:not(a, h1, h2, h3, h4, h5, h6) > code:not([class]),
code:not([class]) {
  padding-inline: var(--rh-space-sm);
  padding-block: 0;
  background: transparent;
  position: relative;
  &::after {
    position: absolute;
    inset: 0;
    display: block;
    content: "";
    background: var(--markdown-code-background-color, #ddd4);
    border-radius: var(--rh-border-radius-default);
    overflow: hidden;
  }
}

/* Prism token colors */
pre .token.punctuation { color: var(--_color, var(--rh-color-gray-60)); }
pre .token.attr-name { color: var(--_color, var(--rh-color-purple-60)); }
pre .token.attr-value { color: var(--_color, var(--rh-color-green-60)); }
pre .token.tag { color: var(--_color, var(--rh-color-blue-50)); }
pre .token.function { color: var(--_color, var(--rh-color-blue-50)); }
pre .token.keyword { color: var(--_color, var(--rh-color-purple-60)); }
pre .token.class-name { color: var(--_color, var(--rh-color-orange-50)); }
pre .token.string { color: var(--_color, var(--rh-color-green-60)); }

/* Reveal animations */
mark {
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  transition-property: background-color, color, font-weight;
  &[reveal] {
    opacity: 1;
    background-color: transparent;

    &:is([past], [current]) {
      background-color: var(--rh-color-green-10);
      font-weight: 450;
    }
  }

  /* Step-based error highlights for code slides */
  &.error {
    background-color: transparent;
    color: var(--_color);
    &.revealed {
      background-color: var(--rh-color-red-10, #fce3e3);
      border-radius: var(--rh-length-md);
      &.active {
        font-weight: bold;
        --_color: var(--rh-color-red-60, #a30000);
      }
    }
  }
}

/* Light DOM reveal support */
rh-slide :is(span, p, div)[reveal] {
  opacity: 0;
  transition: opacity 0.2s ease;

  &:is([current], [past]) {
    opacity: 1;
  }
}

/* Utilities */
.center {
  text-align: center;

  & img {
    margin-inline: auto;
    display: block;
    width: 55rem;
    height: auto;
    max-width: 80vw;
  }
}

.left {
  text-align: left;
  margin-inline: initial;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rh-space-xl);
  margin: var(--rh-space-4xl);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--rh-space-xl);
}

rh-slide-divider [slot="image"] {
  display: grid;
  grid-template: 1fr / 1fr;
  object-fit: contain;
  object-position: center;
  max-width: 16em;
  max-height: 7em;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
  }
}

slidem-deck rh-slide > p {
  margin-block: var(--rh-space-lg) !important;

  &:has(img:last-child:first-child) {
    display: contents;
  }
}

/* Slotted side images */
[slot="image-left"],
[slot="image-right"] {
  width: 100%;
  height: 100%;

  & img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }
}

/* Icon pair: two icons with arrow between */
.icon-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rh-space-2xl);
  margin-block: var(--rh-space-2xl);

  & rh-icon {
    --rh-icon-size: 8vw;
  }

  & .arrow {
    font-size: 3vw;
    color: var(--rh-color-brand-red-on-light);
  }

}

/* Icon circle: three icons in equilateral triangle with arc connectors */
.icon-circle {
  background: var(--rh-color-surface-dark);
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;

  & svg {
    width: 80%;
    height: auto;
    margin: auto;
  }

  & rh-icon {
    --rh-icon-size: 100%;
    color: var(--rh-color-text-primary-on-dark);
    display: block;
  }
}

/* Icon grid: 3x3 grid of icons */
.icon-grid {
  background: var(--rh-color-surface-lighter, #f2f2f2);
  display: grid;
  grid-template-columns: repeat(3, 8vw);
  grid-template-rows: repeat(3, 8vw);
  place-content: center;
  place-items: center;
  gap: 2vw;
  width: 100%;
  height: 100%;

  & rh-icon {
    --rh-icon-size: 5vw;
    color: var(--rh-color-brand-red-on-light, #ee0000);
  }
}

.brand-red {
  color: var(--rh-color-brand-red-on-light);
}

rh-icon {
  &.size-01 { --rh-icon-size: var(--rh-size-icon-01); }
  &.size-02 { --rh-icon-size: var(--rh-size-icon-02); }
  &.size-03 { --rh-icon-size: var(--rh-size-icon-03); }
  &.size-04 { --rh-icon-size: var(--rh-size-icon-04); }
  &.size-05 { --rh-icon-size: var(--rh-size-icon-05); }
  &.size-06 { --rh-icon-size: var(--rh-size-icon-06); }
  &.size-07 { --rh-icon-size: var(--rh-size-icon-07); }
  &.size-08 { --rh-icon-size: var(--rh-size-icon-08); }
  &.size-09 { --rh-icon-size: var(--rh-size-icon-09); }
  &.center { margin-inline: auto; }
}

/* Harvey ball pair: before → after */
.harvey-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rh-space-xl);

  & rh-icon {
    --rh-icon-size: 6vw;
  }

  & .score {
    font-size: 2vw;
    font-weight: 300;
    font-family: var(--rh-font-family-heading);
  }

  & .arrow {
    font-size: 5vw;
    color: var(--rh-color-brand-red-on-light);
    margin-block-end: 4rem;
  }

  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* Big quote: single impactful statement */
blockquote {
  font-size: 1.4em;
  font-weight: 300;
  font-family: var(--rh-font-family-heading);
  line-height: 1.4;
  max-width: 38ch;
  margin-inline: auto;
  margin-block: var(--rh-space-2xl);
}

/* PF chatbot — matched from patternfly.org/patternfly-ai/chatbot */
.chat {
  --_avatar: 3.5vw;
  --_pad: 2vw;
  --_font: 1.6vw;
  --_blue: var(--rh-color-blue-50, #0066cc);

  display: flex;
  flex-direction: column;
  text-align: start;
  background: var(--rh-color-surface-lighter, #f2f2f2);
  border-radius: 0.85vw;
  box-shadow: 0 0.5vw 1vw rgba(41, 41, 41, 0.15);
  overflow: hidden;
  width: 100%;
  min-height: 60vh;

  & .chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.4vw;
    padding: var(--_pad);
    flex: 1;
  }

  & .chat-msg {
    display: flex;
    gap: 1.25vw;
    align-items: start;

    & .avatar {
      width: var(--_avatar);
      height: var(--_avatar);
      min-width: var(--_avatar);
      border-radius: 999px;
      display: grid;
      place-content: center;
      overflow: hidden;

      & rh-icon {
        --rh-icon-size: calc(var(--_avatar) * 0.55);
      }
    }

    &.user .avatar {
      background: var(--rh-color-gray-20, #e0e0e0);
      border: 1px solid var(--rh-color-gray-30, #c7c7c7);
      color: var(--rh-color-gray-60, #6a6a6a);
    }

    &.bot .avatar {
      background: var(--_blue);
      color: #ffffff;
    }

    & .content {
      min-width: 0;
    }

    & .label {
      font-size: calc(var(--_font) * 0.75);
      font-weight: 600;
      margin-block-end: 0.2vw;
      color: var(--rh-color-text-primary-on-light);
    }

    &.user .bubble {
      background: var(--_blue);
      color: #ffffff;
      border-radius: 0.3vw;
      padding: 0.4vw 0.6vw;
      font-size: var(--_font);
      line-height: 1.4;
      width: fit-content;
    }

    &.bot .content {
      font-size: var(--_font);
      line-height: 1.5;
    }

    &.bot .badge {
      display: inline-block;
      font-size: calc(var(--_font) * 0.65);
      font-weight: 500;
      border: 1px solid var(--rh-color-text-primary-on-light);
      border-radius: 999px;
      padding: 0 0.4vw;
      margin-inline-start: 0.3vw;
      vertical-align: middle;
    }

    & code {
      font-size: 0.9em;
    }

    &.bot .content > rh-icon {
      --rh-icon-size: calc(var(--_font) * 0.9);
    }
  }

  & .chat-input {
    padding: 0.6vw var(--_pad);
    display: flex;
    align-items: center;
    gap: 0.4vw;

    & .input-field {
      flex: 1;
      background: #ffffff;
      border: none;
      border-radius: 999px;
      padding: 0.4vw 0.8vw;
      font-size: calc(var(--_font) * 0.85);
      color: var(--rh-color-text-secondary-on-light);
    }

    & rh-icon {
      --rh-icon-size: calc(var(--_font) * 1.1);
      color: var(--rh-color-text-secondary-on-light);
    }
  }

  & .chat-disclaimer {
    text-align: center;
    font-size: calc(var(--_font) * 0.6);
    color: var(--rh-color-blue-50, #0066cc);
    padding-block: 0.3vw;
  }
}

/* Inline icon sizing for content slides */
rh-slide rh-icon {
  --rh-icon-size: 3vw;
  vertical-align: middle;
}

/* Standalone hero icon: explicit class */
.hero-icon {
  --rh-icon-size: 6vw;
  text-align: center;
}

.grid-3 rh-icon {
  --rh-icon-size: 5vw;
  display: block;
  margin-inline: auto;
  margin-block-end: var(--rh-space-lg);
  color: var(--rh-color-brand-red-on-light);
}

rh-slide-closing {
  li {
    list-style: none;
    &::marker { content: none; }
  }

  li a {
    --rh-icon-size: 3vw;
    gap: var(--rh-space-2xl);
    font-size: var(--rh-font-size-body-text-2xl);
    display: flex;
    align-items: center;
  }
}