/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import url('reset.css');

:root {
  --section-padding-block: 2.4rem;
  --block-padding-block: 2.4rem;
  --block-padding-inline: 1.6rem;
  --max-width-small: 32rem;
  --max-width-tablet: 76.8rem;
  --max-width-default: 144rem;
  --max-width-large: 192rem;
  --block-max-width: var(--max-width-large);
  --nav-height: 4.5rem;

  @media (width >= 768px) {
    --block-padding-inline: 3.2rem;
  }

  @media (width >= 960px) {
    --nav-height: 6.4rem;
  }

  @media (width >= 1440px) {
    --block-padding-inline: 12rem;
  }

  @media (width >= 1920px) {
    --block-padding-inline: 24rem;
  }
}

html,
body {
  min-height: 100%;
}

html {
  font-size: 62.5%;

  /* Paired with body below — both must clip to contain the full-bleed mega-menu
     bar's width:100vw overshoot (see body rule). */
  overflow-x: clip;

  /*
   * Applies scroll-padding-top (height of header + height of page title if present + an 8px offset)
   * to prevent focused elements from hiding behind the sticky header
   */

  /* mobile header nav (45px) + offset (8px) */
  scroll-padding-top: 53px;

  @media (width >= 960px) {
    /* desktop header nav (100px) + offset (8px) */
    scroll-padding-top: 108px;
  }

  @media (width >= 2100px) {
    /* single-row nav (54px) + offset (8px) */
    scroll-padding-top: 62px;
  }

  /* when the sticky page title is present */
  &:has(.page-title) {
    /* mobile header nav (45px) + page title (57px) + offset (8px) */
    scroll-padding-top: 110px;

    @media (width >= 768px) {
      /* tablet header nav (45px) + page title (65px) + offset (8px) */
      scroll-padding-top: 118px;
    }

    @media (width >= 960px) {
      /* desktop header nav (100px) + page title (49px) + offset (8px) */
      scroll-padding-top: 157px;
    }

    @media (width >= 2100px) {
      /* single-row nav (54px) + page title (49px) + offset (8px) */
      scroll-padding-top: 111px;
    }
  }
}

body {
  font-family: var(--ds-typography-body-default-regular-font-family);
  font-weight: var(--ds-typography-body-default-regular-font-weight);
  font-size: var(--ds-typography-body-default-regular-font-size);
  line-height: var(--ds-typography-body-default-regular-line-height);
  letter-spacing: var(--ds-typography-body-default-regular-letter-spacing);

  /* Reserve space for the OneTrust top banner so it never covers the header or
     the in-flow mobile drawer. The var self-clears to 0 once dismissed. */
  padding-top: var(--onetrust-banner-height, 0);

  /* Clip the full-bleed mega-menu bar's width:100vw overshoot. 100vw includes
     the classic scrollbar width but the content box doesn't, so an open flyout
     otherwise pushes a ~15px horizontal scrollbar on non-overlay-scrollbar
     browsers (Edge/Windows). Both html and body must clip (a lone one lets the
     viewport still scroll). `clip` (not `hidden`) adds no scroll container, so
     the sticky header is unaffected. */
  overflow-x: clip;
}

header {
  grid-row: 1;
  height: var(--nav-height);
  min-height: 45px;

  /* mobile nav row; literal so it's stable at first paint (the --nav-height mobile override is nested/late) */
}

@media (width >= 960px) {
  header {
    min-height: 135px;

    /* decorated desktop header: 35px utility bar + 100px nav */
  }
}

@media (width >= 2100px) {
  header {
    min-height: 89px;

    /* single-row nav (54px) + utility bar (35px) */
  }
}

main {
  grid-row: 2;
}

footer {
  grid-row: 3;
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

hr {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border: 0;
  border-bottom: var(--shape-border-width-1) solid var(--color-neutral-300);
}

code,
pre {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  font-family: var(--type-fixed-font-family);
}

pre {
  overflow: scroll;
}

main pre {
  background-color: var(--color-neutral-300);
  padding: 1em;
  border-radius: 0.25em;
  overflow-x: auto;
  white-space: pre;
}

input,
textarea,
select,
button {
  font: inherit;
}

:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: var(--ds-focus-ring-border-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-size-2px);
}

.double-outline-focus:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #000;
  border-radius: inherit;
}

/* links */

/* skip link */

.skip-to-main-content {
  position: absolute;
  top: -100%;
  left: var(--ds-size-4px);
  z-index: 10000;
  padding: var(--ds-size-8rem) var(--ds-size-16rem);
  background: var(--color-neutral-900, #000);
  color: var(--color-neutral-0, #fff);
  font-size: var(--ds-typography-body-default-regular-font-size, 1.4rem);
  text-decoration: none;
  transition: top 0.1s;
}

.skip-to-main-content:focus-visible {
  top: var(--ds-size-4px);
}

/* buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-button-small-gap);
  padding: var(--ds-button-small-padding-vertical) var(--ds-button-small-padding-horizontal);
  font-family: var(--ds-button-small-typography-font-family);
  font-size: var(--ds-button-small-typography-font-size);
  font-weight: var(--ds-button-small-typography-font-weight);
  line-height: var(--ds-button-small-typography-line-height);
  letter-spacing: var(--ds-button-small-typography-letter-spacing);
  text-transform: var(--ds-button-case);
  border-radius: var(--ds-button-border-radius);
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--ds-animation-transition-duration),
              color var(--ds-animation-transition-duration),
              border-color var(--ds-animation-transition-duration);

  @media (width >= 768px) {
    gap: var(--ds-button-medium-gap);
    padding: var(--ds-button-medium-padding-vertical) var(--ds-button-medium-padding-horizontal);
    font-size: var(--ds-button-medium-typography-font-size);
    line-height: var(--ds-button-medium-typography-line-height);
  }

  @media (width >= 1440px) {
    gap: var(--ds-button-large-gap);
    padding: var(--ds-button-large-padding-vertical) var(--ds-button-large-padding-horizontal);
    font-size: var(--ds-button-large-typography-font-size);
    line-height: var(--ds-button-large-typography-line-height);
  }
}

/* Primary */
.button.primary {
  background-color: var(--ds-button-primary-default-background-color);
  color: var(--ds-button-primary-default-content-color);
}

.button.primary:hover {
  background-color: var(--ds-button-primary-hover-background-color);
  color: var(--ds-button-primary-hover-content-color);
}

.button.primary:disabled,
.button.primary.disabled {
  background-color: var(--ds-button-primary-disabled-background-color);
  color: var(--ds-button-primary-disabled-content-color);
  cursor: not-allowed;
}

/* Secondary */
.button.secondary {
  background-color: var(--ds-button-secondary-default-background-color);
  color: var(--ds-button-secondary-default-content-color);
  border: var(--ds-button-secondary-default-border-width) solid var(--ds-button-secondary-default-border-color);
}

.button.secondary:hover {
  background-color: var(--ds-button-secondary-hover-background-color);
  color: var(--ds-button-secondary-hover-content-color);
  border-color: var(--ds-button-secondary-hover-border-color);
}

.button.secondary:disabled,
.button.secondary.disabled {
  background-color: var(--ds-button-secondary-disabled-background-color);
  color: var(--ds-button-secondary-disabled-content-color);
  border-color: var(--ds-button-secondary-disabled-border-color);
  cursor: not-allowed;
}

/* Tertiary */
.button.tertiary {
  background-color: var(--ds-button-tertiary-default-background-color);
  color: var(--ds-button-tertiary-default-content-color);
  padding-inline: 0;
  border-bottom: var(--ds-border-width-small) solid transparent;
}

.button.tertiary:hover {
  border-bottom-color: var(--ds-button-tertiary-hover-border-color);
}

.button.tertiary:disabled,
.button.tertiary.disabled {
  color: var(--ds-button-tertiary-disabled-content-color);
  cursor: not-allowed;
}

/* Knockout variants — for use on dark backgrounds */
.button.primary.knockout {
  background-color: var(--ds-button-primary-knockout-default-background-color);
  color: var(--ds-button-primary-knockout-default-content-color);
}

.button.primary.knockout:hover {
  background-color: var(--ds-button-primary-knockout-hover-background-color);
  color: var(--ds-button-primary-knockout-hover-content-color);
}

.button.secondary.knockout {
  background-color: var(--ds-button-secondary-knockout-default-background-color);
  color: var(--ds-button-secondary-knockout-default-content-color);
  border: var(--ds-button-secondary-knockout-default-border-width) solid var(--ds-button-secondary-knockout-default-border-color);
}

.button.secondary.knockout:hover {
  background-color: var(--ds-button-secondary-knockout-hover-background-color);
  color: var(--ds-button-secondary-knockout-hover-content-color);
  border-color: var(--ds-button-secondary-knockout-hover-border-color);
}

.button.tertiary.knockout {
  background-color: var(--ds-button-tertiary-knockout-default-background-color);
  color: var(--ds-color-content-default);
  padding-inline: 0;
  border-bottom: var(--ds-border-width-small) solid transparent;
}

.button.tertiary.knockout:hover {
  border-bottom-color: var(--ds-button-tertiary-knockout-hover-border-color);
}

/* Text Link Button — SDS Text Link Button component.
   Color never changes on hover; only the border-bottom appears.
   Use .button.text-link for light backgrounds, .button.text-link.knockout for dark. */
.button.text-link {
  background: transparent;
  color: var(--ds-color-content-default);
  padding-inline: 0;
  border-bottom: var(--ds-border-width-small) solid transparent;
  border-radius: 0;
}

.button.text-link:hover {
  color: var(--ds-color-content-default);
}

.button.text-link:disabled,
.button.text-link.disabled {
  color: var(--ds-button-tertiary-disabled-content-color);
  cursor: not-allowed;
}

.button.text-link.knockout:hover {
  border-bottom-color: var(--ds-button-tertiary-knockout-hover-border-color);
}

main input:hover {
  border: var(--shape-border-width-1) solid var(--color-neutral-700);
}

main blockquote {
  font-style: italic;
  margin: 3rem;
  text-indent: -1rem;
  hanging-punctuation: first;
}

main blockquote p::before {
  content: '“';
  line-height: 0;
}

main blockquote p::after {
  content: '”';
  line-height: 0;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 2.4rem;
  width: 2.4rem;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* Icons inside buttons use CSS mask so background-color: currentcolor
   automatically matches button text color across all types, states, and knockout variants.
   Blocks add the icon span via JS (no img), then set mask-image in block CSS. */
.button .icon {
  display: block;
  background-color: currentcolor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
}

/* sections */
.section {
  padding-block: var(--section-padding-block);
}

main > .section > div {
  max-width: var(--block-max-width);
  margin-inline: auto;
  padding-inline: var(--block-padding-inline);
  padding-block: var(--block-padding-block);
}

/* Header & Footer Global Stylings */
header > .section, footer > .section {
  padding-block: 0;
}

main > .section:first-of-type {
  margin-top: 0;
}

/* section metadata */
main .section.white {
  background-color: var(--color-utility-white, #FFF);
}

main .section.gray {
  background-color: var(--color-background-subtle, #F6F6F6);
}

/*
 * UE richtext fields need a real box in authoring so the canvas can hover/select
 * them directly. Published pages do not include these attributes, so this has no
 * impact outside the UE author/preview experience.
 */
html.adobe-ue-edit [data-aue-type="richtext"],
html.adobe-ue-preview [data-aue-type="richtext"] {
  display: block;
}

/* Opt-in accordion motion utility.
   Mark <details> with .ds-accordion and use a single .ds-accordion-panel child
   (with .ds-accordion-panel-inner inside) for smooth open/close animation. */
details.ds-accordion > .ds-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--ds-animation-transition-duration) ease,
              visibility var(--ds-animation-transition-duration) ease;
}

details.ds-accordion[open] > .ds-accordion-panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

details.ds-accordion > .ds-accordion-panel > .ds-accordion-panel-inner {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  details.ds-accordion > .ds-accordion-panel {
    transition: none;
  }
}

/* ── Slider controls (arrows + toggle) ───────────────────────── */

/* View All sits left of the arrow pair, gap: 16px between them */
.cards-controls {
  display: flex;
  align-items: center;
  gap: var(--ds-size-16px);
  flex-shrink: 0;
}

/* Arrow pair grouped together */
.cards-arrows {
  display: flex;
  align-items: center;
  gap: var(--ds-size-12px);

  &[hidden] {
    display: none;
    visibility: hidden;
  }
}

/* Compact 16×16 chevron arrows — no circle border */
.cards-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;

  & .icon {
    background-color: var(--ds-color-border-strong);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    width: 1.6rem;
    height: 1.6rem;
    transition: background-color var(--ds-animation-transition-duration);
  }

}

.cards-arrow[disabled] .icon,
.cards-arrow[aria-disabled="true"] .icon {
  background-color: var(--ds-color-content-disabled);
}

.cards-arrow[disabled],
.cards-arrow[aria-disabled="true"] {
  cursor: not-allowed;
}

.cards-arrow:hover:not([disabled]) .icon {
  background-color: var(--ds-color-content-default);
}

.cards-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ds-color-content-subtle);
  padding: 0;

  &:hover {
    text-decoration: var(--ds-typography-link-text-decoration-hover);
  }
}

/* Keep vertical scrolling natural while allowing horizontal swipe gestures. */
.cards--slider .cards-slider {
  touch-action: pan-y;
}

#onetrust-consent-sdk #onetrust-banner-sdk #onetrust-policy-text {
  font-size: 1.2rem !important;
  line-height: 1.8rem !important;
}

#onetrust-consent-sdk #onetrust-banner-sdk.top #onetrust-policy-text {
  margin: 0 0 1.2rem !important;
}

#onetrust-consent-sdk #onetrust-banner-sdk.top #onetrust-accept-btn-handler {
  margin: 1.3008rem 1.3008rem 1.6rem 0 !important;
}

#onetrust-consent-sdk #onetrust-banner-sdk.top #onetrust-pc-btn-handler {
  margin: 1.3008rem 1.3008rem 1.6rem 0 !important;
}