/*This is the general CSS for reading mode entries that feature: English/SL/SP and an image

It is active on pages with the reading-mode.html layout. Note that there are several configurable options for the layout of this page. Here is how we handle all of them:


Language/Script: Show English/Show Sitelen Pona/Show Sitelen Lasina: via CSS by checking for status of :checked

Image Settings: via CSS by checking for status of :checked

Modes:
- Regular Mode is the normal view of the text. 

- Quiz mode is a stripped version of the text with ONLY sitelen Lasina and sitlen pona toggleable. Options for 'Show English' and 'Show image' disappear. 

- Line by Line mode hides the language/scrip panel and replaces it with a new toggle between sitelen pona and sitelen lasina, it hides the regular mode texts.

- Table Mode does similar behaviour.

*/

@font-face {
    font-family: "nasin nanpa";
    src: url(/assets/nasin-nanpa-4.0.2.otf);
}
.sp{
    font-family: "nasin nanpa";
}

body{
    grid-template-rows: auto auto 1fr auto;/*ensuring additional space is added to main container, not to the control section*/
}

main{
    max-width: 100%;
}

/*The configurable menu.*/
.menu {
    background-color: var(--walo-lili);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-block-end: 0.1em solid var(--pimeja);


}
.menu label {
    white-space: nowrap;
}

.menu fieldset {
    border: none;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1em;
    margin: inherit;
    align-items: flex-start;
    flex: 1;
    max-width: 35em;
}
.menu legend {
    text-transform: uppercase;
    width:fit-content;
    flex-grow: 0;
    padding-inline-start: 1em;

    display: inline;
    flex: 100%;
    float: left;
    box-shadow: inset 0 0 0 0.1em var(--pimeja);
}
.menu p{
    margin: 0;
    padding: 0;
}


/*logic for hiding different versions of menu*/
/*In regular mode, hide table and line*/

/*In line mode, hide regular*/
:has( :is(input[id="rc-2c"]:checked)) fieldset:is(.texts){
    display: none;
}
/*In not in line mode, hide regular and table*/
:has(:is(input[id="rc-2c"]:not(:checked))) fieldset:is(.by-line){
    display: none;
}



/*logic for hiding aspects of image*/
    /*hide image if box is not checked*/
:has(input[id="rc-3a"]:not(:checked))  .context img{
    display: none;
}
/*also ensure that the caption does not get pushed to the side on its own*/
:has(input[id="rc-3a"]:not(:checked)) figure.context{
    max-width: 100%; 
    width: 100%;
    align-items: center;
    border: none;
}
:has(input[id="rc-3a"]:not(:checked)) figcaption{
    max-width: fit-content;
    width: 100%;
    border: 0.1em solid var(--pimeja); /*shifting border is required to keep the width at 100% while maintaing the clean look of the original*/
}
:has(input[id="rc-3b"]:not(:checked))  .caption{
    display: none;
}
:has(input[id="rc-3c"]:not(:checked)) .attr{
    display: none;
}
/*for spacing reasons, ensure the entire component gets erased when*/
/*all elements are supposed to be gone are hidden*/
:has(input[id="rc-3b"]:not(:checked)):has(input[id="rc-3c"]:not(:checked)):has(input[id="rc-3a"]:not(:checked)) figure{
    display: none;
}




/*'shows english logic*/
/*regular mode*/
/*if box is not checked, english hidden*/
body:has(input[id="rc-1a"]:not(:checked)) .regular .en {
    display: none;
}
/*if box is not checked, tok hidden*/
body:has(input[id="rc-1c"]:not(:checked)) .regular .tok {
    display: none;
}
/*if box is not checked, sp hidden*/
body:has(input[id="rc-1b"]:not(:checked)) .regular .sp {
    display: none;
}

/*line mode*/
/*Toki Pona/English Mode*/
/*all sitelen pona hidden*/
body:has(input[id="rc-bl-1a"]:checked) .line .sp {
    display: none;
}
body:has(input[id="rc-bl-1a"]:checked) .line details[lang="tok"] {
    display: none;
}


/*sp/sl mode*/
/*sitelen Lasina hidden*/
body:has(input[id="rc-bl-1b"]:checked) .line p[lang="tok"] {
    display: none;
}
/*hide english details*/
body:has(input[id="rc-bl-1b"]:checked) .line details[lang="en"] {
    display: none;
}


/*sp/en mode*/
/*sitelen Lasina hidden*/
body:has(input[id="rc-bl-1c"]:checked) .line p[lang="tok"] {
    display: none;
}
/*hide tok details*/
body:has(input[id="rc-bl-1c"]:checked) .line details[lang="tok"]  {
    display: none;
}




/*table mode*/
/*if box is not checked, english hidden*/
body:has(input[id="rc-1a"]:not(:checked)) .table [lang="en"] {
    display: none;
}
/*if box is not checked, tok hidden*/
body:has(input[id="rc-1c"]:not(:checked)) .table [lang="tok"] {
    display: none;
}
/*if box is not checked, sp hidden*/
body:has(input[id="rc-1b"]:not(:checked)) .table .sp {
    display: none;
}





/*logic for hiding different modes*/
/*In regular mode, hide table and line*/
:has( :is(input[id="rc-2a"]:checked)) :is(.lines, .table){
    display: none;
}
/*In quiz mode, hide table, line, and english*/
:has( :is(input[id="rc-2b"]:checked)) 
:is(.lines, .table, 
label:has(input[id="rc-1a"]), /* as well as English toggle*/
fieldset[id="rc-3"], /* image settings*/
figure, .en /* and the image itself*/
){
    display: none;
}

/*In quiz mode, hide table and line*/
:has( :is(input[id="rc-2b"]:checked)) p{
    line-height: 1.1em;

} 

/*In line mode, hide regular and table*/
:has( :is(input[id="rc-2c"]:checked)) :is(.regular, .table){
    display: none;
}
/*In table mode, hide regular and line*/
:has(:is(input[id="rc-2d"]:checked)) :is(.regular, .lines){
    display: none;
}





/*mode-agnostic styles*/
.selo {
    border: 0.2em solid var(--pimeja);
    padding: 2em;
}

.content {

    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1em;
    row-gap: 1em;
    width: auto;

}

h1{
    width: 100%;
    text-align: center;
    margin-block: 0.5em 1em;
}

figure {
    max-width: 15em;
    min-width: 15em;
    width: 20em;
    line-height: 0;
    display: inline-flex;
    flex-direction: column-reverse;
    border: 0.1em solid var(--pimeja);
}
figure img {
    max-width: 100%;
}
figcaption p{
    background-color: var(--walo-pimeja);
    margin: 0;
    line-height: 1.6em;
}
figcaption a:is(:visited, :not(:visited)){
    color: var(--pimeja);
}
figcaption .attr{
    display: block;
}
figcaption{
    border-bottom: 0.1em solid var(--pimeja);

}
p:last-of-type{
    margin-bottom: 0;

}
.attr {
    border-top: 0.1em solid black;
    background-color: var(--walo-lili);
    font-size: 0.8em;
    line-height: 1em;
}
nav ul{
    padding: 0;
}
.introtext{
    padding: 0.5em;
}

/*regular mode styling*/

.regular {
    display: flex;
    align-items: flex-start;
    column-gap: 1em;
    flex-wrap: wrap;
}
.regular div:is(.en, .tok){
    min-width: 9em;
}
.regular div:is(.sp){
    width: fit-content;
    min-width: 6em;
    max-width: max-content;
    flex:1;
}

.regular p:empty{
    display: none;
  }
.regular :is(.tok, .en) {
    flex: 1.5;
    max-width: 20em;
}




/*line mode styling*/   

.line{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    column-gap: 1em;
    border-bottom: 0.1em solid var(--pimeja);
    position: relative;
}
.line details[open] summary{
    position: absolute;
    right: 0;
    top: 0;
}
.line summary::after{
    content: '';
    position: absolute;
    top: 0;    content: '';

    bottom: 0;
    left: 0;
    right: 0;
}
/*.line details[open] summary::after {
    content: 'Close';
    text-align: right;
    position: static;
    display: block;
    width: 200vw;
    height: 5em;
    margin-block-start:-2em;
    background: transparent; 
}*/
.line:focus-within{
    outline: 0.2em solid var(--pimeja);
    border-radius: 0.1em;
}
summary:focus{
    outline: none;
}
.line p:not(.detail p) {
    position: relative;
}

.line details[open] {
    padding-top: 2em;
    flex: 50%;
}
.line:has(details[open]){
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/*table mode styling*/

.table :is(tr){
    display: flex;
    column-gap: 1em;
    border-bottom: 0.1em solid var(--pimeja);
}
.table :is(td, th):not(:has(.sp)){
    flex: 3;
    max-width: 20em;
}
.table :is(td, th):has(.sp){
    max-width: fit-content;
    flex: 1;
    flex: auto;
}

  
/*utility*/

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

h1{
    font-size: 1.1em;
    font-family: Jost;
}


.back-forth{
    display: flex;
    justify-content: space-between;
    margin-block-start: -3em;
}
.back-forth a:is(:visited, :not(:visited)){
    background-color: var(--walo);
    color: var(--pimeja);
    text-decoration: none;
    box-shadow: 0 0 0 0.1em var(--pimeja);
    text-transform: uppercase;
    padding-inline: 0.25em;

}

@media (max-width: 32em) {
    .selo{
        padding-inline: 0;
        padding-block-end: 0;
        margin-inline: 0;
        border-inline: none;
        border-block-end: none;
    }
}