*, ::after, ::before, ::marker{
    font-size: calc( var(--layout-font-size) * var(--text-scale) );
    color: var(--color);
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    color-scheme: only light;
    text-size-adjust: none;
    font-family: var(--font-family);
    font-weight: 100;
    scrollbar-color: var(--background-color);
    scrollbar-width: thin;
}

::after, ::before{
    user-select: inherit;
}

html{
    overflow: visible;
}

body{
    margin: 0;
    overflow-x: scroll;

    --background-color: var(--color-tertiary);
    --color: var(--color-tertiary-contrast);
    --border-radius: var(--layout-border-radius);
    --font-family: var(--layout-font-family-serif);
    --text-scale: 1;

    --real-header-height: var(--real-header-height-js, var(--layout-header-height));
}

:any-link{
    text-decoration: underline;
    cursor: pointer;
    *{
        text-decoration: inherit;
        cursor: inherit;
    }
}

abbr {
    text-decoration: none;
    cursor: inherit;
}

header, footer{
    --background-color: var(--color-primary);
    --color: var(--color-primary-contrast);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: start;
    border-radius: 0;
    z-index: 99;
    >*{
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    nav{
        min-height: inherit;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: start;
        details{
            padding: var(--layout-padding);
            &:open{
                text-align: start;
                >summary:not(:only-child){
                    padding-top: var(--layout-padding);
                    padding-right: var(--layout-padding);
                    padding-bottom: var(--layout-padding);
                }
            }
            summary:only-child::marker{
                color: transparent;
                content: var(--symbol-details-closed) ' '
            }
        }
        >details{
            /*
            &:has(>summary:only-child){*/
                min-width: 250px;
                >summary{
                text-align: center;
                padding-top: 0px !important;
                padding-right: 0px !important;
                }/*
            }
            */
            >summary:only-child::marker{
                content: '';
            }
    }
        select{
            margin: 0;
            padding: 0;
            border: none;
        }
        :any-link{
            text-decoration: none;
        }
    }
    .site_logo{
        >a{
            height: inherit;
            >img{
                height: inherit;
                object-fit: contain;
            }
        }
    }
}

header{
    min-height: var(--layout-header-height);
    anchor-name: --header;
    .site_logo{
        height: var(--layout-header-height);
    }
    nav{
        padding-top: var(--layout-padding);
        padding-bottom: var(--layout-padding);
        >*{
            --background-color: var(--color-secondary);
            --color: var(--color-secondary-contrast);
            margin: var(--layout-margin);
        }
    }
}
/*
@media (height > 900px){
    header{
        position: sticky;
        top: 0; 
    }
}

@media (height <= 900px){
    body{
        --real-header-height: 0px;
    }
}
*/
body{
    --real-header-height: 0px;
}

footer{
    --background-color: var(--color-secondary);
    --color: var(--color-secondary-contrast);
    height: var(--layout-footer-height);
    flex-direction: row;
    nav{
        height: inherit;
        flex-grow: 1;
        >details{
            flex-grow: 1;
            padding-top: calc(var(--layout-footer-height) / 4);
            padding-bottom: calc(var(--layout-footer-height) / 4);
        }
        :any-link{
            text-decoration: overline;
        }
    }
    >div{
        width: fit-content;
        display: ruby;
        padding: calc(var(--layout-footer-height) / 4);
    }
    *{
        --background-color: transparent;
        font-size: calc(var(--layout-footer-height) / 2);
    }
}

/*
@media(orientation: portrait){
    body{
        margin-top: var(--layout-footer-height);
    }
    footer{
        position: absolute;
        top: 0;
        position-anchor: --header;
        position-area: top;
        width: anchor-size(width);
    }
}
*/

main{
    padding: var(--layout-padding-outside);
    min-height: calc(100vh - var(--layout-footer-height) - var(--real-header-height-js));
}

html:has(main.overlayed){
    overflow: clip;
    body>:not(.overlay){
        display: none;
    }
}

.button-confirm::before{
    content: var(--symbol-confirm);
}

.button-delete::before{
    content: var(--symbol-delete);
}

.navigate-back::before, .navigate-next::after{
    cursor: pointer;
}

.navigate-back::before{
    content: var(--symbol-back);
}

.navigate-next::after{
    content: var(--symbol-next);
}

h1, h2, h3{
    padding: var(--layout-padding);
    margin-right: calc(var(--layout-margin) + var(--layout-padding));
    margin-left: calc(var(--layout-margin) + var(--layout-padding));
    text-align: center;
}

h1{
    --text-scale: 1.7;
    font-weight: 900;
}

h2{
    --text-scale: 1.4;
    font-weight: 600;
}

h3{
    --text-scale: 1.2;
    font-weight: 300;
}

p{
    text-align: justify;
    margin: 0;
}

:focus, :focus-visible{
    outline: var(--layout-border-width) solid var(--color-highlight);
    border-radius: var(--layout-border-radius);
}

input, button, select, textarea, .toggler, .navigate-back::before, .navigate-next::after{
    margin: var(--layout-margin);
    padding: var(--layout-padding);
    border-color: color-mix(in hsl decreasing hue, transparent 40%, var(--color));
    border-style: solid;
    border-width: var(--layout-border-width);
    display: inline-block;
    &:disabled, &:has(:disabled), input:disabled~label{
        &, *{
            background-color: color-mix(in hsl decreasing hue, var(--background-color) 40%, var(--color-disabled));
            color: color-mix(in hsl decreasing hue, var(--color) 40%, var(--color-disabled));
        }
        border-color: color-mix(in hsl decreasing hue, transparent 40%, var(--background-color));
        cursor: not-allowed;
    }
}

button, input, select, .toggler, header>nav, caption, h1, h2, h3{
    --font-family: var(--layout-font-family-sans);
}

button, input[type="button"], input[type="submit"], input[type="reset"], .toggler, select{
    align-items: center;
    display: inline-flex;
    justify-content: center;
    &:not(:disabled, :has(:disabled)){
        &, *{
            cursor: pointer;
        }
    }
    label, span{
        padding-top: 0;
        padding-bottom: 0;
    }
    user-select: none;
}

select{
    >option{
        padding: var(--layout-padding);
        &:checked{
            --background-color: var(--color-highlight);
        }
    }
}

.toggler{
    &:has(:focus){
        outline: var(--layout-border-width) solid var(--color-highlight);
    }
    baseline-source: last;
    display: inline-block;
    >input, >label{
        padding: 0;
        margin: 0;
    }
    >input{
        width: 0;
        height: 0;
    }
    >label{
        background-color: transparent;
    }
    :focus, :focus-visible{
        outline: none;
    }
    border-style: double;
    &:has(input:checked), &:has(input:disabled){
        border-style: solid;
    }

    &.grid-list{
        >label::before{
            content: var(--symbol-grid);
        }
        &:has(input:checked){
            >label::before{
                content: var(--symbol-list);
            }
        }
    }
}

a:has(label){
    padding: inherit;
    label{
        padding: 0;
    }
}

label{
    padding: inherit;
    font-weight: bold;
    text-align: center;
    align-content: center;
    display: inline-block;
    &[input-length-current]::before{
        content: attr(input-length-current);
    }
    &[input-length-max]::after{
        content: ' / 'attr(input-length-max);
    }
}

label.highlight{
    text-shadow: var(--layout-border-width) 0px 0px var(--color-highlight), 0px var(--layout-border-width) 0px var(--color-highlight), calc(-1 * var(--layout-border-width)) 0px 0px var(--color-highlight), 0px calc(-1 * var(--layout-border-width)) 0px var(--color-highlight);
}

img{
    user-select: none;
}

span{
    padding-left: var(--layout-padding);
    padding-right: var(--layout-padding);
}

sup{
    --text-scale: 0.66;
}

fieldset{
    &, >legend{
        border: var(--color) solid var(--layout-border-width);
        padding: var(--layout-padding);
        margin: 0;
    }
    >legend:has(>.toggler){
        border-style: none;
    }
    margin: var(--layout-margin);
}

form{
    display: contents;
}

details{
    >summary::marker{
        content: var(--symbol-details-closed) ' ';
    }
    &:open>summary::marker{
        content: var(--symbol-details-opened) ' ';
    }
    &[inert]>summary::marker{
        content: '';
    }
}

iframe{
    border: none;
}

.has-margin{
    margin: var(--layout-margin);
}

.has-padding{
    padding: var(--layout-padding);
}

.overlay{
    display: none;
    height: calc( 100vh - var(--real-header-height));
    position: absolute;
    top: 0;
    position-anchor: --header;
    position-area: bottom;
}

.overlay-active{
    z-index: 99;
    width: 100%;
    display: flex;
    position: absolute;
    border: none;
    padding: 0;
    margin: 0;
    &:not([popover]), &::backdrop{
        --background-color: color-mix(in srgb, transparent 30%, var(--color-tertiary)) ;
    }
    &[popover]{
        height: 100%;
        --background-color: transparent;
    }
    .overlay-box{
        padding: 0;
        --background-color: var(--color-tertiary);
        margin: var(--layout-padding-outside);
        margin-top: calc(var(--layout-padding-outside));
        height: calc(100% - 2 * var(--layout-padding-outside) - 2 * var(--layout-border-width));
        width: calc(100% - 2 * var(--layout-padding-outside) - 2 * var(--layout-border-width));
        display: grid;
        flex-direction: column;
        grid-auto-flow: row;
        grid-template-columns: 100%;
        grid-template-rows: min-content 1fr repeat(10, min-content);
        border: var(--layout-border-width) color-mix(in hsl decreasing hue, var(--color-tertiary) 50%, var(--color)) solid;
        .overlay-header{
            display: flex;
            flex-direction: row-reverse;
            height: fit-content;
            .overlay-close::before{
                content: var(--symbol-close);
            }
        }
        .overlay-main{
            margin: var(--layout-margin);
            overflow: scroll;
            .overlay-message, .overlay-msg{
                text-align: center;
                align-content: center;
                width: 100%;
                height: 100%;
                word-break: break-word;
            }
            .overlay-msg{
                display: flex;
                flex-direction: column;
            }
            .overlay-buttons{
                height: fit-content;
                display: grid;
                grid-auto-flow: row;
                button{
                    padding: var(--layout-padding);
                }
            }
            .overlay-input-main{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                .overlay-input-input{
                    height: 100%;
                    resize: none;
                }
                .overlay-input-counter{
                    --text-scale: 0.75;
                    margin-right: calc( var(--layout-margin) + var(--layout-border-radius) );
                    margin-top: calc( (var(--layout-margin) * 2 + var(--layout-font-size)  * 0.75) * -1 );
                    margin-bottom: calc( var(--layout-margin) * 2);
                    text-align: right;
                    background-color: transparent;
                    &::before, &::after{
                        --background-color: var(--color-tertiary);
                        border-radius: var(--layout-border-radius);
                    }
                    &::after{
                        padding-right: var(--layout-padding);
                    }&::before{
                        padding-left: var(--layout-padding);
                    }
                }
            }
        }
    }
}

.overlay-error{
    .overlay-box{
        --background-color: var(--color-error);
        border-color: color-mix(in hsl decreasing hue, var(--color-error) 50%, var(--color));
    }
}

.overlay-success{
    .overlay-box{
        --background-color: var(--color-success);
        border-color: color-mix(in hsl decreasing hue, var(--color-success) 50%, var(--color));
    }
}

.overlay-confirm{
    .overlay-box{
        --background-color: var(--color-confirm);
        border-color: color-mix(in hsl decreasing hue, var(--color-confirm) 50%, var(--color));
    }
}

.overlay-large{
    .overlay-box{
        margin: 0;
        border: none;
        border-radius: 0;
        width: inherit;
        height: inherit;
    }
}

.link-protected{
    span{
        padding: 0;
        margin: 0;
        display: inline-flex;
        &[b]::before{
            content: attr(b);
        }
        &[a]::after{
            content: attr(a);
        }
    }
}

.address-input, .payment-input{
    display: inline-grid;
    &>div{
        display: table;
        table-layout: fixed;
        >span{
            display: table-row;
            >*{
                display: table-cell;
                text-align: start;
                width: -moz-available;
                width: -webkit-fill-available;
                &:first-child{
                    text-align: end;
                }
            }
        }
    }
    &:disabled{
        border-style: none;
        >div{
            display: none;
        }
    }
    >legend:has(.toggler){
        padding: 0;
        >.toggler{
            margin: 0;
        }
    }
    
}

.address-input label:has(~input:required), .payment-input>legend{
    &::after{
        content: var(--symbol-required);
    }
}

.payment-widget{
    >div{
        &, >span{
            display: flex;
            flex-direction: column;
            padding: var(--layout-padding);
        }
        >span:has(input:disabled){
            display: none;
        }
        >span:not(:has(input:disabled))~span{
            display: none;
        }
        >span>span{
            display: grid;
            grid-auto-flow: column;
            grid-template-columns: 1fr;
            &:first-child{
                display: contents;
            }
            >iframe{
                height: calc(min(50vw, 50vh));
            }
            >span:empty{
                display: none;
            }
        }
    }

}

.range{
    display: inline-block;
    >div{
        display: flex;
        flex-direction: column;
        >input{
            margin: 0;
            padding: 0;
            &:first-child{
                direction: rtl;
            }
        }
    }
}

.slide-show{
    >div{
        display: grid;
        grid-auto-flow: row;
        aspect-ratio: 0.8;
        grid-template-rows: 80% 20%;
        container: a;
    }
    .slide-show-main{
        aspect-ratio: 1;
        display: flex;
        >abbr{
            display: contents;
            >*{
                object-fit: contain;
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        }
    }
    .slide-show-pre{
        display: flex;
        flex-direction: row;
        overflow-y: scroll;
        img{
            margin: var(--layout-margin);
            aspect-ratio: 1;
            object-fit: cover;
            cursor: pointer;
            &.highlight{
                outline: solid var(--layout-border-width) var(--color-highlight);
            }
            &.slide-show-video{
                --background-color: var(--color);
            }
        }
    }
    >div:fullscreen{
        border-radius: 0;
        .slide-show-main{
            aspect-ratio: initial;
        }
    }
}

.element-container, .slide-show{
    display: contents;
}

:user-invalid, fieldset:has(:user-invalid)>legend, fieldset:has(:user-invalid)>legend *, :user-invalid~label, :user-invalid *, input:user-invalid{
    --background-color: var(--color-error);
}

.page-layout-article, .page-layout-legal{
    text-align: justify;
}

#page{
    display: grid;
    grid-template-columns: 100%;
}

.page-layout-article{
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 100%;
    gap: var(--layout-padding-outside);
    video{
        margin: 0;
        width: 100%;
        max-height: calc(90vh - var(--real-header-height));
    }
    .page-image-container{
        margin: 0;
        display: grid;
        justify-items: center;
        width: 100%;
        max-height: calc(90vh - var(--real-header-height));
        img{
            object-fit: contain;
            max-height: calc(90vh - var(--real-header-height) - var(--layout-font-size));
            max-width: 100%;
        }
        figcaption{
            font-weight: 900;
            width: fit-content;
        }
    }
    .page-layout-columns{
        display: grid;
        grid-auto-flow: column;
        overflow-y: clip;
        overflow-x: scroll;
        .page-layout-column{
            align-content: center;
            padding: var(--layout-margin);
        }
    }

    table{
        width: 100%;
        td, th, caption{
            padding: var(--layout-padding);
        }
        th{
            --color: var(--color-primary-contrast);
            --background-color: var(--color-primary);
            text-align: end;
        }
        th[scope="col"]{
            text-align: start;
        }
        td, caption{
            --color: var(--color-secondary-contrast);
            --background-color: var(--color-secondary);
        }
        &:not(:first-child){
            margin-top: var(--layout-padding-outside);
        }
    }
    figure>table{
        td:first-child{
            --color: var(--color-primary-contrast);
            --background-color: var(--color-primary);
        }
    }
}

.page-layout-legal{
    &, *{
        --font-family: var(--layout-font-family-serif);
    }
    p{
        padding-top: var(--layout-font-size);
    }
}

/*
.waben {
    --hex-size: 100px;
    --hex-edge: calc(var(--hex-size) / 2);
    --hex-height: calc(var(--hex-edge) * sqrt(3));
    --hex-overlap: calc(var(--hex-height) / 2);
    --hex-gap: calc(1.5 * var(--hex-edge) );
    --hex-spacing: calc(var(--hex-edge)  + var(--hex-size));
    &> tbody {
        display: grid;
        grid-auto-rows: var(--hex-overlap);
    }
    &> tbody > tr {
        display: grid;
        grid-auto-columns: var(--hex-spacing);
        grid-auto-flow: column;
        height: var(--hex-height);
    }
    &> tbody > tr > td {
        width: var(--hex-size);
        height: var(--hex-height);
        text-align: center;
        padding: 0;
    }
    .wabe {
        width: var(--hex-size);
        height: var(--hex-height);
        font-size: calc(var(--hex-size) * 1.43);
        line-height: var(--hex-height);
        text-align: center;
        display: flex;
        position: relative;
    }
    .wabe::before, .wabe::after{
        rotate: 90deg;
        font-family: symbol;
        position: absolute;
        translate: calc((var(--hex-height) - var(--hex-size)) / 2);
    }
    .wabe::before{
        content: '\2B22';
    }
    .wabe::after{
        content: '\2B21';
        color: brown;
    }
    &> tbody > tr:nth-child(even) {
        margin-left: var(--hex-gap);
    }
    &> tbody > tr:nth-child(even) .wabe {
        color: dodgerblue;
    }
}
*/