/*
  Based on Andy Bell's CSS Reset
    https://piccalil.li/blog/a-modern-css-reset/
*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* 'a' elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* 'a' elements without an 'alt' attribute get a red border */
img:not([alt]) {
  outline: 2px solid red;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

    :root {
	/* Page structure */
	--page-width-max: 1200px;

	/* Type scale from https://www.fluid-type-scale.com/, smallest to largest */
	--font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
	--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
	--font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
	--font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
	--font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
	--font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
	--font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);

	/* Space scale from https://utopia.fyi/space/calculator/ */
	--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
	--space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
	--space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
	--space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
	--space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
	--space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
	--space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
	--space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
	--space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

	/* One-up pairs */
	--space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
	--space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
	--space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
	--space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
	--space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
	--space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
	--space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
	--space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

	--flow-space: var(--space-s);

	/* Custom pairs */
	--space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
	--space-3xs-l: clamp(0.3125rem, -0.4484rem + 3.8043vw, 2.5rem);

	/* Use for link hover on most links */
	--radius-blob: 49% 51% 48% 52% / 57% 44% 56% 43%;

	/* Main colors */
	--body-background: #fff1e5;
	/* Accent Colors */
	--dark-accent-color: #005bbb;
	--light-accent-color: lightgray;
	--link-hover-color: yellow;

	/* Brand Styles */
	--brand-font: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
	--brand-color: black;
	--brand-link-radius: var(--radius-blob);

	/* Post Styles */
	--post-title-size: var(--font-size-xl);
	--caption-size: var(--font-size-base);

	/* Book shelf & table of content styles */
	--max-book-width: 200px;
	--enhanced-background: #eee8d5;
	--enhanced-accent-color: #fa604a;

	/* Configure the Pagefind UI */
	--pagefind-ui-scale: 1;
	--pagefind-ui-primary: #034ad8;
	--pagefind-ui-text: #393939;
	--pagefind-ui-background: #ffffff;
	--pagefind-ui-border: #000000;
	--pagefind-ui-tag: #eeeeee;
	--pagefind-ui-border-width: 2px;
	--pagefind-ui-border-radius: 8px;
	--pagefind-ui-image-border-radius: 8px;
	--pagefind-ui-image-box-ratio: 3 / 2;
	--pagefind-ui-font: sans-serif;
}

    /*
  page header
  allows separate styling of other <nav> elements
*/
header ul {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-md);
  justify-content: space-around;
  list-style: none;
  margin-block-end: 0;
  padding: 0;
  text-align: center;
}
header a {
  margin: 0;
  padding: 0 5px;
}
/* highlight the nav element of the current page  */
header a[aria-current="page"] {
  background-color: var(--link-hover-color);
}

    body {
  background-color: var(--body-background); /* color from ft.com background */
  color: black;
  display: grid;
  font-family: var(--brand-font);
  font-size: var(--font-size-md);
  /* forces footer to bottom of page for short pages */
  grid-template-rows: auto 1fr auto;
  line-height: 1.3;
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100dvh;
  width: min(var(--page-width-max), 100vw);
}

/* general styles */
:is(h1, h2) {
  font-size: var(--font-size-xl);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

h3 {
  font-size: var(--font-size-md);
  font-style: italic;
}

p {
  line-height: 1.5;
  text-wrap: pretty;
}

a {
  color: var(--brand-color);
  text-decoration: none;
  border-bottom: 1px solid var(--dark-accent-color);
}
a:is(:hover, :focus) {
  background-color: var(--link-hover-color);
}

ol {
  font-size: var(--font-size-md);
  margin: var(--space-m) auto;
}
ul {
  font-size: var(--font-size-md);
}
li {
  margin-block-end: var(--space-s);
}
li:last-of-type {
  margin-block-end: 0;
}

audio {
  margin-inline: auto;
  border: 1px solid var(--dark-accent-color);
  border-radius: 20px;
}

hr {
  border: none; /* Remove the default border */
  height: 1px; /* Set the height of the line */
  /* background-color: black; Set the background color */
  /* background-color: var(--dark-accent-color); Set the background color */
  margin: 1em auto; /* Add vertical spacing around the line */
  width: 40%;
}

/* default img to handle fluid images */
img {
  max-width: 100%;
  display: block;
}
img[width] {
  width: auto; /* Defer to max-width */
}
img[width][height] {
  height: auto; /* Preserve aspect ratio */
}

/* main content constrained by body width */
.content {
  --gap: clamp(0.25rem, 3vw, 1rem);
  --full: minmax(var(--gap), 1fr);
  --feature: minmax(0, 5rem);
  --popout: minmax(0, 2rem);
  --content: min(65ch, 100% - var(--gap) * 2);

  display: grid;
  place-content: start center;
  grid-template-columns:
    [full-start] var(--full)
    [feature-start] var(--feature)
    [popout-start] var(--popout)
    [content-start] var(--content) [content-end]
    var(--popout) [popout-end]
    var(--feature) [feature-end]
    var(--full) [full-end];
}

.content > * {
  grid-column: full;
}

.post > *,
.plain > * {
  grid-column: content;
}

.popout,
.post > .popout {
  grid-column: popout;
}

.feature,
.post > .feature {
  grid-column: feature;
}

.full,
.post > .full {
  grid-column: full;
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
/* used for skip-to-main-content link */
#skip-to-link {
  background: var(--light-accent-color);
  color: var(--dark-accent-color);
  font-weight: bold;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 0 0 0.25rem 0.25rem;
  position: absolute;
  transform: translateY(-120%);
  transition: transform 325ms ease-in;
}
#skip-to-link:focus {
  transform: translateY(80px);
  opacity: 1;
}
#search {
  margin-block: 1em;
  text-align: left;
}

/* list of All Tags */
.alltags-list * {
  list-style: none;
  text-align: center;
  margin: 1em auto;
  padding-inline: 0;
}

.tagcount {
  font-size: var(--font-size-base);
}

.flow > * + * {
  margin-block-start: var(--flow-space);
}

/* list of posts metadata on home and archive pages */
/* as seen in postlist.njk */
.post-metadata :is(p, ul) {
  font-size: var(--font-size-base);
  font-style: italic;
  margin-block-start: 0.25em;
  text-align: center;
}
.post-taglist {
  display: flex;
  font-size: var(--font-size-base);
  justify-content: center;
  list-style: none;
  margin-block: 0.25em;
  padding: 0;
}
div.notes > ul {
  justify-content: left;
}
.tagged-taglist {
  display: flex;
  font-size: var(--font-size-base);
  justify-content: left;
  list-style: none;
  margin-block: 0;
  /* margin-block: 0.25em; */
  padding: 0;
}

/* full display of a post */
.post {
  grid-column: full;
  display: grid;
  grid-template-columns: inherit;
}
.post .table-of-contents,
.post p.email-comment {
  background-color: var(--enhanced-background);
  border-bottom: 2px solid var(--enhanced-accent-color);
  border-radius: 20px;
  grid-column: content;
  margin: 0 auto;
  margin-block-start: var(--space-s);
  padding: var(--space-s);
  width: fit-content;
}
.post .table-of-contents h2 {
  margin-block-start: var(--space-2xs);
  text-align: center;
}
.post h2 {
  font-size: var(--font-size-lg);
  text-align: left;
  text-wrap: wrap;
}
.post blockquote {
  border-inline-start: var(--space-2xs) solid var(--enhanced-accent-color);
  font-style: italic;
  font-size: var(--font-size-md);
  grid-column: popout;
  margin-block: var(--space-s);
  padding: var(--space-s);
}
.post-nextprev {
  list-style: none;
}
.post-nextprev li:first-child {
  margin-block: var(--space-xs);
}
/* show pictures at 'popout' width */
.post > picture {
  grid-column: popout;
}
/* display code as 'popout' width */
.post > pre {
  grid-column: popout;
  margin-block: var(--space-l);
}

p.email-comment {
  width: fit-content;
}

/* first paragraph after an image is always a caption */
p.caption {
  text-align: center;
  font-size: var(--caption-size);
}
/* end full post elements */

.strikethrough {
  text-decoration: line-through;
}

/* About page specific styles */
.about-img {
  margin: var(--space-m) auto;
  clip-path: circle(50%);
}

.parenthetical {
  font-size: var(--font-size-md);
  font-weight: normal;
  font-style: italic;
}

.social-icons {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
  gap: 1em;
}

.social-icons li {
  position: relative; /* Ensure the pseudo-element is positioned relative to the link */
  margin-block: 0;
  padding: 1.25rem;
}

.social-icons a {
  border-bottom: 0;
  display: inline-block;
  padding: 0.5em;
  transition: transform 0.3s ease;
  text-decoration: none;
}

.social-icons a:hover,
.social-icons a:focus {
  transform: scale(1.1);
  outline: none;
}

.social-icons a::after {
  content: attr(
    data-hover-text
  ); /* Use the data-hover-text attribute for the content */
  position: absolute;
  top: 100%; /* Position below the link */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.social-icons a:hover::after,
.social-icons a:focus::after {
  opacity: 1; /* Show the text when the link is hovered or focused */
}

.social-icons li a img {
  height: 2.5rem;
  width: 2.5rem;
}

.notes {
  font-size: var(--font-size-md);
  padding-block: 2rem 0;
  text-align: left;
}
.blogdate {
  font-size: var(--font-size-base);
  font-style: italic;
}
.blogdescription {
  font-size: var(--font-size-md);
  font-style: italic;
}

/* bookshelf */
.bklist {
  display: grid;
  font-size: var(--font-size-base);
  grid-column: full;
  grid-template-columns: repeat(auto-fit, minmax(var(--max-book-width), 1fr));
  gap: 2rem;
  place-items: start center;
  margin-block-start: 2rem;
}
.bktitle {
  font-weight: bold;
  margin-block-start: var(--space-2xs);
  width: var(--max-book-width);
}
.bkrating {
  color: var(--enhanced-accent-color);
}
.bkitem img {
  width: 180px;
}
.bkitem a:hover img,
.post-card a:hover img {
  outline: 5px solid var(--enhanced-accent-color);
  border-radius: 10px;
}
.post .bookyear {
  background: var(--enhanced-background);
  border-bottom: 2px solid var(--enhanced-accent-color);
  border-radius: 20px;
  font-size: var(--font-size-lg);
  margin-block-start: 2rem;
  margin-inline: auto;
  padding-block: 0.25rem;
  text-align: center;
  width: 80%;
}
.bookyears a {
  margin-inline: 5px;
}

.homegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1rem;
  place-content: center;
}
.homegrid h3 {
  margin-block-end: 0.5rem;
  text-align: center;
}
.subtitle {
  font-size: var(--font-size-md);
  font-style: italic;
  text-align: center;
}

.hometags ul {
  border: 2px dotted var(--enhanced-accent-color);
  border-radius: 20px;
  font-size: var(--font-size-md);
  font-style: italic;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style: none;
  margin-block-start: 1rem;
  padding: 0;
  text-align: center;
}
.hometags li {
  margin: 0;
  padding: 10px 15px;
}

/* position the copy code button */
pre:has(code) {
  position: relative;
  margin: 5px 0;
  padding: 1.75rem 0 1.75rem 1rem;
}

pre:has(code) button {
  position: absolute;
  top: 3px;
  right: 3px;
  border-radius: 5px;
  font-size: var(--font-size-sm);
}

.stripe-buy-button {
  display: inline-block;
  margin: auto;
  width: 50%;
}

/*
  "scroll to top" SVG image link
  lives inside of the <header> markup
*/
.stt {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  /* background: #93bfcf; */
  background: black
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E")
    center no-repeat;
  box-shadow: 0 0.25rem 0.5rem 0 gray;
  /* opacity: 0.5; */
}
.stt:hover,
.stt:focus {
  opacity: 1;
  /* opacity: 0.5; */
  background: var(--link-hover-color)
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='black' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E")
    center no-repeat;
  /* background-color: var(--link-hover-color); */
  border-radius: 50%;
}
.stt:active {
  opacity: 0.5;
}

    /* page footer */
body > footer {
  font-size: var(--font-size-base);
  background-color: var(--light-accent-color);
  padding-block: 0.5em;
  margin-block-start: 1em;
}
body > footer > p {
  margin: 0;
  text-align: center;
}
/* end page footer */

    /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  ::view-transition-old,
  ::view-transition-new {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* View transitions */
@view-transition {
  navigation: auto;
}