html {
  box-sizing: border-box;
  scroll-padding-block-start: var(--scroll-pad);
}

*,
*::before,
*::after {
  border: 0 none;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

.input-keyboard :focus {
  outline: 2px dashed silver;
}

body {
  font-family: var(--body-font);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-medium);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-base-primary);
  transition-property: background-color, color;
  transition-duration: var(--duration-default);
  transition-timing-function: ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

body.no-scroll {
  overflow: hidden;
}

a,
summary,
summary > * {
  text-decoration: underline;
  cursor: pointer;
  color: var(--body-link-alt);
}

a:hover,
a:focus,
summary:hover,
summary:focus,
dt[data-destination]:hover {
  color: var(--body-link-color);
}

button[data-share] {
  background-color: unset;
  cursor: pointer;
  color: var(--body-link-alt);
  stroke: var(--body-link-alt);
}

.page-content a:not(.link) {
  color: var(--octo-blue);
}

.page-content a:hover,
.page-content a:focus {
  color: var(--body-link-color);
}

blockquote {
  background: var(--bg-color-hint);
  border-radius: var(--standard-radius);
  font-size: var(--font-size-large);
  margin: var(--block-gap) 0;
  padding: 1.5rem 2.5rem 1.5rem 4.5rem;
  position: relative;
}

blockquote::before {
  content: ' ';
  position: absolute;
  left: 1.5rem;
  top: 1.8rem;
  width: 28px;
  height: 21px;
  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjgnIGhlaWdodD0nMjEnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTI3Ljg1NSAyLjhjLTIuMDI3LjY0LTMuNjU0IDEuNi00Ljg4IDIuODgtMS4xNzQgMS4yOC0xLjYyNyAyLjkzMy0xLjM2IDQuOTYuNTg2LjQ4IDEuNDEzLjk4NyAyLjQ4IDEuNTIgMS4wNjYuNDggMiAuODUzIDIuOCAxLjEyLjIxMy44NTMuMjEzIDEuNjggMCAyLjQ4LS4yMTQuOC0uNTYgMS41Mi0xLjA0IDIuMTZhNy42MTYgNy42MTYgMCAwMS0xLjY4IDEuNTJjLS42NC4zNzMtMS4yMjcuNTg3LTEuNzYuNjQtMS44NjctLjE2LTMuNDk0LS44NTMtNC44OC0yLjA4LTEuMzg3LTEuMjI3LTIuMDgtMi45ODctMi4wOC01LjI4IDAtMS4zMzMuMjEzLTIuNjY3LjY0LTRhMTIuNTkgMTIuNTkgMCAwMTIuMDgtMy42OGMuOTA2LTEuMTczIDIuMDUzLTIuMTg3IDMuNDQtMy4wNEMyMyAxLjA5MyAyNC42NTUuNDUzIDI2LjU3NS4wOGwxLjI4IDIuNzJ6bS0xNC41NiAwYy0yLjAyNy42NC0zLjY1NCAxLjYtNC44OCAyLjg4LTEuMTc0IDEuMjgtMS42MjcgMi45MzMtMS4zNiA0Ljk2LjU4Ni40OCAxLjQxMy45ODcgMi40OCAxLjUyIDEuMDY2LjQ4IDIgLjg1MyAyLjggMS4xMi4yMTMuODUzLjIxMyAxLjY4IDAgMi40OC0uMjE0LjgtLjU2IDEuNTItMS4wNCAyLjE2YTcuNjE1IDcuNjE1IDAgMDEtMS42OCAxLjUyYy0uNjQuMzczLTEuMjI3LjU4Ny0xLjc2LjY0LTEuODY3LS4xNi0zLjQ5NC0uODUzLTQuODgtMi4wOC0xLjM4Ny0xLjIyNy0yLjA4LTIuOTg3LTIuMDgtNS4yOCAwLTEuMzMzLjIxMy0yLjY2Ny42NC00YTEyLjU5MSAxMi41OTEgMCAwMTIuMDgtMy42OEM0LjUyIDMuODY3IDUuNjY4IDIuODUzIDcuMDU1IDJjMS4zODYtLjkwNyAzLjA0LTEuNTQ3IDQuOTYtMS45MmwxLjI4IDIuNzJ6JyBmaWxsPScjMTExODFEJy8+PC9zdmc+);
  background-repeat: no-repeat;
}

blockquote cite {
  display: block;
  text-align: end;
  margin-block-start: var(--block-gap);
  font-style: italic;
  font-size: var(--font-size-regular);
}

/* TODO: Refactor code snippets. This needs to be a component. */
code {
  font-family: var(--code-font);
  background-color: var(--navy-200);
}

pre {
  padding: 0.5rem 1rem;
  white-space: break-spaces;
  background-color: var(--code-background) !important;
  border-radius: var(--standard-radius);
  font-family: var(--code-font);
  color: var(--code-color);
}

pre code {
  background-color: unset;
}

.dark pre {
  background-color: var(--color-base-primary) !important;
  filter: invert(98%) hue-rotate(180deg);
}

/* TODO: Also will be removed once component is implemented */
div.info code:not(pre code),
div.success code:not(pre code),
div.warning code:not(pre code),
div.problem code:not(pre code),
div.question code:not(pre code),
div.hint code:not(pre code) {
  background-color: var(--code-background);
  color: var(--code-color);
}

html[data-theme='dark'] {
  pre.astro-code code .line {
    filter: invert(98%) hue-rotate(180deg) brightness(1.1);
  }
}

em {
  font-style: italic;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: 1.2;
  font-weight: 800;
  color: var(--color-heading);
  font-family: var(--heading-font);
  letter-spacing: -0.02em;
}

.ruler-25 {
  border-top: 2px solid var(--black);
  width: 25%;
  margin: 0 0 1rem 0;
}

h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-heading);
  padding: 2rem 0 0.5rem 0;
  font-family: var(--heading-font);
  letter-spacing: -0.02em;
  transition: color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

img {
  max-width: 100%;
  height: auto;
  background-color: var(--color-base-primary);
}

/* Image component */
.image {
  border-radius: 0.9375rem;
  border: 0.0625rem solid var(--navy-200);
  background: var(--grey-lighter);
  display: flex;
  flex-direction: column;
  gap: 1.56rem;
  padding: 2rem;
  position: relative;
}

@media (max-width: 930px) {
  .image {
    padding: 1rem;
  }
}

.image .magnify-container {
  position: absolute;
  right: 0;
}

.image__img {
  border-radius: 0.6875rem;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  width: fit-content;
  margin: 0 auto;
}

.image__caption {
  color: var(--color-heading);
  font-size: 1.125rem;
  font-weight: 400;
  text-align: left;
}

/* TODO: Once all images are used with Image component these styles should be removed */
figure > p > img {
  display: flex;
  margin: 0 auto;
  border-radius: 0.9375rem;
}

figure:has(p > img) {
  width: fit-content;
}

figure:has(p > img) p {
  border: 0.0625rem solid var(--navy-200);
  border-radius: 0.9375rem;
  background: var(--grey-lighter);
  padding: 2rem;
}

@media (max-width: 930px) {
  figure:has(p > img) p {
    padding: 1rem;
  }
}

input {
  padding: 0.5em;
  border-radius: 0.3em;
}

mark {
  color: unset;
  background-color: transparent;
  font-weight: bold;
}

strong {
  font-weight: bold;
  font-family: var(--bold-font);
}

.page-content > *,
.page-content > blockquote > *:not(:last-child),
.page-content > div.info > *:not(:last-child),
.page-content > div.success > *:not(:last-child),
.page-content > div.warning > *:not(:last-child),
.page-content > div.problem > *:not(:last-child),
.page-content > div.question > *:not(:last-child),
.page-content > div.hint > *:not(:last-child) {
  margin-block-end: 1rem;
}

/* TODO: This is ugly but global styles above requires this to be set - Layout refactor is required to do first, then remove this. */
.page-content > div.info > .copy-container,
.page-content > div.success > .copy-container,
.page-content > div.warning > .copy-container,
.page-content > div.problem > .copy-container,
.page-content > div.question > .copy-container,
.page-content > div.hint > .copy-container {
  margin: 0;
}

.page-content ul,
.page-content ol {
  margin-inline-start: 2rem;
}

/* Boxes */

.hint,
.info,
.success,
.warning,
.problem {
  border-radius: 0 var(--standard-radius) var(--standard-radius) 0;
  margin: var(--block-gap) 0;
  padding: 1.5rem;
  border-inline-start: 3px solid #000;
}

.hint {
  color: var(--color-hint);
  border-color: var(--border-color-hint);
  background-color: var(--bg-color-hint);
}

.info {
  color: var(--color-info);
  border-color: var(--border-color-info);
  background-color: var(--bg-color-info);
}

.success {
  color: var(--color-success);
  border-color: var(--border-color-success);
  background-color: var(--bg-color-success);
}

.warning {
  color: var(--color-warning);
  border-color: var(--border-color-warning);
  background-color: var(--bg-color-warning);
}

.problem {
  color: var(--color-problem);
  border-color: var(--border-color-problem);
  background-color: var(--bg-color-problem);
}

.question {
  background: var(--bg-color-hint);
  border-radius: var(--standard-radius);
  margin: var(--block-gap) 0;
  padding: 1.5rem;
}

.question .answer {
  font-size: var(--font-size-large);
  font-weight: bold;
  padding-block-start: 0.5em;
}

.question h3,
.question h4,
.question h5,
.question h6 {
  padding-block-start: 0.5em;
  font-size: var(--font-size-xlarge);
}

.bookmark-link {
  border-radius: var(--standard-radius);
  color: var(--fore-link);
  display: inline-block;
  font-size: 1.2rem;
  height: 1.2em;
  margin-inline-start: 0.3rem;
  opacity: 0.5;
  overflow: hidden;
  text-decoration: none;
  top: 0.5em;
  opacity: 0;
  width: 1.25em;
  white-space: nowrap;
}

h2:hover .bookmark-link,
h3:hover .bookmark-link,
h4:hover .bookmark-link,
h5:hover .bookmark-link,
h6:hover .bookmark-link,
.bookmark-link:focus {
  opacity: 1;
}

.bookmark-link::before {
  content: '\f0c1 ';
  /* Link */
  font-family: fa-solid;
}

/* Tables */

.table-wrap {
  overflow: auto;
  max-width: 100%;
}

table {
  border-collapse: collapse;
}

table thead {
  font-weight: 700;
}

table tr {
  border-bottom: 1px solid var(--octo-blue);
}

table td {
  padding: 0.8rem 1rem;
}

table tr td:first-child {
  background-color: var(--bg-color-hint);
}

table th {
  padding: 0.8rem 1rem;
}

.credits table,
.credits thead,
.credits tbody,
.credits th,
.credits td,
.credits tr {
  display: block;
}

.credits table {
  margin-block: 1rem;
}

.credits thead {
  display: none;
}

.credits td:before {
  font-weight: bold;
}

.credits td:nth-of-type(1):before {
  content: 'Package: ';
}

.credits td:nth-of-type(2):before {
  content: 'Authors and/or maintainers: ';
}

.credits td:nth-of-type(3):before {
  content: 'Find it at…: ';
}

.credits td:nth-of-type(4):before {
  content: 'License: ';
}

/* Skip Links */
nav.skip-links {
  position: fixed;
  z-index: 12;
}

nav.skip-links a {
  background-color: var(--color-base-primary);
  clip: rect(0 0 0 0);
  min-width: 20vw;
  overflow: hidden;
  padding: 1em;
  position: fixed;
  top: 0;
  z-index: 15;
  text-align: center;
  display: inline-block;
  margin: -1px;
  width: 1px;
}

nav.skip-links a:focus {
  clip: auto;
  height: auto;
  margin: 0.2em;
  overflow: visible;
  width: auto;
}

/* Site Header */

.octo-header-bkg {
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
  background-color: var(--header-bg);
  min-height: 82px;
  position: fixed;
  width: 100%;
  top: 0;
  /* z-index due to conflict with octo-title-bkg */
  z-index: 11;
  background-color: var(--color-base-primary);
  transition: background-color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.octo-header {
  margin-inline: var(--page-inline-margin);
  font-size: var(--font-size-medium);
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

@media (max-width: 1130px) {
  .octo-header {
    gap: 0.5rem;
  }
}

.octo-header .logo {
  max-height: 45px;
}

.octo-site-nav ul {
  list-style: none;
  text-align: center;
}

.octo-site-nav li {
  display: inline-block;
}

.overlay .octo-site-nav {
  margin: 3rem 10% 0 10%;
}

.overlay .octo-site-nav li {
  display: block;
  margin: 1em;
  text-align: start;
}

.octo-site-nav a {
  border-radius: var(--standard-radius);
  text-decoration: none;
  color: var(--color-menu-link);
  padding: 0.6em 1em;
}

.octo-site-nav a:hover,
.octo-site-nav a:focus {
  color: var(--color-menu-link-alt);
}

.octo-header > a.navigation-icon {
  display: none;
  text-align: end;
  stroke: var(--header-link-alt);
  width: 40px;
  height: 40px;
}

@media (max-width: 1130px) {
  .octo-header {
    grid-template-columns: auto 40px;
  }

  .octo-header > nav,
  .octo-header > a.button--primary {
    display: none;
  }

  .octo-header > a.navigation-icon {
    display: inline-block;
  }
}

.octo-header__wrapper--left {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: 0.5rem;
}

/* Hide badge due to not enough space */
@media (max-width: 360px) {
  .octo-header__wrapper--left .badge {
    display: none;
  }
}

/* Badge */
.badge {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.75rem;
  gap: 0.75rem;
  border-radius: 0.5rem;
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 138%;
  transition-property: background-color, color;
  transition-timing-function: ease-in-out;
  transition-duration: var(--duration-default);

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

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

/* Theme switcher */

.theme-switcher {
  position: relative;
  display: inline-block;
  width: 11.1875rem;
  height: 2.5rem;
  margin-left: 1rem;
}

/* Hide theme switcher in header on mobile */
@media screen and (max-width: 1130px) {
  .octo-header .octo-header__wrapper--left > .theme-switcher {
    display: none;
  }
}

.site-nav__mobile > .theme-switcher {
  display: block;
  margin: 1rem auto;
}

.theme-switcher input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.theme-switcher__label {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: var(--white);
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: var(--header-bg);
  border: 0.0625rem solid var(--theme-switcher-border);
  border-radius: 1.75rem;
  position: relative;
  transition: background-color var(--duration-default) ease-in-out;
}

.switch-slider {
  --toggle-sides-offset: 0.375rem;
  position: absolute;
  width: calc((100% - var(--toggle-sides-offset)) / 2);
  height: calc(100% - var(--toggle-sides-offset));
  left: calc(var(--toggle-sides-offset) / 2);
  background-color: var(--blue-500);
  border-radius: 3.375rem;
  transition: transform var(--duration-default) ease-in-out;
}

.theme-switcher__icon {
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  z-index: 2;
}

.theme-switcher.dark-mode .switch-slider {
  transform: translateX(100%);
}

.theme-switcher.dark-mode .theme-switcher__icon--light {
  color: #7c98b4;
}

.theme-switcher.dark-mode .theme-switcher__icon--light svg path {
  fill: #7c98b4;
}

.theme-switcher:not(.dark-mode) .theme-switcher__icon--dark {
  color: #557999;
}

.theme-switcher:not(.dark-mode) .theme-switcher__icon--dark svg path {
  fill: #557999;
}

.theme-switcher input:disabled + .theme-switcher__label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* */

.last-updated {
  color: var(--color-subtitle);
  margin-block-start: var(--block-gap);
}

.docs-home {
  text-align: center;
  margin-block-start: 5vh;
  margin-block-end: 5vh;
}

/* Separator */
.separator {
  width: 100%;
  height: 0.0625rem;
  background-color: var(--separator-color);
  margin: 3rem 0 3.75rem;
  transition: background-color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

/* Link */
.link {
  display: inline-flex;
  gap: 1rem;
  text-decoration: none;
  color: var(--octo-blue-lightest);
  font-family: var(--bold-font);
  font-size: var(--font-size-large);
  font-weight: 500;
  align-items: center;
  transition: color var(--duration-default) ease-in-out;
}

.link:hover,
.link:focus {
  color: var(--octo-blue);
}

.link__icon-wrapper {
  flex: 1;
  max-width: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.link__icon {
  width: 100%;
}

.link__content {
  /* TODO: remove together with simple-grid width 100% */
  width: auto !important;
}

.simple-grid .astro-code {
  text-align: left;
}

/* Article Nav */
.article-nav {
  margin-right: 1rem;
}

@media (max-width: 1130px) {
  .article-nav {
    margin-bottom: 2rem;
  }
}

.article-nav .article-nav__details .article-nav__title::marker {
  content: '';
  display: none;
}

.article-nav .article-nav__details .article-nav__title::after {
  content: '\f078';
  font-family: fa-solid;
  float: right;
  transition: transform var(--duration-default) ease-in-out;
  display: none;
}

.article-nav .article-nav__details[open] .article-nav__title::after {
  transform: rotate(180deg);
}

.article-nav__title {
  pointer-events: none;
}

@media (max-width: 1130px) {
  .article-nav__title {
    pointer-events: auto;
  }

  .article-nav .article-nav__details .article-nav__title::after {
    content: '\f078';
    font-family: fa-solid;
    float: right;
    transition: transform var(--duration-default) ease-in-out;
    display: block;
  }
}

.article-nav__title {
  color: var(--color-heading);
  font-family: var(--bold-font);
  font-size: var(--font-size-medium);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.article-nav .separator {
  margin: 1rem 0 0.69rem;
}

.article-nav__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style: none;
  gap: 0.5rem;
}

.article-nav__item {
  cursor: pointer;
}

.article-nav__link {
  display: flex;
  color: var(--color-subtitle);
  font-size: var(--font-size-medium);
  line-height: 2.6rem;
  font-weight: 400;
  text-decoration: none;
  transition-property: font-weight, color, transform;
  transition-timing-function: ease-in-out;
  transition-duration: var(--duration-default);

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

.article-nav__link.highlight,
.article-nav__item:hover .article-nav__link {
  font-weight: 600;
  color: var(--badge-color);
}

.article-nav__item:hover .article-nav__link {
  transform: translateX(0.5rem);
}

.article-nav .article-nav__item--level-3 {
  padding-inline-start: 1em;
}

.article-nav .article-nav__item--level-4 {
  padding-inline-start: 2em;
}

.article-nav .article-nav__item--level-5 {
  padding-inline-start: 3em;
}

.article-nav .article-nav__item--level-6 {
  padding-inline-start: 4em;
}

/* Card */
.card {
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--navy-200);
  transition: box-shadow 300ms ease-in-out;
  overflow: hidden;

  .card__meta {
    margin-top: auto;
  }

  /* Author in Card styles */
  .author {
    padding-bottom: 0;
    padding-top: 2rem;
    margin-top: auto;
    border-bottom: none;
    gap: 1rem;

    .author__name {
      color: var(--color-text-secondary);
      font-weight: bold;
    }
  }
}

.card:hover {
  box-shadow: var(--card-shadow);
}

.card:not(.card--related-topics):hover .card__image {
  transform: scale(1.3);
}

/* padded variant */
.card--padded .card__image-wrapper {
  background-color: #c3cdd5;
  padding: 1rem 2rem 0;
}

/* related-topics variant */
.card--related-topics {
  box-shadow: var(--card-related-topics-shadow);
}

.card--related-topics:hover,
.card--related-topics .card__link:focus-visible {
  box-shadow: var(--card-related-topics-hover-shadow);
}

.card--related-topics:hover .card__label svg,
.card--related-topics .card__link:focus-visible .card__label svg {
  transform: translateX(0.5rem);
}

.card--related-topics .card__image-wrapper {
  padding: 0.75rem 0.75em 0;
}

.card--related-topics .card__image {
  border-radius: 0.625rem;
}

.card--related-topics .card__copy {
  padding: 0 1.25rem 1.25rem;
}

.card--related-topics .card__title {
  color: var(--color-text);
  font-family: var(--bold-font);
  font-size: var(--font-size-large);
  font-weight: 700;
}

.card__image {
  border-radius: 0.625rem 0.625rem 0rem 0rem;
  transition: transform 300ms ease-in-out;
}

.card__link {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  text-decoration: none;
  height: 100%;
}

.card__image-wrapper {
  display: flex;
  height: 9rem;
  overflow: hidden;
  box-sizing: border-box;
}

.card__image {
  width: 100%;
  object-fit: cover;
}

.card__copy {
  padding: 0 1.25rem 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  text-align: left;
  flex-grow: 1;
}

.card__title {
  font-size: var(--font-size-regular);
  font-weight: 600;
  color: var(--color-heading);
}

.card__description {
  font-size: var(--font-size-medium);
  font-weight: 400;
  color: var(--blue-grey);
}

.card__bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--badge-color);
  font-size: 1rem;
  font-weight: 500;
  padding-bottom: 0.25rem;
  border-bottom: 0.0625rem solid var(--badge-color);
}

.card__label svg {
  transition: transform 300ms ease-in-out;
}

/* IconTile */
.icon-tile {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--icon-tile-border);
  background: var(--icon-tile-background);
  padding: 1.25rem 1.75rem 1rem;
  text-decoration: none;
  transition-property: background, box-shadow, border-color;
  transition-duration: var(--duration-default);
  transition-timing-function: ease-in-out;
  height: fit-content;
  box-sizing: border-box;
}

.icon-tile:hover {
  background: var(--icon-tile-background-hover);
  box-shadow: 0px 4px 10px 0px rgba(13, 128, 216, 0.2);
  border-color: var(--icon-tile-border-hover);
}

.icon-tile__icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 4rem;
}

.icon-tile__icon {
  max-width: 4rem;
  width: 100%;
}

.icon-tile__content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.icon-tile__title {
  color: var(--color-heading);
  font-family: var(--bold-font);
  font-size: var(--font-size-regular);
  font-weight: 600;
  /* Override global styles */
  padding: 0;
}

.icon-tile__description {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: 400;
}

/* Breadcrumbs */

.site-breadcrumbs ol {
  font-size: 0.8rem;
  margin: 0 auto;
  padding: 1rem 0 2rem 0;
}

.site-breadcrumbs li {
  display: inline;
  padding: 0.2em;
}

.site-breadcrumbs li::before {
  content: '\f054';
  /* Chevron Right */
  color: var(--color-menu-link);
  font-family: fa-solid;
  font-size: 0.8em;
  padding: 0 0.2rem 0 0;
}

.site-breadcrumbs li:first-child::before {
  content: '';
  padding: 0;
}

.site-breadcrumbs a {
  color: var(--color-menu-link);
  text-decoration: none;
  transition: color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.site-breadcrumbs a:hover,
.site-breadcrumbs a:focus {
  color: var(--color-menu-link-alt);
}

.site-breadcrumbs a[aria-current],
.site-breadcrumbs a[aria-current]:hover,
.site-breadcrumbs a[aria-current]:focus {
  text-decoration: none;
  color: var(--color-text);
}

/* Navigation */

.site-nav,
.side-nav {
  align-self: start;
  overflow: overlay;
  position: sticky;
  font-size: var(--font-size-small);
  font-weight: 400;
  /* line-height: 2.8; */
}

.site-nav {
  background-color: var(--bg-color-menu);
  height: calc(100vh - 75.2px);
  top: 75.2px;
  transition: background-color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  .theme-switcher {
    margin-left: 2.31rem;
    margin-top: 2rem;
  }
}

.side-nav {
  margin-block-start: 10vh;
  height: calc(100vh - 75.2px - 10.625rem);
  top: 10.625rem;
}

.site-nav > ul,
.side-nav > ul {
  padding-inline-end: 1rem;
  padding-block-end: 3rem;
}

.site-nav ul {
  padding-inline-start: 1.25rem;
}

.site-nav > .site-nav__list {
  padding: 1.81rem 1.19rem 2rem 2.31rem;
}

.site-nav li,
.side-nav li {
  list-style: none;
  /* margin-block: 1.2em; */
}

.site-nav h2 {
  display: none;
}

.site-nav a,
.site-nav li.has-children summary,
.site-nav li.has-children summary span {
  width: 100%;
  display: block;
  text-decoration: none;
  color: var(--color-menu-link);
  border-radius: var(--standard-radius);
  font-size: var(--font-size-medium);
  font-weight: 400;
}

.site-nav .sub-nav[open] > .sub-nav__summary .sub-nav__summary-title {
  color: var(--color-menu-link-active);
  font-family: var(--bold-font);
  font-weight: 700;
}

.site-nav a,
.site-nav li.has-children summary span {
  padding-block: var(--gap-menu);
}

.site-nav summary {
  padding-inline: 0.8em;
  position: relative;
  left: -0.8em;
}

/* TODO: refactor selectors for site-nav */
.sub-nav__summary-title,
li.has-children .sub-nav ul li > a {
  transition-property: color, transform;
  transition-duration: var(--duration-default);
  transition-timing-function: ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

.sub-nav__summary:hover .sub-nav__summary-title,
li.has-children .sub-nav ul li:hover > a,
.sub-nav__summary:focus .sub-nav__summary-title,
li.has-children .sub-nav ul li:focus > a {
  transform: translateX(0.25rem);
  cursor: pointer;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav li.has-children summary:hover,
.site-nav li.has-children summary:focus,
.site-nav li.has-children summary:hover span,
.site-nav li.has-children summary:focus span {
  color: var(--color-menu-link-alt);
}

.site-nav a[aria-current] {
  font-weight: bold;
}

.site-nav .site-nav__list-item {
  cursor: pointer;
}

.site-nav .site-nav__list-item a[aria-current] {
  font-family: var(--bold-font);
  color: var(--color-menu-link-alt);
  transform: translateX(0.25rem);
}

.site-nav details {
  border-inline-start: 1px solid transparent;
  position: relative;
  left: -1px;
}

/* .site-nav details[open] {
  border-inline-start: 1px solid var(--border-color-menu-open);
} */

.site-nav details[open] > .site-nav__list--sub {
  margin: 1.31rem 0;
  border-inline-start: 1px solid var(--border-color-menu-open);
}

.site-nav details summary::-webkit-details-marker,
.site-nav details summary::marker {
  content: '';
  display: none;
}

.site-nav details > summary::before {
  content: '\f078';
  /* Chevron Down */
  font-family: fa-solid;
  float: right;
  color: var(--color-menu-marker);
  margin-inline-end: 0.5rem;
  padding-block: var(--gap-menu);
}

.site-nav details[open] > summary {
  background-color: var(--bg-color-menu-open);
  font-weight: bold;
}

.site-nav details[open] > summary::before {
  content: '\f077';
  /* Chevron Up */
  color: var(--color-menu-link-alt);
}

@media (max-width: 1130px) {
  .site-nav,
  .side-nav {
    height: auto;
    margin: 0;
    padding: 0;
    position: unset;
    top: unset;
  }

  .side-nav details {
    margin-block: 1rem;
    width: auto;
    margin-inline: auto;
  }

  .side-nav summary {
    text-align: center;
  }

  .side-nav .octo-github-edit {
    display: none;
  }

  nav.site-nav h2 {
    display: none;
  }
}

.mobile-menu {
  display: none;
}

@media (max-width: 1130px) {
  .mobile-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--navbar-icon-size);
    height: var(--navbar-icon-size);
  }
}
.site-nav > .site-nav__list {
  max-height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 0.3125rem;
    height: 5.0625rem;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 1.25rem;
    background: var(--scrollbar-color);
  }

  @media (max-width: 1130px) {
    & {
      /* 100vh - header & theme switcher */
      height: calc(100vh - 7.625rem);
    }
  }
}

.site-nav__mobile {
  position: absolute;
  width: 100%;
  right: -100%;
  transition: right 500ms ease-in-out;
  margin: 0;
  top: 5.125rem;
}

.mobile-menu.is-active .site-nav__mobile {
  right: 0;
}

/* Burger menu */
.hamburger {
  position: relative;
}

.hamburger:hover {
  cursor: pointer;
}

.hamburger .line {
  width: var(--hamburger-line-width);
  height: var(--hamburger-line-height);
  background-color: var(--hamburger-lines-color);
  display: block;
  margin: var(--hamburger-line-margin) auto;
  transition-property: opacity, transform;
  transition-duration: 500ms;
  border-radius: 0.1rem;
}
.hamburger .circle {
  display: block;
  width: var(--navbar-icon-size);
  height: var(--navbar-icon-size);
  border: solid #76a1c2;
  border-radius: 50%;
  border-width: 0;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition-property: opacity, border-width;
  transition-duration: 500ms;
}
.mobile-menu.is-active .hamburger .line:nth-child(1) {
  transform: translateY(var(--hamburger-translate-y)) rotate(45deg);
}
.mobile-menu.is-active .hamburger .line:nth-child(2) {
  opacity: 0;
}
.mobile-menu.is-active .hamburger .line:nth-child(3) {
  transform: translateY(calc(-1 * var(--hamburger-translate-y))) rotate(-45deg);
}
.mobile-menu.is-active .hamburger .circle {
  opacity: 1;
  border-width: 0.0625rem;
}

/* Main content group */

.content-group {
  /* Used to be 800px, but now it's 1000px as per request on winder content */
  grid-template-columns: var(--navigation-width) minmax(300px, 1000px) var(
      --toc-width
    );
  display: grid;
  grid-template-rows: auto;
  gap: 2rem;
  max-width: 100vw;
  justify-content: space-between;
  grid-template-areas: 'menu content toc';
  margin-top: 75.2px;
}

/* Article header */
.header__wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.header {
  display: flex;
  gap: 1.62rem;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--header-separator-color);
  margin: 1.56rem 0;
  transition: border-color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.header__icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5625rem;
  height: 4.0625rem;
  width: 4.0625rem;
  border: 1px solid var(--header-icon-border);
  background-color: var(--header-icon-background);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition-property: background-color, border;
  transition-duration: var(--search-dropdown-duration);
  transition-timing-function: ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition-property: none;
  }
}

.header__icon-wrapper:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #1faeff;
  opacity: 0.65;
  bottom: -25%;
  filter: blur(0.835rem);
}

/* Need to override styles that might be applied to certain font awesome icons */
.header__icon-wrapper .header__icon:before {
  color: var(--blue-500);
  font-size: 2rem;
}

.header__icon {
  z-index: 1;
  /* Override image global styles */
  background: transparent;
}

.header__icon {
  &.fa-octopus,
  &.fa-twitter,
  &.fa-linkedin,
  &.fa-github,
  &.fa-youtube {
    &:before {
      padding-inline-end: 0;
    }
  }
}

.header__text {
  display: flex;
  flex-direction: column;
}

.header__title {
  /* color: var(--color-text); */
  /* font-size: var(--font-size-title); */
  /* font-weight: 700; */
  transition: color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.header__subtitle {
  color: var(--color-subtitle);
  font-size: var(--font-size-subtitle);
  transition: color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

/* Article header END */

.content-group .site-nav {
  grid-area: menu;
  width: 100%;
}

.content-group main {
  grid-area: content;
  margin: 0;
  padding-bottom: 4rem;
}

.content-group .side-nav {
  grid-area: toc;
  width: 100%;
}

.continue {
  padding-inline-end: 30px;
}

@media (max-width: 1130px) {
  .content-group {
    grid-template-columns: 1rem auto 1rem;
    grid-template-rows: auto auto auto;
    gap: 0;
    grid-template-areas:
      'left top right'
      'left toc right'
      'left content right'
      'left menu right';
  }

  .content-group main,
  .content-group .page-content {
    width: unset;
    max-width: var(--content-width-mobile);
  }
}

/* Table of Contents */

.page-toc details summary {
  text-decoration: none;
  font-weight: bold;
  font-size: var(--font-size-medium);
}

.page-toc details summary::marker {
  content: '';
  display: none;
}

.page-toc details summary::after {
  content: '\f078';
  /* Chevron Down*/
  font-family: fa-solid;
  margin-inline-start: 0.3em;
  float: right;
}

.page-toc details[open] summary::after {
  content: '\f077';
  /* Chevron Up */
  font-family: fa-solid;
}

.page-toc ol {
  margin: 1rem 0 2rem 0;
  list-style: none;
  font-size: var(--font-size-small);
}

.page-toc li a {
  display: block;
  text-decoration: none;
  padding-block: 0.4em;
  margin-block: var(--gap-menu);
}

.page-toc li a.highlight {
  font-weight: bold;
  color: var(--color-menu-link-alt);
}

.page-toc .toc-lev-3 {
  padding-inline-start: 1em;
}

.page-toc .toc-lev-4 {
  padding-inline-start: 2em;
}

.page-toc .toc-lev-5 {
  padding-inline-start: 3em;
}

.page-toc .toc-lev-6 {
  padding-inline-start: 4em;
}

/* Author info */

.author {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--header-separator-color);
  display: flex;
  gap: 2rem;

  @media (max-width: 860px) {
    display: block;
  }

  .author__image-link {
    flex-shrink: 0;
    height: fit-content;
  }

  .author__image {
    aspect-ratio: 1/1;
    border-radius: 50%;
    margin: 0;
    object-fit: cover;
    width: 50px;
    height: 50px;
    align-self: center;

    @media (max-width: 860px) {
      margin-bottom: 0.5rem;
      display: block;
    }
  }

  .author__info {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: var(--font-size-medium);

    .author__name a {
      color: var(--color-heading);
      font-size: var(--font-size-large);
      text-decoration: none;
      transition: color 200ms ease-in-out;
    }

    .author__time,
    .author__reading-time {
      color: var(--color-text-secondary);
    }

    .author__contributors {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .author__description-container {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 1.5rem;

      .author__social-links {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        list-style: none;
        margin: 0;

        i:before {
          padding: 0;
          font-size: 1.5rem;
        }
      }
    }

    .author__contributor a,
    .author__description {
      color: var(--color-text);
      text-decoration: none;
      transition: color 200ms ease-in-out;
    }

    .author__name:hover,
    .author__contributor:hover,
    .author__name:focus-visible,
    .author__contributor:focus-visible {
      a {
        color: var(--header-link-color);
      }
    }
  }
}

/* Search dialog */

.search-dialog {
  margin: auto;
  padding: 2rem 3rem;
  border-radius: var(--standard-radius);
  box-shadow: var(--box-shadow);
  height: calc(90vh - 4em);
  width: calc(80vw - 6em);
  max-width: 860px;
}

.search-dialog::backdrop {
  background-color: #000;
  opacity: 0.5;
}

.search-dialog form {
  margin-top: 2rem;
}

#site-search-close {
  float: right;
  position: relative;
  top: -1rem;
  left: 2.5rem;
  background: none;
  cursor: pointer;
  font-size: 2rem;
  stroke: var(--color-menu-link);
}

@media (max-width: 860px) {
  .search-dialog {
    /* Fallback */
    height: calc(100vh - 4rem);
    width: calc(100vw - 6rem);
    /* Ideal units */
    height: calc(100dvh - 4rem);
    width: calc(100dvw - 6rem);
  }
}

/* Taxonomy Links */

.post-taxonomy div {
  margin: var(--block-gap) 0;
  text-align: end;
}

.post-taxonomy h2 {
  font-size: 1rem;
  display: inline;
}

.post-taxonomy ul {
  list-style: none;
  display: inline;
  margin: 0;
}

.post-taxonomy li {
  display: inline;
  margin: 0 0.3rem;
  line-height: 2.5;
}

.post-taxonomy li a {
  background-color: var(--menu-link-bg);
  color: var(--body-link-alt);
  border-radius: var(--standard-radius);
  padding: 0.3rem 0.5rem;
  text-decoration: none;
}

@media (max-width: 860px) {
  .post-taxonomy div {
    text-align: start;
  }
}

/* GitHub Link */

.octo-github-edit {
  margin-block-start: var(--block-gap);
}

.octo-github-edit a {
  color: var(--color-menu-link);
  text-decoration: none;
}

.octo-github-edit a:hover,
.octo-github-edit a:focus {
  color: var(--color-menu-link-alt);
}

/* Video */

.yt-video {
  aspect-ratio: 4/3;
  display: grid;
  grid-template-rows: 3fr 1fr;
}

.yt-video > * {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.yt-video .play-icon {
  background-image: url(https://img.youtube.com/vi/VOWnhMxJMMk/0.jpg);
  background-position: center;
  background-size: cover;
  border-radius: var(--standard-radius);
  box-shadow: var(--octo-shadow-standard-box);
  color: var(--fore-link);
  font-size: 5em;
}

.yt-video:hover .title,
.yt-video:focus .title {
  background-color: var(--funk);
}

.yt-iframe {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

a[data-youtube] {
  text-decoration: none;
}

/* Article Journey */

.article-journey {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--grid-gap);
  justify-content: space-between;
  margin: 1rem auto;
}

@media (max-width: 680px) {
  .article-journey {
    flex-direction: column;
  }
}

.article-journey__button {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}

.article-journey__button:hover .article-journey__icon,
.article-journey__button:focus-visible .article-journey__icon,
.article-journey__button:active .article-journey__icon {
  transform: translateX(var(--icon-translate-value))
    rotate(var(--icon-rotate-value));
}

.article-journey__button:hover .article-journey__icon path,
.article-journey__button:focus-visible .article-journey__icon path,
.article-journey__button:active .article-journey__icon path {
  stroke: var(--blue-500);
}

.article-journey__button:hover .article-journey__content,
.article-journey__button:focus-visible .article-journey__content,
.article-journey__button:active .article-journey__content {
  transform: translateX(calc(var(--icon-translate-value) * -1));
  color: var(--header-link-alt);
}

.article-journey__button--previous .article-journey__icon {
  transform: rotate(var(--icon-rotate-value));
}

.article-journey__button--previous {
  --icon-translate-value: -0.4rem;
  --icon-rotate-value: 180deg;
}

.article-journey__button--next {
  --icon-translate-value: 0.4rem;
  --icon-rotate-value: 0;
  margin-left: auto;
}

.article-journey__button--next .article-journey__content {
  text-align: right;
}

.article-journey__icon-wrapper {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  background: var(--grey-light);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.article-journey__icon {
  transition: transform var(--duration-default) ease-in-out;
}

.article-journey__icon path {
  transition: stroke var(--duration-default) ease-in-out;
}

.article-journey__content {
  display: flex;
  flex-direction: column;
  color: var(--color-heading);
  transition: var(--duration-default) ease-in-out;
  transition-property: color, transform;
}

.article-journey__label {
  font-size: var(--font-size-medium);
  font-weight: 400;
}

.article-journey__title {
  font-size: var(--font-size-large);
  font-weight: 700;
}

/* Related articles */

.octo-related {
  background-color: var(--blue-midnight-darker);
  color: var(--color-base-primary);
  padding: 3rem 0 3rem 0;
}

.octo-related h2 {
  color: var(--color-base-primary);
  text-align: center;
  padding: 0 0 2rem 0;
  margin: 0;
}

.octo-related ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, 270px);
  gap: 1rem;
  margin: 0 auto;
  justify-content: center;
}

.octo-related li {
  box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.25);
  padding: 1px;
  border-radius: var(--standard-radius);
  background:
    linear-gradient(var(--color-text), var(--color-text)) padding-box,
    linear-gradient(to bottom, #173045 80%, #0cb0f2) border-box;
  border: 0.1rem solid transparent;
}

.octo-related img {
  border-radius: var(--standard-radius);
}

.octo-related h3 {
  font-size: var(--font-size-large);
  font-weight: 400;
  color: var(--color-base-primary);
}

.octo-related a {
  font-size: var(--font-size-medium);
  color: var(--octo-blue-lightest);
}

.octo-related .list-item-content {
  display: grid;
  grid-template-rows: 7rem 3rem;
  margin: 0 1rem;
}

/* Post List */

.page-content ul.post-list {
  list-style: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, 270px);
  gap: var(--grid-gap);
  justify-content: center;
}

.post-list li {
  box-shadow: 0px 14px 20px rgb(0 0 0 / 25%);
  border-radius: var(--standard-radius);
}

.post-list article {
  border-radius: var(--standard-radius);
  padding: 0.5rem;
}

.post-list h3 {
  font-size: var(--font-size-large);
  font-weight: 400;
  padding: 0;
  align-self: center;
}

.post-list a {
  text-decoration: none;
}

.post-list img {
  border-radius: var(--standard-radius);
}

.post-list .post-meta {
  display: none;
}

.recent-updates li {
  margin-block-end: 1em;
}

.recent-updates time {
  display: block;
}

/* Paging */

.post-paging {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 2rem auto;
  padding: 0 2rem;
  max-width: 75%;
  color: var(--octo-blue);
}

a.post-paging__link--prev,
a.post-paging__link--next {
  color: var(--octo-blue);
  text-underline-offset: 0.5rem;
  transition: color 200ms ease-in-out;
}

a.post-paging__link--prev:hover,
a.post-paging__link--next:hover,
a.post-paging__link--prev:focus-visible,
a.post-paging__link--next:focus-visible,
a.post-paging__link--prev:active,
a.post-paging__link--next:active {
  color: var(--octo-blue-lighter);
  text-underline-offset: 0.5rem;
  transition: color 200ms ease-in-out;
}

.post-paging__link {
  text-decoration: none;
  color: var(--octo-blue-lighter);

  .post-paging__page {
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 0.0625rem solid var(--octo-blue);
    color: var(--octo-blue);
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
    transition-property: border-color, color;
  }
}

.post-paging__link[aria-current] {
  pointer-events: none;

  .post-paging__page {
    color: var(--octo-blue-lighter);
    border: 0.125rem solid var(--octo-blue-lighter);
    font-weight: bold;
  }
}

.post-paging__link:hover,
.post-paging__link:active,
.post-paging__link:focus-visible {
  .post-paging__page {
    border-color: var(--octo-blue-lighter);
    color: var(--octo-blue-lighter);
  }
}

@media (max-width: 860px) {
  .post-paging {
    max-width: 100%;
    gap: 0.5rem;
    padding: 0;
  }
}

@media (max-width: 520px) {
  .post-paging__link:nth-of-type(4),
  .post-paging__link:nth-of-type(5) {
    display: none;
  }
}

/* Footer */

.site-footer {
  color: var(--footer-link-color);
  text-align: start;
  background-color: var(--blue-midnight-dark);
  padding: 3rem 0 3rem 0;
}

.site-footer h2 {
  text-transform: uppercase;
  color: var(--navy-400);
  font-size: var(--font-size-small);
  letter-spacing: 0.12em;
}

.site-footer ul {
  list-style: none;
  line-height: 2.5;
}

.site-footer a {
  color: var(--footer-link-color);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--octo-blue-lightest);
}

.site-footer nav {
  text-align: center;
  font-size: var(--font-size-medium);
}

.site-footer nav a:after {
  content: '\f077';
  /* Chevron Up */
  font-family: fa-solid;
  padding-inline-start: 0.6em;
}

/* Footer columns */

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem));
  justify-content: center;
  gap: var(--grid-gap);
}

.footer-columns img.octo-logo {
  background-color: transparent;
  width: 40px;
  height: auto;
}

@media (max-width: 680px) {
  .footer-columns {
    display: block;
    width: var(--content-width-mobile);
    margin: 0 auto;
  }
}

/* Social links */
.octo-social {
  border-top: 1px solid var(--blue-midnight-lighter);
  margin: 4rem auto 2rem auto;
  align-items: center;
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: 1fr 2fr;
  grid-template-areas: 'copyright social';
  max-width: var(--grid-max-width);
  width: var(--content-width);
}

.octo-social ul {
  grid-area: social;
  list-style: none;
  font-size: var(--font-size-xlarge);
  text-align: end;
}

.octo-social ul li {
  display: inline-block;
  margin-inline-start: 0.5em;
}

.octo-social ul li a {
  color: var(--octo-blue);
  text-decoration: none;
  display: block;
}

.octo-social p {
  grid-area: copyright;
  text-align: start;
}

@media (max-width: 860px) {
  .octo-social {
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      'social'
      'copyright';
  }

  .octo-social ul {
    text-align: center;
  }

  .octo-social p {
    text-align: center;
  }
}

/* Overlay (Mobile Navigation, Search) */

.overlay {
  position: fixed;
  top: 0;
  background-color: var(--content-bg);
  width: calc(100% - 1em - 1em);
  height: calc(100% - 5rem - 2rem);
  padding: 110px 1em 2rem 1em;
  max-height: 100vh;
  overflow-y: auto;
  z-index: 1;
}

/* Author page */

article:has(div > .author-page) {
  header > figure {
    display: none;
  }
}

.author-page {
  display: grid;
  gap: 1rem;
  grid-template-columns: 300px 1fr;
  margin-bottom: 4rem;

  @media (max-width: 930px) {
    grid-template-columns: auto;
  }
}

.author-page ul {
  list-style: none;
  margin-block-start: var(--block-gap);
  margin-inline: 0;
  display: flex;
}

.author-page ul a {
  font-size: var(--font-size-large);
  margin-inline-end: 1em;
  text-decoration: none;
}

/* Site Search */

.site-search__wrapper {
  position: relative;
  width: 100%;
  max-width: 34.75rem;
  transition: max-width var(--search-dropdown-duration) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

@media screen and (min-width: 1131px) {
  .site-search__wrapper,
  .site-search__wrapper.is-active {
    max-width: 28.8rem;
  }
}

@media screen and (min-width: 1201px) {
  .site-search__wrapper.is-active {
    max-width: 34.8rem;
  }
}

@media screen and (min-width: 1370px) {
  .site-search__wrapper.is-active {
    max-width: 45.8rem;
  }
}

@media screen and (min-width: 1570px) {
  .site-search__wrapper.is-active {
    max-width: 57.8rem;
  }
}

@media screen and (max-width: 1130px) {
  .octo-header .site-search-results,
  .octo-header .site-search__overlay,
  .octo-header .site-search.is-active {
    display: none;
  }
}

.site-search {
  height: var(--search-height);
  border-radius: var(--search-border-radius);
  border: var(--search-border);
  background-color: var(--color-base-primary);
  position: relative;
  z-index: 1;
  transition: background-color var(--duration-default) ease-in-out;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.site-search-results {
  background-color: var(--color-base-primary);
  position: absolute;
  top: var(--search-height);
  width: 100%;
  padding: 0;
  border-radius: var(--search-border-radius);
  border-radius: 0.9375rem;
  list-style-type: none;
  overflow-y: scroll;
  transition-property: opacity, padding, transform, visibility;
  transition-duration: var(--search-dropdown-duration);
  transition-timing-function: ease-in-out;
  visibility: hidden;
  transform: translateY(0) scaleY(0);
  z-index: 1;
  max-height: var(--search-dropdown-height);
  transform-origin: top;
  will-change: transform;
  opacity: 0;
}

.site-search.is-active + .site-search-results {
  opacity: 1;
  padding: 1rem 0;
  transform: translateY(1.37rem) scaleY(1);
  visibility: visible;
}

.site-search-results ul {
  list-style-type: none;
  margin-inline-start: 0;
}

.site-search-results .show-more {
  border-radius: 4.0625rem;
  background: #00ffa3;
  padding: 0.5rem 0.75rem;
  display: block;
  margin: 1rem auto 0;
  cursor: pointer;
}

.site-search__overlay {
  opacity: 0;
  visibility: hidden;
  background: var(--search-overlay);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity var(--search-dropdown-duration) ease-in-out;
  z-index: 1;
}

.site-search__wrapper.is-active .site-search__overlay {
  opacity: 1;
  visibility: visible;
}

.site-search__icon path {
  fill: var(--blue-grey-light);
}

.site-search-query {
  width: 100%;
  background: transparent;
  height: 100%;
  padding: 0 1rem;
  width: calc(100% - 2rem);
  color: var(--color-text);
}

.site-search-query::placeholder {
  color: var(--search-placeholder-color);
  opacity: 0.6;
}

.search-results__heading {
  visibility: hidden;
  padding: 1.5rem 3.6rem 1.75rem;
}

.site-search.is-active + .site-search-results > .search-results__heading {
  visibility: visible;
}

.site-search-results__item {
  background-color: transparent;
  transition-property: background-color, border-color;
  transition-duration: var(--search-dropdown-duration);
  transition-timing-function: ease-in-out;
  border-bottom: 0.0625rem solid;
  border-color: var(--navy-200);
  position: relative;
  cursor: pointer;
}

.site-search-results__item:hover {
  --hover-color: rgba(13, 128, 216, 0.07);
  background-color: var(--hover-color);
  border-color: var(--hover-color);
}

.site-search-results__item::after {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none'%3E%3Cpath d='M2 18L10 10L2 2' stroke='%230D80D8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 0.75rem 1.25rem;
  background-repeat: no-repeat;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%) translateX(-1rem);
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--search-dropdown-duration);
  transition-timing-function: ease-in-out;
}

.site-search-results__item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 930px) {
  .site-search-results__item {
    padding: 1rem;
  }
}

.result-wrapper {
  display: flex;
  padding: 1.5rem 3.6rem 1.75rem;
  text-decoration: none;
  flex-direction: column;
  gap: 0.56rem;
}

@media (max-width: 930px) {
  .result-wrapper {
    padding: 1rem;
  }
}

.site-search-results__item:hover .result-wrapper {
  color: initial;
}

.result-wrapper mark {
  color: var(--octo-blue);
}

.result-path,
.result-date {
  color: var(--blue-grey-lighter);
  font-size: var(--font-size-small);
  font-weight: 400;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.result-path__segment:last-child {
  color: var(--color-menu-link-active);
}

.result-title {
  color: var(--color-text);
  font-size: var(--font-size-large);
  font-weight: 700;
}

.result-description {
  color: var(--color-heading);
  font-size: var(--font-size-medium);
  font-weight: 400;
}

.site-search > fieldset {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.site-search__remove-btn {
  margin-left: auto;
  background-color: transparent;
  padding: 0.5rem;
  cursor: pointer;
  visibility: hidden;
  transition: transform var(--search-dropdown-duration) ease-in-out;
}

.site-search__remove-btn:hover {
  transform: scale(1.2);
}

.site-search__remove-btn path {
  fill: var(--search-remove-icon-color);
}

.site-search.is-active .site-search__remove-btn {
  visibility: visible;
}

.site-search__mobile {
  display: none;
}

@media (max-width: 1130px) {
  .site-header .site-search__wrapper {
    max-width: fit-content;
    order: -1;
  }

  .site-header .site-search {
    display: none;
  }

  .site-header .site-search__mobile {
    display: flex;
    width: var(--navbar-icon-size);
    height: var(--navbar-icon-size);
    border-radius: calc(var(--navbar-icon-size) / 2);
    justify-content: center;
    align-items: center;
    border: var(--search-border);
  }
}

.site-search .show-more {
  display: inline-block;
  font-size: var(--font-size-small);
  border-radius: 100px;
  text-decoration: none;
  text-align: center;
  padding: 0.2em 0.6em 0.3em 0.6em;
  color: var(--button-primary-text);
  background-color: var(--bg-color-hint);
}

.result-headings li {
  display: none;
}

.result-headings li:nth-child(-n + 3) {
  display: block;
}

.result-headings:has(li:nth-child(n + 4))::after {
  content: 'See more >';
  color: var(--octo-blue);
  text-decoration: underline;
}

.result-headings:focus-within li {
  display: block;
}

.result-headings:focus-within::after {
  display: none;
}

.show-more {
  display: inline-block;
  border-radius: 100px;
  text-decoration: none;
  text-align: center;
  padding: 0.2em 1.6em 0.3em 1.6em;
  color: var(--button-primary-text);
  background-color: var(--bg-color-hint);
}

@media (max-width: 860px) {
  .site-search div {
    grid-template-columns: repeat(1, auto);
  }
}

/* Helper icons */

.fa-solid {
  display: inline-block;
}

.fa-spinner:before {
  content: '\f110';
  color: var(--blue-500);
  font-family: fa-solid;
}

.fa-circle-check:before {
  content: '\f058';
  color: var(--green-400);
  font-family: fa-solid;
}

.fa-circle-xmark:before {
  content: '\f057';
  color: var(--red-500);
  font-family: fa-solid;
}

.fa-clock:before {
  content: '\f017';
  color: var(--orange-400);
  font-family: fa-solid;
}

.fa-share-nodes:before {
  content: '\f1e0';
  /* Share Nodes */
  font-family: fa-solid;
  margin-inline-end: 0.3em;
}

.fa-search:before {
  content: '\f002';
  /* Magnifying Glass */
  font-family: fa-solid;
}

.fa-face {
  display: inline-block;
  font-size: 2em;
  height: 1.1em;
  overflow: hidden;
  text-decoration: none;
  width: 1.08em;
  white-space: nowrap;
}

.fa-face:before {
  font-family: fa-solid;
  position: relative;
  top: 0.2em;
  opacity: 0.7;
  margin-inline-end: 1em;
}

.fa-face:hover:before,
.fa-face:focus:before {
  opacity: 1;
}

.fa-face-frown:before {
  content: '\f119';
  /* Face Frown */
}

.fa-face-frown-slight:before {
  content: '\e376';
  /* Face Frown Slight */
}

.fa-face-meh:before {
  content: '\f11a';
  /* Face Meh */
}

.fa-face-grin:before {
  content: '\f580';
  /* Face Grin */
}

.fa-face-grin-stars:before {
  content: '\f587';
  /* Face Grin Starts */
}

.fa-brands {
  overflow: hidden;
  display: block;
}

.octo-social .fa-brands {
  width: 1.08em;
}

.fa-twitter:before {
  content: '\f099';
  /* Twitter */
  font-family: fa-brands;
  padding-inline-end: 1em;
}

.fa-linkedin:before {
  content: '\f08c';
  /* LinkedIn */
  font-family: fa-brands;
  padding-inline-end: 1em;
}

.fa-mastodon:before {
  content: '\f4f6';
  /* Mastodon */
  font-family: fa-brands;
  padding-inline-end: 1em;
}

.fa-github:before {
  content: '\f09b';
  /* GitHub */
  font-family: fa-brands;
  padding-inline-end: 1em;
}

.fa-youtube:before {
  content: '\f167';
  /* YouTube */
  font-family: fa-brands;
  padding-inline-end: 1em;
}

.fa-octopus:before {
  content: '\e082';
  /* Octopus */
  font-family: fa-brands;
  padding-inline-end: 1em;
}

.i-right:after {
  content: '\f061';
  /* Arrow Right */
  font-family: fa-solid;
}

.copy-container {
  max-height: 0px;
  margin: 0;
  width: 100%;
  text-align: end;
  z-index: 1;
  position: relative;
}

.copy-button {
  stroke: var(--icon-stroke);
  fill: var(--icon-fill);
  background-color: transparent;
  cursor: pointer;
}

.magnify-container {
  max-height: 0px;
  margin: 0;
  width: 100%;
  text-align: end;
  z-index: 1;
  position: relative;
  top: -1rem;
}

.magnify-icon {
  opacity: 0;
  border-radius: 0.2rem;
  color: var(--body-link-color);
  display: inline-block;
  cursor: pointer;
  background-color: var(--color-base-primary);
  border-radius: 50%;
  padding: 2px;
  width: 2.6rem;
  height: 2.6rem;
}

.input-touch .magnify-icon {
  opacity: 1;
}

.magnify-icon:before {
  content: '\f00e';
  font-family: fa-solid;
  font-size: 1.3rem;
  line-height: 2rem;
}

figure:hover .magnify-icon,
figure:focus .magnify-icon {
  opacity: 1;
}

.magnify-icon:hover,
.magnify-icon:focus,
.magnify-icon:focus-within {
  stroke: var(--fore-link);
  transform: rotate(4deg);
  opacity: 1;
}

/* Custom Divisions */

.simple-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--grid-gap);
}

.simple-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--grid-gap);
}

.simple-grid > * > * {
  width: 100%;
}

@media (max-width: 860px) {
  .simple-grid,
  .simple-grid-3 {
    display: block;
  }

  .simple-grid > *,
  .simple-grid-3 > * {
    margin-block-end: var(--block-gap);
  }
}

/* Article list */

ul.article-list {
  margin: 0;
  list-style: none;

  .article-list__item {
    .card {
      height: 100%;
    }
  }
}

/* Reading List */

.reading-list-control {
  margin-block-end: 2.5rem;
}

.reading-list-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}

.reading-list-options .select-element {
  border: 2px solid var(--octo-blue-lighter);
  display: block;
  border-radius: 100px;
  padding: 0.3em 1em;
  max-width: calc(90vw - 2em - 4px);
}

.reading-list-options select {
  display: block;
  border-radius: 100px;
  text-decoration: none;
  color: var(--octo-blue-lighter);
  text-transform: uppercase;
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  width: 100%;
}

.rec-list {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, 235px);
  justify-content: center;
  grid-auto-flow: dense;
}

.rec-book {
  display: grid;
  grid-template-rows: 319px auto auto;
  grid-template-areas:
    'img'
    'title'
    'author';
  cursor: pointer;
}

.rec-book h3 {
  grid-area: title;
  font-size: var(--font-size-regular);
  padding: 2rem 0 0 0;
  align-self: top;
}

.rec-book figure {
  grid-area: img;
}

.rec-book .rec-author {
  grid-area: author;
  align-self: top;
}

.rec-book .rec-author p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 235px;
}

.rec-book.rec-full-width {
  background: var(--bg-color-hint);
  border-radius: var(--standard-radius);
  margin: var(--block-gap) 0;
  padding: 1.5rem;
}

.rec-book.rec-full-width p {
  max-width: unset;
  display: block;
  white-space: unset;
}

.rec-book .rec-description {
  grid-area: description;
  display: none;
}

.rec-book.rec-full-width .rec-description {
  display: unset;
}

.rec-book .rec-description ul,
.rec-book .rec-description ol {
  margin: 1rem 0 1rem 2rem;
}

.rec-list figure {
  padding: 1rem;
  border-radius: var(--standard-radius);
  background: var(--color-base-primary);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  height: 287px;
}

.rec-list figure img {
  object-fit: cover;
  display: block;
  width: 203px;
  height: 287px;
  margin: 0 auto;
}

.rec-list .rec-book.rec-full-width {
  display: block;
  grid-column: 1 / -1;
  cursor: unset;
  padding: 1rem 2rem 2rem 2rem;
  text-align: start;
}

.rec-list .rec-book.rec-full-width > *,
.rec-list .rec-book.rec-full-width p {
  margin-block-end: 1rem;
}

.rec-list .rec-book.rec-full-width figure {
  display: none;
}

.rec-list .rec-book.rec-full-width h3 {
  font-size: 1.5rem;
}

@media (max-width: 860px) {
  .reading-list-options {
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr;
  }

  .rec-list .rec-book.rec-full-width {
    padding: 0 0 2rem 0;
  }
}

@media (max-width: 560px) {
  .rec-list {
    grid-template-columns: repeat(auto-fit, 90%);
  }

  .rec-book {
    text-align: center;
    grid-template-columns: auto 235px auto;
    grid-template-areas:
      'empty1 img empty2'
      'title title title'
      'author author author';
  }
}

/* Newsletter */
.newsletter {
  border: 0.0625rem solid var(--border-color-tab);
  border-radius: var(--standard-radius);
  padding: 1.5rem 2rem;
  background-color: var(--grey-lighter);
  margin-top: 4rem;

  .newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: 2rem;

    .mktoFieldWrap {
      display: flex;
      flex-direction: column;
    }

    .mktoGutter {
      display: none;
    }

    .mktoField {
      box-shadow: none;
      border-radius: 0.5rem;
      padding: 0.5rem;
      min-height: 2rem;
    }

    .mktoFormRow:has(.mktoField[type='hidden']) {
      display: none;
    }

    .mktoError {
      color: var(--red-500);
    }

    .mktoRequiredField {
      .mktoLabel {
        position: relative;
        width: fit-content;
      }

      .mktoLabel::after {
        content: '*';
        position: absolute;
        right: -0.5rem;
        top: 0;
        color: var(--red-500);
      }
    }
  }
}

/* Buttons */
button.button,
a.button {
  text-decoration: none;
  display: flex;
  padding: 0.75rem 1.875rem;
  justify-content: center;
  align-items: center;
  font-family: var(--bold-font);
  font-size: var(--font-size-medium);
  font-weight: 700;
  line-height: 1.38rem;
  border-radius: 0.5rem;
  border-width: 0.0625rem;
  color: var(--button-primary-text);
  background: var(--button-primary);
  max-width: fit-content;
  transition-duration: 250ms;
  transition-property: background, border-color, box-shadow, color;
  transition-timing-function: ease-in-out;
}

button.button,
button.button--primary,
a.button,
a.button.button--primary {
  color: var(--button-primary-text);
  background: var(--button-primary);
  border-color: var(--button-primary);
}

button.button:focus,
button.button--primary:focus,
a.button:focus,
a.button.button--primary:focus {
  background: var(--button-primary-focus);
  border-color: var(--button-ring-color);
  outline: 0.1875rem solid var(--button-ring-color);
  box-shadow: none;
}

button.button:hover,
button.button--primary:hover,
a.button:hover,
a.button.button--primary:hover {
  background: var(--button-primary-focus);
  border-color: var(--button-primary-focus);
}

button.button:active,
button.button--primary:active,
a.button:active,
a.button.button--primary:active {
  background: var(--button-primary);
  border-color: var(--button-primary-focus);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35) inset;
}

.octo-header a.button {
  width: 100px;
}

.inline-note {
  position: absolute;
  padding-left: 0.5rem;
}

/* Detail tabs */

.tab-list {
  padding-inline: 10px;
  margin-block-end: 0;
}

.tab-list button,
.tab-list button:focus,
.tab-list button:hover {
  display: inline-block;
  position: relative;
  z-index: 2;
  top: 2px;
  margin: 0;
  margin-block-start: 4px;
  border: 2px solid var(--border-color-tab);
  border-radius: var(--standard-radius) var(--standard-radius) 0 0;
  background: var(--bg-color-tab);
  outline: none;
  font-size: var(--font-size-small);
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}

.tab-list button[aria-selected='true'] {
  margin-block-start: 0;
  border-width: 2px;
  border-top-width: 6px;
  border-top-color: var(--border-color-tab-active);
  border-inline-color: var(--border-color-tab-active);
  border-bottom-color: var(--color-base-primary);
  background-color: var(--color-base-primary);
}

.tab-list button[aria-selected='false'] {
  top: 0px;
}

.tab-list button span.focus {
  display: inline-block;
  margin: 2px;
  padding: 4px 6px;
  outline: none;
}

[role='tabpanel'] {
  position: relative;
  padding: 1rem;
  border: 2px solid var(--border-color-tab-active);
  border-radius: var(--standard-radius);
  background: var(--aft);
  overflow: auto;
}

[role='tabpanel'].is-hidden {
  display: none;
}

[role='tabpanel'] p {
  margin: 0;
}

/* Animation */

@media (prefers-reduced-motion: no-preference) {
  body,
  html {
    scroll-behavior: smooth;
  }
}