/* TODO structure this file */

/*
 * vars
 */

:root {
    --text-color: #202020;
    --text-background: #f8f8f8;
    --highlight-background: #eeddcc;
    --button-background: #b66c13;
    --button-text: #f8f8f8;
    --disabled-color: #808080;
    --disabled-background: #c0c0c0;
    --table-header: #b66c13;
    --table-alt-a: #eeddcc;
    --table-alt-b: #ffeedd;
}

/*
 * GLOBAL STYLES
 */

body {
/*     font-family: Garamond, Georgia, serif; */
    font-family: Roboto, Verdana, Geneva, sans-serif;
/*     font-size: larger; */
    box-sizing: border-box;

    color: var(--text-color);
    background-color: var(--text-background);
}

h1 {
    text-align: center;
    font-size: 2em;
    letter-spacing: -2%;
}
h2 {
    text-align: center;
    font-size: 1.5em;
    letter-spacing: -1%;
}

p {
    line-height: 135%;
}

p:not(:last-child)  {
    margin-bottom: 1rem;
}


li {
    line-height: 120%;
    margin-left: 2rem;
}

li:not(:last-child)  {
    margin-bottom: 1rem;
}

/*p:first-child {
  color: brown;
}*/

p:first-of-type {
  /*color: green;*/
}

/*p:not(:first-of-type) {
    text-indent: 5rem;
}

p:first-of-type::first-letter {
  font-size: 4rem;
  font-weight: bold;
  color: brown;
  float: left;
}

p::first-letter {
  font-weight: bold;
  font-size: 1.2rem;
}*/

.text {
    font-family: "Libre Baskerville", Garamond, Georgia, serif;   
/*     font-size: larger; */
/*     font-size: 120%; */
    font-size: 1.2em;
    
    color: var(--text-color);
    background-color: var(--text-background);
    
    hr {
        border-top: 1px solid #c0c0c0;
        width: clamp(20ch, 45vw, 30ch);
    }

    h1, h2, h3, p, sl li {
        max-width: clamp(45ch, 90vw, 65ch);
        margin-left: auto;
        margin-right: auto;
    }
    
    blockquote {
        max-width: clamp(35ch, 80vw, 55ch);
        margin-left: auto;
        margin-right: auto;
        font-size: 85%;
    }
    
    p {
        line-height: 165%;
        text-indent: 5rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    h2+p, h1+p {
        text-indent: 0;
    }

    /*p::first-letter {
        font-weight: bold;
        font-size: 1.7rem;
    }*/

    h2+p::first-letter {
        font-family: "Manufacturing Consent", "Libre Baskerville", Garamond, Georgia, serif;
        font-size: 8rem;
        /*font-weight: bold;*/ /* No bold weight in Manufacturing Consent */
        /*color: brown;*/
        float: left;
    }
    
    #content:last-child::after {
        content: "* * *";
        display: block;
        text-align: center;
    }
}

blockquote {
    margin: 0 3em;
    padding: 0 3em;
    /*background-color: #eeddcc;*/
    border-left: 2px black solid;
}

blockquote.text {
    margin: 0 3em;
    padding: 0 3em;
    /*background-color: #eeddcc;*/
    border-left: 2px black solid;
}

blockquote.coloured {
    margin: 1em 12%;
    padding: 1em 12%;
    border: none;
    background-color: var(--highlight-background);
}

blockquote.verse {
    margin-top: 1em;
    margin-bottom: 1em;
    p {
        text-indent: 0;
        padding-bottom: 1em;
    }
    :last-child {
        padding-bottom: 0;
    }
}

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2em;
    right: 2em;
    
    display: flex;
    flex-direction: column;
}

article {
    /* This is used for author and work pages */
    max-width: clamp(45ch, 90vw, 90ch);    
    margin-left: auto;
    margin-right: auto;
}

button, input[type="submit"] {
    background-color: var(--button-background);
    border: 1px solid var(--button-background);
    /*border: none;*/
    padding: 4px 12px;
    border-radius: 8px;
    text-decoration: none;
}
button a, input[type="submit"], a button {
    color: var(--button-text);
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    /*margin: auto;
    padding: 0;*/
}
button.secondary, input[type="submit"].secondary {
    background-color: var(--button-text);
    color: var(--button-background);
    text-decoration: none;
}
button.secondary a {
    color: var(--button-background);
    text-decoration: none;
}
button.centred {
    display: block;
    margin: 0px auto;
    width: auto;
}
button.disabled {
    color: var(--disabled-color);
    background-color: var(--disabled-background);
    border-color: var(--disabled-background);
    /*pointer-events: none;*/
}
a.disabled {
    pointer-events: none;
}
a.centred {
    display: inline;
    width: auto;
    /*background-color: green;*/
    text-decoration: none;
}

input[type="submit"] {
    grid-column: 1 / 3;
    margin: 0px auto;
    display: block;
}

.errors {
    color: red;
}


/*
 * PRINT
 */

@media print {
    #content-area, #content, div.text {
        overflow: visible;
        overflow-y: visible;
        display: block;
    }
    h1, h2, h3 {
        page-break-after: avoid;
    }
    body {
        display: block;
    }
    table {
        border: 2px solid black;
        border-collapse: collapse !important;
        border-spacing: 0px !important;
        max-width: 99%;
        /*margin: 0px;*/
        /*padding: 0px;*/
    }
    tr, th, td {
        border: 1px solid grey;
        /*margin: 0px;*/
        /*padding: 0px;*/
    }
}

/*
 * LAYOUTS
 */

#heading, #footer {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    font-size: smaller;
    
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    text-align: center;
    border: 1px solid gray;
    
    display: grid;
    grid-template-columns: 20% 1fr 20%;
}

#mainmenu {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    font-size: smaller;
    
    border: 1px solid gray;
    
    position: relative; 
    top: 0;
    left: 0;
    max-width: 100%;
    text-align: center;
}

#content-area {
    position: relative; 
    top: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

#chapter {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    display: flex;
    flex-direction: column;
}
#content_nav {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    font-size: smaller;
    
    border: 1px solid gray;
    
    position: sticky;
    top: 0;
    left: 0;
    max-width: 100%;
    text-align: center;
/*     align-self: center; */
}
#content {
    position: relative; 
    top: 0;
    left: 0;
    max-width: 100%;
    flex-grow: 1;
    overflow: hidden;
}
#content_heading {
    font-family: Roboto, Verdana, Geneva, sans-serif;
    font-size: smaller;
    
    border: 1px solid gray;
    /*background: inherit;*/ /* not enough? */
    background: var(--text-background);
    
    position: sticky;
    top: 0;
    left: 0;
    max-width: 100%;
    text-align: center;
    align-items: center; 
    
    display: grid;
    grid-template-columns: 10% 1fr 10%;
}

.label-textarea-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 5px;
}


/* move these */

.edit-button {
    text-align: right;
}

.align-right {
    text-align: right;
}


/*
 * WORK AND AUTHOR STYLES
 */
 

.work-author {
    text-align: center;
}

author {
    font-weight: bolder;
    /*color: #600000;*/
    color: var(--text-color);
}

author[repeat] {
    font-weight: normal;
    font-style: normal;
    /*color: #300000;*/
    /*text-decoration: underline dotted;*/
}

author[repeat][linked] {
    /*text-decoration: underline dotted;*/
}

work {
    font-style: italic;
    font-weight: bolder;
    /*color: #006000;*/
    color: var(--text-color);
}

work[repeat] {
    font-weight: normal;
    font-style: italic;
    /*color: #003000;*/
    /*text-decoration: underline dotted;*/
}

work[repeat][linked] {
    /*text-decoration: underline dotted;*/
}

a:has(author[repeat]), a:has(work[repeat])  {
    text-decoration: underline dashed;
}

/*.linked {
    text-decoration: underline; 
    cursor: pointer;
}*/

author:not(.linked):not([repeat]) {
    /*color: red;*/
    text-decoration: red wavy underline 1.5px;
}

work:not(.linked):not([repeat]) {
    /*color: red;*/
    text-decoration: red wavy underline 1.5px;
}


table {
    width: 100%;
    /*background-color: #ffffff;*/
    padding: 2px;
    margin: 2px;
    border-spacing: 6px;
    border-collapse: separate;
}
tr {
    /*background-color: #ffffff;*/
    padding: 1px;
    margin: 11px;
}
th, td {
    padding: 5px;
    margin: 5px;
}
th {
    background-color: /*#88aadd;*/ var(--table-header);
    color: /*white;*/ var(--text-background);
}
/*td {
    background-color: #ebcdbe;
}*/
tr:nth-child(odd) td {
    background-color: /*#cce0ff;*/ var(--table-alt-a);
}
tr:nth-child(even) td {
    background-color: /*#eef6ff;*/ var(--table-alt-b);
}

.urls td a {
    overflow-wrap: word-break;
}

span[title] {
    text-decoration: underline dotted;
}

author:target, work:target {
    background-color: #ffe1ae;
}

/* fix the input width inside div */
div > input, div > textarea {
    width: calc(100% - 10px);
    /*margin: 5px;*/
}

.join-mdash {
   /* a:after { content: " – " }*/ /* ndash but you can't put HTML entities in 'content' */
   /* a:last-child:after { content: none; }*/
}


/*
 * TIMELINE IMAGE PAGE
 */

.image-scroll-page {
    display: grid; 
    grid-template-rows: auto auto; 
    overflow: auto; 
    position: relative; 
    height: 90vh;
}

.image-scroll-host {
    overflow: scroll;
    position: relative;
}