/* global */
:root {
    --page-width: 144rem;

    /* spacing --------------------------------------------------------------- */
    --space-2s:     4px;
    --space-xs:     8px;
    --space-sm:    12px;
    --space-md:    16px;
    --space-lg:    24px;
    --space-xl:    32px;
    --space-2l:    48px;
    --space-3l:    64px;
    --space-4l:    96px;

    --block-sm:    40px;
    --block-md:    60px;
    --block-lg:   100px;

    --inline-sm:   20px;
    --inline-md:   40px;
    --inline-lg:   60px;
    --inline-xl:   80px;

    /* transition --------------------------------------------------------------- */
    --transition       : 0.2s transform ease-in-out, 0.2s opacity ease-in-out;
    --transition-color : color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;

    /* shadow --------------------------------------------------------------- */
    --box-shadow:         0px  0px 10px 0px rgba(0 0 0 / 0.5);
    --box-shadow-soft  : 10px 10px 10px rgba(0 0 0 / 0.1), 20px 00px 20px rgba(0 0 0 / 0.1), 40px 40px 80px rgba(0 0 0 / 0.1);
    --box-shadow-softer: 00px 02px 15px 0px rgba(0 0 0 / 0.1);
    --box-shadow-left  :-20px 20px 10px rgba(0 0 0 / 0.1), -20px 00px 20px rgba(0 0 0 / 0.1), -20px 20px 80px rgba(0 0 0 / 0.1);
    --box-shadow-center: 00px 00px 10px 0px rgba(0 0 0 / 0.5);

    --text-shadow:        1px  1px  1px rgba(0 0 0 / 0.1);

    /* font-size  --------------------------------------------------------------- */
    /* 320 / 1366 / 62.5% */
    --text-2s: clamp(0.9rem, 0.191vw + 0.839rem, 1.1rem);
    --text-xs: clamp(1.0rem, 0.191vw + 0.939rem, 1.2rem);
    --text-sm: clamp(1.2rem, 0.191vw + 1.139rem, 1.4rem);
    --text-md: clamp(1.4rem, 0.191vw + 1.339rem, 1.6rem);
    --text-lg: clamp(1.6rem, 0.191vw + 1.539rem, 1.8rem);
    --text-xl: clamp(1.8rem, 0.191vw + 1.739rem, 2.0rem);
    --text-2l: clamp(2.0rem, 0.191vw + 1.939rem, 2.2rem);
    --text-3l: clamp(2.2rem, 0.191vw + 2.139rem, 2.4rem);
    --text-4l: clamp(2.4rem, 0.191vw + 2.339rem, 2.6rem);
    --text-5l: clamp(2.4rem, 0.382vw + 2.278rem, 2.8rem);
    --text-6l: clamp(2.4rem, 0.574vw + 2.216rem, 3.0rem);
    --text-7l: clamp(2.4rem, 0.765vw + 2.155rem, 3.2rem);
    --text-8l: clamp(2.6rem, 0.765vw + 2.355rem, 3.4rem);
    --text-9l: clamp(3.2rem, 0.765vw + 2.555rem, 3.6rem);

    --figcaption: var(--text-md);


    /* line-height --------------------------------------------------------------- */
    --line-2s: 1.1;
    --line-xs: 1.2;
    --line-sm: 1.4;
    --line-md: 1.6;
    --line-lg: 1.8;
    --line-xl: 2.0;
    --line-2l: 2.2;
    --line-3l: 2.4;
    --line-4l: 2.6;
    --line-5l: 2.8;
    --line-6l: 3.0;
    --line-7l: 3.2;
    --line-8l: 3.4;
    --line-9l: 3.6;

    /* font-weight --------------------------------------------------------------- */
    --font-100: 100;
    --font-200: 200;
    --font-300: 300;
    --font-400: 400;
    --font-500: 500;
    --font-600: 600;
    --font-700: 700;
    --font-800: 800;
    --font-900: 900;

    /* border-radius --------------------------------------------------------------- */
    --radius-2s : 04px;
    --radius-xs : 08px;
    --radius-sm : 12px;
    --radius-md : 16px;
    --radius-lg : 24px;
    --radius-xl : 32px;
    --radius-fl : 9999px;

    --radius: var(--radius-md);  /* default */
}


* {
    margin:  0;
    padding: 0;
    outline: 0px solid rgba(200, 0, 0, 0.2); /* for debug */
}

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

html {

    font-feature-settings: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-stretch: 100%;
      font-variant-ligatures: normal;
       font-variant-position: normal;
       font-variant-caps: normal;
     font-variation-settings: normal;
                   font-size: 62.5%;
            text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    scroll-behavior: smooth;

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


body {
    display: flex;
    flex-direction: column;

    font-style: normal;
    font-size: var(--text-lg);

    min-height: 100vh;          /* safari fix */
    min-height: 100dvh;


    position: relative;
    zoom: 1;
}

body, p, ul, ol {
    line-height: 1.5;
}

p            { margin-block: 2rem; }
p + p        { margin-block-start: 0; }
p:last-child { margin-block-end: 0; }


:where(main, article, .main, .article) :where(ul) { list-style-type: disc;    }
:where(main, article, .main, .article) :where(ol) { list-style-type: decimal; }

:where(main, article, .main, .article) :where(ul, ol)           { padding-inline-start: 3rem; margin-block: 0 2rem; margin-inline: 0; }
:where(main, article, .main, .article) :where(ol li ul)          { margin-block-start: 1rem; }
:where(main, article, .main, .article) :where(ul, ol):last-child { margin-block-end: 0;      }

:where(main, article, .main, .article) li:not(.menu-item):not(.elementor-nav-menu li)              { margin-block-end: 1rem; }
:where(main, article, .main, .article) li:not(.menu-item):not(.elementor-nav-menu li):last-of-type { margin-block-end: 0;    }

.bullet li {
    list-style-type: disc !important;
    margin-inline-start : 20px;   /* old margin  */
    padding-inline-start: 0;      /* old padding */
}

.inbullet ul { padding-inline-start: 1.8rem; }




/* links */
a, p a, blockquote a {
    transition: var(--transition-color);
    cursor: pointer;
}

a.nohover      { color: inherit; }
a.nodecoration { text-decoration: none !important; }

b, strong      { font-weight: 600 !important; }

section,
h1,
h2,
h3,
h4,
h5,
h6,
li,
img,
svg,
figcaption {
    transition: var(--transition);
}

figcaption {
    font-size: var(--figcaption);
    font-weight: 400;
}


footer ul {
    list-style-type: none;
    padding-inline-start: 0;
}

blockquote {
    padding-inline-start: 2rem;
    margin-block-start  : 3rem;
    margin-block-end    : 6rem;
}


/* scroll offset */
.offset { scroll-margin-block-start: 10rem; }




/* effects */
.transition { transition: var(--transition); }

.scale, .scale-hover:hover           { scale: 1.1 !important; }
.scale-none, .scale-none-hover:hover { scale: 1.0 !important; }




/* shadows */
.box-shadow         { box-shadow: var(--box-shadow);        }
.box-shadow--left   { box-shadow: var(--box-shadow-left);   }
.box-shadow--center { box-shadow: var(--box-shadow-center); }
.box-shadow--soft   { box-shadow: var(--box-shadow-soft);   }
.box-shadow--softer { box-shadow: var(--box-shadow-softer); }
.text-shadow        { text-shadow: 1px 1px 0px rgba(0 0 0 / 0.25); }




/* font sizes */
.text-2s { font-size: var(--text-2s); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2l { font-size: var(--text-2l); }
.text-3l { font-size: var(--text-3l); }
.text-4l { font-size: var(--text-4l); }
.text-5l { font-size: var(--text-5l); }
.text-6l { font-size: var(--text-6l); }
.text-7l { font-size: var(--text-7l); }
.text-8l { font-size: var(--text-8l); }
.text-9l { font-size: var(--text-9l); }

.text-2s, .text-2s p, .text-2s li { line-height: var(--line-2s); }
.text-xs, .text-xs p, .text-xs li { line-height: var(--line-xs); }
.text-sm, .text-sm p, .text-sm li { line-height: var(--line-sm); }
.text-md, .text-md p, .text-md li { line-height: var(--line-md); }
.text-lg, .text-lg p, .text-lg li { line-height: var(--line-lg); }
.text-xl, .text-xl p, .text-xl li { line-height: var(--line-xl); }
.text-2l, .text-2l p, .text-2l li { line-height: var(--line-2l); }
.text-3l, .text-3l p, .text-3l li { line-height: var(--line-3l); }
.text-4l, .text-4l p, .text-4l li { line-height: var(--line-4l); }
.text-5l, .text-5l p, .text-5l li { line-height: var(--line-5l); }
.text-6l, .text-6l p, .text-6l li { line-height: var(--line-6l); }
.text-7l, .text-7l p, .text-7l li { line-height: var(--line-7l); }
.text-8l, .text-8l p, .text-8l li { line-height: var(--line-8l); }
.text-9l, .text-9l p, .text-9l li { line-height: var(--line-9l); }

/* .text-lg li { line-height: 1.4; } */




/* Font weights */
.font-100, .font-100 > * { font-weight: var(--font-100) !important; }
.font-200, .font-200 > * { font-weight: var(--font-200) !important; }
.font-300, .font-300 > * { font-weight: var(--font-300) !important; }
.font-400, .font-400 > * { font-weight: var(--font-400) !important; }
.font-500, .font-500 > * { font-weight: var(--font-500) !important; }
.font-600, .font-600 > * { font-weight: var(--font-600) !important; }
.font-700, .font-700 > * { font-weight: var(--font-700) !important; }
.font-800, .font-800 > * { font-weight: var(--font-800) !important; }
.font-900, .font-900 > * { font-weight: var(--font-900) !important; }




/* text styles */
.italic     { font-style: italic;  }
.nowrap     { white-space: nowrap; }
.uppercase  { text-transform: uppercase;  }
.capitalize { text-transform: capitalize; }
.overline   { text-decoration: overline;  }

.underline             { text-decoration: underline; }
.underline-none        { text-decoration: none;      }
.underline-hover:hover { text-decoration: underline; }


.balance {
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: keep-all;
}

.select-none {
    text-decoration: none;
    -webkit-user-select: none;    /* safari */
            user-select: none;
}

.select-none:hover { text-decoration: none;    }
.pointer-none > *  { pointer-events: none;     }
.style-none        { list-style-type: none;    }
.outline-none      { outline: none;            }
.underline-none    { text-decoration: none;    }
.hidden            { display: none !important; }

.invisible {    /* hack to hide h2 in footer */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}




/* aspect ratio */
.ratio--16-9  { aspect-ratio: 16/9;       }
.ratio--16-12 { aspect-ratio: 16/12;      }
.ratio--16-16 { aspect-ratio: 16/16;      }
.ratio--64-40 { aspect-ratio: auto 64/40; }



/* rounded */
.rounded-2s   { border-radius: var(--radius-2s);   }     /* 06 tw md   */
.rounded-xs   { border-radius: var(--radius-xs);   }     /* 08 tw lg   */
.rounded-sm   { border-radius: var(--radius-sm);   }     /* 12 tw xl   */
.rounded-md   { border-radius: var(--radius-md);   }     /* 16 tw 2xl  */
.rounded-lg   { border-radius: var(--radius-lg);   }     /* 24         */
.rounded-xl   { border-radius: var(--radius-xl);   }     /* 32         */

.rounded      { border-radius: var(--radius-md);   }     /* default 16 */

.rounded-fl   { border-radius: var(--radius-fl);   }     /* full circle */




/* gaps */
.gap-2s { gap: var(--space-2s) !important; }    /* 04 */
.gap-xs { gap: var(--space-xs) !important; }    /* 08 */
.gap-sm { gap: var(--space-sm) !important; }    /* 12 */
.gap-md { gap: var(--space-md) !important; }    /* 16 */
.gap-lg { gap: var(--space-lg) !important; }    /* 24 */
.gap-xl { gap: var(--space-xl) !important; }    /* 32 */
.gap-2l { gap: var(--space-2l) !important; }    /* 48 */
.gap-3l { gap: var(--space-3l) !important; }    /* 64 */

.gap-none {
    gap: 0 !important;
    /* grid-column-gap: 0 !important;
    grid-row-gap: 0 !important; */
}




/* padding and spacings */
.padded-2s { padding: var(--space-2s); }
.padded-xs { padding: var(--space-xs); }
.padded-sm { padding: var(--space-sm); }
.padded-md { padding: var(--space-md); }
.padded-lg { padding: var(--space-lg); }
.padded-xl { padding: var(--space-xl); }
.padded-2l { padding: var(--space-2l); }
.padded-3l { padding: var(--space-3l); }

.spacing-2s { margin-block-end: var(--space-2s); }
.spacing-xs { margin-block-end: var(--space-xs); }     /* 08 */
.spacing-sm { margin-block-end: var(--space-sm); }     /* 12 */
.spacing-md { margin-block-end: var(--space-md); }     /* 16 */
.spacing-lg { margin-block-end: var(--space-lg); }     /* 24 */
.spacing-xl { margin-block-end: var(--space-xl); }     /* 32 */
.spacing-2l { margin-block-end: var(--space-2l); }     /* 48 */
.spacing-3l { margin-block-end: var(--space-3l); }     /* 64 */


.margin-bottom-none { margin-block-end: 0;    }
.margin-left-none   { margin-inline-start: 0; }
.margin-right-none  { margin-inline-end: 0;   }
.margin-top-none    { margin-block-start: 0;  }
.margin-none        { margin: 0;              }

.padding-bottom-none { padding-block-end: 0;    }
.padding-left-none   { padding-inline-start: 0; }
.padding-right-none  { padding-inline-end: 0;   }
.padding-top-none    { padding-block-start: 0;  }
.padding-none        { padding: 0 !important;   }
.padding             { padding: var(--padding); }   /* default */




/* clickable parent for cards */
.clickable-parent {
    position: relative;
    overflow: hidden;
    transition: translate 0.3s ease-in-out;

    a {
        outline: 1px solid transparent;

        &::before {
            position: absolute;
            content: '';
            inset: 0;
            z-index: 100;
        }
    }

    &:focus-within {
        :focus {
            box-shadow: none;
            outline: none;
        }
    }
}

a.clickable-parent:hover {
    text-underline-offset: 0;
    text-decoration: none;
    text-decoration-color: unset;
    text-decoration-thickness: 0;
}


:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.clickable-parent-transition:hover,
.clickable-parent:focus-within :focus:not(:focus-visible) {
    translate: 0 -0.25rem;
}




.ng-scope .editorfix-bg:hover {    /* fix editor to hover on editor when element is a bg image */
    pointer-events: none;
    z-index: initial !important;
}

.overflow-hidden {
    overflow: hidden;
}

.page-width {
    max-inline-size: var(--page-width);
    margin-inline: auto;
}




/* youtube - hide pause overlay */
.ytp-pause-overlay {
    display: none !important;
}