@font-face {
    font-family: "nasin-nanpa";
    src: url("nasin-nanpa-5.0.0-beta.3.safari-fix.otf") format("opentype")
}

body {
    margin: 0;
    /* numbers are approximate APCA contrast ÷ 10 */
    --kule-10: #511d00;
    --kule-8: #a64300;
    --kule-7: #cb5300;
    --kule-5: #ff7000;
    --kule-3: #ffb17e;
    --kule-2: #ffccab;
    --kule-1: #ffe3d2;
    --lupa: #0063fd;
    --lupa-pimeja: #000099;
    --sp-split: 20rem;
    --en-split: 25rem;
    --pimeja: black;
    --walo-pimeja: rgb(201, 201, 201);
    --walo: white;
    --white: white;
    --suno-mun: var(--kule-8);
    --o-pimeja-e: darken;
    --kule-mute-suwi: linear-gradient(to right, var(--kule-7), var(--kule-5));


    background-color: var(--walo, white);
    color: var(--pimeja, black);
    font-family: 'Nunito Sans', sans-serif;
    counter-reset: sp en sl;
    
}
:root[data-selected-theme="dark"] body{
    --kule-1: #772e00;
    --kule-2: #a64305;
    --kule-3: #c65100;
    --kule-5: #ff6e00;
    --kule-7: #ffac74;
    --kule-8: #ffc5a0;
    --kule-10: #ffe3d2;

    --lupa: #7cdff5;
    --lupa-pimeja: #000099;
    --walo-pimeja: #404040;
    --pimeja: white;
    --walo: #101010;
    --white: black;
    --suno-mun: var(--kule-8);
    --o-pimeja-e: lighten;
    --kule-mute-suwi: linear-gradient(to right, var(--kule-5), var(--kule-2));



}
@media (prefers-color-scheme: dark){
    :root:not([data-selected-theme="light"]) body{
    --kule-1: #772e00;
    --kule-2: #a64305;
    --kule-3: #c65100;
    --kule-5: #ff6e00;
    --kule-7: #ffac74;
    --kule-8: #ffc5a0;
    --kule-10: #ffe3d2;

    --lupa: #7cdff5;
    --lupa-pimeja: #000099;
    --walo-pimeja: #404040;
    --pimeja: white;
    --walo: #101010;
    --white: black;
    --suno-mun: var(--kule-8);
    --o-pimeja-e: lighten;
    --kule-mute-suwi: linear-gradient(to right, var(--kule-5), var(--kule-2));




    }
}

.split p[lang="en"]:not(:is(h1, h2, h3, h4) > *)::before {  counter-increment: en; 
  content: "[" counter(en) "]";
}
.split p.sp:not(:is(h1, h2, h3, h4) > *)::before {  counter-increment: sp; 
  content: "[" counter(sp) "]";
}
.split p.sl:not(:is(h1, h2, h3, h4) > *)::before {  counter-increment: sl; 
  content: "[" counter(sl) "]";
}
.split p::before{
    font-family: 'Nunito Sans', sans-serif;
    position: absolute;
    top: 0.15rem;
    left: -2rem;
    font-size: 0.6rem;
    font-weight: 700;
    opacity: 0;
}
main .split p {
    position: relative;
}


::selection {
    background-color: var(--kule-5);
    color: white;
}

main {
    margin-bottom: 4rem;
}

h1 {
    font-variation-settings: "wdth" 75;
    font-size: 2.25em;
    text-align: left;
    margin: 2rem 0;
    line-height: 1.125;
}

h1 > div {
    grid-column: 2 / 5;
    padding-bottom: 1rem;
}

h2 {
    margin: 4rem auto 1rem;
    border-bottom: dotted var(--kule-5) 3px;
    font-variation-settings: "wdth" 75;
    font-size: 2em;
    width: fit-content; 
}

.split {
    display: grid;
    grid-template-columns: auto minmax(0, var(--en-split)) minmax(1rem, 7vw) minmax(0, var(--sp-split)) auto;
    grid-auto-flow: dense;
    /*gap: 1rem 0;*/
    padding: 0 1rem;
}

h2.split{
    line-height: 2.5rem;
    padding-bottom: .5rem
}

span.split {
    margin: 0
}

h2.split>p {
    margin: 1rem 0
}

.split>[lang="en"] {
    grid-column: 2;
    max-width: var(--en-split);

}

.sp {
    font-family: "nasin-nanpa", sans-serif;
}
.split .sp{
        grid-column: 4;
        width: var(--sp-split);
        min-width: var(--sp-split);
}
.split .sl{
        grid-column: 4;
        width: var(--sp-split);
        min-width: var(--sp-split);
}


[data-selected-language="tok"][data-selected-script="sp"]
main .split{
        justify-items: center;

}
[data-selected-language="tok"][data-selected-script="sp"]
main h2.split {
    justify-items: center;

}


a {
    color: var(--lupa);
}


main :is(img, svg) {
    width: 100%;
    height: auto;
    max-width: calc(42rem + 7vw);
    margin: 1rem auto 4rem;
    display: block;
    border-radius: 2rem;
    height: min-content;
}


[data-selected-language="en"] .split p::before, [data-selected-language="tok"] .split p::before{
    display: none
}
[data-selected-language="en"] .split:not(h1, footer) *, [data-selected-language="tok"] .split:not(h1, footer) *{
    grid-column: 2 / 5;
    margin-bottom: 0;
}

[data-selected-language="en"] .split :is(.sp, .sl){
    display: none;
}
[data-selected-language="en"] .split:not(h1, footer) [lang="en"]{
    --en-split: 30rem;
}

[data-selected-language="tok"] .split:not(h1, footer) .sl{
    width: unset;
    max-width: 30rem;
}


[data-selected-language="tok"] .split:not(h1, footer) [lang="en"]{
    display: none;
}
[data-selected-script="sp"] :is(.split, .splith, .condensed, .article-content) .sl {
    display: none;
}
[data-selected-script="sl"] :is(.split, .splith, .condensed, .article-content) .sp {
    display: none;
}

[data-selected-language="tok"] .ui-en, :is([data-selected-language="en"], [data-selected-language="bilingual"]) .ui-tok {
    display: none;
}
[data-selected-script="sl"] .ui-sp, [data-selected-script="sp"] .ui-sl {
    display: none;
}


.ui-sp {
    font-family: nasin-nanpa;
    text-transform: initial !important;
}


:is(a.sp, .sp a){
        text-underline-offset: 0.3em;
        text-decoration-thickness: 0.01em; 
       
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}



@media (width < 860px) {
    .split {
        padding: 0 6vw
    }
}

@media (width < 700px) {

    body{
        --en-split: 30rem;
        --sp-split: 15rem;
    }

    .split p::before{
        opacity: 0.54; /*this is the lowest it can go according to wcag*/
    }
    
    h2{
        width: inherit;
    }


    .split {
        display: flex;
        flex-direction: column;
        padding-inline-start: 3rem;
    }

    .split .sp{
        width: 25rem;
        max-width: 100%;
    }
    .split .sl{
        width: unset;
        max-width: 100%;
    }

    h2.split {
        gap: 0;
        margin: 4rem auto 1rem;
    }

    h2.split>[lang="en"] {
        margin-bottom: 0
    }

    h2.split>.sp {
        margin-top: 0
    }

    span.split>p {
        margin-bottom: 0
    }
}
h2:first-of-type{
    margin-block-start: 0em;
}

@media (width >= 1070px) {

    body{
        display: grid;
        grid-template-columns: 12.5rem auto;
        grid-template-rows: auto auto auto;}

    #menu{display:none}

    header{grid-column: 1/3; grid-row: 1}
    main{grid-column: 2; grid-row: 2}
    footer{grid-column: 2; grid-row: 3}

    #sidebar{
        grid-column: 1;
        grid-row: 2 / span 2;
        position: sticky;
        top: 0px;
        height: calc(100vh - 1rem);
        border-right: solid var(--kule-1) 2px;
        padding: 1rem 1rem 0;
        font-size: 1.25rem;
    }

}

@media (width < 1070px) {
    #sidebar{display: none}
}