/* v13 */

/*
 * Reset default browser styles
 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*
 * Body styles - center the content block
 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #e8e8e8;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

/*
 * Limit width of main content and all children *but not the lightbox*
 */
body > :not(.glightbox-container) {
    max-width: 800px;
    width: 100%;
}

/*
 * Banner images full width
 */
img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

/*
 * Headings left-aligned
 */
h1, h2, h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: left;
}

/*
 * Paragraph styling
 */
p {
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: left;
}

/*
 * Links
 */
a {
    color: #b12930;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*
 * Lists: numbers/bullets inside box
 */
ul, ol {
    list-style-position: outside;
    padding-left: 2em;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

ul li, ol li {
    margin-bottom: 0.5em;
}

/*
 * Shared monospace font for all code
 */
pre,
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
                 "Liberation Mono", monospace;
}

pre {
    background-color: #f3f3f3;
    border-left: 4px solid #c0c6cc;
    padding: 0.9em 1.1em !important;
    margin: 1.2em 0;
    overflow-x: auto;
    line-height: 1.45;
    border-radius: 4px;
}

/*
 * Inline code styling
 */

p code,
li code,
td code {
    background-color: #e8ebee;
    padding: 0.15em 0.35em;
    border-radius: 3px;
}

pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

pre code,
code 
{ 
    padding: 0 !important;
}

pre.shell-session .command {
    font-weight: bold;
}

blockquote {
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 4px solid #c0c6cc;
    background-color: #eeeeee;
    color: #555;
}

/*
 *  Tables (e.g. cycling pages)
 */

table {
    border-collapse: collapse;  /* merge borders of adjacent cells (i.e. single line, not double line) */
    width: 100%;                /* optional, but usually desirable */
}

table th, table td {
    border: 1px solid #999;
    padding: 4px 8px;
    text-align: left;
}

/* Tables with headers in a *column* rather than in row still wind up with a header *row* because
   of how markdown recognises code for tables. This is unfortunate, we we can hide the header *row*
   with some CSS (below). Note that this applies to *all* tables! But I don't use tables except on the
   cycling pages where these header *columns* are needed */

table thead {
    display: none;		/* don't display header row */
}

/* 'td:first-child' means the first cell within the parent (i.e. the row in which the cell is). Over an 
    entire table this equates to the first column (assuming the first cell is not a 'th', but a 'td', which
    for a markdown table is the case). */

table td:first-child {
    width: 1%; 			/* make first column very very narrow ... */
    white-space: nowrap;	/* ... but still wide enough to not wrap */
}

/*
 *  Gallery thumbnail styles
 */

/* The "Justified" Container */
.pswp-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 0;
}

/* The Thumbnail Links */
.pswp-gallery a {
    height: 150px;
    flex-grow: 1;
}

/* The Images */
.pswp-gallery a img {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
    border-radius: 2px;
    cursor: pointer;
}

/* Ensure the last row doesn't stretch weirdly */
.pswp-gallery::after {
    content: "";
    flex-grow: 1000;
}

/*
 *  Gallery (lightbox) style overrides

/* Ensure GLightbox ignores the 800px body limit and stays centered */
.glightbox-container {
    max-width: none !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important; /* This pulls it out of the body's centering logic */
}

/* Ensure the image inside the lightbox is centered */
.gslide-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}