/**
 * Flight Centre Help Experience Cloud Styles
**/

/**
 * Font Import(s)
**/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* TakeFlight */

/* @font-face { font-family: 'World360'; font-weight: 300; src: url('/sfsites/c/resource/fchelpsite/fonts/World360-Light.woff') format('woff'); }  */
/* @font-face { font-family: 'World360'; font-weight: 300; src: url('/sfsites/c/resource/fchelpsite/fonts/World360-LightItalic.woff') format('woff'); font-style: italic; } */
@font-face { font-family: 'TakeFlight'; font-weight: 400; src: url('/sfsites/c/resource/fchelpsite/fonts/Take-Flight-Regular.woff2') format('woff2'); }
/* @font-face { font-family: 'World360'; font-weight: 400; src: url('/sfsites/c/resource/fchelpsite/fonts/World360-RegularItalic.woff') format('woff'); font-style: italic; } */
/* @font-face { font-family: 'World360'; font-weight: 500; src: url('/sfsites/c/resource/fchelpsite/fonts/World360-Medium.woff') format('woff'); } */
@font-face { font-family: 'TakeFlight'; font-weight: 700; src: url('/sfsites/c/resource/fchelpsite/fonts/TakeFlight-Bold.woff2') format('woff2'); }

:root {
  /* Icons referenced via {ICON_NAME} */
  --dcore-svg-sprite-sheet: /sfsites/c/resource/coreui/icons/symbols.svg;
  /* Icons referenced via lib:{ICON_NAME} */
  --dcore-svg-sprite-sheet-lib: /sfsites/c/resource/coreui/icons/symbols-lib.svg;
  /* Icons referenced via sf:{ICON_NAME} */
  --dcore-svg-sprite-sheet-sf: /sfsites/c/resource/coreui/icons/symbols-sf.svg;
  /* Icons referenced via fc:{ICON_NAME} */
  --dcore-svg-sprite-sheet-fc: /sfsites/c/resource/fchelpsite/icons/symbols-fc.svg?v=5;

  /* Extra non-coreUI Tokens */  
  --fc-theme-accent-default: oklch(0.55 0.22 26.67);
  --fc-theme-accent-emphasis: oklch(from var(--fc-theme-accent-default) calc(l + .05) c h);
  --fc-theme-accent-muted: oklch(from var(--fc-theme-accent-default) calc(l/2 + .15) c h);
  --fc-container-max-width: 1260px;
}

/** Resets **/

*,
*::before,
*::after {
  border: 0;
  box-sizing: border-box;
  font: inherit;
  margin: 0;
  padding: 0;
}
html {
  line-height: 1;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: var(--dcore-typography-body-medium-default-font-family);
  font-size: var(--dcore-typography-body-medium-default-font-size);
  font-weight: var(--dcore-typography-body-medium-default-font-weight);
  letter-spacing: var(--dcore-typography-body-medium-default-letter-spacing);
  line-height: var(--dcore-typography-body-medium-default-line-height);
  text-decoration: var(--dcore-typography-body-medium-default-text-decoration);
  text-transform: var(--dcore-typography-body-medium-default-text-case);

  background-color: var(--dcore-theme-bg-canvas);
}

/* Google reCAPTCHA - must declare inline that reCAPTCHA is in use */
.grecaptcha-badge {
  display: none !important;
}

/* Structure */

.main-wrapper {
  margin: 0 auto;
  max-width: var(--fc-container-max-width);
  padding: 0 var(--dcore-spacing-xl);
  width: 100%;
}

/**
 * Typography
 *
 * Additional typography focused classes seperates style from semantics
**/

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: var(--dcore-theme-fg-default);
}

h1,
.h1 {
  font-family: var(--dcore-typography-heading-1-s-m-font-family);
  font-size: var(--dcore-typography-heading-1-s-m-font-size);
  font-weight: var(--dcore-typography-heading-1-s-m-font-weight);
  letter-spacing: var(--dcore-typography-heading-1-s-m-letter-spacing);
  line-height: var(--dcore-typography-heading-1-s-m-line-height);
  text-decoration: var(--dcore-typography-heading-1-s-m-text-decoration);
  text-transform: var(--dcore-typography-heading-1-s-m-text-case);
}
h2,
.h2 {
  font-family: var(--dcore-typography-heading-2-s-m-font-family);
  font-size: var(--dcore-typography-heading-2-s-m-font-size);
  font-weight: var(--dcore-typography-heading-2-s-m-font-weight);
  letter-spacing: var(--dcore-typography-heading-2-s-m-letter-spacing);
  line-height: var(--dcore-typography-heading-2-s-m-line-height);
  text-decoration: var(--dcore-typography-heading-2-s-m-text-decoration);
  text-transform: var(--dcore-typography-heading-2-s-m-text-case);
}
h3,
.h3 {
  font-family: var(--dcore-typography-heading-3-s-m-font-family);
  font-size: var(--dcore-typography-heading-3-s-m-font-size);
  font-weight: var(--dcore-typography-heading-3-s-m-font-weight);
  letter-spacing: var(--dcore-typography-heading-3-s-m-letter-spacing);
  line-height: var(--dcore-typography-heading-3-s-m-line-height);
  text-decoration: var(--dcore-typography-heading-3-s-m-text-decoration);
  text-transform: var(--dcore-typography-heading-3-s-m-text-case);
}
h4,
.h4 {
  font-family: var(--dcore-typography-heading-4-s-m-font-family);
  font-size: var(--dcore-typography-heading-4-s-m-font-size);
  font-weight: var(--dcore-typography-heading-4-s-m-font-weight);
  letter-spacing: var(--dcore-typography-heading-4-s-m-letter-spacing);
  line-height: var(--dcore-typography-heading-4-s-m-line-height);
  text-decoration: var(--dcore-typography-heading-4-s-m-text-decoration);
  text-transform: var(--dcore-typography-heading-4-s-m-text-case);
}
h5,
.h5 {
  font-family: var(--dcore-typography-heading-5-all-sizes-font-family);
  font-size: var(--dcore-typography-heading-5-all-sizes-font-size);
  font-weight: var(--dcore-typography-heading-5-all-sizes-font-weight);
  letter-spacing: var(--dcore-typography-heading-5-all-sizes-letter-spacing);
  line-height: var(--dcore-typography-heading-5-all-sizes-line-height);
  text-decoration: var(--dcore-typography-heading-5-all-sizes-text-decoration);
  text-transform: var(--dcore-typography-heading-5-all-sizes-text-case);
}
h6,
.h6 {
  font-family: var(--dcore-typography-heading-6-all-sizes-font-family);
  font-size: var(--dcore-typography-heading-6-all-sizes-font-size);
  font-weight: var(--dcore-typography-heading-6-all-sizes-font-weight);
  letter-spacing: var(--dcore-typography-heading-6-all-sizes-letter-spacing);
  line-height: var(--dcore-typography-heading-6-all-sizes-line-height);
  text-decoration: var(--dcore-typography-heading-6-all-sizes-text-decoration);
  text-transform: var(--dcore-typography-heading-6-all-sizes-text-case);
}
p.large {
  font-family: var(--dcore-typography-body-large-default-font-family);
  font-size: var(--dcore-typography-body-large-default-font-size);
  font-weight: var(--dcore-typography-body-large-default-font-weight);
  letter-spacing: var(--dcore-typography-body-large-default-letter-spacing);
  line-height: var(--dcore-typography-body-large-default-line-height);
  text-decoration: var(--dcore-typography-body-large-default-text-decoration);
  text-transform: var(--dcore-typography-body-large-default-text-case);
}
p,
p.medium,
ul li,
ol li {
  font-family: var(--dcore-typography-body-medium-default-font-family);
  font-size: var(--dcore-typography-body-medium-default-font-size);
  font-weight: var(--dcore-typography-body-medium-default-font-weight);
  letter-spacing: var(--dcore-typography-body-medium-default-letter-spacing);
  line-height: var(--dcore-typography-body-medium-default-line-height);
  text-decoration: var(--dcore-typography-body-medium-default-text-decoration);
  text-transform: var(--dcore-typography-body-medium-default-text-case);
}
p.small {
  font-family: var(--dcore-typography-body-small-default-font-family);
  font-size: var(--dcore-typography-body-small-default-font-size);
  font-weight: var(--dcore-typography-body-small-default-font-weight);
  letter-spacing: var(--dcore-typography-body-small-default-letter-spacing);
  line-height: var(--dcore-typography-body-small-default-line-height);
  text-decoration: var(--dcore-typography-body-small-default-text-decoration);
  text-transform: var(--dcore-typography-body-small-default-text-case);
}
label.small,
.label.small {
  font-family: var(--dcore-typography-label-small-font-family);
  font-size: var(--dcore-typography-label-small-font-size);
  font-weight: var(--dcore-typography-label-small-font-weight);
  letter-spacing: var(--dcore-typography-label-small-letter-spacing);
  line-height: var(--dcore-typography-label-small-line-height);
  text-decoration: var(--dcore-typography-label-small-text-decoration);
  text-transform: var(--dcore-typography-label-small-text-case);
}
label.large,
.label.large {
  font-family: var(--dcore-typography-label-large-font-family);
  font-size: var(--dcore-typography-label-large-font-size);
  font-weight: var(--dcore-typography-label-large-font-weight);
  letter-spacing: var(--dcore-typography-label-large-letter-spacing);
  line-height: var(--dcore-typography-label-large-line-height);
  text-decoration: var(--dcore-typography-label-large-text-decoration);
  text-transform: var(--dcore-typography-label-large-text-case);
}

@media only screen and (min-width: 768px) {
  h1,
  .h1 {
    font-family: var(--dcore-typography-heading-1-l-xl-font-family);
    font-size: var(--dcore-typography-heading-1-l-xl-font-size);
    font-weight: var(--dcore-typography-heading-1-l-xl-font-weight);
    letter-spacing: var(--dcore-typography-heading-1-l-xl-letter-spacing);
    line-height: var(--dcore-typography-heading-1-l-xl-line-height);
    text-decoration: var(--dcore-typography-heading-1-l-xl-text-decoration);
    text-transform: var(--dcore-typography-heading-1-l-xl-text-case);
  }
  h2,
  .h2 {
    font-family: var(--dcore-typography-heading-2-l-xl-font-family);
    font-size: var(--dcore-typography-heading-2-l-xl-font-size);
    font-weight: var(--dcore-typography-heading-2-l-xl-font-weight);
    letter-spacing: var(--dcore-typography-heading-2-l-xl-letter-spacing);
    line-height: var(--dcore-typography-heading-2-l-xl-line-height);
    text-decoration: var(--dcore-typography-heading-2-l-xl-text-decoration);
    text-transform: var(--dcore-typography-heading-2-l-xl-text-case);
  }
  h3,
  .h3 {
    font-family: var(--dcore-typography-heading-3-l-xl-font-family);
    font-size: var(--dcore-typography-heading-3-l-xl-font-size);
    font-weight: var(--dcore-typography-heading-3-l-xl-font-weight);
    letter-spacing: var(--dcore-typography-heading-3-l-xl-letter-spacing);
    line-height: var(--dcore-typography-heading-3-l-xl-line-height);
    text-decoration: var(--dcore-typography-heading-3-l-xl-text-decoration);
    text-transform: var(--dcore-typography-heading-3-l-xl-text-case);
  }
  h4,
  .h4 {
    font-family: var(--dcore-typography-heading-4-l-xl-font-family);
    font-size: var(--dcore-typography-heading-4-l-xl-font-size);
    font-weight: var(--dcore-typography-heading-4-l-xl-font-weight);
    letter-spacing: var(--dcore-typography-heading-4-l-xl-letter-spacing);
    line-height: var(--dcore-typography-heading-4-l-xl-line-height);
    text-decoration: var(--dcore-typography-heading-4-l-xl-text-decoration);
    text-transform: var(--dcore-typography-heading-4-l-xl-text-case);
  }

}
hr {
  border: 0;
  border-top: 1px solid var(--dcore-colors-grey-200);
  margin: 16px 0;
}
strong {
  font-weight: 700;
}

/* Skeleton Loader */
.skeleton-loader,
[data-skeleton='true'] {
  --skeleton-background-0: hsl(200, 20%, 90%);
  --skeleton-background-100: hsl(200, 20%, 95%);
  animation: skeleton-loading 1s linear infinite alternate;
  border-radius: 0.25rem;
}

@keyframes skeleton-loading {
  0% {
    background-color: var(--skeleton-background-0, hsl(200, 20%, 90%));
  }
  100% {
    background-color: var(--skeleton-background-100, hsl(200, 20%, 95%));
  }
}

/* Chatbot */
.embeddedMessagingConversationButtonWrapper {
  border: 2px solid var(--dcore-colors-white);
}
.embeddedMessagingConversationButton {
  background-color: var(--fc-theme-accent-default);
}

/* fcHelpHeader animation - unable to deploy via LWC, so lives here */
@keyframes scroll-text {
  0% {
    transform: translateY(calc(-0%));
  }
  -8.88888888888889% {
    transform: translateY(calc(-0%));
  }
  11.11111111111111% {
    transform: translateY(calc(-10%));
  }
  2.2222222222222214% {
    transform: translateY(calc(-10%));
  }
  22.22222222222222% {
    transform: translateY(calc(-20%));
  }
  13.333333333333329% {
    transform: translateY(calc(-20%));
  }
  33.33333333333333% {
    transform: translateY(calc(-30%));
  }
  24.444444444444443% {
    transform: translateY(calc(-30%));
  }
  44.44444444444444% {
    transform: translateY(calc(-40%));
  }
  35.55555555555556% {
    transform: translateY(calc(-40%));
  }
  55.55555555555556% {
    transform: translateY(calc(-50%));
  }
  46.66666666666667% {
    transform: translateY(calc(-50%));
  }
  66.66666666666666% {
    transform: translateY(calc(-60%));
  }
  57.77777777777777% {
    transform: translateY(calc(-60%));
  }
  77.77777777777777% {
    transform: translateY(calc(-70%));
  }
  68.88888888888889% {
    transform: translateY(calc(-70%));
  }
  88.88888888888889% {
    transform: translateY(calc(-80%));
  }
  80% {
    transform: translateY(calc(-80%));
  }
  100% {
    transform: translateY(calc(-90%));
  }
  91.11111111111111% {
    transform: translateY(calc(-90%));
  }
}


/* Rich Text Styles for Knowledge Article */
.rich-text-editor__output {
  .tip {
    color: var(--dcore-theme-fg-default);
    background-color: var(--dcore-theme-info-subtle);
    border-color: var(--dcore-theme-info-default);
    border-width: var(--dcore-toast-border-width);
    border-style: solid;
    border-radius: var(--dcore-toast-border-radius);
    padding: var(--dcore-toast-spacing-vertical-padding) var(--dcore-toast-spacing-horizontal-padding);
    /* TODO: align with c-core-ui-toast styles */
  }

  hr {
    border: 0;
    border-top: 1px solid var(--dcore-colors-grey-200);
    margin: var(--dcore-spacing-4xl) 0;
  }

  h2 {
    margin: var(--dcore-spacing-3xl) 0 var(--dcore-spacing-md);
  }
  h3,
  h4 {
    font-weight: var(--dcore-font-weights-headlines-regular);
  }

  a {
    font-weight: var(--dcore-font-weights-body-medium);
    text-decoration: underline !important;
  }

  p {
    margin: var(--dcore-spacing-md) 0;
  }

  em {
    font-style: italic;
  }

  ul {
    padding: 0 1rem;
  }

  ol {
    list-style: none;
    margin: var(--dcore-spacing-xl) 0;

    &[start="1"] { counter-reset: item 0; }
    &[start="2"] { counter-reset: item 1; }
    &[start="3"] { counter-reset: item 2; }
    &[start="4"] { counter-reset: item 3; }
    &[start="5"] { counter-reset: item 4; }
    &[start="6"] { counter-reset: item 5; }
    &[start="7"] { counter-reset: item 6; }
    &[start="8"] { counter-reset: item 7; }
    &[start="9"] { counter-reset: item 8; }
    &[start="10"] { counter-reset: item 9; }
    &[start="11"] { counter-reset: item 10; }
    &[start="12"] { counter-reset: item 11; }
    &[start="13"] { counter-reset: item 12; }
    &[start="14"] { counter-reset: item 13; }
    &[start="15"] { counter-reset: item 14; }
    &[start="16"] { counter-reset: item 15; }
    &[start="17"] { counter-reset: item 16; }
    &[start="18"] { counter-reset: item 17; }
    &[start="19"] { counter-reset: item 18; }
    &[start="20"] { counter-reset: item 19; }
    
    /* use attr(value, fallback) when supported */
    @supports (counter-reset: item attr(start, 0)) {
      /* Use attr() to read the start value, default to 1 */
      counter-reset: item calc(attr(start, 1) - 1);
    }

    /* use attr(value <type>, fallback) when supported */
    @supports (counter-reset: item attr(start number, 0)) {
      /* Use attr() to read the start value, default to 1 */
      counter-reset: item calc(attr(start number, 1) - 1);
    }

    li {
      counter-increment: item;
      position: relative;
      padding: 0 0 0 4rem;
      margin: var(--dcore-spacing-xl) 0 var(--dcore-spacing-3xl);
      /* use ::marker once browser support is better */
      &::marker {
        display: none;
      }
      &::before {
        content: counter(item);
        position: absolute;
        top: calc(var(--dcore-spacing-sm) * -1);
        left: 0;
        background-color: var(--dcore-colors-grey-200);
        width: var(--dcore-spacing-xl);
        height: var(--dcore-spacing-xl);
        border-radius: 999px;
        padding: var(--dcore-spacing-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--dcore-font-size-md);
      }
    }
  }

  .btn-primary {
    background-color: var(--dcore-button-solid-accent-default-background-color);
    color: var(--dcore-button-solid-accent-default-text-color);
    border-color: var(--dcore-button-solid-accent-default-border-color);
    border-width: var(--dcore-button-border-width, 2px);
    border-style: solid;
    border-radius: var(--dcore-button-border-radius, 64px);
    padding: 12px 24px;
    text-decoration: none !important;
    &:hover {
      background-color: var(--dcore-button-solid-accent-hover-background-color);
      color: var(--dcore-button-solid-accent-hover-text-color);
      border-color: var(--dcore-button-solid-accent-hover-border-color);
    }
    &:focus-visible {
      background-color: var(--dcore-button-solid-accent-focus-background-color);
      color: var(--dcore-button-solid-accent-focus-text-color);
      border-color: var(--dcore-button-solid-accent-focus-border-color);

      outline: var(--dcore-button-solid-accent-focus-outline-color) solid var(--dcore-button-outline-width, 2px);
      outline-offset: var(--dcore-button-outline-offset, 2px);
    }
  }
}

/* TODO: might be better to regex extract anchor links from the richtext body and dynamically add it to the top of knowledge content */
/* .anchorLink {
  background-color: var(--dcore-tab-default-background-color);
  color: var(--dcore-tab-default-label-color) !important;
  border-color: var(--dcore-tab-default-border-color);
  border-width: 0 0 var(--dcore-tab-border-width);
  border-style: solid;
  max-width: var(--dcore-tab-max-width);
  border-radius: 0px;
  padding: var(--dcore-tab-spacing-vertical-tab-padding) var(--dcore-tab-spacing-horizontal-tab-padding);
  white-space: nowrap;
}
.anchorLink:hover {
  background-color: var(--dcore-tab-hover-background-color);
  color: var(--dcore-tab-hover-label-color) !important;
  border-color: var(--dcore-tab-hover-border-color);
}
.anchorLink:focus-visible {
  background-color: var(--dcore-tab-focus-background-color);
  color: var(--dcore-tab-focus-label-color) !important;
  border-color: var(--dcore-tab-focus-border-color);
}

.anchorContainer {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  overflow: auto;
  background: var(--dcore-card-fill-default-background-color);
}

.anchorLink + br {
  display: none;
} */