/*
 * PHP Markdown Documentation Viewer
 *
 * Shared styling for:
 * - Markdown-rendered documentation pages
 * - Generated directory index pages
 *
 * This file intentionally lives outside /files/
 * so the documentation directory can later be moved
 * directly into Git without web application files.
 */


/* --------------------------------------------------
   Theme variables
   -------------------------------------------------- */

:root {

    --background: #ffffff;
    --foreground: #222222;

    --muted: #555555;

    --border: #cccccc;

    --link: #0066cc;
    --link-hover: #004999;

    --code-background: #f4f4f4;

    --table-header: #f4f4f4;

    --blockquote-border: #cccccc;

    --directory-hover: #f8f8f8;
}



@media (prefers-color-scheme: dark) {

    :root {

        --background: #0d1117;
        --foreground: #c9d1d9;

        --muted: #8b949e;

        --border: #30363d;

        --link: #58a6ff;
        --link-hover: #79c0ff;

        --code-background: #161b22;

        --table-header: #161b22;

        --blockquote-border: #444c56;

        --directory-hover: #161b22;
    }

}



/* --------------------------------------------------
   Base layout
   -------------------------------------------------- */

body {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;


    max-width: 1000px;

    margin:
        30px auto;


    padding:
        0 20px;


    line-height:
        1.6;


    color:
        var(--foreground);


    background:
        var(--background);
}



/* --------------------------------------------------
   Links
   -------------------------------------------------- */

a {

    color:
        var(--link);


    text-decoration:
        none;
}


a:hover {

    color:
        var(--link-hover);


    text-decoration:
        underline;
}



/* --------------------------------------------------
   Headings
   -------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin-top:
        1.5em;


    line-height:
        1.3;
}


h1 {

    font-size:
        2.2rem;


    border-bottom:
        1px solid var(--border);


    padding-bottom:
        .3em;
}


h2 {

    border-bottom:
        1px solid var(--border);


    padding-bottom:
        .2em;
}



/* --------------------------------------------------
   Markdown content
   -------------------------------------------------- */

main {

    width:
        100%;
}


p {

    margin:
        1em 0;
}



/* --------------------------------------------------
   Code blocks
   -------------------------------------------------- */

pre {

    background:
        var(--code-background);


    border:
        1px solid var(--border);


    border-radius:
        6px;


    padding:
        15px;


    overflow-x:
        auto;


    line-height:
        1.45;
}


code {

    font-family:
        Consolas,
        Monaco,
        "Courier New",
        monospace;
}


:not(pre) > code {

    background:
        var(--code-background);


    border:
        1px solid var(--border);


    border-radius:
        4px;


    padding:
        2px 5px;
}



/* --------------------------------------------------
   Tables
   -------------------------------------------------- */

table {

    border-collapse:
        collapse;


    width:
        100%;


    margin:
        20px 0;
}


th,
td {

    border:
        1px solid var(--border);


    padding:
        8px;


    text-align:
        left;
}


th {

    background:
        var(--table-header);


    font-weight:
        600;
}



/* --------------------------------------------------
   Block quotes
   -------------------------------------------------- */

blockquote {

    border-left:
        4px solid var(--blockquote-border);


    margin-left:
        0;


    padding-left:
        15px;


    color:
        var(--muted);
}



/* --------------------------------------------------
   Lists
   -------------------------------------------------- */

li {

    margin:
        6px 0;
}



/* --------------------------------------------------
   Directory listing pages
   -------------------------------------------------- */

.directory-list {

    list-style-type:
        none;


    padding-left:
        0;
}


.directory-list li {

    margin:
        8px 0;


    padding:
        6px;


    border-bottom:
        1px solid var(--border);
}


.directory-list li:hover {

    background:
        var(--directory-hover);
}


.directory-icon {

    display:
        inline-block;


    width:
        25px;
}



/* --------------------------------------------------
   Navigation
   -------------------------------------------------- */

nav {

    margin-bottom:
        20px;


    padding-bottom:
        10px;


    border-bottom:
        1px solid var(--border);
}



/* --------------------------------------------------
   Images
   -------------------------------------------------- */

img {

    max-width:
        100%;


    height:
        auto;
}



/* --------------------------------------------------
   Mobile adjustments
   -------------------------------------------------- */

@media (max-width: 700px) {

    body {

        margin:
            15px auto;


        padding:
            0 10px;
    }


    h1 {

        font-size:
            1.8rem;
    }


    table {

        display:
            block;


        overflow-x:
            auto;
    }

}

/* --------------------------------------------------
   Breadcrumb navigation
   -------------------------------------------------- */

.breadcrumbs {

    font-size:
        .9rem;

    margin-bottom:
        1.5rem;

    padding-bottom:
        .75rem;

    border-bottom:
        1px solid var(--border);
}


.breadcrumb-current {

    color:
        var(--muted);

}


.breadcrumb-separator {

    color:
        var(--muted);

    padding:
        0 .25rem;
}