/* Global variables */
:root {
  --background: #f9f6f1;
  --foreground: #f67cbc;
  --primary: #9ceca6;
  --primary-foreground: #624226;
  --muted: #f9f6f1;
  --muted-foreground: #ffc8e8;
  --border: #d4d4d8;
  --font-mono: Maple Mono;
  --font-sans: Papernotes;
}

/* hover colors using `data-hover-color` and `data-hover-background` attributes */
a:hover {
  cursor: pointer;

  color: attr(data-hover-color type(<color>), var(--foreground));
  background: attr(data-hover-background type(<color>), var(--background));
}

a:hover .has-hover-color {
  fill: currentColor !important;
  color: attr(data-hover-color type(<color>), var(--foreground));
}

a:hover .has-hover-stroke {
  stroke: currentColor;
  color: attr(data-hover-stroke type(<color>), var(--foreground));
}

/* custom styling stuff */

nav[data-topnav] {
  font-size: var(--text-7);
}

@media screen and (max-width: 600px) {
  .hide-md {
    display: none;
  }
}

@media screen and (max-width: 450px) {
  .hide-s {
    display: none;
  }
}

@media screen and (max-width: 390px) {
    .hide-post-socials {
        display: none;
    }
}

@media screen and (min-width: 600px) {
  .show-md {
    display: none;
  }
}

.badge:hover {
  color: var(--background);
  background-color: var(--foreground);
}

.footer {
  margin: var(--space-6) 0;
}

.text-light {
  color: var(--muted-foreground);
}

:root {
  font-size: 20px;
}


.post_list {
     list-style-type: none;
     padding-left: 0;
}

.post_list > li {
    margin-bottom: 1rem;
}

.post_title {
  text-decoration: none;
  color: var(--foreground);
}

.post_title:hover {
  cursor: pointer;
  color: var(--primary);
}

/* so the title and date dont look like seperate things */
.post_title > h5 {
    margin-bottom: 0;
}

.post_date {
  opacity: 0.75;
  font-size: 0.9rem;
}

/* no underline on footnote links */
a[role="doc-noteref"],
a[role="doc-backlink"] {
  text-decoration: none;
}

.anchor {
    color: var(--foreground);
    text-decoration: none;
}

/* code switching stuff */

.code-switcher > pre:nth-child(1) > code > span {
    /* transition: transform 1s ease-in-out, visibility 0s 1s ease-in; */
    overflow: visible;
    display: inline-block;

    transition: visibility 0s;
    visibility: visible;
}

.code-switcher > pre:nth-child(2) {
    transition: visibility 0s 1s;
    visibility: hidden;
}

.code-switcher {
    position: relative;
}

.code-switcher > pre {
    position: absolute;
    top: 0;
}


/* hljs */

code,
code > *,
code > * > * {
    font-family: "Maple Mono" !important;
    background-color: var(--background);
}

pre {
    background-color: var(--background);
    border-style: solid;
    line-height: normal;
}

pre > code {
    color: #643f61;
}

.hljs-string,
.hljs-number,
.hljs-shell-new {
    color: #f07930;
}

.hljs-comment {
    color: rgb(167, 167, 167);
}

.hljs-keyword,
.hljs-built_in {
    color: var(--muted-foreground);
}

.hljs-operator {
    color: #643f61;
}

.hljs-shell-error {
    color: #fe7c6b;
}

.hljs-title,
.hljs-shell-info {
    color: #ff7777;
}

.hljs-shell-warning {
    color: #ffd596;
}

.hljs-variable {
    color: var(--foreground);
}

.hljs-addition {
    color: #c8ffa7;
    background-color: #c8ffa730;
}

.hljs-deletion {
    color: #fe7c6b;
    background-color: #fe7c6b30;
}

/* websitecarbon.com overrides */

#wcb.carbonbadge {
  font-size: inherit !important;
  text-align: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

#wcb.carbonbadge sub {
  vertical-align: inherit !important;
  position: inherit !important;
  top: inherit !important;
  font-size: inherit !important;
}

#wcb #wcb_2,
#wcb #wcb_a,
#wcb #wcb_g {
  display: initial !important;
  justify-content: inherit !important;
  align-items: inherit !important;
  text-align: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
  text-decoration: inherit !important;
  margin: inherit !important;
}
#wcb #wcb_a,
#wcb #wcb_g {
  padding: 0 0.3em 0 0 !important;
  border: initial !important;
}
#wcb #wcb_g {
  border-radius: initial !important;
  background: inherit !important;
  border-right: initial !important;
  min-width: initial !important;
}
#wcb #wcb_a {
  border-radius: initial !important;
  border-left: initial !important;
  background: inherit !important;
  color: var(--primary) !important;
  font-weight: inherit !important;
  border-color: initial !important;
  text-decoration: underline !important;
}
#wcb.wcb-d #wcb_a {
  color: inherit !important;
  background: inherit !important;
  border-color: inherit !important;
}
#wcb.wcb-d #wcb_2 {
  color: inherit !important;
}

/* chilp styling */

.comment-widget {
  /* custom for the ollie.earth theme */
  .widget,
  .comment {
    line-height: calc(var(--leading-normal) / 1.5);
  }

  .widget {
    -webkit-box-shadow: -9px 6px 10px -7px rgba(0, 0, 0, 0.5);
    box-shadow: -9px 6px 10px -7px rgba(0, 0, 0, 0.5);
    background-color: color-mix(in srgb, var(--background), white 6%);
  }

  .comment {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    background-color: var(--muted);
    border-radius: var(--radius-medium);
    	--this-inset: 0.6rem;

    header {
      display: flex;
      align-items: center;
      margin: var(--this-inset);
      margin-top: 1rem;
      .meta {
        display: flex;
        align-items: stretch;
        flex-direction: column;
      }
    }
    .content {
        margin-top: var(--space-1);
	    padding-inline-start: var(--this-inset);
    }
    footer {
      padding: 0.1px;
      div.my-5 {
        margin-left: 2rem;
        margin-bottom: 2rem;
        position: relative;
      }
    }
  }
  /* re-applies some TW settings for the chilp scope only. */
  .bg-base-200\/70 {
    background-color: color-mix(in srgb, var(--muted), black 6%);
  }

  .btn {
    --_hov: color-mix(in srgb, var(--primary), white 25%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-7);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    white-space: nowrap;
    text-decoration: none;
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius-medium);
    border-width: 1px;
    border-style: solid;
    border-image: none;
    border-color: rgb(from rgb(255, 255, 255) r g b / 0.15)
      rgb(from rgb(0, 0, 0) r g b / 0.2) rgb(from rgb(0, 0, 0) r g b / 0.2)
      rgb(from rgb(255, 255, 255) r g b / 0.15);
    transition:
      background-color var(--transition-fast),
      opacity var(--transition-fast),
      transform var(--transition-fast);
  }

  .btn-sm {
    margin-top: var(--space-1);
    padding: 0 var(--space-1);
    max-width: fit-content;
    max-height: fit-content;
    font-size: 0.8rem;
  }

  .badge {
    display: inline-flex;
  }
  .badge-sm {
    margin: 4px;
    padding: 4px;
    max-width: fit-content;
    max-height: 1rem;
    font-size: 0.8rem;

  }
  [class~="bg-[#006aff]"]{
    background: #006aff;
  }
  [class~="bg-[#ed5345]"]{
    background: #006aff;
  }
  .bg-black {
    background: black;
  }

  .text-white {
    color: white;
  }

  .text-xs {
    font-size: 0.8rem;
  }

  .float-right {
    float: right;
  }


  .absolute.right-8 {
    right: 1rem;
    position: absolute;
  }

  .absolute.right-8:hover {
    color: var(--background);
    background: var(--foreground);
  }

  .border-b-2 .border-dotted {
    border-bottom: dotted 2rem var(--primary-foreground);
  }

  /* recommended oat enhancements replacing DaisyUI components */
  .chilp-oat-enhance-hide {
    display: none;
  }

  .chilp-oat-enhance-inset-2em {
    padding-inline-start: 2em;
  }

  header p.text-xs,
  .chilp-oat-enhance-inset-1em {
    padding-inline-start: 1em;
  }

   .chilp-oat-enhance-inset-quoteblock {
       padding-bottom: var(--space-2);
   }

  .chilp-oat-enhance-inset-blueskyreply,
  .chilp-oat-enhance-inset-witchskyreply,
  .chilp-oat-enhance-inset-blackskyreply {
    /* We reset an oat-set value here. */
    gap: unset !important;
  }

  .chilp-oat-enhance-inset-blueskyreply {
    color: white;
    background-color: rgb(0, 106, 255);

    &::after {
      content: "luesky";
    }
  }

  .chilp-oat-enhance-inset-blueskyreply:hover {
    color: rgb(0, 106, 255);
    background-color: white;
  }

  .chilp-oat-enhance-inset-blackskyreply {
    color: white;
    background-color: black;

    &::after {
      content: "lacksky";
    }
  }

  .chilp-oat-enhance-inset-blackskyreply:hover {
    background-color: white;
    color: black;
  }

  .chilp-oat-enhance-inset-witchskyreply {
    color: white;
    background-color: rgb(237, 83, 69);

    &::after {
      content: "itchsky";
    }
  }

  /* invert color on hover */
  .chilp-oat-enhance-inset-witchskyreply:hover {
    background-color: white;
    color: rgb(237, 83, 69);
  }

  /* remove hover background from the 'a' containing the different bluesky instance buttons */
  div.flex.gap-2.items-center > a:hover {
    background: none;
  }

  .display-name {
      display: flex;
      align-items: center;
  }
}