/* ==========================================================================
   SOSAFE ENTERPRISE HELP CENTER MAIN STYLESHEET
   ========================================================================== */

:root {
  /* --- 1. Typography & Font Scale --- */
  --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-display: 2.5rem; /* 40px */

  /* --- 2. Zendesk Setting Integration (Dynamic Binding) ---
     --brand-primary / --brand-primary-hover are NOT defined here: Sass $variable
     substitution ($link_color etc.) never resolves in a file served via {{asset}},
     so they're redeclared correctly in document_head.hbs (after custom.css's
     <link> tag) using {{settings.link_color}} / {{settings.hover_link_color}}. */

  /* --- 3. Core Brand Neutrals & Base Colors --- */
  --bg-white: #ffffff;
  --bg-neutral-light: #f1f2f2;
  --text-main: #212529;
  --text-secondary: #687078;
  --text-muted: #adb5bd;
  
  /* --- 4. Custom Decorative Brand Elements --- */
  --brand-dark-rgb: 4, 63, 71;                   /* SoSafe #043F47 Green (RGB Format for alpha channels) */
  --brand-darker-rgb: 4, 30, 33;                 /* Deep #041E21 Green */
  --brand-hover: #f8fafc;
  --navy-dark: #171733;
  --code-accent: #a61e4d; /* DS pink-9 — rose/magenta reads as "code" without colliding with --panel-danger-text's red */

  /* --- 5. Custom UI Slate Palette --- */
  --color-slate-50: #f8fafc;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-900: #1e293b;
  --bg-active-highlight: #f1f5f9;                /* Smooth active state navigation tint */
  --text-tertiary: #495057;                       /* DS gray-8; darker than --text-secondary for small/low-contrast text */

  /* --- 6. Border & Layout Lines --- */
  --border-light: #dee2e6;
  --border-medium: #ced4da;
  --border-separator: #e9ebed;

  /* --- 7. Corner Radii --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 20px;

  /* --- 8. Shadows & Focus States --- */
  --shadow-soft: 0 0.063rem 0.125rem 0 rgba(0, 0, 0, 0.01), 0 0.063rem 0.188rem 0 rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 0.438rem 0.438rem -0.312rem rgba(0, 0, 0, 0.04), 0 0.625rem 0.938rem -0.312rem rgba(0, 0, 0, 0.05), 0 0.063rem 0.188rem 0 rgba(0, 0, 0, 0.05);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.5);
  --brand-focus-glow: 0 0 0 3px rgba(10, 116, 130, 0.15);
  --brand-focus-ring: 0 0 0 4px rgba(0, 80, 80, 0.15);

  /* --- 9. Structural Layout Metrics & Spacing --- */
  --container-max-width: 1260px;
  --container-max-width-wide: 1520px;
  --padding-container-desktop: 32px;
  --article-max-width: 820px;
  --article-body-max-width: 800px;
  --sidebar-width: 280px;
  --toc-sidebar-width: 260px;

  /* --- 10. Margins & Custom Spacing --- */
  --hero-padding-top: 160px;
  --hero-padding-bottom: 200px;
  --hero-padding-mobile: 60px;
  --spacing-breadcrumb-sep: 6px;
  --spacing-card-gap: 24px;
  --spacing-sidebar-top: 100px;

  /* --- 11. Synchronized Layout Animation System --- */
  --transition-smooth: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  --layout-transition-duration: 0.3s;
  --layout-transition-timing: cubic-bezier(0.25, 1, 0.5, 1);

  /* --- 12. Notice Panel Design Variables --- */
  --panel-info-bg: #ebf5fe;       --panel-info-border: #d0e7ff;       --panel-info-text: #1e3a8a;
  --panel-tip-bg: #f0fdf4;        --panel-tip-border: #d1fae5;        --panel-tip-text: #14532d;
  --panel-warning-bg: #fff7ed;    --panel-warning-border: #ffedd5;    --panel-warning-text: #7c2d12;
  --panel-danger-bg: #fee2e2;     --panel-danger-border: #fecaca;     --panel-danger-text: #7f1d1d;
  --panel-note-bg: #faf5ff;       --panel-note-border: #f3e8ff;       --panel-note-text: #581c87;
}

/* ==========================================================================
   SHARED CARD RECIPES
   The "white card" look (bg + 1px light border + radius + soft shadow)
   repeats across many unrelated components. Grouped here by radius size so
   a future shadow/border tweak is a one-line change instead of eight.
   Each individual selector below still carries its own unique properties
   (padding, margin, transition, etc.) — only the shared four are centralized.
   ========================================================================== */
.ss-highlight-card,
.blocks-item,
.custom-section-card,
.article-body .wysiwyg-table {
  background-color: var(--bg-white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
}

.sidebar-tree-container,
.toc-sticky-card,
.search-results-list > li,
.search-results-sidebar,
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link,
.wysiwyg-disclosure {
  background-color: var(--bg-white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* ==========================================================================
   SECTION 1: TYPOGRAPHY SYSTEM
   ========================================================================== */

body,
.article-body,
.article-body p,
.article-body li,
.article-body td,
.nav-wrapper,
.search-full,
.breadcrumbs,
.footer,
.pagination {
  font-family: var(--font-stack);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pagination controls (search results, community lists, etc.) — base theme
   gives these a thin teal outline on a transparent background at 12px text,
   which reads as barely-there against a plain page background. Bigger and
   white-backgrounded (background/border/radius/shadow via the shared card
   recipe above) to read as substantial, card-like controls instead. */
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link {
  font-size: var(--font-size-base) !important;
  line-height: 1.5 !important;
  padding: 10px 20px !important;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease !important;
}

.pagination-next-link:hover,
.pagination-prev-link:hover,
.pagination-first-link:hover,
.pagination-last-link:hover {
  background-color: var(--brand-hover) !important;
  border-color: var(--border-medium) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* New request page's form (#new-request-form) is a React/Garden component
   tree, not the classic .hbs-form markup -- Garden's own internal class
   names are dynamically generated and not reliably targetable, so this
   targets the underlying native input/textarea/select elements directly
   instead. Only background-color is set (not border/radius/shadow) to avoid
   fighting Garden's own focus rings and validation (error-state) styling. */
#new-request-form input,
#new-request-form textarea,
#new-request-form select {
  background-color: var(--bg-white) !important;
}

/* Dropdown/combobox fields and the file upload field don't have a real
   visible <input> at all -- the combobox's <input> is hidden (the visible
   box is the "trigger" div) and the file upload's <input type="file"> is
   display:none (the visible box is the "file_upload" div) -- so the
   selectors above never reach them. Targeted via Garden's own
   data-garden-id attributes instead, confirmed against the actual rendered
   markup (Garden v9.15.0) rather than guessed. */
#new-request-form [data-garden-id="dropdowns.combobox.trigger"],
#new-request-form [data-garden-id="forms.file_upload"] {
  background-color: var(--bg-white) !important;
}

/* Attachment field is hidden conditionally (settings.show_attachment_notice)
   via an inline <style> in new_request_page.hbs, not here -- custom.css has
   no access to settings, and the hide needs to be toggleable. */

h1, h2, h3, h4, h5, h6,
.article-title,
.section-title,
.category-title {
  font-family: var(--font-stack);
  font-weight: 600;
}

/* .article-title is the article's <h1> itself; tighten the browser's default
   0.67em h1 margin (style.css doesn't set margin on this class at all) */
.article-title {
  margin: 0.25em 0;
}

/* ==========================================================================
   SECTION 2: HEADER, LOGO, AND NAVIGATION
   ========================================================================== */

.logo {
  display: inline-block !important;
  height: 64px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

.logo a {
  display: inline-block !important;
  height: 64px !important;
  vertical-align: middle !important;
  gap: 0 !important;
  white-space: nowrap !important;
  width: max-content !important;
}

.logo a span {
  display: none !important; /* Strips native text string cleanly */
}

.logo img {
  display: inline-block !important;
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
  vertical-align: middle !important;
}

/* No lower bound on purpose: the base theme's nav collapses to the mobile
   hamburger at exactly 1024px (see style.css), so a shrink rule bounded to
   "min-width: 1024px" would revert the logo to full size at the exact same
   pixel nav collapses — two simultaneous jarring changes at once. Keeping
   the logo shrunk continuously below the upper bound avoids that; the logo
   is decorative while the nav's links are functional, so it gives way first. */
@media (max-width: 1100px) {
  .logo,
  .logo a {
    height: 44px !important;
  }

  .logo img {
    height: 44px !important;
    max-height: 44px !important;
  }

  .nav-wrapper-desktop {
    flex-shrink: 0 !important;
  }
}

/* Base theme hard-switches from full desktop nav to the mobile hamburger at
   exactly 1024px, regardless of how much room is actually available. Since
   the shrunk logo above frees up space, extend the desktop nav's visibility
   a bit further down before falling back to the hamburger — an initial
   guess at 900px, needs live verification/adjustment like the logo
   threshold did. */
@media (min-width: 900px) and (max-width: 1023px) {
  .nav-wrapper-desktop {
    display: inline-block !important;
    flex-shrink: 0 !important;
  }

  .nav-wrapper-mobile {
    display: none !important;
  }
}

.nav-wrapper-desktop .language-selector .dropdown-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 15px !important;               
  font-weight: 400 !important;
  color: var(--brand-primary) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 16px !important;
}

/* Symmetrical Dropdown Spacing Navigation */
.language-selector .dropdown-toggle,
.user-info .dropdown-toggle,
.user-nav .dropdown-toggle,
.user-menu .dropdown-toggle,
.language-selector-toggle,
[data-toggle="dropdown"].language-selector {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  gap: 6px !important;
}

.language-selector svg,
.user-info svg,
.user-nav svg,
.user-menu svg,
.language-selector .dropdown-chevron,
.user-info .dropdown-chevron {
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   SECTION 3: GLOBAL LAYOUT & UTILITY BAR
   ========================================================================== */

@media (min-width: 992px) {
  .container {
    max-width: var(--container-max-width) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--padding-container-desktop) !important;
    /* RESTORED: Fluid max-width transitions that match internal layout tracks exactly */
    transition: max-width var(--layout-transition-duration) var(--layout-transition-timing) !important;
  }

  /* Sub-nav horizontal alignment wrapper */
  .sub-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important; /* Bottom-aligns breadcrumbs and search container */
    justify-content: space-between !important; 
    border-bottom: 1px solid var(--border-light) !important;
    padding: 16px 0 !important;
    margin-bottom: 16px !important;
    background-color: transparent !important;
  }
}

/* Base breadcrumbs list reset */
.breadcrumbs {
  margin: 0 !important;
  padding: 0 !important;
  padding-bottom: 4px !important; /* Keeps baseline alignment balanced with line-height */
  list-style: none !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
}

.breadcrumbs li {
  font-size: var(--font-size-base) !important; 
  line-height: 1.3 !important; /* Gives descenders breathing room */
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.breadcrumbs li a,
.breadcrumbs li span,
.breadcrumbs li:last-child a {
  color: var(--color-slate-700) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: color 0.15s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.breadcrumbs li a:hover,
.breadcrumbs li:last-child a:hover {
  color: var(--brand-primary) !important;
  text-decoration: none !important;
}

/* High-Visibility Delimiters */
.breadcrumbs li + li::before,
.breadcrumbs li + li:before {
  content: "/" !important; 
  color: var(--color-slate-600) !important;
  margin: 0 var(--spacing-breadcrumb-sep) !important;
  font-weight: 700 !important;
  font-size: var(--font-size-base) !important;
}

/* Safe Search Container Alignment */
.sub-nav .search-container,
.sub-nav [role="search"],
.sub-nav .search,
.sub-nav .search-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-self: flex-end !important;
}

/* ==========================================================================
   SECTION 4: HERO & SECTIONS OVERLAY SYSTEM
   ========================================================================== */

.hero {
  padding-top: var(--hero-padding-top) !important;
  padding-bottom: var(--hero-padding-bottom) !important;
  /* Base theme's generic .section class (which .hero also carries) drops
     margin-bottom from 60px to 40px below 768px. .blocks-list's negative
     margin-top overlap below is calibrated against the 60px value, so this
     must stay constant or the overlap grows by 20px right at that breakpoint. */
  margin-bottom: 60px !important;
}

@media (max-width: 768px) {
  .hero {
    padding-top: var(--hero-padding-mobile) !important;   
    padding-bottom: var(--hero-padding-mobile) !important;
  }
}

.hero-welcome-message {
  color: var(--bg-white) !important;
  font-family: var(--font-stack) !important;
  font-size: var(--font-size-3xl) !important;
  font-weight: 600 !important;
  text-align: center !important;
  max-width: 650px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 28px !important;
  line-height: 1.3 !important;
}

@media (max-width: 768px) {
  .hero-welcome-message {
    font-size: var(--font-size-2xl) !important;
    margin-bottom: 20px !important;
    padding: 0 16px !important;
  }
}

.hero-inner > .search-icon {
  display: none !important;
}

.hero-inner input[type="search"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Ccircle cx='4.5' cy='4.5' r='4' fill='none' stroke='%23526366' stroke-width='1.2'/%3E%3Cpath stroke='%23526366' stroke-width='1.2' stroke-linecap='round' d='M11 11L7.5 7.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 20px center !important; 
  padding-left: 48px !important;              
}

.search-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
}

.search-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  /* !important required: base theme's `a:visited { color: $visited_link_color }` has higher
     raw specificity than a plain single class (":visited" counts as a class-level selector
     on top of the element), so it silently wins here for any pill the browser has already
     marked visited without this. */
  color: var(--bg-white) !important;
  /* IMPROVED: Light frosted glass background provides immediate baseline contrast over dark teal */
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  /* SNAPPY: 0.12s transition makes the interface feel incredibly responsive */
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.search-pill:hover {
  color: var(--bg-white);
  background-color: rgba(255, 255, 255, 0.2); /* Subtle, elegant brightening on hover */
  border-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

.search-pill:active {
  transform: scale(0.97); /* Tactile, responsive click feedback */
}

/* ==========================================================================
   SECTION 4b: HOMEPAGE HIGHLIGHTS ("What's new")
   Articles tagged home-announcement or home-new appear here as compact cards.
   To add a new badge type: add a label → badge entry in custom.js BADGE_LABELS,
   then add a .ss-highlight-badge--{slug} rule below.
   ========================================================================== */

#ss-highlights {
  margin-top: 40px;
}

.ss-highlights-heading {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 20px;
}

.ss-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .ss-highlights-grid {
    grid-template-columns: 1fr;
  }
}

.ss-highlight-card {
  display: block;
  padding: 16px 18px;
  text-decoration: none;
  transition: var(--transition-smooth);
}

/* NOTE: this rule must keep !important — it overrides background-color/border-color/
   box-shadow that come from the shared card recipe near the top of this file, which
   itself needs !important to beat .blocks-item's real base-theme competition. */
.ss-highlight-card:hover {
  background-color: var(--brand-hover) !important;
  border-color: var(--border-medium) !important;
  box-shadow: var(--shadow-hover) !important;
  text-decoration: none;
}

.ss-highlight-top {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* Shared "pill badge" skeleton -- .ss-highlight-badge (homepage highlight
   labels) and .ss-draft-tag (admin/agent draft indicator) are visually
   identical shapes, differing only in color (each keeps its own rule for
   that). */
.ss-highlight-badge,
.ss-draft-tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
}

/* home-announcement label */
.ss-highlight-badge--announcement {
  background: #e7f5ff;
  border: 1px solid #74c0fc;
  color: #1971c2;
}

/* home-new label */
.ss-highlight-badge--new {
  background: #ebfbee;
  border: 1px solid #8ce99a;
  color: #277c38;
}

/* home-updated label */
.ss-highlight-badge--updated {
  background: #fff4e6;
  border: 1px solid #ffc078;
  color: #6b4600;
}

/* home-popular label */
.ss-highlight-badge--popular {
  background: #f3f0ff;
  border: 1px solid #b197fc;
  color: #372a8f;
}

.ss-highlight-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
  line-height: 1.4;
}

/* Manual "Draft" tag for specific category/section IDs known to be marked
   as draft in Zendesk -- Zendesk exposes no draft field for categories or
   sections via the API (confirmed against the Section API's full field
   list), so this can't be data-driven. Hardcoded via {{#is id ...}} at each
   known location instead (home_page.hbs, category_page.hbs,
   section_page.hbs) for the two IDs in use so far: category 39047973345949
   ("Staging") and section 39047977624477. Grey/neutral rather than one of
   the colorful .ss-highlight-badge-* tones, since this is an admin/agent
   signal about backend state, not a user-facing content label. */
.ss-draft-tag {
  background: var(--bg-neutral-light);
  border: 1px solid var(--border-medium);
  color: var(--text-tertiary);
  margin-left: 8px;
  vertical-align: middle;
}

.ss-highlight-date {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: auto;
  white-space: nowrap;
  padding-left: 10px;
}

/* ==========================================================================
   SECTION 5: COMPACT HOMEPAGE CARD SYSTEM
   ========================================================================== */

.blocks-list {
  position: relative !important;
  z-index: 10 !important;
  margin-top: -120px !important;
  /* Switch base theme flexbox to grid for reliable column control */
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4 categories: 2×2 instead of 3+1 */
.blocks-list:has(> .blocks-item:nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* 5 categories: 3+2 with bottom row stretched (6-col subgrid) */
.blocks-list:has(> .blocks-item:nth-child(5):last-child) {
  grid-template-columns: repeat(6, 1fr) !important;
}
.blocks-list:has(> .blocks-item:nth-child(5):last-child) > .blocks-item:nth-child(-n+3) {
  grid-column: span 2 !important;
}
.blocks-list:has(> .blocks-item:nth-child(5):last-child) > .blocks-item:nth-child(n+4) {
  grid-column: span 3 !important;
}

/* 600-991px: 2 columns instead of jumping straight from 3 to 1. Below the
   base theme's own 992px container breakpoint, 3 columns (or the 4/5-
   category :has() variants below) leave too little width per card for
   icon+text to sit side by side without the text wrapping one word per
   line — but collapsing all the way to a single, full-width column leaves
   short card content (one line of title, one of description) looking
   sparse against far more empty width than it needs. 2 columns is the
   middle ground: enough room for the text, without the empty look. */
@media (min-width: 600px) and (max-width: 991px) {
  .blocks-list,
  .blocks-list:has(> .blocks-item:nth-child(4):last-child),
  .blocks-list:has(> .blocks-item:nth-child(5):last-child) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .blocks-list:has(> .blocks-item:nth-child(5):last-child) > .blocks-item:nth-child(-n+3),
  .blocks-list:has(> .blocks-item:nth-child(5):last-child) > .blocks-item:nth-child(n+4) {
    grid-column: span 1 !important;
  }
}

/* Below 600px: genuinely phone-narrow, where even 2 columns would squeeze
   text again — single column, full-width cards. */
@media (max-width: 599px) {
  .blocks-list,
  .blocks-list:has(> .blocks-item:nth-child(4):last-child),
  .blocks-list:has(> .blocks-item:nth-child(5):last-child) {
    margin-top: -40px !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .blocks-list:has(> .blocks-item:nth-child(5):last-child) > .blocks-item:nth-child(-n+3),
  .blocks-list:has(> .blocks-item:nth-child(5):last-child) > .blocks-item:nth-child(n+4) {
    grid-column: span 1 !important;
  }
}

.blocks-item .category-icon-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  width: 36px !important;
  height: 36px !important;
}

.blocks-item .category-custom-icon {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
}

.blocks-item {
  padding: 14px !important;
  height: auto !important;
  flex: none !important;   /* reset base theme's flex: 1 0 340px — grid handles sizing */
  margin: 0 !important;    /* reset base theme's margin-based gutters — gap handles spacing */
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: var(--transition-smooth) !important;
}

.blocks-item:hover,
.blocks-item:focus,
.blocks-item:active {
  background-color: var(--brand-hover) !important;
  border-color: var(--border-medium) !important;
  box-shadow: var(--shadow-hover) !important;
  text-decoration: none !important;
}

.blocks-item:hover .blocks-item-title {
  color: var(--text-main) !important;
}

.blocks-item:hover .blocks-item-description {
  color: var(--text-tertiary) !important;
}

.blocks-item-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 100% !important;
  outline: none !important;
  text-decoration: none !important;
  padding: 18px !important;
}

.blocks-item-link:hover,
.blocks-item-link:focus,
.blocks-item-link:active {
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.blocks-item-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.blocks-item-title,
.blocks-item-description {
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
}

.blocks-item-title {
  font-size: var(--font-size-lg) !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}

.blocks-item-description {
  font-size: var(--font-size-base) !important;
  font-weight: 400 !important;
  color: var(--text-tertiary) !important; /* darker than --text-secondary for extra contrast margin at this size */
  line-height: 1.5 !important;
}

/* Card Focus & Accessibility Settings */
.blocks-item:focus,
.blocks-item-link:focus,
.category-card:focus,
.category-item:focus,
.blocks-item-link *:focus,
.blocks-item:focus-within .blocks-item-link {
  outline: none !important;
  outline-width: 0 !important;
  border-color: var(--border-light) !important; 
  box-shadow: none !important; 
  text-decoration: none !important;
}

.blocks-item:focus-visible,
.category-card:focus-visible,
.category-item:focus-visible {
  outline: none !important;
  box-shadow: var(--brand-focus-ring) !important; 
  border-color: var(--brand-primary) !important; 
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.blocks-item-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ==========================================================================
   SECTION 6: CATEGORY & SECTION PAGES, SUBSECTION TREES
   ========================================================================== */

/* --- Centering Systems & Grid Layouts --- */
@media (min-width: 992px) {
  /* Dynamic alignment for Category viewports */
  .category-container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  .category-content {
    width: 100% !important;
    max-width: 1200px !important;
    flex-basis: auto !important;
    margin: 0 auto !important;
  }

  .category-container .section-tree {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
  }

  /* Dynamic alignment for Section viewports (fixes off-center bugs) */
  .section-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .section-content {
    /* Base theme sets flex: 0 0 80% at its own min-width:1024px breakpoint
       (style.css) — flex-basis wins over width/max-width for a flex item's
       main-axis size, so without overriding it here too, .section-content
       silently rendered at 80% of .section-container regardless of our
       width/max-width below, and justify-content:center above had no visible
       effect since flex-grow:0 + flex-shrink:0 left no room to redistribute. */
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
  }
}

/* Between 768-991px, the base theme's .section-tree falls back to
   flex-wrap + justify-content:space-between with cards at flex:0 0 45% —
   this pushes the left card flush left and the right card flush right with
   a wide gap between, instead of a clean evenly-gapped 2-column grid. */
@media (min-width: 768px) and (max-width: 991px) {
  .category-container .section-tree {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
  }
}

/* --- Section Typography & Header --- */
.page-header {
  display: flex !important;
  flex-direction: column !important; /* Forces icon, h1, and description to stack vertically */
  align-items: center !important;    /* Perfectly centers elements horizontally */
  justify-content: center !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 18px 0 !important;
  margin-bottom: 16px !important;
  text-align: center !important;
  width: 100% !important;
}

.page-header h1 {
  margin: 0 0 12px 0 !important;
  font-size: var(--font-size-display) !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
}

/* Section page only (scoped via .section-content, unique to
   section_page.hbs) -- brings its h1 in line with the category page's own
   .page-header h1 (already reduced to --font-size-3xl), which otherwise
   looks noticeably smaller next to this page's default --font-size-display.
   Scoped rather than changed globally so community pages, which also share
   the plain .page-header h1 rule above, are left untouched. */
.section-content .page-header h1 {
  font-size: var(--font-size-3xl) !important;
}

.page-header-description {
  margin: 0 auto !important;
  font-size: 1.125rem !important;
  color: var(--text-secondary) !important;
  max-width: 600px !important;
  font-style: normal !important;
}

/* Category Page Icon Spacing Restorations */
.category-icon-wrapper {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

/* Category landing page only (scoped via .category-content, unique to
   category_page.hbs): icon+title as one top-aligned row (illustrative icon,
   not meant to dominate — this header is just a "you've landed where you
   expected" confirmation, echoing the icon+name already seen on the
   homepage card), with the description as a separate, full-width line
   centered below the row. .page-header itself keeps the base theme's
   default column stacking; only the new .page-header-top row and the icon
   size are overridden. Other pages that reuse the shared .page-header class
   (sections, community) are untouched since they don't have .page-header-top. */
.category-content .page-header-top {
  display: flex !important;
  flex-direction: row !important;
  /* Now that the row only pairs the icon with a single line of text (the
     description moved below), centering reads better than top-aligning —
     flex-start pinned the icon to the h1's line-box top, but the h1's
     inherited line-height (1.5 from base body) pads extra invisible space
     above the glyphs, which made the icon look higher than the visible
     text and consequently the text look low relative to the icon. */
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-bottom: 4px !important;
}

.category-content .category-icon-wrapper {
  width: auto !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
}

.category-content .category-custom-icon {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
}

.category-content .page-header h1 {
  margin: 0 !important;
  /* font-size-display (40px, bold) visually overpowers the 52px icon next to
     it — bold weight at that size reads heavier than the icon's pixel size
     suggests. Stepping down a tier rebalances the pairing without having to
     upscale the icon further (risks blur, since the source SVGs are 24x24). */
  font-size: var(--font-size-3xl) !important;
  /* h1 otherwise inherits body's line-height:1.5 (style.css), which at this
     font-size adds ~12px of invisible leading above and below the glyphs —
     that's the source of the "gap that isn't margin" below the title, and
     of the icon/text misalignment above. */
  line-height: 1.2 !important;
}

/* --- Section Cards & Parent Playlists --- */
.custom-section-card {
  padding: 32px 24px;
  margin-bottom: var(--spacing-card-gap);
}

/* Section page only (scoped via #main-content.custom-section-card, unique
   to section_page.hbs's single full-list card). Category page's per-section
   cards share the .custom-section-card class but sit inside a grid, which
   already constrains their width, so they're untouched by this. As a plain
   block element this card otherwise always fills .section-content's full
   800px regardless of content — for sections with short-to-medium article
   titles, that leaves a lot of empty space to the right of every row and
   looks unbalanced even when some titles are genuinely long. Sizing to the
   widest title's natural width (capped at the container) fixes that. */
#main-content.custom-section-card {
  width: fit-content !important;
  max-width: 100% !important;
  min-width: min(420px, 100%) !important;
  /* A narrower block still left-aligns by default within .section-content —
     center it to match the page header above, which is centered too. */
  margin-left: auto !important;
  margin-right: auto !important;
  /* Tightened from the shared 32px 24px -- combined with the .sub-nav/
     .page-header margin reductions, trims some of the excess whitespace
     around short sections without touching category page's per-section
     cards (they don't use this #main-content-scoped selector). */
  padding: 24px 20px !important;
}

.custom-section-card-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: 16px;
}

/* color must keep !important: base theme's a:visited ties this descendant
   selector's specificity exactly, and we can't confirm stylesheet load order */
.custom-section-card-title a {
  color: var(--text-main) !important;
  text-decoration: none;
}

.custom-parent-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-article-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-neutral-light);
}

.custom-article-item:last-child {
  border-bottom: none; /* Prevents double border above the folder divider */
}

/* color must keep !important: this class sits directly on the <a>, so its
   specificity (0,1,0) loses outright to base theme's a:visited (0,1,1) */
.custom-article-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-main) !important;
  font-weight: 400;
  text-decoration: none;
  font-size: var(--font-size-md);
}

.custom-article-link:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* --- Subsection Folder Layouts --- */
.custom-subsections-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/*
   TIGHTENED: Sibling Separator Line.
   Adds a balanced spacing offset and clean separator line only when subsections follow articles.
*/
.custom-parent-article-list + .custom-subsections-container,
.custom-parent-article-list + .see-all-articles + .custom-subsections-container {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.custom-subsection-card {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  display: block;
}

.custom-subsection-title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.4;
}

/* color must keep !important: see note on .custom-section-card-title a above */
.custom-subsection-title a {
  color: var(--color-slate-900) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

.custom-subsection-title a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* ==========================================================================
   SUBSECTION ARTICLE TREE
   Toggle: to DISABLE the tree connector lines, change the word "tree-on"
   to "tree-off" in the four selectors below (the list indent and article
   link styles above stay in place either way).
   ========================================================================== */

/* tree-on → rename to tree-off to disable vertical trunk */
.custom-subsections-container.tree-on .custom-subsection-article-item::before {
  content: "";
  position: absolute;
  left: -16px;
  width: 2px;
  background-color: var(--color-slate-300);
  top: -4px;
  bottom: -8px;
}

/* tree-on → rename to tree-off to disable trunk clipping on last item */
.custom-subsections-container.tree-on .custom-subsection-article-item:last-child::before {
  top: -4px;
  bottom: auto;
  height: 17.5px;
}

/* tree-on → rename to tree-off to disable horizontal branch */
.custom-subsections-container.tree-on .custom-subsection-article-item::after {
  content: "";
  position: absolute;
  left: -16px;
  top: 13.5px;
  width: 8px;
  height: 1.5px;
  background-color: var(--color-slate-300);
}

/* ==========================================================================
   (end tree toggle block)
   ========================================================================== */

.subsection-tree-icon {
  display: none;
}

.custom-subsection-article-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0 8px;
  padding: 0 0 0 16px;
}

.custom-subsection-article-item {
  position: relative;
  padding: 4px 0;
  margin: 0;
  list-style-type: none;
  overflow: visible;
}

/* color must keep !important: see note on .custom-section-card-title a above */
.custom-subsection-article-item a {
  color: var(--color-slate-600) !important;
  font-weight: 400;
  font-size: var(--font-size-md);
  text-decoration: none;
  display: inline-block;
  line-height: 1.3;
  transition: color 0.15s ease;
}

.custom-subsection-article-item a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* color must keep !important: see note on .custom-section-card-title a above */
.ss-see-all-item a {
  color: var(--color-slate-600) !important;
}

.ss-see-all-item a::before {
  content: "→ ";
}

.ss-see-all-item a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}


/* --- Category Page: Card header band + subsection accordions --- */
.category-container .custom-section-card {
  padding: 0;
  overflow: hidden;
}

.ss-card-header {
  background-color: var(--bg-neutral-light);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light);
}

.ss-card-header .custom-section-card-title {
  margin: 0;
}

.ss-card-body {
  padding: 14px 18px 18px;
}

.category-container .custom-article-item {
  border-bottom: none;
}

.ss-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 18px;
  margin: 0 -18px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.ss-accordion-trigger:hover {
  background-color: var(--bg-neutral-light);
}

.ss-accordion-trigger:hover .custom-subsection-title a,
.ss-accordion-trigger:hover .ss-accordion-chevron {
  color: var(--brand-primary);
}

.ss-accordion-trigger .custom-subsection-title {
  flex: 1;
}

.ss-accordion-chevron {
  flex-shrink: 0;
  color: var(--color-slate-400);
  transition: transform 0.2s ease;
}

.ss-accordion-card.is-open .ss-accordion-chevron {
  transform: rotate(180deg);
}

.ss-accordion-body {
  display: none;
}

.ss-accordion-card.is-open .ss-accordion-body {
  display: block;
}


/* ==========================================================================
   SECTION 7: DYNAMIC ARTICLE GRID & COLLAPSIBLE SIDEBARS
   ========================================================================== */

@media (min-width: 992px) {
  .article-container {
    display: grid !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    justify-content: stretch !important; 
    margin: 0 auto !important;
    width: 100% !important;
    will-change: grid-template-columns !important;
    /* Synchronized Track Easing */
    transition: grid-template-columns var(--layout-transition-duration) var(--layout-transition-timing) !important;
  }
}

/* --- Layout Engine Breakpoints --- */

/* Viewport: 992px to 1249px (Cramped Monitor Layout) */
@media (min-width: 992px) and (max-width: 1249px) {
  .article-container:not(.has-toc) {
    grid-template-columns: 1fr minmax(0, var(--article-max-width)) 1fr !important;
  }
  .article-container.has-toc {
    grid-template-columns: 0px minmax(0, 1fr) calc(var(--toc-sidebar-width) + 40px) !important;
  }
  .article-container.has-toc .article-toc-sidebar {
    width: var(--toc-sidebar-width) !important;
    margin-left: auto !important; 
  }
  .article-container .sidebar-collapse-toggle { display: none !important; }
  .article-container .article-sidebar { width: 0 !important; max-width: 0 !important; min-width: 0 !important; padding: 0 !important; border: none !important; }
  .article-container .sidebar-tree-container { width: 0 !important; opacity: 0 !important; pointer-events: none !important; }
}

/* Viewport: 1250px to 1519px (Standard Monitor Layout) */
@media (min-width: 1250px) and (max-width: 1519px) {
  .article-container:not(.has-toc):not(.sidebar-drawer-collapsed) {
    grid-template-columns: calc(var(--sidebar-width) + 40px) minmax(0, var(--article-max-width)) 1fr !important;
  }
  .article-container:not(.has-toc):not(.sidebar-drawer-collapsed) .article-sidebar {
    width: var(--sidebar-width) !important; max-width: var(--sidebar-width) !important;
  }
  .article-container:not(.has-toc).sidebar-drawer-collapsed {
    grid-template-columns: 1fr minmax(0, var(--article-max-width)) 1fr !important;
  }
  .article-container:not(.has-toc).sidebar-drawer-collapsed .article-sidebar {
    width: 0px !important; max-width: 0px !important;
  }
  .article-container.has-toc {
    grid-template-columns: 0px minmax(0, 1fr) calc(var(--toc-sidebar-width) + 44px) !important;
  }
  .article-container.has-toc .article-sidebar {
    width: 0px !important; max-width: 0px !important;
  }
  .article-container.has-toc .sidebar-tree-container { 
    width: 0px !important; 
    opacity: 0 !important; 
    pointer-events: none !important; 
  }
  .article-container.has-toc .article-toc-sidebar {
    width: var(--toc-sidebar-width) !important;
    margin-left: auto !important; 
  }
  .article-container.has-toc .sidebar-collapse-toggle { display: none !important; }
}

/* Viewport: 1520px and Up (Elite Widescreen Layout) */
@media (min-width: 1520px) {
  /* 
     CORRECTED: Lock the outer container wide for ALL article layouts 
     on large monitors to support balanced phantom tracking layouts.
  */
  .container:has(.article-container) {
    max-width: var(--container-max-width-wide) !important; 
  }
  
  /* --- SCENARIO A: Pages WITH a Table of Contents --- */
  /* Both sidebars open: Balanced track distribution */
  .article-container.has-toc:not(.sidebar-drawer-collapsed) {
    grid-template-columns: 332px minmax(0, 1fr) 312px !important;
  }
  .article-container.has-toc:not(.sidebar-drawer-collapsed) .article-sidebar {
    width: var(--sidebar-width) !important; max-width: var(--sidebar-width) !important;
  }
  .article-container.has-toc:not(.sidebar-drawer-collapsed) .article-toc-sidebar {
    width: var(--toc-sidebar-width) !important;
    margin-left: auto !important;
  }

  /* Left sidebar manually closed, right ToC still visible (Phantom Balance) */
  .article-container.has-toc.sidebar-drawer-collapsed {
    grid-template-columns: 332px minmax(0, 1fr) 312px !important;
  }
  .article-container.has-toc.sidebar-drawer-collapsed .article-sidebar {
    width: 0px !important; max-width: 0px !important;
  }
  .article-container.has-toc.sidebar-drawer-collapsed .article-toc-sidebar {
    width: var(--toc-sidebar-width) !important;
    margin-left: auto !important;
  }

  /* --- SCENARIO B: Pages WITHOUT a Table of Contents --- */
  /* 
     FIXED: Balanced Phantom Tracking for clean article views.
     Applying identical 350px framing tracks ensures the article layout 
     starts dead-centered and stays dead-centered when toggling the drawer.
  */
  .article-container:not(.has-toc):not(.sidebar-drawer-collapsed),
  .article-container:not(.has-toc).sidebar-drawer-collapsed { 
    grid-template-columns: 350px minmax(0, var(--article-max-width)) 350px !important; 
  }
  .article-container:not(.has-toc):not(.sidebar-drawer-collapsed) .article-sidebar {
    width: var(--sidebar-width) !important; max-width: var(--sidebar-width) !important;
  }
  .article-container:not(.has-toc).sidebar-drawer-collapsed .article-sidebar {
    width: 0px !important; max-width: 0px !important;
  }
}

/* --- Sidebar Panels & Sliding Mask Controls --- */
.article-sidebar {
  position: relative !important;
  background: transparent !important;
  width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  flex: none !important;
  overflow: visible !important; 
  transition: width var(--layout-transition-duration) var(--layout-transition-timing), 
              max-width var(--layout-transition-duration) var(--layout-transition-timing) !important;
}

.sidebar-tree-container {
  padding: 16px;
  width: var(--sidebar-width);
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: width var(--layout-transition-duration) var(--layout-transition-timing), opacity 0.2s ease;
}

/* Manual Drawer Collapsed States */
/* NOTE: .article-sidebar has real base-theme competition (see .article-sidebar rule
   above) which forces width/max-width to keep !important there — so this override
   must keep !important on those same two properties too, or the collapsed state
   would lose to the base rule. min-width/padding/border are new properties the base
   rule doesn't set, so those are safe without !important. */
.sidebar-drawer-collapsed .article-sidebar {
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0;
  padding: 0;
  border: none;
}

.sidebar-drawer-collapsed .sidebar-tree-container {
  width: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.article { 
  width: 100% !important; 
  max-width: none !important; 
  min-width: 0 !important; 
  margin-left: 0px !important;
  margin-right: 0px !important;
}

@media (min-width: 992px) {
  .article {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.article-header {
  max-width: var(--article-max-width) !important;
  width: 100% !important;
}

/* --- Collapsible Sidebar Toggle Trigger --- */
.sidebar-collapse-toggle {
  position: absolute;
  top: 14px;
  right: -13px;
  left: auto;
  z-index: 10;
  width: 26px;
  height: 26px;
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  padding: 0;
  transform: rotate(0deg) translateX(0px);
  transition: transform var(--layout-transition-duration) var(--layout-transition-timing),
              color var(--transition-smooth),
              border-color var(--transition-smooth),
              box-shadow var(--transition-smooth);
}

.sidebar-collapse-toggle:hover {
  color: var(--brand-primary);
  border-color: var(--border-medium);
  box-shadow: var(--shadow-hover);
}

.sidebar-drawer-collapsed .sidebar-collapse-toggle {
  transform: rotate(180deg) translateX(54px);
}

/* --- Flat Navigation Title & Sidenav Link Trees --- */
.sidebar-flat-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-subsection-group {
  margin-top: 14px;
}

.sidebar-subsection-group .tree-article-flatlist {
  padding-left: 14px;
}

.sidebar-subsection-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-left: 0;
  margin-bottom: 4px;
  text-align: left;
}

.sidebar-subsection-title::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687078' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.tree-article-flatlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* color must keep !important: this class sits directly on the <a>, so its
   specificity (0,1,0) loses outright to base theme's a:visited (0,1,1) */
.tree-article-link {
  display: block;
  padding: 6px 8px 6px 8px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary) !important;
  text-decoration: none;
  border-radius: var(--radius-sm);
  line-height: 1.4;
  transition: var(--transition-smooth);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  /* Reserved (transparent) so the active state below only swaps the color,
     instead of adding a border that would shift the text 3px vs siblings */
  border-left: 3px solid transparent;
}

/* color must keep !important: overrides the base rule above, which is itself
   forced to keep !important on color */
.tree-article-link:hover {
  background-color: var(--brand-hover);
  color: var(--text-main) !important;
}

/* color must keep !important: same reason as .tree-article-link:hover above */
.tree-article-link.current-article-node {
  background-color: var(--brand-hover);
  color: var(--brand-primary) !important;
  font-weight: 600;
  border-left-color: var(--brand-primary);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Left Sidebar active highlights */
.article-sidebar .sidenav-item.current-article {
  border-left: none !important;
  border-left-width: 0 !important;
  background-color: var(--bg-active-highlight) !important;
  color: var(--brand-primary) !important;
  padding-left: 16px !important;
}

@media (max-width: 991px) {
  .article-sidebar {
    display: none !important;
  }
}

/* --- Right Side Table of Contents Sidebar --- */
.article-toc-sidebar {
  display: none;
  width: 100%;
  max-width: var(--toc-sidebar-width);
  position: sticky;
  top: var(--spacing-sidebar-top);
  align-self: start;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

@media (min-width: 992px) {
  .article-toc-sidebar.toc-active {
    display: block;
  }
}

.toc-sticky-card {
  padding: 16px;
  transition: var(--transition-smooth);
}

.toc-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

#toc-list-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* color must keep !important: this class sits directly on the <a>, so its
   specificity (0,1,0) loses outright to base theme's a:visited (0,1,1) */
.toc-link {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary) !important;
  text-decoration: none;
  line-height: 1.4;
  border-left: 3px solid transparent;
  padding: 6px 8px 6px 10px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: var(--transition-smooth);
}

/* color must keep !important: overrides the base rule above, which is itself
   forced to keep !important on color */
.toc-link:hover {
  background-color: var(--brand-hover);
  color: var(--text-main) !important;
}

.toc-h3 {
  padding-left: 8px;
}

/* color must keep !important: same reason as .toc-link:hover above */
.toc-link.active-toc-item {
  color: var(--brand-primary) !important;
  /* No font-weight change here on purpose: bolding shifts word-wrap points as
     you scroll (fewer words fit per line), causing a visible line-break jump.
     Color + border + background already communicate the active state. */
  border-left-color: var(--brand-primary);
  background-color: var(--brand-hover);
}

/* color must keep !important: same reason as .toc-link:hover above */
.article-toc-sidebar .toc-link.is-active {
  border-left: none;
  border-left-width: 0;
  background-color: var(--bg-active-highlight);
  color: var(--brand-primary) !important;
  padding-left: 12px;
}

/* Suppress sidebar decoration overrides */
.article-sidebar .sidenav-item.current-article::before,
.article-sidebar .sidenav-item.current-article::after,
.article-toc-sidebar .toc-link.is-active::before,
.article-toc-sidebar .toc-link.is-active::after {
  display: none !important;
}

/* ==========================================================================
   SECTION 8: KNOWLEDGE BASE CONTENT BLOCKS & UTILITIES
   ========================================================================== */

.article-body :not(pre) > code {
  background-color: var(--bg-neutral-light) !important;
  color: var(--code-accent) !important;
  border: 1px solid var(--border-medium) !important;
  padding: 2px 3px !important;
  border-radius: var(--radius-sm) !important;
  font-family: Menlo, Monaco, Consolas, monospace !important;
  font-size: 90% !important;
}

/* --- Custom Layout Notice Panels --- */
.article-body .kb-panel {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 10px 14px !important;
  margin: 12px 0 !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent !important;
}

.article-body .kb-panel-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.article-body .kb-panel-content p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.article-body .kb-panel-content p:not(:last-child) {
  margin-block-end: 8px !important;
}

/* Panel Skin configurations */
.article-body .kb-panel-info    { background-color: var(--panel-info-bg) !important;    border-color: var(--panel-info-border) !important;    color: var(--panel-info-text) !important; }
.article-body .kb-panel-tip     { background-color: var(--panel-tip-bg) !important;     border-color: var(--panel-tip-border) !important;     color: var(--panel-tip-text) !important; }
.article-body .kb-panel-warning { background-color: var(--panel-warning-bg) !important; border-color: var(--panel-warning-border) !important; color: var(--panel-warning-text) !important; }
.article-body .kb-panel-danger  { background-color: var(--panel-danger-bg) !important;  border-color: var(--panel-danger-border) !important;  color: var(--panel-danger-text) !important; }
.article-body .kb-panel-note,
.article-body .kb-panel-purple  { background-color: var(--panel-note-bg) !important;    border-color: var(--panel-note-border) !important;    color: var(--panel-note-text) !important; }

/* Panel Inline Icons mapping */
/* !important required throughout this rule and the five color-mapping rules below:
   whatever tool generates this kb-panel markup in article content bakes these same
   properties in as an inline style="" attribute on the element (with a broken/empty
   background-image value in at least some cases). Inline styles always beat external
   stylesheet rules regardless of specificity unless we use !important. */
.article-body .kb-panel-icon {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-top: 2px !important;
}
.article-body .kb-panel-info .kb-panel-icon    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") !important; }
.article-body .kb-panel-tip .kb-panel-icon     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316a34a'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important; }
.article-body .kb-panel-warning .kb-panel-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ea580c'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") !important; }
.article-body .kb-panel-danger .kb-panel-icon  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important; }
.article-body .kb-panel-purple .kb-panel-icon,
.article-body .kb-panel-note .kb-panel-icon    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239333ea'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2v16c0 1.1.89 2 1.99 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E") !important; }

.article-body .kb-panel > p:has(.kb-panel-icon) {
  margin: 0 !important;
  padding: 0 !important;
  display: contents !important;
}

/* ==========================================================================
   NATIVE CALLOUTS (Zendesk's <zd-callout> / .wysiwyg-callout)
   Successor to the .kb-panel-* blocks above (kept for any already-published
   articles still using that markup) -- new articles use Zendesk's own
   native callout element instead. Reuses the exact same color tokens as the
   old kb-panel system so both look identical during the transition.

   Zendesk's docs say to set --zd-wysiwyg-callout-{type}-bg, but the actual
   shipped CSS has an undocumented extra indirection: a base rule
   (".wysiwyg-callout, zd-callout") sets --zd-wysiwyg-callout-{type}-bg as a
   DEFAULT directly on the callout element itself, and a per-variant rule
   (".wysiwyg-callout-info" etc.) copies it into a separate GENERIC variable,
   --zd-wysiwyg-callout-bg (no type in the name) -- which is what the actual
   background-color property reads. Setting --zd-wysiwyg-callout-{type}-bg
   on :root doesn't work: a value declared directly on an element (as
   Zendesk's base rule does) always wins over one merely inherited from an
   ancestor like :root, regardless of selector specificity -- confirmed via
   DevTools. So this overrides the generic --zd-wysiwyg-callout-bg variable
   directly, on the same selector Zendesk uses for that mapping step, with
   !important since this is now a confirmed real competing rule (unlike the
   border rules below, which have no competing declaration to fight).

   icon-color turned out to have the exact same indirection as background
   (confirmed visually: info's icon stayed default grey, tip's stayed
   default green, even with --zd-wysiwyg-callout-{type}-icon-color set on
   :root) -- so it gets the same generic-variable-override treatment. */
.wysiwyg-callout-info {
  --zd-wysiwyg-callout-bg: var(--panel-info-bg) !important;
  --zd-wysiwyg-callout-icon-color: #2563eb !important;
}
.wysiwyg-callout-tip {
  --zd-wysiwyg-callout-bg: var(--panel-note-bg) !important;
  --zd-wysiwyg-callout-icon-color: #9333ea !important;
}

/* Callout body links inherit the site's normal link color ($link_color,
   currently a teal/green), which clashes against the tip variant's purple
   (and reads a bit noisy generally against pastel callout backgrounds).
   Neutral dark text instead, underlined to keep link affordance. */
.wysiwyg-callout a {
  color: var(--text-main) !important;
  text-decoration: underline !important;
}

/* Neutral doesn't mean indistinguishable -- visited links shift to a
   lighter/greyer shade of the same neutral (not a different hue), so
   visited-vs-not is still readable via shade alone without reintroducing a
   clashing color. */
.wysiwyg-callout a:visited {
  color: var(--text-secondary) !important;
}

/* Border-radius (a container-level property, not per-type) turns out to
   have the exact same "set directly on the element, :root doesn't work"
   issue as the per-type bg/icon-color properties above -- confirmed via the
   same DevTools inspection (Zendesk's base rule sets
   --zd-wysiwyg-callout-border-radius: 4px directly on ".wysiwyg-callout,
   zd-callout"). Overridden the same way. Matches --radius-md, the same
   token used for the sidebar/TOC cards, instead of Zendesk's 4px default. */
.wysiwyg-callout {
  --zd-wysiwyg-callout-border-radius: var(--radius-md) !important;
}

/* Border isn't part of Zendesk's documented theming recipe for callouts, so
   this is a plain manual override rather than a --zd- custom property.
   Confirmed from rendered markup that .wysiwyg-callout-* classes sit
   directly on the <zd-callout> host element (not hidden inside a shadow
   root), so ordinary selectors reach it without needing anything special.

   NOT reusing --panel-*-border (the old kb-panel tokens) here -- those
   turned out to have inconsistent contrast between variants: some are a
   full Tailwind palette step from their background (danger: red-100 bg ->
   red-200 border), others only half a step in from white (tip: purple-50 ->
   purple-100; warning: orange-50 -> orange-100) -- which is exactly why tip
   and warning read as barely-there next to danger, and info (a custom
   in-between value) sat in the middle. All four now use a full palette-step
   jump from their background, matching danger's existing relationship,
   for consistent visible contrast across all variants. */
.wysiwyg-callout-info    { border: 1px solid #bfdbfe; }
.wysiwyg-callout-tip     { border: 1px solid #e9d5ff; }
.wysiwyg-callout-warning { border: 1px solid #fed7aa; }
.wysiwyg-callout-error   { border: 1px solid var(--panel-danger-border); }

/* --- Responsive Tables --- */
/*
  Default look (no HTML changes needed for any existing table): a card -- border, soft
  shadow, rounded corners -- using the <figure class="wysiwyg-table"> that Zendesk already
  wraps every table in. A light, brand-tinted header row with a solid underline replaces
  the old near-invisible gray-on-gray fill, and rows get horizontal-only dividers (no
  vertical lines).

  Opt-in modifier classes let you adjust a single table's look without touching any other
  table. Add any of them directly to that table's own <table> element via Zendesk's "Edit
  source" view, alongside its existing classes:
    - kb-table-dark-header : solid dark-teal header with white text, for tables that
      should stand out more.
    - kb-table-soft-header : a brighter brand-tinted header fill than the default -- still
      light enough to keep the same dark body text color, but clearly more present than
      the default's barely-there tint. A middle ground between the default and
      kb-table-dark-header.
    - kb-table-zebra       : subtle alternating row stripes, useful for long/dense tables.
    - kb-table-auto-width  : shrinks the table (and its card) to fit its content instead of
      stretching full-width -- for narrow/single-column tables.
  Example: <table class="kb-table wysiwyg-table-resized kb-table-soft-header kb-table-zebra">
  (kb-table-dark-header and kb-table-soft-header are alternatives to each other -- use at
  most one of the two per table.)
*/
.article-body .wysiwyg-table {
  overflow: hidden !important;
  margin: 20px 0 !important;
}

.article-body .kb-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  font-size: var(--font-size-base) !important;
  border: none !important;
}

/*
  Explicit, blanket border reset across every table-related element -- not just th/td.
  Without this, a leftover default border on the <table>/<thead>/<tbody>/<tr> elements
  themselves (from the browser's UA stylesheet or Zendesk's own WYSIWYG table styles) can
  still show through border-collapse as a heavy line at the table's outer top/bottom edge
  and faint tick marks at the left/right edge of each row, even once th/td borders are
  cleared.
*/
.article-body .kb-table,
.article-body .kb-table thead,
.article-body .kb-table tbody,
.article-body .kb-table tr,
.article-body .kb-table th,
.article-body .kb-table td {
  border-width: 0 !important;
  border-style: none !important;
  outline: none !important;
}

.article-body .kb-table th,
.article-body .kb-table td {
  padding: 14px 16px !important;
  text-align: left !important;
  vertical-align: middle !important;
}

/*
  ".kb-table th *" (not just "th" itself) matters here: Zendesk sometimes wraps header
  text in its own element, e.g. <th><p class="wysiwyg-text-align-center">...</p></th> for
  centered columns. That <p> has its own font-weight/color from the base article
  typography rules, which -- being a rule that directly targets the paragraph -- overrides
  the bold/color inherited from the <th>, regardless of !important (inheritance has no
  specificity to compete with). Repeating font-weight/color on every descendant keeps
  centered header columns bold and correctly colored too.
*/
.article-body .kb-table th,
.article-body .kb-table th * {
  font-weight: 700 !important;
  color: var(--text-main) !important;
}

.article-body .kb-table th {
  background-color: rgba(var(--brand-dark-rgb), 0.06) !important;
  border-bottom: 2px solid rgba(var(--brand-dark-rgb), 1) !important;
}

.article-body .kb-table td {
  border-bottom: 1px solid var(--border-separator) !important;
}

.article-body .kb-table tr:last-child td {
  border-bottom: none !important;
}

/*
  Merged cells (rowspan, e.g. a "Sprachen" column spanning every row) never get a
  border-bottom of their own from the rule above -- they only span past it, so a table
  mixing single-row cells with a tall merged one otherwise reads as disconnected. This
  targets the rowspan attribute directly (works on any existing table with no HTML
  changes) and gives that merged cell a left divider instead, so it still reads as part
  of the same row grid.
*/
.article-body .kb-table td[rowspan] {
  border-left: 1px solid var(--border-light) !important;
}

/* Opt-in: kb-table-dark-header */
.article-body .kb-table.kb-table-dark-header th,
.article-body .kb-table.kb-table-dark-header th * {
  color: var(--bg-white) !important;
}

.article-body .kb-table.kb-table-dark-header th {
  background-color: rgba(var(--brand-dark-rgb), 1) !important;
  border-bottom: none !important;
}

/* Opt-in: kb-table-soft-header */
.article-body .kb-table.kb-table-soft-header th,
.article-body .kb-table.kb-table-soft-header th * {
  color: var(--text-main) !important;
}

.article-body .kb-table.kb-table-soft-header th {
  background-color: rgba(var(--brand-dark-rgb), 0.14) !important;
  border-bottom: none !important;
}

/* Opt-in: kb-table-zebra */
/*
  A translucent tint rather than a solid fill -- var(--bg-neutral-light) is only a few
  shades off white on its own, but as a full solid row fill next to pure white rows it
  reads as more contrast than intended. This keeps rows white by default and barely
  shades the alternating ones instead of swapping in a distinct solid color.
*/
.article-body .kb-table.kb-table-zebra tbody tr:nth-child(even) td {
  background-color: rgba(15, 23, 42, 0.025) !important;
}

/* Opt-in: kb-table-auto-width -- for single/narrow-column tables that
   shouldn't stretch to the full article width (the default, since most
   tables in this KB are multi-column). Any per-<col> width from Zendesk's
   own table-resize feature is irrelevant here either way -- .kb-table's
   width:100% already overrides it regardless, valid or not (a known failure
   mode: the resize feature can leave a broken "width: NaN%" on a <col>).
   The card border/shadow/radius lives on the wrapping <figure
   class="wysiwyg-table">, not the <table> itself, so shrinking just the
   table would leave a full-width empty card around a small table --
   :has() shrinks the figure to match whenever it contains this table.
   width:fit-content (not display:inline-block) specifically so the
   wysiwyg-table-align-* classes below can still center/right-align it via
   margin:auto -- auto margins don't work on inline-block. Scoped to
   :not([style*="width"]) so a manually resized figure (which sets its own
   explicit width below) isn't fought by this shrink-to-content sizing. */
.article-body .wysiwyg-table:has(> .kb-table-auto-width):not([style*="width"]) {
  width: fit-content !important;
}

.article-body .kb-table.kb-table-auto-width {
  width: auto !important;
  min-width: 260px !important;
}

/* If the editor's own resize handle sets a manual width on the figure
   (recognized via [style*="width"] -- that's the only inline style the
   resize feature ever writes there), that manual choice should win: the
   table should fill it rather than staying at its own content-driven auto
   width while the figure's card border balloons out to the wider manual
   size around a narrower header/body. min-width is dropped too, so a
   deliberately narrow manual width isn't fought by the 260px floor above. */
.article-body .wysiwyg-table[style*="width"] > .kb-table-auto-width {
  width: 100% !important;
  min-width: 0 !important;
}

/* Zendesk's own table toolbar writes wysiwyg-table-align-left/center/right
   onto the figure, but the base theme's style.css never styles them -- the
   classes land in the HTML from the editor's alignment button but silently
   do nothing. Only visually meaningful once the figure isn't already
   full-width (kb-table-auto-width, or a manually resized width) -- a
   naturally full-width table has no room to align within regardless. */
.article-body .wysiwyg-table.wysiwyg-table-align-left {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.article-body .wysiwyg-table.wysiwyg-table-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

.article-body .wysiwyg-table.wysiwyg-table-align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* --- End of Tables section --- */

/* --- Collapsible Accordions --- */
.article-body .kb-accordion {
  background: var(--bg-neutral-light) !important;
  padding: 12px !important;
  margin: 14px 0 !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-separator) !important;
}

.article-body .kb-accordion-title {
  font-weight: 600 !important;
  cursor: pointer !important;
  outline: none !important;
}

.article-body .kb-accordion-content {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px dashed var(--border-separator) !important;
}

/* --- Native Accordions (Zendesk's <zd-accordion> / .wysiwyg-disclosure) ---
   Successor to .kb-accordion above (kept for already-published articles).
   Not a copy of the old boxed/dashed look -- styled instead like this
   theme's other bordered content blocks (native callouts, sidebar/TOC
   cards): white card, --radius-md corners, --shadow-soft, so it reads as
   part of the same family. The header hover/chevron treatment mirrors
   .ss-accordion-trigger (the subsection-tree accordion already used
   elsewhere in this theme) for a consistent interaction feel sitewide.

   Documented custom properties (border-color, header-bg, header-bg-hover,
   transition-duration) are set directly on .wysiwyg-disclosure rather than
   :root, with !important -- based on the native-callout precedent, where
   Zendesk's own base rule set defaults directly on the component's host
   element, which always wins over anything merely inherited from :root
   regardless of specificity. Not empirically confirmed for accordions
   specifically (unlike callouts, verified via DevTools) since this hasn't
   been checked live yet -- applying the same defensive pattern preemptively
   rather than waiting to rediscover the same bug. Verify via DevTools after
   deploying, same way the callout indirection was confirmed. */
.wysiwyg-disclosure {
  --zd-wysiwyg-disclosure-border-color: var(--border-light) !important;
  --zd-wysiwyg-disclosure-header-bg: var(--bg-white) !important;
  --zd-wysiwyg-disclosure-header-bg-hover: var(--bg-neutral-light) !important;
  --zd-wysiwyg-disclosure-transition-duration: 0.2s !important;

  /* Background/border/radius/shadow now live in the shared radius-md card
     recipe near the top of this file (.wysiwyg-disclosure is a member of
     that selector list) rather than repeated here -- per Zendesk's own
     docs, --zd-wysiwyg-disclosure-border-color above is only the "hairline
     between panels," not an outer border, so the shared recipe's own
     border is what gives the outer edge its definition; without it,
     box-shadow alone read much fainter than the crisp 1px inter-panel
     hairline. overflow:hidden (kept here, not part of the shared recipe)
     clips the header's full-bleed hover background to the rounded corners
     instead of it poking out square at the top/bottom of the first/last
     section. */
  overflow: hidden !important;
}

/* Kept regardless of the padding fix below: zeroes the browser's default <p>
   margin (~1em top/bottom, from the UA stylesheet) at the panel's own
   edges, so it can't stack with whatever padding is set there, while still
   preserving normal spacing between multiple paragraphs if a section has
   more than one. */
.wysiwyg-disclosure-content > *:first-child {
  margin-top: 0 !important;
}
.wysiwyg-disclosure-content > *:last-child {
  margin-bottom: 0 !important;
}

/* Confirmed via DevTools: Zendesk's own defaults are summary { padding: 16px
   0 } and .wysiwyg-disclosure-content { padding: 4px 0 10px } -- vertical
   padding only, zero horizontal, so header and body text both sit flush
   against the card's left edge with no side breathing room, and the
   vertical rhythm is uneven between the two. Explicit matching padding on
   both instead: same horizontal inset so header/body text align, and a
   single deliberate vertical rhythm rather than Zendesk's default split.

   .wysiwyg-disclosure-content's top padding matches summary's bottom
   padding on purpose (12px vs 14px, close enough) -- confirmed via
   DevTools that the hover background is painted on <summary> itself, sized
   exactly to its own padding box. With content's top padding previously at
   0, the boundary between the hovered (grey) summary and the white content
   below sat with all the breathing room on the summary side and none on
   the content side, invisible when not hovering (both white) but reading
   as a lopsided seam the moment the hover color exposes it. Matching
   padding on both sides of that seam keeps it visually centered. */
.wysiwyg-disclosure summary {
  padding: 14px 20px !important;
}
.wysiwyg-disclosure-content {
  padding: 12px 20px 16px !important;
}

/* --- Layout Grids --- */
.article-body .kb-layout-grid { width: 100% !important; }
.article-body .kb-row {
  display: flex !important;
  gap: 20px !important;
  margin: 16px 0 !important;
}

.article-body .kb-col {
  flex: 1 !important;
  min-width: 0 !important;
}

@media (max-width: 600px) {
  .article-body .kb-row { flex-direction: column !important; }
}

/* --- Badges & Micro Labels --- */
.article-body .kb-badge {
  display: inline-block !important;
  padding: 2px 8px !important;
  font-size: var(--font-size-xs) !important;
  font-weight: bold !important;
  border-radius: var(--radius-lg) !important;
  text-transform: uppercase !important;
  margin: 0 4px !important;
  vertical-align: middle !important;
}
.article-body .kb-badge-green  { background-color: #d1fae5 !important; color: #065f46 !important; }
.article-body .kb-badge-blue   { background-color: #dbeafe !important; color: #1e40af !important; }
.article-body .kb-badge-red    { background-color: #fee2e2 !important; color: #991b1b !important; }
.article-body .kb-badge-yellow { background-color: #fef3c7 !important; color: #92400e !important; }
.article-body .kb-badge-grey,
.article-body .kb-badge-gray   { background-color: #f3f4f6 !important; color: #374151 !important; }

/* --- Media Embeds --- */
.article-body .kb-iframe-embed {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  border: none !important;
  margin: 0px 0 !important;
  border-radius: 0px !important;
  display: block !important;
}

.article-body .kb-youtube-embed {
  width: 100% !important;
  max-width: 640px !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  border: none !important;
  margin: 18px 0 !important;
  border-radius: var(--radius-md) !important;
  display: block !important;
}

/* Rounded corners for every image in article content */
.article-body img {
  border-radius: var(--radius-sm) !important;
}

/* --- External Link Decorations --- */
.article-body a[href*="manager.sosafe.de"]::after {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 5px !important;
  vertical-align: middle !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJTb1NhZmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOiMwMEQzN0U7fTwvc3R5bGU+PGcgaWQ9IkVsZWN0cmljX0dyZWVuIj48cGF0aCBpZD0ibG9nb19tYXJrIiBjbGFzcz0ic3QwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNTYsIDI1Nikgc2NhbGUoMi42NTYpIHRyYW5zbGF0ZSgtMjMxLjMsIC0yMzEuMykiIGQ9Ik0yMzEuMywxNTQuMmMtNDIuNiwwLTc3LjEsMzQuNS03Ny4xLDc3LjFzMzQuNSw3Ny4xLDc3LjEsNzcuMWM0Mi42LDAsNzcuMS0zNC41LDc3LjEtNzcuMVMyNzMuOSwxNTQuMiwyMzEuMywxNTQuMnogTTI2OC41LDI5NS43TDI2OC41LDI5NS43Yy0xMC4yLDUuOS0zMy4xLDUuNC02Ni4zLTE0Yy0zMy40LTE5LTQ1LjMtMzguNi00NS4zLTUwLjRjMC0xMS44LDExLjktMzEuNCw0NS4zLTUwLjRjMzMuMi0xOS40LDU2LjEtMTkuOSw2Ni4zLTE0bDAsMGMxMC4yLDUuOSwyMS4yLDI2LDIxLDY0LjRDMjg5LjcsMjY5LjcsMjc4LjcsMjg5LjgsMjY4LjUsMjk1Ljd6Ii8+PC9nPjwvc3ZnPg==") !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s ease !important;
}

.article-body a[href*="manager.sosafe.de"]:hover::after {
  opacity: 1 !important;
}

.article-body a[href^="http"]:not([href*="sosafe.de"]):not([href*="sosafe-awareness.com"]):not([href*="zendesk.com"])::after {
  content: " ↗" !important;
  display: inline-block !important;
  font-size: 0.85em !important;
  font-weight: bold !important;
  opacity: 0.5 !important;
  margin-left: 3px !important;
  vertical-align: baseline !important;
  transition: opacity 0.2s ease !important;
}

.article-body a[href^="http"]:not([href*="sosafe.de"]):not([href*="sosafe-awareness.com"]):not([href*="zendesk.com"]):hover::after {
  opacity: 0.9 !important;
}

/* --- Article Navigation Buttons ---
   Author-facing component: content editors paste one of the two HTML
   snippets (see CLAUDE.md) directly into the WYSIWYG source view. Every
   property here is duplicated as inline styles in those snippets, because
   Zendesk's article editor doesn't load custom.css — same policy as every
   other .kb-* content-block class in this file, and for the same reason:
   inline styles must carry the whole look on their own in the editor
   preview, while these !important class rules take over on the live site
   (inline styles lose to an external !important rule, but nothing else in
   the editor's own preview pane does). Modeled on the DS Secondary button
   (white/bordered, not the filled violet Primary) deliberately — these
   buttons are always peers with no priority between them, so none of them
   should read as more "primary" than another. */
/* No fixed max-width by design: the row sizes to its buttons' own content
   (short CTAs stay compact and centered) but is still free to grow as wide
   as the article itself if a long CTA needs the room -- fit-content plus
   max-width:100% as the only cap, rather than an arbitrary fixed limit. */
.article-body .kb-button-row {
  display: flex !important;
  gap: 16px !important;
  margin: 24px auto !important;
  align-items: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.article-body .kb-button-row > .kb-button {
  width: auto !important;
  flex: 0 1 auto !important;
}

/* Three-button ("branch") variant: back-link on the left, two alternatives
   stacked on the right. Deliberately NOT a nested wrapper div containing the
   two right-hand buttons + divider (that was the original approach) —
   Zendesk's article editor sanitizer unwraps/flattens nested custom divs in
   its rendered preview, which turned the intended [back] [stack[A, or, B]]
   structure into four flat, equal-width flex items in a single row with a
   squeezed, text-wrapping "or" column. A flat list of 4 direct children
   placed via CSS Grid avoids relying on any wrapper surviving the
   sanitizer — there's nothing to unwrap. */
.article-body .kb-button-branch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
  gap: 12px 16px !important;
  margin: 24px 0 !important;
}

.article-body .kb-button-branch > *:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.article-body .kb-button-branch > *:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.article-body .kb-button-branch > *:nth-child(3) {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.article-body .kb-button-branch > *:nth-child(4) {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

@media (max-width: 600px) {
  .article-body .kb-button-branch {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }

  .article-body .kb-button-branch > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Single centered button — .kb-button's own width:100% is meant to fill a
   row/branch cell, so a lone button needs this wrapper to both center it and
   size it to its content instead of stretching full-width. */
.article-body .kb-button-single {
  display: flex !important;
  justify-content: center !important;
  margin: 24px 0 !important;
}

.article-body .kb-button-single > .kb-button {
  width: auto !important;
}

.article-body .kb-button {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px 20px !important;
  background-color: #ffffff !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms ease, border-color 150ms ease !important;
  cursor: pointer !important;
}

.article-body .kb-button:hover {
  background-color: #f5f3f2 !important;
  border-color: #adb5bd !important;
  text-decoration: none !important;
}

.article-body .kb-button:active {
  transform: scale(0.97) !important;
}

.article-body .kb-button-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background-color: #f3f0ff !important;
  color: #372a8f !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.article-body .kb-button-label {
  color: #372a8f !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Optional divider between two stacked buttons in the 3-button variant —
   reuses the site's existing overline/section-heading convention (see
   "Section heading style" in CLAUDE.md) rather than inventing a new style.
   Authors can delete this element entirely if the grouping is already clear
   without it; it's a single standalone element specifically so it's easy to
   remove without touching anything else. */
.article-body .kb-button-or {
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #687078 !important;
}

@media (max-width: 600px) {
  .article-body .kb-button-row {
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Content-sized buttons look odd floating in a narrow vertical stack --
     full-width is the standard mobile pattern, so override the desktop
     content-sizing specifically for this breakpoint. */
  .article-body .kb-button-row > .kb-button {
    width: 100% !important;
  }
}

/* ==========================================================================
   SECTION 9: INTERACTIVE LIGHTBOX & VISUAL MODAL CANVASES
   ========================================================================== */

.article-body .kb-image-lightbox-wrapper {
  position: relative !important;
  display: inline-block !important;
  max-width: 100% !important;
  cursor: zoom-in !important;
}

.article-body .kb-image-lightbox-wrapper::after {
  content: "" !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: rgba(var(--brand-dark-rgb), 0.85) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") !important;
  background-size: 20px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0 !important;
  transform: scale(0.85) !important;
  transition: var(--transition-smooth) !important;
  pointer-events: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.article-body .kb-image-lightbox-wrapper:hover::after {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.kb-lightbox-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(var(--brand-darker-rgb), 0.92) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease-in-out !important;
  backdrop-filter: blur(4px) !important;
}

.kb-lightbox-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.kb-lightbox-image {
  max-width: 92vw !important;
  max-height: 85vh !important;
  object-fit: contain !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-modal) !important;
  transform: scale(0.96) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.kb-lightbox-overlay.active .kb-lightbox-image {
  transform: scale(1) !important;
}

.kb-lightbox-close {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  background: none !important;
  border: none !important;
  color: var(--bg-white) !important;
  font-size: 42px !important;
  cursor: pointer !important;
  opacity: 0.6 !important;
  line-height: 1 !important;
  transition: opacity 0.15s ease-in-out !important;
}

.kb-lightbox-close:hover {
  opacity: 1 !important;
}

/* ==========================================================================
   SECTION 10: MULTILINGUAL LEGAL FOOTER SYSTEM
   ========================================================================== */

.custom-footer-legal-block {
  display: flex !important;
  flex-direction: column !important; 
  gap: 12px !important;              
  font-family: var(--font-stack) !important;
  font-size: var(--font-size-base) !important;
  line-height: 1.4 !important;
}

.footer-legal-links {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;              
}

.footer-legal-links a {
  color: var(--text-secondary) !important; 
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: var(--transition-smooth) !important;
}

.footer-copyright-text {
  color: var(--text-secondary) !important; 
  font-weight: 400 !important;
}

/* ==========================================================================
   SECTION 11: STATIC WIDESCREEN CONTAINER HOUSING
   ========================================================================== */

.article-body {
  max-width: var(--article-body-max-width) !important;
  width: 100% !important;
}

.article-body img,
.article-body iframe,
.article-body video {
  max-width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   SECTION 12: KNOWLEDGE BASE METADATA DISPLAY STRIPS (PROMINENT BADGES)
   ========================================================================== */

/* 
   1. Header Track Compactness:
   Clamps the header down to a tight, precise baseline clearance track.
*/
.article-header {
  margin-bottom: 16px !important; /* Balanced layout tracking gap */
}

/* 
   FIX: Collapses Content Container Top Bleed.
   Forces the text container and its very first nested element (like a paragraph or heading)
   to drop its native browser top margins so it doesn't double-stack with the header.
*/
.article-info,
.article-content,
.article-body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* .article-content's base-theme margin (40px 0) still applies at the
   bottom -- stacks with .article-footer's own padding-bottom (20px, kept
   even when that div is empty) and .article-votes's padding-top (48px,
   see SECTION 17) for roughly 108px of cumulative gap before "Was this
   article helpful?" even starts. Trimmed here without touching the
   already-zeroed top margin above. */
.article-content {
  margin-bottom: 20px !important;
}

/* .article-footer is a flex row for the share button + comment-count link,
   both optional -- when neither setting is on, it renders with no element
   children at all, but its base-theme padding-bottom (20px) still applies,
   adding phantom space before .article-votes below. :not(:has(*)) catches
   this instead of :empty, since Handlebars' conditional blocks leave
   whitespace text nodes behind even when both are false, which :empty
   wouldn't see past. */
.article-footer:not(:has(*)) {
  padding-bottom: 0 !important;
}

.article-body > *:first-child {
  margin-top: 0px !important; /* FIX: Added 'px' unit so the browser executes your spacing tweak */
}

/* Auto-translation disclaimer (fr/nl/es/it only, see article_page.hbs) --
   deliberately understated: small, muted, italic, no border/background/
   icon. This is a disclaimer, not a callout -- it shouldn't compete for
   attention with the article content above it. */
.ss-translation-disclaimer {
  margin-top: 24px !important;
  font-size: var(--font-size-sm) !important;
  font-style: italic !important;
  color: var(--text-secondary) !important;
}

/* color needs !important: a:visited has higher specificity than this
   single-class selector (see CLAUDE.md's a:visited note) */
.ss-translation-disclaimer a {
  color: var(--text-secondary) !important;
  text-decoration: underline !important;
}

/* 
   2. The Main Flex Split Track:
   Locks left-side details and right-side badges onto a perfectly centered, 
   unified horizontal baseline row, expanding full-width.
*/
.article-header .article-author {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important; /* Locks vertical cross-axis alignment perfectly */
  flex-wrap: wrap !important;     /* Responsive safety wrap for smaller laptop screens */
  gap: 16px !important;
  width: 100% !important;
  margin-bottom: 0 !important;   /* Prevents duplicate margin stack errors */
}

/* Forces profile img and relative dates to pack tightly together */
.article-author .author-left-track {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* 
   3. Right Side Badge Column:
   Gathers active meta cards cleanly next to each other.
*/
.author-right-badges {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 
   4. The Premium Pill Foundation:
   High-contrast component borders, soft padding, and balanced text spacing.
*/
/* Shared pill skeleton -- .custom-meta-pill and the .custom-ct-pill
   variants below use identical spacing/radius/type sizing, differing only
   in display mode (meta-pill toggles none/flex via JS) and color. */
.custom-meta-pill,
.custom-ct-pill.pill-ct-package,
.custom-ct-pill.pill-ct-whitelisting,
.custom-ct-pill.pill-ct-microsoft365,
.custom-ct-pill.pill-ct-gworkspace {
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.3 !important;
}

.custom-meta-pill {
  display: none; /* Controlled dynamically via JS string check */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01) !important;
}

/* Package Availability Badge Style (Clean Tinted Brand Border-Box) */
.custom-meta-pill.pill-package {
  background-color: rgba(0, 80, 80, 0.03) !important; /* Smooth 3% brand opacity */
  color: var(--brand-primary) !important;
  border: 1px solid rgba(0, 80, 80, 0.16) !important; /* Crisp brand vector ring */
}

/* Target Groups / Roles Badge Style (Clean Slate Design System Box) */
.custom-meta-pill.pill-role {
  background-color: var(--color-slate-50) !important;
  color: var(--color-slate-700) !important;
  border: 1px solid var(--color-slate-200) !important;
}

/* 
   5. Core Typographic Hierarchies:
   Maximizes readability within the badges by using sharp weight distributions.
*/
.custom-meta-pill .meta-label {
  font-weight: 600 !important;
  margin-right: 4px !important;
}

/* Individualized label colors to match their respective component themes */
.pill-package .meta-label {
  color: #0f5353 !important; /* Deepened high-contrast brand primary */
}

.pill-role .meta-label {
  color: var(--color-slate-900) !important;
}

.custom-meta-pill .meta-value {
  font-weight: 400 !important;
}

/* 
   6. Secondary Content Tags Row (Parallel Clickable Track):
   Pushes the interactive hyperlink rows right underneath the static labels
   along the right-hand layout margin.
*/
.article-ct-meta-row {
  display: none; /* Controlled dynamically by JavaScript parsing engine */
  justify-content: flex-end !important;
  width: 100% !important;
  margin-top: 6px !important; /* Perfect visual clearance gap below label pills */
  margin-bottom: 0 !important;
}

/* Clean Slate Design System framework for the interactive badges */
.custom-ct-pill.pill-ct-package,
.custom-ct-pill.pill-ct-whitelisting,
.custom-ct-pill.pill-ct-microsoft365,
.custom-ct-pill.pill-ct-gworkspace {
  display: inline-flex !important;
  background-color: var(--bg-white) !important;
  color: var(--color-slate-600) !important;
  border: 1px solid var(--color-slate-300) !important;
}

.custom-ct-pill .meta-label {
  font-weight: 600 !important;
  color: var(--color-slate-900) !important; /* High contrast Dark Slate label prefix text */
  margin-right: 4px !important;
}

/* Interactive Hyperlink styling rules */
.custom-ct-pill .ct-badge-anchor {
  color: var(--brand-primary) !important; /* Highlights searchable options in active brand color */
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.12s ease, text-decoration 0.12s ease !important;
}

/* Snappy hover transformations to give clear tactile feedback to users */
.custom-ct-pill .ct-badge-anchor:hover {
  text-decoration: underline !important;
  color: #0f5353 !important; /* Deepens brand color slightly on link hover */
}

/* --- Defensive Fix for Empty Content Tag Badges --- */

/* 1. If JavaScript clears the hidden style but leaves the pill text empty, force it to hide */
.custom-ct-pill:empty {
  display: none !important;
}

/* 
   2. Absolute Phantom Box Protection
   Using the modern CSS :has() selector, this tells the outer container to completely 
   vanish if it doesn't contain a tag pill, or if the pill inside it is empty!
*/
.author-right-badges:not(:has(.custom-ct-pill:not(:empty))) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/*
   Both the metadata (date/updated) and content tag badges are independently
   toggleable via settings — .meta-group and .author-right-badges are each
   only rendered server-side when their setting is on. Hide the whole wrapper
   only when BOTH are absent, so enabling either one keeps it visible.
*/
.article-author:not(:has(.meta-group, .author-right-badges)) {
  display: none !important;
}

/* ==========================================================================
   SECTION 13: PREMIUM SEARCH RESULTS SYSTEM
   ========================================================================== */

/* --- 1. Main Search Layout Grid --- */
@media (min-width: 992px) {
  .search-results {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 48px !important;
    align-items: start !important;
    margin-top: 16px !important; /* Tightened breathing room beneath full-width heading line */
    width: 100% !important;
  }
}

.search-results-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important; 
}

/* --- 2. Search Result Component Cards --- */
.search-results-list > li {
  list-style: none !important;
  padding: 24px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.search-results-list > li:hover {
  border-color: var(--border-medium) !important;
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-1px);
}

.search-results-list article {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important; 
}

/* Main Subheading Result Count Header */
.search-results-subheading {
  width: 100% !important;
  font-size: var(--font-size-xl) !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--border-light) !important; 
  transition: padding-left var(--layout-transition-duration) var(--layout-transition-timing) !important;
}

/* 
   FIXED: Symmetrical Text Alignment Track.
   On widescreen layouts, this offsets the text by the exact width of the 
   filters sidebar (260px) + the layout gap (48px). The text now frames 
   the results perfectly, while the bottom line safely anchors both columns.
*/
@media (min-width: 992px) {
  .search-results-subheading {
    padding-left: calc(260px + 48px) !important;
  }
}

/* Result Title Link Typography */
.search-result-title {
  font-size: var(--font-size-lg) !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.search-result-title a {
  color: var(--text-main) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 0.12s ease !important;
}

.search-result-title a:hover {
  color: var(--brand-primary) !important;
  text-decoration: none !important;
}

/* --- 3. Metadata Breadcrumbs Paths --- */
.search-result-meta-container {
  margin: 6px 0 0 0 !important; /* FIXED: Gives the path line comfortable room to breathe */
  padding: 0 !important;
}

.search-result-breadcrumbs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.search-result-breadcrumbs li {
  font-size: var(--font-size-sm) !important;
  color: var(--color-slate-600) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important; 
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.search-result-breadcrumbs li a {
  color: var(--color-slate-600) !important;
  text-decoration: none !important;
  transition: color 0.12s ease !important;
}

.search-result-breadcrumbs li a:hover {
  color: var(--brand-primary) !important;
  text-decoration: underline !important;
}

.search-result-breadcrumbs li + li:before,
.search-result-breadcrumbs li + li::before {
  content: "/" !important;
  /* Was --border-medium (#ced4da), a token meant for subtle 1px borders, not
     text -- barely visible as a separator character. Matches the page-level
     .breadcrumbs component's separator treatment instead. */
  color: var(--color-slate-600) !important;
  margin: 0 4px !important;
  font-weight: 700 !important;
  font-size: var(--font-size-sm) !important;
}

/* --- 4. Excerpt Snippets with Trailing Dots --- */
.search-result-description {
  font-size: var(--font-size-base) !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.search-result-description::after {
  content: " …" !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
}

.search-result-description em,
.search-result-description mark {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  background-color: rgba(4, 63, 71, 0.08) !important;
  padding: 1px 6px !important;
  border-radius: var(--radius-sm) !important;
}

/* --- 5. Premium Facet Sidebar Card Container --- */
.search-results-sidebar {
  padding: 20px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important; 
}

.search-results-sidebar h3.sidenav-title {
  font-size: var(--font-size-sm) !important; 
  font-weight: 700 !important;
  color: var(--text-main) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px dashed var(--border-light) !important; 
}

.search-results-sidebar .multibrand-filter-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.search-results-sidebar .sidenav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px 8px 12px !important; /* Asymmetrical padding accommodates the active left indicator track */
  font-size: var(--font-size-md) !important; 
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition-smooth) !important;
  line-height: 1.4 !important;
  border-left: 3px solid transparent !important; /* Placeholder track baseline prevents text shift */
}

.search-results-sidebar .sidenav-item:hover {
  background-color: var(--brand-hover) !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
}

.search-results-sidebar .doc-count {
  font-size: var(--font-size-sm) !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
  margin-left: 8px !important;
}

/* 
   RESTORED: High-Contrast Active Left Accent Strip.
   Brings back the left vertical brand line inside the filter cards, 
   perfectly aligning with your main documentation tree system rules.
*/
.search-results-sidebar .sidenav-item.current {
  background-color: var(--bg-active-highlight) !important; 
  color: var(--brand-primary) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--brand-primary) !important; /* Brand left indicator strip matches sidebars */
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.search-results-sidebar .sidenav-item.current .doc-count {
  color: var(--brand-primary) !important;
  font-weight: 600 !important;
}

.see-all-filters {
  background: none !important;
  border: none !important;
  padding: 6px 10px !important;
  font-size: var(--font-size-sm) !important;
  color: var(--brand-primary) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: left !important;
  margin-top: 4px !important;
}

.see-all-filters:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   SECTION 15: ANNOUNCEMENT BANNER
   ========================================================================== */

#ss-kb-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 24px;
  background-color: #f3f0ff;
  border-bottom: 1px solid #d0bfff;
}

.ss-kb-banner-text {
  font-size: var(--font-size-sm);
  color: #2b2070;
  text-align: center;
}

.ss-kb-banner-link {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #372a8f;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 6px;
  white-space: nowrap;
}

.ss-kb-banner-link:hover {
  color: #2b2070;
}

.ss-kb-banner-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: #372a8f;
  opacity: 0.6;
}

.ss-kb-banner-close:hover {
  opacity: 1;
  background-color: #e5dbff;
}

@media (max-width: 767px) {
  #ss-kb-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 40px 10px 16px;
    position: relative;
  }

  .ss-kb-banner-close {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

/* ==========================================================================
   SECTION 16: STATUSPAGE BADGE (centered between logo and nav)
   Deliberately not a floating corner toast: the Zendesk chat widget's
   launcher is a cross-origin iframe that Zendesk repositions/resizes on its
   own whenever it opens, so we can't reliably keep two floating elements
   from overlapping in the same corner. Also deliberately not a full-width
   bar under the header: a thin border-only accent on a white background
   didn't read as distinct enough against the page. Styled as a variant of
   the same pill recipe used elsewhere (.custom-meta-pill.pill-package):
   rgba tint background + solid-color text + rgba border.
   ========================================================================== */

/* Sits as a sibling of .logo inside header.header (display:flex;
   justify-content:space-between), taking the remaining space and centering
   the (naturally-sized) pill within it — rather than the pill itself
   stretching, or just hugging the logo's edge. */
#ss-status-banner-wrap {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

#ss-status-banner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 4px 6px 4px 12px;
  border-radius: var(--radius-pill);
  background-color: rgba(var(--ss-status-rgb, 104, 112, 120), 0.1);
  border: 1px solid rgba(var(--ss-status-rgb, 104, 112, 120), 0.35);
  line-height: 1;
}

/* color/text-decoration need !important: this class sits directly on the
   <a>, so its specificity (0,1,0) loses outright to base theme's a:visited
   (0,1,1) */
.ss-status-banner-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ss-status-text, var(--text-main)) !important;
  text-decoration: none !important;
}

.ss-status-banner-link:hover {
  text-decoration: underline !important;
}

.ss-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
  font-style: normal;
}

.ss-status-banner-text {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  padding: 6px 0;
}

.ss-status-banner-viewlink {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-style: normal;
  text-decoration: underline;
  white-space: nowrap;
  flex-shrink: 0;
}

.ss-status-banner-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ss-status-text, var(--text-muted));
  opacity: 0.7;
}

.ss-status-banner-close:hover {
  opacity: 1;
  background-color: rgba(var(--ss-status-rgb, 104, 112, 120), 0.15);
}

/* ==========================================================================
   Cookie consent gating — hidden until Cookiebot grants marketing consent
   ========================================================================== */
.ss-consent-gated--widget,
.ss-consent-gated--answers {
  display: none !important;
}

/* ==========================================================================
   SECTION 17: ARTICLE VOTING + RELATED/RECENT ARTICLES
   ========================================================================== */

/* --- Voting section --- */

.article-votes {
  border-top: 1px solid var(--border-light) !important;
  /* Was 48px top -- tuned in isolation when this section was made bigger;
     combined with .article-content's and .article-footer's own bottom
     spacing (see the note near .article-info above) it stacked into an
     oversized gap before this section even starts. */
  padding: 16px 0 16px !important;
  text-align: center !important;
}

.article-votes-question {
  font-size: var(--font-size-lg) !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  margin: 0 0 20px !important;
}

.article-votes-controls {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
}

.article-vote {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 24px !important;
  font-size: var(--font-size-base) !important;
  font-weight: 500 !important;
  color: var(--text-tertiary) !important;
  background-color: var(--bg-white) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  transition: background-color 0.15s ease, transform 200ms cubic-bezier(0.2, 0, 0, 1) !important;
}

.article-vote:hover {
  background-color: var(--bg-neutral-light) !important;
  text-decoration: none !important;
  color: var(--text-tertiary) !important;
}

.article-vote:active {
  transform: scale(0.97) !important;
}

/* Selected/voted state — DS primary button (DS violet is intentionally hardcoded, see CLAUDE.md) */
.article-vote.button-primary {
  background-color: #372a8f !important;
  color: var(--bg-white) !important;
  border-color: transparent !important;
}

.article-vote.button-primary:hover {
  background-color: #2b2070 !important;
  color: var(--bg-white) !important;
}

/* --- Related / recently viewed articles --- */

.article-relatives {
  border-top: 1px solid var(--border-light) !important;
  padding-top: 32px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 32px !important;
}

.recent-articles,
.related-articles {
  flex: 1 !important;
  min-width: 200px !important;
}

.recent-articles-title,
.related-articles-title {
  font-size: var(--font-size-xs) !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin: 0 0 12px !important;
}

.recent-articles ul,
.related-articles ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 8px !important;
}

.recent-articles a,
.related-articles a {
  color: var(--text-main) !important;
  font-size: var(--font-size-md) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.recent-articles a:hover,
.related-articles a:hover {
  color: var(--brand-primary) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   SECTION 18: ERROR PAGE CARD + LOCALE FALLBACK REDIRECT NOTICE
   ========================================================================== */

.error-page-card {
  width: 100%;
  max-width: 560px;
  margin: 60px auto;
  padding: 48px 40px;
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.error-page-card h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 12px;
}

.error-page-card h2 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-main);
  margin: 20px 0 8px;
}

.error-page-card p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 8px;
}

/* color needs !important: this class sits directly on the <a>, so its
   specificity (0,1,0) loses outright to base theme's a:visited (0,1,1) */
.error-back-home-link {
  display: block;
  margin-top: 16px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary) !important;
  text-decoration: none !important;
}

.error-back-home-link:hover {
  color: var(--text-main) !important;
  text-decoration: underline !important;
}

#ss-locale-fallback-notice {
  margin-top: 8px;
}

#ss-fallback-countdown {
  font-weight: 700;
  color: var(--brand-primary);
}

.ss-fallback-progress {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--bg-neutral-light);
  overflow: hidden;
  margin: 20px 0 24px;
}

.ss-fallback-progress-fill {
  width: 0%;
  height: 100%;
  background-color: var(--brand-primary);
  border-radius: var(--radius-pill);
}

/* no !important needed here despite being an <a>: ID selector specificity
   (1,0,0) already outright beats base theme's a:visited (0,1,1) */
#ss-fallback-continue-now {
  display: inline-block;
  padding: 10px 24px;
  background-color: var(--brand-primary);
  color: var(--bg-white);
  font-weight: 500;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color 0.15s ease, transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

#ss-fallback-continue-now:hover {
  background-color: var(--brand-primary-hover);
  color: var(--bg-white);
}

#ss-fallback-continue-now:active {
  transform: scale(0.97);
}

/* ==========================================================================
   SECTION 19: NEW REQUEST FORM NOTICE
   Same violet "info" treatment as the announcement banner (SECTION 15) --
   deliberately not the danger/red panel palette, since this is a scoping
   notice, not a warning. */
.ss-request-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 650px;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 12px 16px;
  background-color: #f3f0ff;
  border: 1px solid #d0bfff;
  border-radius: var(--radius-md);
}

/* Deliberately no font-size/color/line-height here -- inherits body's
   defaults (15px/1.5/$text_color), confirmed via DevTools against the
   user's target look. This is routine consent copy, not meant to draw
   attention like .ss-request-notice above it. */
.ss-privacy-notice {
  max-width: 650px;
  margin: 20px 0;
}

.ss-request-notice-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #372a8f;
}

.ss-request-notice-text {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #2b2070;
}

/* Attachment field replacement -- deliberately plain (no box/icon/color),
   styled like a regular Garden field's label + hint text so it blends in
   with the rest of the form instead of standing out like the violet notice
   above. Inserted via JS in new_request_page.hbs, right after the "Product
   Area" field. */
.ss-attachment-notice {
  margin-top: 0px;
  margin-bottom: 0;
}

.ss-attachment-notice-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 20px;
  /* No color set -- inherits body's $text_color, same as Garden's own field
     labels (confirmed via DevTools: Garden's label has no color of its own,
     it also just inherits body's color -- a DS gray here would mismatch). */
  margin-bottom: 0px;
}

.ss-attachment-notice-hint {
  font-size: var(--font-size-base);
  /* #5c6970 doesn't match any existing token -- it's Garden's own internal
     hint-text gray (confirmed via DevTools), not tied to any theme setting
     or DS color, so it's hardcoded here rather than reusing --text-secondary
     (#687078), which is close but not identical. */
  color: #5c6970;
  line-height: 20px;
}