/*@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap");*/
@import url("https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css");

body {
    font-family: "LXGW WenKai Screen", serif;
    line-height: 1.6;
    color: #586e75; /* Solarized Light base01 */
    background-color: #fdf6e3; /* Solarized Light base3 */
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

header h1 {
    margin: 0;
}

a {
    color: #073642;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #268bd2;
    text-decoration: none;
}

blockquote {
    background-color: #eee8d5; /* Solarized Light base2 */
    border-left: 4px solid #93a1a1; /* Solarized Light base1 */
    margin: 1.5em 0;
    padding: 1em 1.5em;
    font-style: italic;
    color: #657b83; /* Solarized Light base00 */
    position: relative;
    border-radius: 0 4px 4px 0;
}

blockquote::before {
    content: "";
    font-size: 3em;
    position: absolute;
    left: 10px;
    top: -10px;
    color: #93a1a1; /* Solarized Light base1 */
    opacity: 0.5;
}

blockquote p {
    margin: 0;
}

blockquote p + p {
    margin-top: 1em;
}

code {
    font-family: "JetBrains Mono", "Menlo", "Monaco", "Consolas", "Courier New", "LXGW WenKai Mono Screen",
        monospace;
    font-size: 0.9em;
    background-color: #eee8d5; /* Solarized Light base2 */
    color: #073642; /* Solarized Light base02 */
    padding: 2px 4px;
    border-radius: 3px;
}

footer {
    text-align: center;
}

footer .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .footer-left {
    display: flex;
    align-items: center;
}

footer p {
    margin: 0;
    margin-right: 10px; /* Adds some space between the text and the CC icon */
}

footer .social-links {
    display: flex;
    gap: 10px;
}

footer img {
    height: 26px; /* Increased height for a slightly bigger image */
    width: auto;
}

mark {
    background-color: #b58900;
    color: #fdf6e3;
    border-radius: 2px;
}

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem;
    justify-content: flex-start;
}

nav a {
    margin-right: 0;
    font-size: 0.95em;
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #268bd2;
}

nav#table-of-contents {
    display: flex;
    flex-direction: column;
    margin: -20px 0 5px;
}

nav#table-of-contents h2 {
    margin-bottom: 10px;
}

pre.src .hljs-attr,
pre.src .hljs-attribute {
    color: #e06c75;
}

pre.src .hljs-bullet,
pre.src .hljs-symbol,
pre.src .hljs-meta,
pre.src .hljs-selector-id,
pre.src .hljs-selector-class {
    color: #c678dd;
}

pre.src .hljs-comment,
pre.src .hljs-quote {
    color: #5c6370;
    font-style: italic;
}

pre.src .hljs-doctag,
pre.src .hljs-string {
    color: #98c379;
}

pre.src .hljs-emphasis {
    font-style: italic;
}

pre.src .hljs-keyword,
pre.src .hljs-selector-tag,
pre.src .hljs-subst {
    color: #c678dd;
}

pre.src .hljs-literal,
pre.src .hljs-number,
pre.src .hljs-tag .hljs-attr,
pre.src .hljs-template-variable,
pre.src .hljs-variable {
    color: #d19a66;
}

pre.src .hljs-regexp,
pre.src .hljs-link {
    color: #56b6c2;
}

pre.src .hljs-strong {
    font-weight: bold;
}

pre.src .hljs-tag,
pre.src .hljs-name,
pre.src .hljs-title.function_ {
    color: #61afef;
}

pre.src .hljs-title,
pre.src .hljs-section,
pre.src .hljs-title.class_ {
    color: #e5c07b;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #fdf6e3;
}

td,
th {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

th {
    background-color: #fdf6e3;
    color: #333;
    font-weight: bold;
}

tr:hover {
    background-color: #f1f1f1;
}

tr:nth-child(even) {
    background-color: #fdf6e3;
}

#content > *:not(#search-results) {
    display: block;
}

#search-container {
    margin-left: auto;
    display: flex;
    align-items: center;
    min-width: 150px;
    max-width: 200px;
}

#search-input {
    width: 100%;
    padding: 0.5rem;
    padding-right: 30px;
    border: 1px solid #93a1a1;
    border-radius: 4px;
    background-color: #fdf6e3;
    color: #586e75;
    font-size: 0.9em;
    transition: border-color 0.3s ease;
}

#search-input:hover {
    border-color: #268bd2;
}

#search-result {
    margin-bottom: 20px;
}

#search-result a {
    font-weight: bold;
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

#search-result a:hover {
    color: #268bd2;
}

#search-result p {
    margin: 5px 0;
}

#search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

#text-table-of-contents {
    margin-top: 0;
}

.org-src-container {
    position: relative;
    margin-bottom: 1.6em;
}

.org-src-container pre.src {
    margin-top: 0;
    background-color: #282c34;
    border: 1px solid #3e4451;
    border-left: 3px solid #528bff;
    color: #abb2bf;
    page-break-inside: avoid;
    font-family: "JetBrains Mono", "Menlo", "Monaco", "Consolas", "Courier New", "LXGW WenKai Mono Screen",
        monospace;
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
    position: relative;
    border-radius: 4px;
}

.org-src-container pre.src::before {
    content: none;
}

.org-src-container pre.src-bash::before {
    content: "bash";
}

.org-src-container pre.src-cpp::before {
    content: "cpp";
}

.org-src-container pre.src-css::before {
    content: "css";
}

.org-src-container pre.src-go::before {
    content: "go";
}

.org-src-container pre.src-haskell::before {
    content: "haskell";
}

.org-src-container pre.src-html::before {
    content: "html";
}

.org-src-container pre.src-js::before {
    content: "js";
}

.org-src-container pre.src-lsp::before {
    content: "lsp";
}

.org-src-container pre.src-org::before {
    content: "org";
}

.org-src-container pre.src-python::before {
    content: "python";
}

.org-src-container pre.src-rust::before {
    content: "rust";
}

.org-src-container pre.src-solidity::before {
    content: "solidity";
}

.org-src-container pre.src-sql::before {
    content: "sql";
}

.org-src-container pre.src::before {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #528bff;
    color: #fff;
    padding: 2px 8px;
    font-size: 0.85em;
    font-weight: normal;
    border-bottom-left-radius: 4px;
    text-transform: lowercase;
}

.post-date {
    color: #666;
    font-size: 0.9em;
}

.search-icon {
    margin-left: -2rem;
    color: #586e75;
    flex-grow: 1;
    font-size: 1.2em;
    transition: color 0.3s ease;
}

.search-icon:hover {
    color: #268bd2;
}

.search-result {
    background-color: #fdf6e3;
    border: 1px solid #eee8d5;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 0.9em;
}

.search-result a {
    font-size: 1.1em;
    color: #073642;
    text-decoration: none;
    margin-bottom: 10px;
    display: block;
    transition: color 0.3s ease;
}

.search-result a:hover {
    color: #268bd2;
}

.search-result-snippet {
    background-color: #eee8d5;
    border: 1px solid #93a1a1;
    border-radius: 4px;
    padding: 5px 5px 0;
    margin-top: 5px;
    font-size: 0.85em;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    text-decoration: none;
    font-size: 1.5em;
    color: #586e75;
    margin-left: 10px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #268bd2;
}

::selection {
    background-color: #b58900; /* Solarized Light yellow */
    color: #fdf6e3; /* Solarized Light base3 */
}

::-moz-selection {
    background-color: #b58900; /* Solarized Light yellow */
    color: #fdf6e3; /* Solarized Light base3 */
}

/* 移动端适配 */
@media screen and (max-width: 600px) {
    nav {
        justify-content: center;
        gap: 0.5rem;
    }
    
    #search-container {
        order: 1;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-top: 0.5rem;
    }

    nav a {
        padding: 0.3rem 0.5rem;
        text-align: center;
    }
}

/* 特别小的屏幕（如 iPhone SE2）的额外适配 */
@media screen and (max-width: 375px) {
    nav {
        gap: 0.4rem;
        padding: 0.4rem;
    }

    nav a {
        font-size: 0.9em;
        padding: 0.2rem 0.4rem;
    }
}

/* 修改搜索图标的样式 */
#search-container img {
    width: 20px;  /* 设置固定宽度 */
    height: 20px; /* 设置固定高度 */
    margin-left: -30px; /* 调整位置，使其位于输入框内部 */
    cursor: pointer;
}

#search-input {
    padding-right: 30px; /* 为图标留出空间 */
}