/* This file is for your main application css. */

/* general styles */
@import "./phoenix.css";

/* General style */
:root {
    --highlight-color: var(--bookmark-color, steelblue);
    --fab-bg: var(--bookmark-color, steelblue);
    --footer-height: 50px;
}

::selection {
    background-color: var(--blue-4, #0f0f5d);
    color: white;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
}

*, *:before, *:after {
    box-sizing: border-box;
}

html {
    /*
    font-family: "Lucida Grande", "Helvetica", "Arial", sans-serif;
    */
    font-size: 100%;
    line-height: 1.2;
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Iowan Old Style', 'Apple Garamond', Baskerville, 'Times New Roman', 'Droid Serif', Times, 'Source Serif Pro', serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

blockquote {
    border-left: 0.3rem solid currentColor;
    color: #bbc1ec;
    margin-left: 0;
    margin-right: 0;
    padding: 1rem 1.5rem;
}

blockquote *:last-child {
    margin-bottom: 0;
}

code {
    background: #373737;
    color: #f4f5f6;
    border-radius: .4rem;
    font-size: 86%;
    margin: 0.2rem;
    padding: .2rem .5rem;
    white-space: nowrap;
}

pre {
    background: #373737;
    border-left: 0.3rem solid #0069d9;
    overflow-y: hidden;
    padding: 0.5rem;
}

pre a > code {
    border-radius: 0;
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
}

hr {
    border: 0;
    border-top: 0.1rem solid #f4f5f6;
    margin: 3.0rem 0;
}

a {
    color: #B0B7D9;
}

a:hover {
    color: #00C9FF;
}

.app {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 0 var(--footer-height);
}

.app__container {
    display: flex;
    flex-flow: column;
    flex: 1 0 auto;
    margin: 0 auto;
    max-width: 80rem;
    padding: 1rem 1rem calc(3rem + var(--footer-height));
    position: relative;
    width: 100%
}

.app__container--wider {
    max-width: 90rem;
}

/* headers styles */
.app__header {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;

    width: 100%;
    height: min-content;
    background: var(--nc-bg-2);
    box-shadow: 6px 2px 6px 2px rgba(0, 0, 0, .2);
}

.main-header {
    padding: 2rem calc(2rem + 50vw - 50%);

    h1 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }

    .main-nav {
        font-size: 1.1rem;
    }
}

.app__header img {
    width: 150px;
    padding: 0.5rem;
}

.app__navlist, .app__navlist li {
    margin: 0.5rem;
    padding: 0;
    display: block;
    text-align: right;
    white-space: nowrap;
}

.app__navlink {
    display: block;
    padding: 0.5rem;
}

.main-footer {
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--footer-height);
    background: var(--main-footer-color, steelblue);
    color: var(--nc-tx-1);
    font-size: 22px;
    border: none;
    transition: transform 300ms ease-in;
}

.main-footer__btn {
    margin: 0;
    height: 100%;
    width: 55px;
    background: transparent;
    color: white;
    border: none;
    border-radius: .4rem;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}

.main-footer__btn--pill {
    background: var(--orange);
    color: white;
    border-radius: 120px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
    padding: 10px 20px;
    margin: 4px 2px;
    height: 40px;
    width: 100px;
    position: absolute;
    bottom: 18px;
    left: calc(50% - 50px);
}

.main-footer__btn:hover {
    background: #00C9FF;
    color: white;
    border: none;
}

/* list styles */

dl, ol, ul {
    list-style: none;
    margin-top: 0;
    padding-left: 0
}

dl dl, dl ol, dl ul, ol dl, ol ol, ol ul, ul dl, ul ol, ul ul {
    font-size: 90%;
    margin: 1.5rem 0 1.5rem 2.0rem
}

ol {
    list-style: decimal inside
}

ul {
    list-style: circle inside
}

/** Main styles */
.pager {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;

    a, span {
        flex-grow: 1;
        margin: 0;
    }

     > :not(:first-child):not(:last-child) {
        text-align: center;
     }

     > :last-child {
        text-align: end;
     }
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(35ch, 1fr));
    grid-auto-rows: minmax(min-content, 25vh);
    grid-gap: 1rem;
    gap: 1rem;
}

.grid > ul {
    display: contents;
}

.item {
    display: flex;
    flex-flow: column;
    list-style: none;
    margin: 0;
}

.item--is-deleted {
    border-color: gray;

    .item__title {
        text-decoration: 2px line-through gray;
    }

    .item__title {
        border-color: transparent;
        color: gray;

        a {
            color: currentColor;
        }
    }
}

.item--is-archived {
    border-color: transparent;
}

.item__title {
    font-size: 1.6rem;
    text-align: center;

    a {
        text-decoration: none;
    }
}

.item__url {
    font-size: 0.8rem;
    letter-spacing: initial;
    margin-top: 0;

    a {
        text-decoration: none;
    }
}

.item__tags {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-evenly;
    flex: 1 0 auto;
}

.item__footer {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    gap: 1rem;
    border-top: 1px solid var(--highlight-color);
}

.offline-toggle {
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: end;
    gap: 1rem;

    label {
        margin: 0;
        font-size: 1rem;
    }
}

.article {
    line-height: 1.5;
    width: 90vw;
    width: clamp(50%, 90vw, 60rem);
    margin: 0 auto;
    border: none;

    img {
        display: block;
        text-align: center;
        margin: 0 auto;
    }

    p {
        text-indent: 2.5rem;
    }
}

.scroll-container {
    position: absolute;
    top: 1;
    right: 0;
    height: 100vh;
    width: 100vw;
    z-index: -1;
}

#scrolltop {
    position: fixed;
    bottom: calc(2rem + var(--footer-height));
    right: 2rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: all 0.3s ease;
    z-index: 99;
}

.scroll-container--intersecting ~ main #scrolltop,
.scroll-container--intersecting ~ #scrolltop {
    opacity: 0;
    visibility: hidden;
    transform: translateY(4rem);
}

/**
 * Nudge the scrolltop button down a bit
 * when IntersectionObserver is supported since the main-footer will be hidden
 */
.scroll-container--observing ~ main #scrolltop,
.scroll-container--observing ~ #scrolltop {
    bottom: 2rem;
}

/** Hide the footer when IntersectionObserver is supported */
.scroll-container--observing ~ .main-footer {
    transform: translateY(calc(var(--footer-height) * 2));
}

.scroll-container--intersecting ~ .main-footer {
    transform: none;
}

.article__header {
    text-align: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--nc-ac-tx)
}

.article__url {
    font-size: 0.9rem;
    letter-spacing: initial;
}

/* .article p:first-of-type { */
.article > div:first-of-type > p:first-child {
    text-indent: 0;
}

.article > div:first-of-type > p:first-child::first-letter {
    font-size: 3.5rem;
    font-family: Georgia;
    float: left;
    padding: 0.6rem 0.6rem 0.04rem 0.6rem;
    line-height: 1;
    initial-letter: 2;
}

/* h-app styles */
.h-app__nav {
    display: flex;
    justify-content: space-around;
    gap: 1rem;

    a {
        text-align: center;
    }

    .u-logo {
        width: 64px;
        height: 64px;
    }
}

.preview {
    background: var(--blue-6);
    max-width: 40rem;
    margin: 1rem auto;
    padding: 1rem 1.5rem;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 35%);
    border-radius: .4rem;
}

/* utility styles */
.flex-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* microsub styles */
.grid--constrain-heights {
    grid-auto-rows: 30vh;
}

.layout--with-sidebar {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.sidebar {
    flex-basis: 20rem;
    flex-grow: 1;
}

.not-sidebar {
    flex-basis: 0;
    flex-grow: 999;
}

.sidebar__item {
    display: block;
    list-style: none;
    margin: 1rem;
}

.sidebar__link {
    font-size: 14px;
}

.sidebar__link--active {
    font-weight: bold;
    font-size: 1.2em;
}

.entries__list {
    list-style: none;
}

@media (max-width: 450px) {
    .reader, .microsub {
        .app__container {
            padding-inline: 0;
            padding-top: 0;

            .article {
                margin: 0;
                width: 100%;
            }

            .card {
                border-radius: 0.15rem;
            }

            .entries {
                h2 {
                    margin-inline: 1rem;
                }

                p {
                    margin-inline: 1rem;
                }

                .entry__actions {
                    .btn {
                        font-size: 14px;
                    }
                }
            }
        }
    }
}