@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --ifm-color-primary: #9200E1;
  --ifm-color-primary-dark: #7A00C1;
  --ifm-color-primary-darker: #6200A1;
  --ifm-color-primary-darkest: #4A0081;
  --ifm-color-primary-light: #B75FFF;
  --ifm-color-primary-lighter: #CB8AFF;
  --ifm-color-primary-lightest: #E3C1FF;
  --ifm-code-font-size: 95%;
  --ifm-font-size-base: 15px;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* Dark mode primary colors */
[data-theme='dark'] {
  --ifm-color-primary: #CB8AFF;
  --ifm-color-primary-dark: #B75FFF;
  --ifm-color-primary-darker: #A855F7;
  --ifm-color-primary-darkest: #9333EA;
  --ifm-color-primary-light: #D8B4FE;
  --ifm-color-primary-lighter: #E9D5FF;
  --ifm-color-primary-lightest: #F3E8FF;
}

/* Search bar  */
.navbar__search {
  padding-right: 10px;
}

.navbar__search-input {
  background-color: #f0f0f0;
  border: none;
  border-radius: 20px;
  padding: 8px 16px 8px 36px;
  font-size: 14px;
  width: 200px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.navbar__search-input:focus {
  width: 300px;
  background-color: #ffffff;
  outline: none;
}

.navbar__search::before {
  content: '\f002';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

/* GitHub icon */
.header-github-link {
  padding-left: 10px;
}

.header-github-link:hover {
  opacity: 0.6;
}

.header-github-link::before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

/* Twitter icon */
.header-twitter-link {
  padding-left: 10px;
}

.header-twitter-link:hover {
  opacity: 0.6;
}

.header-twitter-link::before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xNC4wOTU0NzksMTAuMzE2NDgyTDIyLjI4NjM1NCwxaC0xLjk0MDcxOGwtNy4xMTUzNTIsOC4wODc2ODJMNy41NTE0MTQsMUgxbDguNTg5NDg4LDEyLjIzMTA5M0wxLDIzaDEuOTQwNzE3ICBsNy41MDkzNzItOC41NDI4NjFMMTYuNDQ4NTg3LDIzSDIzTDE0LjA5NTQ3OSwxMC4zMTY0ODJ6IE0xMS40MzY1MjIsMTMuMzM4NDY1bC0wLjg3MTYyNC0xLjIxODcwNGwtNi45MjQzMTEtOS42ODgxNWgyLjk4MTMzOSAgbDUuNTg5NzgsNy44MjE1NWwwLjg2Nzk0OSwxLjIxODcwNGw3LjI2NTA2LDEwLjE2NjI3MWgtMi45ODEzMzlMMTEuNDM2NTIyLDEzLjMzODQ2NXoiLz48L3N2Zz4=")
    no-repeat;
}

html[data-theme='dark'] .header-twitter-link::before{
  filter: brightness(0) invert(1);
}

/* Dark mode adjustments */
html[data-theme='dark'] .navbar__search-input {
  background-color: #333;
  color: #fff;
}

html[data-theme='dark'] .navbar__search-input:focus {
  background-color: #444;
}

html[data-theme='dark'] .header-github-link::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}
/* Global Styles */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--ifm-font-size-base);
  line-height: 1.5;
}

/* Typography */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* Markdown Content */
.markdown {
  font-size: 1rem;
  line-height: 1.7;
}

.markdown p {
  margin-bottom: 1.5rem;
}

.whitepaper-container iframe{
  width: 100%;
  min-height: 80vh;
}

/* Code Styling */
code {
  font-size: 14px;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  background-color: var(--ifm-code-background);
}

pre[class*="language-"] {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Sidebar Styles */
.menu {
  padding-top: 0 !important;
}

.menu__list {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.theme-doc-sidebar-menu > li:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.theme-doc-sidebar-menu > li:first-child > a {
  padding-top: 0.5rem !important;
  font-family: 'Geist Mono', 'Courier New', monospace;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  padding-left: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234A90E2' d='M21,5c-1.11-0.35-2.33-0.5-3.5-0.5c-1.95,0-4.05,0.4-5.5,1.5c-1.45-1.1-3.55-1.5-5.5-1.5S2.45,4.9,1,6v14.65 c0,0.25,0.25,0.5,0.5,0.5c0.1,0,0.15-0.05,0.25-0.05C3.1,20.45,5.05,20,6.5,20c1.95,0,4.05,0.4,5.5,1.5c1.35-0.85,3.8-1.5,5.5-1.5 c1.65,0,3.35,0.3,4.75,1.05c0.1,0.05,0.15,0.05,0.25,0.05c0.25,0,0.5-0.25,0.5-0.5V6C22.4,5.55,21.75,5.25,21,5z M21,18.5 c-1.1-0.35-2.3-0.5-3.5-0.5c-1.7,0-4.15,0.65-5.5,1.5V8c1.35-0.85,3.8-1.5,5.5-1.5c1.2,0,2.4,0.15,3.5,0.5V18.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
}

.sidebar-category > .menu__list-item-collapsible > .menu__link {
  font-family: 'Geist Mono', 'Courier New', monospace;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}

/* .sidebar-category > .menu__list-item-collapsible > .menu__link::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
} */

/* .sidebar-category.intro > .menu__list-item-collapsible > .menu__link::before {
  content: '📘';
}

.sidebar-category.concepts > .menu__list-item-collapsible > .menu__link::before {
  content: '🧠';
}

.sidebar-category.run-node > .menu__list-item-collapsible > .menu__link::before {
  content: '🖥️';
}

.sidebar-category.developer-hub > .menu__list-item-collapsible > .menu__link::before {
  content: '👨‍💻';
}

.sidebar-category.build-with-0g > .menu__list-item-collapsible > .menu__link::before {
  content: '🔧';
}

.sidebar-category.resources > .menu__list-item-collapsible > .menu__link::before {
  content: '📚';
}
.sidebar-category.node-sale > .menu__list-item-collapsible > .menu__link::before {
  content: '💎';
} */
.menu__link:hover {
  background-color: var(--ifm-menu-color-background-active);
  color: var(--ifm-menu-color-active);
}

/* Tab Styles */
.tabs__item:hover {
  background-color: var(--ifm-color-emphasis-200);
}

.tabs__item--active {
  color: var(--ifm-color-black);
  border-color: var(--ifm-color-primary);
  font-weight: 600;
}

/* Node Links Styles */
.nodeLinksContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 2rem 0;
}

.nodeLink {
  flex-basis: calc(50% - 10px);
  max-width: 250px;
  text-decoration: none;
  color: #333;
}

.nodeLinkInner {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  background-color: #f5f5f5;
  color: #333;
}

.nodeLinkInner:hover {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for node links */
@media (max-width: 768px) {
  .nodeLink,
  .nodeLink:nth-child(n+3),
  .nodeLink:nth-child(1),
  .nodeLink:nth-child(2) {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Code Block Styles */
.theme-code-block {
  background-color: #1e1e1e !important;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.theme-code-block pre {
  background-color: transparent !important;
}

.theme-code-block code {
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.5;
}

.theme-code-block-highlighted {
  background-color: #2a2a2a !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.theme-code-block .line-numbers {
  border-right: 1px solid #3a3a3a;
  padding-right: 10px;
}

/* Syntax highlighting */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: #608b4e; }
.token.punctuation { color: #d4d4d4; }
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted { color: #569cd6; }
.token.boolean,
.token.number { color: #b5cea8; }
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted { color: #ce9178; }
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string { color: #d4d4d4; }
.token.atrule,
.token.attr-value,
.token.keyword { color: #c586c0; }
.token.function { color: #dcdcaa; }
.token.regex,
.token.important,
.token.variable { color: #d16969; }
.token.important,
.token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Footer Styles */
.footer {
  background-color: #0a0a0a;
  color: #ffffff;
  padding: 3rem 0;
}

.footer__links {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.footer__col {
  flex: 1;
  margin-right: 1rem;
}

.footer__title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.footer__item {
  margin-bottom: 0.5rem;
}

.footer__link-item {
  color: #a0a0a0;
  text-decoration: none;
  transition: color 0.2s;
}

.footer__link-item:hover {
  color: #ffffff;
  text-decoration: none;
}

.footer__logo {
  max-width: 160px;
  margin-bottom: 1rem;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #333;
  padding-top: 1rem;
}

.footer__copyright {
  font-size: 0.9rem;
  color: #a0a0a0;
}

/* Social Icons */
.footer__link-item[href*="t.me"]::before,
.footer__link-item[href*="discord.gg"]::before,
.footer__link-item[href*="x.com"]::before,
.footer__link-item[href*="github.com"]::before {
  font-family: 'Font Awesome 5 Brands';
  margin-right: 0.5rem;
}

.footer__link-item[href*="0g.ai/blog"]::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 0.5rem;
}

.footer__link-item[href*="t.me"]::before { content: "\f2c6"; }
.footer__link-item[href*="0g.ai/blog"]::before { content: "\f15c"; }
.footer__link-item[href*="discord.gg"]::before { content: "\f392"; }
.footer__link-item[href*="x.com"]::before { content: "\e61b"; }
.footer__link-item[href*="github.com"]::before { content: "\f09b"; }

/* Responsive Footer */
@media screen and (max-width: 996px) {
  .footer__links {
    flex-direction: column;
  }
  .footer__col {
    margin-bottom: 2rem;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__copyright {
    margin-top: 1rem;
  }
}

[data-theme='dark'] {
  --ifm-button-color: #ffffff;
}

[data-theme='dark'] .button {
  color: var(--ifm-button-color);
}

[data-theme='dark'] .button:hover,
[data-theme='dark'] .button:active,
[data-theme='dark'] .button:focus {
  color: var(--ifm-button-color);
}

[data-theme='dark'] .button--active {
  color: var(--ifm-button-color);
}

[data-theme='dark'] .tabs__item {
  color: var(--ifm-font-color-base);
}

[data-theme='dark'] .tabs__item--active {
  color: var(--ifm-tabs-color-active);
}

/* Hubs icon */
.header-hubs-link {
  padding: 0.5rem 1rem;
  margin-left: 10px;
  border-radius: 20px;
  background-color: var(--ifm-color-primary);
  color: white !important;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.header-hubs-link:hover {
  background-color: var(--ifm-color-primary-darker);
  text-decoration: none;
}

html[data-theme='dark'] .header-hubs-link {
  background-color: var(--ifm-color-primary-darker);
}

html[data-theme='dark'] .header-hubs-link:hover {
  background-color: var(--ifm-color-primary-darkest);
}

.header-hubs-link-text {
  font-size: 16px;
  font-weight: 800;
}

/* Hide 0G Hub button on mobile */
@media screen and (max-width: 996px) {
  .header-hubs-link {
    display: none;
  }
}

/* 0G Hub link in sidebar */
.sidebar-0g-hub-link {
  display: none;
  justify-content: center;
}


/* Style 0G Hub link in sidebar */
.sidebar-0g-hub-link a {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 20px;
  background-color: var(--ifm-color-primary);
  color: white !important;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s ease;
  justify-content: center;
  width: max-content;
  font-size: medium;
}

.sidebar-0g-hub-link a:hover {
  background-color: var(--ifm-color-primary-darker);
  text-decoration: none;
  color: white !important;
}

/* Show 0G Hub link in sidebar only on mobile */
@media screen and (max-width: 996px) {
  .sidebar-0g-hub-link {
    display: flex;
  }
}

/* Move search bar to center */

/* Enhanced UX Elements for Documentation */
.admonition-heading {
  font-weight: 600;
}

/* Better visual hierarchy for callout boxes */
.alert--info {
  border-left: 4px solid var(--ifm-color-info);
}

.alert--tip {
  border-left: 4px solid var(--ifm-color-success);
}

.alert--warning {
  border-left: 4px solid var(--ifm-color-warning);
}

/* Three-level understanding sections */
.markdown h3 {
  margin-top: 2rem;
}

/* Component cards styling */
.markdown h3 + p + ul {
  list-style: none;
  padding-left: 0;
}

.markdown h3 + p + ul li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.markdown h3 + p + ul li:before {
  content: "•";
  position: absolute;
  left: 0.5rem;
  /* color: var(--ifm-color-primary); */
}

/* Site title in Geist Mono */
.navbar__title {
  /* font-family: 'Geist Mono', 'Courier New', monospace !important; */
  font-weight: 800;
  font-size: 1.2rem;
  /* letter-spacing: 0.1px; */
}
