/* ==================================================================
    DEFAULT FONT AND LAYOUT
================================================================== */

@import "dark.css";

html {
    /* Swap these to try different fonts */
     /*font-family: "IBM Plex Sans", sans-serif;*/
     font-family: "Inter", sans-serif;
     /*font-family: "Roboto", sans-serif;*/
    /*font-family: "Open Sans", sans-serif;*/
    /* font-family: "Merriweather", serif; */
     /*font-family: "Crimson Text", serif;*/
     /*font-family: "Source Serif 4", serif;*/
      /*font-family: "Lexend Deca", sans-serif;*/
     /*font-family: Georgia, serif;*/
    /* font-family: system-ui, sans-serif; */
    /* font-family: "JetBrains Mono", monospace; */

    font-size: 16px;
    color: var(--text-color);
}

/* ==================================================================
  BASIC GRID FOR PROFILE PIC
================================================================== */

.franklin-content .row {
    display: block;
}

.franklin-content .left {
    float: left;
    margin-right: 15px;
}

.franklin-content .right {
    float: right;
}

.franklin-content .container img {
    width: auto;
    padding-left: 0;
    border-radius: 10px;
}

.franklin-content .footnote {
    position: relative;
    top: -0.5em;
    font-size: 70%;
}

/* ==================================================================
  FOOT / COPYRIGHT
================================================================== */

.franklin-content .page-foot a {
    text-decoration: none;
    color: var(--blockquote-color);
    text-decoration: underline;
}

.page-foot {
    font-size: 80%;
    font-family: Arial, serif;
    color: var(--blockquote-color);
    text-align: center;
    margin-top: 6em;
    border-top: 1px solid
        color-mix(in srgb, var(--blockquote-color) 15%, transparent);
    padding-top: 2em;
    margin-bottom: 4em;
}

/* ==================================================================
  TEXT GEOMETRY
================================================================== */

.franklin-content {
    position: relative;
    padding-left: 12.5%;
    padding-right: 12.5%;
    line-height: 1.6em;
}

/* on wide screens, fix content width to a max value */
@media (min-width: 940px) {
    .franklin-content {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* on narrow device, reduce margins */
@media (max-width: 480px) {
    .franklin-content {
        padding-left: 6%;
        padding-right: 6%;
    }
}

/* ==================================================================
  TITLES
================================================================== */

.franklin-content h1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 24px;
}
.franklin-content h2 {
    font-size: 22px;
}
.franklin-content h3 {
    font-size: 20px;
}

.franklin-content h1,
h2,
h3,
h4,
h5,
h6 {
    text-align: left;
    padding-left: 0;
    margin-left: 0;
}

.franklin-content h1 {
    /* padding-bottom: 0.5em; */
    /* border-bottom: 3px double lightgrey; */
    /* margin-top: 0.5em; */
    /* margin-bottom: 1em; */
}

.franklin-content h2 {
    /* padding-bottom: 0.3em; */
    /* border-bottom: 1px solid lightgrey; */
    /* margin-top: 2em; */
    /* margin-bottom: 1em; */
}

.franklin-content h1 a {
    color: inherit;
    text-decoration: none;
}
.franklin-content h2 a {
    color: inherit;
    text-decoration: none;
}
.franklin-content h3 a {
    color: inherit;
    text-decoration: none;
}
.franklin-content h4 a {
    color: inherit;
    text-decoration: none;
}
.franklin-content h5 a {
    color: inherit;
    text-decoration: none;
}
.franklin-content h6 a {
    color: inherit;
    text-decoration: none;
}

.franklin-content table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    text-align: center;
}
.franklin-content tr,
th {
    padding: 10px;
    border: 1px solid black;
}
.franklin-content td {
    padding: 10px;
    border: 1px solid black;
}

.franklin-content blockquote {
    background-color: var(--code-block-bg);
    color: var(--code-block-color);
    padding: 1em 1.5em;
    margin: 1.5em 0;
    border-radius: 10px;
    font-family: inherit;
    line-height: 1.5;
}

/* Reduce gap between consecutive blockquotes */
.franklin-content blockquote + blockquote {
    margin-top: 0.5em;
}

.franklin-content blockquote p {
    margin: 0 0 0.75em 0;
    line-height: 1.5;
}

.franklin-content blockquote p:last-child {
    margin-bottom: 0;
}

.franklin-content blockquote a {
    color: var(--code-block-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.franklin-content blockquote a:hover {
    color: var(--code-block-link-hover);
    text-decoration: wavy underline;
}

/* Headers inside blockquotes */
.franklin-content blockquote h1,
.franklin-content blockquote h2,
.franklin-content blockquote h3,
.franklin-content blockquote h4,
.franklin-content blockquote h5,
.franklin-content blockquote h6 {
    color: var(--code-block-color);
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.franklin-content blockquote h1:first-child,
.franklin-content blockquote h2:first-child,
.franklin-content blockquote h3:first-child,
.franklin-content blockquote h4:first-child,
.franklin-content blockquote h5:first-child,
.franklin-content blockquote h6:first-child {
    margin-top: 0;
}

/* ==================================================================
  GENERAL FORMATTING
================================================================== */

/* spacing between bullet points */
/* .franklin-content li p {
  margin-top: 10px;
  margin-bottom: 10px;
} */

li {
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    line-height: 1.4em;
}

li p {
    margin: 0;
}

/* Add some space between lists themselves */
ul,
ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* ==================================================================
  HYPERREFS AND FOOTNOTES
================================================================== */

a {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 0.2em;
    /* text-decoration-color: color-mix(in srgb, var(--link-color) 30%, transparent); */
}

a:hover {
    text-decoration: wavy underline;
    text-underline-offset: 0.2em;
    /* text-decoration-color: var(--link-hover-color); */
}

.franklin-content .eqref a {
    color: green;
}
.franklin-content .bibref a {
    color: green;
}

.franklin-content sup {
    font-size: 70%;
    vertical-align: super;
    line-height: 0;
}

.franklin-content table.fndef {
    margin: 0;
    margin-bottom: 10px;
}
.franklin-content .fndef tr,
td {
    padding: 0;
    border: 0;
    text-align: left;
}
.franklin-content .fndef tr {
    /* border-left: 2px solid lightgray; */
}
.franklin-content .fndef td.fndef-backref {
    vertical-align: top;
    font-size: 70%;
    padding-left: 5px;
}
.franklin-content .fndef td.fndef-content {
    font-size: 80%;
    padding-left: 10px;
}

/* ==================================================================
  IMAGES in CONTENT
================================================================== */

.franklin-content img {
    width: 70%;
    text-align: center;
    padding-left: 10%;
}

.franklin-content .img-small img {
    width: 50%;
    text-align: center;
    padding-left: 20%;
}

/* ==================================================================
  KATEX
================================================================== */

body {
    counter-reset: eqnum;
}

.katex {
    font-size: 1em !important;
}

.katex-display {
    position: relative;
    counter-increment: eqnum;
}

.katex-display::after {
    content: "(" counter(eqnum) ")";
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

/* ==================================================================
  CODE & HIGHLIGHT.JS
================================================================== */

code {
    background-color: var(--code-bg);
    color: var(--code-color);
    padding: 0.1em 0.2em;
    border-radius: 2px;
    font-size: 90%;
}

/* Code blocks with inverted colors */
pre {
    background-color: var(--code-block-bg);
    color: var(--code-block-color);
    padding: 1em;
    border-radius: 10px;
    overflow-x: auto;
}

pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.hljs {
    font-size: 90%;
    line-height: 1.35em;
    border-radius: 10px;
    background-color: var(--code-block-bg) !important;
    color: var(--code-block-color) !important;
}

/* Syntax highlighting colors for dark mode (light background) */
:root[data-theme="dark"] .hljs-keyword,
:root[data-theme="dark"] .hljs-selector-tag,
:root[data-theme="dark"] .hljs-type {
    color: #d73a49; /* Red */
}

:root[data-theme="dark"] .hljs-string,
:root[data-theme="dark"] .hljs-selector-class,
:root[data-theme="dark"] .hljs-selector-id {
    color: #22863a; /* Green */
}

:root[data-theme="dark"] .hljs-comment,
:root[data-theme="dark"] .hljs-quote {
    color: #6a737d; /* Gray */
}

:root[data-theme="dark"] .hljs-number,
:root[data-theme="dark"] .hljs-literal {
    color: #005cc5; /* Blue */
}

:root[data-theme="dark"] .hljs-function,
:root[data-theme="dark"] .hljs-title {
    color: #6f42c1; /* Purple */
}

:root[data-theme="dark"] .hljs-variable,
:root[data-theme="dark"] .hljs-attribute {
    color: #e36209; /* Orange */
}

/* Syntax highlighting colors for light mode (dark background) */
:root[data-theme="light"] .hljs-keyword,
:root[data-theme="light"] .hljs-selector-tag,
:root[data-theme="light"] .hljs-type {
    color: #ff6b6b; /* Light red */
}

:root[data-theme="light"] .hljs-string,
:root[data-theme="light"] .hljs-selector-class,
:root[data-theme="light"] .hljs-selector-id {
    color: #51cf66; /* Light green */
}

:root[data-theme="light"] .hljs-comment,
:root[data-theme="light"] .hljs-quote {
    color: #868e96; /* Light gray */
}

:root[data-theme="light"] .hljs-number,
:root[data-theme="light"] .hljs-literal {
    color: #339af0; /* Light blue */
}

:root[data-theme="light"] .hljs-function,
:root[data-theme="light"] .hljs-title {
    color: #a78bfa; /* Light purple */
}

:root[data-theme="light"] .hljs-variable,
:root[data-theme="light"] .hljs-attribute {
    color: #ff922b; /* Light orange */
}

.hljs-meta,
.hljs-metas,
.hljs-metap {
    font-weight: bold;
}

.hljs-meta {
    color: rgb(25, 179, 51);
}

.hljs-metas {
    color: red;
}

.hljs-metap {
    color: rgb(51, 131, 231);
}

/* ==================================================================
  BOXES
================================================================== */

.franklin-content .colbox-blue {
    background-color: #eef3f5;
    padding-top: 5px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 0 10px 10px 0;
    border-left: 5px solid #4c9cf1;
}

#theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem;
    font-size: 1rem;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    z-index: 1000;
    color: var(--text-color);
}

#theme-toggle:hover {
    opacity: 1;
}