/* --------------------------------------------------------------------------
 * Toolbar layout — same on every page (matches homepage insets)
 * -------------------------------------------------------------------------- */
.navbar {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-block: 0.65em;
    /* Equal left/right indent: Home/Tags align with icons */
    padding-inline: 2.5rem;
    box-sizing: border-box;
}

.nav-navs {
    width: 100%;
}

.nav-navs > ul {
    width: 100%;
}

/* Cancel tabi's extra left padding on the first link so insets stay even */
.nav-navs > ul > li:first-child .nav-links {
    padding-inline-start: 0;
}

.menu-icons-container {
    margin-inline-end: 0;
    gap: 0.35rem;
}

.menu-icons-group {
    gap: 0.5rem;
}

@media only screen and (max-width: 1000px) {
    .navbar {
        max-width: 960px;
        padding-inline: 2rem;
    }
}

/* --------------------------------------------------------------------------
 * Homepage only: toolbar floats ON TOP of the banner
 * -------------------------------------------------------------------------- */
body:has(.site-banner) {
    position: relative;
}

/* Take toolbar out of flow so the banner starts at the top of the page */
body:has(.site-banner) > header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: transparent;
    box-shadow: none;
}

/* No gap above the banner — it is the top of the page */
body:has(.site-banner) .content {
    margin-top: 0;
}

.site-banner {
    display: flex;
    justify-content: center;
    margin: 0 0 1.5rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

.site-banner img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/*
 * Controls over the banner.
 * Light: black glyphs + strong white glow
 * Dark:  white glyphs + strong black glow
 * Search + theme icons share size 1.3rem.
 *
 * Theme switcher: paint via background-image (not CSS mask) so drop-shadow
 * follows the moon/sun silhouette. Mask + filter often produces no glow.
 */

/* --- Light mode --- */
/* Stronger text glow to match icon drop-shadows */
body:has(.site-banner) .nav-links {
    color: #111;
    font-weight: 450;
    text-shadow:
        0 0 2px #fff,
        0 0 6px #fff,
        0 0 12px #fff,
        0 0 20px #fff,
        0 0 28px rgba(255, 255, 255, 0.95);
}

body:has(.site-banner) .interactive-icon path {
    fill: #111 !important;
}

body:has(.site-banner) .interactive-icon {
    width: 1.3rem;
    height: 1.3rem;
    filter:
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 5px #fff)
        drop-shadow(0 0 10px #fff)
        drop-shadow(0 0 16px rgba(255, 255, 255, 0.95));
}

/*
 * Moon/sun SVG fills its viewBox more tightly than the search glyph, so at
 * the same box size it looks bigger. Slightly smaller box ≈ same visual
 * weight; keep a stronger glow (user preference).
 */
body:has(.site-banner) .theme-switcher {
    width: 1.05rem !important;
    height: 1.05rem !important;
    margin-inline-start: 0.85rem !important;
    /* Disable mask paint; use the SVG as a normal image so filters work */
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    background-color: transparent !important;
    background-image: var(--theme-switcher-svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 6px #fff)
        drop-shadow(0 0 12px #fff)
        drop-shadow(0 0 20px rgba(255, 255, 255, 0.95));
}

body:has(.site-banner) .theme-resetter {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    background-color: transparent !important;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"%3E%3Cpath fill="%23111" d="M295.87-193.869v-78.001h291.152q43.63 0 72.369-33.424 28.739-33.423 28.739-79.271t-28.739-79.391Q630.652-497.5 587.022-497.5H343.913l87.478 87.478-55.652 55.153L193.869-536.5l181.87-181.631 55.652 55.653-87.478 86.978h243.109q75.435 0 127.272 56.522 51.837 56.521 51.837 134.174 0 77.652-51.837 134.293-51.837 56.642-127.272 56.642H295.87Z"/%3E%3C/svg%3E') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter:
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 5px #fff)
        drop-shadow(0 0 10px #fff);
}

/* --- Dark mode: white glyphs + black glow only --- */
html[data-theme="dark"] body:has(.site-banner) .nav-links {
    color: #fff;
    text-shadow:
        0 0 2px #000,
        0 0 6px #000,
        0 0 12px #000,
        0 0 20px #000,
        0 0 28px rgba(0, 0, 0, 0.95);
}

html[data-theme="dark"] body:has(.site-banner) .interactive-icon path {
    fill: #fff !important;
}

html[data-theme="dark"] body:has(.site-banner) .interactive-icon {
    filter:
        drop-shadow(0 0 2px #000)
        drop-shadow(0 0 5px #000)
        drop-shadow(0 0 10px #000)
        drop-shadow(0 0 16px rgba(0, 0, 0, 0.95));
}

/* invert black SVG → white, then black glow (no white glow); stronger halo */
html[data-theme="dark"] body:has(.site-banner) .theme-switcher {
    filter:
        invert(1)
        drop-shadow(0 0 2px #000)
        drop-shadow(0 0 6px #000)
        drop-shadow(0 0 12px #000)
        drop-shadow(0 0 20px rgba(0, 0, 0, 0.95));
}

html[data-theme="dark"] body:has(.site-banner) .theme-resetter {
    filter:
        invert(1)
        drop-shadow(0 0 2px #000)
        drop-shadow(0 0 5px #000)
        drop-shadow(0 0 10px #000);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) body:has(.site-banner) .nav-links {
        color: #fff;
        text-shadow:
            0 0 2px #000,
            0 0 6px #000,
            0 0 12px #000,
            0 0 20px #000,
            0 0 28px rgba(0, 0, 0, 0.95);
    }

    html:not([data-theme="light"]) body:has(.site-banner) .interactive-icon path {
        fill: #fff !important;
    }

    html:not([data-theme="light"]) body:has(.site-banner) .interactive-icon {
        filter:
            drop-shadow(0 0 2px #000)
            drop-shadow(0 0 5px #000)
            drop-shadow(0 0 10px #000)
            drop-shadow(0 0 16px rgba(0, 0, 0, 0.95));
    }

    html:not([data-theme="light"]) body:has(.site-banner) .theme-switcher {
        filter:
            invert(1)
            drop-shadow(0 0 2px #000)
            drop-shadow(0 0 6px #000)
            drop-shadow(0 0 12px #000)
            drop-shadow(0 0 20px rgba(0, 0, 0, 0.95));
    }

    html:not([data-theme="light"]) body:has(.site-banner) .theme-resetter {
        filter:
            invert(1)
            drop-shadow(0 0 2px #000)
            drop-shadow(0 0 5px #000)
            drop-shadow(0 0 10px #000);
    }
}

/*
 * Two-column homepage — matches original Bootstrap col-md-8 / col-md-4
 * (posts ~2/3, sticky sidebar ~1/3).
 *
 * tabi shrinks .content to 600px under 1000px viewport; give the homepage
 * a bit more room so the sidebar is usable.
 */
.content:has(.home-layout) {
    max-width: 1100px;
}

@media only screen and (max-width: 1000px) {
    .content:has(.home-layout) {
        max-width: 960px;
    }
}

.home-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr);
    gap: 1.5rem 2rem;
    align-items: start;
    width: 100%;
}

/* Override tabi's article max-width/centering so posts fill the left column */
.home-posts .post {
    margin: 0 0 2rem;
    max-width: none;
}

.home-posts .post:last-child {
    margin-bottom: 0;
}

.home-sidebar {
    min-width: 0;
}

.home-sidebar-sticky {
    position: sticky;
    top: 2rem;
}

/* Slogan card — original: p-4 mb-3 bg-light rounded */
.sidebar-card {
    margin-bottom: 1rem;
    padding: 1.5rem;
    border-radius: 0.25rem;
    background-color: var(--bg-0, #f8f9fa);
}

.sidebar-heading {
    margin: 0 0 0.75rem;
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.3;
}

.sidebar-slogan {
    margin: 0;
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.5;
}

.sidebar-links {
    padding: 1.5rem;
}

.sidebar-link-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-link-list li {
    margin-bottom: 0.35rem;
}

.sidebar-link-list a {
    text-decoration: none;
}

.sidebar-link-list a:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 768px) {
    .home-layout {
        grid-template-columns: 1fr;
    }

    .home-sidebar-sticky {
        position: static;
    }

    .sidebar-links {
        padding-top: 0;
    }
}

/*
 * Tag pills — exact match of original mir.css:
 *   .blog-post-meta a.tags { ... }
 * Applied to homepage post list, tabi post listings, and post metadata.
 */
.post-meta a.tags,
.bloglist-tags a.tag,
.meta li.tag a.p-category {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1.1;
    border: 1px solid #1bb3e9;
    border-radius: 3px;
    padding: 0 0.4rem;
    margin-bottom: 0.1rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #1bb3e9;
}

.post-meta a.tags:hover,
.bloglist-tags a.tag:hover,
.meta li.tag a.p-category:hover {
    color: #1bb3e9;
    text-decoration: none;
}

/* Space adjacent pills when several tags sit on one line */
.post-meta a.tags + a.tags,
.bloglist-tags a.tag + a.tag {
    margin-inline-start: 0.25rem;
}

/* Author under date — same size/weight as the date (inherits from .bloglist-meta ul) */
.bloglist-meta li.author {
    display: block;
    margin-top: 0.25rem;
    color: var(--meta-color);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/*
 * Fonts & titles — closer to the original Bootstrap/Montserrat blog.
 */
 * override_serif_with_sans is set in zola.toml; refine heading weight/size
 * and the underlines that used class "border-bottom" on the old site.
 */
body {
    font-family: var(--sans-serif-font), Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.article-title,
.section-title,
.home-posts .post h2 {
    font-family: var(--sans-serif-font), Helvetica, Tahoma, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

/* Post page title — original: h1.blog-post-title { font-size: 1.75rem } + border-bottom */
.article-title {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.3;
    border-bottom: 1px solid var(--divider-color, #dee2e6);
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
}

/* Homepage listing titles — same underline treatment */
.home-posts .post h2 {
    font-size: 1.75rem;
    line-height: 1.3;
    border-bottom: 1px solid var(--divider-color, #dee2e6);
    padding-bottom: 0.35rem;
    margin: 0 0 0.5rem;
}

.home-posts .post h2 a {
    color: inherit;
    text-decoration: none;
    border: none;
}

.home-posts .post h2 a:hover {
    color: var(--primary-color);
}

/*
 * Code blocks — plain <pre> has no background in tabi (only .z-code does),
 * so blocks blend into the page. Give them a clear gray panel; keep the
 * teal language bar from the theme.
 */
pre {
    background-color: #e6e8ed;
    color: #1a1b1f;
    border: 1px solid #cfd2d8;
}

pre code {
    background-color: transparent;
    color: inherit;
}

/* Syntax-highlighted blocks share the same panel */
pre .z-code {
    background-color: transparent;
    color: inherit;
}

/* Dark mode: lift above near-black page with a cooler mid-gray */
html[data-theme="dark"] pre {
    background-color: #2c2e34;
    color: #e6e7eb;
    border-color: #3f424a;
}

html[data-theme="dark"] pre code,
html[data-theme="dark"] pre .z-code {
    color: inherit;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) pre {
        background-color: #2c2e34;
        color: #e6e7eb;
        border-color: #3f424a;
    }

    html:not([data-theme="light"]) pre code,
    html:not([data-theme="light"]) pre .z-code {
        color: inherit;
    }
}

/* Inline code: subtle gray chip so it also reads clearly */
:not(pre) > code {
    background-color: #e6e8ed;
    border: 1px solid #d5d8de;
}

html[data-theme="dark"] :not(pre) > code {
    background-color: #2c2e34;
    border-color: #3f424a;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) :not(pre) > code {
        background-color: #2c2e34;
        border-color: #3f424a;
    }
}