/* site.css — the "original" Twenty Fourteen look, locked. Reconstructed 2026-10-09. */

:root {
    --bg: #fff;
    --text: #40403f;
    --text-sub: #81807d;
    --link: #1e73be;
    --accent: #1e73be;
    --header-sub: #b3b3b1;    /* rail subtitle + widget titles */
    --nav-bg: #000;
    --nav-fg: #fff;
    --nav-hover-bg: #2b2b2b;
    --nav-hover-fg: #fff;
    /* code blocks: Zola's highlighting theme (github-light) bakes white bg +
       token colors into inline styles, so pre keeps a light background in
       every theme by Zola's own doing; vars only cover inline <code> */
    --code-bg: #fff;
    --code-border: #0e0;
    --code-frame: #d9d9d9;
    --code-fg: #2b2b2b;
    --card-border: #e5e5e3;
}

[hidden] {
    display: none !important;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    overflow-wrap: anywhere;
}

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

a:hover {
    text-decoration: underline;
}

img, iframe, video {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Shell grid: one black band across the top (header + nav),
   black rail (sidebar) below the header, white content right.
   ============================================================ */

#page {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "header navarea"
        "sidebar main";
    min-height: 100vh;
}

#site-header {
    grid-area: header;
    min-width: 0;
    background: var(--nav-bg);
    color: var(--nav-fg);
    text-align: center;
    padding: 24px 16px 12px;
}

#site-header .header-image,
#site-header .header-image-link img {
    width: 130px;
    height: auto;
    display: inline-block;
}

#site-header .site-title {
    display: block;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    margin: 6px 0 0;
}

#site-header .site-title a {
    color: var(--nav-fg);
}

#site-header .site-description {
    display: block;
    font-size: 13px;
    color: var(--header-sub);
    margin: 2px 0 0;
}

#nav-area {
    grid-area: navarea;
    min-width: 0;
    background: var(--nav-bg);
    display: flex;
    align-items: flex-end;
}

#sidebar {
    grid-area: sidebar;
    min-width: 0;
    background: var(--nav-bg);
    color: var(--nav-fg);
    padding: 0 20px 40px;
}

#main {
    grid-area: main;
    min-width: 0;
    padding: 30px 30px 60px;
}

#content {
    max-width: 860px;
    margin: 0 auto;
}

/* ============================================================
   Navigation
   ============================================================ */

.site-navigation {
    display: flex;
    align-items: center;
    width: 100%;
}

.site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    margin-left: auto;
}

.site-navigation li {
    position: relative;
    margin: 0;
    padding: 0;
}

/* every top-level nav row is EXACTLY 48px — the magnifier button and the
   open search bar are also 48px, so the whole band lines up (body's
   line-height 1.6 would otherwise make the text rows 53px and the bar
   would sink below them) */
.site-navigation > ul > li > a,
.site-navigation > ul > li > label {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 16px;
    color: var(--nav-fg);
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}

.sub-menu li a {
    display: block;
    color: var(--nav-fg);
    text-decoration: none;
    padding: 10px 16px;
    font-size: 14px;
}

.site-navigation a:hover,
.site-navigation label:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-hover-fg);
}

.site-navigation li.current,
.site-navigation li.current a {
    background: var(--accent);
    color: #fff;
}

.site-navigation li.has-sub.current label {
    background: var(--accent);
    color: #fff;
}

/* dropdown sub-menus: absolute panel under the parent label;
   tap = the checkbox hack, PC hover = the media query below.
   GOTCHA: must out-specific `.site-navigation ul { display:flex }`,
   so the plain-class selector would lose — scope under .site-navigation */
.site-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--accent);
    z-index: 10;
}

/* the tap-open: each checkbox lives INSIDE its li.has-sub, so its
   general sibling IS the .sub-menu ul (id beats the (0,2,0) hide rule) */
#nav-downloads:checked ~ .sub-menu,
#nav-guides:checked ~ .sub-menu {
    display: block;
}

.sub-menu li a:hover {
    background: var(--accent);
    filter: brightness(1.12);
    text-decoration: underline;
}

@media (hover: hover) {
    .site-navigation li.has-sub:hover .sub-menu {
        display: block;
    }
}

/* search: magnifier label = checkbox hack revealing the search bar */
.nav-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-search-btn:hover {
    filter: brightness(1.12);
}

.search-bar {
    display: none;
    width: 100%;
    background: var(--accent);
    padding: 8px 16px;
}

.search-bar input[type="search"] {
    height: 32px;
    padding: 0 10px;
}
/* bar = 8px + 32px + 8px = 48px: the SAME height as the magnifier
   button, so the open row is uniform instead of a taller blue bar
   beside a shorter square */

#nav-search-toggle:checked ~ .search-bar {
    display: block;
}

.search-bar form {
    display: flex;
    margin: 0;
}

.search-bar input[type="search"] {
    flex: 1;
    padding: 8px 10px;
    border: 0;
    border-radius: 3px;
    font-family: inherit;
    font-size: 15px;
}

.search-bar button {
    margin-left: 8px;
    padding: 8px 14px;
    border: 0;
    border-radius: 3px;
    background: var(--nav-bg);
    color: var(--nav-fg);
    font-family: inherit;
    cursor: pointer;
}

/* the menu expander (»): hidden on desktop, tap target on phones */
.nav-menu-expander {
    display: none;
}

.nav-menu-expander label {
    color: var(--accent);
    font-weight: 400;
    cursor: pointer;
    display: inline-block;
    padding: 12px 18px;
    font-size: 24px;
    line-height: 1;
    transition: transform 0.15s;
}

/* ============================================================
   Sidebar widgets (continue the black column under the header)
   ============================================================ */

.widget {
    padding: 15px 0;
    /* spacing lives INSIDE the black as padding, never margin
       (a margin opens a white seam against the content column) */
}

.widget-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--header-sub);
    margin: 0 0 8px;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget li {
    padding: 2px 0;
}

.widget a {
    color: var(--nav-fg);
    text-decoration: none;
}

.widget a:hover {
    text-decoration: underline;
}

/* rail search: input + button on ONE line, flush, both 38px */
.widget-search input[type="search"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--card-border);
    border-radius: 0;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--text);
}

.widget-search button {
    background: var(--accent);
    color: #fff;
    border: 0;
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
}

.widget-search form {
    display: flex;
}

.widget-search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 38px;
}

.widget-search button {
    height: 38px;
}

/* ============================================================
   Content: posts, pages, lists
   ============================================================ */

.entry-title {
    font-size: 33px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 10px;
    text-align: center;
}

.entry-title a {
    color: var(--link);
}

.entry-meta {
    text-transform: uppercase;
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 6px;
}

.entry-meta a {
    color: var(--text-sub);
}

/* tags line under the meta: block, small, NOT uppercase */
.entry-tags {
    display: block;
    font-size: 12px;
    text-transform: none;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.entry-tags a {
    color: var(--link);
}

.post-list-item {
    border-top: 5px solid var(--text);
    padding: 20px 0 30px;
}

.post-list-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.entry-content {
    font-size: 16px;
}

.entry-content p {
    margin: 0 0 1.2em;
}

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    font-weight: 700;
    line-height: 1.3;
    margin: 1.4em 0 0.6em;
}

.entry-content h1 { font-size: 28px; }
.entry-content h2 { font-size: 24px; }
.entry-content h3 { font-size: 20px; }
.entry-content h4 { font-size: 17px; }
.entry-content h5 { font-size: 16px; }
.entry-content h6 { font-size: 15px; }

.more-link {
    display: inline-block;
    margin-top: 6px;
}

/* pagination + prev/next */
.pagination {
    margin: 30px 0 0;
    text-align: center;
}

.page-num {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 2px;
    color: var(--link);
}

.page-num.current {
    background: var(--accent);
    color: #fff;
}

.post-navigation {
    margin-top: 30px;
    border-top: 1px solid var(--card-border);
    padding-top: 18px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.post-navigation a {
    flex: 1 1 0;
    max-width: 50%;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 10px 14px;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.post-navigation a:hover {
    border-color: var(--accent);
    background-color: rgba(30, 115, 190, .06);
}

.post-navigation .nav-older {
    text-align: left;
}

.post-navigation .nav-newer {
    text-align: right;
    margin-left: auto;
}

.post-navigation .nav-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #777;
    margin-bottom: 3px;
}

.post-navigation .nav-title {
    display: block;
    color: var(--accent);
    font-weight: 600;
}

/* ============================================================
   Taxonomies: tag cloud + tag pages
   ============================================================ */

.tag-cloud {
    margin-top: 4px;
}

.tag-pill {
    display: inline-block;
    background: #f2f2f2;
    color: var(--text);
    border-radius: 12px;
    padding: 2px 10px;
    margin: 2px 3px 2px 0;
    font-size: 12px;
    text-decoration: none;
}

.tag-pill:hover {
    background: var(--accent);
    color: #fff;
    text-decoration: none;
}

.taxonomy-single .tax-label {
    text-transform: uppercase;
    font-size: 12px;
    color: var(--text-sub);
}

.tag-post-list {
    list-style: none;
    margin: 10px 0;
    padding: 0;
}

.tag-post-list li {
    padding: 6px 0;
}

.tag-count {
    color: var(--text-sub);
    font-size: 12px;
    margin-left: 6px;
}

#tag-filter {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--card-border);
    font-family: inherit;
    font-size: 14px;
    margin: 8px 0;
}

/* ============================================================
   Search results page
   ============================================================ */

#search-results {
    list-style: none;
    margin: 10px 0;
    padding: 0;
}

#search-results li {
    padding: 6px 0;
}

#search-meta {
    font-size: 12px;
    color: var(--text-sub);
    text-transform: uppercase;
}

/* ============================================================
   Code blocks: Zola bakes github-light inline styles onto pre;
   the frame is ours: light gray + green left accent. The giallo
   line-number spans come from Zola's docs CSS.
   ============================================================ */

pre {
    border: 1px solid var(--code-frame);
    border-left: 4px solid var(--code-border);
    padding: 1em;
    overflow-x: auto;
    font-size: 14px;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
}

code {
    background: var(--code-bg);
    color: var(--code-fg);
    font-size: 14px;
    padding: 1px 4px;
}

.giallo-l {
    display: inline-block;
    min-height: 1lh;
    width: 100%;
}

.giallo-ln {
    display: inline-block;
    user-select: none;
    margin-right: 0.4em;
    padding: 0.4em;
    min-width: 3ch;
    text-align: right;
    opacity: 0.8;
}

/* wp-caption remnants + figures */
.wp-caption {
    max-width: 100%;
}

/* shortcode-emitted content images (v48): src = the original file (WP
   variants purged), so cap the display size; centered like the p>img
   pattern below - every image today already renders block+centered */
.entry-content img.content-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* an image alone in its paragraph (the screenshot/link-button pattern)
   centers instead of hugging the left margin */
.entry-content p > img:only-child,
.entry-content p > a:only-child > img:only-child {
    display: block;
    margin: 0 auto;
}

/* the PayPal donate button (an input image inside its form) */
.entry-content form[action*="paypal.com"] {
    text-align: center;
}

figure {
    margin: 1.2em 0;
}

figcaption, .wp-caption-text {
    font-size: 13px;
    color: var(--text-sub);
    padding: 4px 2px;
}

/* ============================================================
   Mobile (max-width 900px)
   ============================================================ */

@media (max-width: 900px) {
    #page {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "navarea"
            "main"
            "sidebar";
    }

    #site-header {
        padding: 10px 12px 8px;
    }

    /* compact ONE-LINE header */
    #site-header .header-image,
    #site-header .header-image-link img {
        width: 36px;
        vertical-align: middle;
    }

    #site-header .site-title {
        display: inline-block;
        font-size: 22px;
        margin: 0 0 0 8px;
        vertical-align: middle;
    }

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

    #site-header .header-image-link {
        display: inline-block;
    }

    /* nav = ONE swipe row */
    #nav-area {
        align-items: center;
    }

    .site-navigation {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .site-navigation::-webkit-scrollbar {
        display: none;
    }

    .site-navigation ul {
        margin-left: 0;
        flex-wrap: nowrap;
    }

    .site-navigation li {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* collapsed: only the first item (Home) + the expander; everything
       else hides behind the tap. The search button is a nav sibling so
       it stays pinned at the row's right. */
    .site-navigation ul li:not(:first-child):not(.nav-menu-expander) {
        display: none;
    }

    .nav-menu-expander {
        display: block;
    }

    /* post separators bleed edge to edge */
    #main {
        padding: 16px 0 40px;
    }

    #content {
        max-width: 100%;
        padding: 0 16px;
    }

    .post-list-item {
        border-top-width: 5px;
        margin: 0 -16px;
        padding: 16px 16px 24px;
    }

    .post-list-item:first-of-type {
        margin-top: 0;
        padding-top: 0;
    }

    .post-navigation {
        margin: 24px 16px 0;
        flex-direction: column;
    }

    .post-navigation a {
        max-width: 100%;
    }

    /* ---- OPEN state (checkbox checked): stack the whole nav ---- */

    #nav-menu-expand:checked ~ .site-navigation {
        flex-direction: column;
        align-items: stretch;
        overflow-x: visible;
    }

    #nav-menu-expand:checked ~ .site-navigation ul {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        overflow-x: visible;
    }

    #nav-menu-expand:checked ~ .site-navigation ul li {
        display: block;
        width: 100%;
        /* the swipe row's nowrap clips long guide titles in the column */
        white-space: normal;
    }

    /* dropdowns become inline sub-lists — still behind their own ▾ tap
       (the section checkboxes handle showing them; the static position
       just reflows them into the column instead of an absolute panel) */
    #nav-menu-expand:checked ~ .site-navigation .sub-menu {
        position: static;
        min-width: 0;
        background: none;
    }

    #nav-menu-expand:checked ~ .site-navigation .sub-menu li a {
        padding-left: 32px;
    }

    /* the magnifier becomes a plain full-width row */
    #nav-menu-expand:checked ~ .site-navigation .nav-search-btn {
        width: auto;
        justify-content: flex-start;
        padding: 13px 16px;
        background: none;
    }

    /* the chevron: centered on its own row, the WHOLE row is the tap
       target, » flips to « while open */
    #nav-menu-expand:checked ~ .site-navigation .nav-menu-expander label {
        display: block;
        width: 100%;
        text-align: center;
        transform: rotate(180deg);
    }
}