/* ============================================================
   Planning Center Help Center — Paligo CSS Override
   Targets: Paligo HTML5 Help Center (Theme 0), multi-page output
   Version: 5.0

   Design direction: Spectacle HQ-inspired — clean, dark code blocks,
   animated underline links, three-column centered layout, generous
   whitespace, prefers-color-scheme dark mode.

   Companion file: paligo-override.js (handles landing page card
   grid, page TOC, tab interface, lightbox)
   ============================================================ */


/* === 0. DESIGN TOKENS ====================================== */
:root {
  /* Accent */
  --pc-accent:            #2266F7;
  --pc-accent-hover:      #1B56DB;
  --pc-accent-underline:  rgba(34, 102, 247, 0.25);
  --pc-accent-light:      #EBF0FE;
  --pc-accent-muted:      #C7D7FE;

  /* Surfaces */
  --pc-bg:           #FFFDFB;
  --pc-bg-card:      #FFFFFF;
  --pc-bg-card-glass: rgb(255 255 255 / 0.5);
  --pc-bg-subtle:    #F1F5F9;
  --pc-bg-muted:     #E2E8F0;
  --pc-bg-hover:     #f2f8ff;

  /* Text */
  --pc-heading:      #0F172A;
  --pc-text:         #334155;
  --pc-text-muted:   #64748B;

  /* Legacy aliases — keeps JS-injected elements working */
  --pc-navy:         var(--pc-heading);
  --pc-blue:         var(--pc-accent);
  --pc-blue-light:   var(--pc-accent-light);
  --pc-blue-hover:   var(--pc-accent-hover);
  --pc-blue-muted:   var(--pc-accent-muted);
  --pc-text-light:   var(--pc-text-muted);

  /* Borders */
  --pc-border:       #e5edf5;
  --pc-border-light: #F1F5F9;

  /* Product accent colors */
  --pc-services:      #4ea033;
  --pc-check-ins:     #B16BCF;
  --pc-giving:        #D6A00A;
  --pc-groups:        #FC5A03;
  --pc-people:        #349CEF;
  --pc-calendar:      #E05333;
  --pc-registrations: #429E8C;
  --pc-publishing:    #55555F;
  --pc-music-stand:   #2F7AC3;
  --pc-home:          #2d6dfb;

  /* Typography */
  --pc-font: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pc-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Spacing */
  --pc-space-xs:  4px;
  --pc-space-sm:  8px;
  --pc-space-md:  16px;
  --pc-space-lg:  24px;
  --pc-space-xl:  32px;
  --pc-space-2xl: 48px;
  --pc-space-3xl: 64px;

  /* Layout heights */
  --pc-header-height:     64px;
  --pc-subheader-height:  48px;
  --pc-sidebar-top: calc(var(--pc-header-height) + var(--pc-subheader-height) + 16px);

  /* Radii — Spectacle-inspired generous rounding */
  --pc-radius-sm:   6px;
  --pc-radius-md:   8px;
  --pc-radius-lg:   12px;
  --pc-radius-xl:   16px;
  --pc-radius-2xl:  24px;
  --pc-radius-pill: 9999px;

  /* Shadows */
  --pc-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.04);
  --pc-shadow-md:    0 2px 8px rgba(0, 0, 0, 0.06);
  --pc-shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.08);
  --pc-shadow-hover: 0 8px 24px rgba(34, 102, 247, 0.12);

  /* Card hover */
  --pc-bg-card-hover:      #f4faff;
  --pc-border-card-hover:  #e6edf5;
  --pc-shadow-card-hover:  var(--pc-shadow-sm);

  /* Section icon colors */
  --pc-icon-started-bg:    rgba(120, 163, 255, 0.2);
  --pc-icon-started-color: #3274FF;
  --pc-icon-account-bg:    rgba(168, 62, 255, 0.2);
  --pc-icon-account-color: #A83EFF;
}

/* --- Dark tokens via prefers-color-scheme ------------------- */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --pc-accent:            #4580FF;
    --pc-accent-hover:      #3B73F0;
    --pc-accent-underline:  rgba(8, 76, 219, 0.35);
    --pc-accent-light:      #1A1D27;
    --pc-accent-muted:      #1E2A3F;

    --pc-bg:           #101116;
    --pc-bg-card:      #1A1D27;
    --pc-bg-card-glass: rgb(26 29 39 / 0.7);
    --pc-bg-subtle:    #252935;
    --pc-bg-muted:     #334155;
    --pc-bg-hover:     #334155;

    --pc-heading:      #F1F5F9;
    --pc-text:         #94A3B8;
    --pc-text-muted:   #64748B;

    --pc-border:       #222430;
    --pc-border-light: #252935;

    --pc-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
    --pc-shadow-md:    0 2px 8px rgba(0, 0, 0, 0.4);
    --pc-shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.5);
    --pc-shadow-hover: 0 8px 24px rgba(8, 76, 219, 0.25);

    --pc-bg-card-hover:      #222532;
    --pc-border-card-hover:  #2d2f3f;
    --pc-shadow-card-hover:  var(--pc-shadow-md);

    /* Dark mode icon colors */
    --pc-icon-started-bg:    rgba(34, 102, 247, 0.2);
    --pc-icon-started-color: #6DACFF;
    --pc-icon-account-bg:    rgba(151, 34, 247, 0.2);
    --pc-icon-account-color: #A463FF;
  }
}

/* --- Forced dark class override ----------------------------- */
:root.dark {
  --pc-accent:            #4580FF;
  --pc-accent-hover:      #3B73F0;
  --pc-accent-underline:  rgba(8, 76, 219, 0.35);
  --pc-accent-light:      #1A1D27;
  --pc-accent-muted:      #1E2A3F;

  --pc-bg:           #101116;
  --pc-bg-card:      #1A1D27;
  --pc-bg-card-glass: rgb(26 29 39 / 0.7);
  --pc-bg-subtle:    #252935;
  --pc-bg-muted:     #334155;
  --pc-bg-hover:     #334155;

  --pc-heading:      #F1F5F9;
  --pc-text:         #94A3B8;
  --pc-text-muted:   #64748B;

  --pc-border:       #222430;
  --pc-border-light: #252935;

  --pc-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
  --pc-shadow-md:    0 2px 8px rgba(0, 0, 0, 0.4);
  --pc-shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.5);
  --pc-shadow-hover: 0 8px 24px rgba(8, 76, 219, 0.25);

  --pc-bg-card-hover:      #222532;
  --pc-border-card-hover:  #2d2f3f;
  --pc-shadow-card-hover:  var(--pc-shadow-md);

  /* Dark mode icon colors */
  --pc-icon-started-bg:    rgba(34, 102, 247, 0.2);
  --pc-icon-started-color: #6DACFF;
  --pc-icon-account-bg:    rgba(151, 34, 247, 0.2);
  --pc-icon-account-color: #A463FF;
}


/* === 1. ROOT FONT-SIZE FIX ================================= */
html {
  font-size: 16px !important;
  min-height: 100vh !important;
  background: var(--pc-bg) !important;
}


/* === 2. GLOBAL TYPOGRAPHY ================================== */

body {
  font-family: var(--pc-font) !important;
  font-size: 1rem !important;        /* 16px base */
  color: var(--pc-text) !important;
  background: var(--pc-bg) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.title {
  font-family: var(--pc-font) !important;
  color: var(--pc-heading) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

h1, h1.title { font-size: 2.25rem !important; margin-bottom: 0.5em !important; }    /* 36px */
h2, h2.title { font-size: 1.5rem !important; margin-top: 1.25em !important; margin-bottom: .8em !important; }  /* 24px */
h3, h3.title { font-size: 1.25rem !important; margin-top: 1.25em !important; }       /* 20px */
h4, h4.title { font-size: 1rem !important; margin-top: 1.25em !important; }           /* 16px */

/* Larger headings in main content area */
#topic-content h3, #topic-content h3.title { font-size: 1.5rem !important; }          /* 24px */
#topic-content h4, #topic-content h4.title { font-size: 1.25rem !important; }         /* 20px */
h5, h5.title { font-size: 0.875rem !important; }                                      /* 14px */
h6, h6.title { font-size: 0.75rem !important; }                                       /* 12px */

/* Heading anchor links — show link.svg icon on hover */
h1 .header-link, h2 .header-link, h3 .header-link,
h4 .header-link, h5 .header-link, h6 .header-link,
.title .header-link {
  opacity: 0 !important;
  transition: opacity 0.15s ease, background 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.6em !important;
  height: 1.2em !important;
  margin-left: 0.4em !important;
  vertical-align: middle !important;
  color: var(--pc-text-muted) !important;
  text-decoration: none !important;
  font-size: inherit !important;
  border-radius: var(--pc-radius-pill) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
h1:hover .header-link, h2:hover .header-link, h3:hover .header-link,
h4:hover .header-link, h5:hover .header-link, h6:hover .header-link,
.title:hover .header-link {
  opacity: 1 !important;
}
h1 .header-link:hover, h2 .header-link:hover, h3 .header-link:hover,
h4 .header-link:hover, h5 .header-link:hover, h6 .header-link:hover,
.title .header-link:hover {
  background: var(--pc-bg-subtle) !important;
  border-color: var(--pc-border) !important;
}
h1 .header-link::before, h2 .header-link::before, h3 .header-link::before,
h4 .header-link::before, h5 .header-link::before, h6 .header-link::before,
.title .header-link::before {
  content: "" !important;
  display: inline-block !important;
  width: 0.75em !important;
  height: 0.75em !important;
  background-color: var(--pc-text-muted) !important;
  -webkit-mask-image: url("images/link.svg") !important;
  mask-image: url("images/link.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
/* Hide any existing text content in the link (e.g. "#") */
h1 .header-link *, h2 .header-link *, h3 .header-link *,
h4 .header-link *, h5 .header-link *, h6 .header-link *,
.title .header-link * {
  display: none !important;
}

p {
  margin-bottom: 1.3em !important;
  line-height: 1.7 !important;
}

/* Remove bottom margin from only-child paragraphs in table cells */
td p:only-child,
th p:only-child {
  margin-bottom: 0 !important;
}

/* Global link defaults — text color, not accent */
a {
  color: var(--pc-heading) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
a:hover {
  color: var(--pc-text) !important;
}

/* Animated underline links — content area only (Spectacle style) */
#topic-content a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):not(.pc-product-link):not(.pc-toc-link) {
  text-decoration: none !important;
  color: var(--pc-heading) !important;
  background-image: linear-gradient(var(--pc-border), var(--pc-border)) !important;
  background-size: 100% 1px !important;
  background-position: 0 calc(100% - 1px) !important;
  background-repeat: no-repeat !important;
  transition: background-size 0.25s ease, color 0.15s ease !important;
}
#topic-content a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):not(.pc-product-link):not(.pc-toc-link):hover {
  background-size: 100% 3px !important;
  color: var(--pc-accent) !important;
}

/* Links inside admonitions — hover matches surrounding text color */
#topic-content .note a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):hover,
#topic-content .warning a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):hover,
#topic-content .tip a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):hover,
#topic-content .important a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):hover,
#topic-content .caution a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):hover,
#topic-content .admonition a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):hover,
#topic-content .notice a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):hover {
  color: inherit !important;
}

/* Kill underline effect on panel-heading links — must exceed specificity of the :not() chain */
#topic-content .panel-heading a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link) {
  background-image: none !important;
  background-size: 0 !important;
  transition: none !important;
}
#topic-content .panel-heading a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):hover {
  background-image: none !important;
  background-size: 0 !important;
}

/* Kill underline effect on panel-heading collapse links — match specificity of base link rule */
#topic-content .panel-heading a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):not(.pc-product-link):not(.pc-toc-link),
#topic-content .panel-heading .titlepage a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):not(.pc-product-link):not(.pc-toc-link),
#topic-content a[data-toggle="collapse"]:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):not(.pc-product-link):not(.pc-toc-link) {
  background-image: none !important;
  background-size: 0 !important;
  transition: none !important;
}
#topic-content .panel-heading a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):not(.pc-product-link):not(.pc-toc-link):hover,
#topic-content .panel-heading .titlepage a:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):not(.pc-product-link):not(.pc-toc-link):hover,
#topic-content a[data-toggle="collapse"]:not(.pc-card):not(.pc-tab-btn):not(.pc-tab-button):not(.header-link):not(.anchor-link):not(.topic-link):not(.pc-product-link):not(.pc-toc-link):hover {
  background-image: none !important;
  background-size: 0 !important;
}

code, pre, .code {
  font-family: var(--pc-font-mono) !important;
  font-size: 0.875em !important;
}

/* Inline code */
code {
  background: var(--pc-bg-subtle) !important;
  padding: 2px 6px !important;
  border-radius: var(--pc-radius-sm) !important;
  color: var(--pc-heading) !important;
}

/* Dark code blocks */
pre {
  background: #0F172A !important;
  color: #E2E8F0 !important;
  border: none !important;
  border-radius: var(--pc-radius-lg) !important;
  padding: 20px 24px !important;
  overflow-x: auto !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}
pre code {
  background: transparent !important;
  padding: 0 !important;
  color: #E2E8F0 !important;
}

/* Dark mode code block adjustments */
@media (prefers-color-scheme: dark) {
  :root:not(.light) pre {
    background: #1E293B !important;
    box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.1), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  }
  :root:not(.light) code {
    background: var(--pc-bg-subtle) !important;
    color: var(--pc-heading) !important;
  }
}
:root.dark pre {
  background: #1E293B !important;
  box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.1), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
:root.dark code {
  background: var(--pc-bg-subtle) !important;
  color: var(--pc-heading) !important;
}


/* === 3. HEADER ============================================= */

#header {
  background: color-mix(in srgb, var(--pc-bg) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--pc-border) !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

#header .container,
#header > .container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 var(--pc-space-lg) !important;
  height: 64px !important;
  border: none !important;
}

/* Kill borders on all elements inside header */
#header *:not(.pc-search-trigger):not(.pc-dark-mode-toggle):not(.pc-theme-dropdown):not(.pc-theme-option) {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

/* Three-zone header: logo left, nav center, tools right */

/* Hide default Paligo logo */
#logotype-container img,
#logotype-container .logotype {
  display: none !important;
}

/* Replace with PC branding — pinned left */
#logotype-container {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-right: auto !important;
}

/* PC shield logo SVG */
#logotype-container::before {
  content: "" !important;
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 42 42' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Crect x='5.163' y='7.023' width='30.95' height='27.955' fill='%23fff'/%3E%3Cpath d='M27.696 16.287a.148.148 0 0 1 .257.192v6.334a.203.203 0 0 1-.143.192l-6.542 1.933a.407.407 0 0 1-.568-.001l-6.511-1.933a.203.203 0 0 1-.143-.191v-6.335a.148.148 0 0 1 .257-.191l5.49 1.63a1.63 1.63 0 0 0 2.412 0l5.49-1.63Z' fill='%232266F7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.583.345a6.095 6.095 0 0 0-5.166 0L5.192 3.942C2.13 4.775 0 7.596 0 10.82v20.361c0 3.224 2.13 6.045 5.192 6.878l13.225 3.596a6.094 6.094 0 0 0 5.166 0l13.225-3.596C39.87 37.225 42 34.404 42 31.18V10.82c0-3.224-2.13-6.045-5.192-6.878L23.583.345ZM14.304 27.123a.148.148 0 0 0-.257.192v4.377c0 .427-.405.738-.817.628l-2.747-.73A.614.614 0 0 1 10 30.962V14.45c0-1.751 1.756-3.002 3.491-2.488l7.21 2.14a.407.407 0 0 1 .567.001l7.24-2.14c1.735-.515 3.491.736 3.491 2.488v9.474c0 1.143-.772 2.152-1.905 2.488l-7.889 2.342a1.63 1.63 0 0 1-2.411 0l-5.49-1.63Z' fill='%232266F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h42v42H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}

#logotype-container::after {
  content: "Planning Center Help" !important;
  font-family: var(--pc-font) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--pc-heading) !important;
  white-space: nowrap !important;
}

#logotype-container a {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.overlay {
  display: none !important;
}

/* Tools pinned right */
#pagetools-container {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--pc-space-sm) !important;
  margin-left: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Hide default Paligo nav */
#header ul.nav:not(#pc-external-nav ul),
#header .navbar-nav {
  display: none !important;
}

/* External nav links — centered in header */
#pc-external-nav {
  display: flex !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#pc-external-nav ul {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#pc-external-nav li {
  list-style: none !important;
  margin: 0 !important;
}

#pc-external-nav a {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--pc-text-muted) !important;
  padding: 6px 12px !important;
  border-radius: var(--pc-radius-sm) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

#pc-external-nav a:hover {
  color: var(--pc-heading) !important;
  background: var(--pc-bg-subtle) !important;
  text-decoration: none !important;
}


/* === 4. SEARCH (Algolia + Cmd-K) =========================== */

svg.aa-input-icon,
#aa-input-container svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  fill: var(--pc-text-muted) !important;
  pointer-events: none !important;
}

#aa-input-container {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

input.aa-input-search,
#aa-search-input {
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-pill) !important;
  padding: 8px 16px 8px 36px !important;
  font-size: 0.875rem !important;
  font-family: var(--pc-font) !important;
  height: 40px !important;
  width: 260px !important;
  outline: none !important;
  background: var(--pc-bg-subtle) !important;
  color: var(--pc-text) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  box-sizing: border-box !important;
}

input.aa-input-search::placeholder,
#aa-search-input::placeholder {
  color: var(--pc-text-muted) !important;
}

input.aa-input-search:focus,
#aa-search-input:focus {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 3px rgba(34, 102, 247, 0.1) !important;
  background: var(--pc-bg-card) !important;
}

.aa-DetachedSearchButton {
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-pill) !important;
  background: var(--pc-bg-subtle) !important;
  max-width: 280px !important;
  height: 40px !important;
}

.aa-DetachedSearchButtonIcon svg {
  width: 16px !important;
  height: 16px !important;
}

.aa-dropdown-menu {
  background: var(--pc-bg-card) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-md) !important;
  box-shadow: var(--pc-shadow-lg) !important;
  margin-top: 4px !important;
  font-family: var(--pc-font) !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

.aa-suggestion {
  padding: 10px 14px !important;
  cursor: pointer !important;
}

.aa-suggestion:hover,
.aa-cursor {
  background: var(--pc-bg-subtle) !important;
}

.aa-suggestion em {
  font-style: normal !important;
  background: var(--pc-accent-light) !important;
  color: var(--pc-accent) !important;
}

/* Cmd-K search trigger button */
.pc-search-trigger {
  display: flex !important;
  align-items: center !important;
  gap: var(--pc-space-sm) !important;
  padding: 6px 12px 6px 10px !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-pill) !important;
  background: var(--pc-bg-subtle) !important;
  color: var(--pc-text-muted) !important;
  font-family: var(--pc-font) !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  margin-right: 16px !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  white-space: nowrap !important;
  height: 40px !important;
}

/* Hide header search on landing page (hero search is primary) */
body.pc-landing-page .pc-search-trigger {
  display: none !important;
}

.pc-search-trigger:hover {
  border-color: rgb(0 0 0 / 0.15) !important;
  background: var(--pc-bg-card) !important;
}

:root.dark .pc-search-trigger:hover,
:root:not(.light) .pc-search-trigger:hover {
  border-color: rgb(255 255 255 / 0.1) !important;
}

.pc-search-trigger svg {
  width: 16px !important;
  height: 16px !important;
  stroke: var(--pc-text-muted) !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

.pc-search-trigger-text {
  color: var(--pc-text-muted) !important;
}

.pc-search-trigger-kbd {
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-sm) !important;
  padding: 2px 6px !important;
  font-size: 0.6875rem !important;
  font-family: var(--pc-font) !important;
  color: var(--pc-text-muted) !important;
  background: var(--pc-bg-card) !important;
  line-height: 1.2 !important;
}

/* Hide search text + kbd on mobile, just show icon */
@media (max-width: 640px) {
  .pc-search-trigger-text,
  .pc-search-trigger-kbd {
    display: none !important;
  }
  .pc-search-trigger {
    padding: 6px 10px !important;
    min-width: 40px !important;
    justify-content: center !important;
  }
}

/* Cmd-K search modal */
.pc-search-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 15vh 20px 0 !important;
  box-sizing: border-box !important;
}

.pc-search-modal.active {
  display: flex !important;
}

.pc-search-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.pc-search-modal-content {
  position: relative !important;
  width: 100% !important;
  max-width: 640px !important;
  max-height: 80vh !important;
  background: var(--pc-bg-card) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-xl) !important;
  box-shadow: var(--pc-shadow-lg) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Search icon — mask technique with magnifying-glass.svg */
.pc-search-icon {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  background: var(--pc-text) !important;
  -webkit-mask: url("images/magnifying-glass.svg") no-repeat center / contain !important;
  mask: url("images/magnifying-glass.svg") no-repeat center / contain !important;
}

.pc-search-modal-icon {
  width: 20px !important;
  height: 20px !important;
}

.pc-search-modal-header {
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  gap: 12px !important;
}

.pc-search-modal-input {
  width: 100% !important;
  padding: 16px 0 !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--pc-font) !important;
  font-size: 1rem !important;
  color: var(--pc-text) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.pc-search-modal-input::placeholder {
  color: var(--pc-text-muted) !important;
}

/* Body collapses when empty, expands when results appear */
.pc-search-modal-body:empty {
  display: none !important;
}

.pc-search-modal-body:not(:empty) {
  border-top: 1px solid var(--pc-border) !important;
  flex: 1 !important;
}

.pc-search-modal-results {
  max-height: 60vh !important;
  overflow-y: auto !important;
  padding: var(--pc-space-sm) !important;
}

.pc-search-modal-result {
  padding: 10px 14px !important;
  border-radius: var(--pc-radius-md) !important;
  cursor: pointer !important;
  transition: background 0.1s ease !important;
}

.pc-search-modal-result:hover,
.pc-search-modal-result.active {
  background: var(--pc-bg-subtle) !important;
}


/* Algolia search results in CMD+K modal */
.pc-search-results {
  list-style: none !important;
  margin: 0 !important;
  padding: var(--pc-space-sm) !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

.pc-search-result-item {
  margin: 0 !important;
  padding: 0 !important;
}

.pc-search-result-item a {
  display: block !important;
  padding: 10px 14px !important;
  border-radius: var(--pc-radius-md) !important;
  text-decoration: none !important;
  color: var(--pc-text) !important;
  transition: background 0.1s ease !important;
}

.pc-search-result-item a:hover {
  background: var(--pc-bg-subtle) !important;
}

.pc-search-result-title {
  display: block !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
}

.pc-search-result-title em,
.pc-search-result-snippet em {
  font-style: normal !important;
  background: rgba(255, 200, 0, 0.25) !important;
  border-radius: 2px !important;
  padding: 0 2px !important;
}

.pc-search-result-snippet {
  display: block !important;
  margin-top: 2px !important;
  font-size: 0.85rem !important;
  color: var(--pc-text-muted) !important;
  line-height: 1.4 !important;
}

.pc-search-message {
  padding: 24px 14px !important;
  text-align: center !important;
  color: var(--pc-text-muted) !important;
  font-size: 0.9rem !important;
}

/* === 5. PAGE TOOLS (search, print) ========================= */

#page-tools {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#page-tools > li {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
}

li.page-tools-search {
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

/* Hide print button */
#page-tools > li.page-tools-print {
  display: none !important;
}


/* === 6. PUBLICATION TITLE (hide) =========================== */

h1#publication-title,
#publication-title {
  display: none !important;
}

/* Hide titlepage on landing page (contains pub title, copyright, date) */
section.article > .titlepage {
  display: none !important;
}


/* === 7. SUB-HEADER / BREADCRUMBS =========================== */

#subheader-sticky-wrapper {
  position: sticky !important;
  top: 64px !important;
  z-index: 99 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#subheader {
  background: color-mix(in srgb, var(--pc-bg) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: relative !important;
}

#subheader::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 1408px !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, var(--pc-border) 10%, var(--pc-border) 90%, transparent) !important;
  pointer-events: none !important;
}

#subheader .container {
  max-width: 1408px !important;
  margin: 0 auto !important;
  padding: 0 var(--pc-space-2xl) !important;
}

.breadcrumb-container {
  padding-left: 0 !important;
}

.breadcrumb,
#breadcrumb {
  background: transparent !important;
  padding: var(--pc-space-sm) 0 !important;
  margin: 0 !important;
  font-size: 0.8125rem !important;
}

.breadcrumb a {
  color: var(--pc-text-muted) !important;
}
.breadcrumb a:hover {
  color: var(--pc-heading) !important;
}
.breadcrumb > .active {
  color: var(--pc-text) !important;
}

/* Breadcrumb separator — Phosphor caret-right between nodes */
.breadcrumb li + li {
  padding-left: 0 !important;
  background: none !important;
  background-image: none !important;
}

.breadcrumb li + li::before {
  content: "" !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 6px !important;
  vertical-align: middle !important;
  background: var(--pc-text-muted) !important;
  -webkit-mask: url("images/caret-right.svg") no-repeat center / contain !important;
  mask: url("images/caret-right.svg") no-repeat center / contain !important;
}

/* Breadcrumb home icon — replace glyphicon-home with house.svg */
.breadcrumb .glyphicon-home {
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  vertical-align: -1px !important;
  background: var(--pc-text-muted) !important;
  -webkit-mask: url("images/house.svg") no-repeat center / contain !important;
  mask: url("images/house.svg") no-repeat center / contain !important;
}

.breadcrumb .glyphicon-home::before {
  content: none !important;
}

/* TOC toggle label in subheader */
.toc-title h2 {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--pc-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}


/* === 8. MAIN LAYOUT — THREE-COLUMN CENTERED ================ */

/* Strip Paligo's #page container constraints */
#page {
  max-width: none !important;
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main-content {
  background: var(--pc-bg) !important;
  padding-top: var(--pc-space-lg) !important;
  padding-bottom: 0 !important;
  min-height: calc(100vh - var(--pc-header-height) - var(--pc-subheader-height)) !important;
}

/* Remove dead whitespace above hero on landing pages */
body.landing-page #main-content,
body.pc-landing-page #main-content {
  padding-top: 0 !important;
}

body.landing-page #content-wrapper,
body.pc-landing-page #content-wrapper {
  padding-top: 0 !important;
}

#main-content > .container {
  max-width: 1408px !important;
  margin: 0 auto !important;
  padding: 0 var(--pc-space-2xl) !important;
}


/* === 9. SIDEBAR TOC ======================================== */

#toc-wrapper,
.toc-container {
  padding: 0 42px 0 0 !important;
  border-right: 1px solid var(--pc-border) !important;
  background: transparent !important;
  width: 288px !important;
  min-width: 288px !important;
  flex-shrink: 0 !important;
  float: none !important;
  /* Stretch to fill the row — gives #toc-placeholder room to stick within */
  align-self: stretch !important;
  position: relative !important;
  overflow: visible !important;
}

#main-content .toc-container {
  border-bottom: none !important;
}

/* Hide TABLE OF CONTENTS heading entirely */
#toc-wrapper > h2,
.toc-title,
.toc-title h2 {
  display: none !important;
}

/* Sticky scroll container — #toc-standalone-placeholder is replaced by
   Paligo's create-toc.js with the actual <ul>, so the scroll styles must
   live on #toc-placeholder itself. overflow-y on a sticky element does NOT
   break its own sticky positioning (only ancestor overflow matters). */
#toc-placeholder {
  box-sizing: border-box !important;
  position: sticky !important;
  top: var(--pc-sidebar-top) !important;
  height: calc(100vh - var(--pc-sidebar-top)) !important;
  overflow-y: auto !important;
  padding: 0 calc(var(--pc-space-lg) + 16px) var(--pc-space-xl) 6px !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--pc-border) transparent !important;
}

#toc-placeholder::-webkit-scrollbar {
  width: 4px !important;
}
#toc-placeholder::-webkit-scrollbar-thumb {
  background: var(--pc-border) !important;
  border-radius: 4px !important;
}
#toc-placeholder::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Fallback if #toc-standalone-placeholder is still in the DOM */
#toc-standalone-placeholder {
  height: 100% !important;
  overflow-y: auto !important;
  padding-left: 6px !important;
  padding-right: calc(var(--pc-space-lg) + 16px) !important;
  padding-bottom: var(--pc-space-xl) !important;
}

/* Reset top-level TOC list */
ul.toc.nav.nav-site-sidebar {
  list-style: none !important;
  padding-left: 0 !important;
  padding-bottom: 36px !important;
  margin: 0 !important;
  border-left: none !important;
}

/* First nested level — minimal left margin keeps dot from clipping */
ul.toc.nav.nav-site-sidebar ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 0 0 4px !important;
  border-left: 2px solid var(--pc-border) !important;
  overflow: visible !important;
}

/* Deeper nested levels — 12px indent */
ul.toc.nav.nav-site-sidebar ul ul {
  margin-left: 12px !important;
}

/* All TOC items */
ul.toc.nav.nav-site-sidebar li {
  margin-bottom: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* Top-level TOC links (section headings) */
ul.toc.nav.nav-site-sidebar > li > a {
  color: var(--pc-heading) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  display: block !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: color 0.15s ease !important;
  border-left: none !important;
  margin-left: 0 !important;
  background: transparent !important;
}

/* Nested TOC links */
ul.toc.nav.nav-site-sidebar ul a {
  color: var(--pc-text-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  display: block !important;
  padding: 4px 0 4px 12px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
  transition: color 0.15s ease !important;
  border-left: none !important;
  margin-left: -1px !important;
  background: transparent !important;
  position: relative !important;
}

/* Active dot — a small circle on the vertical line */
ul.toc.nav.nav-site-sidebar ul li.active > a::before,
ul.toc.nav.nav-site-sidebar ul li.current > a::before,
ul.toc.nav.nav-site-sidebar ul a.active::before,
ul.toc.nav.nav-site-sidebar ul a.current::before {
  content: "" !important;
  position: absolute !important;
  left: -3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--pc-accent) !important;
  z-index: 1 !important;
}

/* Hover — text color only, no background */
ul.toc.nav.nav-site-sidebar a:hover {
  color: var(--pc-heading) !important;
  background: transparent !important;
  text-decoration: none !important;
}

ul.toc.nav.nav-site-sidebar ul a:hover {
  color: var(--pc-heading) !important;
  background: transparent !important;
}

/* Hover dot — same size as active, differentiated by color */
ul.toc.nav.nav-site-sidebar ul a:hover::before {
  content: "" !important;
  position: absolute !important;
  left: -3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--pc-border) !important;
  z-index: 1 !important;
}

/* No hover dot on active/current items */
ul.toc.nav.nav-site-sidebar ul li.active > a:hover::before,
ul.toc.nav.nav-site-sidebar ul li.current > a:hover::before,
ul.toc.nav.nav-site-sidebar ul a.active:hover::before,
ul.toc.nav.nav-site-sidebar ul a.current:hover::before {
  display: none !important;
}

/* Active / Current — accent color, no background */
ul.toc.nav.nav-site-sidebar a.active,
ul.toc.nav.nav-site-sidebar a.current,
ul.toc.nav.nav-site-sidebar li.active > a,
ul.toc.nav.nav-site-sidebar li.current > a {
  color: var(--pc-accent) !important;
  font-weight: 700 !important;
  background: transparent !important;
  border-left: none !important;
}

/* Nested active items — accent color but normal weight */
ul.toc.nav.nav-site-sidebar ul a.active,
ul.toc.nav.nav-site-sidebar ul a.current,
ul.toc.nav.nav-site-sidebar ul li.active > a,
ul.toc.nav.nav-site-sidebar ul li.current > a {
  font-weight: 400 !important;
}

/* Active items keep their style on hover */
ul.toc.nav.nav-site-sidebar a.active:hover,
ul.toc.nav.nav-site-sidebar a.current:hover,
ul.toc.nav.nav-site-sidebar li.active > a:hover,
ul.toc.nav.nav-site-sidebar li.current > a:hover {
  color: var(--pc-accent) !important;
  background: transparent !important;
}

/* Spacing between top-level sections */
ul.toc.nav.nav-site-sidebar > li {
  margin-bottom: var(--pc-space-xs) !important;
  border-top: none !important;
}

ul.toc.nav.nav-site-sidebar > li + li {
  margin-top: var(--pc-space-md) !important;
}

/* TOC glyphicons — hide */
ul.toc.nav.nav-site-sidebar a .glyphicon,
ul.toc.nav.nav-site-sidebar li a .glyphicon,
ul.toc.nav.nav-site-sidebar .toc-toggle,
ul.toc.nav.nav-site-sidebar li.active a .glyphicon,
ul.toc.nav.nav-site-sidebar li.current a .glyphicon,
ul.toc.nav.nav-site-sidebar li.active .toc-toggle,
ul.toc.nav.nav-site-sidebar li.current .toc-toggle {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  position: absolute !important;
}

/* Spacing between top-level sections */
ul.toc.nav.nav-site-sidebar > li {
  margin-bottom: 2px !important;
}

/* Kill Paligo text-shadow on TOC items in dark mode */
@media (prefers-color-scheme: dark) {
  :root:not(.light) #toc-placeholder * {
    text-shadow: none !important;
  }
}
:root.dark #toc-placeholder * {
  text-shadow: none !important;
}


/* === 10. CONTENT AREA ====================================== */

#content-wrapper,
.content-container {
  padding: 16px 64px !important;
  padding-bottom: var(--pc-space-3xl) !important;
  flex: 1 1 auto !important;
}

#topic-content {
  max-width: 768px !important;
  padding-top: 32px !important;
}

/* Article title - show the h2/h1 inside section titlepage */
#topic-content section.section > .titlepage h2.title,
#topic-content section.section > .titlepage h3.title {
  display: block !important;
}

/* Section titles in articles */
section.section > .titlepage {
  margin-bottom: var(--pc-space-md) !important;
}

/* Images — exclude Wistia thumbnails and card icons from border styling */
.mediaobject,
.figure {
  text-align: center !important;
}

#topic-content img:not(.wistia_still img):not(.pc-card-icon img),
.mediaobject img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 526px !important;
  border-radius: var(--pc-radius-lg) !important;
  border: 1px solid var(--pc-border) !important;
  margin: var(--pc-space-md) auto !important;
  display: block !important;
  cursor: zoom-in !important;
  transition: box-shadow 0.2s ease !important;
}

#topic-content img:not(.wistia_still img):not(.pc-card-icon img):hover,
.mediaobject img:hover {
  box-shadow: var(--pc-shadow-md) !important;
}

/* Horizontal scroll with overflow shadow indicators — top-level only */
#topic-content > .informaltable,
#topic-content > section > .informaltable,
#topic-content > section > section > .informaltable,
#topic-content .section > .informaltable {
  overflow-x: auto !important;
  overflow-y: visible !important;
  background:
    /* Left/right covers — scroll with content, hide shadow at edges */
    linear-gradient(to right, var(--pc-bg), var(--pc-bg)) left center,
    linear-gradient(to left, var(--pc-bg), var(--pc-bg)) right center,
    /* Left/right shadows — fixed, visible when scrolled */
    radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.12), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), transparent) right center !important;
  background-repeat: no-repeat !important;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100% !important;
  background-attachment: local, local, scroll, scroll !important;
}

/* Nested informaltables inside table cells — no scroll, no gradients */
td .informaltable,
th .informaltable {
  overflow: visible !important;
  background: none !important;
  background-attachment: initial !important;
  width: 100% !important;
}

td .informaltable table,
th .informaltable table {
  width: 100% !important;
}

/* Tables — neutral header, sticky, no hover on any rows */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: var(--pc-space-lg) 0 !important;
  font-size: 0.875rem !important;
}

@media (min-width: 1025px) {
  table {
    margin: var(--pc-space-2xl) 0 !important;
  }
}

table th {
  background: transparent !important;
  color: var(--pc-heading) !important;
  font-weight: 600 !important;
  text-align: left !important;
  padding: 10px var(--pc-space-md) !important;
  border-bottom: 1px solid var(--pc-border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

.informaltable th {
  border: 1px solid var(--pc-border) !important;
}

/* Reduce visual weight of Paligo's blank first header column */
table th:empty {
  padding: 4px !important;
}

/* Remove borders from table and tbody - keep only on TD bottoms */
table,
.informaltable table,
table tbody,
.informaltable tbody,
.table-bordered {
  border: none !important;
}

table tr,
.informaltable tr,
.informaltable table tr,
.table-bordered tr {
  border: none !important;
}

table td,
table tr:nth-child(even) td,
table tr:nth-child(odd) td,
table tr:first-child td,
table tr td:first-child,
.table-bordered td,
.table-bordered th {
  background: transparent !important;
  padding: 10px var(--pc-space-md) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--pc-border) !important;
  vertical-align: top !important;
  font-size: 1rem !important;
}

/* Top border on first row of TDs (when no header row) */
table tr:first-child td,
.table-bordered tr:first-child td {
  border-top: 1px solid var(--pc-border) !important;
}

/* Informal tables need borders on all sides */
.informaltable table td,
.informaltable table tr:nth-child(even) td,
.informaltable table tr:nth-child(odd) td,
.informaltable table tr:first-child td,
.informaltable table tr td:first-child {
  border: 1px solid var(--pc-border) !important;
}

table tr.question td {
  color: var(--pc-heading) !important;
  font-weight: 600 !important;
}

/* Remove ALL hover states from table rows */
table tr:hover td,
table:has(a) tr:hover td {
  background: transparent !important;
}

/* Dark mode table overrides */
@media (prefers-color-scheme: dark) {
  :root:not(.light) table th {
    background: transparent !important;
    color: var(--pc-heading) !important;
    border-color: var(--pc-border) !important;
  }
  :root:not(.light) table td {
    border-color: var(--pc-border) !important;
    color: var(--pc-text) !important;
  }
  :root:not(.light) table tr.question td {
    color: var(--pc-heading) !important;
  }
  :root:not(.light) table tr:nth-child(even) td {
    background: transparent !important;
  }
}
:root.dark table th {
  background: transparent !important;
  color: var(--pc-heading) !important;
  border-color: var(--pc-border) !important;
}
:root.dark table td {
  border-color: var(--pc-border) !important;
  color: var(--pc-text) !important;
}
:root.dark table tr.question td {
  color: var(--pc-heading) !important;
}
:root.dark table tr:nth-child(even) td {
  background: transparent !important;
}

/* Lists */
#topic-content ul,
#topic-content ol {
  padding-left: var(--pc-space-lg) !important;
  margin-bottom: 1em !important;
}

/* Remove padding on the card grid lists only */
#topic-content section.section:not(:has(> p:not(:empty), > .procedure, > section.section, > div.sidebar, > .mediaobject, > .note, > .warning, > .tip, > .important, > .itemizedlist, > .orderedlist)) > .section-toc > ul,
#topic-content section.article > .section-toc > ul {
  padding-left: 0 !important;
}

#topic-content li {
  margin-bottom: 0.35em !important;
  line-height: 1.7 !important;
}


/* === 11. SECTION TOC (in-article) ========================== */

.section-toc {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: var(--pc-space-lg) !important;
}

/* "See also" heading — restyle as subtle label */
.section-toc > .title,
.section-toc > h3,
.section-toc > .section-toc-title {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--pc-text-muted) !important;
  margin-bottom: var(--pc-space-sm) !important;
  display: block !important;
}

/* Default: simple inline list style */
.section-toc > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.section-toc > ul > li {
  margin: 0 !important;
  padding: 0 !important;
}

.section-toc > ul > li > a {
  display: block !important;
  padding: 8px 12px !important;
  color: var(--pc-text) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border-radius: var(--pc-radius-sm) !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  border-left: 2px solid var(--pc-border-light) !important;
}

.section-toc > ul > li > a:hover {
  color: var(--pc-heading) !important;
  background: var(--pc-bg-subtle) !important;
  border-left-color: var(--pc-text-muted) !important;
  text-decoration: none !important;
}


/* === 12. SECTION TOC — CATEGORY PAGE CARD GRID ============= */

/* Hide empty paragraphs Paligo outputs */
p:empty {
  display: none !important;
}

/* Card grid: landing page (section-toc is direct child of article) */
section.article > .section-toc > ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(50% - 8px)), 1fr)) !important;
  gap: var(--pc-space-md) !important;
}

section.article > .section-toc > ul > li > a {
  display: flex !important;
  align-items: center !important;
  padding: var(--pc-space-md) var(--pc-space-lg) !important;
  border: 1px solid var(--pc-border) !important;
  border-left: 3px solid var(--pc-accent-muted) !important;
  border-radius: var(--pc-radius-xl) !important;
  font-weight: 500 !important;
  min-height: 56px !important;
  transition: all 0.2s ease !important;
  background: var(--pc-bg-card) !important;
}

section.article > .section-toc > ul > li > a:hover {
  background: var(--pc-bg-card-hover) !important;
  border-color: var(--pc-border-card-hover) !important;
  box-shadow: var(--pc-shadow-card-hover) !important;
  transform: translateY(-2px) !important;
}

/* Hide nested ULs inside section-toc at the top level */
.section-toc ul ul {
  display: none !important;
}

/* Card grid: category pages (section with no real body content) */
section.section:not(:has(> p:not(:empty), > .procedure, > section.section, > div.sidebar, > .mediaobject, > .note, > .warning, > .tip, > .important, > .itemizedlist, > .orderedlist)) > .section-toc > ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(50% - 8px)), 1fr)) !important;
  gap: var(--pc-space-md) !important;
}

section.section:not(:has(> p:not(:empty), > .procedure, > section.section, > div.sidebar, > .mediaobject, > .note, > .warning, > .tip, > .important, > .itemizedlist, > .orderedlist)) > .section-toc > ul > li > a {
  display: flex !important;
  align-items: flex-start !important;
  padding: var(--pc-space-md) var(--pc-space-lg) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-lg) !important;
  font-weight: 500 !important;
  min-height: 56px !important;
  flex: 1 !important;
  transition: all 0.2s ease !important;
  background: var(--pc-bg-card-glass) !important;
}

section.section:not(:has(> p:not(:empty), > .procedure, > section.section, > div.sidebar, > .mediaobject, > .note, > .warning, > .tip, > .important, > .itemizedlist, > .orderedlist)) > .section-toc > ul > li {
  display: flex !important;
  flex-direction: column !important;
}

section.section:not(:has(> p:not(:empty), > .procedure, > section.section, > div.sidebar, > .mediaobject, > .note, > .warning, > .tip, > .important, > .itemizedlist, > .orderedlist)) > .section-toc > ul > li > a:hover {
  background: var(--pc-bg-card-hover) !important;
  border-color: var(--pc-border-card-hover) !important;
  box-shadow: var(--pc-shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Hide "See also" heading on category pages */
section.section:not(:has(> p:not(:empty), > .procedure, > section.section, > div.sidebar, > .mediaobject, > .note, > .warning, > .tip, > .important)) > .section-toc > .title,
section.section:not(:has(> p:not(:empty), > .procedure, > section.section, > div.sidebar, > .mediaobject, > .note, > .warning, > .tip, > .important)) > .section-toc > h3,
section.section:not(:has(> p:not(:empty), > .procedure, > section.section, > div.sidebar, > .mediaobject, > .note, > .warning, > .tip, > .important)) > .section-toc > .section-toc-title {
  display: none !important;
}

/* Override: when section DOES have real body content, force flat list */
section.section:has(> p:not(:empty), > .procedure, > div.sidebar, > .mediaobject, > .note, > .warning, > .tip, > .important) > .section-toc > ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  grid-template-columns: unset !important;
}

section.section:has(> p:not(:empty), > .procedure, > div.sidebar, > .mediaobject, > .note, > .warning, > .tip, > .important) > .section-toc > ul > li > a {
  display: block !important;
  padding: 8px 12px !important;
  border: none !important;
  border-left: 2px solid var(--pc-border-light) !important;
  border-radius: var(--pc-radius-sm) !important;
  font-weight: 400 !important;
  min-height: unset !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}


/* === 13. ADMONITIONS / CALLOUTS ============================ */

.note, .warning, .tip, .important, .caution,
.admonition, .notice {
  border-radius: var(--pc-radius-lg) !important;
  padding: var(--pc-space-lg) !important;
  margin: var(--pc-space-md) 0 !important;
  border: 1px solid !important;
  position: relative !important;
}

@media (min-width: 768px) {
  .note, .warning, .tip, .important, .caution,
  .admonition, .notice {
    margin: var(--pc-space-lg) 0 !important;
  }
}

/* Admonition label */
.admonition-label,
p.admonition-label {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 0 var(--pc-space-xs) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
}

/* Admonition label icon base — mask technique inherits currentColor */
.admonition-label::before,
p.admonition-label::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  background-color: currentColor !important;
  margin-right: 2px !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Admonition label icon (hide Paligo-injected icons) */
.admonition-label img,
.admonition-label svg,
.admonition-label .glyphicon {
  display: none !important;
}

/* Tighter paragraph spacing inside admonitions */
.note p, .warning p, .tip p, .important p, .caution p,
.admonition p, .notice p {
  margin-bottom: 0.4em !important;
  line-height: 1.5 !important;
  padding-right: 0 !important;
}

/* Body paragraphs (not the label) indented to align under icon */
.note p:not(.admonition-label), .warning p:not(.admonition-label),
.tip p:not(.admonition-label), .important p:not(.admonition-label),
.caution p:not(.admonition-label), .admonition p:not(.admonition-label),
.notice p:not(.admonition-label) {
  margin-left: 32px !important;
}

/* Reduce bottom padding on last element in callouts */
.note > *:last-child,
.warning > *:last-child,
.tip > *:last-child,
.important > *:last-child,
.caution > *:last-child {
  margin-bottom: 0 !important;
}

/* Remove bottom padding when a single paragraph is the last node */
.note > p:last-of-type,
.notice > p:last-of-type,
.warning > p:last-of-type,
.caution > p:last-of-type,
.tip > p:last-of-type,
.important > p:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Note / Notice — blue */
.note, .notice {
  background: #F0F8FF !important;
  border-color: #E8F4FF !important;
}
.note .admonition-label, .note .admonition-title, .note .title,
.notice .admonition-label, .notice .admonition-title, .notice .title {
  color: #0E6FE6 !important;
}
.note p, .notice p { color: rgba(14, 14, 14, 0.6) !important; }
.note .admonition-label::before,
.notice .admonition-label::before {
  background-color: #0E6FE6 !important;
  -webkit-mask-image: url("images/lightbulb.svg") !important;
  mask-image: url("images/lightbulb.svg") !important;
}

/* Tip — green */
.tip {
  background: #F1FCE9 !important;
  border-color: #E5F9DC !important;
}
.tip .admonition-label, .tip .admonition-title, .tip .title {
  color: #008457 !important;
}
.tip p { color: rgba(14, 14, 14, 0.6) !important; }
.tip .admonition-label::before {
  background-color: #008457 !important;
  -webkit-mask-image: url("images/lightbulb.svg") !important;
  mask-image: url("images/lightbulb.svg") !important;
}

/* Warning / Caution — red */
.warning, .caution {
  background: #FFECEC !important;
  border-color: #FFE5E5 !important;
}
.warning .admonition-label, .warning .admonition-title, .warning .title,
.caution .admonition-label, .caution .admonition-title, .caution .title {
  color: #D61417 !important;
}
.warning p, .caution p { color: rgba(14, 14, 14, 0.6) !important; }
.warning .admonition-label::before,
.caution .admonition-label::before {
  background-color: #D61417 !important;
  -webkit-mask-image: url("images/warning.svg") !important;
  mask-image: url("images/warning.svg") !important;
}

/* Important — blue */
.important {
  background: #F0F8FF !important;
  border-color: #E8F4FF !important;
}
.important .admonition-label, .important .admonition-title, .important .title {
  color: #0E6FE6 !important;
}
.important p { color: rgba(14, 14, 14, 0.6) !important; }
.important .admonition-label::before {
  background-color: #0E6FE6 !important;
  -webkit-mask-image: url("images/info.svg") !important;
  mask-image: url("images/info.svg") !important;
}

/* Dark mode admonitions */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .note,
  :root:not(.light) .notice {
    background: #06162A !important;
    border-color: #0A1E38 !important;
  }
  :root:not(.light) .note .admonition-label, :root:not(.light) .note .admonition-title, :root:not(.light) .note .title,
  :root:not(.light) .notice .admonition-label, :root:not(.light) .notice .admonition-title, :root:not(.light) .notice .title {
    color: #288CFF !important;
  }
  :root:not(.light) .note .admonition-label::before, :root:not(.light) .notice .admonition-label::before { background-color: #288CFF !important; }
  :root:not(.light) .note p, :root:not(.light) .notice p { color: rgba(255, 255, 255, 0.6) !important; }
  :root:not(.light) .tip {
    background: #061D0E !important;
    border-color: #0A2515 !important;
  }
  :root:not(.light) .tip .admonition-label, :root:not(.light) .tip .admonition-title, :root:not(.light) .tip .title {
    color: #02EE9E !important;
  }
  :root:not(.light) .tip .admonition-label::before { background-color: #02EE9E !important; }
  :root:not(.light) .tip p { color: rgba(255, 255, 255, 0.6) !important; }
  :root:not(.light) .warning,
  :root:not(.light) .caution {
    background: #22080D !important;
    border-color: #2D0B11 !important;
  }
  :root:not(.light) .warning .admonition-label, :root:not(.light) .warning .admonition-title, :root:not(.light) .warning .title,
  :root:not(.light) .caution .admonition-label, :root:not(.light) .caution .admonition-title, :root:not(.light) .caution .title {
    color: #D91042 !important;
  }
  :root:not(.light) .warning .admonition-label::before, :root:not(.light) .caution .admonition-label::before { background-color: #D91042 !important; }
  :root:not(.light) .warning p, :root:not(.light) .caution p { color: rgba(255, 255, 255, 0.6) !important; }
  :root:not(.light) .important {
    background: #06162A !important;
    border-color: #0A1E38 !important;
  }
  :root:not(.light) .important .admonition-label, :root:not(.light) .important .admonition-title, :root:not(.light) .important .title {
    color: #288CFF !important;
  }
  :root:not(.light) .important .admonition-label::before { background-color: #288CFF !important; }
  :root:not(.light) .important p { color: rgba(255, 255, 255, 0.6) !important; }
}

/* Dark mode admonitions — forced */
:root.dark .note, :root.dark .notice { background: #06162A !important; border-color: #0A1E38 !important; }
:root.dark .note .admonition-label, :root.dark .note .admonition-title, :root.dark .note .title,
:root.dark .notice .admonition-label, :root.dark .notice .admonition-title, :root.dark .notice .title { color: #288CFF !important; }
:root.dark .note .admonition-label::before, :root.dark .notice .admonition-label::before { background-color: #288CFF !important; }
:root.dark .note p, :root.dark .notice p { color: rgba(255, 255, 255, 0.6) !important; }
:root.dark .tip { background: #061D0E !important; border-color: #0A2515 !important; }
:root.dark .tip .admonition-label, :root.dark .tip .admonition-title, :root.dark .tip .title { color: #02EE9E !important; }
:root.dark .tip .admonition-label::before { background-color: #02EE9E !important; }
:root.dark .tip p { color: rgba(255, 255, 255, 0.6) !important; }
:root.dark .warning, :root.dark .caution { background: #22080D !important; border-color: #2D0B11 !important; }
:root.dark .warning .admonition-label, :root.dark .warning .admonition-title, :root.dark .warning .title,
:root.dark .caution .admonition-label, :root.dark .caution .admonition-title, :root.dark .caution .title { color: #D91042 !important; }
:root.dark .warning .admonition-label::before, :root.dark .caution .admonition-label::before { background-color: #D91042 !important; }
:root.dark .warning p, :root.dark .caution p { color: rgba(255, 255, 255, 0.6) !important; }
:root.dark .important { background: #06162A !important; border-color: #0A1E38 !important; }
:root.dark .important .admonition-label, :root.dark .important .admonition-title, :root.dark .important .title { color: #288CFF !important; }
:root.dark .important .admonition-label::before { background-color: #288CFF !important; }
:root.dark .important p { color: rgba(255, 255, 255, 0.6) !important; }


/* === 14. PREV / NEXT NAVIGATION ============================ */

#header-navigation-prev,
#header-navigation-next {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--pc-space-xs) !important;
  font-size: 0.8125rem !important;
  color: var(--pc-text-muted) !important;
  padding: 6px 16px !important;
  border-radius: var(--pc-radius-pill) !important;
  border: 1px solid var(--pc-border) !important;
  background: var(--pc-bg-subtle) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

#header-navigation-prev:hover,
#header-navigation-next:hover {
  border-color: var(--pc-border) !important;
  color: var(--pc-heading) !important;
  background: var(--pc-bg-subtle) !important;
}

#header-navigation-prev a,
#header-navigation-next a {
  color: inherit !important;
  text-decoration: none !important;
}

#header-navigation-prev .glyphicon,
#header-navigation-next .glyphicon {
  color: inherit !important;
}


/* === 15. FOOTER ============================================ */

.footer-content,
#topic-content > section > footer,
.section > footer {
  margin-top: var(--pc-space-3xl) !important;
  padding-top: var(--pc-space-lg) !important;
  border-top: 1px solid var(--pc-border-light) !important;
  font-size: 0.8rem !important;
  color: var(--pc-text-muted) !important;
}

.footer-content:empty {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Footer region at bottom of page */
footer[role="contentinfo"],
[role="contentinfo"] {
  display: none !important;
}


/* === 16. LANDING PAGE ====================================== */

/* Hide sidebar TOC on landing page */
body.landing-page #toc-wrapper,
body.landing-page .toc-container,
body.pc-landing-page #toc-wrapper,
body.pc-landing-page .toc-container {
  display: none !important;
}

/* Hide breadcrumbs on landing page */
body.pc-landing-page #subheader-sticky-wrapper,
body.pc-landing-page #subheader {
  display: none !important;
}

/* Transparent header on landing page — background appears on scroll via JS */
body.pc-landing-page #header,
:root:not(.light) body.pc-landing-page #header,
:root.dark body.pc-landing-page #header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

body.pc-landing-page.pc-scrolled #header,
:root:not(.light) body.pc-landing-page.pc-scrolled #header,
:root.dark body.pc-landing-page.pc-scrolled #header {
  background: color-mix(in srgb, var(--pc-bg) 70%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom-color: var(--pc-border) !important;
}

/* Taller header on landing page */
body.pc-landing-page #header {
  height: 84px !important;
  min-height: 84px !important;
  display: flex !important;
  align-items: center !important;
}

body.pc-landing-page #header .container,
body.pc-landing-page #header > .container {
  height: 84px !important;
  display: flex !important;
  align-items: center !important;
}

/* Center hamburger in taller landing page header */
body.pc-landing-page .pc-hamburger {
  top: 24px !important;
}

/* Extra vertical padding on landing page content */
body.pc-landing-page #topic-content {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

body.landing-page #content-wrapper,
body.landing-page .content-container,
body.pc-landing-page #content-wrapper,
body.pc-landing-page .content-container {
  padding-left: var(--pc-space-lg) !important;
  padding-right: var(--pc-space-lg) !important;
}

body.landing-page #topic-content,
body.pc-landing-page #topic-content {
  max-width: 100% !important;
}

body.landing-page .row,
body.pc-landing-page .row {
  display: block !important;
}

/* Override Bootstrap col-md-9 on landing page */
body.landing-page .col-md-9,
body.pc-landing-page .col-md-9 {
  width: 100% !important;
}

/* Full-bleed ambient gradient on landing page — three overlapping colored blobs */
body.pc-landing-page::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(100%, 1600px) !important;
  height: 1100px !important;
  background:
    /* Left blob - lavender */
    radial-gradient(ellipse 470px 600px at 30% 42%, rgb(221 180 255 / 19%) 0%, transparent 70%),
    /* Center blob - blue */
    radial-gradient(ellipse 470px 600px at 50% 42%, rgb(163 210 255 / 29%) 0%, transparent 70%),
    /* Right blob - magenta/pink */
    radial-gradient(ellipse 470px 600px at 70% 42%, rgb(255 178 160 / 20%) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Landing page hero banner (injected by JS) */
.pc-landing-hero {
  background: transparent !important;
  padding: clamp(60px, 12vh, 130px) var(--pc-space-2xl) clamp(40px, 8vh, 90px) !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
  border-radius: 0 !important;
}

.pc-landing-hero-title,
.pc-landing-hero h1 {
  font-family: var(--pc-font) !important;
  font-size: 3.375rem !important;  /* 54px per Figma mock */
  font-weight: 600 !important;
  color: var(--pc-heading) !important;
  margin: 0 0 24px !important;
}

.pc-landing-hero-sub,
.pc-landing-hero p {
  font-family: var(--pc-font) !important;
  font-size: 1.125rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 var(--pc-space-lg) !important;
}

.pc-landing-search,
.pc-hero-search {
  max-width: 577px !important;
  margin: 0 auto !important;
  position: relative !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: var(--pc-radius-pill) !important;
}

.pc-hero-search::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--pc-radius-pill) !important;
  padding: 2px !important;
  background: linear-gradient(30deg, #BF7BFF 0%, #8D77FF 26%, #6EAFFF 48%, #37CAFF 51%, #5A8BFF 68%, #2B97EA 100%) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.11) !important;
}

.pc-landing-search input,
.pc-hero-search input {
  width: 100% !important;
  height: 72px !important;
  padding: 0 100px 0 56px !important;
  border: none !important;
  border-radius: var(--pc-radius-pill) !important;
  background: rgba(255, 255, 255, 0.4) !important;
  color: var(--pc-heading) !important;
  font-size: 1.25rem !important;
  font-family: var(--pc-font) !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}

.pc-landing-search input::placeholder,
.pc-hero-search input::placeholder {
  color: var(--pc-heading) !important;
}

/* More vibrant gradient and brighter text on focus */
.pc-hero-search:focus-within::before {
  background: linear-gradient(30deg, #E050FF 0%, #A850FF 26%, #40C8FF 48%, #00E5FF 51%, #3098FF 68%, #00B8FF 100%) !important;
}

.pc-hero-search:focus-within {
  box-shadow: 0 3px 22px rgb(141 137 255 / 30%) !important;
}

.pc-hero-search input:focus::placeholder {
  color: var(--pc-heading) !important;
  opacity: 1 !important;
}

.pc-landing-search svg,
.pc-hero-search svg {
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  stroke: var(--pc-text) !important;
  fill: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.pc-hero-search-btn {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  bottom: 10px !important;
  transform: none !important;
  z-index: 2 !important;
  background: linear-gradient(to bottom, #3274FF 0%, #2266F7 100%) !important;
  color: #F1F5F9 !important;
  border: none !important;
  border-radius: 40px !important;
  padding: 0 24px !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  font-family: var(--pc-font) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pc-hero-search-btn:hover {
  background: linear-gradient(180deg, #2266f7 0%, #1B56DB 100%) !important;
}

/* Card grid — centered with max-width 1200px */
.pc-landing-grid {
  margin-top: 0 !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.pc-landing-heading {
  font-family: var(--pc-font) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--pc-heading) !important;
  margin-bottom: var(--pc-space-lg) !important;
  margin-top: 0 !important;
}

/* Section headings for grouped card grid on home page */
.pc-card-section-heading {
  font-family: var(--pc-font) !important;
  font-size: 1.5rem !important;  /* 24px per Figma */
  font-weight: 400 !important;
  color: var(--pc-heading) !important;
  margin-top: 50px !important;
  margin-bottom: 16px !important;
}

.pc-card-section-heading:first-child {
  margin-top: 0 !important;
}

.pc-card-section-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--pc-space-md) !important;
  margin-bottom: 0 !important;
}

.pc-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--pc-space-md) !important;
}

.pc-card {
  display: flex !important;
  align-items: center !important;
  gap: var(--pc-space-md) !important;
  padding: 20px !important;
  border: 1px solid rgba(222, 222, 222, 0.4) !important;
  border-radius: var(--pc-radius-lg) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  min-height: 72px !important;
  color: var(--pc-text) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.03) !important;
}

.pc-card:hover {
  border-color: var(--pc-border) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-2px) !important;
  color: var(--pc-heading) !important;
  text-decoration: none !important;
}

/* Product icon in card */
.pc-card-icon {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* No border or hover shadow on card icon images */
.pc-card-icon img {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--pc-radius-md) !important;
  display: block !important;
  object-fit: contain !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.pc-card-icon img:hover {
  box-shadow: none !important;
}

/* Vertical card layout — icon on top, title, description */
.pc-card.pc-card-vertical {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding: var(--pc-space-lg) !important;
  min-height: auto !important;
}

.pc-card-icon-circle {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: var(--pc-icon-started-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 11px !important;
}

.pc-card-svg-icon {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  background-color: var(--pc-icon-started-color) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

/* Account management section — purple icons */
.pc-section-account-management .pc-card-icon-circle {
  background: var(--pc-icon-account-bg) !important;
}

.pc-section-account-management .pc-card-svg-icon {
  background-color: var(--pc-icon-account-color) !important;
}

.pc-card-title {
  font-weight: 500 !important;
  font-size: 1rem !important;
  color: var(--pc-heading) !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

.pc-card-desc {
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  color: var(--pc-text-muted) !important;
  line-height: 1.4 !important;
}

/* Products wrapper — single glass card containing product links */
.pc-products-card {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(222, 222, 222, 0.4) !important;
  border-radius: var(--pc-radius-lg) !important;
  padding: 36px !important;
  margin-bottom: var(--pc-space-lg) !important;
  box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.03) !important;
}

.pc-products-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px 0 !important;
  margin: -10px !important;
}

.pc-product-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: var(--pc-radius-md) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  color: var(--pc-text) !important;
  text-decoration: none !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  min-height: auto !important;
}

/* Product link icons — 24px per Figma */
.pc-product-link .pc-card-icon,
.pc-product-link .pc-card-icon img {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

/* Remove any borders and background underlines between product items */
.pc-products-card *,
.pc-products-grid *,
.pc-product-link,
.pc-product-link * {
  border-bottom: none !important;
  border-top: none !important;
  background-image: none !important;
}

.pc-product-link:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--pc-heading) !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* If section-toc IS present on landing page (fallback), style it too */
section.article > .section-toc::before {
  content: "Browse topics" !important;
  display: block !important;
  font-family: var(--pc-font) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--pc-heading) !important;
  margin-bottom: var(--pc-space-lg) !important;
}

/* Dark mode landing hero */
@media (prefers-color-scheme: dark) {
  :root:not(.light) body.pc-landing-page::before {
    background:
      /* Left blob - lavender/purple */
      radial-gradient(ellipse 470px 600px at 30% 42%, rgba(100, 70, 150, 0.22) 0%, transparent 70%),
      /* Center blob - blue */
      radial-gradient(ellipse 470px 600px at 50% 42%, rgba(50, 80, 180, 0.27) 0%, transparent 70%),
      /* Right blob - magenta */
      radial-gradient(ellipse 470px 600px at 70% 42%, rgba(150, 50, 120, 0.12) 0%, transparent 70%) !important;
  }
  :root:not(.light) .pc-landing-hero-title { color: var(--pc-heading) !important; }
  :root:not(.light) .pc-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1) !important;
  }
  :root:not(.light) .pc-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }
  :root:not(.light) .pc-products-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: #222430 !important;
    box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.25) !important;
  }
  :root:not(.light) .pc-product-link {
    color: var(--pc-heading) !important;
  }
  :root:not(.light) .pc-product-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }
  :root:not(.light) .pc-hero-search::before {
    background: linear-gradient(30deg, #653096 0%, #5B3AFF 26%, #4C9CFF 48%, #37CAFF 51%, #3D77FF 68%, #00599E 100%) !important;
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) !important;
  }
  :root:not(.light) .pc-hero-search input {
    background: rgba(146, 146, 146, 0.34) !important;
  }
  :root:not(.light) .pc-hero-search:focus-within::before {
    background: linear-gradient(30deg, #9045C8 0%, #8560FF 26%, #20C0FF 48%, #00E5FF 51%, #1595FF 68%, #0085E0 100%) !important;
  }
  :root:not(.light) .pc-hero-search:focus-within {
    box-shadow: 0 3px 22px rgb(90 50 190 / 50%) !important;
  }
}
:root.dark body.pc-landing-page::before {
  background:
    /* Left blob - lavender/purple */
    radial-gradient(ellipse 470px 600px at 30% 42%, rgba(100, 70, 150, 0.22) 0%, transparent 70%),
    /* Center blob - blue */
    radial-gradient(ellipse 470px 600px at 50% 42%, rgba(50, 80, 180, 0.27) 0%, transparent 70%),
    /* Right blob - magenta */
    radial-gradient(ellipse 470px 600px at 70% 42%, rgba(150, 50, 120, 0.12) 0%, transparent 70%) !important;
}
:root.dark .pc-landing-hero-title { color: var(--pc-heading) !important; }
:root.dark .pc-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1) !important;
}
:root.dark .pc-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
:root.dark .pc-products-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: #222430 !important;
  box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.25) !important;
}
:root.dark .pc-product-link {
  color: var(--pc-heading) !important;
}
:root.dark .pc-product-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
:root.dark .pc-hero-search::before {
  background: linear-gradient(30deg, #653096 0%, #5B3AFF 26%, #4C9CFF 48%, #37CAFF 51%, #3D77FF 68%, #00599E 100%) !important;
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2) !important;
}
:root.dark .pc-hero-search input {
  background: rgba(146, 146, 146, 0.34) !important;
}
:root.dark .pc-hero-search:focus-within::before {
  background: linear-gradient(30deg, #9045C8 0%, #8560FF 26%, #20C0FF 48%, #00E5FF 51%, #1595FF 68%, #0085E0 100%) !important;
}
:root.dark .pc-hero-search:focus-within {
  box-shadow: 0 3px 22px rgb(90 50 190 / 50%) !important;
}


/* === 17. ACCORDIONS (Collapsible Sections) ================= */

.panel.panel-default {
  background: var(--pc-bg) !important;
  border-color: var(--pc-border) !important;
  border-radius: var(--pc-radius-lg) !important;
  box-shadow: none !important;
}

section.accordion {
  margin-bottom: var(--pc-space-sm) !important;
  border: none !important;
  background: transparent !important;
}

section.accordion .panel {
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: var(--pc-bg-card) !important;
  margin-bottom: var(--pc-space-sm) !important;
}

section.accordion .panel + .panel {
  margin-top: 0 !important;
}

section.accordion .panel-heading,
.panel-default > .panel-heading {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.panel-heading a {
  background-image: none !important;
  border-bottom: none !important;
}

.panel-heading .title .title,
.panel-heading div.title > .title,
#topic-content .panel-heading .title .title,
#topic-content .panel-heading div.title > .title {
  margin: 0 !important;
  font-size: 1.2rem !important;
}

section.accordion .panel-heading.active a {
  border-bottom: 1px solid var(--pc-border) !important;
}

section.accordion .panel-heading a {
  display: flex !important;
  align-items: center !important;
  padding: var(--pc-space-md) !important;
  color: var(--pc-heading) !important;
  font-weight: 600 !important;
  background-image: none !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  gap: var(--pc-space-sm) !important;
}

section.accordion .panel-heading a:hover {
  color: var(--pc-heading) !important;
  text-decoration: none !important;
  background: var(--pc-bg-hover) !important;
}

/* Hide permalink/anchor icons inside accordion headers */
section.accordion .panel-heading .header-link,
section.accordion .panel-heading a.header-link {
  display: none !important;
}


section.accordion .panel-body {
  padding: var(--pc-space-lg) !important;
  border-top: none !important;
}

/* Hide ALL native Paligo accordion icons/indicators */
section.accordion .accordion-icon,
section.accordion .glyphicon,
section.accordion .panel-heading .glyphicon,
section.accordion .panel-heading .caret,
section.accordion .panel-heading [class*="icon"],
.panel-heading .caret,
.panel-heading [class*="icon"] {
  display: none !important;
}

/* Hide ALL .title::before (fixes double arrow from nested div.title > h4.title) */
section.accordion .panel-heading a .title::before,
.panel-heading a .title::before {
  content: none !important;
}

/* Re-add arrow ONLY on heading elements — caret-right SVG via mask */
section.accordion .panel-heading a h4.title::before,
section.accordion .panel-heading a h3.title::before,
section.accordion .panel-heading a h2.title::before,
.panel-heading a h4.title::before,
.panel-heading a h3.title::before,
.panel-heading a h2.title::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border: none !important;
  background-color: var(--pc-text-muted) !important;
  -webkit-mask-image: url("images/caret-right.svg") !important;
  mask-image: url("images/caret-right.svg") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  margin-right: var(--pc-space-sm) !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

section.accordion .panel-heading.active a h4.title::before,
section.accordion .panel-heading.active a h3.title::before,
section.accordion .panel-heading.active a h2.title::before,
.panel-heading.active a h4.title::before,
.panel-heading.active a h3.title::before,
.panel-heading.active a h2.title::before {
  transform: rotate(90deg) !important;
}

/* Sidebar panel — replace icon on .sidebar-title with caret SVG */
.panel-heading .sidebar-title::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border: none !important;
  background-color: var(--pc-text-muted) !important;
  -webkit-mask-image: url("images/caret-right.svg") !important;
  mask-image: url("images/caret-right.svg") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  margin-right: var(--pc-space-sm) !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  font-size: 0 !important;
}

.panel-heading.active .sidebar-title::before {
  transform: rotate(90deg) !important;
}

/* Remove hover states from non-clickable content inside accordions */
section.accordion .panel-body p,
section.accordion .panel-body li,
section.accordion .panel-body div:not(a) {
  cursor: default !important;
}

/* Hide anchor links on hover */
section.accordion .anchor-link,
section.accordion .headerlink,
section.accordion a.anchor,
.section > .titlepage a.anchor,
a.anchor-link,
.anchor-link {
  display: none !important;
}

/* Dark mode accordion overrides */
@media (prefers-color-scheme: dark) {
  :root:not(.light) section.accordion .panel { border-color: var(--pc-border) !important; }
  :root:not(.light) section.accordion .panel-heading { background: transparent !important; }
  :root:not(.light) section.accordion .panel-heading a { color: var(--pc-heading) !important; }
  :root:not(.light) section.accordion .panel-body { background: var(--pc-bg-card) !important; }
}
:root.dark section.accordion .panel { border-color: var(--pc-border) !important; }
:root.dark section.accordion .panel-heading { background: transparent !important; border-bottom: none !important; }
:root.dark section.accordion .panel-heading a { color: var(--pc-heading) !important; }
:root.dark section.accordion .panel-body { background: var(--pc-bg-card) !important; }


/* === 18. SIDEBAR ELEMENTS (Web/Mobile content) ============= */

/* Parent sidebar containing web + mobile children */
div.sidebar:has(> div.sidebar) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: var(--pc-space-lg) 0 !important;
}

/* Individual web/mobile sidebar panels */
div.sidebar > div.sidebar {
  background: var(--pc-bg-subtle) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-lg) !important;
  padding: var(--pc-space-lg) !important;
  margin-bottom: var(--pc-space-md) !important;
}

/* Tab interface styling (generated by JS) */
.pc-tab-container,
.pc-tabs {
  margin: var(--pc-space-lg) 0 !important;
}

.pc-tab-bar {
  display: flex !important;
  gap: 4px !important;
  border: none !important;
  border-bottom: 1px solid var(--pc-bg) !important;
  margin-bottom: 0 !important;
  background: var(--pc-bg-subtle) !important;
  border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0 !important;
  padding: 10px !important;
}

.pc-tab-button,
.pc-tab-btn {
  padding: 6px var(--pc-space-md) !important;
  font-family: var(--pc-font) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--pc-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  border-radius: var(--pc-radius-pill) !important;
  position: relative !important;
  z-index: 1 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.pc-tab-button:hover,
.pc-tab-btn:hover {
  color: var(--pc-heading) !important;
  background: var(--pc-bg-muted) !important;
}

.pc-tab-button.active,
.pc-tab-btn.active {
  color: #fff !important;
  background: transparent !important;
  border-bottom: none !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Sliding pill indicator */
.pc-tab-indicator {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  border-radius: var(--pc-radius-pill) !important;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pc-accent) 85%, #fff), var(--pc-accent)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: transform 0.3s ease, width 0.3s ease !important;
}

.pc-tab-panel {
  display: none !important;
  padding: var(--pc-space-lg) !important;
  background: #f7f8f8 !important;
  border: none !important;
  border-radius: 0 0 var(--pc-radius-lg) var(--pc-radius-lg) !important;
}

.pc-tab-panel.active {
  display: block !important;
}

/* Remove borders and margin from image-viewport tables */
#topic-content .mediaobject table.image-viewport {
  border: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#topic-content .mediaobject table.image-viewport td,
#topic-content .mediaobject table.image-viewport th,
:root.dark #topic-content .mediaobject table.image-viewport td,
:root.dark #topic-content .mediaobject table.image-viewport th,
:root:not(.light) #topic-content .mediaobject table.image-viewport td,
:root:not(.light) #topic-content .mediaobject table.image-viewport th {
  border: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  padding: 0 !important;
}

#topic-content .mediaobject table.image-viewport td img {
  margin: 0 auto var(--pc-space-xl) auto !important;
}

#topic-content .pc-tab-panel .mediaobject img:not(.wistia_still img):not(.pc-card-icon img) {
  margin: 0 auto var(--pc-space-xl) auto !important;
}

/* Standalone sidebar (video containers, etc.) */
div.sidebar:not(:has(> div.sidebar)):not(div.sidebar > div.sidebar) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: var(--pc-space-md) 0 !important;
}

/* Panels inside standalone sidebars — restore accordion styling */
div.sidebar:not(:has(> div.sidebar)):not(div.sidebar > div.sidebar) .panel.panel-default {
  background: var(--pc-bg) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-lg) !important;
}

div.sidebar:not(:has(> div.sidebar)):not(div.sidebar > div.sidebar) .panel-heading {
  padding: var(--pc-space-md) var(--pc-space-lg) !important;
}

/* Dark mode tab overrides */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .pc-tab-bar { background: var(--pc-bg-subtle) !important; border-bottom: none !important; }
  :root:not(.light) .pc-tab-btn { color: var(--pc-text-muted) !important; }
  :root:not(.light) .pc-tab-btn:hover { color: var(--pc-heading) !important; }
  :root:not(.light) .pc-tab-btn.active { color: #fff !important; background: transparent !important; border-bottom: none !important; }
  :root:not(.light) .pc-tab-panel { background: var(--pc-bg-card) !important; border: none !important; }
}
:root.dark .pc-tab-bar { background: var(--pc-bg-subtle) !important; border-bottom: none !important; }
:root.dark .pc-tab-btn { color: var(--pc-text-muted) !important; }
:root.dark .pc-tab-btn:hover { color: var(--pc-heading) !important; }
:root.dark .pc-tab-btn.active { color: #fff !important; background: transparent !important; border-bottom: none !important; }
:root.dark .pc-tab-panel { background: var(--pc-bg-card) !important; border: none !important; }


/* === 19. VIDEO EMBEDS ====================================== */

.video-container,
.wistia,
.videoobject {
  margin: var(--pc-space-lg) auto !important;
  border-radius: var(--pc-radius-lg) !important;
}

.video-container iframe,
.videoobject iframe {
  border-radius: var(--pc-radius-lg) !important;
  border: 1px solid var(--pc-border) !important;
}

/* Border-radius clipping on the Wistia responsive wrapper */
.wistia_responsive_padding {
  border-radius: var(--pc-radius-lg) !important;
  overflow: hidden !important;
}

.wistia_embed,
.wistia_responsive_wrapper {
  background: var(--pc-bg-muted) !important;
}

/* Fix: Wistia poster image inherits .mediaobject img border/margin */
#topic-content .mediaobject .videoobject .wistia_responsive_padding img,
#topic-content .wistia_embed img,
#topic-content .wistia_responsive_wrapper img {
  object-fit: cover !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
  cursor: pointer !important;
  height: 100% !important;
}


/* === 20. LANGUAGE SELECTOR ================================= */

body.language-selector #content-wrapper,
body .language-selector {
  text-align: center !important;
  padding-top: var(--pc-space-2xl) !important;
}


/* === 21. BOOTSTRAP OVERRIDES =============================== */

/* Fix clearfix pseudo-elements that break flex layouts */
.row::before,
.row::after {
  content: none !important;
}

.row {
  display: flex !important;
}

.panel, .well, .card {
  box-shadow: none !important;
}

.btn-default, .btn-primary {
  font-family: var(--pc-font) !important;
  border-radius: var(--pc-radius-md) !important;
}

.btn-primary {
  background-color: var(--pc-accent) !important;
  border-color: var(--pc-accent) !important;
}
.btn-primary:hover {
  background-color: var(--pc-accent-hover) !important;
  border-color: var(--pc-accent-hover) !important;
}

/* Glyphicon sizing */
.glyphicon {
  font-size: 0 !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Replace glyphicon arrows with Phosphor icons */
.glyphicon-circle-arrow-right::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background: currentColor !important;
  -webkit-mask: url("images/arrow-right.svg") no-repeat center / contain !important;
  mask: url("images/arrow-right.svg") no-repeat center / contain !important;
}

.glyphicon-circle-arrow-left::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background: currentColor !important;
  -webkit-mask: url("images/arrow-left.svg") no-repeat center / contain !important;
  mask: url("images/arrow-left.svg") no-repeat center / contain !important;
}


/* === 22. RESPONSIVE ======================================== */

/* Below 1400px: hide right sidebar (page TOC), let content fill the space */
@media (max-width: 1400px) {
  .pc-page-toc {
    display: none !important;
  }

  #content-wrapper,
  .content-container {
    flex: 1 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #topic-content {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Below 1200px: collapse search trigger to circular icon to prevent nav collision */
@media (max-width: 1200px) {
  .pc-search-trigger-text,
  .pc-search-trigger-kbd {
    display: none !important;
  }

  .pc-search-trigger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }
}

/* Hamburger menu button — hidden on desktop */
.pc-hamburger {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  /* Fixed position in header area — independent of DOM placement */
  position: fixed !important;
  top: 14px !important;
  left: var(--pc-space-md) !important;
  z-index: 101 !important;
}

.pc-hamburger span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  background: var(--pc-heading) !important;
  border-radius: 1px !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.pc-hamburger span::before,
.pc-hamburger span::after {
  content: "" !important;
  position: absolute !important;
  width: 20px !important;
  height: 2px !important;
  background: var(--pc-heading) !important;
  border-radius: 1px !important;
  left: 0 !important;
  transition: all 0.2s ease !important;
}

.pc-hamburger span::before { top: -6px !important; }
.pc-hamburger span::after { top: 6px !important; }

/* Animate to X when open */
.pc-hamburger.open span { background: transparent !important; }
.pc-hamburger.open span::before { top: 0 !important; transform: rotate(45deg) !important; }
.pc-hamburger.open span::after { top: 0 !important; transform: rotate(-45deg) !important; }

/* Mobile sidebar drawer overlay */
.pc-sidebar-backdrop {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 98 !important;
}

.pc-sidebar-backdrop.active {
  display: block !important;
}

/* Below 1024px: collapse left sidebar into hamburger drawer */
@media (max-width: 1024px) {
  .pc-hamburger {
    display: flex !important;
  }

  #toc-wrapper,
  .toc-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 300px !important;
    min-width: 300px !important;
    height: 100vh !important;
    background: var(--pc-bg) !important;
    border-right: 1px solid var(--pc-border) !important;
    border-bottom: none !important;
    padding: 80px 24px 24px 24px !important;
    margin-bottom: 0 !important;
    z-index: 99 !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    align-self: auto !important;
  }

  #toc-wrapper.open,
  .toc-container.open {
    transform: translateX(0) !important;
  }

  #toc-placeholder {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #toc-standalone-placeholder {
    height: auto !important;
    overflow: visible !important;
  }

  #content-wrapper,
  .content-container {
    padding: 16px 24px !important;
    padding-bottom: var(--pc-space-3xl) !important;
  }

  .row {
    flex-direction: column !important;
  }

  /* Hide external nav on tablet and below */
  #pc-external-nav {
    display: none !important;
  }

  /* Force correct backgrounds/borders at all small breakpoints */
  body,
  #page {
    background: var(--pc-bg) !important;
    color: var(--pc-text) !important;
  }

  #header {
    display: block !important;
    height: 64px !important;
    min-height: 64px !important;
    overflow: visible !important;
    background: color-mix(in srgb, var(--pc-bg) 70%, transparent) !important;
    border-bottom: 1px solid var(--pc-border) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
  }

  #header .container {
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
    background: transparent !important;
  }

  #subheader,
  #subheader-sticky-wrapper {
    display: none !important;
    visibility: hidden !important;
  }

  #main-content {
    background: var(--pc-bg) !important;
  }

  #main-content > .container,
  .row,
  .content-container,
  #content-wrapper {
    background: transparent !important;
  }

  #logotype-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-right: auto !important;
    position: static !important;
    padding-left: 44px !important;
  }

  /* Ensure logotype pseudo-elements display at narrow viewports */
  #logotype-container::before {
    content: "" !important;
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 42 42' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Crect x='5.163' y='7.023' width='30.95' height='27.955' fill='%23fff'/%3E%3Cpath d='M27.696 16.287a.148.148 0 0 1 .257.192v6.334a.203.203 0 0 1-.143.192l-6.542 1.933a.407.407 0 0 1-.568-.001l-6.511-1.933a.203.203 0 0 1-.143-.191v-6.335a.148.148 0 0 1 .257-.191l5.49 1.63a1.63 1.63 0 0 0 2.412 0l5.49-1.63Z' fill='%232266F7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.583.345a6.095 6.095 0 0 0-5.166 0L5.192 3.942C2.13 4.775 0 7.596 0 10.82v20.361c0 3.224 2.13 6.045 5.192 6.878l13.225 3.596a6.094 6.094 0 0 0 5.166 0l13.225-3.596C39.87 37.225 42 34.404 42 31.18V10.82c0-3.224-2.13-6.045-5.192-6.878L23.583.345ZM14.304 27.123a.148.148 0 0 0-.257.192v4.377c0 .427-.405.738-.817.628l-2.747-.73A.614.614 0 0 1 10 30.962V14.45c0-1.751 1.756-3.002 3.491-2.488l7.21 2.14a.407.407 0 0 1 .567.001l7.24-2.14c1.735-.515 3.491.736 3.491 2.488v9.474c0 1.143-.772 2.152-1.905 2.488l-7.889 2.342a1.63 1.63 0 0 1-2.411 0l-5.49-1.63Z' fill='%232266F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h42v42H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain !important;
    flex-shrink: 0 !important;
  }

  #logotype-container::after {
    content: "Planning Center Help" !important;
    display: block !important;
    font-family: var(--pc-font) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--pc-heading) !important;
    white-space: nowrap !important;
  }

  #pagetools-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: auto !important;
    position: static !important;
    float: none !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    padding: 0 !important;
  }

  #pagetools-container {
    background-color: transparent !important;
  }

  /* Preserve icon backgrounds that use mask technique */
  .pc-search-icon,
  .pc-theme-icon {
    background: var(--pc-text) !important;
  }

  #page-tools {
    display: flex !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
  }

  .pc-search-trigger {
    display: flex !important;
    background: var(--pc-bg-subtle) !important;
  }

  .pc-dark-mode-wrapper,
  .pc-dark-mode-toggle,
  #header .pc-dark-mode-wrapper,
  #header .pc-dark-mode-toggle,
  #pagetools-container .pc-dark-mode-wrapper,
  #pagetools-container .pc-dark-mode-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .pc-search-trigger,
  #header .pc-search-trigger,
  #pagetools-container .pc-search-trigger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--pc-bg-subtle) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }

  .pc-search-trigger-text,
  .pc-search-trigger-kbd {
    display: none !important;
  }

  /* Override Bootstrap's navbar collapse */
  #header .navbar-collapse,
  #header .collapse,
  #header .navbar-collapse.collapse,
  #header .collapse:not(.in) {
    display: flex !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    visibility: visible !important;
  }

  /* Hide Bootstrap's default toggle */
  #header .navbar-toggle {
    display: none !important;
  }

  #header .container,
  #header .collapse,
  #header .navbar-collapse,
  #pagetools-container,
  #page-tools,
  #page-tools > li,
  .row,
  .content-container,
  #content-wrapper {
    background-color: transparent !important;
  }

  /* Force all borders to use pc-border */
  #header {
    border-color: var(--pc-border) !important;
  }

  #subheader,
  #subheader-sticky-wrapper {
    border-color: var(--pc-border) !important;
  }
}

@media (max-width: 768px) {
  h1, h1.title { font-size: 1.75rem !important; }   /* 28px */
  h2, h2.title { font-size: 1.25rem !important; }   /* 20px */
  h3, h3.title { font-size: 1.125rem !important; }   /* 18px */

  /* Hide keyboard shortcut button on mobile */
  .pc-hero-search-btn {
    display: none !important;
  }

  #main-content > .container {
    padding: 0 var(--pc-space-md) !important;
  }

  #topic-content {
    max-width: 100% !important;
  }

  .section-toc > ul {
    grid-template-columns: 1fr !important;
  }

  #header .container {
    padding: 0 var(--pc-space-lg) !important;
  }

  /* Search stays circular at 768px (inherited from 1024px) */

  .pc-card-grid,
  .pc-card-section-grid {
    grid-template-columns: 1fr !important;
  }

  .pc-landing-hero {
    padding: 90px 0 var(--pc-space-sm) !important;
  }

  .pc-landing-hero-title,
  .pc-landing-hero h1 {
    display: none !important;
  }

  .pc-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* === 23. COOKIE CONSENT ==================================== */

.cc-window.cc-floating,
.cc-banner.cc-bottom {
  background-color: #2366f7 !important;
  color: #fff !important;
}

.cc-window.cc-floating {
  max-width: 100% !important;
  bottom: 1em !important;
  left: 1em !important;
  right: 1em !important;
  border-radius: var(--pc-radius-md) !important;
}

/* Banner style - full width bar at bottom */
.cc-banner.cc-bottom {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.cc-banner.cc-bottom.cc-invisible {
  display: none !important;
}

/* Hide library's revoke button — we replace it with our own */
.cc-revoke.cc-bottom {
  display: none !important;
  visibility: hidden !important;
}

.cc-banner .cc-message {
  flex: 1 !important;
  text-align: left !important;
}

.cc-banner .cc-compliance {
  flex-shrink: 0 !important;
}

/* Cookie consent links */
.cc-window a,
.cc-banner a {
  color: #fff !important;
  text-decoration: underline !important;
}

.cc-window a:hover,
.cc-banner a:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* No underline on buttons */
.cc-window a.cc-btn,
.cc-banner a.cc-btn,
a.cc-btn {
  text-decoration: none !important;
}

.cc-window a.cc-btn:hover,
.cc-banner a.cc-btn:hover,
a.cc-btn:hover {
  text-decoration: none !important;
}

/* Cookie consent button - white outline on blue bg */
.cc-btn {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 40px !important;
  font-family: var(--pc-font) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.cc-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  text-decoration: none !important;
}


/* === 24. PRINT ============================================= */

@media print {
  #header,
  #subheader-sticky-wrapper,
  #toc-wrapper,
  #header-navigation-prev,
  #header-navigation-next,
  .aa-DetachedSearchButton,
  #page-tools,
  .pc-page-toc,
  .pc-lightbox-overlay,
  .pc-search-trigger,
  .pc-search-modal,
  .pc-dark-mode-wrapper,
  .pc-dark-mode-toggle {
    display: none !important;
  }

  #content-wrapper {
    padding: 0 !important;
    width: 100% !important;
  }

  #topic-content {
    max-width: 100% !important;
  }

  body {
    font-size: 12pt !important;
    background: #FFFFFF !important;
    color: #334155 !important;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #0F172A !important;
  }

  a { color: #334155 !important; }
  a[href]::after { content: " (" attr(href) ")" !important; font-size: 0.8em; }

  pre {
    background: #F1F5F9 !important;
    color: #0F172A !important;
    box-shadow: none !important;
    border: 1px solid #E2E8F0 !important;
  }

  /* Force light tokens for print */
  :root, :root.dark {
    --pc-bg: #FFFFFF;
    --pc-bg-card: #FFFFFF;
    --pc-bg-subtle: #F1F5F9;
    --pc-bg-muted: #E2E8F0;
    --pc-text: #334155;
    --pc-text-muted: #64748B;
    --pc-heading: #0F172A;
    --pc-border: #EBEAEF;
    --pc-border-light: #F1F5F9;
    --pc-accent: #2266F7;
    --pc-accent-light: #EBF0FE;
    --pc-accent-hover: #1B56DB;
    --pc-accent-muted: #C7D7FE;
  }
}


/* === 24. PAGE-LEVEL TOC (In this article) ================== */

.pc-page-toc {
  box-sizing: border-box !important;
  width: 224px !important;
  min-width: 224px !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  position: sticky !important;
  top: var(--pc-sidebar-top) !important;
  max-height: calc(100vh - var(--pc-sidebar-top)) !important;
  overflow-y: auto !important;
  z-index: 50 !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--pc-border) transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: var(--pc-space-md) 0 var(--pc-space-md) var(--pc-space-lg) !important;
  box-shadow: none !important;
}

.pc-page-toc-title,
.pc-page-toc-heading {
  font-family: var(--pc-font) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--pc-heading) !important;
  margin-bottom: var(--pc-space-sm) !important;
  padding-left: 0 !important;
}

.pc-page-toc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pc-page-toc-list li {
  margin: 0 !important;
}

.pc-page-toc-list a {
  display: block !important;
  padding: 4px 0 !important;
  color: var(--pc-text-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  transition: color 0.15s ease !important;
  line-height: 1.4 !important;
}

/* TOC depth indentation — 0 = top-level (no indent), 1+ = children */
.pc-page-toc-list a[data-heading-depth="0"] {
  padding-left: 0 !important;
}

.pc-page-toc-list a[data-heading-depth="1"] {
  padding-left: 12px !important;
}

.pc-page-toc-list a[data-heading-depth="2"] {
  padding-left: 24px !important;
}

.pc-page-toc-list a[data-heading-depth="3"] {
  padding-left: 36px !important;
}

.pc-page-toc-list a:hover {
  color: var(--pc-heading) !important;
  text-decoration: none !important;
}

.pc-page-toc-list a.active {
  color: var(--pc-accent) !important;
  font-weight: 600 !important;
}

/* Mobile inline TOC — collapsible "In this article" disclosure widget */
.pc-page-toc-inline {
  display: none !important;
  clear: both !important;
  margin-top: var(--pc-space-lg) !important;
  margin-bottom: var(--pc-space-lg) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-lg) !important;
  background: var(--pc-bg-subtle) !important;
  overflow: hidden !important;
}

@media (max-width: 1400px) {
  .pc-page-toc-inline {
    display: block !important;
  }
}

.pc-page-toc-inline-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: var(--pc-space-md) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--pc-font) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.01px !important;
  color: var(--pc-heading) !important;
  transition: background 0.15s ease !important;
}

.pc-page-toc-inline.open > .pc-page-toc-inline-toggle {
  border-bottom: 1px solid var(--pc-border) !important;
}

.pc-page-toc-inline-toggle:hover {
  background: var(--pc-bg-muted) !important;
}

.pc-page-toc-inline-toggle::after {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  border: none !important;
  background-color: var(--pc-text-muted) !important;
  -webkit-mask-image: url("images/caret-circle-down.svg") !important;
  mask-image: url("images/caret-circle-down.svg") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  transition: transform 0.15s ease !important;
  flex-shrink: 0 !important;
}

.pc-page-toc-inline.open .pc-page-toc-inline-toggle::after {
  transform: rotate(180deg) !important;
}

.pc-page-toc-inline-list {
  display: none !important;
  list-style: none !important;
  margin: var(--pc-space-md) 0 0 0 !important;
  padding: 0 var(--pc-space-md) var(--pc-space-md) !important;
}

.pc-page-toc-inline.open .pc-page-toc-inline-list {
  display: block !important;
  max-height: 40vh !important;
  overflow-y: auto !important;
}

/* Tablet: two-column layout (600-1400px) */
@media (min-width: 600px) and (max-width: 1400px) {
  .pc-page-toc-inline-list {
    columns: 2 !important;
    column-gap: var(--pc-space-lg) !important;
  }
}

/* Phone: single column (below 600px) */
@media (max-width: 599px) {
  .pc-page-toc-inline-list {
    columns: 1 !important;
  }
}

.pc-page-toc-inline-list li {
  margin: 0 !important;
  break-inside: avoid !important;
}

#topic-content .pc-page-toc-inline .pc-page-toc-inline-list a {
  display: block !important;
  padding: 4px 0 !important;
  color: var(--pc-heading) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  line-height: 1.5 !important;
  background: none !important;
  background-image: none !important;
}

/* Inline TOC depth indentation */
.pc-page-toc-inline-list a[data-heading-depth="0"] {
  padding-left: 0 !important;
}

.pc-page-toc-inline-list a[data-heading-depth="1"] {
  padding-left: 12px !important;
}

.pc-page-toc-inline-list a[data-heading-depth="2"] {
  padding-left: 24px !important;
}

.pc-page-toc-inline-list a[data-heading-depth="3"] {
  padding-left: 36px !important;
}

#topic-content .pc-page-toc-inline .pc-page-toc-inline-list a:hover {
  color: var(--pc-accent) !important;
  text-decoration: none !important;
  background: none !important;
  background-image: none !important;
}

/* Dark mode page TOC */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .pc-page-toc { background: transparent !important; border: none !important; }
  :root:not(.light) .pc-page-toc a { color: var(--pc-text-muted) !important; }
  :root:not(.light) .pc-page-toc a:hover,
  :root:not(.light) .pc-page-toc a.active { color: var(--pc-accent) !important; }
  :root:not(.light) .pc-page-toc-inline { background: var(--pc-bg-card) !important; border-color: var(--pc-border) !important; }
  :root:not(.light) .pc-page-toc-inline-toggle { color: var(--pc-heading) !important; }
  :root:not(.light) .pc-page-toc-inline a { color: var(--pc-text-muted) !important; }
  :root:not(.light) .pc-page-toc-inline a:hover { color: var(--pc-heading) !important; }
}
:root.dark .pc-page-toc { background: transparent !important; border: none !important; }
:root.dark .pc-page-toc a { color: var(--pc-text-muted) !important; }
:root.dark .pc-page-toc a:hover,
:root.dark .pc-page-toc a.active { color: var(--pc-accent) !important; }
:root.dark .pc-page-toc-inline { background: var(--pc-bg-card) !important; border-color: var(--pc-border) !important; }
:root.dark .pc-page-toc-inline-toggle { color: var(--pc-heading) !important; }
:root.dark .pc-page-toc-inline a { color: var(--pc-text-muted) !important; }
:root.dark .pc-page-toc-inline a:hover { color: var(--pc-heading) !important; }


/* === 25. LIGHTBOX ========================================== */

.pc-lightbox-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.85) !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: zoom-out !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  padding: var(--pc-space-2xl) !important;
}

.pc-lightbox-overlay.visible {
  display: flex !important;
  opacity: 1 !important;
}

.pc-lightbox-overlay img {
  max-width: 90vw !important;
  max-height: 90vh !important;
  border-radius: var(--pc-radius-xl) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
  cursor: default !important;
  margin: 0 !important;
}

.pc-lightbox-close {
  position: absolute !important;
  top: var(--pc-space-lg) !important;
  right: var(--pc-space-lg) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
}

.pc-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}


/* === 26. UTILITY / CLEANUP ================================= */

/* Smooth scrolling */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 5rem !important;
}

/* Selection color */
::selection {
  background: var(--pc-accent-muted) !important;
  color: var(--pc-heading) !important;
}

/* Remove hover state from non-clickable elements globally */
#topic-content p:hover,
#topic-content li:not(:has(a)):hover,
#topic-content div.sidebar:hover,
.faq-answer:hover {
  background: transparent !important;
  cursor: default !important;
}

/* Hide copyright/date/abstract on landing page */
section.article > region,
section.article > .titlepage .abstract,
section.article > .titlepage .copyright,
section.article > .titlepage .date {
  display: none !important;
}


/* === 27. DARK MODE — COMPONENT OVERRIDES =================== */

/* Header */
@media (prefers-color-scheme: dark) {
  :root:not(.light) #header { background: color-mix(in srgb, var(--pc-bg) 70%, transparent) !important; }
  :root:not(.light) #subheader { background: color-mix(in srgb, var(--pc-bg) 70%, transparent) !important; }
  :root:not(.light) #subheader-sticky-wrapper { background: transparent !important; }
  :root:not(.light) .pc-theme-dropdown { box-shadow: 0 3px 12px rgba(10, 12, 16, 0.9) !important; }
  :root:not(.light) .aa-input-search,
  :root:not(.light) #aa-search-input { background: var(--pc-bg-subtle) !important; color: var(--pc-text) !important; border-color: var(--pc-border) !important; }
  :root:not(.light) #toc-wrapper,
  :root:not(.light) .toc-container { background: transparent !important; border-right-color: var(--pc-border) !important; }
  :root:not(.light) .breadcrumb a { color: var(--pc-text-muted) !important; }
  :root:not(.light) .breadcrumb a:hover { color: var(--pc-heading) !important; }
  :root:not(.light) .pc-hero-search input { color: var(--pc-heading) !important; }
  :root:not(.light) .pc-hero-search input::placeholder { color: var(--pc-heading) !important; }
  :root:not(.light) .wistia_responsive_padding { border-color: var(--pc-border) !important; }
  /* Scrollbars */
  :root:not(.light) ::-webkit-scrollbar-track { background: var(--pc-bg) !important; }
  :root:not(.light) ::-webkit-scrollbar-thumb { background: var(--pc-border) !important; }
  :root:not(.light) ::-webkit-scrollbar-thumb:hover { background: #4B5563 !important; }
  /* Prev/Next */
  :root:not(.light) #header-navigation-prev a,
  :root:not(.light) #header-navigation-next a { background: var(--pc-bg-card) !important; color: var(--pc-text) !important; border-color: var(--pc-border) !important; }
  :root:not(.light) #header-navigation-prev a:hover,
  :root:not(.light) #header-navigation-next a:hover { border-color: var(--pc-border) !important; color: var(--pc-heading) !important; }
}

:root.dark #header { background: color-mix(in srgb, var(--pc-bg) 70%, transparent) !important; }
:root.dark #subheader { background: color-mix(in srgb, var(--pc-bg) 70%, transparent) !important; }
:root.dark #subheader-sticky-wrapper { background: transparent !important; }
:root.dark .pc-theme-dropdown { box-shadow: 0 3px 12px rgba(10, 12, 16, 0.9) !important; }
:root.dark .aa-input-search,
:root.dark #aa-search-input { background: var(--pc-bg-subtle) !important; color: var(--pc-text) !important; border-color: var(--pc-border) !important; }
:root.dark #toc-wrapper,
:root.dark .toc-container { background: transparent !important; border-right-color: var(--pc-border) !important; }
:root.dark .breadcrumb a { color: var(--pc-text-muted) !important; }
:root.dark .breadcrumb a:hover { color: var(--pc-heading) !important; }
:root.dark .pc-hero-search input { color: var(--pc-heading) !important; }
:root.dark .pc-hero-search input::placeholder { color: var(--pc-heading) !important; }
:root.dark .wistia_responsive_padding { border-color: var(--pc-border) !important; }
/* Scrollbars */
:root.dark ::-webkit-scrollbar-track { background: var(--pc-bg) !important; }
:root.dark ::-webkit-scrollbar-thumb { background: var(--pc-border) !important; }
:root.dark ::-webkit-scrollbar-thumb:hover { background: #4B5563 !important; }
/* Prev/Next */
:root.dark #header-navigation-prev a,
:root.dark #header-navigation-next a { background: var(--pc-bg-card) !important; color: var(--pc-text) !important; border-color: var(--pc-border) !important; }
:root.dark #header-navigation-prev a:hover,
:root.dark #header-navigation-next a:hover { border-color: var(--pc-border) !important; color: var(--pc-heading) !important; }


/* === 28. DARK MODE — TOGGLE + DROPDOWN ===================== */

.pc-dark-mode-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-right: var(--pc-space-sm) !important;
}

/* Circular trigger button */
.pc-dark-mode-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--pc-border) !important;
  background: var(--pc-bg-subtle) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.pc-dark-mode-toggle:hover,
.pc-dark-mode-toggle.open {
  background: var(--pc-bg-card) !important;
  border-color: rgb(0 0 0 / 0.15) !important;
}

:root.dark .pc-dark-mode-toggle:hover,
:root.dark .pc-dark-mode-toggle.open,
:root:not(.light) .pc-dark-mode-toggle:hover,
:root:not(.light) .pc-dark-mode-toggle.open {
  border-color: rgb(255 255 255 / 0.1) !important;
}


/* Icon span — mask technique so it inherits color */
.pc-theme-icon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  background: var(--pc-text) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

/* Dropdown panel */
.pc-theme-dropdown {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  background: var(--pc-bg) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: var(--pc-radius-lg) !important;
  padding: 6px !important;
  min-width: 140px !important;
  box-shadow: 0 3px 12px rgba(10, 12, 16, 0.09) !important;
  z-index: 9999 !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.pc-theme-dropdown.active {
  display: flex !important;
}

/* Each option row */
.pc-theme-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border: none !important;
  border-radius: var(--pc-radius-md) !important;
  background: transparent !important;
  color: var(--pc-text-muted) !important;
  font-size: 0.875rem !important;
  font-family: inherit !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.pc-theme-option:hover {
  background: var(--pc-bg-subtle) !important;
  color: var(--pc-heading) !important;
}

.pc-theme-option.active {
  color: var(--pc-accent) !important;
  font-weight: 500 !important;
}

/* Option icon — 16px, muted by default, full color when active */
.pc-theme-option .pc-theme-icon {
  width: 16px !important;
  height: 16px !important;
  background: var(--pc-text-muted) !important;
}

.pc-theme-option:hover .pc-theme-icon {
  background: var(--pc-heading) !important;
}

.pc-theme-option.active .pc-theme-icon {
  background: var(--pc-accent) !important;
}


/* === 29. WISTIA PiP — PICTURE IN PICTURE =================== */

/* Mini player wrapper */
.wistia-pip-active {
  position: fixed !important;
  bottom: var(--pc-space-lg) !important;
  right: var(--pc-space-lg) !important;
  width: 320px !important;
  height: 180px !important;
  padding: 0 !important;
  z-index: 9998 !important;
  border-radius: var(--pc-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--pc-shadow-lg) !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.wistia-pip-active .wistia_responsive_wrapper {
  position: relative !important;
  width: var(--pip-orig-w) !important;
  height: var(--pip-orig-h) !important;
  transform: scale(var(--pip-scale, 1)) !important;
  transform-origin: top left !important;
}

/* Close button */
.wistia-pip-close {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  z-index: 10 !important;
  padding: 0 !important;
  transition: background 0.2s ease !important;
}

.wistia-pip-close:hover {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* "Back to video" expand button */
.wistia-pip-expand {
  position: absolute !important;
  bottom: 6px !important;
  left: 6px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-radius: var(--pc-radius-sm) !important;
  z-index: 10 !important;
  transition: background 0.2s ease !important;
}

.wistia-pip-expand:hover {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* Dashed placeholder in original position */
.wistia-pip-placeholder {
  border: 2px dashed var(--pc-border) !important;
  border-radius: var(--pc-radius-lg) !important;
  background: var(--pc-bg-subtle) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--pc-text-muted) !important;
  font-size: 0.875rem !important;
  min-height: 200px !important;
}

/* Responsive: smaller PiP on small screens */
@media (max-width: 600px) {
  .wistia-pip-active {
    width: 200px !important;
    height: 113px !important;
    bottom: var(--pc-space-md) !important;
    right: var(--pc-space-md) !important;
  }

  .wistia-pip-close {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
    top: 4px !important;
    right: 4px !important;
  }

  .wistia-pip-expand {
    font-size: 10px !important;
    padding: 3px 6px !important;
    bottom: 4px !important;
    left: 4px !important;
  }
}


/* === ALGOLIA SEARCH RESULTS ================================= */
/* Styles for rich results inside Shane's .pc-search-modal-body */

/* Hide Paligo's built-in search input */
.page-tools-search {
  display: none !important;
}

/* --- Individual result row ---------------------------------- */
.pco-search-result {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
  color: var(--pc-text) !important;
  border-radius: var(--pc-radius-md) !important;
  transition: background 0.1s ease !important;
  cursor: pointer !important;
}

.pco-search-result:hover,
.pco-search-result.pco-search-active {
  background: var(--pc-bg-subtle) !important;
}

.pco-search-result.pco-search-active {
  outline: 2px solid var(--pc-accent) !important;
  outline-offset: -2px !important;
}

/* --- Icon column -------------------------------------------- */
.pco-search-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  color: var(--pc-text-muted) !important;
  transition: color 0.1s ease !important;
}

.pco-search-result:hover .pco-search-icon,
.pco-search-result.pco-search-active .pco-search-icon {
  color: var(--pc-accent) !important;
}

.pco-search-icon-svg {
  width: 18px !important;
  height: 18px !important;
}

/* --- Text column -------------------------------------------- */
.pco-search-text {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* --- Breadcrumbs -------------------------------------------- */
.pco-search-breadcrumb {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--pc-text-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pco-search-sep {
  color: var(--pc-text-muted) !important;
  opacity: 0.6 !important;
  margin: 0 1px !important;
}

.pco-search-breadcrumb mark {
  background: transparent !important;
  color: var(--pc-accent) !important;
  font-weight: 600 !important;
}

/* --- Product tag badge (hidden, used for icon lookup) ------ */
.pco-search-product {
  display: none !important;
}

/* --- Product icon image ------------------------------------- */
.pco-search-icon-img {
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

/* --- Title -------------------------------------------------- */
.pco-search-title {
  display: block !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--pc-heading) !important;
}

.pco-search-title mark {
  background: #fef3c7 !important;
  color: inherit !important;
  border-radius: 2px !important;
  padding: 0 1px !important;
}

/* --- Snippet ------------------------------------------------ */
.pco-search-snippet {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--pc-text-muted) !important;
}

.pco-search-snippet mark {
  background: #fef3c7 !important;
  color: inherit !important;
  border-radius: 2px !important;
  padding: 0 1px !important;
}

/* --- State messages ----------------------------------------- */
.pco-search-empty,
.pco-search-loading {
  padding: 24px 14px !important;
  text-align: center !important;
  color: var(--pc-text-muted) !important;
  font-size: 14px !important;
}

/* --- Modal body scroll -------------------------------------- */
.pc-search-modal-body {
  max-height: 480px !important;
  overflow-y: auto !important;
  padding: var(--pc-space-sm) !important;
  padding-bottom: 40px !important;
  overscroll-behavior: contain !important;
}

.pc-search-modal-content::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 50px !important;
  background: linear-gradient(to bottom, transparent, var(--pc-bg-card)) !important;
  pointer-events: none !important;
  border-radius: 0 0 var(--pc-radius-xl) var(--pc-radius-xl) !important;
}

/* --- Dark mode overrides for highlights --------------------- */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .pco-search-title mark,
  :root:not(.light) .pco-search-snippet mark {
    background: rgba(69, 128, 255, 0.2) !important;
    color: var(--pc-heading) !important;
  }

  :root:not(.light) .pco-search-product {
    background: #1e2a3f !important;
    color: #93b4fd !important;
  }
}

:root.dark .pco-search-title mark,
:root.dark .pco-search-snippet mark {
  background: rgba(69, 128, 255, 0.2) !important;
  color: var(--pc-heading) !important;
}

:root.dark .pco-search-product {
  background: #1e2a3f !important;
  color: #93b4fd !important;
}