/**
 * bw-common: shared styles for Bill Ward's WordPress themes.
 *
 * Enqueue from child theme:
 *   wp_enqueue_style('bw-common', get_theme_root_uri() . '/bw-common/common.css', array('generatepress'));
 */

/* ── Base ── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.65;
}

/* ── Override GP padding on articles ── */
.separate-containers .inside-article,
.inside-article {
    padding: 20px !important;
    margin-bottom: 0;
}

/* ── Hide GP default sidebars ── */
#right-sidebar, #left-sidebar, .sidebar {
    display: none !important;
}

/* ── Grid card layout ── */
.site-main {
    width: 100% !important;
    display: grid;
    gap: 20px;
}
.site-main .paging-navigation,
.site-main nav.navigation {
    grid-column: 1 / -1;
}

/* ── Single post: centered column ── */
.single .site-main {
    display: block;
    max-width: none;
}
.single .inside-article {
    padding: 24px 28px !important;
}
.page .site-main {
    display: block;
    max-width: 720px;
    margin: 0 auto;
}

/* ── Headings ── */
h1, h2, h3, h4 {
    line-height: 1.3;
}
.entry-title {
    font-size: 1.4em;
    margin-bottom: 4px;
}
.entry-title a {
    text-decoration: none;
}

/* ── Post meta (date) ── */
header.entry-meta {
    font-size: 0.82em;
    margin-bottom: 4px !important;
}
.byline {
    display: none;
}

/* ── Featured image in stream ── */
.post-image {
    margin-bottom: 8px;
}
.post-image {
    margin-bottom: 8px;
    container-type: inline-size;
}
.post-image img {
    max-width: 100%;
    max-height: 100cqi;
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* ── Content ── */
.entry-content,
.entry-summary {
    font-size: 1em;
    line-height: 1.7;
    margin-bottom: 6px;
}

/* ── Read more: inline with last text line, floated right ── */
.entry-content p:has(+ p.read-more-container),
.entry-summary p:has(+ p.read-more-container) {
    display: inline !important;
    margin: 0 !important;
}
.entry-content p.read-more-container,
.entry-summary p.read-more-container {
    display: inline !important;
    margin: 0 !important;
    padding: 0;
}
.read-more {
    float: right;
    font-size: 0.9em;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 0.5em;
}
/* Clear float + consistent gap before footer meta */
.entry-content::after,
.entry-summary::after {
    content: '';
    display: block;
    clear: both;
    margin-bottom: 8px;
}

/* ── Footer meta: cats/tags row, then actions row ── */
footer.entry-meta {
    display: block;
}
/* Cat/tag columns. Split widths come from per-post --cat-pct / --tag-pct
   custom properties set inline by generate_footer_meta() in functions.php. */
.bw-cat-tags { display: table; table-layout: fixed; width: 100%; }
.bw-cat-tags .cat-links { display: table-cell; width: var(--cat-pct, 30%); vertical-align: top; padding-right: 10px; }
.bw-cat-tags .tags-links { display: table-cell; width: var(--tag-pct, 70%); vertical-align: top; text-align: right; }
footer.entry-meta .cat-links {
    padding: 2px 6px 2px 0;
}
footer.entry-meta .tags-links {
    padding: 2px 0;
}
/* Actions row below the table */
footer.entry-meta .bp-actions {
    display: block;
    clear: both;
    text-align: center;
    margin-top: 4px;
}
footer.entry-meta > .comments-link { display: none; }
footer.entry-meta .cat-links,
footer.entry-meta .tags-links { font-size: 0; }
footer.entry-meta .cat-links a,
footer.entry-meta .tags-links a,
footer.entry-meta .comments-link { font-size: 0.82rem; }

/* ── Tag pills (outlined, # prefix) ── */
.entry-meta .tags-links a {
    display: inline-block;
    background: transparent;
    padding: 1px 8px;
    border-radius: 2px;
    border: 1px solid;
    text-decoration: none;
    margin: 2px 2px;
}

/* ── Category pills (filled) ── */
.entry-meta .cat-links a {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 2px;
    text-decoration: none;
    margin: 2px 2px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Hide redundant icons/labels ── */
.cat-links .screen-reader-text,
.tags-links .screen-reader-text,
.cat-links .gp-icon,
.tags-links .gp-icon,
.comments-link .gp-icon { display: none; }
footer.entry-meta > .comments-link { display: none; }

/* ── Hide GP default edit link ── */
.post-edit-link, footer.entry-meta .edit-link { display: none; }

/* ── Action buttons (Comment/Edit) ── */
.bw-actions, .pmtg-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 4px;
    margin-bottom: 0;
    text-align: center;
}

/* ── Post navigation ── */
.post-navigation, .paging-navigation { grid-column: 1 / -1; }
.single .post-navigation {
    margin-top: 16px;
    padding-top: 12px;
}
.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
}
.post-navigation .nav-next { text-align: right; }

/* ── Single post featured image ── */
.single .post-image { margin: -24px -28px 20px -28px; }
.single .post-image img { border-radius: 2px 2px 0 0; max-height: none; }

/* ── Fixed header (when shrink JS is active) ── */
/* Offset body for the fixed header. Each theme sets --bw-header-height in
   :root (also drives the left-nav top offset); the shrink JS then adjusts. */
body { padding-top: var(--bw-header-height, 0); }
body[data-shrink-dist] .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
}

/* ── #more anchor: no longer needed, stripped from links via PHP ── */

/* ── Form tweaks ── */
.required-field-message { display: none; }

/* ── Lightstrip + migration note ── */
.ls-viewer { margin: 8px 0; }
.migration-note { font-size: 0.8em; font-style: italic; }

/* ── Archive/category/tag headers ── */
.page-header,
.separate-containers .page-header {
    grid-column: 1 / -1;
    padding: 10px 20px 10px 20px !important;
    border-radius: 2px;
    margin-bottom: 0;
}
.page-header .page-title, .page-header h1 { font-size: 1.3em; margin: 0; }
.page-header .archive-label {
    font-weight: normal;
    font-size: 0.75em;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Override GP container constraints ── */
.grid-container,
.site-content .grid-container,
body .grid-container {
    max-width: 100% !important;
}

/* ── Responsive base ── */
@media (max-width: 768px) {
    .site-main {
        grid-template-columns: 1fr !important;
    }
    .inside-article { padding: 16px !important; }
    .entry-title { font-size: 1.25em; }
    .single .post-image { margin: -16px -16px 14px -16px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Shared left-nav appearance.
 *
 * Structural + var-driven styling for the .bw-left-nav sidebar that billward,
 * brickpile, and cardboardreveries compose via the bw_nav_* helpers. Each
 * theme fills in the --bw-nav-* contract (in its :root) from its own palette;
 * only selectors that match when the nav markup is present live here. The
 * content-area layout (.site-content / .site-footer margins) stays per-theme,
 * since each theme decides when the nav appears.
 *
 * Contract (set in the child theme :root):
 *   --bw-header-height        header height (sidebar top offset + body padding)
 *   --bw-nav-width            sidebar width
 *   --bw-nav-bg / -border     panel background / right border + hairlines
 *   --bw-nav-fg               link / summary / meta text
 *   --bw-nav-heading          section <h3> color (defaults to --bw-nav-fg)
 *   --bw-nav-hover            link hover + current-item color
 *   --bw-nav-hover-bg         link hover background (default transparent)
 *   --bw-nav-muted            count text
 *   --bw-nav-input-bg / -input-focus-bg / -focus-border   search field
 * ────────────────────────────────────────────────────────────────────────── */
.bw-left-nav {
    position: fixed; left: 0; top: var(--bw-header-height, 0px);
    width: var(--bw-nav-width, 200px); height: calc(100vh - var(--bw-header-height, 0px));
    background: var(--bw-nav-bg, #f5f5f5); border-right: 1px solid var(--bw-nav-border, #ddd);
    padding: 12px 10px; font-size: 0.88em; overflow-y: auto; z-index: 50;
}
.bw-left-nav .bw-nav-search { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-bottom: 12px; }
.bw-left-nav .bw-nav-search input[type="search"] {
    flex: 1 1 auto; min-width: 0; padding: 5px 8px; border: 1px solid var(--bw-nav-hairline, var(--bw-nav-border, #ddd));
    border-radius: 2px; font-size: 0.9em; background: var(--bw-nav-input-bg, #fff);
}
.bw-left-nav .bw-nav-search input[type="search"]:focus {
    background: var(--bw-nav-input-focus-bg, #fff); border-color: var(--bw-nav-focus-border, #888); outline: none;
}
.bw-left-nav h3 {
    font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--bw-nav-heading, var(--bw-nav-fg, #333)); margin: 0 0 6px 0; padding: 0;
}
.bw-left-nav ul { list-style: none; margin: 0; padding: 0 0 0 0.5em; }
.bw-left-nav > ul { padding: 0; }
/* Gap below the Pages section before the next section. Only present when the
   page tree renders (it self-suppresses when a site has no pages). Collapses
   with a following section heading's margin-top, so it doesn't double up. */
.bw-left-nav .bw-nav-pages { margin-bottom: 16px; }
.bw-left-nav li { margin: 0; padding: 2px 0; }
.bw-left-nav a { color: var(--bw-nav-fg, #333); text-decoration: none; }
.bw-left-nav a:hover { color: var(--bw-nav-hover, #000); background: var(--bw-nav-hover-bg, transparent); }
.bw-left-nav li.is-current > a { color: var(--bw-nav-hover, #000); font-weight: 700; }
.bw-left-nav .cat-count { color: var(--bw-nav-muted, #888); font-size: 0.85em; }
.bw-left-nav details { margin: 0; padding: 2px 0; }
.bw-left-nav summary { cursor: pointer; font-weight: 500; color: var(--bw-nav-fg, #333); padding: 2px 0; }
.bw-left-nav details[open] > summary { list-style: disclosure-open; }
.bw-left-nav details[open] > summary .bw-cat-count-collapsed { display: none; }
.bw-left-nav details ul { padding-left: 1em; }
.bw-nav-meta {
    margin-top: 20px; padding-top: 12px;
    border-top: 1px solid var(--bw-nav-hairline, var(--bw-nav-border, #ddd));
    font-size: 0.85em; line-height: 2;
}
.bw-nav-meta a { color: var(--bw-nav-fg, #333); text-decoration: none; }
.bw-nav-meta a:hover { color: var(--bw-nav-hover, #000); }
/* ── Left-nav content layout + collapse ──
 * Content reserves the nav's *visible* width via --bw-nav-cur. On wide screens
 * an expanded nav sits in the left whitespace and content shifts right; when
 * collapsed it reserves only the thin strip. On narrow screens content always
 * reserves just the strip, so an expanded nav OVERLAYS the content. One control
 * (.bw-nav-collapse) at every width — there is no separate mobile hamburger;
 * the collapsed state is a colored strip with the toggle icon. */
:root {
    --bw-nav-collapsed-width: 36px;
    --bw-nav-cur: var(--bw-nav-width, 200px);
}
html.nav-collapsed { --bw-nav-cur: var(--bw-nav-collapsed-width, 32px); }
@media (max-width: 900px) {
    /* Narrow: content reserves only the strip whether or not the nav is open. */
    :root, html.nav-collapsed { --bw-nav-cur: var(--bw-nav-collapsed-width, 32px); }
}

.has-leftnav .site-content,
.has-leftnav .site-footer {
    margin-left: var(--bw-nav-cur) !important;
    transition: margin-left 0.18s ease;
}

/* Single-post reading column: capped at --bw-read-width (default 720px) and
 * centered in the space to the right of the nav; widens to 50vw on large
 * screens. max() keeps it clear of the nav on mid-width viewports. */
.has-leftnav.single .site-content {
    max-width: var(--bw-read-width, 720px) !important;
    margin-left: max(var(--bw-nav-cur), calc((100vw - var(--bw-read-width, 720px)) / 2)) !important;
    margin-right: auto !important;
}
@media (min-width: 1441px) {
    .has-leftnav.single .site-content {
        max-width: 50vw !important;
        margin-left: max(var(--bw-nav-cur), calc((100vw - 50vw) / 2)) !important;
    }
}

/* Nav width: full when expanded, thin strip when collapsed (at every width). */
.bw-left-nav { transition: width 0.18s ease; }
html.nav-collapsed .bw-left-nav {
    width: var(--bw-nav-collapsed-width, 36px);
    padding: 8px 4px; overflow: hidden;
}
/* Collapsed strip keeps only the two stacked icons: the collapse toggle and the
 * search form (now just its right-pinned magnifier, the field hidden). */
html.nav-collapsed .bw-left-nav > :not(.bw-nav-collapse):not(.bw-nav-search) { display: none; }
html.nav-collapsed .bw-nav-search { margin-bottom: 0; gap: 0; }
html.nav-collapsed .bw-nav-search input[type="search"] { display: none; }

/* Narrow: an expanded nav overlays content — lift it above and add a shadow. */
@media (max-width: 900px) {
    .bw-left-nav { z-index: 99; }
    html:not(.nav-collapsed) .bw-left-nav { box-shadow: 2px 0 12px rgba(0,0,0,0.25); }
}

/* The two stacked icon controls, right-aligned so the magnifier sits directly
 * under the collapse toggle. Collapse: MDI page-layout-sidebar-left. Search:
 * MDI magnify, pinned to the right end of the search field (always visible).  */
.bw-nav-collapse,
.bw-nav-search-icon {
    flex: 0 0 28px; width: 28px; height: 28px; padding: 3px; border: 0;
    background: transparent; cursor: pointer; color: var(--bw-nav-fg, #333);
    line-height: 0; border-radius: 3px;
}
.bw-nav-collapse { display: block; margin: 0 0 6px auto; }
.bw-nav-collapse:hover,
.bw-nav-search-icon:hover { background: rgba(0,0,0,0.07); }
.bw-nav-collapse svg,
.bw-nav-search-icon svg { display: block; }