/* Base styles */
body {
  margin: 0;
  font-family: "Roboto", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fafafa;
}

/* Container for alignment */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
header {
  background-color: #fff;
  border-bottom: 6px solid #cc3525;
  padding: 0.75rem 0;
}

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-brand {
  font-size: 1.3rem;
}

.site-brand .pkorg {
  color: #cc352f;
  font-weight: 700;
}

.site-brand .sep {
  color: #333;
  margin: 0 0.25rem;
}

.site-brand .category {
  font-weight: 300;
  color: #000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.site-title a {
  color: #eee;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.4rem;
}

.site-title a:hover {
  text-decoration: underline;
}

/* Navigation styling */
header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.4rem;
}

header nav a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

header nav a.active {
  font-weight: bold;
  border-bottom: 2px solid #cc3525;
}

header nav a:hover {
  text-decoration: underline;
}

/* Style the back link differently */
header nav a.back-link {
  font-weight: 600;
  border-right: 1px solid #ccc;
  padding-right: 1rem;
  margin-right: 1rem;
}

.top-nav a {
  text-decoration: none;
  color: #333;
}

.top-nav a:hover {
  text-decoration: underline;
}

.top-nav a.active {
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px solid #cc3525;
}

/* Responsive: stack nav links below title on narrow screens */
@media (max-width: 600px) {
  .header-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  header nav {
    margin-top: 0.5rem;
  }
}

/* Main content */

/* The article title at the top of the page */
main > h2 {
  color: #CC352F; /* title: rust */
  font-size: 2.5rem;
  margin-top: 1rem;
  margin-bottom: 0.7rem;
}

main .subtitle {
  font-size: 1.2rem;
  color: #888;
  font-weight: 600;
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
}

/* Author and date: plain text, italic, left-justified, below subtitle */
main .byline { 
  font-size: 0.95rem;
  color: #666;
  text-align: left;
  font-weight: normal;
  font-style: italic;
  margin-top: 0rem;
  margin-bottom: 2rem;
}

/* Author line under title */
main .author {
  font-size: 0.95rem;
  color: #666;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Headings inside the article content */
main article h1,
main article h2 {
  color: #008080; /* Teal/green */
}

main article h1 {
  font-size: 1.8rem;
  margin-top: 2rem;
}

main article h2 {
  font-size: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.3rem;
}

main article h3 {
  font-size: 1.2rem;
  margin-top: 1.2rem;
  color: #333;
}

main article a {
  color: #802b2e; /* Dark rust */
  text-decoration: none;
}

main article a:hover {
  text-decoration: underline;
}

main article strong {
  color: #8B0000; /* dark red */
}

main h1,
main h2,
main h3,
main hr {
  clear: both;
}

/******************* Image, Figure, Caption Styling *******************/

/* ---------- Utilities ---------- */
:root {
  --img-small: 220px;   /* Your current approach */
  --img-medium: 300px;  /* For larger images that need more detail */
  --img-large: 400px;   /* For hero images or key visuals */
}

/* Optional clearfix helper — put .clearfix on the element after a floated figure/img */
main article .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ---------- Base figure/image styles ---------- */

/* Default figure: acts like a block in normal flow; no forced width */
main article figure {
  display: block;
  margin: 1rem auto;
  margin-inline: 0; /* Reset browser default 40px inline margins */
}

/* Captions under the image, centered */
main article figcaption {
  font-size: 0.9rem;
  line-height: 1.35;
  color: #555;
  margin-top: 0.35rem;
  text-align: center;
}

/* All images: shared base styles */
main article img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0.75rem auto; /* default for standalone images */
  border: none;
}

/* Images inside figures get no vertical margin (figure handles spacing) */
main article figure img {
  margin: 0 auto;
}

/* Optional visual utilities for any image */
main article img.photo {
  box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
}

main article img.bordered {
  border: 1px solid #000;
  padding: 2px;
  box-sizing: border-box;
}

/* Size utilities */
main article figure img.small,
main article img.small {
  width: min(100%, var(--img-small));
  height: auto;
}

main article figure img.medium,
main article img.medium {
  width: min(100%, var(--img-medium));
  height: auto;
}

main article figure img.large,
main article img.large {
  width: min(100%, var(--img-large));
  height: auto;
}

/* Constrain ONLY non‑floated images on wider screens */
@media (min-width: 768px) {
  main article figure:not(.float-left):not(.float-right) img,
  main article img:not(.float-left):not(.float-right) {
    max-width: 80%;
  }
}

/* ---------- Floats (figure & standalone img) ---------- */

/* Force floated figures to be exactly the image width */
main article figure.float-left,
main article figure.float-right {
  display: inline-block !important;
  position: relative !important;
  width: var(--img-small) !important;     /* Default to small size */
  min-width: var(--img-small) !important;
  max-width: var(--img-small) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  vertical-align: top !important;
}

/* Adjust figure width for medium images */
main article figure.float-left:has(img.medium),
main article figure.float-right:has(img.medium) {
  width: var(--img-medium) !important;
  min-width: var(--img-medium) !important;
  max-width: var(--img-medium) !important;
}

/* Adjust figure width for large images */
main article figure.float-left:has(img.large),
main article figure.float-right:has(img.large) {
  width: var(--img-large) !important;
  min-width: var(--img-large) !important;
  max-width: var(--img-large) !important;
}

/* For non-small images without specific size classes, use medium as default */
main article figure.float-left:not(:has(img.small)):not(:has(img.medium)):not(:has(img.large)),
main article figure.float-right:not(:has(img.small)):not(:has(img.medium)):not(:has(img.large)) {
  width: var(--img-medium) !important;
  min-width: var(--img-medium) !important;
  max-width: var(--img-medium) !important;
}

/* Float directions and margins */
main article figure.float-left {
  float: left !important;
  margin: 0.25rem 1rem 0.75rem 0 !important;
}

main article figure.float-right {
  float: right !important;
  margin: 0.25rem 0 0.75rem 1rem !important;
}

/* Images inside floated figures */
main article figure.float-left img,
main article figure.float-right img {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
}

/* Small images get their specific size */
main article figure.float-left img.small,
main article figure.float-right img.small {
  width: var(--img-small) !important;
  height: auto !important;
  max-width: none !important;
}

/* Captions in floated figures */
main article figure.float-left figcaption,
main article figure.float-right figcaption {
  display: block !important;
  text-align: center !important;
  margin-top: 0.35rem !important;
  width: 100% !important;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
  color: #555 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Standalone floated images */
main article img.float-left {
  float: left !important;
  margin: 0.25rem 1rem 0.75rem 0 !important;
}

main article img.float-right {
  float: right !important;
  margin: 0.25rem 0 0.75rem 1rem !important;
}

/* Size classes for standalone floated images */
main article img.small.float-left,
main article img.small.float-right {
  width: var(--img-small) !important;
  height: auto !important;
}

main article img.medium.float-left,
main article img.medium.float-right {
  width: var(--img-medium) !important;
  height: auto !important;
}

main article img.large.float-left,
main article img.large.float-right {
  width: var(--img-large) !important;
  height: auto !important;
}

/* Mobile responsive */
@media (max-width: 700px) {
  main article figure.float-left,
  main article figure.float-right,
  main article img.float-left,
  main article img.float-right {
    float: none !important;
    display: block !important;
    width: auto !important;
    min-width: auto !important;
    max-width: 100% !important;
    margin: 1rem auto !important;
  }

  main article figure.float-left img,
  main article figure.float-right img,
  main article img.float-left,
  main article img.float-right {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
}

/******************* End of Image, Figure, Caption Styling *******************/

/* Image row utility */
.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.5rem;
  justify-content: center;
  overflow: visible; /* let zoomed images spill outside */
}

.image-row p {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  width: 250px;
}

/* Support both structures: <div.image-row><p><img></p>… and <div.image-row><img>… */
.image-row img {
  display: block;
  width: 250px;       /* same visual width as the old <p> wrapper */
  height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  transition: transform 0.2s ease;
  position: relative; /* allow z-index to take effect */
  z-index: 0;
  will-change: transform;
}

/* Keep the old selector too (harmless if <p> wrappers are present) */
.image-row p img {
  width: 100%;
}

/* hover zoom */
.image-row img:hover,
.image-row p img:hover {
  transform: scale(1.5);
  z-index: 10;
  /* optional: add a subtle shadow while zoomed */
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

/* Post list - styles for generated index pages */
.post-list {
  list-style: none;
  padding: 0;
}

.post-list li {
  margin: 0.75rem 0;
}

.post-list a {
  text-decoration: none;
  color: #004466;
  font-weight: 600;
  font-size: 1.1rem;
}

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

.post-list .description {
  display: block;
  color: #555;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

/* Basic table styling */
main article table {
  border-collapse: collapse;
  margin: 1rem auto;
  font-size: 0.9rem;
  width: auto;
  max-width: 100%;
}

/* Table header row */
main article thead th {
  background-color: #fafafa;
  border-bottom: 1px solid #000;
  font-weight: bold;
  text-align: left;
  padding: 0.4rem 0.6rem;
}

/* Table body rows */
main article tbody tr:nth-child(even) {
  background-color: #fafafa;
}

main article tbody tr:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Table cells */
main article th,
main article td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

/* Remove extra spacing in multi-line text */
main article td p {
  margin: 0;
  line-height: 1.3;
}

/* Code blocks (multi-line) */
main article pre {
  background: #f0f0f0;
  padding: 1rem;
  overflow-x: auto;
  color: #003366;
  border: none;
  font-size: 0.9rem;
  line-height: 1.4;
  border-radius: 4px;
}

/* Remove borders on nested code elements */
main article pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* Reset markdown code block appearance */
main article pre code.language-markdown {
  font-weight: normal;
  font-size: 0.95rem;
}

/* Inline code */
main article code {
  background: #f0f0f0;
  padding: 0.2rem 0.4rem;
  color: #003366;
  border: none;
  border-radius: 3px;
}

/* Reset inline code style when used inside headings */
main article h1 code,
main article h2 code,
main article h3 code,
main article h4 code,
main article h5 code,
main article h6 code,
main article blockquote h1 code,
main article blockquote h2 code,
main article blockquote h3 code,
main article blockquote h4 code,
main article blockquote h5 code,
main article blockquote h6 code {
  color: inherit;
  background: none;
  padding: 0;
  border: none;
  font-size: inherit;
}

/* Default blockquote styling */
main article blockquote {
  border-left: 3px solid #aaa;
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  color: #666;
  background: #f9f9f9;
  font-style: italic;
}

/* remove the space created by markdown's <p>..</p> in blockquotes */
main article blockquote p {
  margin: 0;
}

main article blockquote.highlight-quote {
  background: #f5f5f5;
  border: 1px solid #999;
  border-radius: 6px;
  padding: 1rem 1.5rem;
  color: #800000;
  margin: 0.5rem 0 1.0 0;
  font-style: normal;
}

.callout {
  background: #f5f5f5;
  border: 1px solid #999;
  border-radius: 6px;
  padding: 1rem 1.5rem;
  color: black;
  padding: 0 1em;
  margin: 0;
}

/* Local navigation */
.local-nav {
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem
}

.local-nav a {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  text-decoration: none;
  color: #004466;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.local-nav a:hover {
  background: #e0e0e0;
  border-color: #999;
}

.local-nav a.active {
  background: #cc3525;
  color: #fff;
  border-color: #cc3525;
}

/* Definition lists */
main article dl {
  margin: 1rem 0;
}

main article dt {
  font-weight: bold;
  color: #333;
  font-size: 1.0rem;
  margin-top: 0.5rem;
}

main article dd {
  margin: 0 0 0.75rem 1.5rem;
  line-height: 1.5;
}

/* Box with rounded corners and smaller text */
.note-box {
  display: flow-root; /* establishes a new BFC; avoids underlapping floats */
  /* If you prefer wider support, you can use: overflow: auto; instead of display: flow-root; */
  border: 1px solid #aaa;
  border-radius: 8px;
  padding: 0.8em 1em;
  margin: 0.75em 0;
  background-color: #fcf8f0;
  font-size: 0.9em;
  line-height: 1.4;
  color: #555;
  font-style: normal; /* Reset italics from parent elements like blockquotes */
}

/* gray background */
.note-box-gray {
  display: flow-root; /* establishes a new BFC; avoids underlapping floats */
  border: 1px solid #aaa;
  border-radius: 8px;
  padding: 0.8em 1em;
  margin: 0.75em 0;
  background-color: #f5f5f5;
  font-size: 0.9em;
  line-height: 1.4;
  color: #555;
  font-style: normal; /* Reset italics from parent elements like blockquotes */
}

/* Banner image for auto-generated pages */
.banner {
  text-align: center;
  margin-bottom: 1.5rem;
}

.banner img.banner-img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 4px;
}

/* =========================================
   LISTS 
   ========================================= */

/* Base styling for all lists */
main article ul,
main article ol {
  margin-left: 0;
  padding-left: 1.4rem;
  list-style-position: outside;
}

/* Top-level list items */
main article li {
  margin-bottom: 0.25rem;
  padding-left: 0;
  text-indent: 0;
}

/* Nested unordered lists */
main article ul ul {
  list-style: none;
  margin-left: 0;
  padding-left: 1.4rem;
}

main article ul ul li::before {
  content: "– ";
  color: #333;
  position: absolute;
  margin-left: -1.2rem;
}

main article ul ul li {
  position: relative;
  padding-left: 0.4rem;
  text-indent: -0.2rem;
  margin-bottom: 0.15rem;
}

/* Nested ordered lists */
main article ol ol {
  list-style-type: lower-alpha;
  margin-left: 0;
  padding-left: 1.4rem;
}

main article ol ol li {
  padding-left: 0;
  text-indent: 0;
  margin-bottom: 0.25rem;
}

/* Multicol layout: top-level only */
.multicol-flex > ul,
.multicol-flex > ol,
.multicol > ul,
.multicol > ol,
.multicol-3 > ul,
.multicol-3 > ol {
  column-gap: 2rem;
  column-count: 2;
  padding-left: 1.4rem;
}

@media (min-width: 1000px) {
  .multicol-flex > ul,
  .multicol-flex > ol,
  .multicol-3 > ul,
  .multicol-3 > ol {
    column-count: 3;
  }
}

@media (max-width: 700px) {
  .multicol-flex > ul,
  .multicol-flex > ol,
  .multicol > ul,
  .multicol > ol,
  .multicol-3 > ul,
  .multicol-3 > ol {
    column-count: 1;
  }
}

/* Prevent nested lists from being split into columns */
.multicol-flex ul ul,
.multicol-flex ol ol,
.multicol ul ul,
.multicol ol ol,
.multicol-3 ul ul,
.multicol-3 ol ol {
  column-count: 1 !important;
}

/* Footer */
footer {
  background-color: #f0f0f0;
  text-align: left;
  padding: 1rem 0;
  margin-top: 2rem;
  font-size: 0.8rem;
  color: #333;
}

footer .updated {
  border-top: 1px solid #c00;
  display: block;
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
}

/* Responsive typography */
@media (max-width: 800px) {
  /* Article title */
  main > h2 {
    font-size: 2.0rem;
  }

  /* Markdown content headings */
  main article h1 {
    font-size: 1.6rem;
  }

  main article h2 {
    font-size: 1.3rem;
  }
}
/* Print: reduce font size; add margins */
@media print {
  @page {
    margin-top: 2cm; /* Sets the top margin to 2 centimeters */
    margin-bottom: 2cm; /* Sets the bottom margin to 2.5 centimeters */
  }
  html {
    font-size: 80%;
  }
  main article {
    padding-left: 0;
    padding-right: 0;
    font-size: 80%;
  }
  main article pre {
    margin-top: -1rem;
    font-size: 1.0rem;
  }
}

/* avoid overlaps */
/* Clear floats for structural blocks, but not paragraphs or notes */
main article blockquote,
main article dl,
main article table,
main article pre {
  clear: both;
}