/* ================================
   Zura Website - Theme Variables
================================== */
:root {
  --font-main: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;

  --bg-body: #DCDDDE;
  --bg-nav: #2C2F33;
  --bg-code: #383b41;
  --bg-link: #222;
  --accent: #4d82bf;
  --shadow-dark: rgba(0, 0, 0, 0.4);
  --border-light: rgba(255, 255, 255, 0.05);

  --color-text: #23272A;
  --color-nav-text: #DCDDDE;
  --color-link: #fff;
  --color-discord: #7289DA;
  --color-github: #34292E;

  /* Tokyo Night Theme Color Palette */
  --keyword: #BB9AF7; /* Light purple */
  --type: #7DCFFF; /* Bright cyan */
  --builtin: #E0AF68; /* Golden yellow */
  --conditional: #BB9AF7; /* Light purple */
  --loop: #BB9AF7; /* Light purple */
  --statement: #9ECE6A; /* Soft green */
  --modifier: #7DCFFF; /* Bright cyan */
  --number: #FF9E64; /* Orange */
  --string: #9ECE6A; /* Green */
  --comment: #565F89; /* Muted blue-gray */
  --operator: #89DDFF; /* Light cyan */
  --struct: #7DCFFF; /* Bright cyan */
  --function: #7AA2F7; /* Blue */
  --variable: #C0CAF5; /* Light blue-white */
}

/* ================================
    Dark Mode Variables
================================== */
html.dark-mode body {
  background-color: #23272A;
  color: #DCDDDE;
}

html.dark-mode .footer-link {
  color: #DCDDDE;
}

/* ================================
   Base Styles
================================== */
body {
  font-family: var(--font-main);
  background-color: var(--bg-body);
  color: var(--color-text);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100vh;
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mascot {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-top: 0;
}

.version-beta {
  background: var(--accent);
  border-radius: 20px;
  color: var(--color-text);
  font-size: 50%;
  padding: 3px 7px;
  position: relative;
  margin-left: 0.5rem;
  top: -10px;
}

p {
  font-size: 1.5rem;
  margin-bottom: 0;
}

/* ================================
   Navigation Bar
================================== */
.nav-bar nav {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  background-color: var(--bg-nav);
  padding: 10px 24px;
  border-radius: 30px;
  box-shadow: 0px 6px 12px var(--shadow-dark);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
}

.nav-bar nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-bar nav ul li {
  display: flex;
  align-items: center;
}

.nav-bar nav ul li a,
.nav-bar nav ul li i {
  color: var(--color-nav-text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-bar nav ul li a:hover,
.nav-bar nav ul li i:hover {
  background-color: var(--accent);
}

.toggle-desktop {
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: auto;
  color: var(--color-nav-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 6px;
}

.toggle-mobile {
  display: none; /* hidden by default */
}
/* ===============================
   Hamburger Menu Styles
================================= */
.hamburger {
  background: none;
  border: none;
  color: var(--color-nav-text);
  font-size: 1.8rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.nav-links {
  display: flex;
}

/* ================================
   Prism.js Token Styles (Custom Theme)
================================== */
.code_block {
  width: 100%;

  min-height: 270px;
  /* max-height: 270px; */
  min-width: 270px;
  max-width: 700px;
}

code[class*="language-"],
pre[class*="language-"],
.code-example code[class*="language-"],
.code-example pre[class*="language-"],
.code_block code[class*="language-"],
.code_block pre[class*="language-"] {
  color: #d5d8da !important; /* light gray text */
  background: var(--bg-code) !important; /* dark background */
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks - higher specificity to override other styles */
pre[class*="language-"],
.code-example pre[class*="language-"],
.code_block pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  background: var(--bg-code) !important; /* dark background */
  border-radius: 0.3em;
}

/* Override code-example background */
.code-example {
  background-color: var(--bg-code) !important;
}

/* Inline code - higher specificity */
:not(pre) > code[class*="language-"],
.code-example :not(pre) > code[class*="language-"],
.code_block :not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
  background: var(--bg-code) !important; /* dark background for inline */
}

/* Comments */
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--comment); /* muted grayish-blue */
  font-style: italic;
}

/* Punctuation */
.token.punctuation {
  color: #d5d8da; /* light gray */
}

/* Tags, attribute names, namespace, deleted */
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
  color: var(--type); /* vibrant cyan */
}

/* Function names */
.token.function-name,
.token.function {
  color: var(--function); /* light peach */
  font-weight: bold;
}

/* Boolean, numbers */
.token.boolean,
.token.number {
  color: var(--number); /* warm pink */
}

/* Properties, class names, constants, symbols */
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
  color: var(--struct); /* vibrant cyan */
}

/* Keywords (if, else, return, etc.) */
.token.keyword {
  color: var(--keyword); /* warm pink */
  font-weight: bold;
}

/* Control flow - conditionals and loops */
.token.keyword.control-flow {
  color: var(--conditional); /* muted orange */
  font-weight: bold;
}

/* Selectors, important, atrule, builtin */
.token.selector,
.token.important,
.token.atrule,
.token.builtin {
  color: var(--builtin); /* peachy orange */
  font-weight: bold;
}

/* Strings, char, attribute values, regex */
.token.string,
.token.char,
.token.attr-value,
.token.regex {
  color: var(--string); /* soft green */
}

/* Variables */
.token.variable {
  color: var(--variable); /* light pink */
}

/* Operators, entity, url */
.token.operator,
.token.entity,
.token.url {
  color: var(--operator); /* warm pink */
}

/* Important and bold */
.token.important,
.token.bold {
  font-weight: bold;
}

/* Italic */
.token.italic {
  font-style: italic;
}

/* Entity cursor */
.token.entity {
  cursor: help;
}

/* Inserted */
.token.inserted {
  color: #09f7a0; /* bright green */
}

/* Additional token types for better coverage */
.token.parameter {
  color: #fab795; /* peach */
}

.token.interpolation {
  color: #ec6a88; /* pink */
}

.token.interpolation-punctuation {
  color: #25b0bc; /* teal */
}

/* ================================
   Link Buttons
================================== */
.link__holder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.link {
  background-color: var(--shadow-dark);
  color: var(--color-link);
  margin-top: 16px;
  padding: 7px 14px 6px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  flex: 1 1 auto;
  max-width: 100%;
}

.link svg {
  width: 40px;
  height: 40px;
  margin-right: 4px;
}

.link span {
  margin: 0 4px 0 8px;
}

.discord-link,
.github-link {
  border-radius: 5px;
  box-shadow: 3px 7px 0 #111;
  transition: all 0.3s;
}

.discord-link {
  background-color: var(--color-discord);
}

.github-link {
  background-color: var(--color-github);
}

.discord-link:hover,
.github-link:hover {
  box-shadow: none;
  transform: translateY(3px);
}

/* ================================
   Book Layout
================================== */
.book-layout {
  padding-top: 15%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.left-page,
.right-page {
  flex: 1;
  min-width: 320px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.book-layout h1 {
  font-size: 2em;
  margin-bottom: 20px;
  text-align: center;
}

.book-layout p {
  font-size: 1.1em;
  line-height: 1.6;
  margin-top: 0;
  text-align: center;
}

/* ===============================
   Footer 
================================== */
.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer p {
  margin: 0;
  font-size: 0.9rem;
}

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

.footer a:hover {
  text-decoration: underline;
}

/* ================================
   Docs
================================== */
.docs-container {
  max-width: 900px;
  height: 100%;
  margin: 5% auto;
  padding: 0px 20px;
  background: var(--bg-body, #1e1e1e);
  color: var(--color-text, #ddd);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  line-height: 1.75;
}

.docs-container pre {
  background: var(--bg-code, #2c2f33);
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto;
}

.docs-container code {
  font-family: monospace;
  font-size: 0.95rem;
}

.docs-container h1,
.docs-container h2,
.docs-container h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

/* Inline code in Markdown-rendered docs */
.docs-container p code,
.docs-container li code,
.docs-container span code {
  background-color: #f1f1f1;
  padding: 0.2em 0.4em;
  font-family: monospace;
  font-size: 0.95rem;
  border-radius: 4px;
  color: #d6336c; /* deep red/pink */
}

.docs-container a {
  color: var(--color-text, #ddd);
  text-decoration: none;
}

.docs-container a:hover {
  text-decoration: underline;
}

/* ================================
   Docs Dark Mode
================================== */

html.dark-mode .docs-container {
  background-color: #2C2F33;
  color: #DCDDDE;
}

html.dark-mode .docs-container a {
  color: #DCDDDE;
  text-decoration: none;
}

html.dark-mode .docs-container a:hover {
  text-decoration: underline;
}

html.dark-mode .docs-container p code,
html.dark-mode .docs-container li code,
html.dark-mode .docs-container span code {
  background-color: #2c2f33;
  color: #ff7b96; /* brighter red/pink */
}

/* ================================
   Anchor Link Light Mode
================================== */

/* Light mode heading link color */
.docs-container h1 a.anchor-link,
.docs-container h2 a.anchor-link,
.docs-container h3 a.anchor-link,
.docs-container h4 a.anchor-link {
  color: var(--accent); /* or choose your preferred color */
  text-decoration: none;
  transition: color 0.3s ease;
}

.docs-container h1 a.anchor-link:hover,
.docs-container h2 a.anchor-link:hover,
.docs-container h3 a.anchor-link:hover,
.docs-container h4 a.anchor-link:hover {
  color: #ff9d00; /* Brighter on hover */
  text-decoration: underline;
}

/* ================================
   Anchor Link Dark Mode
================================== */

html.dark-mode .docs-container h1 a.anchor-link,
html.dark-mode .docs-container h2 a.anchor-link,
html.dark-mode .docs-container h3 a.anchor-link,
html.dark-mode .docs-container h4 a.anchor-link {
  color: #79b8ff; /* bright blue for dark mode */
}

html.dark-mode .docs-container h1 a.anchor-link:hover,
html.dark-mode .docs-container h2 a.anchor-link:hover,
html.dark-mode .docs-container h3 a.anchor-link:hover,
html.dark-mode .docs-container h4 a.anchor-link:hover {
  color: #ffb347;
}

/* ================================
   Admonition Styles
================================== */

.admonition {
  border-left: 6px solid;
  padding: 1rem;
  margin: 1.5rem 0;
  border-radius: 6px;
  background-color: #f8f8f8;
}

.admonition-title {
  font-weight: bold;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.admonition-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Variants for specific admonition types */
.admonition-warning {
  border-color: #f39c12;
  background-color: #fff3cd;
  color: #856404;
}

.admonition-tip {
  border-color: #28a745;
  background-color: #d4edda;
  color: #155724;
}

.admonition-note {
  border-color: #007bff;
  background-color: #e9f7fe;
  color: #004085;
}

.admonition-danger {
  border-color: #dc3545;
  background-color: #f8d7da;
  color: #721c24;
}

/* ================================
   Admonition Dark Mode
================================== */
html.dark-mode .admonition {
  background-color: #2C2F33;
  border-left: 6px solid;
  padding: 1rem;
  margin: 1.5rem 0;
  border-radius: 6px;
}

html.dark-mode .admonition-title {
  font-weight: bold;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

html.dark-mode .admonition-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #dddddd;
}

html.dark-mode .admonition-warning {
  border-color: #f39c12;
  background-color: #3b2f1e;
  color: #f8c471;
}

html.dark-mode .admonition-tip {
  border-color: #28a745;
  background-color: #1e3b28;
  color: #a9dfbf;
}

html.dark-mode .admonition-note {
  border-color: #007bff;
  background-color: #1e2e40;
  color: #a9cfe8;
}

html.dark-mode .admonition-danger {
  border-color: #dc3545;
  background-color: #3c1e22;
  color: #f5b7b1;
}

/* Add this to better support Zura code blocks */
code[class*="language-"],
pre[class*="language-"] {
  background: var(--bg-code, #2c2f33);
}

/* ================================
   Responsive Design
================================== */
/* 
@media (max-width: 1600px) {
  .container {
    padding: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .nav-bar nav {
    padding: 8px 16px;
  }

  .code_block pre[class*="language-"],
  .code_block code[class*="language-"] {
    font-size: 0.95rem;
  }

  .regular-layout {
    padding-top: 50px;
  }


  .left-page,
  .right-page {
    max-width: 100%;
  }

  .docs-container {
    max-width: 85%;
    margin: 10% auto;
    padding: 0px 15px;
    font-size: 0.95rem;
  }

  .docs-container p {
    font-size: 0.9rem;
  }

  .docs-container span code {
    font-size: 0.85rem;
  }


  .footer {
    position: relative;
  }
} */


container {
    padding: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .nav-bar nav {
    padding: 8px 16px;
  }

  /* .code_block pre[class*="language-"],
  .code_block code[class*="language-"] {
    font-size: 0.95rem;
  } */

.code_block {
  width: 100%;

  min-height: 270px;
  /* max-height: 270px; */
  min-width: 700px;
  max-width: 700px;
}



  .regular-layout {
    padding-top: 50px;
  }

  /* .book-layout {
    padding-top: 50px;
  } */

  .left-page,
  .right-page {
    max-width: 100%;
  }

  .docs-container {
    max-width: 85%;
    margin: 10% auto;
    padding: 0px 15px;
    font-size: 0.95rem;
  }

  .docs-container p {
    font-size: 0.9rem;
  }

  .docs-container span code {
    font-size: 0.85rem;
  }


  .footer {
    position: relative;
  }


@media (max-width: 768px) {
  .container {
    padding: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .nav-bar .toggle-desktop {
    display: none; /* hide desktop toggle on mobile */
  }


  .nav-bar nav {
    display: flex;
    align-items: center;     /* ensures items inside are vertically aligned */
    height: 45px;            /* or whatever height works well for your UI */
    justify-content: space-between;
    position: fixed;
    width: 100%;
    border-radius: 0;
    left: -17px;
    top: 0;
    transform: none;
  }

  .toggle-mobile {
    display: block; /* shows the mobile toggle */
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-nav-text);
    margin-bottom: 10px;
  }

  .hamburger {
    display: block;
    padding-bottom: 10px;
  }

  .nav-links {
    display: none; /* stays hidden by default */
    flex-direction: column;
    width: 100%; /* make it match full navbar width */
    position: absolute;
    top: 100%; /* right below the navbar */
    left: 0px;
    background-color: var(--bg-nav);
    border-radius: 0 0 10px 10px;
    box-shadow: 0px 6px 12px var(--shadow-dark);
    z-index: 1000;
  }

  .nav-bar nav ul li a.active {
    position: relative;
    color: var(--accent);
  }

  .nav-bar nav ul li a.active::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent);
  }

  .nav-links.active {
    display: flex; /* shows it when toggled */
  }

  .nav-links ul {
    flex-direction: column;
    width: 100%;
    padding: 0;
  }

  .nav-links ul li {
    justify-content: center;
    padding: 8px 0;
  }

  .link {
    font-size: 0.9rem;
    padding: 6px 10px;
  }

  .codeBlockSwitcher {
    width: 90%;
  }

  /* .code_block {
    width: 100%;
  } */

  .code_block pre[class*="language-"],
  .code_block code[class*="language-"] {
    font-size: 0.65rem;
  }

  .mascot {
    max-width: 150px;
  }

  .regular-layout h1 {
    font-size: 1.5em;
  }

  .container {
    padding: 0 1rem;
  }

  .docs-container {
    max-width: 75%;
    margin: 15% auto;
    padding: 0px 10px;
    font-size: small;
  }

  .docs-container pre span code {
    font-size: 0.55rem;
  }

  .footer {
    position: relative;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: center;
  }

  .code_block {
    width: 100%;
    transform: translateX(-4.5%);
    margin: 0 auto;
  }

  .code_block pre[class*="language-"],
  .code_block code[class*="language-"] {
    font-size: 0.50rem;
  }

  .footer p {
    font-size: 0.8rem;
  }

  .nav-bar nav {
    padding: 6px 12px;
  }

  .docs-container {
    max-width: 90%;
    margin: 20% auto;
    padding: 0px 5px;
    font-size: smaller;
  }

  .docs-container p {
    font-size: 0.7rem;
  }

  .docs-container h1,
  .docs-container h2,
  .docs-container h3 {
    font-size: 1.2rem;
    text-align: center;
    word-wrap: break-word;
  }

  .docs-container h1 a.anchor-link,
  .docs-container h2 a.anchor-link,
  .docs-container h3 a.anchor-link {
    font-size: 1rem;
    color: var(--accent);
    display: inline-block;
    word-break: break-word;
  }

  .docs-container pre {
    font-size: 0.65rem;
    word-break: break-word;
  }

  .docs-container table {
    width: 100%;
    overflow-x: auto;
    display: block;
    font-size: 0.65rem;
  }

  .docs-container ul,
  .docs-container ol {
    padding-left: 1rem;
  }

  .docs-container pre code {
    font-size: 0.60rem;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .docs-container p code,
  .docs-container li code,
  .docs-container span code {
    font-size: 0.7rem;
    padding: 0.1em 0.3em;
    border-radius: 4px;
    background-color: #f1f1f1;
    color: #d6336c; /* deep red/pink */
  }
}

.code-note {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  opacity: 0.85;
}
.dark-mode .code-note { opacity: 0.9; }


.code-block-wrapper {
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 0.25rem;
  right: 0rem;

  border: none;
  background: #444;
  color: #fff;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.copy-btn:hover {
  opacity: 1;
}

.copy-btn.copied {
  background: #2ecc71;
  color: #fff;
}