/* Variables and Imports */
:root {
    --brandColor: #014aac;
    --lightestNeutralColor: #dfe6e9;
    --lighterNeutralColor: #b2bec3;
    --offNeutralColor: #babac0;
    --darkerNeutralColor: #576574;
    --darkestNeutralColor: #222f3e;

    --linkColor: #0d6ff5;
    --linkHoverColor: var(--brandColor);
    --linkActiveColor: var(--darkerNeutralColor);
    --linkVisitedColor: #16a085;
    --linkDisabledColor: #6e798b;

    --menuButtonTopColor: #2f7aee;
    --menuButtonBottomColor: #173668;

    --donationTopColor: #ffda84;
    --donationBottomColor: #e0ac31;

    --rssTopColor: #f8be0f;
    --rssBottomColor: #ec5838;

    --ultraBrightColor: #fff;

    --shadowColor: #444;
    --shadowColorTransparent: #4449;

    --verseBackground: #0002;

    --highlightColor: #014aac55;

    --tableBorder: #dedede;
    --tableZebra: #f0f0f0;

    --borderRadius: 0.3rem;

    --smallestGap: 0.2rem;
    --smallerGap: 0.3rem;
    --mediumGap: 0.5rem;
    --largerGap: 0.8rem;
    --largestGap: 1rem;
}

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(font/ChakraPetch.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* Wordpress Stuff */
@media screen {
    html {
        margin-top: 0 !important;
    }

    #wpadminbar {
        opacity: 0;

        &:hover {
            opacity: 1;
        }
    }

    /* Wordpress is an idiot and sometimes adds empty p tags for no apparent reason. */
    p:empty {
        display: none;
    }
}



/* Resets and Defaults */
html,
html * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
}

html {
    font-family: system-ui, sans-serif;
    font-size: 20px;
    color: var(--darkestNeutralColor);
    line-height: 1.1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath d='M0 2V0H2z' fill='%23b7b7bd' /%3E%3Cpath d='M0 2V1H1V0H2Z' fill='%23b3b3ba' /%3E%3Cpath d='M1 1H2V2H1Z' fill='%23b8b8be' /%3E%3C/svg%3E") var(--offNeutralColor);
    background-size: 60px 60px;
}

body {
    /* Prevent the bouncing overscroll. */
    overscroll-behavior-y: none;
}

::selection {
    background: var(--highlightColor);
}



/* Layout */
.page {
    display: flex;
    justify-content: center;
    min-height: 100dvh;
}

.shell {
    display: grid;
    grid-template-columns: 200px minmax(auto, 1000px);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "n h"
        "n m"
        "f f";
}

.header {
    grid-area: h;
}

.nav {
    grid-area: n;
}

.main {
    grid-area: m;
}

.footer {
    grid-area: f;
}



/* Shared Code */
:where(.header .title, .header .tagline, .nav .link) {
    font-family: "Chakra Petch", system-ui;
    font-weight: 400;
    font-style: normal;
}

:where(.header .title, .nav, .footer, .content) a {
    text-decoration: none;

    &:hover,
    &:focus {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    &:active {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }
}



/* Shell */
.shell {
    box-shadow: 0 0 5px 1px var(--shadowColor);
}




/* Header */
.header {
    padding: var(--smallerGap) var(--mediumGap) var(--mediumGap) var(--mediumGap);
    background: var(--brandColor);

    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--mediumGap);

    & .logo {
        display: none;
    }

    & .title {
        font-size: 3rem;

        & a {
            color: var(--ultraBrightColor);
        }
    }

    & .tagline {
        font-size: 1.3rem;
        color: var(--ultraBrightColor);
    }

    & .buttons {
        display: flex;
        gap: var(--mediumGap);
        margin-left: auto;
    }

    & :where(.donateButton > img, .logoLink) {
        height: 1.5rem;
        border-radius: var(--borderRadius);
        text-decoration: none;
        box-shadow: 0 2px 5px 1px var(--shadowColor);
        border: 1px solid transparent;

        &:hover,
        &:focus {
            border-color: var(--shadowColorTransparent);
        }

        &:active {
            box-shadow: 0 0 3px 0 var(--shadowColor);
        }
    }

    & .donateButton>img {
        padding: 0 var(--mediumGap);
        line-height: 1.5rem;
        background-image: linear-gradient(var(--donationTopColor), var(--donationBottomColor));
        background-origin: border-box;
        color: var(--darkestNeutralColor);
    }

    & .logoLink {
        padding: var(--smallestGap);
        width: 1.5rem;
        background-color: var(--ultraBrightColor);
        background-origin: border-box;

        &.rss {
            padding: 0;
            background-image: linear-gradient(var(--rssTopColor), var(--rssBottomColor));
        }
    }
}



/* Nav */
.nav {
    background: var(--brandColor);

    & .logo {
        padding: 0 var(--largerGap) var(--smallerGap) var(--largerGap);
        max-width: 100%;
    }

    & :where(.link) {
        display: block;
        padding: var(--smallerGap) var(--mediumGap) var(--smallerGap) calc(var(--largerGap) * 2);
        font-size: 1.5rem;
        color: var(--ultraBrightColor);

        &:hover,
        &:focus {
            background: var(--shadowColorTransparent);
        }
    }

    & :where(.toggleCheckbox, .toggleLabel) {
        display: none;
    }
}



/* Footer */
.footer {
    padding: var(--smallerGap) var(--largestGap);
    text-align: center;
    background: linear-gradient(var(--darkerNeutralColor), var(--darkestNeutralColor));
    color: var(--ultraBrightColor);
    display: flex;
    flex-direction: column;
    gap: var(--mediumGap);

    && a {
        color: var(--lightestNeutralColor);

        &:hover,
        &:focus {
            color: var(--ultraBrightColor);
        }

        &:active {
            color: var(--ultraBrightColor);
        }

        &:not([href]),
        &[href=""] {
            color: var(--offNeutralColor);
        }
    }
}


.dailyBibleVerse {
    padding: var(--mediumGap);
    border-radius: var(--borderRadius);
    background: var(--verseBackground);
    font-weight: 300;

    display: flex;
    flex-direction: column;
    gap: var(--smallerGap);

    margin: 0 auto;
    max-width: 40ch;
    box-shadow: inset 0 2px 4px var(--verseBackground);

    & .verseTitle {
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
    }

    & .verse {
        text-align: left;
    }

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



/* Main and Content */
.main {
    background: var(--ultraBrightColor);
}

.pageTitle {
    padding: var(--mediumGap) var(--largestGap);
    background: linear-gradient(var(--lightestNeutralColor), var(--lighterNeutralColor));
    font-size: 1.8rem;
    font-weight: 300;
}

.content {

    & :where(img) {
        max-width: 100%;
    }

    & :where(audio, video) {
        min-width: 0;
        max-width: 100%;
    }

    &> :not(:where(h1, h2, h3, h4, h5, h6, label, .noBottomMargin, :last-child)) {
        margin-bottom: var(--largestGap);
    }

    &> :where(h1, h2, h3, h4, h5, h6, label) {
        margin-bottom: var(--mediumGap);
    }

    & a {
        color: var(--linkColor);

        &:hover,
        &:focus {
            color: var(--linkHoverColor);
        }

        &:active {
            color: var(--linkActiveColor);
        }

        &:not([href]),
        &[href=""] {
            text-decoration: none;
            color: var(--linkDisabledColor);
            pointer-events: none;
        }
    }

    & :where(h1, h2, h3, h4, h5, h6) {
        font-weight: bold;
    }

    & h1 {
        font-size: 2.6rem;
    }

    & h2 {
        font-size: 2.2rem;
    }

    & h3 {
        font-size: 1.6rem;
    }

    & h4 {
        font-size: 1.3rem;
    }

    & h5 {
        font-size: 1.1rem;
    }

    & h6 {
        font-size: 0.8rem;
    }

    & :where(ul, ol) {
        padding-left: calc(var(--largestGap) * 2);
    }

    & table {
        border-collapse: collapse;

        & :where(th) {
            text-align: left;
            font-weight: bold;
        }

        & :where(th, td) {
            border: 1px solid var(--tableBorder);
            padding: var(--smallestGap) var(--smallerGap);
            vertical-align: baseline;
        }

        & :where(tr:nth-child(even) td) {
            background: var(--tableZebra);
        }
    }
}

.contentGrid {
    display: grid;
    grid-template-columns: var(--largestGap) 1fr var(--largestGap);

    font-size: 1.1rem;
    line-height: 1.2;

    padding-top: var(--mediumGap);
    padding-bottom: var(--largestGap);

    /* Use .noTopPad to make make the first element in the content to butt up against the top. */
    &:has(*:first-child:where(.noTopPad)) {
        padding-top: 0;
    }

    /* Normal elements will be in the middle column, effectively giving them left and right padding from the template. */
    &>* {
        grid-column: 2;
    }

    .fullWidth {
        grid-column: 1/4;
    }
}



/* Custom Components */
.aboutProfile {
    display: flex;
    align-items: flex-start;
    gap: var(--mediumGap);

    &+& {
        margin-top: var(--largerGap);
    }

    &>img {
        width: 150px;
        height: auto;
        border-radius: var(--borderRadius);
    }

    & .profileDetails {
        flex: 1;

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

.contentDonateButton.contentDonateButton {
    display: inline-block;
    padding: var(--smallerGap) var(--mediumGap);
    border: 1px solid transparent;
    border-radius: var(--borderRadius);
    text-decoration: none;
    box-shadow: 0 2px 3px 1px var(--shadowColor);

    background: linear-gradient(var(--donationTopColor), var(--donationBottomColor));
    background-origin: border-box;
    color: var(--darkestNeutralColor);

    &:hover,
    &:focus {
        color: var(--darkestNeutralColor);
        border-color: var(--shadowColorTransparent);
    }

    &:active {
        color: var(--darkestNeutralColor);
        box-shadow: 0 1px 2px 0 var(--shadowColor);
    }
}

.visionPartners {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: var(--mediumGap);
    column-gap: var(--mediumGap);

    & br {
        display: none;
    }

    & .partnerButton {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 150px;
        padding: var(--smallestGap);
        border: 1px solid transparent;
        border-radius: var(--borderRadius);
        text-decoration: none;
        box-shadow: 0 2px 3px 1px var(--shadowColorTransparent);
        background: var(--ultraBrightColor);

        & img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        &:hover,
        &:focus {
            border-color: var(--shadowColorTransparent);
        }

        &:active {
            box-shadow: 0 1px 2px 0 var(--shadowColor);
        }
    }
}

.program {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--brandColor);
    border-radius: var(--borderRadius);

    &+& {
        margin-top: var(--largerGap);
    }

    & h3 {
        padding: var(--smallerGap) var(--mediumGap);
        font-size: 1.5rem;
        font-weight: normal;
        color: var(--ultraBrightColor);
        background: var(--brandColor);
    }

    & h4 {
        padding: var(--smallerGap) var(--mediumGap);
        font-size: 1.1rem;
        font-weight: normal;
        color: var(--ultraBrightColor);
        background: linear-gradient(var(--darkerNeutralColor), var(--darkestNeutralColor));
    }

    & .imageDetailsBox {
        padding: var(--mediumGap);
        display: flex;
        align-items: flex-start;
        gap: var(--largestGap);
        background: var(--ultraBrightColor);
        border-bottom-left-radius: calc(var(--borderRadius) - (3px / 2));
        border-bottom-right-radius: calc(var(--borderRadius) - (3px / 2));

        &>img {
            width: 150px;
            height: auto;
            border-radius: var(--borderRadius);
        }

        & .details {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--largestGap);

            & img {
                max-width: 400px;
                height: auto;
            }
        }
    }
}



.postListTitle {
    margin-bottom: var(--mediumGap);
    padding: var(--smallerGap) 0;
    font-size: 1.3rem;
    color: var(--darkerNeutralColor);
    border-bottom: 1px solid var(--darkerNeutralColor);
}

.postItems {
    --postItemsGap: calc(var(--largestGap) * 3);

    display: flex;
    flex-direction: column;
    gap: var(--postItemsGap);
}

.postItem {
    display: flex;
    flex-direction: column;
    gap: var(--smallerGap);
    position: relative;

    &+.postItem:before {
        content: "• • •";
        display: block;
        width: 100%;
        position: absolute;
        margin-top: calc(var(--postItemsGap) * -1);
        line-height: var(--postItemsGap);
        text-align: center;
    }
}

.postItemBannerLink {
    display: block;
    background-color: var(--shadowColor);
    background-size: 60px 60px;
    border-radius: var(--borderRadius);
    overflow: hidden;
}

.postItemBanner {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    max-height: 300px;
}

.postImage {
    grid-column: 1/4;
    display: block;
    background-color: var(--shadowColor);
    background-size: 60px 60px;

    &:first-child {
        margin-top: calc(var(--mediumGap) * -1);
    }

    & img {
        display: block;
        margin: 0 auto;
    }
}

.postMeta {
    padding: var(--mediumGap);
    background: var(--tableZebra);
    border-radius: var(--borderRadius);
}


.archiveItem {
    border: 2px solid var(--brandColor);
    border-radius: var(--borderRadius);

    & .archiveItemTitle {
        padding: var(--smallestGap) var(--mediumGap);
        line-height: 1.2;
        font-size: 2rem;
        font-weight: 300;
        border-top-left-radius: calc(var(--borderRadius) - 4px);
        border-top-right-radius: calc(var(--borderRadius) - 4px);
        background: var(--brandColor);

        & a {
            color: var(--ultraBrightColor);
        }
    }

    & .archiveItemSubtitle {
        padding: var(--smallestGap) var(--mediumGap);
        line-height: 1.2;
        font-size: 1.6rem;
        font-weight: 300;

        color: var(--ultraBrightColor);

        background: linear-gradient(var(--darkerNeutralColor), var(--darkestNeutralColor));
    }

    & .archiveItemSubtitle2 {
        padding: var(--smallestGap) var(--mediumGap);
        line-height: 1.2;
        font-size: 1.4rem;
        font-weight: 300;
        font-style: italic;

        background: linear-gradient(var(--lightestNeutralColor), var(--lighterNeutralColor));
    }
}

.imageSideBox {
    display: flex;
    align-items: flex-start;
    gap: var(--largestGap);

    &.imageSideBoxPadding {
        padding: var(--largestGap);
    }

    &>img {
        width: 150px;
        min-width: 150px;
        height: auto;
        border-radius: var(--borderRadius);
    }
}



.largeLogoSvg {
    display: block;
    max-width: 400px;
    margin: 0 auto;
}



.homepageSplit {
    display: flex;
    flex-wrap: wrap;
    gap: var(--largestGap);

    &>* {
        flex: 1;
        flex-basis: 260px;
    }
}



.prevNextLinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--largestGap);

    &>a:last-child {
        margin-left: auto;
    }
}



.selectableText {
    display: block;
    font-size: inherit;
    width: 100%;
    line-height: 1.3em;
    padding: var(--mediumGap);
    background: var(--lightestNeutralColor);
    border: 1px solid var(--darkerNeutralColor);
    border-radius: var(--borderRadius);
}



/* Utilities */
.grayText {
    color: var(--darkerNeutralColor);
}

.whiteLinks a {
    color: var(--ultraBrightColor);
}



/* Mobile Layout */
@media screen and (width <=800px) {
    .page {}

    .shell {
        flex: 1;

        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: min-content min-content auto min-content;
        grid-template-areas:
            "h"
            "n"
            "m"
            "f";
    }

    .header {
        row-gap: var(--smallestGap);
        align-items: center;

        & .logo {
            display: block;
            max-width: 90px;
        }

        & .title {
            font-size: 2rem;
        }

        & .tagline {
            font-size: 0.86rem;
        }
    }

    .nav {
        & .logo {
            display: none;
        }

        & .toggleCheckbox {
            display: block;
            width: 0;
            height: 0;
            visibility: none;
        }

        & .toggleCheckbox:not(:checked)+.toggleLabel+.navBar {
            display: none;
        }

        & .toggleLabel {
            display: block;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: var(--mediumGap);

            background: linear-gradient(var(--menuButtonTopColor), var(--menuButtonBottomColor));
        }

        & .toggleCheckbox {

            &:hover,
            &:focus {
                &+.toggleLabel {
                    background: linear-gradient(var(--linkColor), var(--menuButtonBottomColor));
                }
            }
        }

        & .toggleCheckbox:checked+.toggleLabel {
            background: var(--menuButtonBottomColor);
        }

        & .menuIcon {
            display: inline-block;
            width: 1em;
            height: 1em;
            /* filter: drop-shadow(var(--textShadow)); */
            stroke: var(--ultraBrightColor);
        }

        & :where(.link) {
            padding: var(--smallerGap) var(--mediumGap);
            font-size: 1.3rem;
        }
    }

    .footer {
        padding: var(--mediumGap);
    }
}

@media screen and (width <=400px) {
    .header {
        gap: var(--smallestGap);

        & .logo {
            display: block;
            max-width: 60px;
        }

        & .title {
            font-size: 1.2rem;
        }

        & .tagline {
            font-size: 0.5rem;
        }
    }
}