/* ==========================================================================
   Ibralogue Docs — unified theme
   Matches the landing page at ibralogue.github.io
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --teal-50:  #eefaf9;
  --teal-100: #d5f2f0;
  --teal-200: #a8e5e1;
  --teal-500: #1d7773;
  --teal-600: #186260;
  --teal-900: #0c2e2d;

  --surface:       #ffffff;
  --surface-warm:  #fffaef;
  --surface-muted: #f8f7f4;
  --surface-dim:   #f3f3f3;

  --ink:       #34393e;
  --ink-muted: #6b7280;
  --ink-faint: #9ca3af;

  --shadow-card: 0 1px 2px 0 rgba(61, 65, 68, 0.06),
                 0 1px 3px 1px rgba(61, 65, 68, 0.16);
  --radius:     8px;
  --transition: 200ms ease;
}

/* ---------- Base ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--ink);
  background-color: var(--surface);
  font-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  word-wrap: break-word;
}

::selection {
  background: var(--teal-100);
  color: var(--teal-900);
}

/* ---------- Links ---------- */
button, a {
  color: var(--teal-500);
  cursor: pointer;
  transition: color var(--transition);
}

button:hover, button:focus,
a:hover, a:focus {
  color: var(--teal-600);
  text-decoration: none;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: 28px; line-height: 1.3; }
h2 { font-size: 22px; line-height: 1.4; }
h3 { font-size: 18px; line-height: 1.4; }
h4 { font-size: 16px; line-height: 1.5; font-weight: 600; }
h5 { font-size: 13px; line-height: 1.5; padding: 8px 0; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }

article h1,
article h2,
article h3,
article h4 {
  margin-top: 2em;
  margin-bottom: 0.6em;
}

article h4 {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--surface-dim);
}

/* ---------- Navbar ---------- */
.navbar {
  border: none;
  box-shadow: var(--shadow-card);
}

.navbar-inverse {
  background-color: var(--teal-500);
  z-index: 100;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.navbar-brand > img {
  height: 24px;
  width: auto;
}

.brand-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

.brand-label {
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 2px;
}

/* Docs nav links (Manual, Scripting Reference) rendered from toc.yml */
.navbar-nav-docs {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar-nav-docs > li > a {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px;
  font-weight: 600;
  padding: 15px 14px !important;
  border-bottom: none !important;
  transition: color var(--transition);
}

.navbar-nav-docs > li > a:hover,
.navbar-nav-docs > li > a:focus {
  color: #fff !important;
  background-color: transparent !important;
  border-bottom: none !important;
}

/* Site-wide nav links (Website, GitHub, Discord) */
.navbar-site-links {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar-site-links > li > a {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 15px 14px !important;
  border-bottom: none !important;
  transition: color var(--transition);
}

.navbar-site-links > li > a:hover,
.navbar-site-links > li > a:focus {
  color: #fff !important;
  background-color: transparent !important;
  border-bottom: none !important;
}

.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-text {
  color: rgba(255, 255, 255, 0.85);
  background-color: transparent;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  padding-bottom: 12px;
  transition: color var(--transition), border-color var(--transition);
}

.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:hover {
  color: #fff;
  background-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
  color: #fff;
  background-color: transparent;
  border-bottom-color: #fff;
}

/* Search in navbar */
.navbar-form .form-control {
  border: 0;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  box-shadow: none;
  transition: background-color var(--transition);
}

.navbar-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-form .form-control:focus {
  background-color: rgba(255, 255, 255, 0.25);
  outline: none;
  box-shadow: none;
}

/* Subnav / breadcrumb bar */
/* Hide the empty breadcrumb subnav — adds visual noise without value */
.subnav {
  display: none;
}

/* Navbar toggle (mobile) */
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border: none;
}

.navbar-inverse .navbar-toggle {
  border: none;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #fff;
}

/* ---------- Sidebar / TOC ---------- */
.sidetoc {
  background-color: var(--surface);
  border-left: none;
  border-right: 1px solid var(--surface-dim);
}

.sidetoc > .toc {
  background-color: var(--surface);
  overflow-x: hidden;
}

body .toc {
  background-color: var(--surface);
}

.sidefilter {
  background-color: var(--surface);
  border-left: none;
  border-right: none;
}

.sidenav,
.fixed_header,
.toc {
  background-color: var(--surface);
}

.toc-filter {
  padding: 6px 10px;
  margin: 0;
  border-radius: 6px;
  border: 1px solid var(--surface-dim);
  background-color: var(--surface);
  box-shadow: none;
  transition: border-color var(--transition);
}

.toc-filter:hover,
.toc-filter:focus-within {
  border-color: var(--teal-200);
}

.toc-filter > input {
  border: none;
  background-color: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink);
}

.toc-filter > input::placeholder {
  color: var(--ink-faint);
}

.toc-filter > .filter-icon {
  display: none;
}

.toc .nav > li > a {
  color: var(--ink-muted);
  font-size: 13px;
  padding: 3px 0;
  transition: color var(--transition);
}

.toc .nav > li > a:hover,
.toc .nav > li > a:focus {
  color: var(--teal-500);
  background: none;
}

.toc .nav > li.active > a {
  color: var(--teal-500);
  font-weight: 500;
}

.toc .nav > li.active > a:hover,
.toc .nav > li.active > a:focus {
  color: var(--teal-600);
}

.toc .level1 > li {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  margin-top: 6px;
}

.toc .level2 {
  font-weight: 400;
  font-size: 13px;
}

/* ---------- Article content ---------- */
.article {
  color: var(--ink);
  line-height: 1.7;
  margin-top: 70px;
}

/* Adjust sidebar position to match reduced header height */
.sidefilter {
  top: 60px;
  z-index: 1;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--surface-dim);
}

.sidetoc {
  top: 120px;
}

article p,
article li {
  color: var(--ink);
}

/* Inline code */
article code,
p code,
li code,
td code {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.85em;
  background-color: var(--surface-warm);
  color: var(--ink);
  border-radius: 4px;
  padding: 2px 6px;
}

/* Links inside code */
a code {
  color: var(--teal-500);
  background-color: var(--surface-warm);
}

a code:hover {
  color: var(--teal-600);
  text-decoration: none;
}

/* ---------- Code blocks ---------- */
pre {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 16px;
  margin: 0 0 16px;
  word-break: break-all;
  word-wrap: break-word;
  background-color: var(--surface-warm);
  border-radius: var(--radius);
  border: 1px solid var(--surface-dim);
  box-shadow: none;
}

pre code {
  font-size: inherit;
  background: none;
  padding: 0;
  border-radius: 0;
}

.hljs {
  background-color: transparent;
}

/* ---------- .ibra syntax highlighting ---------- */
/* Colors match the landing page's highlightIbra.tsx */
.ib-line {
  line-height: 1.65;
  min-height: 1.65em;
}

.ib-highlighted {
  display: block;
}

.ib-punct    { color: #a8a29e; } /* stone-400 */
.ib-keyword  { color: #7c3aed; } /* violet-600 */
.ib-section  { color: #186260; } /* teal-600 */
.ib-speaker  { color: #1d7773; } /* teal-500 */
.ib-variable { color: #e11d48; } /* rose-600 */
.ib-text     { color: var(--ink); }
.ib-comment  { color: #a8a29e; font-style: italic; } /* stone-400 */
.ib-operator { color: #a78bfa; } /* violet-400 */

/* ---------- Tables ---------- */
.table {
  border-collapse: separate;
  border-spacing: 0;
}

.table > thead > tr > th {
  background-color: var(--surface-muted);
  border-bottom: 2px solid var(--surface-dim);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 12px;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--surface-dim);
  padding: 10px 12px;
  font-size: 14px;
  vertical-align: top;
}

.table > tbody > tr:hover > td {
  background-color: var(--teal-50);
}

/* ---------- Alerts ---------- */
.alert {
  padding: 0;
  color: inherit;
  background-color: var(--surface);
  border: 1px solid var(--surface-dim);
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
  margin-bottom: 16px;
}

.alert > p {
  margin-bottom: 0;
  padding: 8px 16px;
  font-size: 14px;
}

.alert > ul {
  margin-bottom: 0;
  padding: 8px 40px;
  font-size: 14px;
}

.alert > h5 {
  padding: 10px 16px;
  margin-top: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  border-radius: 0;
}

.alert-info > h5 {
  color: #1976d2;
  border-bottom: 2px solid #1976d2;
  background-color: #e8f4fd;
}

.alert-warning > h5 {
  color: #e65100;
  border-bottom: 2px solid #e65100;
  background-color: #fff3e0;
}

.alert-danger > h5 {
  color: #c62828;
  border-bottom: 2px solid #c62828;
  background-color: #ffebee;
}

/* ---------- Pagination ---------- */
.pagination > li > a {
  color: var(--teal-500);
  border-color: var(--surface-dim);
}

.pagination > li > a:hover {
  color: var(--teal-600);
  background-color: var(--teal-50);
  border-color: var(--teal-200);
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
}

/* ---------- Side affix (In This Article) ---------- */
.sideaffix {
  font-size: 12px;
}

.affix h5 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  font-size: 11px;
  padding-left: 10px;
}

.affix ul > li > a {
  color: var(--ink-muted);
  font-size: 12px;
  transition: color var(--transition);
}

.affix ul > li > a:hover {
  color: var(--teal-500);
  background: none;
}

.affix ul > li.active > a,
.affix ul > li.active > a:before {
  color: var(--teal-500);
  font-weight: 500;
}

.affix > ul > li > a:before {
  color: var(--surface-dim);
}

.affix > ul > li.active > a:before {
  color: var(--teal-500);
}

/* Contribution link */
.sideaffix > div.contribution > ul > li > a.contribution-link {
  padding: 6px 12px;
  font-weight: 500;
  font-size: 13px;
  color: var(--teal-500);
  border: 1px solid var(--surface-dim);
  border-radius: 6px;
  display: inline-block;
  transition: all var(--transition);
}

.sideaffix > div.contribution > ul > li > a.contribution-link:hover {
  background-color: var(--teal-50);
  border-color: var(--teal-200);
  color: var(--teal-600);
}

/* ---------- Footer ---------- */
.grad-bottom,
.grad-top {
  display: none;
}

/* Hide the default docfx footer (replaced by custom partial) */
.footer {
  display: none;
}

footer {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.docs-footer {
  border-top: 1px solid var(--surface-dim);
  background-color: var(--surface);
  padding: 48px 0 0;
}

.docs-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 640px) {
  .docs-footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.docs-footer-brand {
  max-width: 280px;
}

.docs-footer-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.docs-footer-desc {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0;
}

.docs-footer-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-footer-group ul li {
  margin-bottom: 8px;
}

.docs-footer-group ul li a {
  font-size: 14px;
  color: var(--ink-muted);
  transition: color var(--transition);
}

.docs-footer-group ul li a:hover {
  color: var(--teal-500);
}

.docs-footer-heading {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.docs-footer-legal {
  margin-top: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--surface-dim);
}

.docs-footer-legal p {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0;
}

/* ---------- Search results ---------- */
#search-results > .search-list {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}

.sr-item > .item-href {
  color: var(--teal-500);
  font-size: 14px;
}

.sr-item > .item-brief {
  color: var(--ink-muted);
  font-size: 13px;
}

/* ---------- API reference specifics ---------- */
.inheritance h5,
.inheritedMembers h5 {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--surface-dim);
  color: var(--ink-muted);
}

span.parametername,
span.paramref,
span.typeparamref {
  font-style: italic;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9em;
}

span.languagekeyword {
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9em;
}

/* Major API sections */
#fields, #properties, #methods, #events {
  font-weight: 600;
  margin-top: 2em;
  color: var(--ink);
}

.decalaration,
.fieldValue,
.parameters,
.returns {
  color: var(--ink-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Tabbed content ---------- */
.tabGroup ul[role="tablist"] {
  border-bottom: 1px solid var(--surface-dim);
}

.tabGroup a[role="tab"] {
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 14px;
  transition: color var(--transition), border-color var(--transition);
}

.tabGroup a[role="tab"]:hover,
.tabGroup a[role="tab"]:focus {
  color: var(--teal-500);
  border-bottom-color: var(--teal-200);
}

.tabGroup a[role="tab"][aria-selected="true"] {
  color: var(--teal-600);
  border-bottom-color: var(--teal-500);
}

.tabGroup section[role="tabpanel"] {
  border: 1px solid var(--surface-dim);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 16px;
}

/* ---------- Image utilities ---------- */
.article .small-image {
  margin-top: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-dim);
  max-width: 350px;
}

.article .medium-image {
  margin-top: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-dim);
  max-width: 550px;
}

.article .large-image {
  margin-top: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-dim);
  max-width: 700px;
}

article img {
  border-radius: var(--radius);
}

/* ---------- Misc overrides ---------- */

/* Remove Bootstrap's default gray sidebar backgrounds */
.sidenav {
  background-color: var(--surface);
}

/* Clean up the article wrapper */
.container.body-content {
  font-family: 'Inter', 'Roboto', system-ui, sans-serif;
}

/* Blockquotes */
article blockquote {
  border-left: 3px solid var(--teal-200);
  padding: 8px 16px;
  margin: 16px 0;
  color: var(--ink-muted);
  background-color: var(--teal-50);
  border-radius: 0 var(--radius) var(--radius) 0;
}

article blockquote p {
  color: var(--ink-muted);
  margin-bottom: 0;
}

/* Horizontal rules */
hr {
  border-color: var(--surface-dim);
}

/* Lists */
article ul,
article ol {
  padding-left: 1.5em;
}

article li {
  margin-bottom: 4px;
}