/* global variables for the entire app */
/* never define selectors here or they will be included multiple times */
/* global variables for the entire app */
/* never define selectors here or they will be included multiple times */
.btn {
  font-family: "Season Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.4px;
  text-transform: lowercase;
  box-shadow: none;
  -webkit-box-shadow: none;
  outline: none;
  padding: 10px 16px;
}

@media (max-width: 374px) {
  .btn {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.btn-block {
  display: inline-block;
}

/* --- primary button --- */
.btn-primary {
  background-color: #551c13;
  border-color: #551c13;
  color: #fdf3e3;
}

.btn-primary:hover,
.btn-primary:hover:enabled {
  background-color: #66332b;
  border-color: #66332b;
  color: #fdf3e3;
}

.btn-primary:hover:active,
.btn-primary:hover:active:enabled {
  background-color: #551c13;
  border-color: #551c13;
  color: #fdf3e3;
}

.btn-primary:active,
.btn-primary:active:enabled {
  background-color: #551c13;
  border-color: #551c13;
  color: #fdf3e3;
  box-shadow: none;
  -webkit-box-shadow: none;
  outline: 0;
}

.btn-primary:focus,
.btn-primary:focus:enabled {
  background-color: #774942;
  border-color: #774942;
  color: #fdf3e3;
  outline: 0;
}

.btn-primary:active:focus,
.btn-primary:active:focus:enabled {
  outline: 0;
}

.btn-primary:disabled,
.btn-primary:hover:disabled,
.btn-primary:active:disabled,
.btn-primary:focus:disabled,
.btn-primary:hover:active:disabled,
.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:active,
.btn-primary.disabled:focus {
  background-color: #aa8d89;
  border-color: #aa8d89;
  color: #fdf3e3;
}

/* --- secondary button --- */
.btn-secondary {
  background-color: #AFB5C2;
  border-color: #AFB5C2;
  color: #fff;
}

.btn-secondary:hover,
.btn-secondary:hover:enabled {
  background-color: #989FAD;
  border-color: #989FAD;
  color: #fff;
}

.btn-secondary:hover:active,
.btn-secondary:hover:active:enabled {
  background-color: #47686E;
  border-color: #47686E;
}

.btn-secondary:active,
.btn-secondary:active:enabled {
  background-color: #47686E;
  border-color: #47686E;
  color: #fff;
  box-shadow: none;
  -webkit-box-shadow: none;
  outline: 0;
}

.btn-secondary:focus,
.btn-secondary:focus:enabled {
  background-color: #47686E;
  border-color: #47686E;
  color: #fff;
  outline: 0;
}

.btn-secondary:active:focus,
.btn-secondary:active:focus:enabled {
  outline: 0;
}

.btn-secondary:disabled,
.btn-secondary:hover:disabled,
.btn-secondary:active:disabled,
.btn-secondary:focus:disabled,
.btn-secondary:hover:active:disabled,
.btn-secondary.disabled,
.btn-secondary.disabled:hover,
.btn-secondary.disabled:active,
.btn-secondary.disabled:focus {
  background-color: #F8F9FA;
  border-color: #CACED6;
  color: #fff;
}

.button,
.button-large {
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.4px;
  text-transform: lowercase;
}

input[type="submit"] {
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.4px;
  text-transform: none;
}

/* Sentence case: lowercase the label, capitalise only the first letter */
.btn::first-letter,
.button::first-letter,
.button-large::first-letter {
  text-transform: uppercase;
}

/* --- alt-primary button --- */
.btn-alt-primary {
  background-color: transparent;
  border-color: #230e0f;
  color: #230e0f;
}

.btn-alt-primary:hover,
.btn-alt-primary:hover:enabled {
  background-color: transparent;
  border-color: #66332b;
  color: #66332b;
}

.btn-alt-primary:active,
.btn-alt-primary:active:enabled {
  background-color: transparent;
  border-color: #551c13;
  color: #551c13;
  box-shadow: none;
  -webkit-box-shadow: none;
  outline: 0;
}

.btn-alt-primary:focus,
.btn-alt-primary:focus:enabled {
  background-color: transparent;
  border-color: #774942;
  color: #774942;
  outline: 0;
}

.btn-alt-primary:active:focus,
.btn-alt-primary:active:focus:enabled {
  outline: 0;
}

.btn-alt-primary:disabled,
.btn-alt-primary:hover:disabled,
.btn-alt-primary:active:disabled,
.btn-alt-primary:focus:disabled,
.btn-alt-primary:hover:active:disabled,
.btn-alt-primary.disabled,
.btn-alt-primary.disabled:hover,
.btn-alt-primary.disabled:active,
.btn-alt-primary.disabled:focus {
  border-color: #aa8d89;
  color: #aa8d89;
}

/* --- alt-secondary button --- */
.btn-alt-secondary {
  background-color: transparent;
  border-color: #AFB5C2;
  color: #AFB5C2;
}

.btn-alt-secondary:hover,
.btn-alt-secondary:hover:enabled {
  background-color: #989fad;
}

.btn-alt-secondary:active,
.btn-alt-secondary:active:enabled {
  background-color: #47686E;
  box-shadow: none;
  -webkit-box-shadow: none;
  outline: 0;
}

.btn-alt-secondary:focus,
.btn-alt-secondary:focus:enabled {
  background-color: #47686E;
  outline: 0;
}

.btn-alt-secondary:active:focus,
.btn-alt-secondary:active:focus:enabled {
  outline: 0;
}

.btn-alt-secondary:disabled,
.btn-alt-secondary:hover:disabled,
.btn-alt-secondary:active:disabled,
.btn-alt-secondary:focus:disabled,
.btn-alt-secondary:hover:active:disabled,
.btn-alt-secondary.disabled,
.btn-alt-secondary.disabled:hover,
.btn-alt-secondary.disabled:active,
.btn-alt-secondary.disabled:focus {
  border-color: #F8F9FA;
  color: #CACED6;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  /* Body background — matches web app (loads after bootstrap's #fff) */
  background-color: #fff9f1;
  font-family: "Season Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #230e0f;
  line-height: 24px;
}

@media (max-width: 767px) {
  html, body {
    font-size: 16px;
  }
}

/* Season Sans max weight is 600 (avoid faux-bold) */
b, strong, label, dt, optgroup {
  font-weight: 600;
}

/* Article vote (Yes/No) buttons — Clarity DS outlined button. The vote helper
   omits .btn, so underline + state colours are pinned here; the extra ancestor
   beats style.css's near-white label rules regardless of load order. */
.article-votes-controls .article-vote {
  background-color: transparent;
  border: 1px solid #230e0f;
  color: #230e0f;
  text-decoration: none;
  text-transform: none;
  transition: color 150ms, border-color 150ms, background-color 150ms;
}

/* Glyph/label (::before/::after) follow the button's text colour */
.article-votes-controls .article-vote::before,
.article-votes-controls .article-vote::after,
.article-votes-controls .article-vote:hover::before,
.article-votes-controls .article-vote:hover::after,
.article-votes-controls .article-vote[aria-selected="true"]::before,
.article-votes-controls .article-vote[aria-selected="true"]::after {
  color: inherit;
}

.article-votes-controls .article-vote::before {
  font-size: 12px; /* style.css sets 8px */
}

.article-votes-controls .article-vote:hover {
  border-color: #66332b;
  color: #66332b;
}

.article-votes-controls .article-vote:focus {
  border-color: #774942;
  color: #774942;
}

.article-votes-controls .article-vote:active {
  border-color: #551c13;
  color: #551c13;
}

/* Voted state (aria attribute varies by Zendesk version) */
.article-votes-controls .article-vote[aria-selected="true"],
.article-votes-controls .article-vote[aria-pressed="true"],
.article-votes-controls .article-vote[aria-checked="true"],
.article-votes-controls .article-vote[aria-selected="true"]:hover,
.article-votes-controls .article-vote[aria-pressed="true"]:hover,
.article-votes-controls .article-vote[aria-checked="true"]:hover,
.article-votes-controls .article-vote[aria-selected="true"]:focus,
.article-votes-controls .article-vote[aria-pressed="true"]:focus,
.article-votes-controls .article-vote[aria-checked="true"]:focus,
.article-votes-controls .article-vote[aria-selected="true"]:active,
.article-votes-controls .article-vote[aria-pressed="true"]:active,
.article-votes-controls .article-vote[aria-checked="true"]:active {
  background-color: #551c13;
  border-color: #551c13;
  color: #fdf3e3;
}

/* Heading scale for authored article/post/comment bodies (bootstrap flattens h3 to body size) */
.article-body h2,
.post-body h2,
.comment-body h2 {
  font-family: "Season Mix", ui-serif, Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 30px;
  font-weight: 400;
}

.article-body h3,
.post-body h3,
.comment-body h3 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
}

.article-body h4,
.post-body h4,
.comment-body h4 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .article-body h2,
  .post-body h2,
  .comment-body h2 {
    font-size: 24px;
    line-height: 28px;
  }
}

a, a:link, a:visited, .breadcrumbs li a:link, .breadcrumbs li a:visited {
  color: #551c13;
  text-decoration: underline;
  outline: none;
  box-shadow: none;
}

a:hover, .breadcrumbs li a:hover {
  color: #66332b;
  text-decoration: underline;
}

a:focus, .breadcrumbs li a:focus {
  color: #774942;
  text-decoration: underline;
}

a:active, a:focus, .breadcrumbs li a:active, .breadcrumbs li a:focus {
  color: #774942;
  text-decoration: underline;
}

/* Links underlined by default (Clarity DS); buttons/nav stay undecorated */
.btn,
.button,
.button-large,
[role="button"],
input[type="submit"],
.btn:hover, .btn:focus, .btn:active,
.button:hover, .button:focus, .button:active,
[role="button"]:hover, [role="button"]:focus, [role="button"]:active {
  text-decoration: none;
}

.container {
  max-width: 1100px;
}

body > main {
  min-height: inherit;
}

.relative {
  position: relative;
}

.bold, b, strong {
  font-weight: 500;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

.nowrap {
  white-space: nowrap;
}

h1 {
  margin: 0;
  padding: 0;
}

.page-headline {
  margin-bottom: 20px;
  font-family: "Season Mix", ui-serif, Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 38px;
  font-weight: 400;
  color: #230e0f;
}

@media (max-width: 767px) {
  .page-headline {
    margin-bottom: 15px;
    font-size: 26px;
    line-height: 28px;
  }
}

.page-description {
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .page-description {
    margin-bottom: 15px;
  }
}

.search-field-container {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.search-field-container .field-container {
  padding: 9px 50px 9px 20px;
  background-color: #fff;
  border-radius: 20px;
}

.search-field-container .icon-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40px;
  background-color: #551c13;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}

.search-field-container .icon-container:before {
  position: absolute;
  top: 11px;
  left: 11px;
  content: "\f002";
  font-family: "Font Awesome\ 5 Pro";
  color: #fff;
}

.search-field-container .icon-container:hover {
  background-color: #66332b;
}

.search-field-container .icon-container:active, .search-field-container .icon-container:focus {
  background-color: #774942;
}

.search-field-container input[type="search"] {
  width: 100%;
  padding: 0;
  outline: none;
  box-shadow: none;
  border: none;
  -webkit-transition: none;
  transition: none;
}

@media (max-width: 767px) {
  .search-field-container .field-container {
    padding: 8px 50px 8px 20px;
  }
  .search-field-container .icon-container {
    width: 36px;
  }
  .search-field-container .icon-container:before {
    top: 10px;
    left: 10px;
  }
}

.knowlede-base-tree .promoted-articles-item a {
  font-size: inherit;
  color: #551c13;
}

.knowlede-base-tree .promoted-articles-item a:hover {
  color: #66332b;
}

.knowlede-base-tree .promoted-articles-item a:active, .knowlede-base-tree .promoted-articles-item a:focus {
  color: #774942;
}

.knowlede-base-tree .promoted-articles-item a:after {
  content: '';
}

.breadcrumb-container {
  margin-top: 20px;
  margin-bottom: 20px;
}

.breadcrumb-container .breadcrumbs {
  margin: 0;
  padding: 0;
}

.breadcrumb-container .breadcrumbs li {
  font-size: 12px;
  color: inherit;
  max-width: inherit;
}

.sidebar-container .collapsible-sidebar .sidebar-menu-container ul, .sidebar-container .collapsible-sidebar .sidebar-menu-container ol {
  margin: 0;
  padding: 0;
}

.sidebar-container .collapsible-sidebar .sidebar-menu-container li {
  margin-bottom: 3px;
}

.sidebar-container .collapsible-sidebar .sidebar-menu-container li a .list-item {
  background-color: #efe4d2;
  margin: 0;
  padding: 15px;
}

.sidebar-container .collapsible-sidebar .sidebar-menu-container li.active a .list-item, .sidebar-container .collapsible-sidebar .sidebar-menu-container li[active="true"] a .list-item {
  border-right: 5px solid #551c13;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.sidebar-container .collapsible-sidebar .sidebar-menu-container li.active a .list-item .list-item-name,
.sidebar-container .collapsible-sidebar .sidebar-menu-container li.active a .list-item .list-item-count, .sidebar-container .collapsible-sidebar .sidebar-menu-container li[active="true"] a .list-item .list-item-name,
.sidebar-container .collapsible-sidebar .sidebar-menu-container li[active="true"] a .list-item .list-item-count {
  font-weight: 500;
}

@media (min-width: 992px) {
  .sidebar-container .collapsible-sidebar .sidebar-title {
    font-weight: 500;
    margin-bottom: 10px;
  }
  .sidebar-container .collapsible-sidebar .sidebar-menu-container li a {
    color: #230e0f;
  }
}

@media (max-width: 991px) {
  .sidebar-container .collapsible-sidebar .sidebar-title {
    background-color: #efe4d2;
    padding: 10px 15px;
    cursor: pointer;
    position: relative;
  }
  .sidebar-container .collapsible-sidebar .sidebar-title:after {
    position: absolute;
    top: 8px;
    right: 15px;
    content: '\f107';
    font-family: "Font Awesome 5 Pro";
    font-size: 18px;
  }
  .sidebar-container .collapsible-sidebar .sidebar-menu-container {
    display: none;
  }
  .sidebar-container .collapsible-sidebar .sidebar-menu-container li {
    margin-bottom: 0;
  }
  .sidebar-container .collapsible-sidebar .sidebar-menu-container li a .list-item {
    padding: 10px 15px;
  }
  .sidebar-container .collapsible-sidebar .sidebar-menu-container li.active a .list-item, .sidebar-container .collapsible-sidebar .sidebar-menu-container li[active="true"] a .list-item {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .sidebar-container .collapsible-sidebar[aria-expanded="true"] .sidebar-title:after {
    content: '\f00d';
  }
  .sidebar-container .collapsible-sidebar[aria-expanded="true"] .sidebar-menu-container {
    display: block;
  }
}

.pagination ul {
  margin: 0;
  padding: 0;
}

.pagination ul li {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  float: inherit;
  width: inherit;
  height: inherit;
}

.pagination ul li a {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: #551c13;
  line-height: 1;
  width: 30px;
}

.pagination ul li.pagination-first a, .pagination ul li.pagination-prev a, .pagination ul li.pagination-next a, .pagination ul li.pagination-last a {
  font-size: 24px;
}

.pagination ul li.pagination-current {
  background: none;
}

.pagination ul li.pagination-current span {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 500;
  color: #230e0f;
  width: 30px;
}

.pagination ul li:hover:not(.pagination-current) {
  background: none;
}

.pagination ul li:hover:not(.pagination-current) a {
  color: #66332b;
}

.pagination ul li:active a, .pagination ul li:focus a {
  color: #774942;
}

@media (max-width: 767px) {
  .pagination ul li.pagination-first a, .pagination ul li.pagination-prev a, .pagination ul li.pagination-next a, .pagination ul li.pagination-last a {
    font-size: 22px;
  }
}

.article-app-icons-container {
  position: absolute;
  left: 120px;
  top: -7px;
  line-height: 0;
}

.article-app-icons-container .ios-icon, .article-app-icons-container .android-icon {
  display: inline-block;
}

.article-app-icons-container .ios-icon svg, .article-app-icons-container .android-icon svg {
  width: 110px;
  height: 33px;
}

.article-app-icons-container .android-icon {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .article-app-icons-container {
    left: 100px;
    top: -4px;
  }
  .article-app-icons-container .ios-icon svg, .article-app-icons-container .android-icon svg {
    width: 80px;
    height: 24px;
  }
}

.table-container {
  display: table;
}

.table-container th {
  font-weight: 500;
  text-align: center;
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  padding-top: 5px;
  padding-bottom: 5px;
}