/*
 * hydrop systems Help Scout Docs theme
 *
 * Design direction:
 * - reference: https://hydrop-systems.com/
 *
 * Keep this file focused on calm, readable documentation UI with strong hierarchy,
 * FAQ clarity, and safe/serious callout styles for warnings.
 */

:root {
  /*
   * Brand tokens
   * Keep these aligned with hydrop support/homepage brand colors.
   * Update values here first when brand hex values are refreshed.
   */
  --color-primary: #0079c6; /* main hydrop blue */
  --color-primary-strong: #1b64f6;
  --color-secondary: #36c9ff; /* optional accent */
  --color-accent-light: #36c9ff;

  /* Semantic feedback */
  --color-success: #02c960;
  --color-warning: #fcb900;
  --color-danger: #cf2e2e;

  /* Neutrals */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f3f9fb;
  --color-border: #e6e6e6;
  --color-text: #153243;
  --color-text-muted: #555d66;

  /* Optional additional accents from site palette */
  --color-purple: #9b51e0;
  --color-teal: #339eb1;

  /* Typography and layout */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-small: 4px;
  --radius-medium: 8px;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.06);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Code tokens */
  --code-bg: #f2f7fa;
  --code-border: #d7e4ec;

  /* Category card icon presets (non-emoji SVG data URIs) */
  /*
   * API and troubleshooting icons: Font Awesome Free v7.3.1 by @fontawesome
   * https://fontawesome.com — License: https://fontawesome.com/license/free
   * Copyright 2026 Fonticons, Inc.
   */
  --icon-category-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z'/%3E%3C/svg%3E");
  --icon-category-general: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z'/%3E%3C/svg%3E");
  --icon-category-api: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%23fff'%3E%3Cpath d='M176 544C96.5 544 32 479.5 32 400C32 336.6 73 282.8 129.9 263.5C128.6 255.8 128 248 128 240C128 160.5 192.5 96 272 96C327.4 96 375.5 127.3 399.6 173.1C413.8 164.8 430.4 160 448 160C501 160 544 203 544 256C544 271.7 540.2 286.6 533.5 299.7C577.5 320 608 364.4 608 416C608 486.7 550.7 544 480 544L176 544zM409 377C418.4 367.6 418.4 352.4 409 343.1C399.6 333.8 384.4 333.7 375.1 343.1L344.1 374.1L344.1 272C344.1 258.7 333.4 248 320.1 248C306.8 248 296.1 258.7 296.1 272L296.1 374.1L265.1 343.1C255.7 333.7 240.5 333.7 231.2 343.1C221.9 352.5 221.8 367.7 231.2 377L303.2 449C312.6 458.4 327.8 458.4 337.1 449L409.1 377z'/%3E%3C/svg%3E");
  --icon-category-app: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm0 4v12h10V6H7zm5 15a1.2 1.2 0 110-2.4A1.2 1.2 0 0112 21z'/%3E%3C/svg%3E");
  --icon-category-compatibility: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 13.5l-3.3-3.3 1.4-1.4 1.9 1.9 4.5-4.5 1.4 1.4-5.9 5.9z'/%3E%3C/svg%3E");
  --icon-category-troubleshooting: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%23fff'%3E%3Cpath d='M541.4 162.6C549 155 561.7 156.9 565.5 166.9C572.3 184.6 576 203.9 576 224C576 312.4 504.4 384 416 384C398.5 384 381.6 381.2 365.8 376L178.9 562.9C150.8 591 105.2 591 77.1 562.9C49 534.8 49 489.2 77.1 461.1L264 274.2C258.8 258.4 256 241.6 256 224C256 135.6 327.6 64 416 64C436.1 64 455.4 67.7 473.1 74.5C483.1 78.3 484.9 91 477.4 98.6L388.7 187.3C385.7 190.3 384 194.4 384 198.6L384 240C384 248.8 391.2 256 400 256L441.4 256C445.6 256 449.7 254.3 452.7 251.3L541.4 162.6z'/%3E%3C/svg%3E");
  --icon-category-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3C7 3 3 4.79 3 7v10c0 2.21 4 4 9 4s9-1.79 9-4V7c0-2.21-4-4-9-4zm0 2c4.42 0 7 .99 7 2s-2.58 2-7 2-7-.99-7-2 2.58-2 7-2zm0 14c-4.42 0-7-.99-7-2v-2c1.53 1.03 4.07 1.5 7 1.5s5.47-.47 7-1.5v2c0 1.01-2.58 2-7 2zm0-5.5c-4.42 0-7-.99-7-2v-2c1.53 1.03 4.07 1.5 7 1.5s5.47-.47 7-1.5v2c0 1.01-2.58 2-7 2z'/%3E%3C/svg%3E");
  --icon-category-installation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11 3h2v8l2.5-2.5 1.4 1.4L12 15.8 7.1 9.9l1.4-1.4L11 11V3zM4 17h16v4H4v-4z'/%3E%3C/svg%3E");
  --icon-category-shop-shipping: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3L3 7.5l9 4.5 9-4.5L12 3zm-7 7.7l6 3v6.8l-6-3v-6.8zm8 9.8v-6.8l6-3v6.8l-6 3z'/%3E%3C/svg%3E");
  --icon-category-smart-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 4l8 7h-2v9h-5v-6h-2v6H6v-9H4l8-7z'/%3E%3C/svg%3E");
  --icon-category-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 4h16a2 2 0 012 2v9a2 2 0 01-2 2H9l-5 4v-4H4a2 2 0 01-2-2V6a2 2 0 012-2zm2 4v2h12V8H6zm0 4v2h8v-2H6z'/%3E%3C/svg%3E");
  --icon-category-water: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2s6 6.6 6 11a6 6 0 11-12 0c0-4.4 6-11 6-11zm0 17a4 4 0 004-4c0-2.3-2.2-5.5-4-7.7C10.2 9.5 8 12.7 8 15a4 4 0 004 4z'/%3E%3C/svg%3E");
  --icon-category-device: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm0 4v12h10V6H7zm5 15a1.2 1.2 0 110-2.4A1.2 1.2 0 0112 21z'/%3E%3C/svg%3E");
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: 1.65;
  background:
    radial-gradient(circle at 10% -20%, rgba(54, 201, 255, 0.12), transparent 36%),
    radial-gradient(circle at 90% 0%, rgba(0, 121, 198, 0.1), transparent 30%),
    var(--color-bg);
}

p,
ul,
ol,
div,
li,
dd,
table,
blockquote {
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--color-primary-strong);
  text-decoration: underline;
  text-decoration-color: rgba(0, 121, 198, 0.4);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary-strong);
  outline-offset: 2px;
}

/* Main navigation */
#mainNav .navbar-inner {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(21, 50, 67, 0.08);
  backdrop-filter: blur(5px);
}

#mainNav .container-fluid {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
}

#mainNav .brand {
  display: inline-flex;
  align-items: center;
  min-height: 70px;
  order: 2;
  margin-left: auto;
  float: none !important;
}

#mainNav .brand img {
  max-height: 52px;
  width: auto;
}

#mainNav .nav-collapse {
  order: 1;
  float: none !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  position: static !important;
  flex: 0 0 auto !important;
  min-width: max-content;
}

#mainNav .nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  float: none !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  min-width: max-content;
}

#mainNav .navbar-inner .container-fluid > .nav-collapse.collapse,
#mainNav .navbar-inner .container-fluid > .nav-collapse.collapse > nav,
#mainNav .navbar-inner .container-fluid > .nav-collapse.collapse > nav > ul.nav {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: max-content !important;
  overflow: visible !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

#mainNav .navbar-inner .container-fluid > .nav-collapse.collapse > nav > ul.nav {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mainNav .nav li {
  float: none;
}

#mainNav .nav li,
#mainNav .nav li a {
  position: static !important;
}

#mainNav .nav li a {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.2;
  padding: 0.85rem 1rem;
  letter-spacing: 0.01em;
}

#mainNav .nav li a:hover,
#mainNav .nav li a:focus,
#mainNav .nav .active a {
  color: var(--color-primary-strong);
  background: transparent;
}

/* Emphasize top-right Start nav item as a clear call-to-action */
#mainNav .nav li a[href="/"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.05rem;
  margin-top: 0;
  position: relative;
  top: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  box-shadow: 0 8px 18px rgba(0, 121, 198, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.16s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#mainNav .nav li a[href="/"]:hover,
#mainNav .nav li a[href="/"]:focus,
#mainNav .nav li.active a[href="/"] {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary));
  box-shadow: 0 12px 24px rgba(0, 121, 198, 0.34), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  text-decoration: none;
}

/* Docs homepage hero/search area */
#docsSearch {
  padding: clamp(28px, 5vw, 56px) var(--space-md) clamp(22px, 4vw, 38px);
  background: linear-gradient(140deg, #eef8fc 0%, #f5fbff 55%, #ffffff 100%);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

#docsSearch h1 {
  margin: 0 auto var(--space-lg);
  max-width: 860px;
  color: var(--color-text);
  font-size: clamp(1.5rem, 3vw, 2.45rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 750;
}

#searchBar {
  margin: 0 auto;
  width: min(820px, 100%);
  display: flex;
  align-items: center;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

#searchBar .search-query {
  flex: 1;
  height: 58px;
  border: 0;
  margin: 0;
  padding: 0 var(--space-lg);
  font-size: 1rem;
  color: var(--color-text);
  background: transparent;
}

#searchBar .search-query::placeholder {
  color: #7891a1;
}

#searchBar button {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 50px;
  margin-right: var(--space-xs);
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  font-weight: 650;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

#searchBar button:hover,
#searchBar button:focus {
  background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary));
}

/* Shared content width */
#contentArea {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-lg) clamp(var(--space-md), 3.5vw, 30px) var(--space-xl);
}

/* Homepage support sections */
.most-pop-articles,
.category-list {
  margin: var(--space-lg) auto;
}

#contentArea > .most-pop-articles,
#contentArea > .category-list,
#contentArea > hr.sep,
#contentArea > footer {
  margin-left: auto;
  margin-right: auto;
}

#contentArea > .category-list,
#contentArea > hr.sep,
#contentArea > footer {
  width: min(940px, calc(100% - (var(--space-lg) * 2)));
}

.most-pop-articles h2,
.category-list h2 {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.most-pop-articles .popArticles,
.category-list {
  list-style: none;
  padding: 0;
}

.most-pop-articles .popArticles,
.most-pop-articles.two-col .popArticles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.category-list,
.category-list.two-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.most-pop-articles .popArticles li,
.category-list .category {
  margin: 0;
}

.most-pop-articles .popArticles li a,
.category-list .category {
  display: block;
  height: 100%;
  padding: calc(var(--space-md) + 2px) var(--space-lg);
  min-height: 78px;
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(21, 50, 67, 0.03);
  color: var(--color-text);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.most-pop-articles .popArticles li a {
  position: relative;
  display: flex;
  align-items: center;
  padding: calc(var(--space-md) + 2px) var(--space-lg) calc(var(--space-md) + 2px)
    calc(var(--space-xl) + 6px);
  line-height: 1.45;
}

.most-pop-articles .popArticles li a:hover,
.category-list .category:hover,
.most-pop-articles .popArticles li a:focus,
.category-list .category:focus {
  transform: translateY(-2px);
  border-color: rgba(0, 121, 198, 0.28);
  box-shadow: 0 10px 18px rgba(0, 121, 198, 0.1);
  color: var(--color-text);
  text-decoration: none;
}

.most-pop-articles .popArticles li i {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translate(1px, -50%);
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  box-shadow: 0 6px 14px rgba(0, 121, 198, 0.26);
  font-size: 0.78rem;
  overflow: hidden;
}

.most-pop-articles .popArticles li i::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0;
}

.category-list .category h3 {
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
  font-size: clamp(1.2rem, 2.1vw, 1.42rem);
  line-height: 1.25;
}

.category-list .category .article-count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.category-list .category {
  --category-icon-svg: var(--icon-category-default);
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 154px;
}

.category-list .category::before {
  content: "";
  width: 2.05rem;
  height: 2.05rem;
  margin: 0 auto 0.72rem;
  border-radius: 999px;
  display: block;
  background-image: var(--category-icon-svg),
    linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 62%, 100%;
  box-shadow: 0 6px 14px rgba(0, 121, 198, 0.24);
  flex: 0 0 auto;
}

/* Category icon mapping by Help Scout category id.
 * Add new mappings here as you publish categories.
 * Unmapped categories use --icon-category-default automatically.
 */
#category-16 {
  --category-icon-svg: var(--icon-category-compatibility);
}

#category-14 {
  --category-icon-svg: var(--icon-category-troubleshooting);
}

/*
 * Future category icon mapping by slug (works before numeric IDs are known).
 * You can choose icons per category here.
 */
.category-list .category[href$="-allgemeines"] {
  --category-icon-svg: var(--icon-category-general);
}

.category-list .category[href$="-api"] {
  --category-icon-svg: var(--icon-category-api);
}

.category-list .category[href$="-app"] {
  --category-icon-svg: var(--icon-category-app);
}

.category-list .category[href$="-daten"] {
  --category-icon-svg: var(--icon-category-data);
}

.category-list .category[href$="-installation"] {
  --category-icon-svg: var(--icon-category-installation);
}

.category-list .category[href*="-shop-"][href*="versand"] {
  --category-icon-svg: var(--icon-category-shop-shipping);
}

.category-list .category[href*="smart-home"],
.category-list .category[href*="smarthome"],
.category-list .category[href*="smahrt-home"] {
  --category-icon-svg: var(--icon-category-smart-home);
}

.category-list .category[href$="-support"] {
  --category-icon-svg: var(--icon-category-support);
}

.category-list .category h3,
.category-list .category .article-count {
  width: 100%;
  text-align: center;
}

hr.sep {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

/* Article page layout */
#contentArea .row-fluid {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
}

#main-content {
  flex: 1 1 auto;
  min-width: 0;
  order: 2;
  float: right;
}

#sidebar {
  width: min(300px, 32%);
  flex: 0 0 auto;
  order: 1;
  float: left;
}

.contentWrapper {
  max-width: 780px;
}

/* Category overview pages */
#main-content #categoryHead {
  margin: 0 auto;
  max-width: 780px;
  padding: var(--space-lg) 0 var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "desc";
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  align-items: start;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#main-content #categoryHead h1 {
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  line-height: 1.24;
}

#main-content #categoryHead .descrip {
  grid-area: desc;
  min-width: 0;
  margin: var(--space-sm) 0 0;
  color: var(--color-text-muted);
}

#main-content #categoryHead .sort {
  display: none !important;
  grid-area: sort;
  margin: 0;
  justify-self: end;
  align-self: center;
  float: none;
  position: static;
}

#main-content #categoryHead .sort form {
  margin: 0;
}

#main-content #categoryHead #sortBy {
  width: min(320px, 100%);
  min-height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: #fff;
  color: var(--color-text);
}

#main-content .articleList {
  list-style: none;
  margin: 0 auto;
  max-width: 780px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#main-content .articleList li {
  margin: 0;
}

#main-content .articleList li + li {
  margin-top: 2px;
}

#main-content .articleList li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 46px;
  padding: 0.62rem var(--space-md) 0.62rem calc(var(--space-xl) + 2px);
  border-radius: var(--radius-small);
  color: var(--color-text);
}

#main-content .articleList li a:hover,
#main-content .articleList li a:focus {
  color: var(--color-primary-strong);
  text-decoration: none;
  background: #f3faff;
}

#main-content .articleList li a i.icon-article-doc {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(0, 121, 198, 0.12);
  color: transparent;
  overflow: hidden;
}

#main-content .articleList li a i.icon-article-doc::before {
  content: "";
}

#fullArticle {
  color: var(--color-text);
}

#fullArticle .title,
#fullArticle h1 {
  margin: 0 0 var(--space-lg);
  color: var(--color-text);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

#fullArticle h2 {
  margin: var(--space-xl) 0 var(--space-sm);
  color: var(--color-text);
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.26;
  letter-spacing: -0.01em;
}

#fullArticle h3 {
  margin: calc(var(--space-lg) + 2px) 0 var(--space-sm);
  color: var(--color-text);
  font-size: clamp(1.12rem, 2.1vw, 1.34rem);
  line-height: 1.32;
}

#fullArticle h4 {
  margin: var(--space-lg) 0 var(--space-xs);
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.35;
}

#fullArticle p,
#fullArticle div,
#fullArticle li,
#fullArticle dd,
#fullArticle table,
#fullArticle blockquote {
  color: var(--color-text);
  max-width: 72ch;
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle pre,
#fullArticle blockquote,
#fullArticle table {
  margin: 0 0 var(--space-md);
}

#fullArticle ul,
#fullArticle ol {
  padding-left: 1.35rem;
}

#fullArticle li + li {
  margin-top: var(--space-sm);
}

#fullArticle blockquote {
  margin-left: 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-primary);
  background: var(--color-surface-alt);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

/* FAQ component classes for article HTML blocks */
.kb-faq-question {
  margin: var(--space-lg) 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--color-primary);
  background: #edf7ff;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

.kb-faq-answer {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) 0 var(--space-md) var(--space-md);
  border-left: 2px solid #d9e9f4;
  color: var(--color-text);
}

/* Generic callout component */
.kb-callout {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-medium);
  background: var(--color-surface-alt);
}

.kb-callout p:last-child {
  margin-bottom: 0;
}

.kb-callout--info {
  background: #edf8ff;
  border-left-color: var(--color-primary);
}

.kb-callout--warning {
  background: #fff7e8;
  border-color: #f6dfaa;
  border-left-color: var(--color-warning);
}

.kb-callout--warning strong {
  color: #875b00;
}

/* Step-by-step procedure component */
.kb-steps {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  counter-reset: kb-step;
}

.kb-steps > li {
  list-style: none;
  counter-increment: kb-step;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: var(--space-md);
}

.kb-steps > li:last-child {
  margin-bottom: 0;
}

.kb-steps > li::before {
  content: counter(kb-step);
  position: absolute;
  left: 0;
  top: 0.02rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Code and preformatted text */
#fullArticle code,
#fullArticle pre,
.kb-code,
code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

#fullArticle :not(pre) > code,
.contentWrapper :not(pre) > code,
.kb-callout :not(pre) > code {
  display: inline;
  padding: 0.1rem 0.38rem;
  border-radius: 5px;
  background: #edf3f8;
  border: 1px solid #d9e4ed;
  color: #113042;
  font-size: 0.92em;
  word-break: break-word;
}

#fullArticle pre,
.contentWrapper pre,
pre.kb-code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-medium);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  padding: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

#fullArticle pre code,
.contentWrapper pre code,
pre.kb-code code {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre;
}

/* Sidebar on article pages */
#sidebar h3 {
  margin-top: 0;
  font-size: 1.02rem;
  color: var(--color-text);
}

#sidebar .nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar .nav-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-small);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
}

#sidebar .nav-list li.active a,
#sidebar .nav-list li a:hover,
#sidebar .nav-list li a:focus {
  color: var(--color-primary-strong);
  border-color: #d5e8f9;
  background: #f3faff;
  text-decoration: none;
}

/* Footer */
footer,
#contentArea footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* Hide the footer message currently generated by docs-theme.css */
#contentArea footer::before {
  content: none !important;
  display: none !important;
}

.support-contact-box {
  display: block;
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #d5e8f7;
  border-radius: 4px;
  background: #f2f9ff;
  color: #333333;
  font-size: 0.95rem;
  line-height: 1.45;
}

.support-contact-box a {
  color: #006eb7;
  font-weight: 600;
  text-decoration: underline;
}

/* Responsive behavior */
@media (max-width: 1024px) {
  .most-pop-articles .popArticles,
  .most-pop-articles.two-col .popArticles {
    grid-template-columns: 1fr;
  }

  .category-list,
  .category-list.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #contentArea .row-fluid {
    gap: var(--space-lg);
  }
}

@media (max-width: 840px) {
  #contentArea .row-fluid {
    display: block;
  }

  #main-content,
  #sidebar {
    float: none;
  }

  #sidebar {
    width: 100%;
    margin-top: var(--space-xl);
  }

  .contentWrapper,
  #fullArticle p,
  #fullArticle div,
  #fullArticle li,
  #fullArticle dd,
  #fullArticle table,
  #fullArticle blockquote {
    max-width: none;
  }
}

@media (max-width: 640px) {
  #docsSearch {
    padding-top: var(--space-lg);
  }

  #searchBar {
    border-radius: var(--radius-medium);
    padding: var(--space-xs);
    gap: var(--space-xs);
  }

  #searchBar .search-query {
    min-width: 0;
    height: 50px;
    padding: 0 var(--space-md);
    font-size: 0.96rem;
  }

  #searchBar button {
    height: 46px;
    margin-right: 0;
    padding: 0 14px;
  }

  #searchBar button span {
    display: none;
  }

  #contentArea > .category-list,
  #contentArea > hr.sep,
  #contentArea > footer {
    width: 100%;
  }

  .category-list,
  .category-list.two-col {
    grid-template-columns: 1fr;
  }

  #fullArticle .title,
  #fullArticle h1 {
    font-size: 1.65rem;
  }

  #main-content #categoryHead {
    padding: var(--space-md) 0 var(--space-sm);
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "desc";
  }

  #main-content .articleList {
    padding: 0;
  }

  #main-content #categoryHead .sort {
    justify-self: start;
    width: 100%;
  }

  #main-content #categoryHead #sortBy {
    width: 100%;
    max-width: none;
  }

  #main-content .articleList li a {
    min-height: 44px;
    padding-left: calc(var(--space-lg) + 12px);
  }

  #main-content .articleList li a i.icon-article-doc {
    left: calc(var(--space-sm) + 2px);
  }

  .kb-faq-question,
  .kb-callout,
  .kb-steps,
  #fullArticle pre,
  .contentWrapper pre,
  pre.kb-code {
    padding: var(--space-md);
  }
}