/*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */

@import 'components/zen-mode.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

body a,
body button {
  @apply transition-colors;
}

/* Scale SVG icons to text size */
.icon svg {
  @apply h-[1em] w-[1em];
}

/* Scale SVG logos to appropriate size */
.logo svg {
  @apply h-[5rem] w-[5rem];
}

/* Search */
#search-query::-webkit-search-cancel-button,
#search-query::-webkit-search-decoration,
#search-query::-webkit-search-results-button,
#search-query::-webkit-search-results-decoration {
  @apply hidden;
}

/* Hamburger menu */
body:has(#menu-controller:checked) {
  @apply overflow-y-hidden;
}

#menu-button:has(#menu-controller:checked) {
  @apply invisible;
}

#menu-controller:checked~#menu-wrapper {
  @apply visible opacity-100;
}

/* RTL support */
.prose blockquote {
  @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;
}

.prose ul>li,
.prose ol>li {
  @apply rtl:pl-0 rtl:pr-2 rtl:mr-7;
}

.prose ol>li:before,
.prose ul>li:before {
  @apply rtl:left-auto rtl:right-1;
}

.prose thead td:first-child,
.prose thead th:first-child {
  @apply rtl:pr-0;
}

.prose thead td:last-child,
.prose thead th:last-child {
  @apply rtl:pl-0;
}

/* Adjust first child within prose */
.prose div.min-w-0.max-w-prose>*:first-child {
  @apply mt-3;
}

/* Table of Contents */
.toc ul,
.toc li {
  @apply px-0 leading-snug list-none;
}

.toc ul ul {
  @apply ltr:pl-4 rtl:pr-4;
}

.toc a {
  @apply font-normal text-neutral-700 dark:text-neutral-400;
}

.toc ul>li {
  @apply rtl:mr-0;
}

/* Code Copy */
.highlight-wrapper {
  @apply block;
}

.highlight {
  @apply relative z-0;
}

.highlight:hover>.copy-button {
  @apply visible;
}

.copy-button {
  @apply absolute top-0 right-0 z-10 invisible w-20 py-1 font-mono text-sm cursor-pointer opacity-90 bg-neutral-200 whitespace-nowrap rounded-bl-md rounded-tr-md text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200;
}

.copy-button:hover,
.copy-button:focus,
.copy-button:active,
.copy-button:active:hover {
  @apply bg-primary-100 dark:bg-primary-600;
}

.copy-textarea {
  @apply absolute opacity-5 -z-10;
}

/* Fix long KaTeX equations on mobile (see https://katex.org/docs/issues.html#css-customization) */
.katex-display { overflow: auto hidden }

/* Fix long tables breaking out of article on mobile */
table {
    display: block;
    overflow: auto;
}

/* Fix long inline code sections breaking out of article on mobile */
code {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

/* Fix long URLs breaking out of article bounds on mobile */
a {
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* -- Chroma Highlight -- */
/* Background */
.prose .chroma {
  @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
}

/* LineTableTD */
.chroma .lntd,
.chroma .lntd pre {
  @apply p-0 m-0 align-top border-none;
}

/* LineTable */
.chroma .lntable {
  @apply block w-auto px-4 py-3 overflow-hidden text-base;
  border-spacing: 0;
}

/* LineHighlight */
.chroma .hl {
  @apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900;
}

.chroma .lntd .hl {
  @apply p-0 m-0;
}

/* LineNumbersTable */
/* LineNumbers */
.chroma .lnt,
.chroma .ln {
  @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
}

/* Keyword */
/* KeywordDeclaration */
/* KeywordNamespace */
/* KeywordPseudo */
/* KeywordReserved */
/* NameClass */
/* NameFunctionMagic */
/* NameNamespace */
/* NameVariableClass */
/* Operator */
.chroma .k,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .nc,
.chroma .fm,
.chroma .nn,
.chroma .vc,
.chroma .o {
  @apply text-primary-600 dark:text-primary-300;
}

/* KeywordConstant */
.chroma .kc {
  @apply font-semibold text-secondary-400 dark:text-secondary-500;
}

/* KeywordType */
/* NameVariable */
/* NameVariableInstance */
/* NameVariableMagic */
/* LiteralNumber */
/* LiteralNumberBin */
/* LiteralNumberFloat */
/* LiteralNumberHex */
/* LiteralNumberInteger */
/* LiteralNumberIntegerLong */
/* LiteralNumberOct */
.chroma .kt,
.chroma .nv,
.chroma .vi,
.chroma .vm,
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo {
  @apply text-secondary-400 dark:text-secondary-600;
}

/* Name */
/* NameDecorator */
/* NameEntity */
/* NameLabel */
.chroma .n,
.chroma .nd,
.chroma .ni,
.chroma .nl {
  @apply text-secondary-900 dark:text-secondary-200;
}

/* NameAttribute */
/* NameBuiltin */
/* NameBuiltinPseudo */
/* NameOther */
/* NameProperty */
/* NameTag */
.chroma .na,
.chroma .nb,
.chroma .bp,
.chroma .nx,
.chroma .py,
.chroma .nt {
  @apply text-secondary-800 dark:text-secondary-300;
}

/* NameConstant */
/* NameException */
/* NameVariableGlobal */
.chroma .no,
.chroma .ne,
.chroma .vg {
  @apply font-semibold text-secondary-400 dark:text-secondary-500;
}

/* NameFunction */
.chroma .nf {
  @apply text-secondary-600 dark:text-secondary-500;
}

/* Literal */
/* LiteralDate */
/* LiteralString */
/* LiteralStringAffix */
/* LiteralStringBacktick */
/* LiteralStringChar */
/* LiteralStringDelimiter */
/* LiteralStringDoc */
/* LiteralStringDouble */
/* LiteralStringHeredoc */
/* LiteralStringInterpol */
/* LiteralStringOther */
/* LiteralStringSingle */
/* GenericInserted */
/* GenericOutput */
/* GenericPrompt */
.chroma .l,
.chroma .ld,
.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s2,
.chroma .sh,
.chroma .si,
.chroma .sx,
.chroma .s1,
.chroma .gi,
.chroma .go,
.chroma .gp {
  @apply text-primary-800 dark:text-primary-400;
}

/* LiteralStringEscape */
.chroma .se {
  @apply font-semibold text-secondary-400 dark:text-secondary-500;
}

/* LiteralStringRegex */
/* LiteralStringSymbol */
.chroma .sr,
.chroma .ss {
  @apply font-semibold text-primary-800 dark:text-primary-400;
}

/* OperatorWord */
.chroma .ow {
  @apply font-semibold text-primary-400 dark:text-primary-600;
}

/* Comment */
/* CommentMultiline */
/* CommentSingle */
/* CommentSpecial */
/* CommentPreproc */
/* CommentPreprocFile */
.chroma .c,
.chroma .cm,
.chroma .c1,
.chroma .cs,
.chroma .cp,
.chroma .cpf {
  @apply italic text-neutral-500 dark:text-neutral-400;
}

/* CommentHashbang */
.chroma .ch {
  @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
}

/* GenericEmph */
.chroma .ge {
  @apply italic;
}

/* GenericHeading */
.chroma .gh {
  @apply font-semibold text-neutral-500;
}

/* GenericStrong */
.chroma .gs {
  @apply font-semibold;
}

/* GenericSubheading */
/* GenericTraceback */
.chroma .gu,
.chroma .gt {
  @apply text-neutral-500;
}

/* GenericUnderline */
.chroma .gl {
  @apply underline;
}

/* Custom */

pre {
  text-align: left;
}

.thumbnail {
  min-width: 300px;
  height: 180px;
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
}

.thumbnail_card {
  height: 200px;
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
}

.thumbnail_card_related {
  height: 150px;
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
}

.thumbnail_card_term {
  height: 150px;
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
}

.single_hero_basic {
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
}

.single_hero_round {
  max-height: 50vh;
  object-fit: cover;
}

.single_hero_background {
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
  width: calc(100% + 40px);
  z-index: -10;
  margin-left: -20px;
}

.hero_gradient {
  width: 100%;
  height: 100%;
}

.thumbnailshadow {
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
}

.anchor {
  display: block;
  position: relative;
  top: -150px;
  height: 0px;
  visibility: hidden;
}

@screen sm {
  .thumbnail {
    min-width: 100%;
    height: 180px;
  }
  .article {
    flex-wrap: wrap;
  }
}

@screen md {
  .thumbnail {
    min-width: 300px;
    min-height: 180px;
    height: auto;
  }
  .article {
    flex-wrap: nowrap;
  }
}

.medium-zoom-image--opened {
  z-index: 100;
}

.nested-menu:hover + .menuhide {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
}

.menuhide:hover {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
}

.menuhide {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
  z-index: 1000;
}

.active {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* Gallery Specific Styles */
.grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
.grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
.grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
.grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
.grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
.grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
.grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
.grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
.grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
.grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
.grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
.grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
.grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
.grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
.grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
.grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
.grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
.grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
.grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
.grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
.grid-w100 { width: calc(100% - 5px); margin: 0px !important; }

@screen sm {
  .sm\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
  .sm\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
  .sm\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
  .sm\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
  .sm\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
  .sm\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
  .sm\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
  .sm\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
  .sm\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
  .sm\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
  .sm\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
  .sm\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
  .sm\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
  .sm\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
  .sm\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
  .sm\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
  .sm\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
  .sm\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
  .sm\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
  .sm\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
  .sm\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}

@screen md {
  .md\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
  .md\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
  .md\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
  .md\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
  .md\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
  .md\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
  .md\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
  .md\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
  .md\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
  .md\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
  .md\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
  .md\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
  .md\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
  .md\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
  .md\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
  .md\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
  .md\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
  .md\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
  .md\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
  .md\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
  .md\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}

@screen lg {
  .lg\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
  .lg\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
  .lg\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
  .lg\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
  .lg\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
  .lg\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
  .lg\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
  .lg\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
  .lg\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
  .lg\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
  .lg\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
  .lg\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
  .lg\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
  .lg\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
  .lg\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
  .lg\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
  .lg\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
  .lg\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
  .lg\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
  .lg\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
  .lg\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}

@screen xl {
  .xl\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
  .xl\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
  .xl\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
  .xl\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
  .xl\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
  .xl\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
  .xl\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
  .xl\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
  .xl\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
  .xl\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
  .xl\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
  .xl\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
  .xl\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
  .xl\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
  .xl\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
  .xl\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
  .xl\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
  .xl\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
  .xl\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
  .xl\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
  .xl\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}

@screen 2xl {
  .2xl\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
  .2xl\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
  .2xl\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
  .2xl\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
  .2xl\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
  .2xl\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
  .2xl\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
  .2xl\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
  .2xl\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
  .2xl\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
  .2xl\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
  .2xl\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
  .2xl\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
  .2xl\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
  .2xl\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
  .2xl\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
  .2xl\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
  .2xl\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
  .2xl\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
  .2xl\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
  .2xl\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}

/* Carousel Specific Styles */
.ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
.ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
.ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */

@screen sm {
  .sm\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
  .sm\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
  .sm\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}

@screen md {
  .md\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
  .md\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
  .md\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}

@screen lg {
  .lg\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
  .lg\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
  .lg\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}

@screen xl {
  .xl\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
  .xl\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
  .xl\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}

@screen 2xl {
  .2xl\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
  .2xl\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
  .2xl\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}