/*
 * PowerStacks-branded theme for MkDocs Material
 * Based on Microsoft Learn design, aligned with powerstacks.com branding
 *
 * ── Brand Color Palette ──
 *
 * Primary:
 *   Brand Navy:       #051441  (dark backgrounds)
 *   Brand Navy Light: #0A1F5E  (hover states, dark mode header)
 *   Brand Gradient:   #3221AA → #5670F0  (top bar, header, tabs, hero banners)
 *   Gradient Mid:     #4A5CF5  (links, accents, primary fg)
 *
 * Accents:
 *   Brand Blue:       #6EC1E4  (light accent, active doc indicator)
 *   Brand Green:      #61CE70  (CTAs on main website)
 *
 * Dark Mode:
 *   Primary:          #7B8AF7  (lightened gradient midpoint)
 *   Light Accent:     #8ED3EA  (lightened brand blue)
 *   Dark Accent:      #5670F0  (gradient end)
 *   Header:           #0A1F5E  (navy light)
 *   Tabs:             #030C2A  (deeper navy)
 *
 * Typography (matches website):
 *   Headings:         #051441  (brand navy, light mode only)
 *   Body Text:        #4B5563  (Tailwind gray-600)
 *   Body Text Light:  #6B7280  (Tailwind gray-500)
 *
 * Semantic (unchanged):
 *   Note:    #4A5CF5 (purple, matches brand)
 *   Tip:     #107c10 (green)
 *   Warning: #ff8c00 (orange)
 *   Danger:  #d13438 (red)
 */

/* ── Color palette ── */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #4A5CF5;
  --md-primary-fg-color--light: #6EC1E4;
  --md-primary-fg-color--dark: #3221AA;
  --md-accent-fg-color: #4A5CF5;
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #4B5563;
  --md-default-fg-color--light: #6B7280;
  --md-typeset-color: #4B5563;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #7B8AF7;
  --md-primary-fg-color--light: #8ED3EA;
  --md-primary-fg-color--dark: #5670F0;
  --md-accent-fg-color: #7B8AF7;
  --md-default-bg-color: #1b1b1b;
  --md-default-fg-color: #e8e8e8;
  --md-default-fg-color--light: #b0b0b0;
  --md-typeset-color: #e8e8e8;
  --md-code-bg-color: #2d2d2d;
}

/* ── Reset rem base to 16px (Material defaults to 137.5% which makes everything ~37% too big) ── */
html {
  font-size: 100%;
}

/* ── Typography — match Microsoft's Segoe UI stack ── */
:root {
  --md-text-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --md-code-font: "Cascadia Code", "Consolas", "Courier New", monospace;
}

.md-typeset {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--md-typeset-color);
}

/* ── Global nav bar — PowerStacks branded ── */
.md-banner {
  background: linear-gradient(90deg, #3322AB 0%, #454ACE 50%, #556DEB 100%) !important;
  overflow: hidden !important;
}

.md-banner__inner {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 100% !important;
  padding: 0 1.2rem !important;
  margin: 0 !important;
  height: 40px;
  font-size: 0.8rem;
  color: #ffffff;
}

.ps-global-nav {
  display: contents;
}

.ps-global-nav__inner {
  display: contents;
}

/* Brand / Logo */
.ps-global-nav__brand {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none !important;
  color: #ffffff !important;
  flex-shrink: 0;
  position: absolute;
  left: 1.2rem;
}

.ps-global-nav__brand:hover {
  opacity: 0.9;
}

.ps-global-nav__logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.ps-global-nav__brand-text {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

/* Middle: site links */
.ps-global-nav__site-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ps-global-nav__site-links a {
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: none !important;
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.ps-global-nav__site-links a:hover {
  color: #ffffff !important;
  background-color: #0A1F5E;
}

/* Right: doc switcher + GitHub */
.ps-global-nav__docs-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.ps-global-nav__docs-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.25rem;
}

.ps-global-nav__doc-link {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.ps-global-nav__doc-link:hover {
  color: #ffffff !important;
  background-color: #0A1F5E;
}

.ps-global-nav__doc-link--active {
  color: #ffffff !important;
  font-weight: 600;
  background-color: rgba(110, 193, 228, 0.15);
  border: 1px solid rgba(110, 193, 228, 0.3);
}

.ps-global-nav__github-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.ps-global-nav__github-btn:hover {
  color: #ffffff !important;
  background-color: #0A1F5E;
  border-color: rgba(255, 255, 255, 0.4);
}

/* Responsive: hide site links on tablet */
@media screen and (max-width: 76.25em) {
  .ps-global-nav__site-links {
    display: none;
  }
}

/* Responsive: compact doc switcher on small tablet */
@media screen and (max-width: 60em) {
  .ps-global-nav__docs-label {
    display: none;
  }
  .ps-global-nav__doc-link {
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
  }
}

/* Responsive: hide everything except brand on mobile */
@media screen and (max-width: 44.9375em) {
  .ps-global-nav__docs-links {
    display: none;
  }
}

/* ── Header — show only search, hide branding ── */
.md-header {
  background: linear-gradient(90deg, #3322AB 0%, #454ACE 50%, #556DEB 100%) !important;
  box-shadow: none !important;
}

.md-header__button.md-logo,
.md-header__title,
.md-header__source,
.md-header__option {
  display: none !important;
}

.md-header__inner {
  justify-content: flex-end !important;
}

/* ── Navigation tabs — PowerStacks secondary bar ── */
.md-tabs {
  background: linear-gradient(90deg, #3322AB 0%, #454ACE 50%, #556DEB 100%);
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: #030C2A;
  border-bottom: 1px solid #0A1F5E;
}

.md-tabs__link {
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.85;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* ── Left navigation — sidebar style ── */
.md-nav--primary .md-nav__title {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color--light);
}

.md-nav__item {
  padding: 0;
}

.md-nav__link {
  font-size: 0.825rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  margin: 1px 0;
}

.md-nav__link:hover {
  background-color: rgba(74, 92, 245, 0.06);
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  background-color: rgba(123, 138, 247, 0.1);
}

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  font-weight: 600;
  color: var(--md-primary-fg-color);
  border-left: 2px solid var(--md-primary-fg-color);
  padding-left: calc(0.6rem - 2px);
  background-color: rgba(74, 92, 245, 0.04);
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  background-color: rgba(123, 138, 247, 0.08);
}

/* Section labels (like "Getting Started", "Administration") */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > label {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-default-fg-color--light);
  margin-top: 0.75rem;
}

/* ── Search bar — cleaner style ── */
.md-search__input {
  border-radius: 4px;
  font-size: 0.85rem;
}

/* ── Content area — full width, flush with tabs ── */
.md-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

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

.md-content__inner {
  padding-top: 0 !important;
}

.md-content__inner::before {
  display: none !important;
}

.md-content {
  max-width: none;
}

.md-typeset h1 {
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #051441;
  border-bottom: none;
}

.md-typeset h2 {
  font-weight: 600;
  font-size: 1.5rem;
  margin-top: 2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #e1e1e1;
  color: #051441;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: var(--md-typeset-color);
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  border-bottom-color: #444;
}

.md-typeset h3 {
  font-weight: 600;
  font-size: 1.15rem;
  margin-top: 1.5rem;
  color: #051441;
}

.md-typeset h4 {
  font-weight: 600;
  font-size: 1rem;
  color: #051441;
}

/* ── Tables — clean style ── */
.md-typeset table:not([class]) {
  font-size: 0.825rem;
  border: 1px solid #e1e1e1;
  border-collapse: collapse;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border-color: #444;
}

.md-typeset table:not([class]) th {
  background-color: #f3f3f3;
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 2px solid #d1d1d1;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #2d2d2d;
  border-bottom-color: #555;
}

.md-typeset table:not([class]) td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid #e8e8e8;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-bottom-color: #3a3a3a;
}

/* ── Code blocks ── */
.md-typeset code {
  font-size: 0.825em;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  background-color: #f5f5f5;
  color: #171717;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: #2d2d2d;
  color: #e8e8e8;
}

.md-typeset pre > code {
  padding: 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ── Admonitions — notes/tips/warnings ── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 4px;
  border-left: 4px solid;
  border-top: none;
  border-right: none;
  border-bottom: none;
  box-shadow: none;
  font-size: 0.85rem;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: #4A5CF5;
  background-color: #f0f2ff;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset details.note {
  background-color: rgba(74, 92, 245, 0.1);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-left-color: #107c10;
  background-color: #f0fff0;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
[data-md-color-scheme="slate"] .md-typeset details.tip {
  background-color: rgba(16, 124, 16, 0.1);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: #ff8c00;
  background-color: #fff8f0;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset details.warning {
  background-color: rgba(255, 140, 0, 0.1);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-left-color: #d13438;
  background-color: #fff0f0;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.danger,
[data-md-color-scheme="slate"] .md-typeset details.danger {
  background-color: rgba(209, 52, 56, 0.1);
}

/* ── Right-side TOC — thinner ── */
.md-sidebar--secondary {
  width: 13rem;
}

.md-nav--secondary .md-nav__link {
  font-size: 0.775rem;
}

.md-nav--secondary .md-nav__title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Branded Footer ── */
.ps-footer {
  background-color: #EFF2F9;
  border-top: 1px solid #dde3ed;
  padding: 3rem 1.5rem 0;
  font-size: 0.85rem;
  color: #4B5563;
}

[data-md-color-scheme="slate"] .ps-footer {
  background-color: #1b1b1b;
  border-top-color: #333;
  color: #b0b0b0;
}

.ps-footer__inner {
  max-width: 61rem;
  margin: 0 auto;
}

.ps-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media screen and (max-width: 44.9375em) {
  .ps-footer__columns {
    grid-template-columns: 1fr 1fr;
  }
}

.ps-footer__heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #051441;
  margin: 0 0 0.75rem 0;
}

[data-md-color-scheme="slate"] .ps-footer__heading {
  color: #e8e8e8;
}

.ps-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps-footer__list li {
  margin: 0.35rem 0;
}

.ps-footer__list a {
  color: #6B7280;
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.15s;
}

.ps-footer__list a:hover {
  color: #4A5CF5;
}

[data-md-color-scheme="slate"] .ps-footer__list a {
  color: #999;
}

[data-md-color-scheme="slate"] .ps-footer__list a:hover {
  color: #7B8AF7;
}

.ps-footer__contact {
  margin-top: 1rem;
}

.ps-footer__contact p {
  margin: 0.25rem 0;
  font-size: 0.8rem;
}

.ps-footer__contact a {
  color: #6B7280;
  text-decoration: none;
  transition: color 0.15s;
}

.ps-footer__contact a:hover {
  color: #4A5CF5;
}

.ps-footer__contact-label {
  font-weight: 600;
  color: #051441;
}

[data-md-color-scheme="slate"] .ps-footer__contact-label {
  color: #ccc;
}

[data-md-color-scheme="slate"] .ps-footer__contact a {
  color: #999;
}

.ps-footer__bottom {
  border-top: 1px solid #dde3ed;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

[data-md-color-scheme="slate"] .ps-footer__bottom {
  border-top-color: #333;
}

.ps-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ps-footer__brand img {
  border-radius: 4px;
}

.ps-footer__brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #051441;
}

[data-md-color-scheme="slate"] .ps-footer__brand-name {
  color: #e8e8e8;
}

.ps-footer__copyright {
  font-size: 0.8rem;
  color: #6B7280;
  margin: 0;
}

/* ── MkDocs Footer (prev/next nav) ── */
.md-footer {
  background-color: #EFF2F9;
  color: #424242;
}

[data-md-color-scheme="slate"] .md-footer {
  background-color: #1b1b1b;
  color: #b0b0b0;
}

/* ── Scrollbar styling (Chromium) ── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: #555;
}

/* ── Hero banner — PowerStacks gradient, full-width flush with tabs ── */

.hero-banner {
  background: linear-gradient(90deg, #3322AB 0%, #454ACE 50%, #556DEB 100%);
  padding: 2rem 1rem 1.75rem 1rem;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: -1.5rem;
  margin-bottom: 3rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  text-align: center;
}

@media (min-width: 768px) {
  .hero-banner {
    padding: 2.5rem 1.5rem 2rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .hero-banner {
    padding: 3rem 2rem 2.5rem 2rem;
  }
}

/* No vignette — we want the gradient to match the nav bars above exactly */
.hero-banner > * {
  position: relative;
  z-index: 1;
}

[data-md-color-scheme="slate"] .hero-banner {
  background: linear-gradient(90deg, #241880 0%, #4058C8 100%);
}

/* Centered text with a comfortable max-width — avoids awkward line breaks
   on long titles like "BI for SCCM Documentation" */
.hero-banner h1,
.hero-banner p {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  box-sizing: border-box;
}

.hero-banner h1 {
  color: #ffffff !important;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  border-bottom: none !important;
}

/* Accent word in hero title — matches marketing site's text-brand-blue */
.hero-banner h1 .hero-accent {
  color: #6EC1E4;
}

@media (min-width: 768px) {
  .hero-banner h1 {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .hero-banner h1 {
    font-size: 2.75rem;
  }
}

@media (max-width: 600px) {
  .hero-banner h1 {
    font-size: 1.5rem;
  }
}

.hero-banner p {
  color: #d1d5db !important;  /* text-gray-300 */
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .hero-banner p {
    font-size: 1rem;
    margin-top: 0.75rem;
  }
}

@media (max-width: 600px) {
  .hero-banner p {
    font-size: 0.875rem;
    margin-top: 0.5rem;
  }
}

/* ── Quick link cards — feature cards ── */
.quick-links {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0 0 2rem 0;
}

@media screen and (max-width: 76.25em) {
  .quick-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 44.9375em) {
  .quick-links {
    grid-template-columns: 1fr;
  }
}

.quick-link-card {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #f5f5f5;
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--md-typeset-color) !important;
  transition: box-shadow 0.15s, transform 0.15s;
  border: 1px solid #e8e8e8;
}

[data-md-color-scheme="slate"] .quick-link-card {
  background: #2d2d2d;
  border-color: #404040;
}

.quick-link-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
  text-decoration: none !important;
}

[data-md-color-scheme="slate"] .quick-link-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.quick-link-card .card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-link-card .card-icon svg,
.quick-link-card .card-icon img {
  width: 40px;
  height: 40px;
}

.quick-link-card .card-content {
  display: flex;
  flex-direction: column;
}

.quick-link-card .card-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color--light);
}

.quick-link-card .card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--md-primary-fg-color);
}

/* ── Tabs — pivot style ── */
.md-typeset .tabbed-labels > label {
  font-size: 0.825rem;
  font-weight: 600;
}

.md-typeset .tabbed-labels > label--active {
  border-bottom-color: var(--md-primary-fg-color);
}

/* ── Task lists ── */
.md-typeset .task-list-indicator::before {
  background-color: var(--md-primary-fg-color);
}

/* ── Permalink anchors — chain-link icon ── */
.md-typeset .headerlink {
  font-size: 0 !important;
  opacity: 0;
  transition: opacity 0.2s;
  vertical-align: middle;
}

.md-typeset .headerlink::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  background-color: var(--md-default-fg-color--light);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink {
  opacity: 0.5;
}

/* ── Issue fixes (Apr 15 2026) — REVISED Apr 16 ───────────────────── */

/* Keep the PowerStacks global nav always visible at the top of the viewport.
   Using position: fixed (not sticky) because Material's layout creates
   containing block contexts that break position:sticky on .md-banner.
   Fixed positioning bypasses those contexts entirely.

   body gets padding-top to compensate for the fixed banner's height.
   Now managed by powerstacks-nav.css with --ps-nav-height (64px). */
/* body { padding-top: handled in powerstacks-nav.css; } */

.md-banner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  width: 100%;
}

/* md-header (search) and md-tabs (secondary nav) scroll with the page */
.md-header {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.md-tabs {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* Add top padding back to the main content area so regular (non-hero) pages
   don't sit right against the nav above them */
.md-content__inner {
  padding-top: 1.5rem !important;
}

.md-sidebar--primary,
.md-sidebar--secondary {
  padding-top: 1.5rem;
}


/* ── Article page hero (applies to every page's first h1) ─────────────
   Homepage uses <div class="hero-banner"> with its own styling. Article
   pages just have a plain markdown heading that becomes <h1>. This rule
   makes that first h1 render as a matching gradient hero too, so every
   docs page has the same branded look.
   We EXCLUDE h1s inside .hero-banner (they're already styled by that rule).
   ──────────────────────────────────────────────────────────────────── */

.md-typeset h1:first-of-type:not(.hero-banner h1) {
  /* Break out to full viewport width */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;

  /* Gradient hero styling — compact for article pages so it doesn't push
     the sidebar nav + right TOC off-screen on page load */
  background: linear-gradient(90deg, #3322AB 0%, #454ACE 50%, #556DEB 100%);
  color: #ffffff !important;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  padding: 2rem 1rem 1.75rem 1rem;
  margin-top: 0;
  margin-bottom: 3rem;
  border: none !important;
  border-radius: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .md-typeset h1:first-of-type:not(.hero-banner h1) {
    font-size: 2.25rem;
    padding: 2.5rem 1.5rem 2rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .md-typeset h1:first-of-type:not(.hero-banner h1) {
    font-size: 2.75rem;
    padding: 3rem 2rem 2.5rem 2rem;
  }
}

@media (max-width: 600px) {
  .md-typeset h1:first-of-type:not(.hero-banner h1) {
    font-size: 1.5rem;
    padding: 1.5rem 1rem 1.25rem 1rem;
  }
}


/* ── Sidebar positioning is handled in powerstacks-nav.css ──────────
   (top: 64px, height: calc(100vh - 64px), z-index: 5)
   Old 40px rules removed — superseded by the 64px nav height. */