/**
 * Global Styles
 *
 */






/*-----------------------------------------------------------
                          RESET
-----------------------------------------------------------*/

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

*:where(:not(.is-layout-constrained > *, .is-layout-flow > *)) {
    padding: 0;
    margin: 0;
}

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



/*-----------------------------------------------------------
                          ELEMENTS
-----------------------------------------------------------*/

html {
    scroll-behavior: smooth;
}

/*-------- Link --------*/

a:where(:not(.wp-block-site-logo a, .wp-block-site-title a, .wp-block-navigation-item__content, .wp-element-button, .wp-block-post-featured-image a, h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a)) {
    --_shadow-color-default: var(--wp--preset--color--accent-1-300);
    --_shadow-color-hover: var(--wp--preset--color--accent-1-200);

    box-shadow: 0 -2px 0 var(--_shadow-color-default) inset; 
    padding-block-end: 2px; 
    transition: box-shadow 0.25s ease-out; 
} 

.has-dark-mode-link a:where(:not(.wp-block-site-logo a, .wp-block-site-title a,.wp-block-navigation-item__content,.wp-element-button, h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a)) {
    --_shadow-color-default: var(--wp--preset--color--accent-1-600);
    --_shadow-color-hover: var(--wp--preset--color--accent-1-500);
}

a:where(:not(.wp-block-site-logo a, .wp-block-site-title a,.wp-block-navigation-item__content,.wp-element-button, h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a)):where(:hover, :focus, :focus-visible){
    box-shadow: 0 -0.5em 0 var(--_shadow-color-hover) inset; 
}

a:where(:not(.wp-block-navigation-item__content,.wp-element-button, h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a)):where(:focus, :focus-visible) {
    outline: dotted 1px;
}


/*-------- Button --------*/

button {
    font: inherit;
}

.wp-element-button {
    --_hover-shadow-alpha: 0.32;
    transition: all 0.25s ease-out;
}

/*--- Button hover/focus/focus-visible state ---*/

.wp-element-button:is(:hover, :focus, :focus-visible) {
    box-shadow: 0 10px 10px -14px rgba(0, 0, 0, var(--_hover-shadow-alpha)), 
                0 16px 14px -14px rgba(0, 0, 0, calc( var(--_hover-shadow-alpha) / 2 )), 
                0 20px 20px -14px rgba(0, 0, 0, calc( var(--_hover-shadow-alpha) / 4 ));
    transform: translateY(-0.25rem);
}


/*--- Button focus-visible state ---*/

.wp-element-button:is(:focus, :focus-visible) {
    outline-offset: 2px;
    outline-style: var(--wp--custom--border--style--dotted);
    outline-width: var(--wp--custom--border--width--1);
    outline-color: var(--wp--preset--color--base-1-700);
}

.has-background .wp-element-button:is(:focus, :focus-visible) {
    outline-color: currentColor;
}


/*-------- Input / Select / Textarea --------*/

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    padding: var(--wp--preset--spacing--fluid-0-5-step-0-75) var(--wp--preset--spacing--fluid-0-5-step-1);
    border: solid 1px var(--wp--preset--color--base-1-200);
    border-radius: clamp(0.25rem, 1vw, 0.5rem);
    width: 100%;
}

textarea,
input[type="checkbox"],
input[type="radio"] {
    display: block;
}

input[type="checkbox"],
input[type="radio"] {
    width: 100%;
    max-width: 1rem;
    height: 100%;
    cursor: pointer;
}

input:is(:focus, :focus-visible), 
textarea:is(:focus, :focus-visible),
select:is(:focus, :focus-visible) {
    border-color: var(--wp--preset--color--base-1-300);
    outline: dotted 1px;
    outline-offset: 2px;
    box-shadow: initial;
}

select {
    background: initial;
    padding-block: var(--wp--preset--spacing--fluid-0-5-step-1);
    max-width: 100%;
    height: initial;
}


/*-------- Highlighted "em" element --------*/

:where(:not(h1,h2,h3,h4,h5,h6)) > em:where(.highlight-em) {
    color: var(--wp--preset--color--primary-1-700);
    background-color: var(--wp--preset--color--accent-1-100);
    font-weight: var(--wp--custom--font--weight--semibold);
    font-style: normal;
    padding: 0.08em 0.2em;
}

:where( .is-dark-mode ) :where(:not(h1,h2,h3,h4,h5,h6)) > em:where(.highlight-em) {
    color: var(--wp--preset--color--white);
    background-color: rgb(255 255 255 / 0.08);
}


/*-------- ARIA Ordered List --------*/

.ordered-list {
    counter-reset: listing;
}

[role="listitem"]:before {
    counter-increment: listing;
    content: counter(listing) ".";
}

.ordered-list--hidden-counter [role="listitem"]:before {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}