/* ==========================================================================
   ECMind TaxViewer Styleguide v2.0 — Antora Theme Override
   Loaded after the Antora bundle's site.css — enhances colors, fonts,
   spacing and borders without touching structural layout (flex/grid/float).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* --------------------------------------------------------------------------
   Design Tokens (8px spacing grid)
   -------------------------------------------------------------------------- */
:root {
  --color-brand-darkest: #003834;
  --color-brand-dark:    #005852;
  --color-brand:         #00766E;
  --color-brand-mid:     #99CAC6;
  --color-brand-light:   #E6F2F1;
  --color-background:    #EEF2F5;
  --color-gray-700:      #353535;
  --color-gray-500:      #585858;
  --color-gray-300:      #B4B3B3;
  --color-gray-100:      #E5E5E5;
  --color-yellow:        #FFC214;
  --color-yellow-light:  #FFFAE6;
  --color-blue:          #1AA7D7;
  --color-blue-light:    #E7F7FC;
  --font-heading:        'JetBrains Mono', monospace;
  --font-body:           'Open Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   Content width
   -------------------------------------------------------------------------- */
.doc {
  max-width: clamp(46rem, 75vw, 90rem) !important;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
  font-family: var(--font-heading);
}

.doc h1 { font-size: 38px; line-height: 46px; }
.doc h2 { font-size: 30px; line-height: 38px; }
.doc h3 { font-size: 24px; line-height: 32px; }
.doc h4 { font-size: 20px; line-height: 28px; }
.doc h5 { font-size: 16px; line-height: 24px; }
.doc h6 { font-size: 14px; line-height: 18px; }

.doc p,
.doc li,
.doc td.tableblock {
  font-size: 14px;
  line-height: 22px;
}

.doc pre,
.doc pre > code,
.doc code,
.doc kbd {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.navbar {
  background-color: var(--color-brand-darkest);
}

.navbar-brand .navbar-item,
.navbar-brand .navbar-item:hover,
.navbar-brand .navbar-item:focus {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Navigation sidebar
   -------------------------------------------------------------------------- */
.nav-panel-menu .nav-item.is-current-page > .nav-link,
.nav-panel-menu .nav-item.is-current-page > .nav-text {
  color: var(--color-brand);
  border-left: 2px solid var(--color-brand);
  padding-left: 14px;
}

.nav-panel-menu .nav-link:hover {
  color: var(--color-brand-dark);
}

.nav-panel-menu .context .version {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
.doc a:not(.bare):not(.button) {
  color: var(--color-brand);
}

.doc a:not(.bare):not(.button):hover {
  color: var(--color-brand-dark);
}

/* --------------------------------------------------------------------------
   Inline code
   -------------------------------------------------------------------------- */
.doc code {
  color: var(--color-brand-dark);
  background-color: var(--color-brand-light);
  border-radius: 2px;
  padding: 1px 5px;
}

.doc pre code {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.doc table.tableblock {
  border-radius: 2px;
}

.doc table.tableblock thead th {
  background-color: var(--color-brand-light);
  color: var(--color-brand-darkest);
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 16px;
}

.doc table.tableblock td {
  padding: 8px 16px;
}

.doc table.tableblock tr:hover td {
  background-color: var(--color-brand-light);
}

/* --------------------------------------------------------------------------
   Admonition blocks
   -------------------------------------------------------------------------- */
.doc .admonitionblock {
  border-radius: 2px;
  margin: 24px 0;
}

.doc .admonitionblock.note > table {
  border-left: 4px solid var(--color-blue);
  background-color: var(--color-blue-light);
}

.doc .admonitionblock.tip > table {
  border-left: 4px solid var(--color-brand);
  background-color: var(--color-brand-light);
}

.doc .admonitionblock.caution > table,
.doc .admonitionblock.warning > table {
  border-left: 4px solid var(--color-yellow);
  background-color: var(--color-yellow-light);
}

/* --------------------------------------------------------------------------
   Tabs (on top of vendor/tabs.css)
   -------------------------------------------------------------------------- */
.tablist > ul li {
  font-family: var(--font-body);
  font-size: 13px;
  border-radius: 2px 2px 0 0;
}

.tabs:not(.is-loading) .tablist li.is-selected {
  color: var(--color-brand);
  border-top: 2px solid var(--color-brand);
}

/* --------------------------------------------------------------------------
   Syntax Highlighting (highlight.js) — CI colors
   -------------------------------------------------------------------------- */
.hljs-keyword,
.hljs-selector-tag,
.hljs-title.function_,
.hljs-title.class_ {
  color: #005852; /* brand dark green */
  font-weight: 600;
}

.hljs-string,
.hljs-attr,
.hljs-template-variable,
.hljs-variable {
  color: #B98F0A; /* secondary yellow dark */
}

.hljs-number,
.hljs-literal {
  color: #0F7B9F; /* secondary blue dark */
}

.hljs-comment,
.hljs-quote {
  color: #B4B3B3; /* gray-300 */
  font-style: italic;
}

.hljs-built_in,
.hljs-type {
  color: #00766E; /* brand green */
}

.hljs-name,
.hljs-tag {
  color: #003834; /* brand darkest */
}

.hljs-meta,
.hljs-meta .hljs-keyword {
  color: #735A04; /* secondary yellow darkest */
}

/* --------------------------------------------------------------------------
   Search field
   -------------------------------------------------------------------------- */

/* Wrapper */
.navbar-brand .navbar-item.search {
  flex: 1 1 auto !important;
  min-width: 0;
  margin: 0 16px;
}

#search-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Magnifying glass icon via background-image */
#search-field::before {
  content: '';
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Ccircle cx='112' cy='112' r='80' fill='none' stroke='%2399CAC6' stroke-width='20'/%3E%3Cline x1='168.57' y1='168.57' x2='224' y2='224' stroke='%2399CAC6' stroke-width='20' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.8;
}

/* Input */
#search-input {
  width: 100%;
  height: 34px;
  padding: 0 14px 0 36px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(153, 202, 198, 0.35);
  border-radius: 17px;
  outline: none;
  transition: background-color 0.2s, border-color 0.2s;
}

#search-input::placeholder {
  color: #99CAC6;
  opacity: 1;
}

#search-input:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(153, 202, 198, 0.6);
}

#search-input:focus {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: #99CAC6;
  box-shadow: 0 0 0 3px rgba(0, 118, 110, 0.25);
}

#search-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Results dropdown */
.search-result-dropdown-menu {
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 56, 52, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1);
}

.search-result-dataset {
  border: 1px solid #E6F2F1;
  border-radius: 4px;
  padding: 8px;
}

.search-result-component-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #005852;
  border-bottom-color: #E6F2F1;
}

.search-result-document-title {
  color: #003834;
  border-right-color: #E6F2F1;
  font-family: 'Open Sans', sans-serif;
}

.search-result-document-hit > a:hover {
  background-color: #E6F2F1;
}

.search-result-document-hit .search-result-highlight {
  color: #005852;
  background: rgba(0, 118, 110, 0.1);
  font-weight: 600;
}

.search-result-document-hit .search-result-section-title {
  color: #003834;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs a {
  color: var(--color-gray-500);
}

.breadcrumbs a:hover {
  color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  padding: 8px 24px;
  font-size: 12px;
  line-height: 20px;
}

.footer p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   TOC (right sidebar)
   -------------------------------------------------------------------------- */
.toc-menu a {
  font-size: 13px;
}

.toc-menu a:hover,
.toc-menu a.is-active {
  color: var(--color-brand);
}