/* variables ---------------- */
:root {
    --font-size-body: 1rem;
  
    --color-background: #fff;
    --color-text: #3d3d3d;
    /* --color-link: #00479d;
    --color-link-hover: #2b5180;
    --color-link-visited: #224c7f; */
    --color-link: #027eab;
    --color-link-hover: var(--color-link);
    --color-link-visited: var(--color-link);
    --color-border: gray;
    
    --width: 650px;
    --img-padding: 3px;
    --img-max-height: 700px;
  
    --font-family-body: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  }
  
@media (prefers-color-scheme: dark) {
    :root {
      --color-background: #1a1a1a;
      --color-text: #d0d0d0;
      /* --color-link: #cdf;
      --color-link-hover: #def;
      --color-link-visited: #aab8d5; */
      --color-link: #a3d5e7;
      --color-link-hover: var(--color-link);
      --color-link-visited: var(--color-link);
    }
  }

/* reset ---------------- */

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

/* Enable scroll snap only when viewport is pretty wide */
/* 1000px filters out phones in portrait and landscape, but not iPads in landscape */
@media (min-width: 1000px) {
    html {
        scroll-snap-type: y proximity;
    }
}

details summary { 
    cursor: pointer;
}
  
details summary > * {
display: inline;
}

figure {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

/* colors ---------------- */

body {
    color: var(--color-text);
    background: var(--color-background)
}

a:link, summary {
    color: var(--color-link);
    text-decoration: underline;
}

a:visited {
    color: var(--color-link-visited);
    text-decoration: underline;
}

a:hover, a:visited:hover, summary:hover {
    color: var(--color-link-hover);
    text-decoration: none
}

/* sizing, spacing, and design ---------------- */

body {
    margin: 0em auto;
    max-width: var(--width);
    padding: 0 1.5em;
    font: var(--font-size-body);
    font-family: var(--font-family-body);
    color: var(--color-text);
    line-height: 1.5;
}

p, details{
    margin-block-start: 1em;
    margin-block-end: 1em;
}

ul {
    margin-block-start: 0.5em;
    margin-block-end: 1em;
    padding-left: 2em;
}

h1, h2, h3 {
    line-height: 1;
    margin-block-start: 0.83em;
    margin-block-end: 0.5em;
}

h2, h3 {
    padding-top: 1em;
}

h1 {
    font-size: 1.8rem;
    font-weight: normal;
}
  
h2 {
    font-size: 1.3rem;
    font-weight: 500;
}

h3 {
    font-size: 1rem;
    font-weight: bold
}

hr {
    margin-block-start: 2em;
    margin-block-end: 2em;
    border-width: 0.5px;
    width: 40%;
    color: var(--color-border);
}

li p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

blockquote {
    margin-left: 1em;
    margin-right: 0em;
    padding-left: 1em;
    padding-right: 1em;
    border-left: 3px solid var(--color-text);
} 

figcaption {
    font-style: italic;
    font-size: 0.9em;
    text-align: center;
    margin-top: 0.2em;
    margin-bottom: 1.3em;
    margin-left: 1em;
    margin-right: 1em;
}

section.footnotes {
    font-size: 0.9em;
    font-style: italic;
}

/* table padding */
th, td {
    padding-right: 20px;
}

/* Default table styling - gray borders, centered */
table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

table th,
table td {
    border: 1px solid var(--color-border);
    padding: 0.2em 0.5em;
}

/* Override for post listing tables */
.posts-table {
    border-collapse: separate;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.5em;
    table-layout: fixed;
    width: 100%;
    max-width: var(--width);
}

.posts-table th,
.posts-table td {
    border: none;
    padding: 0;
    padding-right: 20px;
}

/* First row is <thead>; with table-layout: fixed, column width must be set on th too */
.posts-table th:first-child,
.posts-table td:first-child {
    width: 2.8em;
    white-space: nowrap;
    vertical-align: top;
}

.post-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 0.75em;
    margin-block-end: 0.9em;
}

.post-date {
    margin: 0;
}

.post-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em 0.5em;
    font-size: 0.8rem;
}

.post-tags a {
    display: inline-block;
    padding: 0.1em 0.4em;
    border: 1px solid var(--color-border);
    border-radius: 0;
    /* text-decoration: none; */
}

.post-tags a:link,
.post-tags a:visited {
    color: var(--color-link);
}

.post-tags a:hover {
    color: var(--color-link-hover);
}

/* Tags page: horizontal bars scaled to max tag count */
.tags-chart {
    width: 100%;
    max-width: var(--width);
    border-collapse: collapse;
}

.tags-chart td {
    border: none;
    padding: 0.1em 0.35em;
    vertical-align: middle;
}

.tags-chart td:first-child {
    white-space: nowrap;
    width: 1%;
}

.tags-chart__bar {
    display: block;
    box-sizing: border-box;
    padding: 0.1em 0.35em;
    text-align: left;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    background: var(--color-link);
    color: var(--color-background);
}

/* table of contents styling */
#TOC {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    padding: 1em;
    margin: 1.5em 0;
}

#TOC ul {
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding-left: 1.2em;
}

/* TOC title */
#TOC::before {
    content: "Contents";
    font-weight: bold;
    display: block;
    margin-bottom: 0.5em;
    color: var(--color-text);
}

.date {
    font-style: italic;
}

/* image sizing */

/* Apply sizing constraints to images within figures */
.img-1 img, .img-1 video, .img-1-med img, .img-1-max img, .img-1-max-nosnap img, .img-2 img, .img-3 img, .img-about img {
    max-height: var(--img-max-height);
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--img-padding);
    padding-bottom: var(--img-padding);
}

/* Full-width centered images */
figure.img-1 {
    max-width: calc(100% - 2*var(--img-padding));
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Videoloop: caption sits close under the video (Markdown wraps text in <p> with default margins). */
figure.videoloop.img-1 video {
    padding-bottom: 0;
}

figure.videoloop figcaption {
    margin-top: 0.35em;
}

figure.videoloop figcaption > :first-child {
    margin-block-start: 0;
}

figure.videoloop figcaption > :last-child {
    margin-block-end: 0;
}

/* Maximum size images (100vw x 100vh) - breaks out of container */
figure.img-1-max, figure.img-1-max-nosnap {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    display: block;
    scroll-snap-align: center;
}

figure.img-1-max-nosnap {
    scroll-snap-align: none;
}

figure.img-1-max img, figure.img-1-max-nosnap img {
    max-height: calc(100vh - 3em);
    object-fit: contain;
    margin-block-start: 1.5em;
}

/* Medium-sized centered images */
figure.img-1-med {
    max-width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Half-width images (for side-by-side layouts) */
figure.img-2 {
    max-width: calc(50% - 2*var(--img-padding));
    display: inline-block;
    vertical-align: top;
    padding-left: var(--img-padding);
    padding-right: var(--img-padding);
}

/* Third-width images (for three-column layouts) */
figure.img-3 {
    max-width: calc(33.33% - 2*var(--img-padding));
    display: inline-block;
    vertical-align: top;
    padding-left: var(--img-padding);
    padding-right: var(--img-padding);
}

/* About page image with text wrapping */
figure.img-about {
    float: right;
    max-width: 13em;
    margin: 0 1rem 1rem 1rem;
    padding: 0;
    pointer-events: none;
}

@media print {
    body {
        max-width: none
    }
}

/* header settings ---------------- */
/* #header a {
    color: var(--color-text);
    text-decoration-line: none;
}

#header a:hover {
    color: var(--color-link-hover)
} */

#header h1 {
    margin-bottom: 0em;
    margin-top: 1em;
    font-size: 1.3rem;
}

#header p {
    margin-top: 0.2em;
}

#header hr, #footer hr {
    margin-block-start: 1em;
    margin-block-end: 1em;
    width: 100%
}

nav a {
    margin-right: 10px;
}