@font-face {
  font-family: Gilroy-Light;
  src: url(/static/fonts/Gilroy-Light.otf);
  font-display: swap;
}

@font-face {
  font-family: Gilroy-Bold;
  src: url(/static/fonts/Gilroy-Semibold.otf);
  font-display: swap;
}

@font-face {
  font-family: Lora-Regular;
  src: url(/static/fonts/Lora-Regular.ttf);
  font-display: swap;
}

@font-face {
  font-family: Lora-Bold;
  src: url(/static/fonts/Lora-Bold.ttf);
  font-display: swap;
}

:root,
:root[data-theme="light"] {
  --font-famly: var(--font-family-sans);
  --font-family-sans: Gilroy-Light, sans-serif;
  --font-family-sans-bold: Gilroy-Bold, sans-serif;
  --font-sans-weight-bold: 300;
  --font-family-serif: Lora-Regular, serif;
  --font-family-serif-bold: Lora-Bold, serif;

  --color-dark-primary: #011627;
  --color-dark-secondary: #2e3532;
  --color-light-primary: #dad7cd;
  --color-accent-one: #bc8034;
  --color-accent-two: #b50917;

  /*
    d9cab3 -> 011627 = 11.39:1 
    d9cab3 -> 2e3532 = 8.72:1 
    d9cab3 -> bc8034 = 2.32:1
    d9cab3 -> b50917 = 4.32:1
  */
  --text-color: var(--color-dark-primary);
  --heading-color: var(--color-dark-secondary);
  --anchor-color: var(--color-dark-secondary);
  --background-color: var(--color-light-primary);
  --border-color: var(--color-accent-one);

  --logo: url(/static/icons/bs_dark.svg);
  --logo-color: var(--heading-color);
  --highlight-background: var(--color-accent-one);
  --highlight-color: var(--color-dark-primary);

  --clamped-body: clamp(1rem, 1rem + 0.5vw, 1.5rem);
  --clamped-logo: clamp(3rem, calc(3rem + 0.5vw), 4.5rem);
  --clamped-heading-one: clamp(1.75rem, calc(1.75rem + 0.5vw), 2.625rem);
  --clamped-heading-two: clamp(1.5rem, calc(1.5rem + 0.5vw), 2.25rem);
  --clamped-heading-three: clamp(1.25rem, calc(1.25rem + 0.5vw), 1.875rem);
  --claimed-body-small: clamp(0.8rem, calc(0.8rem + 0.5vw), 1.2rem);

  --multiplier: 32;
  --clamped-width: clamp(calc(1rem * var(--multiplier)),
      calc((1rem + 0.5vw) * var(--multiplier)),
      calc(1.5rem * var(--multiplier)));
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Use a lighter font for the dark style */
    --font-family-sans: Gilroy-Light, sans-serif;
    --font-sans-weight-bold: 100;

    /* 
      011627 -> dad7cd = 12.73:1
      011627 -> 2e3532 = 1.45:1
      011627 -> bc8034 = 5.47:1
      011627 -> b50917 = 2.63:1
    */
    --text-color: var(--color-light-primary);
    --heading-color: var(--color-accent-one);
    --anchor-color: var(--color-accent-one);
    --background-color: var(--color-dark-primary);
    --border-color: var(--color-dark-secondary);

    --logo: url(/static/icons/bs_light.svg);
    --logo-color: var(--text-color);
    --highlight-background: var(--color-accent-one);
    --highlight-color: var(--color-dark-primary);
  }
}

:root[data-theme="dark"] {
  /* Match the above */
  --font-family-sans: Gilroy-Light, sans-serif;
  --font-sans-weight-bold: 100;
  --text-color: var(--color-light-primary);
  --heading-color: var(--color-accent-one);
  --anchor-color: var(--color-accent-one);
  --background-color: var(--color-dark-primary);
  --border-color: var(--color-dark-secondary);

  --logo: url(/static/icons/bs_light.svg);
  --logo-color: var(--text-color);
  --highlight-background: var(--color-accent-one);
  --highlight-color: var(--color-dark-primary);
}

html,
body {
  height: 100%;
}

/* Set a focus ring that uses my favorite color
   and is very visible :) */
*:focus {
  outline: 3px dashed var(--color-accent-two);
  outline-offset: 2px;
}

/* Standard syntax */
::selection,
::-moz-selection {
  background-color: var(--highlight-background);
  color: var(--highlight-color);
}

/* Set the default color and font for the page */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-family-serif);
}

/* Set the heading color and font */
h1,
h2,
h3,
h4,
h5 {
  color: var(--heading-color);
  font-family: var(--font-family-sans);
}

/* Style buttons to match anchors */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Set the anchor, button color and have the hover match
   the focus ring */
a,
button {
  color: var(--anchor-color);
  text-decoration: underline;
}

a:hover,
button:hover {
  color: var(--anchor-color);
  outline: 3px dashed var(--color-accent-two);
  outline-offset: 2px;
}

/* Set the color of horizontal rules to match 
   borders */
hr {
  color: var(--border-color);
}

/* Set up the responsive typography for the site. I'm working off of a 16px
   base size things should adapt for users who have changed their base font size.
   On larger devices the font size should scale up as needed to keep things
   readable */
p {
  font-size: var(--clamped-body);


  /* Set strong elements in the paragraph to use the bold font */
  strong {
    font-family: var(--font-family-serif-bold);
    font-weight: 300;
  }
}

h1 {
  font-size: var(--clamped-heading-one);
}

h2 {
  font-size: var(--clamped-heading-two);
}

h3 {
  font-size: var(--clamped-heading-three);
}

/* Level four headings will match the paragraph but become
   bold */
h4 {
  font-size: var(--clamped-body);
  font-family: var(--font-family-sans-bold);
  font-weight: var(--font-sans-weight-bold);
}

/* Screen reader support */
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Add support for skip links */
.skip-link:not(:focus) {
  position: absolute;
  height: 1px;
  width: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Support progressive enhancement by hiding javascript
   elements that enhance site usage (theme toggle) */
.js-only {
  display: none;
}

.site-header,
main,
.site-footer {
  max-width: var(--clamped-width);
  margin: 0 auto;
}

/* Style the header */
.site-header {
  padding: 16px;
  border-bottom: solid 1px var(--border-color);

  .home-link {
    color: var(--logo-color);
    font-size: var(--clamped-logo);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    line-height: 1;
  }

  .home-link:hover {
    color: var(--logo-color);
  }


  .home-link::before {
    content: ' ';
    background: var(--background-color) var(--logo) no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: 80px 80px;
    width: 80px;
    height: 80px;
    display: inline-block;
  }

  nav {
    font-size: var(--clamped-heading-three);
    font-family: var(--font-family-sans);
    display: flex;
    gap: 16px;
    margin-top: 16px;
    justify-content: center;
    flex-wrap: wrap;

    a {
      text-decoration-thickness: 2px;
    }
  }

  @media (min-width: 768px) {
    .home-link {
      flex-direction: row;
      justify-content: center;
    }
  }

  @media (min-width: 1024px) {
    .home-link {
      flex-direction: row;
      justify-content: start;
    }

    nav {
      font-size: var(--clamped-heading-two);
      justify-content: start;
    }
  }
}

/* Style the footer */
.site-footer {
  border-top: solid 1px var(--border-color);
  font-size: var(--clamped-body);
  padding: 16px;

  h2 {
    font-size: var(--clamped-body);
    margin-bottom: 8px;
  }

  /* Style the contact list by hiding the terms */
  .contact-list {
    margin-bottom: 16px;

    dt {
      position: absolute;
      left: -10000px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
  }

  @media (min-width: 768px) {
    .contact-list {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: repeat(4, auto);
      column-gap: 48px;

      dd:nth-of-type(1) {
        grid-column: 1 / 1;
        grid-row: 1 / 1;
      }

      dd:nth-of-type(2) {
        grid-column: 1 / 1;
        grid-row: 2 / 2;
      }

      dd:nth-of-type(3) {
        grid-column: 2 / 2;
        grid-row: 1 / span 4;
      }

      dd:nth-of-type(4) {
        grid-column: 1 / 1;
        grid-row: 3 / 3;
      }

      dd:nth-of-type(5) {
        grid-column: 1 / 1;
        grid-row: 4 / 4;
      }
    }
  }

  .footer-actions {
    display: flex;
    justify-content: space-between;
    gap: 16px;

    button {
      text-align: left;
    }
  }
}

/* Technical styling */
code {
  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
  line-height: 1.5;
  font-size: var(--clamped-body);
  word-break: break-all;
  background-color: color-mix(in srgb, var(--heading-color), transparent 71%);
}

.codehilite {
  padding: 16px;
  overflow-x: scroll;

  code {
    background-color: unset;
  }

  &.has-magnifier {
    padding-top: 42px;
    position: relative;

    .open-code-button {
      font: var(--font-family-sans);
      /* Always light because its on the code background*/
      color: var(--color-light-primary);
      position: absolute;
      top: 5px;
      right: 8px;
      text-decoration: none;
      font-size: var(--clamped-heading-one);
      line-height: 1;
    }
  }
}

dialog:has(.codehilite.has-magnifier) {
  .codehilite.has-magnifier {
    padding-top: 16px;
  }

  .open-code-button {
    display: none;
  }
}

/* Style blog content */
.post {
  max-width: var(--clamped-width);

  /* Use px for a consistent spacing if the font size increases */
  padding: 16px;

  h1,
  h2,
  h3,
  h4,
  p {
    margin-bottom: 16px;
  }

  /* if the title has a timestamp or tags with it, tighten it up */
  .post-title:has(+.post-meta) {
    margin-bottom: 8px;
  }

  .post-meta {
    display: flex;
    justify-content: start;
    font-size: var(--clamped-body);
    margin-bottom: 16px;
  }

  .post-meta:has(.posted-on):has(.posted-in) {
    .posted-on::after {
      content: '|';
      padding: 0 8px;
    }
  }

  /* Timestamps are like little headers */
  .posted-on {
    font-family: var(--font-family-sans);
    font-size: var(--clamped-body);
  }

  .posted-in {
    display: flex;
    gap: 8px;

    list-style: none;
    text-indent: 0;
    padding-left: 0;
    margin-top: -2px;
    /* Inline with the date */

    li:not(:last-child)::after {
      content: ', '
    }
  }

  /* Push the header down */
  h2 {
    margin-top: 16px;
  }

  hr {
    border: dashed 1px var(--text-color);
  }

  /* Center images */
  img {
    margin: 0 auto;
  }

  /* Unless they're inline and we're wide enough */
  @media (min-width: 544px) {
    .inline-image {
      width: 288px;
    }

    .inline-image.inline-left {
      float: left;
      margin-right: 16px;
    }

    .inline-image.inline-right {
      float: right;
      margin-left: 16px;
    }
  }

  /* Callouts for archived content */
  .callout {
    background-color: color-mix(in srgb, var(--color-accent-two), transparent 84%);
    border: solid 1px color-mix(in srgb, var(--color-accent-two), transparent 71%);
    border-radius: 2px;
    margin-bottom: 16px;
    padding: 16px;

    p:last-of-type {
      margin: 0;
    }
  }

  >.codehilite {
    margin-bottom: 16px;
    /* When inside a blog post, we have to scroll */
    overflow-x: scroll;

    code {
      font-size: var(--clamped-body-small);
    }
  }

  /* Quotes */
  blockquote {
    font-style: italic;
    font-size: var(--clamped-body);
    padding: 16px 16px 32px;
    line-height: 2;
  }

  /* Lists */
  ul,
  ol {
    font-size: var(--clamped-body);
    list-style-position: inside;
    text-indent: -24px;
    padding-left: 24px;
    margin-bottom: 16px;
  }

  .recent-posts {
    font-size: var(--clamped-body);

    h2 {
      margin-bottom: 8px;
      margin-top: 32px;
      font-size: var(--clamped-heading-one);
    }

    h2:first-of-type {
      margin-top: 0;
    }

    time {
      display: block;
      font-family: var(--font-family-sans);
      font-size: var(--clamped-body);
      margin-bottom: 16px;
    }
  }

}

/* Style modals */
body:has(dialog[open]) {
  overflow: hidden;
}

dialog[open] {
  padding: 0;
  border: 0;

  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: inherit;
  min-width: 100%;
  height: inherit;
  min-height: 100%;

  background-color: color-mix(in srgb, var(--color-dark-secondary), transparent 84%);
  backdrop-filter: blur(1px);

  header {
    display: flex;
    flex-direction: row;
    gap: 32px;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 16px;

    h2,
    button {
      color: var(--text-color);
      line-height: 1;
      margin-bottom: 0;
    }

    button {
      font-family: var(--font-family-sans);
      font-size: var(--clamped-heading-one);
      text-decoration: none;
    }
  }

  header:has(h2.sr-only) {
    justify-content: end;
  }

  article {
    border: solid 1px var(--border-color);
    background: var(--background-color);
    padding: 16px;
    max-width: 100vw;
    max-height: 100dvh;
    overflow: scroll;
  }
}

/* Make everything black and white for printing */
@media print {

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  .codehilite,
  code,
  code *,
  .callout,
  a {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
  }

  .site-header,
  .site-footer {
    display: none;
  }

  main,
  .post {
    max-width: unset;
  }

  a {
    text-decoration: underline;
  }

  img {
    filter: grayscale(100%);
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  .codehilite.has-magnifier {
    padding-top: 16px;
  }

  .open-code-button {
    display: none;
  }
}