/* Q-CTRL Zensical Theme Extension */

/* Import Q-CTRL color palette */
@import url('colors.css');

/* ====================================================================
   Fonts
   ==================================================================== */

/* Import Satoshi for headings from Fontshare */
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@1,2&display=swap");

/* Apply Satoshi to all headings (with higher specificity) */
body .md-typeset h1,
body .md-typeset h2,
body .md-typeset h3,
body .md-typeset h4,
body .md-typeset h5,
body .md-typeset h6 {
  font-family: "Satoshi", "Roboto", -apple-system, "system-ui", sans-serif !important;
  font-weight: 400;
}

/* ====================================================================
   Colors: Q-CTRL Primary Semantic Palette
   ==================================================================== */

/* Set custom primary and accent colors using Zensical's data attributes */
/* Attributes are on the body element, not html */
/* Light scheme (default) */
body[data-md-color-scheme="default"][data-md-color-primary="custom"] {
  --md-primary-fg-color:        var(--qctrl-primary);
  --md-primary-fg-color--light: var(--qctrl-primary-light);
  --md-primary-fg-color--dark:  var(--qctrl-primary-dark);
  --md-accent-fg-color:         var(--qctrl-link-color);
  --md-default-fg-color:        var(--qctrl-gray-700);
  --md-default-fg-color--light: rgba(33, 37, 41, 0.7);
  --md-default-fg-color--lighter: rgba(33, 37, 41, 0.45);
  --md-default-fg-color--lightest: rgba(33, 37, 41, 0.12);
  --md-default-bg-color:        rgba(255, 255, 255, 1);
  --md-code-bg-color:           rgba(248, 249, 250, 1);
  --md-code-fg-color:           var(--qctrl-gray-700);
  --md-code-hl-color:           rgba(255, 255, 0, 0.25);
}

/* Dark scheme (slate) */
body[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color:        var(--qctrl-primary);
  --md-primary-fg-color--light: var(--qctrl-primary-light);
  --md-primary-fg-color--dark:  var(--qctrl-primary-dark);
  --md-accent-fg-color:         var(--qctrl-link-color);
  --md-default-fg-color:        var(--qctrl-gray-200);
  --md-default-fg-color--light: rgba(222, 226, 230, 0.7);
  --md-default-fg-color--lighter: rgba(222, 226, 230, 0.45);
  --md-default-fg-color--lightest: rgba(222, 226, 230, 0.12);
  --md-default-bg-color:        rgba(33, 37, 41, 1);
  --md-code-bg-color:           rgba(52, 58, 64, 1);
  --md-code-fg-color:           var(--qctrl-gray-200);
  --md-code-hl-color:           rgba(255, 255, 0, 0.25);
}

/* ====================================================================
   Typography
   ==================================================================== */

.md-typeset {
  --md-typeset-font-size: 1rem;
  line-height: 1.75;
}

/* Heading sizes and weights matching Q-CTRL MkDocs theme */
.md-typeset h1 {
  color: var(--md-default-fg-color) !important;
  font-size: 1.6rem !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  border-bottom: 1px solid var(--md-default-fg-color--lighter);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem !important;
}

.md-typeset h2 {
  color: var(--md-default-fg-color) !important;
  font-size: 1.25rem !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  margin-bottom: 1.5rem !important;
}

.md-typeset h3 {
  color: var(--md-default-fg-color) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
}

.md-typeset h4 {
  color: var(--md-default-fg-color) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  margin-bottom: 1rem !important;
}

.md-typeset h5 {
  color: var(--md-default-fg-color) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.75rem !important;
}

.md-typeset h6 {
  color: var(--md-default-fg-color) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.75rem !important;
}

/* Heading anchor links: visible on hover */
.md-typeset h2 a,
.md-typeset h3 a,
.md-typeset h4 a,
.md-typeset h5 a,
.md-typeset h6 a {
  display: none;
  margin-left: 0.5rem;
  font-style: italic;
}

.md-typeset h2:hover a,
.md-typeset h3:hover a,
.md-typeset h4:hover a,
.md-typeset h5:hover a,
.md-typeset h6:hover a {
  display: inline;
}

/* Link color */
.md-typeset a {
  color: var(--md-accent-fg-color) !important;
}

/* Social links: always white in dark scheme */
body[data-md-color-scheme="slate"] .md-social__link,
body[data-md-color-scheme="slate"] .md-social__link svg {
  color: var(--qctrl-white) !important;
  fill: var(--qctrl-white) !important;
}

/* Social links: white in light scheme + classic variant */
html[data-md-theme-variant="classic"] body[data-md-color-scheme="default"] .md-social__link,
html[data-md-theme-variant="classic"] body[data-md-color-scheme="default"] .md-social__link svg {
  color: var(--qctrl-white) !important;
  fill: var(--qctrl-white) !important;
}

/* Social links: dark gray in light scheme + modern variant */
html[data-md-theme-variant="modern"] body[data-md-color-scheme="default"] .md-social__link,
html[data-md-theme-variant="modern"] body[data-md-color-scheme="default"] .md-social__link svg {
  color: var(--qctrl-gray-900) !important;
  fill: var(--qctrl-gray-900) !important;
}

/* Social links: accent color on hover */
body[data-md-color-scheme="slate"] .md-social__link:hover,
body[data-md-color-scheme="slate"] .md-social__link:hover svg,
html[data-md-theme-variant="classic"] body[data-md-color-scheme="default"] .md-social__link:hover,
html[data-md-theme-variant="classic"] body[data-md-color-scheme="default"] .md-social__link:hover svg,
html[data-md-theme-variant="modern"] body[data-md-color-scheme="default"] .md-social__link:hover,
html[data-md-theme-variant="modern"] body[data-md-color-scheme="default"] .md-social__link:hover svg {
  color: var(--md-accent-fg-color) !important;
  fill: var(--md-accent-fg-color) !important;
}

/* ====================================================================
   Syntax Highlighting (Code Blocks & Inline Code)
   ==================================================================== */

/* Code: inline styling */
.md-typeset code {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

/* Code blocks: font-size and line-height tuning */
.md-typeset pre {
  border-radius: 0.375rem;
  margin-bottom: 1.5rem;
}

/* Define Pygments syntax highlighting variables using Q-CTRL palette */
body[data-md-color-scheme="default"],
body[data-md-color-scheme="slate"] {
  --md-code-hl-number-color:           var(--qctrl-danger);
  --md-code-hl-special-color:          var(--qctrl-magenta-400);
  --md-code-hl-function-color:         var(--qctrl-violet-400);
  --md-code-hl-constant-color:         var(--qctrl-link-color);
  --md-code-hl-keyword-color:          var(--qctrl-blue-400);
  --md-code-hl-string-color:           var(--qctrl-green-400);
  --md-code-hl-name-color:             var(--md-code-fg-color);
  --md-code-hl-operator-color:         var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color:      var(--md-default-fg-color--light);
  --md-code-hl-comment-color:          var(--md-default-fg-color--light);
  --md-code-hl-generic-color:          var(--md-default-fg-color--light);
  --md-code-hl-variable-color:         var(--md-code-fg-color);
}

/* ====================================================================
   Prose Elements
   ==================================================================== */

/* Blockquotes: border-left style */
.md-typeset blockquote {
  border-left: 4px solid var(--md-default-fg-color--lighter);
  padding-left: 1rem;
  margin-left: 0;
  font-size: 0.875rem;
}

/* Tables */
.md-typeset table {
  margin-bottom: 1.5rem;
}

/* ====================================================================
   Navigation
   ==================================================================== */

/* Navigation link active color */
.md-nav__link--active {
  color: var(--md-accent-fg-color) !important;
}

/* Content action buttons (Edit / View source) */
html[data-md-theme-variant="classic"] .md-content__button.md-icon {
  width: 0.7rem !important;
  height: 0.7rem !important;
}

html[data-md-theme-variant="modern"] .md-content__button {
    background-color: rgba(0, 0, 0, 0) !important;
}

/* ====================================================================
   Breadcrumbs
   ==================================================================== */

.md-breadcrumbs__item {
  font-size: 0.875rem;
  color: var(--qctrl-gray-500);
}

.md-breadcrumbs__separator {
  color: var(--qctrl-gray-500);
}

/* ====================================================================
   Admonitions / Alerts with Q-CTRL Colors
   ==================================================================== */

/* Icon SVG definitions for custom admonition types */
:root {
  --md-admonition-icon--important: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
  --md-admonition-icon--info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3E%3C/svg%3E");
  --md-admonition-icon--error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
  --md-admonition-icon--to-do: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm10.03 4.97a.75.75 0 0 1 .011 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.75.75 0 0 1 1.08-.022z'/%3E%3C/svg%3E");
}

/* Admonition color mappings */
.md-typeset .admonition.note {
  border-color: var(--qctrl-base-orange);
  background-color: var(--qctrl-base-orange-translucent);
}

[data-md-theme-variant="classic"] .md-typeset .admonition.note > .admonition-title {
  background-color: var(--qctrl-base-orange-translucent);
}

.md-typeset .admonition.note > .admonition-title::before {
  background-color: var(--qctrl-base-orange);
}

.md-typeset .admonition.abstract {
  border-color: var(--qctrl-info);
  background-color: var(--qctrl-info-translucent);
}

[data-md-theme-variant="classic"] .md-typeset .admonition.abstract > .admonition-title {
  background-color: var(--qctrl-info-translucent);
}

.md-typeset .admonition.abstract > .admonition-title::before {
  background-color: var(--qctrl-info);
}

.md-typeset .admonition.example {
  border-color: var(--qctrl-primary);
  background-color: var(--qctrl-primary-translucent);
}

[data-md-theme-variant="classic"] .md-typeset .admonition.example > .admonition-title {
  background-color: var(--qctrl-primary-translucent);
}

.md-typeset .admonition.example > .admonition-title::before {
  background-color: var(--qctrl-primary);
}

.md-typeset .admonition.question,
.md-typeset .admonition.success {
  border-color: var(--qctrl-success);
  background-color: var(--qctrl-success-translucent);
}

[data-md-theme-variant="classic"] .md-typeset .admonition.question > .admonition-title,
[data-md-theme-variant="classic"] .md-typeset .admonition.success > .admonition-title {
  background-color: var(--qctrl-success-translucent);
}

.md-typeset .admonition.question > .admonition-title::before,
.md-typeset .admonition.success > .admonition-title::before {
  background-color: var(--qctrl-success);
}

.md-typeset .admonition.tip,
.md-typeset .admonition.info {
  border-color: var(--qctrl-teal-300);
  background-color: var(--qctrl-base-teal-translucent);
}

[data-md-theme-variant="classic"] .md-typeset .admonition.tip > .admonition-title,
[data-md-theme-variant="classic"] .md-typeset .admonition.info > .admonition-title {
  background-color: var(--qctrl-base-teal-translucent);
}

.md-typeset .admonition.tip > .admonition-title::before,
.md-typeset .admonition.info > .admonition-title::before {
  background-color: var(--qctrl-teal-300);
  -webkit-mask-image: var(--md-admonition-icon--info);
  mask-image: var(--md-admonition-icon--info);
}

.md-typeset .admonition.important,
.md-typeset .admonition.to-do,
.md-typeset .admonition.warning {
  border-color: var(--qctrl-warning);
  background-color: var(--qctrl-warning-translucent);
}

[data-md-theme-variant="classic"] .md-typeset .admonition.important > .admonition-title,
[data-md-theme-variant="classic"] .md-typeset .admonition.to-do > .admonition-title,
[data-md-theme-variant="classic"] .md-typeset .admonition.warning > .admonition-title {
  background-color: var(--qctrl-warning-translucent);
}

.md-typeset .admonition.important > .admonition-title::before,
.md-typeset .admonition.to-do > .admonition-title::before,
.md-typeset .admonition.warning > .admonition-title::before {
  background-color: var(--qctrl-warning);
}

.md-typeset .admonition.important > .admonition-title::before {
  -webkit-mask-image: var(--md-admonition-icon--important);
  mask-image: var(--md-admonition-icon--important);
}

.md-typeset .admonition.to-do > .admonition-title::before {
  -webkit-mask-image: var(--md-admonition-icon--to-do);
  mask-image: var(--md-admonition-icon--to-do);
}

.md-typeset .admonition.danger,
.md-typeset .admonition.error,
.md-typeset .admonition.failure,
.md-typeset .admonition.bug {
  border-color: var(--qctrl-danger);
  background-color: var(--qctrl-danger-translucent);
}

[data-md-theme-variant="classic"] .md-typeset .admonition.danger > .admonition-title,
[data-md-theme-variant="classic"] .md-typeset .admonition.error > .admonition-title,
[data-md-theme-variant="classic"] .md-typeset .admonition.failure > .admonition-title,
[data-md-theme-variant="classic"] .md-typeset .admonition.bug > .admonition-title {
  background-color: var(--qctrl-danger-translucent);
}

.md-typeset .admonition.danger > .admonition-title::before,
.md-typeset .admonition.error > .admonition-title::before,
.md-typeset .admonition.failure > .admonition-title::before,
.md-typeset .admonition.bug > .admonition-title::before {
  background-color: var(--qctrl-danger);
}

.md-typeset .admonition.error > .admonition-title::before {
  -webkit-mask-image: var(--md-admonition-icon--error);
  mask-image: var(--md-admonition-icon--error);
}

/* ====================================================================
   MkDocstrings
   ==================================================================== */

/* API documentation styling */
.md-typeset .doc-label code {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--md-default-fg-color--lighter);
  font-size: 0.75rem;
  font-weight: bold;
}

/* ====================================================================
   Logo Toggle (Light/Dark Mode & Theme Variant)
   ==================================================================== */

/* Hide all logos by default */
.qctrl-logo-light,
.qctrl-logo-dark {
  display: none !important;
}

/* Light scheme, classic variant (default): show white logo */
body[data-md-color-scheme="default"] .qctrl-logo-classic {
  display: inline !important;
}

/* Light scheme, modern variant: show dark logo */
html[data-md-theme-variant="modern"] body[data-md-color-scheme="default"] .qctrl-logo-classic {
  display: none !important;
}

html[data-md-theme-variant="modern"] body[data-md-color-scheme="default"] .qctrl-logo-modern {
  display: inline !important;
}

/* Dark scheme: show white logo for all variants */
body[data-md-color-scheme="slate"] .qctrl-logo-dark {
  display: inline !important;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  transform: scale(1.33);
  transform-origin: center;
}

/* Header title text */
.md-header__title {
    font-size: 1.0rem;
    line-height: 2.4rem;
}

.md-header__topic:first-child {
    font-weight: 400;
}

/* ====================================================================
   Print Styles
   ==================================================================== */

@media print {
  .md-header,
  .md-sidebar,
  .md-nav,
  .md-admonition.note,
  .md-admonition.info {
    display: none !important;
  }
}