/* Site styles, on top of foundation.min.css (Foundation 6) */

/* "Garden" palette; contrast is against --page unless noted */
:root {
    --page: #f9f6ee;          /* warm cream */
    --text: #2a2a26;          /* 13.3:1 */
    --muted: #5f5e52;         /* dates, 6.1:1 */
    --green: #2f4f3a;         /* header and headings, 8.5:1 */
    --on-green: #f4eedb;      /* header text, 7.9:1 on --green */
    --link: #1f5f6b;          /* teal, 6.7:1 */
    --link-hover: #154650;    /* 9.6:1 */
    --gold: #c9962e;          /* rules only, never text */
    --code-bg: #efe9da;       /* code, a shade darker than --page */
    --code-border: #ddd4bf;
}

body {
    background: var(--page);
    color: var(--text);
}

a,
a:focus {
    color: var(--link);
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* links inside post text are underlined so they don't rely on colour */
#content p a,
#content li a {
    text-decoration: underline;
}

/* All · Code · General at the top of the archive pages; the current
   one is bold, not a link */
.archive-nav {
    margin-bottom: 1.5rem;
}

.archive-nav a,
.archive-nav strong {
    padding: 0 .25rem;
}

.archive-nav a:first-child,
.archive-nav strong:first-child {
    padding-left: 0;
}

/* ...except lists that are all links, like the archives */
#content .archive-list a {
    text-decoration: none;
}

#content .archive-list a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--green);
}

hr {
    border-bottom: 2px solid var(--gold);
}

/* Foundation's grey quote text (#8a8a8a) is only 3.2:1 on --page */
blockquote,
blockquote p {
    color: var(--text);
}

blockquote {
    border-left: 3px solid var(--gold);
}

.top-bar,
.top-bar ul {
    background-color: var(--green);
}

.top-bar .menu a,
.top-bar .menu a:focus {
    color: var(--on-green);
}

.top-bar .menu a:hover {
    color: #fff;
}

.date,
.post-date {
    color: var(--muted);
}

/* only seen in `dev --drafts`; drafts are never published */
.draft-label {
    background: var(--green);
    color: var(--on-green);
    font-size: .75rem;
    font-style: normal;
    font-weight: bold;
    letter-spacing: .05em;
    padding: .1rem .4rem;
    border-radius: 3px;
    text-transform: uppercase;
}

/* Keep lines short enough to read, about 85 characters.
   Centred, so the side margins grow as the window gets wider */
#content {
    max-width: 48rem;
    padding: 20px;
    margin: 2rem auto 0;
}

/* Header lines up with the #content column. The green bar stays
   full width; Foundation pads each menu link by 1rem, so the inner
   padding is 20px - 1rem, which lines up the link text, not the box */
.top-bar {
    padding: .5rem 0;
}

.top-bar-inner {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 .25rem;
}

/* clear the floated left/right menus */
.top-bar-inner::after {
    content: '';
    display: table;
    clear: both;
}

/* Foundation's headings are huge (h1 is 3rem on wide screens) */
h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4,
h5,
h6 {
    font-size: 1.1rem;
}

#content ul {
    padding-left: 2em;
}

.post-nav .older {
    display: inline-block;
    margin-left: .5em;
    margin-bottom: .5em;
}

.post-nav .newer {
    float: right;
    margin-right: .5em;
    margin-bottom: .5em;
}

/* Home page: recent posts on the left, the graphic on the right.
   The flex box is an inner div because Foundation's .row adds
   ::before/::after clearfix boxes that would become flex items */
.home {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.home-posts {
    flex: 1 1 0;
}

.home-art {
    flex: 0 0 18rem;
    margin: 0;
}

.home-art img {
    width: 100%;
    height: auto;
}

.home-art figcaption {
    color: var(--muted);
    font-size: .875rem;
    text-align: center;
}

#content .recent-posts {
    list-style: none;
    padding-left: 0;
}

.recent-posts li {
    margin-bottom: .75rem;
}

#content .recent-posts a {
    text-decoration: none;
    font-weight: bold;
}

#content .recent-posts a:hover {
    text-decoration: underline;
}

/* the excerpt follows the title on the same line; the date goes below */
.recent-posts .excerpt {
    line-height: 1.5;
}

.recent-posts .date {
    display: block;
    font-size: .875rem;
}

.recent-posts li {
    margin-bottom: 1.25rem;
}

/* on phones, stack them with the graphic first */
@media screen and (max-width: 39.9375em) {
    .home {
        flex-direction: column;
    }

    .home-art {
        order: -1;
        flex-basis: auto;
        width: 100%;
        max-width: 20rem;
        align-self: center;
    }
}

/* YouTube embeds are 770px wide; fit them to the column, keeping 16:9 */
#content iframe[src*="youtube.com"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

#content iframe {
    max-width: 100%;
}

/* Code. Foundation styles every <code> as an inline chip, which inside
   a <pre> puts a chip around each line; make the <pre> the box instead.
   A long code line scrolls inside its block, not the whole page */
code {
    background-color: var(--code-bg);
    border-color: var(--code-border);
}

#content pre {
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    line-height: 1.5;
    overflow-x: auto;
}

#content pre code {
    background: none;
    border: 0;
    padding: 0;
}

/* on phones, a table wider than the column scrolls inside itself */
@media screen and (max-width: 39.9375em) {
    #content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* long URLs and inline code break rather than run off a phone screen */
#content p,
#content li,
#content td {
    overflow-wrap: anywhere;
}

/* WordPress images with captions: <figure class="wp-caption thumbnail
   alignleft">. Foundation's .thumbnail has line-height 0, which is
   fine for a bare image but stacks caption lines on top of each other */
.thumbnail {
    line-height: normal;
}

.thumbnail p,
.wp-caption p {
    margin: 0;
}

.wp-caption-text {
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.4;
    padding: .4rem .25rem .2rem;
}

/* a heading starts below left-floated images, not squeezed beside them
   (not `both`: that would push headings below the tall right-floated
   .vertical-banner) */
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    clear: left;
}

.alignleft {
    float: left;
    margin: .25rem 1.5rem 1rem 0;
}

.alignright {
    float: right;
    margin: .25rem 0 1rem 1.5rem;
}

.aligncenter {
    display: block;
    margin: 1rem auto;
}

/* on phones, floated images leave too little room for text */
@media screen and (max-width: 39.9375em) {
    .alignleft,
    .alignright {
        float: none;
        display: block;
        margin: 1rem auto;
    }
}

.vertical-banner {
    float: right;
    padding-left: 20px;
}

/* Comments and "Linked from" (pingbacks), after the post nav */
.comments,
.linked-from {
    clear: both;
    margin-top: 2rem;
}

.comment {
    border-top: 1px solid var(--code-border);
    padding-top: .75rem;
    margin-bottom: 1rem;
}

.comment-meta {
    margin-bottom: .5rem;
}

.comment-meta .date {
    color: var(--muted);
    font-size: .875rem;
    margin-left: .5rem;
}

/* a reply sits under the comment it answers */
.comment .replies {
    margin-left: 1.5rem;
    border-left: 3px solid var(--gold);
    padding-left: 1rem;
}

.comment .replies .comment:first-child {
    border-top: 0;
}

#content .linked-from ul {
    list-style: none;
    padding-left: 0;
}

#content .linked-from li {
    margin-bottom: .5rem;
}

#content .linked-from a {
    text-decoration: none;
}

#content .linked-from a:hover {
    text-decoration: underline;
}

.linked-from .date {
    font-size: .875rem;
}