/* Branding colour */
:root {
  --primary-hue: 340deg;
  --primary-saturation: 100%;
  --primary-lightness: 37%;
  --sichard: hsl(340, 100%, 37%);
  --hextra-max-page-width: 85rem;
}

:root:where(.dark) {
  --primary-hue: 354deg;
  --primary-saturation: 100%;
  --primary-lightness: 80%;
  --sichard: hsl(354, 100%, 73%);
}

/* Quality of life improvements */
a:hover {
  opacity: 50%;
  transition-duration: 70ms;
}

html {
  scroll-behavior: smooth;
}

/* Add brand color to blog post list entries */
main > div.hx\:mb-10 {
  border-left: 5px solid color-mix(in srgb, var(--sichard), transparent 30%);
  padding-left: 1em;
}

/* Force use of brand colors w/o adjustments */
main > div.hx\:mb-10 p > a {
  color: var(--sichard);      /* in blog post list */
}
.content :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--sichard);      /* regular content links */
}

/* Custom blockquote styling */
.content blockquote {
  background-color: color-mix(in srgb, var(--sichard), transparent 96%);
  max-width: fit-content;
  padding: 0 1em;
  border-inline-start: 3px solid var(--sichard);
  font-weight: 300;
  font-style: normal;
}
.content blockquote strong {
  font-weight: bold;
}

.content a.footnote-ref::before {
  content: "["
}
.content a.footnote-ref::after {
  content: "]"
}

/* Adjust theme variables */
@layer theme {
  :root {
     --hx-color-dark: rgb(29, 30, 32);  /* Match papermod's dark background */
  }
}

/* Prevent anchor links from wrapping over */
.content .subheading-anchor::after {
  position: absolute;
}

/* Remove weird drop shadow in TOC sidebar */
.hextra-scrollbar > div {
  box-shadow: none;
}

/* About me */
.hextra-badge.hextra-card-tag {
  top: 10px;
  right: 10px;
}
.hextra-badge.hextra-card-tag > div {
  font-size: 0.7rem;
}

html {
  scroll-padding-top: 5rem;
}

/* pip deprecation shortcode */
div.pip-deprecation {
  --pip-deprecation-color: var(--hx-color-slate-900);
  border-left: 5px solid color-mix(in srgb, var(--pip-deprecation-color), transparent 50%);
  margin: 1em 0;
  padding: 0.75em 1em;
  background-color: color-mix(in srgb, var(--pip-deprecation-color), transparent 97%);
}

.dark div.pip-deprecation {
  --pip-deprecation-color: var(--hx-color-slate-100);
  border-left: 5px solid color-mix(in srgb, var(--hx-color-slate-100), transparent 80%);
}

@media (width >= 800px) {
  .pip-deprecation .header {
    display: grid;
    grid-template-columns: fit-content(80%) 1fr fit-content(25ch);
  }
  .pip-deprecation .title {
    margin: 10px 0 15px 0;
  }
  .pip-deprecation .line {
    position: relative;
    top: -2px;
    margin: auto 2ch;
    height: 2px;
    background-color: color-mix(in srgb, var(--pip-deprecation-color), transparent 80%);
   }
  .pip-deprecation .date {
    display: flex;
    justify-content: right;
    align-items: center;
    font-size: 1rem;
  }
}

.pip-deprecation .title {
  font-size: 1.2rem;
  font-weight: 500;
}
.pip-deprecation .date {
  margin: 10px 0 15px 0;
  color: var(--sichard);
  font-size: 0.9rem;
}
.pip-deprecation .content {
  font-weight: 300;
}

/* Admonitions (why is there no semantic class for this... grr */
.hx\:rounded-lg > p:has(svg) {
  font-weight: bold;
  text-decoration: underline;
  text-decoration-style: dashed;
  margin-bottom: 1rem;
}

/* Blog descriptions */
div.sichard-description {
  margin-top: 1em;
}

/* Increase contrast */
.dark .hextra-card {
  border-width: 2px;
}

.content :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  line-height: 1.6 !important;
}

.footnotes li > p {
  margin-left: var(--hx-spacing);
}

.content video {
  margin-top: calc(var(--hx-spacing) * 6);
}