/* Narrow */

@media (max-width: 1170px) {

    #frontPageBibleIndex {
        columns: 3;
    }

    #books-nav ul {
        columns: 5;
    }

}

@media (max-width: 990px) {
    
    article #hero {
        padding-top: 3rem;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "heroText dove"
            "bibleIndex bibleIndex";
        column-gap: 0;
        row-gap: 1rem;
    }

    article #hero #heroText {
        max-width: none;
    }

    article #hero #frontPageBibleIndex {
        columns: 4;
    }

    #books-nav ul.columns-5 {
        columns: 4;
    }
    
}

@media (max-width: 1024px) {

    header h1 {
        font-size: 1.8rem;
    }

    h1, h2, h3, article.text h3.subtitle, h4, h5, h6, p, ul, ol, ul.chapterList, ul.verseList {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    aside.context {
        margin-left: 3rem;
        margin-right: 3rem;
        max-width: 100%;
    }

    aside.box {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    aside.box p, aside.box ul, aside.box ol {
        margin-left: 5rem;
    }

    article.text aside.context p, article.text aside.context ul, article.text aside.context ol {
        margin-left: 0;
    }

    nav#bible {
        padding: 1.5rem 2rem 2rem 2rem;
    }

    article.text p, article.text ul, article.text ol, article.text h4, article.text h5, article.text h6, article.text blockquote, article.text h4.chapter-title {
        margin-left: 5rem;
        margin-right: 5rem;
        max-width: 100%;
    }

    blockquote p {
        margin-left: 0;
    }

    img.mainImage {
        margin-right: 3rem;
    }

    article.text h3 {
        float: none;
        text-align: left;
        margin-left: 5rem;
        margin-top: 1rem;
        width: auto;
    }

    ul.chapterList {
        clear: both;
    }

    .table-wrapper {
        width: calc(100% - 6rem);
        padding: 0;
        margin: 2rem 2rem 2rem 3rem;
        overflow-x: auto; /* Adds horizontal scrollbar if content overflows */
    }

    figure {
        margin: 1rem 2rem 1rem 1rem;
        width: 50%;
    }

    section.about div.table-wrapper {
        max-width: calc(100% - 10rem);
        margin-left: 5rem;
        padding-left: 0;
    }

    section.about div.table-wrapper table {
        margin: 0;
    }

}

@media (max-width: 1000px) {

    header h1 a span:nth-child(2) {
        display: none;
    }

}

@media (max-width: 860px) {

    article #hero #frontPageBibleIndex {
        columns: 3;
    }

    ul.columns-5, ul.columns-6 {
        columns: 4;
    }

    .table-wrapper {
        width: calc(100% + 2rem);
        padding-left: 2rem;
        margin: 2rem 2rem 2rem -2rem;
        overflow-x: auto; /* Adds horizontal scrollbar if content overflows */
    }

}

@media (max-width: 768px) {

    body {
        margin-top: 104px;
    }

    main {
        padding: 0;
    }

    main article {
        border-radius: 0;
        margin-bottom: 0;
    }

    main article nav#breadcrumbs {
        margin-bottom: 0;
        border-radius: 0;
    }

    header h1 {
        font-size: 1.6rem;
        min-width: 220px;
    }

    ul.columns-5, ul.columns-6 {
        columns: 3;
    }

    ul.columns-4, ul.columns-3 {
        columns: 2;
    }

    header div #location-container {
        
    }

    header {
        padding: 1rem 2rem 1.2rem 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "logo nav"
            "location location";
        gap: 0.5rem;
    }

    header h1 a span, header h1 a span:nth-child(2) {
        display: inline;
    }

    header div span#current-book {
        min-width: 150px;
    }

    header div span#current-verse {
        min-width: 80px;
    }

    header nav ul {
        padding: 0 0 0 0;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-top: 0.25rem;
    }

    header nav ul li {
        margin: 0;
        font-size: 1rem;
    }

    main article nav#breadcrumbs {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0.6rem 1rem 0.5rem 1rem;
        font-size: 0.95rem;
        gap: 0.25rem;
    }

    main article.interlinears nav#breadcrumbs, main article.concordance nav#breadcrumbs {
        display: block;
    }

    main article nav#breadcrumbs span.topRightLinks {
        border-top: 1px solid #808080;
        padding-top: 0.25rem;
    }

    img.mainImage {
        margin-right: 2rem;
        width: 200px;
        height: 200px;
    }

    #books-nav ul.columns-5 {
        columns: 3;
    }

    h1, h2, h3, h4, h5, h6, p, ul, ol {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    aside.box p, aside.box ul, aside.box ol {
        margin-left: 4rem;
    }

    article.text h3 {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        width: auto;
    }

    article.text h3.subtitle {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    article #hero {
        border-radius: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "heroText"
            "bibleIndex"
            "dove";
    }

    article #hero #frontPageBibleIndex {
        columns: 2;
    }

    article.text p, article.text ul, article.text ol, article.text h4, article.text h5, article.text h6, article.text blockquote, article.text h4.chapter-title, ul.chapterList, ul.verseList {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    article.text div.large-gap {
        margin-left: 0;
    }

    article.text div.large-gap hr {
        margin-top: 3rem;
        margin-bottom: 2rem;
    }

    article.text section.bookNavigation p {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    article.text section.bookNavigation {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    table {
        width: calc(100% - 2rem);
        margin: 1rem;
    }

    article.text ul.chapterList {
        margin-left: 2rem;
        margin-right: 2rem;
        margin-bottom: 2rem;
    }

    article.interlinears h4.interlinearVerseNumber {
        width: auto;
        padding-left: 2rem;
    }

    article.interlinears h4.interlinearVerseNumber + ul {
        padding: 2rem 1rem 0 1rem;
    }

    p.noteBox {
        border-radius: 0;
        border-left: none;
        border-right: none;
        max-width: 100%;
    }

    img.mainImage {
        margin-top: 2rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }

    section.contents {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    ul.columns, article.interlinears ul.columns {
        columns: 3;
    }

    ul.columns-2 {
        max-width: 100%;
    }

    ul.panels {
        margin: 2rem 2rem;
    }

    h3.letter {
        margin-left: 1rem;
        margin-top: 2rem;
    }

    aside.box {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    aside.info, aside.warning, aside.error {
        margin: 2rem 0;
        border-radius: 0;
    }

    #books-panel, #chapters-panel, #verses-panel {
        border-radius: 0;
    }

    #settings-panel {

        column-count: 1;
        border-radius: 0;
    }

    section.about div.table-wrapper {
        max-width: calc(100% - 4rem);
        margin-left: 2rem;
    }

    #searchFilters {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    ul.columns-3, ul.columns-4, ul.columns-5, ul.columns-6 {
        columns: 2;
    }

    article #hero #frontPageBibleIndex {
        columns: 2;
    }

    #books-nav ul.columns-5 {
        columns: 2;
    }

    article #hero #dove {
        align-self: start;
    }

    article #hero #dove img {
        max-width: 200px;
        height: auto;
    }

    aside.context {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        max-width: 100%;
    }

    article.text blockquote {
        margin-right: 0;
    }

    article.text p {
        margin-right: 2rem;
    }

    article.text blockquote blockquote, article.text blockquote blockquote blockquote, article.text blockquote blockquote blockquote blockquote, article.text blockquote blockquote blockquote blockquote blockquote {
        margin-left: 1rem;
    }

    img.mainImage {
        width: 140px;
        height: auto;
    }

    div.timeline {
        padding-bottom: 5rem;
    }

    div.timeline img {
        width: 140px;
        height: 140px;
    }

    /* Fixed-bottom aside for narrow screens */
    aside.word.fixed-bottom-aside {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0.5rem 0.5rem 0 0; /* Rounded top corners, square bottom corners */
        padding-bottom: env(safe-area-inset-bottom); /* For iPhone X notch etc. */

        /* Initial state for entrance animation */
        transform: translateY(100%);
        opacity: 0;
    }

    /* Target state for entrance animation */
    aside.word.fixed-bottom-aside-show {
        transform: translateY(0);
        opacity: 1;
    }

}

@media (max-width: 480px) {

    body {
        margin-top: 80px;
    }

    header {
        padding: 0.2rem 0.5rem 0.7rem 0.5rem;
        gap: 0.5rem;
    }

    header div #location-container {
        justify-content: normal;
    }

    header div span#current-chapter {
        width: 94px;
    }
    
    header div span#current-verse {
        width: 76px;
        min-width: 76px;
    }

    article #hero #frontPageBibleIndex {
        padding: 0.75rem 1.25rem;
    }

    header div#location-container {
        
    }

    main article div#hero + section:first-of-type {
        padding-top: 0;
    }

    #books-nav ul.columns-5 {
        columns: 2;
    }

    #books-nav ul.columns-3 {
        columns: 1;
    }

    aside.box {
        padding: 1rem 2rem 2rem 1.5rem;
    }

    aside.box i.fa-solid, aside.box i.fa-regular {
        margin: 1rem 0 .5rem 1rem;
    }

    img.mainImage {
        float: none;
        border-radius: 0;
        box-shadow: none;
        width: calc(100%);
        margin-left: 0;
        margin-top: 0;
        height: 20rem;
        object-position: top -20px left 0;
        object-fit: cover;
    }

    figure img {
        width: 100%;
        height: auto;
    }

    article #hero {
        padding: 1rem !important;
    }

    article #hero #dove img {
        width: 160px;
        height: 160px;
    }

    main article section {
        padding: 1rem 0 5rem 0;
    }

    main article.homePage #hero h4 {
        font-size: 1.4rem;
    }

    main article.homePage #hero p {
        font-size: 1.1rem;
    }

    article.text h3 {
        margin-left: 2rem;
    }

    blockquote {
        margin-left: 3rem;
    }

    h2 {
        margin-top: 1rem;
    }

    h3 {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    h4 {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    h5.glossary + figure {
        margin-top: 0;
    }

    h5.glossary {
        font-size: 1.1rem;
    }

    h4.glossary {
        font-size: 1.6rem;
    }

    ul.columns, article.interlinears ul.columns {
        columns: 2;
    }

    ul.columns-2 {
        columns: 1;
    }

    ul.panels {
        margin: 1rem 1rem;
    }

    ul.panels li img {
        height: 60vw;
    }

    article.text ul.downloadsList {
        gap: 0.5rem;
        margin-right: 2rem;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    ul.downloadsList li a {
        padding: 0.5rem;
    }

    div.timeline div.contents {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    div.timeline img {
        float: none;
        display: block;
        margin: 1rem auto;
        width: 240px;
        height: 240px;
    }

    article.text ul.chapterList {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    article.text section.contents {
        padding-bottom: 4rem;
    }

    article.text section.bookNavigation {
        display: block;
        padding: 2rem 2rem 2.8rem 2rem;
    }

    article.text section.bookNavigation p.previousLink, article.text section.bookNavigation p.nextLink {
        float: none;
        text-align: center;
    }

    main article section:last-of-type {
        border-radius: 0;
    }

    footer {
        padding: 2rem 1rem;
    }

    footer p {
        font-size: 0.8rem;
        line-height: 1.6;
    }

    figure {
        float: none;
        width: calc(100% - 4rem);
        max-width: none;
        margin-left: 2rem;
        padding: 0;
    }

    figure figcaption {
        padding-left: 0.5em;
        padding-right: 0.5em;
        text-align: center;
    }

    figure p:last-of-type {
        text-align: center;
        padding: 0;
    }

    #betaBanner {
        position: fixed;
        bottom: 1vh;
        left: 1vh;
        width: 46vw;
        border-radius: 0.5rem;
        padding: 0.3rem;
    }
    
    #localhostBanner {
        position: fixed;
        bottom: 1vh;
        right: 1vh;
        width: 46vw;
        border-radius: 0.5rem;
        padding: 0.3rem;
    }

    #books-panel, #chapters-panel, #verses-panel {
        padding: 1rem 1rem 2rem 1rem;
    }

    #settings-panel {
        padding: 1rem 1rem 2rem 1rem;
        column-count: 1;
    }

    #settings-panel label {
        padding: 0.5rem 0.8rem;
    }

    #main-menu-panel {
        padding: 1rem 1rem 2rem 1rem;
        border-radius: 0;
    }

    #main-menu-panel nav ul {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    #main-menu-panel nav ul li {

    }

    #main-menu-panel nav ul li a {
        padding: 0.5rem 0.8rem;
    }

    ul.columns-3, ul.columns-4, ul.columns-5, ul.columns-6 {
        columns: 2;
        max-width: 100%;
        padding-left: 1.2rem;
    }

    footer nav ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    footer nav ul li {

    }

}

/*
    Screens that are not very tall should not have the header in a fixed position, but should be above the content.
*/
@media (max-height:630px) {

    header {
        position: static;
        margin-bottom: 0;
    }

    body {
        margin-top: 0;
    }

}