/* =========================
   Site navigation component
   ========================= */

.site-nav.mobile {
    position: relative;
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: space-between;

    background: var(--primary-color);
    color: #fff;

    /* Logo */
    .site-logo {
        margin: 0;

        a {
            color: #fff;
            text-decoration: none;
        }
    }

    /* =========================
     Navigation menu
     ========================= */

    nav {
        .nav-menu {
            position: relative;

            /* Toggle button (☰) */
            .nav-toggle {
                cursor: pointer;
                font-size: 1.8rem;
                padding: 0;
                user-select: none;
                list-style: none;
                color: #fff;

                &::-webkit-details-marker {
                    display: none;
                }
            }

            /* =========================
         Menu panel (overlay)
         ========================= */

            .nav-links {
                position: absolute;
                top: 100%;
                right: 0;

                margin: 0;
                padding: 0.5rem 0;
                list-style: none;

                background: var(--primary-color);
                border: 1px solid rgba(255, 255, 255, 0.2);
                min-width: 200px;
                z-index: 1000;

                li {
                    a {
                        display: block;
                        padding: 0.5rem 1rem;
                        color: #fff;
                        text-decoration: none;

                        &:hover {
                            background: rgba(255, 255, 255, 0.1);
                        }
                    }
                }
            }

            /* Hide when closed */
            &:not([open]) {
                .nav-links {
                    display: none;
                }
            }
        }
    }
}

.site-nav.desktop {
    display: none;
    flex-direction: row;
    padding: 8px;
    align-items: center;
    justify-content: space-between;

    background: var(--primary-color);
    color: #fff;

    /* Logo */
    .site-logo {
        margin: 0;

        a {
            color: #fff;
            text-decoration: none;
        }
    }

    a {
        font-size: 1.2em;
        font-weight: bold;
        padding: 8px 8px;
        color: #fff;
        text-decoration: none;

        &:hover {
            background: rgba(255, 255, 255, 0.1);
        }
    }

}

@media (min-width: 810px) {
    .site-nav.desktop {
        display: flex;
    }

    .site-nav.mobile {
        display: none;
    }
}


/* =========================
   Article component
   ========================= */
.article {
    color: var(--text-muted);
    padding: 0 1rem;
    margin: 24px 0;
    width: min(100vw, 800px);
    max-width: min(100vw, 800px);

    & * {
        max-width: 100%;
    }

    & h1 {
        font-size: 2em;
    }

    & h1,
    h2 {
        margin: min(1.5rem, 24px) 0;
        color: var(--heading-color);
        font-weight: 400;
    }

    & h3,
    h4 {
        margin: min(1rem, 24px) 0;
        color: var(--heading-color);
        font-weight: 400;
    }

    & p {
        line-height: 1.6;
        margin: 0.5rem 0;
    }

    & ul {
        margin-left: 1rem;
    }

    & ol {
        margin-left: 1rem;
    }

    & table,
    th,
    td {
        border-collapse: collapse;
        padding: 8px;
        border: 1px solid;
    }

    & blockquote {
        border-left: 4px solid light-dark(#ccc, #908f8f); /* vertical line */
        padding-left: 1em;
        padding-top: 8px;
        padding-bottom: 8px;
        margin: 1em 0;
        font-style: italic;
        background-color: var(--contrast-bg);
    }

    & .breadcrumbs {
        & a {
            margin-right: 16px;
        }
    }

    /* Accessibility */
    & ol li a {
        display: inline-block;
        margin: 8px 0;
    }

    & ul li a {
        display: inline-block;
        margin: 8px 0;
    }

    details {
        margin: 8px 0;
    }
    
    table {
        margin: 24px 0;
    }
}


/* =========================
   Mindmap component
   ========================= */
.article-list {
    margin: 24px 0;
    padding: 16px;

    & h2 {
        color: var(--primary-color);
        font-weight: 400;
    }
    & a {
        color: var(--link);
    }
    & link-preview {
        color: var(--link);
    }
    & ul li {
        list-style: none;
        margin: 16px 0;
    }
}


/* =========================
   Mindmap component
   ========================= */
.mindmap {
    flex: 1;
    /* iframe fills remaining space in main*/
    display: flex;
    background-color: var(--neutral-bg);

    & .mindmap-frame {
        flex: 1;
        border: none;
        width: 100%;
        height: 100%;
    }
}


/* =========================
   Button component
   ========================= */
.button {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-weight: bold;
    background-color: var(--button);
    padding: 0.3em;
    margin: 8px;
    border-radius: 5px;
    text-shadow: 0.5px 0 var(--shadow);
}

/* =========================
   Searchbox component
   ========================= */
.search-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.search-container input {
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    border: none;
}

.search-container button {
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    border: none;
    background-color: white;
    color: cadetblue;
    cursor: pointer;
}

.icon-external-link {
    background-image: url(https://en.wikipedia.org/w/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg?fb64d);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1em;
}