/*
* Description: Reset & global element defaults
* Author: C Studio
* Version: 3.0.0
* Update: 26-03-20
*/

/*–––––––––––––––––––––––––––––––––––––––––*/
/* HTML / BODY — document shell only (not element defaults inside #etch-builder) */
html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-size: 62.5%;
    margin-top: 0;
    overflow-x: clip;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
}

body {
    background-color: var(--mode-body-bg);
    color: var(--mode-copy-color);
    font-family: var(--typeface-primary);
    font-size: var(--body-font);
    font-weight: var(--weight-body);
    line-height: var(--line-height-body);
    min-height: 100dvh;
    overflow-x: clip;
}

body.no-scroll {
    touch-action: none;
    overflow: hidden;
}

/* Do not inherit site typography into Etch builder chrome */
#etch-builder {
    color: revert;
    font-family: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
}

/* Site defaults — exclude Etch builder chrome (#etch-builder and descendants) */
@scope (html) to (#etch-builder) {

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

    :where(*) {
        margin: 0;
        padding: 0;
        font-kerning: none;
    }

    section {
        z-index: var(--z-section);
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* FOCUS & INTERACTION*/
    *:focus {
        outline: none;
    }

    :focus-visible {
        border-radius: var(--radius-input);
        outline: var(--border-unit) solid var(--mode-border-color-focus);
        outline-offset: 2px;
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* SELECTION*/
    ::-moz-selection {
        background: var(--highlight);
        color: var(--highlight-color);
        text-shadow: none;
    }

    ::selection {
        background: var(--highlight);
        color: var(--highlight-color);
        text-shadow: none;
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* SCROLLBAR*/
    ::-webkit-scrollbar {
        height: var(--scrollbar-height);
        width: var(--scrollbar-width);
    }

    ::-webkit-scrollbar-track {
        background: var(--mode-scrollbar-track);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--mode-scrollbar-active);
        border-radius: var(--radius-badge);
    }


    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* LAYOUT */
    :where(main) section:first-child {
        padding-top: var(--main-first-child);
    }

    :where(section) {
        background: var(--mode-section-bg);
        color: var(--mode-headline-color);
        padding-bottom: var(--section-bottom);
        padding-top: var(--section-top);
        position: relative;
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* TYPEFACE */
    :where(.mono) {
        color: var(--mode-copy-color);
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* HEADING */
    :where(h1, h2, h3, h4, h5, h6),
    .h-4xl,
    .h-3xl,
    .h-2xl,
    .h-xl,
    .h-l,
    .h-m,
    .h-s {
        color: var(--mode-headline-color);
        font-family: var(--typeface-primary);
        font-weight: var(--weight-headline);
        line-height: var(--line-height-headline);
    }

    :where(h1, h2, h3, h4, h5, h6):last-child {
        margin-bottom: 0;
    }

    :where(h1) {
        font-size: var(--h-4xl);
    }

    :where(h2) {
        font-size: var(--h-3xl);
    }

    :where(h3) {
        font-size: var(--h-xl);
    }

    :where(h4) {
        font-size: var(--h-l);
    }

    :where(h5) {
        font-size: var(--h-m);
    }

    :where(h6) {
        font-size: var(--h-s);
    }

    :where(.h-4xl) {
        font-size: var(--h-4xl);
    }

    :where(.h-3xl) {
        font-size: var(--h-3xl);
    }

    :where(.h-2xl) {
        font-size: var(--h-2xl);
    }

    :where(.h-xl) {
        font-size: var(--h-xl);
    }

    :where(.h-l) {
        font-size: var(--h-l);
    }

    :where(.h-m) {
        font-size: var(--h-m);
    }

    :where(.h-s) {
        font-size: var(--h-s);
    }

    :where(b, strong) {
        font-weight: var(--weight-strong);
    }

    :where(em, i) {
        font-style: italic;
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* COPY*/
    :where(.c-2xl) {
        font-size: var(--c-2xl);
    }

    :where(.c-xl) {
        font-size: var(--c-xl);
    }

    :where(.c-l) {
        font-size: var(--c-l);
    }

    :where(.c-m) {
        font-size: var(--c-m);
    }

    :where(.c-micro) {
        font-size: var(--c-micro);
    }

    :where(p) {
        color: var(--mode-copy-color);
        font-weight: var(--weight-body);
        line-height: var(--line-height-body);
        margin-bottom: var(--copy-margin-bottom);
        opacity: var(--opacity-body);
    }

    :where(p:last-child) {
        margin-bottom: 0;
    }

    :where(li) {
        font-weight: var(--weight-body);
    }

    :where(code, pre, kbd, samp) {
        font-family: var(--typeface-secondary);
        font-size: var(--c-micro);
    }

    :where(pre) {
        overflow-x: auto;
        white-space: pre-wrap;
    }

    :where(blockquote) {
        border-left: var(--border-marker) solid var(--mode-border-color);
        color: var(--mode-copy-color);
        font-style: italic;
        padding-left: var(--gap-3);
    }

    :where(hr) {
        border: none;
        border-top: var(--border-unit) solid var(--mode-border-color);
        margin: var(--gap-4) 0;
    }


    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* LINKS*/
    :where(a) {
        color: var(--mode-hyperlink-color);
        font-weight: var(--weight-link);
        outline: none;
        text-decoration: none;
        transition: all var(--time-out) var(--bezier-out);
    }

    :where(a:hover) {
        opacity: 0.8;
        transition: all var(--time-in) var(--bezier-in);
    }

    :where(p a) {
        font-weight: var(--weight-link);
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* LISTS*/
    :where(ul, ol) {
        list-style: none;
        padding-left: 0;
    }

    :where(ol[data-icon="true"]),
    :where(ul[data-icon="true"]) {
        & li{
            align-items: center;
            display: flex;
            flex-direction: row;
            gap:var(--gap-15);
        }
        &[data-icon-size="s"] li svg{
            min-width: var(--icon-s);
            width: var(--icon-s);
        }
        &[data-icon-size="m"] li svg{
            min-width: var(--icon-m);
            width: var(--icon-m);
        }
        &[data-icon-size="l"] li svg{
            min-width: var(--icon-l);
            width: var(--icon-l);
        }
        & svg *{
            fill: currentColor;
        }
    }

    :where(ol[data-border="top"]),
    :where(ul[data-border="top"]) {
        display: flex;
        flex-direction: column;
        gap: var(--gap-15);

        & li {
            border-top: var(--border-unit) var(--border-style) var(--mode-list-border-color);
            padding-block-start: var(--gap-25);
        }
    }
    :where(ol[data-border="top"][data-border-s]),
    :where(ul[data-border="top"][data-border-s]) {
        gap: var(--gap-05);

        & li {
            padding-block-start: var(--gap-15);
        }
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* MEDIA — exclude DOM sphere cards (3D layout + `_base` 100% breaks `preserve-3d` / stage height) */
    :where(figure:not(.c-sphere__node)) {
        border-radius: var(--radius-image);
        height: 100%;
        width: 100%;
    }

    :where(img, video, svg, canvas) {
        display: block;
        max-width: 100%;
    }

    :where(img) {
        border-radius: var(--radius-image);
        height: auto;
    }

    /* hide native video controls */
    :where(video)::-webkit-media-controls,
    :where(video)::-webkit-media-controls-overlay-enclosure {
        display: none;
    }

    /* iframe 16:9 wrapper — use o-ratio for other ratios */
    .iframe-wrapper {
        aspect-ratio: 16 / 9;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    :where(.iframe-wrapper iframe) {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* FORMS*/
    :where(input, textarea, select, button) {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        border: none;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        font-weight: var(--weight-input);
        line-height: var(--line-height-input);
    }

    :where(button) {
        cursor: pointer;
    }

    :where(input::placeholder, textarea::placeholder) {
        color: var(--mode-placeholder-color);
        opacity: 1;
    }

    :where(label) {
        color: var(--mode-label-color);
        font-size: var(--c-micro);
        font-weight: var(--weight-label);
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* TABLES*/
    :where(table) {
        border-collapse: collapse;
        width: 100%;
    }

    :where(th, td) {
        border-bottom: var(--border-unit) solid var(--mode-border-color);
        padding: var(--gap-15) var(--gap-2);
        text-align: left;
        vertical-align: top;
    }

    :where(th) {
        color: var(--mode-headline-color);
        font-weight: var(--weight-label);
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* MISC ELEMENTS*/
    /* [hidden] must reliably hide — keep specificity */
    [hidden] {
        display: none;
    }

    /* aria workaround — revealed on focus */
    :where([hidden][aria-hidden="false"]) {
        clip: rect(0, 0, 0, 0);
        display: inherit;
        position: absolute;
    }

    :where([hidden][aria-hidden="false"]:focus) {
        clip: auto;
    }

    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* MODE ELEMENT RULES*/
    section[data-mode],
    section[data-type] {
        background: var(--mode-section-bg);
        max-width: 100%;
    }


    /*–––––––––––––––––––––––––––––––––––––––––*/
    /* BASE */
    nav {
        li {
            a {
                height: 100%;
            }
        }
    }

}

/* @scope (html) to (#etch-builder) */