/* ==========================================================================
   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) --- */
  
  /* --- 3. Core Brand Neutrals & Base Colors --- */
  --bg-white: #ffffff;
  --bg-neutral-light: #f8fafc;
  --text-main: #1e293b;
  --text-secondary: #49545c;
  --text-muted: #87929d;
  
  /* --- 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: #991b1b;

  /* --- 5. Custom UI Slate Palette --- */
  --color-slate-300: #cbd5e1;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-900: #1e293b;
  --bg-active-highlight: #f1f5f9;                /* Smooth active state navigation tint */

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

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

  /* --- 8. Shadows & Focus States --- */
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.08);
  --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;
}

/* ==========================================================================
   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;
}

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

/* ==========================================================================
   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;
}

.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;
}

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

.hero-welcome-message {
  display: none !important;
  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;
}

html[lang|="de"] .hero-welcome-message.lang-de { display: block !important; }
html[lang|="nl"] .hero-welcome-message.lang-nl { display: block !important; }
html[lang|="fr"] .hero-welcome-message.lang-fr { display: block !important; }
html[lang|="en"] .hero-welcome-message.lang-en { display: block !important; }

html:not([lang|="de"]):not([lang|="nl"]):not([lang|="fr"]):not([lang|="en"]) .hero-welcome-message.lang-en {
  display: block !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: 6px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  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) !important; 
  border: 1px solid rgba(255, 255, 255, 0.2) !important; 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);       
  text-decoration: none !important;
  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 !important;
}

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

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

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

.blocks-list {
  position: relative !important;
  z-index: 10 !important;
  margin-top: -120px !important;
}

@media (max-width: 768px) {
  .blocks-list {
    margin-top: -40px !important;
  }
}

.category-icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.category-custom-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.blocks-item {
  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;
  padding: 24px !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !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-secondary) !important;
}

.blocks-item-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  outline: none !important;
  text-decoration: none !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-title,
.blocks-item-description {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}

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

.blocks-item-description {
  font-size: var(--font-size-base) !important;
  font-weight: 400 !important;
	color: var(--text-secondary) !important; /* FIXED: Richer contrast for better readability */
  line-height: 1.6 !important;            /* Adds comfortable breathing room between lines */
}

/* 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 5b: PROMOTED ARTICLES (homepage)
   ========================================================================== */

/* Center the whole section and its heading */
.knowledge-base .articles {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 48px;
}

/* Flex row of cards, centered and wrapping */
.promoted-articles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  width: 100%;
}

/* Individual card — same visual language as .blocks-item but more compact */
.promoted-articles-item {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 14px 20px;
  transition: var(--transition-smooth);
  flex: 0 1 260px;
  min-width: 180px;
  max-width: 300px;
}

.promoted-articles-item:hover {
  background-color: var(--brand-hover);
  border-color: var(--border-medium);
  box-shadow: var(--shadow-hover);
}

.promoted-articles-item a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-main);
  text-decoration: none;
}

.promoted-articles-item a:hover {
  color: var(--brand-primary);
  text-decoration: none;
}

/* ==========================================================================
   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: 1000px !important;
    flex-basis: auto !important; 
    margin: 0 auto !important; 
  }

  /* 
     RESTORED: Category Grid Track alignment.
     Forces cards to retain their natural height instead of stretching to equal heights.
  */
  /* Category page now renders one unified card (see .category-sections-card) rather
     than a grid of separate section cards, so this simply needs to lay out that single
     card at full width within .category-content. */
  .category-container .section-tree {
    display: block !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 {
    width: 100% !important;
    max-width: 800px !important; 
    margin: 0 auto !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: 24px !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;
}

.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 — tighten the header: smaller title, smaller description,
   less vertical breathing room. Scoped to .category-content so section,
   community, and other pages that also use .page-header are unaffected. */
.category-content .page-header {
  padding: 0 0 10px !important;
  margin-bottom: 16px !important;
}

/* Icon wrapper has no icon when category ID doesn't match any in the template —
   collapse its margin so it doesn't contribute dead space. */
.category-content .category-icon-wrapper:not(:has(img)) {
  margin-bottom: 0 !important;
}

.category-content .page-header h1 {
  font-size: 1.75rem !important;
  margin-bottom: 8px !important;
}

.category-content .page-header-description {
  font-size: var(--font-size-base) !important;
}

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

/* --- Section Cards & Parent Playlists --- */
/* Used by section_page.hbs for its single-section card. Left untouched so section pages
   keep their own boxed-card look. */
.custom-section-card {
  background-color: var(--bg-white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px 24px !important;
  margin-bottom: var(--spacing-card-gap) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Category page: one shared card wrapping every section, so a category made up of
   several sections still reads as a single continuous list. */
.category-sections-card {
  background-color: var(--bg-white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  padding: 22px 24px !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Each section inside the unified card is a plain block (no box of its own). Every
   block after the first gets a divider line instead of a gap between separate cards. */
.category-section-block + .category-section-block {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--border-light) !important;
}

/* Hook for hiding a section's title on the category page (see the template comment
   next to .custom-section-card-title for how to target specific section IDs). */
.section-title-hidden {
  display: none !important;
}

/*
   Category-page-only spacing tightening. .custom-section-card-title, .custom-article-item
   and .custom-subsections-container are shared with section_page.hbs, so these overrides
   are scoped under .category-sections-card rather than edited directly -- section pages
   keep their original (more generous) spacing untouched.
*/
.category-sections-card .custom-section-card-title {
  margin-bottom: 8px !important;
}

.category-sections-card .custom-article-item {
  padding: 6px 0 !important;
}

.category-sections-card .custom-subsections-container {
  gap: 12px !important;
}

.category-sections-card .custom-parent-article-list + .custom-subsections-container {
  margin-top: 12px !important;
  padding-top: 12px !important;
}

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

.custom-section-card-title a {
  color: var(--text-main) !important;
  text-decoration: none !important;
}

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

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

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

.custom-article-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  font-size: var(--font-size-md) !important;
}

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

/* --- Subsection Folder Layouts --- */
.custom-subsections-container {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-card-gap) !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 
   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 {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--border-light) !important; /* Clean, subtle border matching the card style */
}

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

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

.custom-subsection-title a {
  color: var(--color-slate-900) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.custom-subsection-title a:hover {
  color: var(--brand-primary) !important;
}

/* --- Subsection Tree Mechanics --- */
.subsection-tree-icon {
  display: none !important;
}

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

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

/* Vertical Trunk Segment */
.custom-subsection-article-item::before {
  content: "" !important;
  position: absolute !important;
  left: -16px !important;
  width: 2px !important;
  background-color: var(--color-slate-300) !important;
  top: -4px !important;
  bottom: -8px !important;
}

.custom-subsection-article-item:last-child::before {
  top: -4px !important;
  bottom: auto !important;
  height: 17.5px !important;
}

/* Horizontal connector branch */
.custom-subsection-article-item::after {
  content: "" !important;
  position: absolute !important;
  left: -16px !important;
  top: 13.5px !important;
  width: 8px !important;
  height: 1.5px !important;
  background-color: var(--color-slate-300) !important;
}

.custom-subsection-article-item a {
  color: var(--color-slate-600) !important;
  font-weight: 400 !important;
  font-size: var(--font-size-md) !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1.3 !important;
  transition: color 0.15s ease !important;
}

.custom-subsection-article-item a:hover {
  color: var(--brand-primary) !important;
}

/* ==========================================================================
   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 {
  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;
  padding: 16px !important;
  width: var(--sidebar-width) !important; 
  white-space: nowrap !important;
  overflow: hidden !important; 
  opacity: 1 !important;
  transition: width var(--layout-transition-duration) var(--layout-transition-timing), opacity 0.2s ease !important;
}

/* Manual Drawer Collapsed States */
.sidebar-drawer-collapsed .article-sidebar {
  width: 0 !important; 
  max-width: 0 !important; 
  min-width: 0 !important; 
  padding: 0 !important; 
  border: none !important; 
}

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

.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 !important;
  top: 14px !important;
  right: -13px !important; 
  left: auto !important;
  z-index: 10 !important;
  width: 26px !important;
  height: 26px !important;
  background-color: var(--bg-white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-soft) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted) !important;
  padding: 0 !important;
  transform: rotate(0deg) translateX(0px) !important;
  transition: transform var(--layout-transition-duration) var(--layout-transition-timing), 
              color var(--transition-smooth), 
              border-color var(--transition-smooth), 
              box-shadow var(--transition-smooth) !important;
}

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

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

/* --- Flat Navigation Title & Sidenav Link Trees --- */
.sidebar-flat-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

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

.tree-article-link {
  display: block !important;
  padding: 4px 8px !important;
  font-size: var(--font-size-sm) !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  border-radius: var(--radius-sm) !important;
  line-height: 1.4 !important;
  transition: var(--transition-smooth) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* Articles that belong to a labeled group (see .tree-group-label below) sit slightly
   indented, hinting at the section > article hierarchy that isn't structurally present
   once everything is flattened into one list. */
.tree-article-link.tree-article-indented {
  padding-left: 20px !important;
}

/* Plain divider between two groups that don't have a visible name (e.g. split
   "Articles" container sections) -- just a subtle line, no label. Skipped before the
   very first group. */
.tree-group-divider {
  height: 1px !important;
  background-color: var(--border-light) !important;
  margin: 8px 4px !important;
  list-style: none !important;
}

/* Small-caps, subtle, non-interactive group label for sections whose name should still
   read out (e.g. "Whitelisting", "User management") -- renders as a line of text flanked
   by thin rules, like a divider with a caption, so it doesn't look clickable. */
.tree-group-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 14px 2px 6px !important;
  list-style: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

.tree-group-label:first-child {
  margin-top: 0 !important;
}

.tree-group-label::before,
.tree-group-label::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background-color: var(--border-light) !important;
}

.tree-group-label-text {
  flex: none !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  white-space: nowrap !important;
}

.tree-article-link:hover {
  background-color: var(--brand-hover) !important;
  color: var(--text-main) !important;
}

.tree-article-link.current-article-node {
  background-color: var(--brand-hover) !important; 
  color: var(--brand-primary) !important;              
  font-weight: 600 !important;
  border-left: 3px solid var(--brand-primary) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* 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;
}

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

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

.toc-sticky-card {
  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;
  padding: 16px !important;
  transition: var(--transition-smooth) !important;
}

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

#toc-list-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.toc-link {
  display: block !important;
  font-size: var(--font-size-sm) !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  border-left: 3px solid transparent !important;
  padding-left: 10px !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  transition: var(--transition-smooth) !important;
}

.toc-link:hover {
  background-color: var(--brand-hover) !important;
  color: var(--text-main) !important;
}

.toc-h3 {
  padding-left: 20px !important;
}

.toc-link.active-toc-item {
  color: var(--brand-primary) !important;
  font-weight: 600 !important;
  border-left-color: var(--brand-primary) !important;
  background-color: var(--brand-hover) !important;
}

.article-toc-sidebar .toc-link.is-active {
  border-left: none !important;
  border-left-width: 0 !important;
  background-color: var(--bg-active-highlight) !important;
  color: var(--brand-primary) !important;
  padding-left: 12px !important;
}

/* 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 .kb-code-inline {
  background-color: var(--bg-neutral-light) !important;
  color: var(--code-accent) !important;
  border: 1px solid var(--border-separator) !important;
  padding: 2px 6px !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 */
.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 2L4 20c0 1.1.89 2 1.99 2H18c1.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;
}

/* --- 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.
  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 {
  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;
  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: #ffffff !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;
}

/* --- 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;
}

/* --- 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: 11px !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;
}

.article-body .kb-inline-image {
  max-width: 100% !important;
  height: auto !important;
  margin: 14px 0 !important;
  border-radius: var(--radius-sm) !important;
  display: block !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+PGcgaWQ9IkVsZWN0cmljX0dyZWVuIj48cGF0aCBpZD0ibG9nb19tYXJrIiBjbGFzcz0ic3QwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNTYsIDI1Nikgc2NhbGUoMi42NTYpIHRyYW5zbGF0ZSgtMjMxLjMsIC0yMzEuMykiIGQ9Ik0yMzEuMywxNTQuMmMtNDIuNiwwLTc3LjEsMzQuNS03Ny4xLDt0Ny4xczM0LjUsNzcuMS03Ny4xLDc3LjFjNDIuNiwwLTc3LjEtMzQuNS03Ny4xLTc3LjFTMTg4LjcsMTU0LjIsMjMxLjMsMTU0LjogTTI2OC41LDI5NS43TDI2OC41LDI5NS43Yy0xMC4yLDUuOS0zMy4xLDUuNC02Ni4zLTE0Yy0zMy40LTE5LTQ1LjMtMzguNi00NS4zLTUwLjRjMC0xMS48LDExLjktMzEuNCw0NS4zLTUwLjRjMzMuMi0xOS40LDU2LjEtMTkuOSw2Ni4zLTE0bDAsMGMxMC4yLDUuOSwyMS4yLDI2LDIxLDY0LjRDMjg5LjcsMjY5LjcsMjc4LjcsMjg5LjgsMjY4LjUsMjk1Ljd6Ii8+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:not([href*="sosafe.de"]):not([href*="sosafe-awareness.com"]):not([href*="zendesk.com"]):not([href^="#"]):not([href^="mailto:"]):not([href^="tel:"])::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:not([href*="sosafe.de"]):not([href*="sosafe-awareness.com"]):not([href*="zendesk.com"]):not([href^="#"]):not([href^="mailto:"]):not([href^="tel:"]):hover::after {
  opacity: 0.9 !important;
}

.article-body .kb-remap-link {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: bold !important;
  border: 1px dashed #ef4444 !important;
  text-decoration: none !important;
}

.article-body .kb-remap-link::after {
  content: "" !important;
  display: none !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-body > *:first-child {
  margin-top: 0px !important; /* FIX: Added 'px' unit so the browser executes your spacing tweak */
}

/* 
   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.
*/
.custom-meta-pill {
  display: none; /* Controlled dynamically via JS string check */
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  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: #f8fafc !important; /* Slate-50 */
  color: #334155 !important;            /* Slate-700 */
  border: 1px solid #e2e8f0 !important;   /* Slate-200 */
}

/* 
   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: #1e293b !important; /* Deep Slate-900 */
}

.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 {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  background-color: #ffffff !important;   /* Solid white base card background */
  color: #475569 !important;              /* Slate-600 secondary color text fallback */
  border: 1px solid #cbd5e1 !important;   /* Defined structural slate ring edge */
}

.custom-ct-pill .meta-label {
  font-weight: 600 !important;
  color: #1e293b !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;
}

/* ==========================================================================
   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;
  background-color: var(--bg-white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-soft) !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;
  color: var(--border-medium) !important;
  margin: 0 4px !important;
  font-weight: 400 !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,
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 {
  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;
  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;
}

/* ==========================================================================
   Statuspage incident banner
   ========================================================================== */

/* Flex wrapper that takes remaining header space between logo and nav,
   centering the naturally-sized pill within it rather than letting it
   stretch or hug 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;
}

/* ==========================================================================
   New request page — form field backgrounds
   ========================================================================== */

/* 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;
}

/* ==========================================================================
   New request page — notices and attachment replacement
   ========================================================================== */

.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 -- inherits body defaults,
   matching the user's target look for routine consent copy. */
.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 -- styled like a regular Garden field label
   + hint so it blends with the rest of the form. Inserted via JS in
   new_request_page.hbs, just before the (hidden) file upload field. */
.ss-attachment-notice {
  margin-top: 0;
  margin-bottom: 0;
}

.ss-attachment-notice-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 0;
}

.ss-attachment-notice-hint {
  font-size: var(--font-size-base);
  /* Garden's own hint-text gray -- not a DS token, hardcoded to match. */
  color: #5c6970;
  line-height: 20px;
}