/*
Theme Name:   MyOneColumn-writing-template
Theme URI:    http://writing.alejandronunez.com
Description:  My One Column Writing Child theme
Author:       Ale Núñez
Author URI:   http://www.alejandronunez.com
Template:     blankslate
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, one-column, responsive-layout, accessibility-ready
Text Domain:  Short Stories Writing page
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

body {
    font-family: 'Source Serif Pro', serif;
}

h1, h2, h3, h4, h5, h6 {
    /* font-family: 'Kanit', sans-serif; */
    font-family: 'Source Serif Pro', serif;
    text-transform: lowercase;
}

/*
------------------
----- STYLES -----
------------------
*/

body {
    --main-bgcolor: #fcf8f6;
    --main-textcolor: #363430;
    --main-accentcolor: #DB7B66;
}

body {
    background-color: var(--main-bgcolor);
    color: var(--main-textcolor);
    font-size: 16px;
    line-height: 1.6em;
}

h1 {
    color: #363430ef;
    font-size: 2.8em;
    font-weight: 800;
}

a {
    color: inherit;
    text-decoration: none;
}


/* Basic Layout */

#wrapper {
    max-width: 380px;
    width: 90%;
    margin: 24px auto;
}
    .single #wrapper { max-width: 480px; }

    #header {
        margin: 48px 0 72px;
        padding-bottom: 56px;
        border-bottom: 1px solid var(--main-accentcolor);
        position: relative;
    }

        #header h1 {
            color: var(--main-textcolor);
            font-size: 5.8em;
            line-height: 0.9em;
            font-weight: 400;
        }

        #header #site-description {
            font-size: 1.2em;
            line-height: 1.2em;
            letter-spacing: 0.1em;
            color: var(--main-accentcolor);
        }

            .single #header {
                border-bottom: none;
                padding-bottom: 0;
                margin: 0;
            }
                .single #header:after {
                    content: none;
                }

                .single #header #site-title {
                    font-size: 1.4em;
                    line-height: 1em;
                    color: var(--main-accentcolor);
                    text-transform: lowercase;
                }

                .single #header #site-description {
                    display: none;
                }

        #header:after {
            content: " ";
            position: absolute;
            z-index: -1;
            left: 0;
            right: 0;
            bottom: 16px;
            border-bottom: 1px solid var(--main-accentcolor);
        } 

    .entry_wrapper {
        position: relative;
    }

    .entry_index {
        position: absolute;
        top: -16px;
        right: 97%;
        font-size: 9.2em;
        font-weight: 800;
        line-height: 1em;
        font-family: 'Kanit', sans-serif;
        text-align: right;
        color: #db7b621c;
        letter-spacing: -0.12em;
    }

    .entry-meta {
        position: absolute;
        bottom: 24px;
        opacity: 0.3;
        font-family: arial;
        font-size: 0.8em;
        color: var(--main-textcolor);
    }

    article {
        position:relative;
        margin: 36px 0;
        padding-bottom: 80px;
        border-bottom: 1px solid var(--main-textcolor);
    }

        article::after {
            content: " ";
            position: absolute;
            z-index: -1;
            left: 0;
            right: 0;
            bottom: 16px;
            border-bottom: 1px solid var(--main-textcolor);
        }

        article header {
            margin-bottom: 2em;
        }

            article header h1, 
            article header h2 {
                font-size: 4.2em;
                font-weight: 200;
                line-height: 0.84em;
                font-family: 'Source Serif Pro', serif;
                text-transform: lowercase;
                letter-spacing: -0.02em;
            }

                .single article header h1,
                .single article header h2 {
                    font-weight: 800;
                }

        article p {
            font-size: 1.3em;
            line-height: 1.6em;
            color: #363430cf;
            margin-bottom: 1.2em;
        }

        article a.plus_link {
            font-family: 'Kanit', sans-serif;
            font-weight: 200;
            font-size: 2em;
            position: absolute;
            right: 0;
            bottom: 36px;
            color: var(--main-accentcolor);
        
        }
            .single article a.plus_link {
                display: none;
            }

        .single article header {
            margin-bottom: 3.6em;
            margin-top: 1em;
        }

        a.more-link {
            font-weight: 800;
            color: var(--main-accentcolor);
            margin: 0.2em;
        }


        footer .link_back {
            color: var(--main-accentcolor);
            font-size: 1.2em;
        }


    /* Post content size */

    .post-size {
        display: block;
        height: 12px;
        min-width: 16px;
        background-image: url(./src/post-size-bg.png);
        background-repeat: repeat-x;

    }
        .post-size-xs { width: 16px; }
        .post-size-s { width: 32px; }
        .post-size-m { width: 48px; }
        .post-size-ml { width: 64px; }
        .post-size-l { width: 80px; }
        .post-size-xl { width: 96px; }

    /* Dark Mode */
    #darkmode_button {
        display:block;
        width: 24px;
        position: absolute;
        right: 0;
        opacity:0.7;
        fill: var(--main-accentcolor);
        cursor: pointer;
    }

    .dark-mode #darkmode_button {
        fill: #d4d4d48c;
    }

    body {
        transition: background-color 0.24s, color 0.24s;
    }
        body.dark-mode {
            background-color: var(--main-textcolor);
            color: var(--main-bgcolor);
        }

        .article p,
        .entry-meta,
        #header h1
        h1 {
            transition: color 0.24s;
        }

        .dark-mode article p,
        .dark-mode .entry-meta {
            color: #d4d4d4cf;
        }

        .dark-mode #header h1, 
        .dark-mode h1 {
            color: #d4d4d4ef;
        }

        .dark-mode article {
            border-bottom-color: #d4d4d48c;
        }
            .dark-mode article:after {
                border-bottom-color: #d4d4d48c;
            }


@media only screen and (max-width: 600px) {
    .entry_index { right: 85%; top: 10px; }
}