/* Global stuff */
:root {
    --font-color: rgb(0, 0, 0, 0.8);
    --link-color: #757575;
    --visited-color: #999999;
    --highlight-color: #0074d9;
    --hr-border: 1px solid #e6e6e6;
    --row-padding: 30px;
}

/* Layout */
hr {
    border: var(--hr-border);
    margin: var(--row-padding) 0;
}

body {
    font-size: 1rem;
    line-height: 1.54;
    color: var(--font-color);
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl", "calt";
    font-variant-ligatures: contextual;
    -webkit-text-size-adjust: 100%;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    word-break: break-word; /* for Chrome */
}

/* Links */
a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover {
    text-decoration: underline;
}

/* Container */
.container {
    max-width: calc(720px + 2rem);
    margin: auto;
    display: grid;
    grid-template-areas:
        "banner menu"
        "tags tags"
        "main main"
        "footer footer";
}

.container > div {
    max-width: 720px;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Top part of page */
.banner {
    grid-area: banner;
    font-size: 1.3rem;
    padding-top: var(--row-padding);
    padding-bottom: var(--row-padding);
    color: var(--font-color);
}

.banner a:hover {
    text-decoration: none;
}

.p-emoji {
    font-size: 1.75rem;
}

.site {
    color: var(--font-color);
}

.handle {
    font-size: 1.1rem;
    color: var(--visited-color);
}

.menu {
    grid-area: menu;
    padding-top: var(--row-padding);
    padding-bottom: var(--row-padding);
    align-content: center;
}

.menu-toggle {
    grid-area: menu;
    display: none;
}

.menu-toggle::after {
    /* shown after hamburger icon in middle responsive breakpoint */
    content: " MENU";
}

.menu ul {
    list-style-type: none;
    text-align: right;
    margin: 0;
}

.menu li {
    display: inline-block;
    margin-left: 1.5rem;
}

.menu a {
    font-size: 1rem;
}

.tags {
    grid-area: tags;
    border-top: var(--hr-border);
    padding-top: var(--row-padding);
    padding-bottom: var(--row-padding);
    text-align: justify;
    text-align-last: center;
}

a.tag {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
}

a.tag:hover {
    color: var(--highlight-color);
}

/* Main body of page */
.content {
    grid-area: main;
    border-top: var(--hr-border);
    padding-top: var(--row-padding);
}

h1 {
    font-weight: 400;
    font-size: 1.5rem;
}

h2 {
    font-weight: 400;
}

/* ensure code blocks (but not inline) are scrollable */
pre {
    overflow-x: auto;
}

pre code {
    display: block;
    max-width: 0;
}

/* Bottom of page */
.footer {
    grid-area: footer;
    border-top: var(--hr-border);
    text-align: center;
    font-size: 0.85rem;
}

/* Post */
.post-header {
    display: flex;
    align-items: center;
}

.avatar {
    width: 50px;
    height: 50px;
    margin-right: 16px;
}

.post-author-handle {
    font-size: 0.85em;
    line-height: 1em;
    color: var(--link-color);
}

.post-meta {
    flex-grow: 1;
}

.post-title {
    font-size: 24px;
    margin: 0;
    padding-top: 8px;
    color: var(--font-color);
}

.post-meta-details {
    display: flex;
    align-items: center;
}

.post-meta-details span {
    margin-right: 16px;
    font-size: 0.85em;
    color: var(--link-color);
}

.post-tags a {
    padding: 0;
    margin-right: 4px;
}

.post-content p {
    margin-bottom: 16px;
}

.post-content a {
    color: var(--highlight-color);
}

.post-content a:hover {
    color: var(--link-color);
}

.post-content img {
    max-width:100%;
}

.read-more, .permalink, .comments, .likes {
    display: inline-block;
    margin-top: 8px;
    text-decoration: none;
    font-size: 0.875rem;
}

.read-more:hover, .permalink:hover, .comments:hover, .likes:hover {
    text-decoration: underline;
}

.actor-box .actor-handle {
    font-size: 0.85em;
    line-height: 1em;
    color: var(--link-color);
}

/* Responsive bits */

/* full screen:
 - tags and menu items visible
 - menu button hidden
*/
@media (min-width: 920px) {
    .menu-toggle {
        display: none;
    }    

    .menu, .tags {
        /* important to override inline tags added toggle menu button */
        display: block !important;
    }
}

/* landscape phone, or medium width:
 - top menu items visible and menu button
 - menu button shows tags
*/
@media (max-width: 919px) {
    .container {
        grid-template-areas:
            "banner"
            "menu"
            "tags"
            "main"
            "footer";
    }

    .menu-toggle {
        display: inline;
        float: right;
        text-align: center;
        padding: 10px;
        cursor: pointer;
        visibility: visible;
    }

    .menu, .tags {
        display: none;
        border-top: var(--hr-border);
    }

    a.tag {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* portrait phone, or minimum width:
 - menu button visible only
 - clicking it shows tags & menu items
*/
@media (max-width: 550px) {

    .menu-toggle::after {
        content: none;
    }
}