/* Put your custom styles here and run `npm start` from the "src" directory on */

/* Belt-and-suspenders: the page itself must never scroll horizontally, no
   matter what a descendant (e.g. a wide code block) tries to do. Code blocks
   still scroll horizontally within themselves via `pre { overflow-x: auto }`
   in the theme. */
html {
    overflow-x: hidden;
}

#TableOfContents ul li {
    margin-bottom: 1em;
}

.lh-copy blockquote {
    display: block;
    font-size: 0.875em;
    margin-left: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-left: 4px solid #ccc;
    padding-left: 1rem;
}

/* Markdown tables: the theme draws no borders at all. Wide tables scroll
   within themselves on small screens instead of being clipped. */
.lh-copy table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.875em;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.lh-copy th,
.lh-copy td {
    border: 1px solid #ccc;
    padding: 0.4rem 0.6rem;
    vertical-align: top;
}

/* The page is bg-near-white (#f4f4f4): white cells, a darker header row. */
.lh-copy thead th {
    background-color: #e5e5e5;
}

.lh-copy tbody tr {
    background-color: #fff;
}

.lh-copy tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.nested-links a {
    overflow-wrap: break-word;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(0, 1fr);
}

footer {
    /*position: fixed;*/
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: darkred;
    color: white;
    /*text-align: center;*/
}

/* ── Corner navigation (prev / next / back-to-top) ─────────────────────── *
 *
 *  Layout (bottom-right, fixed):
 *
 *            [⤒ Top]
 *  [← Prev] [Next →]
 *
 * ─────────────────────────────────────────────────────────────────────── */
#post-corner-nav {
    position: fixed;
    bottom: 20px; /* overridden at runtime by scroll handler */
    right: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    z-index: 200;
}

/* The prev+next row */
#post-corner-nav-row {
    display: flex;
    flex-direction: row;
    gap: 0.35rem;
}

/* Shared button/link style */
#post-corner-nav a,
#post-corner-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    min-height: 2.8rem;
    padding: 0.2rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
    color: #888;
    font-size: 0.6rem;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

#post-corner-nav a:hover,
#post-corner-nav button:hover {
    opacity: 1;
    color: #333;
    border-color: #aaa;
}

#post-corner-nav .corner-arrow {
    font-size: 1rem;
    line-height: 1;
}

/* back-to-top: hidden until user scrolls */
#btn-top {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.2s !important;
}
#btn-top.visible {
    opacity: 0.75 !important;
    pointer-events: auto;
}
#btn-top.visible:hover {
    opacity: 1 !important;
}

/* Cap the height of post preview text on listing/home pages so posts with many
   inline images (e.g. photo-heavy outdoor logs) don't dominate the layout. */
.preview-summary {
    max-height: 12rem;
    overflow: hidden;
    position: relative;
}

/* Fade the clipped content out at the bottom instead of a hard cut-off. */
.preview-summary::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.preview-summary img {
    max-height: 8rem;
    width: auto;
}

/* Collapse large code blocks by default on small screens: code isn't the
   point on a phone, and a wide line shouldn't be able to widen the page.
   Only blocks tall enough to matter get this treatment (see
   code-collapse.js) -- short snippets render as before. */
@media screen and (max-width: 59.99em) {
    .highlight pre.code-collapsed {
        max-height: 10rem;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }

    .highlight pre.code-collapsed::after {
        content: "tap to expand";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3rem;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 0.4rem;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #ddd;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
        pointer-events: none;
    }

    /* Compact header nav: the banner-shaped site logo (img/m1ch_w.svg) has
       no max-width below 480px (Tachyons' mw5-ns only kicks in there), so
       it can render nearly full viewport width. Cap it and tighten the
       nav's own padding. */
    nav[role="navigation"] {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    nav[role="navigation"] img {
        width: auto;
        max-width: 8rem;
        max-height: 2rem;
    }

    /* Cap any cover-image header (post/page hero, home page hero) to a
       quarter of the viewport height, and shrink its own padding/type so
       the title (and description, if any) actually fit inside that instead
       of just getting clipped. */
    header.cover {
        max-height: 25vh;
        overflow: hidden;
    }

    header.cover .pv6,
    header.cover .pv4 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    header.cover .f2 {
        font-size: 1.1rem;
    }

    header.cover .f5 {
        font-size: 0.8rem;
    }
}

/* Mobile nav dropdown: a floating card, positioned (top/right) by
   site-navigation.html's script. Fixed positioning means it isn't
   constrained by -- or clipped by -- header.cover's max-height/overflow. */
#nav-submenu {
    position: fixed;
    z-index: 500;
    background: #1a1a1a;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    padding: 0.75rem 1rem;
    min-width: 12rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
}

/* Comments box (layouts/partials/social-comments.html): replies to the post's
   Mastodon and Bluesky threads, loaded on click. */
.social-comments {
    border-top: 1px solid #ccc;
    padding-top: 1rem;
}

.social-comments-load {
    font: inherit;
    font-size: 0.875em;
    padding: 0.4rem 1rem;
    border: 1px solid #aaa;
    border-radius: 2rem;
    background: #fff;
    color: #333;
    cursor: pointer;
}

.social-comments-load:disabled {
    cursor: wait;
    opacity: 0.6;
}

.social-comments-note,
.social-comments-empty,
.social-comments-error {
    font-size: 0.75em;
    color: #888;
}

.social-comments-group ol {
    list-style: none;
    padding: 0;
}

.social-comment {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 0.875em;
}

.social-comment-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.social-comment-main {
    min-width: 0;
}

.social-comment-head {
    font-size: 0.875em;
}

.social-comment-author {
    font-weight: bold;
}

.social-comment-handle {
    color: #888;
}

.social-comment-body p {
    margin: 0.25rem 0;
}

.social-comment-text {
    white-space: pre-wrap;
}