html {
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden;
    background-color: var(--theme-body-color);
    cursor: unset;
    cursor: url(../images/icons/cursor.svg), auto;
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;  /* required for sticky position to work on desktop and mobile */
    font-family: var(--theme-font-family-body);
    font-size: var(--theme-font-size-base);
    font-weight: var(--theme-font-weight-normal);
    line-height: var(--theme-line-height-base);
    color: var(--theme-body-text-color);
    background-color: var(--theme-body-color);
}

body.has-header-padding {
    padding-top: var(--header-height, 25px);
}

/* body.is-action-bar-visible {
    padding-bottom: var(--action-bar-height, calc(var(--space) * 15));
} */

body.has-scrollbar {
    --theme-scrollbar-offset: var(--theme-scrollbar-width);
}

/* stylelint-disable property-no-vendor-prefix */
body:not(.fade-out) > *:not(.site-header) {
    animation: fade-in 0.5s ease 0 1;
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    will-change: opacity;
}

body.faded > *:not(.site-header) {
    opacity: 0;
}

body.fade-out > *:not(.site-header) {
    animation: fade-out 0.5s ease 0 1;
    -webkit-animation-name: fade-out;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    will-change: opacity;
}
/* stylelint-enable property-no-vendor-prefix */

body a {
    color: inherit;
}

/* stylelint-disable-next-line no-descending-specificity */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Resets */
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
body,
html,
p,
blockquote,
fieldset,
input,
button,
figure {
    padding: 0;
    margin: 0;
}

figure img {
    vertical-align: middle;
}

input[type='text'],
input[type='number'],
input[type='email'],
textarea,
select,
input[type='radio'],
input[type='checkbox'] {
    font-family: inherit;
    text-shadow: none;
    appearance: none;
    outline: none;
}

textarea {
    resize: none;
}

/* outline when focused with keyboard */
/* stylelint-disable-next-line no-descending-specificity */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
*:focus-visible {
    border-color: var(--theme-focus-outline-color);
    box-shadow: 0px 0px 0px var(--theme-form-border-width) var(--theme-focus-outline-color);
}

/* Chrome, Safari, Edge, Opera - hide input arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none; /* stylelint-disable-line */
}

/* Firefox - hide input arrows */
input[type="number"] {
    -moz-appearance: textfield; /* stylelint-disable-line */
}

button,
[role="button"] {
    display: inline-block;
    text-decoration: none;
    appearance: none;
    border: none;
}

fieldset {
    min-inline-size: auto;
    border: none;
}

/* Hiding class, making content visible only to screen readers but not visually */
.visually-hidden:not(:focus, :active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

div[hidden] {
    display: none;
}

[x-cloak] {
    display: none !important;
}

/* https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed */
.grecaptcha-badge {
    visibility: hidden;
}

/* text */
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
    font-family: var(--theme-font-family-headline);
    color: var(--theme-heading-color);
}

.heading-2 {
    font-size: var(--theme-h3-font-size);
    font-weight: var(--theme-font-weight-headline);
    line-height: var(--theme-h3-line-height);
    letter-spacing: var(--theme-h2-letter-spacing-mobile);
}

@media (min-width: 700px) {
    .heading-2 {
        font-size: var(--theme-h2-font-size);
        line-height: var(--theme-h2-line-height);
        letter-spacing: var(--theme-h2-letter-spacing);
    }
}

.heading-3 {
    font-size: var(--theme-h4-font-size);
    font-weight: calc(var(--theme-font-weight-headline) + 200);
    line-height: var(--theme-h4-line-height);
    letter-spacing: var(--theme-h3-letter-spacing);
}

@media (min-width: 700px) {
    .heading-3 {
        font-size: var(--theme-h3-font-size);
        line-height: var(--theme-h3-line-height);
    }
}

.heading-4 {
    font-size: var(--theme-h5-font-size);
    font-weight: calc(var(--theme-font-weight-headline) + 200);
    line-height: var(--theme-h5-line-height);
}

@media (min-width: 700px) {
    .heading-4 {
        font-size: var(--theme-h4-font-size);
        line-height: var(--theme-h4-line-height);
    }
}

.heading-5 {
    font-size: var(--theme-h6-font-size);
    font-weight: calc(var(--theme-font-weight-headline) + 200);
    line-height: var(--theme-h6-line-height);
}

@media (min-width: 700px) {
    .heading-5 {
        font-size: var(--theme-h5-font-size);
        line-height: var(--theme-h5-line-height);
    }
}

.heading-6 {
    font-size: var(--theme-font-size-base);
    font-weight: calc(var(--theme-font-weight-headline) - 200);
    line-height: var(--theme-line-height-base);
}

@media (min-width: 700px) {
    .heading-6 {
        font-size: var(--theme-h6-font-size);
        line-height: var(--theme-h6-line-height);
    }
}

.title {
    font-family: var(--theme-font-family-title);
    font-weight: var(--theme-font-weight-title);
}

p {
    font-weight: var(--theme-font-weight-light);
}

/* Global Page spacing */

.page {
    padding-top: var(--space-x4);
}

/* global section heading margin */
.heading-with-margin {
    margin-bottom: var(--space-x2);
}

@media (min-width: 700px) {
    .heading-with-margin {
        margin-bottom: var(--space-x4);
    }
}

/* icon */
.material-symbols-filled {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

/* container */
.container {
    box-sizing: border-box;
    max-width: var(--theme-max-container);
    padding-right: var(--theme-container-padding);
    padding-left: var(--theme-container-padding);
    margin-right: auto;
    margin-left: auto;
}

.container--fullwidth {
    margin-right: calc(var(--theme-container-padding) * -1);
    margin-left: calc(var(--theme-container-padding) * -1);
}

@media (min-width: 700px) {
    .container--fullwidth {
        margin-right: auto;
        margin-left: auto;
    }
}

.container--fullwidth-padding {
    padding-right: var(--theme-container-padding);
    padding-left: var(--theme-container-padding);
}

@media (min-width: 700px) {
    .container--fullwidth-padding {
        padding-right: 0;
        padding-left: 0;
    }
}

.custom-scrollbar {
    -webkit-overflow-scrolling: touch;
    overflow: hidden scroll; /* always show scrollbar for overflow-y to avoid width reflow */
    visibility: hidden;
}

.is-touch-device .custom-scrollbar,
.custom-scrollbar-inner {
    visibility: visible;
}

/* Show scrollbar on hover */
.custom-scrollbar:hover {
    animation: 0s linear 0.1s forwards delayed-visible;
}

@keyframes delayed-visible {
    to {
        visibility: visible;
    }
}

body::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    width: var(--theme-scrollbar-width);
    background: var(--theme-scrollbar-color);
}

body::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--theme-scrollbar-thumb-color);
    border-radius: var(--theme-scrollbar-width);
}

body[dialog-size="large"].is-mobile.custom-scrollbar::-webkit-scrollbar {
    background: var(--theme-scrollbar-color);
}

body[dialog-variant="halfsheet"] main {
    filter: blur(3px);
}

.main-content {
    position: relative;
    z-index: var(--theme-z-index-main);
}

/* page loader */
.page-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

/* list styles */
.bulleted-list {
    margin-left: var(--space-x4);
    list-style: none;
}

.bulleted-list li {
    position: relative;
    font-weight: var(--theme-font-weight-light);
}

.bulleted-list li::before {
    position: absolute;
    top: calc(var(--theme-line-height-base) * var(--theme-font-size-base) / 3);
    left: 0;
    width: 8px;
    height: 8px;
    margin-left: calc(var(--space-x3) * -1);
    content: "";
    background-color: var(--theme-bulleted-list-icon-color);
    border-radius: 50%;
}

.site-logo {
    font-size: var(--theme-logo-font-size);
    font-weight: var(--theme-logo-font-weight);
    line-height: var(--theme-logo-line-height);
    color: var(--theme-heading-color);
    text-decoration: none;
    text-transform: uppercase;
} 

button {
    cursor: unset;
}

label {
    cursor: unset;
}

a:-webkit-any-link {
    cursor: unset;
}
