/* quark2-pk — custom styles on top of Quark 2.
   Dark palette taken from the old WordPress site (Hueman + Dark Reader CSS):
   background #181a1b, text #e8e6e3, links #3391ff, navigation #121d30. */

:root[data-theme="dark"] {
  --q2-bg: #181a1b;
  --q2-bg-elev: #1e2022;
  --q2-bg-muted: #26292b;
  --q2-text: #e8e6e3;
  --q2-text-strong: #ffffff;
  --q2-text-muted: #a8a095;
  --q2-nav-bg: rgba(18, 29, 48, 0.94);
  --q2-nav-border: rgba(51, 145, 255, 0.18);
  --q2-link: #3391ff;
}

/* ---------- header: text logo like the old "[blog@kernstock.net]$" */
.navbar-brand.text-logo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--q2-text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.navbar-brand.text-logo:hover { color: var(--q2-link); }
.navbar-brand.text-logo { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.navbar-brand.text-logo .site-slogan { font-size: .72rem; font-weight: 400; letter-spacing: .03em; color: var(--q2-text-muted); margin-top: .1rem; }

/* ---------- article */
.content-title h1 { margin-bottom: .35rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--q2-text-muted); font-size: .9rem; }
.blog-updated { margin-left: .35rem; }
/* categories and tags 12% smaller than quark2's .label (0.75rem, padding .25rem .625rem) so they stay in the background */
.taxonomy { display: flex; flex-wrap: wrap; gap: .35rem .88rem; margin-top: .6rem; font-size: .75rem; }
.taxonomy .label { margin: 0; font-size: .66rem; padding: .22rem .55rem; }
/* folder and tag icons centred on the labels next to them: both groups as wrapping flex rows */
.taxonomy .categories, .taxonomy .tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .18rem .35rem; }
.taxonomy .categories > i, .taxonomy .tags > i { line-height: 1; }
.label-category { border-color: color-mix(in oklab, var(--q2-link) 45%, transparent); }
.post-hero { margin: 1.25rem 0 1.5rem; }
.post-hero img { width: 100%; height: auto; border-radius: var(--q2-radius); }
.e-content img { max-width: 100%; height: auto; }

/* WordPress alignment + captions (kept from the migrated content) */
.e-content img.alignleft  { float: left;  margin: .3rem 1.25rem .75rem 0; }
.e-content img.alignright { float: right; margin: .3rem 0 .75rem 1.25rem; }
.e-content img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.e-content a[rel="lightbox"]:has(img.aligncenter) { display: block; text-align: center; }
.e-content p:has(> a > img.aligncenter) > .wp-caption-text,
.e-content p:has(> img.aligncenter) > .wp-caption-text { display: block; text-align: center; }
.wp-caption-text { display: inline-block; font-size: .85rem; font-style: italic; color: var(--q2-text-muted); margin-top: .2rem; }
.e-content::after { content: ""; display: table; clear: both; }

/* galleries (mein-raspberry-pi, owncloud) */
.e-content img.gallery-thumb { display: inline-block; width: 150px; height: 150px; object-fit: cover; margin: 0 .35rem .35rem 0; border-radius: var(--q2-radius-sm); }
.e-content .gallery-item { display: inline-flex; flex-direction: column; align-items: center; width: 150px; margin: 0 .35rem .5rem 0; vertical-align: top; }
.e-content .gallery-item img.gallery-thumb { margin: 0; }
.e-content .gallery-caption { display: block; text-align: center; font-size: .75rem; line-height: 1.3; margin-top: .25rem; }

/* code: keep long lines scrollable instead of wrapping (config/shell snippets) */
.e-content pre, .e-content .codesh-block pre { overflow-x: auto; }
.e-content code { overflow-wrap: anywhere; }
.e-content pre code { overflow-wrap: normal; }

/* old-post notice (github-markdown-alerts look) */
.post-age-notice { margin: 1rem 0 1.25rem; padding: .75rem 1rem; border-left: 4px solid #c69026; border-radius: var(--q2-radius-sm); background: color-mix(in oklab, #c69026 10%, transparent); }
.post-age-notice .md-alert-title { margin: 0 0 .25rem; font-weight: 600; color: #c69026; }
.post-age-notice .md-alert-body p { margin: 0; }

/* ---------- comments */
.comments { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--q2-divider); }
.comment-list { list-style: none; padding-left: 0; margin: 0 0 1rem; }
.comment-list .comment-replies { padding-left: 1.5rem; border-left: 2px solid var(--q2-divider); margin-top: .75rem; }
.comment { margin-bottom: 1rem; padding: .85rem 1rem; border-radius: var(--q2-radius); background: var(--q2-bg-elev); box-shadow: var(--q2-shadow-card); }
.comment.by-author { border-left: 3px solid var(--q2-link); }
.comment-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; color: var(--q2-text-muted); margin-bottom: .35rem; }
.comment-author { font-weight: 600; color: var(--q2-text-strong); }
.comment-text { overflow-wrap: anywhere; }
.comment-form .form-group { margin-bottom: .75rem; }

/* ---------- sidebar */
.sidebar-categories .menu { list-style: none; padding: 0; margin: 0; }
.sidebar-categories .menu-item a { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; }
.sidebar-categories .menu-score { color: var(--q2-text-muted); font-size: .8rem; }
.sidebar-categories a.active { font-weight: 600; }
.sidebar-categories .sub-menu { margin: .1rem 0 .35rem .9rem; padding-left: .6rem; border-left: 1px solid var(--q2-border-strong); }
.sidebar-categories .sub-menu .menu-item a { font-size: .92em; padding: .1rem 0; }
.category-path { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.category-sep { color: var(--q2-text-muted); }
.tag-cloud { line-height: 1.9; }
.tag-cloud a { margin-right: .45rem; white-space: nowrap; }
.tag-cloud .tag-weight-1 { font-size: .8rem; }
.tag-cloud .tag-weight-2 { font-size: .95rem; }
.tag-cloud .tag-weight-3 { font-size: 1.1rem; }
.tag-cloud .tag-weight-4 { font-size: 1.3rem; }

/* ---------- footer */
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; }
.footer-inner p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ---------- error page */
.error-page .error-inner { width: 100%; max-width: 44rem; text-align: left; }
.error-page .error-code { font-family: ui-monospace, monospace; font-size: 3.5rem; font-weight: 700; margin: 0; color: var(--q2-link); }
#error.error-page h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
#error.error-page h2 { font-size: 1.25rem; margin-top: 2rem; }
#error.error-page p { margin-inline: 0; }
.error-latest { padding-left: 1.1rem; }
.error-latest .text-muted { color: var(--q2-text-muted); font-size: .85rem; }
.error-search { max-width: 30rem; margin: 1.5rem 0; }
.error-home { margin-top: 2rem; }

@media (max-width: 640px) {
  .e-content img.alignleft, .e-content img.alignright { float: none; display: block; margin: .5rem auto; }
}

/* ---------- readability fixes (dark) */
.content-title .p-name a { color: var(--q2-text-strong); text-decoration: none; }
.content-title .p-name a:hover { color: var(--q2-link); }
:root[data-theme="dark"] .sidebar-content .menu-score { background: var(--q2-bg-muted); color: var(--q2-text); }

/* basic captcha: let image, reload button and input wrap on narrow screens */
.basic-captcha .form-input-wrapper { display: flex; flex-wrap: wrap; gap: .5rem; }
.basic-captcha .form-input-addon { display: flex; align-items: stretch; flex: 0 0 auto; }
.basic-captcha .form-input-addon img { height: 44px; width: auto; border-radius: var(--q2-radius-sm); }
.basic-captcha .form-input-wrapper input { flex: 1 1 10rem; min-width: 0; }
#error.error-page .error-code { color: var(--q2-link); margin-bottom: .25rem; }
#error.error-page .error-code + h1 { margin-top: 0; }

/* blog index (also its category/tag listings): the "Blog" heading stays for screen readers only
   (blog.md `show_title: false`); the then-empty header takes no space */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
.blog-page-header:has(> h1.visually-hidden:only-child) { margin-bottom: 0; }

/* ---------- blog listing: one post per row (image left, text right; stacked on small screens) */
/* preview images are never cropped: scaled into their frame and letterboxed */
.blog-listing .blog-grid > .card > .card-image img { object-fit: contain; background: var(--q2-bg-muted); }
/* categories and tags on separate lines */
.blog-listing .card-footer .taxonomy { flex-direction: column; align-items: flex-start; gap: .31rem; }
.blog-listing .columns .blog-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .blog-listing .blog-grid > .card:has(> .card-image) {
    display: grid;
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    height: auto;
  }
  .blog-listing .blog-grid > .card > .card-image { grid-column: 1; grid-row: 1 / span 3; align-self: start; overflow: hidden; }
  .blog-listing .blog-grid > .card > .card-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .blog-listing .blog-grid > .card > :not(.card-image) { grid-column: 2; }
}

/* YetiSearch Pro's search field (sidebar, error page) spans its box */
.sidebar-content .ys-search-trigger, .error-search .ys-search-trigger { display: flex; width: 100%; }
.sidebar-content .ys-search-trigger .ys-trigger-shortcut, .error-search .ys-search-trigger .ys-trigger-shortcut { margin-left: auto; }

/* lightbox (lightbox-gallery / GLightbox): image and caption use 95% of the screen (owner), except while zoomed in;
   --lightbox-caption: the caption's height (js/lightbox-captions.js). !important: GLightbox sets an inline max-height. */
.glightbox-container .gslide:not(.zoomed) .gslide-image img { max-width: 95vw; max-height: calc(95vh - var(--lightbox-caption, 0px)) !important; }

/* anchor jumps (#heading, table of contents) stop just below the sticky header; its height: js/header-offset.js */
html { scroll-padding-top: calc(var(--pk-header-height, var(--q2-header-height, 72px)) + 1rem); }

/* the shrunk navbar while scrolled: 2px taller than quark2's 60px (owner) */
.header-animated.scrolled #header .navbar { min-height: 62px; }
@media (max-width: 860px) {
  .header-animated.scrolled .mobile-menu { top: 9px; }   /* (62 - 44) / 2, as quark2 centres it */
}

/* e-mail addresses (Contact Obfuscator) can be clicked but not selected or copied as text (owner) */
.js-contact-obfuscator, .js-contact-obfuscator a { -webkit-user-select: none; user-select: none; }