/* Layout and typography modelled on the Twenty Ten theme with the
   700px width from the old "Unionen" child theme. */

:root {
    --text: #333;
    --muted: #888;
    --link: #0066cc;
    --link-visited: #743399;
    --link-hover: #ff4b33;
    --nav-bg: #000;
    --nav-text: #aaa;
    --nav-hover-bg: #333;
    --border: #e7e7e7;
    --page-bg: #f1f1f1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font: 16px/1.6 Georgia, "Bitstream Charter", serif;
}

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

#wrapper {
    max-width: 700px;
    margin: 20px auto;
    padding: 0 20px;
    background: #fff;
}

/* Header */
#branding { padding-top: 30px; }
#site-title {
    margin: 0 0 18px;
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
}
#site-title a { color: #000; text-decoration: none; }
#branding img {
    display: block;
    width: 100%;
    height: auto;
    border-top: 4px solid #000;
}

/* Main menu */
#access { background: var(--nav-bg); font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
#access ul { list-style: none; margin: 0; padding: 0; }
#access > .menu { display: flex; flex-wrap: wrap; }
#access li { position: relative; }
#access a {
    display: block;
    padding: 0 10px;
    line-height: 38px;
    color: var(--nav-text);
    text-decoration: none;
    font-size: 14px;
}
#access li:hover > a, #access li:focus-within > a, #access .current > a {
    background: var(--nav-hover-bg);
    color: #fff;
}
#access ul ul {
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 10;
    width: 200px;
    background: var(--nav-hover-bg);
    box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
}
#access ul ul a { line-height: 1.4; padding: 10px; }
#access ul ul a:hover { background: #444; }
#access li:hover > ul, #access li:focus-within > ul { display: block; }

/* Content + sidebar */
#main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 30px;
    padding: 30px 0;
}
#content { min-width: 0; }
#sidebar { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 14px; }
#sidebar .widget { margin-bottom: 20px; }
#sidebar input[type="search"] { width: 150px; }

h1, h2, h3, h4 { color: #000; line-height: 1.4; }
.entry-title, .page-title { font-size: 21px; margin: 0 0 10px; }
.entry-title a { color: #000; text-decoration: none; }
.entry-title a:hover { color: var(--link-hover); }
.entry-content h2 { font-size: 18px; }
.entry-content h3 { font-size: 16px; }
.entry-meta { color: var(--muted); font-size: 12px; font-family: "Helvetica Neue", Arial, sans-serif; margin-bottom: 12px; }
.post { margin-bottom: 40px; }
.more, .pagination { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px; }
.pagination { display: flex; justify-content: space-between; }

/* Images */
figure { margin: 0 0 20px; }
figcaption { color: var(--muted); font-size: 12px; text-align: center; }
figure img { display: block; max-width: 100%; height: auto; }
.alignleft { float: left; margin-right: 20px; }
.alignright { float: right; margin-left: 20px; }
.aligncenter img { margin: 0 auto; }
.alignfull img { width: 100%; }
.entry-content::after { content: ""; display: block; clear: both; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.gallery-item img { border: 2px solid #cfcfcf; }

.search-results { list-style: none; padding: 0; }

#colophon {
    border-top: 4px solid #000;
    padding: 18px 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
}
#colophon a { color: #000; text-decoration: none; }

.screen-reader-text { position: absolute; left: -9999px; }

@media (max-width: 640px) {
    #wrapper { margin: 0; padding: 0 16px; }
    #main { grid-template-columns: 1fr; }
    .alignleft, .alignright { float: none; margin: 0 0 20px; }
    #access ul ul { position: static; width: auto; box-shadow: none; }
    #access ul ul a { padding-left: 24px; }
}