/* ==========================================================================
   WizeTek base — reset, document defaults, typography, accessibility
   Depends on tokens.css.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    background: var(--wz-white);
    color: var(--wz-ink);
    font-family: var(--wz-font-body);
    font-size: var(--wz-fs-body);
    line-height: var(--wz-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* --- Headings ----------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--wz-font-display);
    font-weight: 600;
    line-height: var(--wz-lh-heading);
    letter-spacing: var(--wz-tracking-display);
    color: inherit;
    text-wrap: balance;
}

h1 {
    font-size: var(--wz-fs-h1);
    font-weight: 700;
}
h2 {
    font-size: var(--wz-fs-h2);
}
h3 {
    font-size: var(--wz-fs-h3);
}
h4 {
    font-size: var(--wz-fs-h4);
}

p {
    margin: 0 0 var(--wz-s-4);
}

p:last-child {
    margin-bottom: 0;
}

/* --- Links -------------------------------------------------------------- */

a {
    color: var(--wz-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--wz-dur-fast) var(--wz-ease);
}

a:hover {
    color: var(--wz-azure);
}

/* --- Focus -------------------------------------------------------------- */
/* One visible ring for every interactive element. Never removed - a keyboard
   user has no other way to tell where they are. */

:focus-visible {
    outline: var(--wz-focus-width) solid var(--wz-focus);
    outline-offset: var(--wz-focus-offset);
    border-radius: var(--wz-r-sm);
}

.wz-on-dark :focus-visible {
    outline-color: var(--wz-focus-on-dark);
}

/* --- hidden ------------------------------------------------------------- */

/* `hidden` has to mean hidden. The UA rule behind it is a bare attribute
   selector, so *any* class that sets `display` outranks it - which silently
   breaks every JS control that toggles the attribute. This is why the
   multi-cloud panel showed all six platforms at once. */
[hidden] {
    display: none !important;
}

/* --- Media -------------------------------------------------------------- */

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Forms -------------------------------------------------------------- */

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

button {
    cursor: pointer;
}

/* --- Lists -------------------------------------------------------------- */

ul,
ol {
    margin: 0 0 var(--wz-s-4);
    padding-left: 1.25em;
}

ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

/* --- Tables ------------------------------------------------------------- */

table {
    border-collapse: collapse;
    width: 100%;
}

/* --- Utility ------------------------------------------------------------ */

/* Announced by screen readers, invisible on screen. */
.wz-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Same, until it takes focus - used by the skip link. */
.wz-skip-link {
    position: absolute;
    top: var(--wz-s-3);
    left: var(--wz-s-3);
    z-index: 200;
    transform: translateY(-160%);
    background: var(--wz-white);
    color: var(--wz-ink);
    padding: var(--wz-s-3) var(--wz-s-5);
    border-radius: var(--wz-r-sm);
    box-shadow: var(--wz-shadow);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--wz-dur) var(--wz-ease);
}

.wz-skip-link:focus-visible {
    transform: translateY(0);
}

.wz-measure {
    max-width: var(--wz-measure);
}

.wz-tabular {
    font-variant-numeric: tabular-nums;
}

/* Locks background scrolling while the mobile drawer is open. */
body.wz-no-scroll {
    overflow: hidden;
}