@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/***** Base *****/
* {
  box-sizing: border-box;
}

body {
  background-color: rgba(255, 255, 255, 1);
  color: #2F3941;
  font-family: 'Century Gothic', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Century Gothic', sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
}

a {
  color: rgba(8, 127, 115, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(0, 99, 65, 1);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: #000;
  font-size: 14px;
}
.hbs-form input, .search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
  /* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus {
  border: 1px solid rgba(0, 99, 65, 1);
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: #ddd;
}
.hbs-form select, .search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid rgba(0, 99, 65, 1);
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #87929D;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid rgba(0, 99, 65, 1);
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid rgba(0, 99, 65, 1);
  border-radius: 4px;
  color: rgba(0, 99, 65, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: rgba(0, 99, 65, 1);
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: rgba(0, 99, 65, 1);
  color: #FFFFFF;
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #000;
  border-color: #000;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  background-color: rgba(0, 99, 65, 1);
  border: 0;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, .hbs-form input[type=submit] {
    width: auto;
  }
}
.button-large:visited, .hbs-form input[type=submit]:visited {
  color: #FFFFFF;
}
.button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus {
  background-color: #000;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-large-outline {
  cursor: pointer;
  background-color: transparent;
  border: 2px solid rgba(0, 99, 65, 1);
  border-radius: 10px;
  color: rgba(0, 99, 65, 1);
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}

@media (min-width: 768px) {
  .button-large-outline {
    width: auto;
  }
}

.button-large-outline:visited {
  color: rgba(0, 99, 65, 1);
}

.button-large-outline:hover,
.button-large-outline:active,
.button-large-outline:focus {
  background-color: transparent;
  border-color: #000;
  color: #000;
}

.button-large-outline[disabled] {
  border-color: #ddd;
  color: #ddd;
}



.button-secondary {
  color: #5a6d7c;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #5a6d7c;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #2F3941;
  border: 1px solid #87929D;
  background-color: #f7f7f7;
}

/***** Split button *****/
.split-button {
  display: flex;
}

.split-button button {
  background-color: rgba(0, 99, 65, 1);
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: rgba(0, 99, 65, 1);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #FFFFFF;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #FFFFFF;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #5a6d7c;
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

/***** Forms *****/
.form {
  max-width: 650px;
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid rgba(0, 99, 65, 1);
}

.form-field input[type=text] {
  border: 1px solid #87929D;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(0, 99, 65, 1);
}

.form-field input[type=checkbox] {
  width: auto;
}

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #87929D;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid rgba(0, 99, 65, 1);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle {
  border: 1px solid #87929D;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(0, 99, 65, 1);
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type=checkbox] + label {
  margin: 0 0 0 10px;
}

.form-field .optional {
  color: #5a6d7c;
  margin-left: 4px;
}

.form-field p {
  color: #5a6d7c;
  font-size: 12px;
  margin: 5px 0;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: #5a6d7c;
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: rgba(0, 99, 65, 1);
}

/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

.logo img {
  max-height: 37px;
  vertical-align: middle;
}

.logo span {
  margin: 0 10px;
  color: rgba(0, 99, 65, 1);
}

.logo a {
  display: inline-block;
}

.logo a:hover, .logo a:focus, .logo a:active {
  text-decoration: none;
}

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a {
  display: block;
  margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
  display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
  display: block;
  margin: 20px;
}

.user-nav-list {
  display: block;
  list-style: none;
}
.user-nav-list > li {
  display: inline-block;
}

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(8, 127, 115, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(8, 127, 115, 1);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #2F3941;
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #2F3941;
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}

#zd-modal-container ~ .skip-navigation {
  display: none;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: rgba(8, 127, 115, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(8, 127, 115, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(8, 127, 115, 1);
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}
#user #user-name:hover {
  text-decoration: underline;
}

/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: rgba(0, 99, 65, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: #5a6d7c;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: #5a6d7c;
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #5a6d7c;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #5a6d7c;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: rgba(8, 127, 115, 1);
}

/***** Search field *****/
.search-container {
  position: relative;
}

.search {
  border-color: #87929D;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: rgba(0, 99, 65, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: rgba(0, 99, 65, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 99, 65, 1);
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: rgba(0, 99, 65, 1);
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: rgba(0, 99, 65, 1);
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: rgba(0, 99, 65, 1);
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: rgba(0, 99, 65, 1);
}

.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 15px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #777;
  pointer-events: none;
}
[dir=rtl] .search-icon {
  left: auto;
  right: 15px;
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01JZX5SJ471QCC1DSZ2C67R018);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0px;
  text-align: center;
  width: 100%;
  
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid rgba(0, 99, 65, 1);
  border-radius: 12px;
  box-sizing: border-box;
  color: rgba(0, 99, 65, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(0, 99, 65, 1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: #2F3941;
}
.blocks-item-link {
  color: none;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}


.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: none;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px none;
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/***** Homepage *****/
.section {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}

.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
}

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01K952ADF6WCRH6H9PVW3R2RXD);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(8, 127, 115, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(0, 99, 65, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(0, 99, 65, 1);
}

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {

  overflow: auto;
  padding: 2px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #2F3941;
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: rgba(8, 127, 115, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(0, 99, 65, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(0, 99, 65, 1);
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(0, 99, 65, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 100%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: #2F3941;
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: #2F3941;
}

.icon-star {
  color: rgba(0, 99, 65, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}
.section-list {
  margin: 40px 0;
}

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: #2F3941;
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
  display: none;
}

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(8, 127, 115, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(0, 99, 65, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(0, 99, 65, 1);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #5a6d7c;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(0, 99, 65, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(8, 127, 115, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(0, 99, 65, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(0, 99, 65, 1);
}
.article-return-to-top {
  border-top: 1px solid #87929D;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: #2F3941;
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: #2F3941;
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #5a6d7c;
}

/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share li {
  height: 25px;
  width: 25px;
}

.share a {
  color: #5a6d7c;
}
.share a:hover {
  text-decoration: none;
  color: rgba(0, 99, 65, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #5a6d7c;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(8, 127, 115, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(0, 99, 65, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(0, 99, 65, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #5a6d7c;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(0, 99, 65, 1);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: rgba(0, 99, 65, 1);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: 'Century Gothic', sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(8, 127, 115, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(0, 99, 65, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(0, 99, 65, 1);
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #5a6d7c;
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up svg {
  transform: scale(1, -1);
}

.vote-up:hover,
.vote-down:hover {
  color: rgba(0, 99, 65, 1);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #5a6d7c;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: rgba(0, 99, 65, 1);
}

.vote-voted:hover {
  color: #000;
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0; /*Avoid collapsing elements in Safari*/
}
.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01K952ADF6WCRH6H9PVW3R2RXD);
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 50px;
  text-align: center;
}
.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.post-to-community {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: rgba(0, 99, 65, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: rgba(0, 99, 65, 1);
  color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
  background-color: #000;
  border-color: #000;
}
.community-follow button::after {
  border-left: 1px solid rgba(0, 99, 65, 1);
  content: attr(data-follower-count);
  color: rgba(0, 99, 65, 1);
  display: inline-block;
  font-family: 'Century Gothic', sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(0, 99, 65, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(8, 127, 115, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(0, 99, 65, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #5a6d7c;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: #2F3941;
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(0, 99, 65, 1);
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #5a6d7c;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: 'Century Gothic', sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: rgba(8, 127, 115, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(0, 99, 65, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(0, 99, 65, 1);
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #5a6d7c;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(0, 99, 65, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

.community-badge-titles {
  display: inline;
}

.community-badge-achievement {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}
.community-badge-achievement img {
  width: 100%;
  height: 100%;
}

.community-badge-achievements {
  display: flex;
}

.community-badge-achievements-rest {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}

.community-badge {
  margin: 2px;
}

.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}
.profile-info .community-badge-achievement {
  height: 40px;
  width: 40px;
}
.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: 22.5px;
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}
.collapsible-nav-toggle-icon {
  display: none;
}
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid rgba(0, 99, 65, 1);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #2F3941;
  line-height: 45px;
  order: 1;
}
@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir=rtl] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}
.collapsible-nav-list li a {
  color: #2F3941;
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(0, 99, 65, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #2F3941;
}

.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]),
.collapsible-nav[aria-expanded=true] li:not(.current) {
  display: block;
}

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(0, 99, 65, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #f2f2f2;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir=rtl] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir=rtl] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #5a6d7c;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #5a6d7c;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #5a6d7c;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid rgba(0, 99, 65, 1);
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(0, 99, 65, 1);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #5a6d7c;
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}
.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}
.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}
.pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.pagination-next-link {
  padding-right: 10px;
}
.pagination-next-text {
  margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
  padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
  margin-left: 10px;
}
.pagination-prev-link {
  padding-left: 10px;
}
.pagination-prev-text {
  margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
  padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
  margin-right: 10px;
}

/***** Metadata *****/
.meta-group {
  display: block;
}

.meta-group-opposite {
  float: right;
}

[dir=rtl] .meta-group-opposite {
  float: left;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #5a6d7c;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: #f7f7f7;
}

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 80px;
  height: 80px;
}

.profile-avatar .icon-agent {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir=rtl] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir=rtl] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: #5a6d7c;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir=rtl] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}
@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(0, 99, 65, 1);
  border-radius: 4px;
  color: rgba(0, 99, 65, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #f2f2f2;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}
@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #5a6d7c;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir=rtl] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-badges-items {
  margin-top: 25px;
}
.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}
.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}
.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.profile-badges-item-image img {
  max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}
.profile-badges-item-title, .profile-badges-item-metadata-title {
  font-size: 15px;
  margin-bottom: 10px;
}
.profile-badges-item-title {
  font-weight: 600;
}
.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #5a6d7c;
  font-size: 13px;
  margin: 0;
}
.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}
[dir=rtl] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}

.profile-contribution-header {
  margin-bottom: 5px;
}

.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir=rtl] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.private-activity-icon {
  margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir=rtl] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}
[dir=rtl] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 1);
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: #2F3941;
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(8, 127, 115, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: rgba(8, 127, 115, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(8, 127, 115, 1);
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: #5a6d7c;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(0, 99, 65, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}

/* Add a yellow background for Chinese */
html[lang|=zh] .search-results-description em {
  font-style: normal;
  background: yellow;
}

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-inline.notification-error::before, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}

/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}
[dir=rtl] .notification-inline {
  text-align: right;
}
.notification-inline[aria-hidden=true] {
  display: none;
}
.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}
[dir=rtl] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}
.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}
.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir=rtl] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #2f3941;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(31, 115, 183, 0.08);
  text-decoration: none;
  color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
  cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-checked=true]::after,
.dropdown-menu [role=menuitemradio][aria-selected=true]::after,
.dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}
[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after, [dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][aria-hidden=true] {
  display: none !important;
}

.dropdown-menu-end {
  left: auto;
  right: 0;
}

.dropdown-menu-top {
  bottom: 100%;
  margin-bottom: 1px;
}

[dir=rtl] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir=rtl] .dropdown-menu-end {
  left: 0;
  right: auto;
}
/* ===== Dropdown base behaviour (missing) ===== */
.dropdown {
  position: relative;
}

.dropdown-toggle {
  cursor: pointer;
}

/* Hide by default */
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: 220px;
  padding: 6px 0;
  border: 1px solid #e6e8eb;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
  z-index: 9999;
}

/* Show when JS toggles aria-expanded */
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  display: block;
}

/* If your menu uses dropdown-menu-end */
.dropdown-menu.dropdown-menu-end {
  right: 0;
  left: auto;
}

/* RTL */
[dir="rtl"] .dropdown-menu {
  right: auto;
  left: 0;
  text-align: right;
}

.dropdown-chevron-icon {
  vertical-align: middle;
}

.content-tags > p {
  color: #68737D;
  margin-top: 32px;
  margin-bottom: 4px;
}
.content-tags-add-hint {
  color: #68737D;
  font-size: 14px;
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
}
.content-tag-list li {
  border-right: 1px solid #C2C8CC;
  margin-bottom: 4px;
}
[dir=ltr] .content-tag-list li {
  padding-right: 8px;
  margin-right: 8px;
}
[dir=rtl] .content-tag-list li {
  padding-left: 8px;
  margin-left: 8px;
}
.content-tag-list li:last-child {
  border: none;
}

/***** WYSIWYG Editor *****/
#hc-wysiwyg {
  border: 1px solid #87929D;
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid #87929D;
}

/***** Summary component *****/
zd-summary-block {
  background: #f3f6f6;
}
[dir=ltr] zd-summary-block {
  border-left-color: #859fa1;
}
[dir=rtl] zd-summary-block {
  border-right-color: #859fa1;
}

.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: rgba(8, 127, 115, 1);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: rgba(0, 99, 65, 1);
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: rgba(0, 99, 65, 1);
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}













/* Masonry: 2 uneven columns, no vertical holes */
.category-blocks-grid {
  column-count: 2;          /* number of columns */
  column-gap: 20px;         /* horizontal space between columns */
  margin-top: 30px;
}

/* Cards must be inline-block to flow in columns */
.category-block {
  display: inline-block;
  width: 100%;
  break-inside: avoid;      /* prevent a card splitting across columns */
  margin: 0 0 20px;         /* vertical space between cards */
  /* keep your existing card styles: border, padding, shadow, etc. */
}

/* Mobile: fall back to one column */
@media (max-width: 768px) {
  .category-blocks-grid { column-count: 1; }
}

/* Card */
.category-block {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* Header */
.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.category-title { margin: 0; font-size: 1.2rem; font-weight: 600; }

/* Follow button */
.btn-follow {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--brand_color, #00663B);
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
}

/* Ensure text colour never changes */
.btn-follow:link,
.btn-follow:visited,
.btn-follow:active {
  color: #fff;
}

/* Hover background */
.btn-follow:hover {
  background: var(--brand_color_dark, #004d2d); /* optional darker shade */
  color: #fff;
}

/* Description + divider */
.category-description { font-size: .95rem; color: #555; }
.category-divider { border: none; border-top: 1px solid #e0e0e0; margin: 15px 0; }

/* Article list */
.article-list { list-style: none; margin: 0; padding: 0; }
.article-list-item { margin: 0; padding: 0; line-height: 1.4; }
.article-list-link {
  display: block;
  padding: 4px 0;
  font-size: .95rem;
  color: #0f172a;
  text-decoration: none;
}
.article-list-link:hover { text-decoration: underline; color: var(--brand_color, #2563eb); }

/* Show only first 5 */
.limit-5 li:nth-child(n+6) { display: none; }

/* See all link */
.see-all-wrapper { margin-top: 12px; }
.see-all-articles {
  font-size: 0.9rem;
  color: var(--brand_color, #00663B);
  text-decoration: none;
  font-weight: 500;
}
.see-all-articles:hover { text-decoration: underline; }


.article-list-link::before {
  content: "→";        /* or try "›" for a subtler chevron */
  margin-right: 6px;
  color: var(--brand_color, #00663B);
  font-weight: bold;
}



.login-reminder-banner {
  background: #f4f8ff;
  color: #003c8f;
  text-align: center;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #d8e4f7;
}



.promoted-articles .promoted-articles-item a {
  border-bottom: 0 !important;
  padding: 4px 0; /* optional tighter spacing to match your list style */
}

@media (min-width: 1024px) {
  .promoted-articles-item:last-child a { border-bottom: 0 !important; }
}













/* container -> two-column like screenshot */
.promoted-articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  white-space: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .promoted-articles {
    grid-template-columns: 1fr 1fr;
  }
}

/* reset old borders from themes */
.promoted-articles-item a,
.promoted-articles-item:last-child a { border-bottom: 0 !important; }

/* each row */
.promo-item {
  padding: 0 0 18px 0;
  border-bottom: 1px solid #e6e6e6;
}



/* lock icon alignment */
.promo-title .icon-lock {
  margin-left: 6px;
  width: 16px; height: 16px;
  vertical-align: text-bottom;
  color: rgba(8, 127, 115, 1);
}

/* meta row */
.promo-meta {
  color: #5a6d7c;
  font-size: 14px;
}
.promo-meta .dot { margin: 0 6px; color: #8093a3; }

/* lighten background section like card area (optional) */
.articles {
  background: #f7f7f7;
  padding: 24px;
  border-radius: 12px;
}


/* lighten background section like card area (optional) */
.promoted-articles {
  background: #f7f7f7;
  padding: 24px;
  border-radius: 12px;
}



























/* Hero */

.cog-hero {
  background-color: #1a5c33;
  color: #ffffff;
  padding: 96px 16px 72px;
}

@media (max-width: 768px) {
  .cog-hero {
    padding: 72px 16px 56px;
  }
}

.cog-hero-inner {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

.cog-hero-content {
  margin-bottom: 32px;
}

.cog-hero-kicker {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
  margin: 0 0 8px;
}

.cog-hero-title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 12px;
}

@media (max-width: 768px) {
  .cog-hero-title {
    font-size: 30px;
  }
}

.cog-hero-subtitle {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.9;
  max-width: 640px;
  margin: 0 auto;
}

.cog-hero-search {
  max-width: 640px;
  margin: 32px auto 0;
}

/* Four nav items */

.cog-ways {
  padding: 24px 16px 48px;
  background-color: #ffffff;
}

@media (max-width: 768px) {
  .cog-ways {
    padding: 48px 16px 40px;
  }
}

.cog-ways-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.cog-ways-title {
  font-size: 32px;
  font-weight: 700;
  color: #051135;
  margin: 0 0 40px;
}

@media (max-width: 768px) {
  .cog-ways-title {
    font-size: 24px;
    margin-bottom: 32px;
  }
}

.cog-ways-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 992px) {
  .cog-ways-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .cog-ways-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.cog-way {
  text-decoration: none;
  color: inherit;
  padding: 24px 20px;
  border-radius: 12px;
  background-color: #f8f9fb;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.cog-way:hover {
  background-color: #f0f2f6;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.cog-way-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin: 0 auto 20px;
}

/* Color variants */

.cog-way-icon-training {
  background-color: #00c853;
}

.cog-way-icon-community {
  background-color: #0097a7;
}

.cog-way-icon-release {
  background-color: #00bfa5;
}

.cog-way-icon-support {
  background-color: #2962ff;
}

.cog-way-heading {
  font-size: 18px;
  font-weight: 700;
  color: #051135;
  margin: 0 0 6px;
}

.cog-way-text {
  font-size: 14px;
  line-height: 1.5;
  color: #41516b;
  margin: 0;
}













.category-custom-youtube {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.category-custom-youtube__title {
  font-size: 32px;
  margin-bottom: 10px;
  text-align: left;
}

.category-custom-youtube__subtitle {
  margin-bottom: 24px;
  font-size: 16px;
  color: #555;
}

.category-custom-youtube__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.category-custom-youtube__item {
  display: flex;
  flex-direction: column;
}

.category-custom-youtube__video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.category-custom-youtube__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.category-custom-youtube__item-title {
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 18px;
}

.category-custom-youtube__item-text {
  margin: 0;
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .category-custom-youtube__grid {
    grid-template-columns: 1fr;
  }
}





.tour-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tour-link__thumb {
  position: relative;
  padding-bottom: 56.25%;
  background: #e5e5e5;
}

@media (max-width: 768px) {
  .category-custom-youtube__grid {
    grid-template-columns: 1fr;
  }
}


.hero-search {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

/* override default search-icon positioning if needed */
.hero-search .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.search-block__title {
  font-weight: 800;
   font-size: 32px;
  font-weight: 700;
}




.persona-hub {
  padding: 3rem 1rem;
}

.persona-title {
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
}

.persona-subtitle {
  color: #5f6b7a;
  margin-bottom: 2rem;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.persona-card {
  background: #ffffff;
  border: 1px solid #e6e9ec;
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.persona-card:hover {
  border-color: #78bf52;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.persona-icon {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.persona-card h3 {
  margin: 0 0 0.5rem;
}

.persona-card p {
  font-size: 0.95rem;
  color: #5f6b7a;
  margin-bottom: 1rem;
}

.persona-cta {
  font-weight: 600;
  color: #00663b;
}




/* =========================
   Cognexo Home (Full CSS Block)
   Paste into style.css (ideally near the bottom)
   ========================= */

:root{
  --cog-green: #00663b;
  --cog-green-2: #78bf52;
  --cog-text: #1f2937;
  --cog-muted: #5f6b7a;
  --cog-border: #e6e9ec;
  --cog-bg: #ffffff;
  --cog-soft: #f7f9fb;
  --cog-radius: 12px;
  --cog-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Spacing between home sections */
.container .section.knowledge-base,
.section.home-section,
.persona-hub,
.cog-ways{
  margin-top: 2.75rem;
}

/* =========================
   HERO
   ========================= */

.section.hero{
  padding: 3.25rem 0;
}

.hero-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1rem;
}

.search-block__title{
  font-size: 2.2rem;
  line-height: 1.1;
  font-weight: 750;
  margin: 0 0 1rem;
  color: var(--cog-text);
  text-align: center;
}

.hero-search{
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.hero-search .search-icon{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cog-muted);
}

.hero-search input[type="search"],
.hero-search input[type="text"]{
  width: 100%;
  border: 1px solid var(--cog-border);
  border-radius: 999px;
  padding: 14px 16px 14px 44px;
  background: var(--cog-bg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  font-size: 1rem;
}

.hero-search input[type="search"]:focus,
.hero-search input[type="text"]:focus{
  outline: none;
  border-color: var(--cog-green-2);
  box-shadow: 0 0 0 4px rgba(120,191,82,0.18);
}

/* =========================
   SECTION TITLES (center + same size)
   ========================= */

.section-title,
.persona-title,
.section.knowledge-base > h2,
.section.home-section h2{
  text-align: center !important;
  font-size: 2rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  margin: 0 0 0.5rem !important;
  color: var(--cog-text);
}

.section-subtitle,
.persona-subtitle{
  text-align: center !important;
  font-size: 1.05rem !important;
  line-height: 1.4 !important;
  color: var(--cog-muted);
  margin: 0 auto 2rem !important;
  max-width: 720px;
}

/* =========================
   PERSONA HUB
   ========================= */

.persona-hub{
  padding: 0 1rem;
}

.persona-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.persona-card{
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.persona-card:hover{
  border-color: var(--cog-green-2);
  box-shadow: var(--cog-shadow);
  transform: translateY(-2px);
}

.persona-icon{
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  line-height: 1;
}

.persona-card h3{
  margin: 0 0 0.5rem;
  color: var(--cog-text);
}

.persona-card p{
  margin: 0 0 1rem;
  color: var(--cog-muted);
  font-size: 0.95rem;
}

.persona-cta{
  font-weight: 650;
  color: var(--cog-green);
}

/* =========================
   TILE ICONS (Explore + Categories)
   ========================= */

.tile-icon{
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  line-height: 1;
  color: var(--cog-green);
}

/* =========================
   EXPLORE (cog-ways)
   ========================= */

.cog-ways{
  padding: 0 1rem;
}

.cog-ways-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.cog-ways-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.cog-way{
  display: block;
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  padding: 1.5rem;
  text-decoration: none;
  transition: all 0.2s ease;
  color: inherit;
  text-align: center;
}

.cog-way:hover{
  border-color: var(--cog-green-2);
  box-shadow: var(--cog-shadow);
  transform: translateY(-2px);
}

.cog-way-heading{
  margin: 0 0 0.5rem;
  color: var(--cog-text);
  font-size: 1.05rem;
}

.cog-way-text{
  margin: 0;
  color: var(--cog-muted);
  font-size: 0.95rem;
}

/* Small arrow affordance under Explore tiles */
.cog-way::after{
  content: "→";
  display: inline-block;
  margin-top: 0.9rem;
  font-weight: 650;
  color: var(--cog-green);
}

/* =========================
   KNOWLEDGE BASE CATEGORIES (tiles)
   ========================= */

.section.knowledge-base{
  padding: 0 1rem 2rem;
}

.section.knowledge-base .blocks-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.section.knowledge-base .blocks-item{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.section.knowledge-base .blocks-item-link{
  display: block;
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  height: 100%;
}

.section.knowledge-base .blocks-item-link:hover{
  border-color: var(--cog-green-2);
  box-shadow: var(--cog-shadow);
  transform: translateY(-2px);
}

/* Category icon defaults + mapping */
.section.knowledge-base .category-icon::before{
  content: "📘";
}

.section.knowledge-base .blocks-item-link[href*="Getting-Started"] .category-icon::before{
  content: "🚀";
}
.section.knowledge-base .blocks-item-link[href*="Using-Cognexo"] .category-icon::before{
  content: "⚙️";
}
.section.knowledge-base .blocks-item-link[href*="FAQ"] .category-icon::before,
.section.knowledge-base .blocks-item-link[href*="FAQ-s"] .category-icon::before{
  content: "❓";
}

.section.knowledge-base .blocks-item-title{
  display: block;
  margin: 0 0 0.5rem;
  font-weight: 750;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--cog-text);
}

.section.knowledge-base .blocks-item-description{
  display: block;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--cog-muted);
}

/* =========================
   COMMUNITY CTA (panel + buttons)
   ========================= */

.section.home-section.community{
  margin-top: 3rem;
  padding: 2.5rem 1rem;
  background: var(--cog-soft);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
}

.community-cta{
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.25rem 0 0;
}

.button,
.button-large{
  background: var(--cog-green);
  border: 1px solid var(--cog-green);
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  font-weight: 650;
  color: #fff !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.button:hover,
.button-large:hover{
  background: #005432;
  border-color: #005432;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.button.is-secondary,
.button-large.is-secondary{
  background: transparent;
  color: var(--cog-green) !important;
  border-color: var(--cog-green);
}

.button.is-secondary:hover,
.button-large.is-secondary:hover{
  background: rgba(0,102,59,0.08);
}

/* =========================
   RECENT ACTIVITY (single clean card)
   ========================= */

.section.home-section.activity,
.section.home-section.activity::before{
  border-top: 0 !important;
  box-shadow: none !important;
}

.home-section.activity{
  border: 0 !important;
  background: transparent !important;
  padding-top: 0 !important;
}

/* remove nested borders */
.section.home-section.activity .recent-activity,
.section.home-section.activity .recent-activity-list,
.section.home-section.activity .recent-activity-container,
.section.home-section.activity .activity-list{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* main card */
.section.home-section.activity .recent-activity{
  background: var(--cog-bg) !important;
  border: 1px solid var(--cog-border) !important;
  border-radius: calc(var(--cog-radius) + 4px) !important;
  padding: 1.5rem !important;
}

/* inner list */
.section.home-section.activity .recent-activity .recent-activity-list,
.section.home-section.activity .recent-activity .activity-list{
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.section.home-section.activity .recent-activity-item{
  border-top: 1px solid var(--cog-border) !important;
  padding: 1rem 0 !important;
  margin: 0 !important;
}

.section.home-section.activity .recent-activity-item:first-child{
  border-top: 0 !important;
}

.section.home-section.activity .recent-activity-item-meta,
.section.home-section.activity .recent-activity-item time,
.section.home-section.activity .recent-activity-item .meta{
  color: var(--cog-muted) !important;
  font-size: 0.9rem !important;
}
/* =========================
   HOME: Align all tile content left
   ========================= */

/* Explore tiles */
.cog-way{
  text-align: left;
}

/* Ensure icon + text stack consistently */
.cog-way .tile-icon,
.blocks-item-link .tile-icon,
.persona-card .persona-icon{
  text-align: left;
}

/* Remove any inherited centering */
.cog-way h3,
.cog-way p,
.blocks-item-link span{
  text-align: left;
}



/* =========================
   Cognexo Home — Consistent Tile System
   Paste at the BOTTOM of style.css
   ========================= */

:root{
  --cog-green: #00663b;
  --cog-green-2: #78bf52;
  --cog-text: #1f2937;
  --cog-muted: #5f6b7a;
  --cog-border: #e6e9ec;
  --cog-bg: #ffffff;
  --cog-soft: #f7f9fb;
  --cog-radius: 12px;
  --cog-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* =========================
   Section spacing
   ========================= */

.container .section.knowledge-base,
.section.home-section,
.persona-hub,
.cog-ways{
  margin-top: 2.75rem;
}

/* =========================
   Hero
   ========================= */

.section.hero{ padding: 3.25rem 0; }

.hero-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1rem;
}

.search-block__title{
  font-size: 2.2rem;
  line-height: 1.1;
  font-weight: 750;
  margin: 0 0 1rem;
  color: var(--cog-text);
  text-align: center;
}

.hero-search{
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.hero-search .search-icon{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cog-muted);
}

.hero-search input[type="search"],
.hero-search input[type="text"]{
  width: 100%;
  border: 1px solid var(--cog-border);
  border-radius: 999px;
  padding: 14px 16px 14px 44px;
  background: var(--cog-bg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  font-size: 1rem;
}

.hero-search input[type="search"]:focus,
.hero-search input[type="text"]:focus{
  outline: none;
  border-color: var(--cog-green-2);
  box-shadow: 0 0 0 4px rgba(120,191,82,0.18);
}

/* =========================
   Titles (same size, centered)
   ========================= */

.section-title,
.persona-title,
.section.knowledge-base > h2,
.section.home-section h2{
  text-align: center !important;
  font-size: 2rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  margin: 0 0 0.5rem !important;
  color: var(--cog-text);
}

.section-subtitle,
.persona-subtitle{
  text-align: center !important;
  font-size: 1.05rem !important;
  line-height: 1.4 !important;
  color: var(--cog-muted);
  margin: 0 auto 2rem !important;
  max-width: 720px;
}

/* =========================
   Shared tile layout (persona, explore, categories)
   ========================= */

.persona-grid,
.cog-ways-grid,
.section.knowledge-base .blocks-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

/* Make all tiles behave the same */
.persona-card,
.cog-way,
.section.knowledge-base .blocks-item-link{
  display: block;
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  padding: 1.5rem;
  padding-bottom: 1.75rem; /* room for CTA */
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  height: 100%;
  text-align: left;
  box-sizing: border-box;
}

.persona-card:hover,
.cog-way:hover,
.section.knowledge-base .blocks-item-link:hover{
  border-color: var(--cog-green-2);
  box-shadow: var(--cog-shadow);
  transform: translateY(-2px);
}

/* Icons (consistent size + spacing) */
.persona-icon,
.tile-icon{
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
  line-height: 1;
  color: var(--cog-green);
}

/* Headings */
.persona-card h3,
.cog-way-heading,
.section.knowledge-base .blocks-item-title{
  display: block;
  margin: 0 0 0.5rem;
  font-weight: 750;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--cog-text);
}

/* Descriptions */
.persona-card p,
.cog-way-text,
.section.knowledge-base .blocks-item-description{
  display: block;
  margin: 0;
  color: var(--cog-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Persona descriptions need a little breathing room above CTA */
.persona-card p{ margin-bottom: 1rem; }

/* Remove Zendesk default list styling for categories */
.section.knowledge-base .blocks-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.section.knowledge-base .blocks-item{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* =========================
   CTA (consistent everywhere)
   ========================= */

.persona-cta,
.tile-cta{
  display: inline-block;
  margin-top: 1.25rem;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--cog-green);
  text-decoration: none;
}

.persona-card:hover .persona-cta,
.cog-way:hover .tile-cta,
.section.knowledge-base .blocks-item-link:hover .tile-cta{
  text-decoration: underline;
}

/* =========================
   Category icons (default + common mappings by URL)
   ========================= */

.section.knowledge-base .category-icon::before{ content: "📘"; }

.section.knowledge-base .blocks-item-link[href*="Getting-Started"] .category-icon::before,
.section.knowledge-base .blocks-item-link[href*="getting-started"] .category-icon::before{
  content: "🚀";
}

.section.knowledge-base .blocks-item-link[href*="Using-Cognexo"] .category-icon::before,
.section.knowledge-base .blocks-item-link[href*="using-cognexo"] .category-icon::before{
  content: "⚙️";
}

.section.knowledge-base .blocks-item-link[href*="FAQ"] .category-icon::before,
.section.knowledge-base .blocks-item-link[href*="faq"] .category-icon::before{
  content: "❓";
}

/* =========================
   Community CTA panel + buttons
   ========================= */

.section.home-section.community{
  margin-top: 3rem;
  padding: 2.5rem 1rem;
  background: var(--cog-soft);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
}

.community-cta{
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.25rem 0 0;
}

.button,
.button-large{
  background: var(--cog-green);
  border: 1px solid var(--cog-green);
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  font-weight: 650;
  color: #fff !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.button:hover,
.button-large:hover{
  background: #005432;
  border-color: #005432;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.button.is-secondary,
.button-large.is-secondary{
  background: transparent;
  color: var(--cog-green) !important;
  border-color: var(--cog-green);
}

.button.is-secondary:hover,
.button-large.is-secondary:hover{
  background: rgba(0,102,59,0.08);
}

/* =========================
   Recent activity (single border, no top rule)
   ========================= */

.section.home-section.activity,
.section.home-section.activity::before{
  border-top: 0 !important;
  box-shadow: none !important;
}

.home-section.activity{
  border: 0 !important;
  background: transparent !important;
  padding-top: 0 !important;
}

.section.home-section.activity .recent-activity,
.section.home-section.activity .recent-activity-list,
.section.home-section.activity .recent-activity-container,
.section.home-section.activity .activity-list{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.section.home-section.activity .recent-activity{
  background: var(--cog-bg) !important;
  border: 1px solid var(--cog-border) !important;
  border-radius: calc(var(--cog-radius) + 4px) !important;
  padding: 1.5rem !important;
}

.section.home-section.activity .recent-activity .recent-activity-list,
.section.home-section.activity .recent-activity .activity-list{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.section.home-section.activity .recent-activity-item{
  border-top: 1px solid var(--cog-border) !important;
  padding: 1rem 0 !important;
  margin: 0 !important;
}

.section.home-section.activity .recent-activity-item:first-child{
  border-top: 0 !important;
}

.section.home-section.activity .recent-activity-item-meta,
.section.home-section.activity .recent-activity-item time,
.section.home-section.activity .recent-activity-item .meta{
  color: var(--cog-muted) !important;
  font-size: 0.9rem !important;
}


/* =========================
   FIX: Category tile CTA disappears on hover
   ========================= */

/* Make the whole card a flex column so CTA has a stable place */
.section.knowledge-base .blocks-item-link{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  height: 100% !important;
  overflow: visible !important;     /* prevent clipping */
  position: relative;
}

/* Push CTA to the bottom consistently */
.section.knowledge-base .blocks-item-link .tile-cta{
  margin-top: auto !important;      /* key line */
  padding-top: 1.25rem;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure hover never hides it */
.section.knowledge-base .blocks-item-link:hover .tile-cta{
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* If any parent is clipping hover content, disable it */
.section.knowledge-base .blocks-item,
.section.knowledge-base .blocks-list,
.section.knowledge-base .categories,
.section.knowledge-base{
  overflow: visible !important;
}

.section.knowledge-base .blocks-item-description{
  min-height: 2.2em; /* keeps two-line rhythm */
}

/* =========================
   FIX: Category CTA missing on some tiles
   ========================= */

/* Force consistent structure for ALL category tiles */
.section.knowledge-base .blocks-item-link{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: 100% !important;
}

/* Make sure title + description behave like blocks */
.section.knowledge-base .blocks-item-title,
.section.knowledge-base .blocks-item-description{
  display: block !important;
}

/* Ensure CTA always exists visually */
.section.knowledge-base .blocks-item-link .tile-cta{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* Pin CTA lower down consistently */
  margin-top: auto !important;
  padding-top: 1.25rem !important;

  /* Protect from theme rules that hide last/first children */
  position: relative !important;
  z-index: 2 !important;
}

/* Some Zendesk themes hide the last element in blocks — override hard */
.section.knowledge-base .blocks-item-link > :last-child{
  display: inline-block !important;
}

/* If Zendesk applies hover styles that affect spans, override */
.section.knowledge-base .blocks-item-link:hover .tile-cta{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* =========================
   FIX: Category tile CTA consistency
   ========================= */

/* Make category tiles a column layout */
.section.knowledge-base .blocks-item-link{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  height: 100% !important;
}

/* Ensure description doesn't “eat” the CTA */
.section.knowledge-base .blocks-item-description{
  margin-bottom: 0 !important;
}

/* Pin CTA to the bottom of the card */
.section.knowledge-base .blocks-item-link .tile-cta{
  margin-top: auto !important;
  padding-top: 1.25rem !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* =========================
   FIX: Remove underline on card hover
   ========================= */

/* Kill underline for the whole card */
.persona-card,
.persona-card:hover,
.persona-card:focus,
.persona-card *{
  text-decoration: none !important;
}

/* Specifically protect CTA text */
.persona-card .persona-cta,
.persona-card:hover .persona-cta{
  text-decoration: none !important;
}

/* Same fix for Explore + KB tiles */
.cog-way,
.cog-way:hover,
.cog-way *{
  text-decoration: none !important;
}

.kb-tiles .persona-card,
.kb-tiles .persona-card:hover,
.kb-tiles .persona-card *{
  text-decoration: none !important;
}
/* =========================================================
   Cognexo Help Centre — Section Page (clean + consistent)
   Applies to: .cog-section-page templates
   ========================================================= */

:root{
  --cog-bg: #ffffff;
  --cog-soft: #f7f8fa;
  --cog-text: #111827;
  --cog-muted: #6b7280;
  --cog-border: rgba(17, 24, 39, 0.12);
  --cog-radius: 16px;
  --cog-green: #00663B;
  --cog-green-2: #78BF52;
  --cog-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --cog-max: 1120px; /* single source of truth for content width */
}

/* ---------------------------------------------------------
   Layout + alignment (avoid Zendesk centering)
   --------------------------------------------------------- */

.cog-section-page{
  margin-top: 1rem;
}

.section-container.cog-section-page,
.section-container.cog-section-page .section-content{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Constrain readable width but keep LEFT aligned */
.section-container.cog-section-page .section-content > *{
  max-width: var(--cog-max);
  margin-left: 0;
  margin-right: 0;
}

/* Remove Zendesk divider line if present */
.container-divider{
  display: none !important;
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* No underline anywhere inside this page */
.section-container.cog-section-page a,
.section-container.cog-section-page a:hover,
.section-container.cog-section-page a:focus{
  text-decoration: none !important;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.cog-page-header{
  margin-bottom: 1.25rem;
}

.cog-header-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cog-h1{
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 750;
  color: var(--cog-text);
}

.cog-header-desc{
  margin: 0.75rem 0 0;
  color: var(--cog-muted);
  font-size: 1.05rem;
  line-height: 1.45;
  max-width: 72ch;
}

/* Subscribe area */
.cog-subscribe{
  margin-left: auto;
}

/* ---------------------------------------------------------
   Shared card wrapper (used by list cards + featured inner)
   --------------------------------------------------------- */

.cog-list-card{
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  padding: 1.25rem;
  margin-top: 1.25rem;
}

.cog-list-title{
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 750;
  color: var(--cog-text);
}

/* ---------------------------------------------------------
   Lists (sub-sections + articles)
   --------------------------------------------------------- */

.cog-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.cog-list-item{
  border-top: 1px solid var(--cog-border);
}

/* Remove the first divider line */
.cog-list-item:first-child{
  border-top: 0;
}

/* Row link */
.cog-list-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0.25rem;
  color: inherit;
  text-decoration: none !important;
}

.cog-list-link:hover{
  background: rgba(120,191,82,0.08);
  border-radius: 10px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.cog-list-name{
  font-weight: 650;
  color: var(--cog-text);
}

/* Left block for article rows */
.cog-article-left{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

/* Prevent long titles breaking layout */
.cog-article-left .cog-list-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron */
.cog-chevron{
  color: var(--cog-muted);
  flex: 0 0 auto;
}

.cog-list-link:hover .cog-chevron{
  color: var(--cog-green);
}

/* Badges */
.cog-badges{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cog-badge{
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--cog-border);
  color: var(--cog-muted);
  background: #fff;
}

.cog-badge--internal{
  border-color: rgba(31,41,55,0.18);
  color: #111827;
  background: rgba(31,41,55,0.06);
}

/* Empty state */
.cog-empty{
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px dashed var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  color: var(--cog-muted);
  background: var(--cog-soft);
}

/* ---------------------------------------------------------
   Featured carousel (Promoted articles)
   IMPORTANT: wrapper aligns with .cog-list-card
   --------------------------------------------------------- */

/* Outer wrapper: no border/padding so it aligns perfectly */
.cog-featured{
  margin-top: 1.25rem;
}

/* Inner wrapper: matches .cog-list-card exactly */
.cog-featured-inner{
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  padding: 1.25rem;
}

.cog-featured-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.cog-featured-title{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 750;
  color: var(--cog-text);
}

.cog-featured-controls{
  display: flex;
  gap: 0.5rem;
}

.cog-featured-btn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--cog-border);
  background: #fff;
  color: var(--cog-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.cog-featured-btn:hover{
  border-color: var(--cog-green-2);
  background: rgba(120,191,82,0.06);
}

/* Track: add “buffer” so hover never clips */
.cog-featured-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1rem;

  overflow-x: auto;
  overflow-y: visible;         /* key: allow hover visuals */
  padding: 4px;                /* buffer */
  margin: -4px;                /* keeps alignment */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.cog-featured-track::-webkit-scrollbar{
  height: 10px;
}
.cog-featured-track::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
}
.cog-featured-track::-webkit-scrollbar-track{
  background: transparent;
}

/* Cards */
.cog-featured-card{
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  padding: 1rem;
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  background: #fff;

  color: inherit;
  text-decoration: none !important;

  transition: border-color .15s ease, background .15s ease;
}

.cog-featured-card:hover{
  border-color: var(--cog-green-2);
  background: rgba(120,191,82,0.03);
}

/* Badge */
.cog-featured-badge{
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(120,191,82,0.14);
  color: var(--cog-green);
}

.cog-featured-card-title{
  font-size: 1rem;
  font-weight: 750;
  color: var(--cog-text);
  line-height: 1.25;
}

.cog-featured-card-excerpt{
  color: var(--cog-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.cog-featured-card-cta{
  margin-top: auto;
  font-weight: 700;
  color: var(--cog-green);
  text-decoration: none !important;
}

.cog-featured-empty{
  display: none;
  margin-top: 0.75rem;
  color: var(--cog-muted);
  font-size: 0.95rem;
}
/* =========================================================
   FIX: Some section pages still "sit in a centred column"
   Force the section-content column itself to be left-anchored
   ========================================================= */

.section-container.cog-section-page{
  /* Copenhagen sometimes uses flex/grid centring */
  display: block !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.section-container.cog-section-page .section-content{
  /* THIS is the key: stop the centred column */
  max-width: var(--cog-max) !important;
  width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  /* defensive: some themes add auto margins */
  margin: 0 !important;
}

/* If the theme wraps section pages in a grid, this helps too */
.section-container.cog-section-page .section-content{
  justify-self: start !important;
  align-self: start !important;
}


.cog-featured-subtitle{
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--cog-muted);
}
/* ======================================
   CATEGORY PAGE — Remove Center Alignment
   ====================================== */

/* Kill Zendesk's centered column behaviour */
.category-container,
.category-content,
.category-page,
.category {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force left anchoring */
.category-container {
  display: block !important;
}

.category-container .category-content {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep readable width but LEFT aligned */
.category-content .page-header,
.category-content .category-blocks-grid {
  max-width: 1120px; /* match your section pages */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* If Zendesk is injecting centering via grid */
.category-container {
  justify-self: start !important;
  align-self: start !important;
}

/* Category page: section title + article count on one line */
.cog-section-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.cog-count{
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--cog-muted);
  background: rgba(120,191,82,0.08);
  border: 1px solid var(--cog-border);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Your meta line (if you don’t already have it styled) */
.cog-list-meta{
  color: var(--cog-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}
/* Right side container (count + chevron) */
.cog-right-meta{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

/* Article count badge */
.cog-count{
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--cog-muted);
  background: rgba(120,191,82,0.08);
  border: 1px solid var(--cog-border);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  min-width: 32px;
  text-align: center;
}

/* Optional: subtle hover behaviour */
.cog-list-link:hover .cog-count{
  border-color: var(--cog-green-2);
  background: rgba(120,191,82,0.15);
}



/* =========================
   Breadcrumbs — cleaner, calmer
   ========================= */

.sub-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Zendesk breadcrumb wrapper */
.breadcrumbs{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--cog-muted);
}

/* Items */
.breadcrumbs li{
  display: inline-flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Links */
.breadcrumbs a{
  color: var(--cog-muted);
  text-decoration: none !important;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}

.breadcrumbs a:hover{
  background: rgba(120,191,82,0.10);
  color: var(--cog-text);
}

/* Current page */
.breadcrumbs li:last-child,
.breadcrumbs li:last-child a{
  color: var(--cog-text);
  font-weight: 650;
  pointer-events: none;
}

/* Separator */
.breadcrumbs li:not(:last-child)::after{
  content: "›";
  margin: 0 0.25rem;
  color: rgba(0,0,0,0.28);
}

/* Remove any default separators Zendesk might inject */
.breadcrumbs li::before{
  display: none !important;
}

/* Keep breadcrumbs + search aligned nicely */
.sub-nav .search-container{
  margin-left: auto;
}


/* =========================
   ARTICLE PAGE — Cognexo styling (matches section/category)
   ========================= */

/* Layout: left-aligned readable column + sidebar */
.article-container{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  width: 100%;
  max-width: none;
}

/* Keep content left aligned (Zendesk sometimes centers columns) */
.article-container,
.article,
.article-sidebar{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Cap readable width but keep it left */
.article-container{
  max-width: 1120px;
}

/* Mobile stack */
@media (max-width: 980px){
  .article-container{
    grid-template-columns: 1fr;
  }
  .article-sidebar{
    order: 2;
  }
  .article{
    order: 1;
  }
}

/* =========================
   Sub-nav: breadcrumbs + search line up nicely
   ========================= */

.sub-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.sub-nav .breadcrumbs{
  margin: 0;
}

/* search container should not shove layout around */
.sub-nav .search-container{
  flex: 0 0 auto;
}

/* =========================
   Sidebar card (Articles in this section)
   ========================= */

.article-sidebar{
  position: sticky;
  top: 1rem;
}

.collapsible-sidebar{
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  padding: 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.collapsible-sidebar-title{
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--cog-text);
}

.collapsible-sidebar-toggle{
  border: 1px solid var(--cog-border);
  background: #fff;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.collapsible-sidebar-toggle:hover{
  border-color: var(--cog-green-2);
  background: rgba(120,191,82,0.06);
}

/* Sidebar list */
.collapsible-sidebar-body ul{
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}

.collapsible-sidebar-body li + li{
  margin-top: 0.35rem;
}

.sidenav-item{
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--cog-text);
  font-weight: 600;
  line-height: 1.25;
}

.sidenav-item:hover{
  background: rgba(120,191,82,0.08);
}

.sidenav-item.current-article{
  background: rgba(120,191,82,0.14);
  border: 1px solid rgba(120,191,82,0.35);
  color: var(--cog-text);
}

/* "See more" */
.article-sidebar-item{
  display: inline-flex;
  margin-top: 0.75rem;
  font-weight: 700;
  color: var(--cog-green);
  text-decoration: none !important;
}

/* kill underlines in sidebar */
.article-sidebar a,
.article-sidebar a:hover,
.article-sidebar a:focus{
  text-decoration: none !important;
}

/* =========================
   Article main card
   ========================= */

.article{
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  padding: 1.5rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Header */
.article-header{
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--cog-border);
}

/* Title */
.article-title{
  margin: 0 0 0.75rem;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  color: var(--cog-text);
}

/* Author/meta row */
.article-author{
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.article-avatar .user-avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: block;
}

.article-meta{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.article-meta a{
  font-weight: 700;
  color: var(--cog-text);
  text-decoration: none !important;
}

.meta-group{
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.meta-data{
  color: var(--cog-muted);
  font-size: 0.9rem;
}

/* Follow button */
.article-subscribe{
  margin-left: auto;
}

.article-subscribe .button,
.article-subscribe button{
  border-radius: 999px !important;
}

/* =========================
   Article body typography (calm + consistent)
   ========================= */

.article-body{
  color: var(--cog-text);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Headings inside article */
.article-body h2{
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
  font-weight: 800;
}
.article-body h3{
  margin-top: 1.25rem;
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
  font-weight: 800;
}

/* Links: Cognexo green, no harsh underlines */
.article-body a{
  color: var(--cog-green);
  text-decoration: none !important;
  font-weight: 650;
}

.article-body a:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Lists */
.article-body ul,
.article-body ol{
  padding-left: 1.25rem;
}

.article-body li + li{
  margin-top: 0.35rem;
}

/* Blockquotes / callouts */
.article-body blockquote{
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-left: 4px solid rgba(120,191,82,0.55);
  background: rgba(120,191,82,0.08);
  border-radius: 10px;
}

/* Code */
.article-body code{
  background: rgba(31,41,55,0.06);
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  font-size: 0.95em;
}
.article-body pre{
  background: rgba(31,41,55,0.06);
  padding: 1rem;
  border-radius: 12px;
  overflow: auto;
}

/* Tables */
.article-body table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--cog-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 1rem 0;
}
.article-body th,
.article-body td{
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--cog-border);
  text-align: left;
  vertical-align: top;
}
.article-body th{
  background: rgba(120,191,82,0.06);
  font-weight: 800;
}
.article-body tr:last-child td{
  border-bottom: 0;
}

/* Images */
.article-body img{
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--cog-border);
}

/* =========================
   Attachments: match card look
   ========================= */

.article-attachments .attachments{
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.attachment-item{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  border: 1px solid var(--cog-border);
  border-radius: 12px;
  background: #fff;
}

.attachment-item + .attachment-item{
  margin-top: 0.75rem;
}

.attachment-item a{
  color: var(--cog-green);
  font-weight: 700;
  text-decoration: none !important;
}

.attachment-meta{
  margin-top: 0.25rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.attachment-meta-item{
  color: var(--cog-muted);
  font-size: 0.9rem;
}

/* =========================
   Votes + footer tidy
   ========================= */

.article-votes{
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cog-border);
}

.article-votes-question{
  margin: 0 0 0.75rem;
  font-weight: 800;
}

.article-vote.button{
  border-radius: 999px !important;
}

/* Return to top */
.article-return-to-top a{
  color: var(--cog-green);
  font-weight: 700;
  text-decoration: none !important;
}

/* =========================
   Kill unwanted divider line (if still showing)
   ========================= */

.container-divider{
  display: none !important;
  height: 0 !important;
  border: 0 !important;
}
/* =========================
   ARTICLE PAGE — fix crushed sidebar + align to Cognexo styling
   ========================= */

/* Kill the stray divider line on article pages too */
.container-divider{
  display: none !important;
}

/* Make the whole article page behave like your section/category pages */
#article-container.article-container{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.cog-article-page #article-container.article-container {
  margin-top: 18px !important;
}

/* Force a stable two-column layout */
.article-container{
  display: flex !important;
  align-items: flex-start;
  gap: 24px;
}

/* Sidebar: stop it shrinking into a pencil */
.article-sidebar{
  flex: 0 0 320px !important;     /* fixed column */
  width: 320px !important;
  min-width: 280px !important;
  max-width: 360px !important;
}

/* Main article column */
.article{
  flex: 1 1 auto !important;
  min-width: 0; /* important so the article can shrink without breaking layout */
}

/* Your “card” look for the article body */
.article{
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  padding: 1.25rem;
}

/* Sidebar collapsible styling to match your lists */
.collapsible-sidebar{
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  padding: 1rem;
}

/* This is the bit causing the vertical “A r t i c l e s …” look */
.collapsible-sidebar-title{
  display: block;
  width: auto !important;
  max-width: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;  /* stops letter-by-letter wrapping */
  font-weight: 750;
  color: var(--cog-text);
  margin: 0 0 .75rem;
}

/* Make the toggle not sit on top of the title */
.collapsible-sidebar-toggle{
  position: static !important;
  margin: 0 0 .75rem;
}

/* Sidebar list styling */
.collapsible-sidebar-body ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.collapsible-sidebar-body li{
  border-top: 1px solid var(--cog-border);
}

.collapsible-sidebar-body li:first-child{
  border-top: 0;
}

.sidenav-item{
  display: block;
  padding: .75rem .5rem;
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--cog-text);
  font-weight: 600;
}

.sidenav-item:hover{
  background: rgba(120,191,82,0.08);
  text-decoration: none !important;
}

.sidenav-item.current-article{
  background: rgba(120,191,82,0.12);
  color: var(--cog-green);
}

/* Make the top sub-nav align nicely */
.sub-nav{
  align-items: center;
}

/* Mobile: stack sidebar above article */
@media (max-width: 980px){
  .article-container{
    flex-direction: column;
  }
  .article-sidebar{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}
/* =========================
   REQUEST PAGE — Cognexo styling
   ========================= */

.request-breadcrumbs { margin-top: 0.5rem; }

.request-title{
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 750;
  color: var(--cog-text);
  margin: 1rem 0 1.25rem;
}

/* Layout */
.request-container{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 1024px){
  .request-container{ grid-template-columns: 1fr; }
}

/* Main + Sidebar cards */
.request-main,
.request-sidebar{
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  padding: 1.25rem;
}

.request-sidebar{
  position: sticky;
  top: 1rem;
  height: fit-content;
}

/* Remove pointless toggle button */
.request-sidebar .collapsible-sidebar-toggle{ display:none !important; }
.request-sidebar .collapsible-sidebar-title{
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--cog-text);
}

/* Ticket details list */
.request-details{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.request-details dt{
  font-size: 0.85rem;
  color: var(--cog-muted);
  margin: 0.5rem 0 0;
}

.request-details dd{
  margin: 0;
  color: var(--cog-text);
  font-weight: 600;
}

.status-label-request{
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-weight: 700;
  border: 1px solid var(--cog-border);
}

/* Conversation timeline */
.comment-list{ margin: 0; padding: 0; list-style: none; }
.comment{
  border-top: 1px solid var(--cog-border);
  padding-top: 1rem;
  margin-top: 1rem;
}
.comment:first-child{
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.comment-wrapper{
  background: #fff;
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  padding: 1rem;
}

.comment-author{
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.comment-meta .meta-data{
  color: var(--cog-muted);
  font-weight: 500;
}

/* Attachments */
.attachments{
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cog-border);
  padding-top: 0.75rem;
}

.attachment-item a{
  color: var(--cog-green);
  text-decoration: none !important;
}
.attachment-item a:hover{
  text-decoration: underline !important;
}

/* Reply box */
.comment-form{
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cog-border);
}

.comment-show-container{
  width: 100%;
  border-radius: var(--cog-radius);
  border: 1px solid var(--cog-border);
  background: rgba(120,191,82,0.06);
  color: var(--cog-text);
  font-weight: 700;
  padding: 0.9rem 1rem;
  text-align: left;
  cursor: pointer;
}

.comment-show-container:hover{
  border-color: var(--cog-green-2);
  background: rgba(120,191,82,0.10);
}
/* =========================
   REQUEST PAGE: comment alignment fix
   ========================= */

.request-main .comment-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.request-main .comment{
  border-top: 1px solid var(--cog-border);
  padding-top: 1rem;
  margin-top: 1rem;
}

.request-main .comment:first-child{
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.request-main .comment-wrapper{
  background: #fff;
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 2px);
  padding: 1rem;
}

/* Make the comment header a stable 2-col grid */
.request-main .comment-author{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

/* Avatar size + prevent layout wobble */
.request-main .comment-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}

.request-main .comment-avatar .user-avatar{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stop the “agent badge” nudging baseline */
.request-main .comment-avatar .icon-agent{
  position: absolute;
  right: -2px;
  bottom: -2px;
}

/* Name/meta alignment */
.request-main .comment-meta{
  min-width: 0;
}

.request-main .comment-meta > span{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 750;
  color: var(--cog-text);
  line-height: 1.2;
}

.request-main .comment-meta .meta-group{
  margin-top: 0.2rem;
}

.request-main .comment-meta .meta-data{
  color: var(--cog-muted);
  font-weight: 500;
  line-height: 1.2;
}

/* Body spacing consistency */
.request-main .comment-body{
  margin: 0;
  color: var(--cog-text);
  line-height: 1.6;
}

/* Attachments align + don’t “indent weirdly” */
.request-main .attachments{
  margin: 0.85rem 0 0;
  padding: 0.85rem 0 0;
  list-style: none;
  border-top: 1px solid var(--cog-border);
}

.request-main .attachment-item{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.35rem 0;
}
/* Layout */
.cog-request-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin-top: 24px;
}

@media (max-width: 1024px) {
  .cog-request-layout {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.cog-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 24px;
}

.cog-card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Timeline */
.cog-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cog-timeline-item {
  padding: 20px 0;
  border-bottom: 1px solid #F0F2F4;
}

.cog-comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cog-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.cog-comment-date {
  font-size: 13px;
  color: #6B7280;
  margin-left: 8px;
}

/* Reply */
.cog-reply-controls {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Sidebar details */
.cog-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
}

.cog-detail-row:last-child {
  border-bottom: none;
}
/* Toolbar layout */
.cog-requests-toolbar { margin-top: 16px; }
.cog-toolbar-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cog-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cog-toolbar-right { margin-left: auto; }
.cog-search { min-width: 260px; }
.cog-search-info { margin-top: 12px; }

/* Requests list */
.cog-requests-list .cog-list-link {
  align-items: stretch;
}

.cog-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cog-request-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cog-request-subject {
  font-weight: 750;
  color: var(--cog-text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cog-request-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--cog-muted);
  font-size: 13px;
}

.cog-request-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.cog-list-item.is-closed .cog-request-subject {
  opacity: 0.75;
}


/* Hide Export to Excel (covers common implementations) */
.export-to-excel,
.requests-export,
.my-activities-export,
a[download],
button[aria-label*="Export"],
button[class*="export"],
a[class*="export"]{
  display: none !important;
}



/* ==========================================
   COMMUNITY – Forum Style
========================================== */

.cog-community-topic {
  max-width: 1120px;
}

/* Header */
.cog-topic-header {
  margin-bottom: 1.5rem;
}

.cog-topic-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cog-topic-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Filters */
.cog-topic-filters {
  margin-bottom: 1.5rem;
}

.topic-filters {
  display: flex;
  gap: 1rem;
}

/* Posts */
.cog-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cog-post-card {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  margin-bottom: 1rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cog-post-card:hover {
  border-color: var(--cog-green-2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

.cog-post-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cog-text);
}

.cog-post-meta {
  font-size: 0.85rem;
  color: var(--cog-muted);
  margin-top: 0.35rem;
  display: flex;
  gap: 0.5rem;
}

.cog-post-stats {
  display: flex;
  gap: 1rem;
  font-weight: 600;
  color: var(--cog-muted);
  align-items: center;
}

.cog-post-stat {
  font-size: 0.85rem;
}
.cog-featured-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 1rem;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.cog-featured-card {
  scroll-snap-align: start;
}
/* More breathing room after featured carousel */
.cog-featured {
  margin-bottom: 2.5rem; /* was too tight */
}
.cog-topic-controls {
  display: flex;
  gap: 2rem;
  margin: 2rem 0 1.5rem;
  align-items: center;
}

/* Keep Zendesk dropdown working */
.cog-topic-controls .dropdown {
  position: relative;
}

/* Clean toggle button */
.cog-topic-controls .dropdown-toggle {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cog-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cog-topic-controls .dropdown-toggle:hover {
  color: var(--cog-green);
}

/* Make sure menu displays above cards */
.cog-topic-controls .dropdown-menu {
  z-index: 1000;
}
/* Controls row: NOT a big card, just a row above the list */
.cog-topic-controls{
  display:flex;
  gap: 1.5rem;
  align-items:center;
  margin: 1.75rem 0 1rem;
}

/* IMPORTANT: dropdown needs a positioning context */
.cog-topic-controls .dropdown{
  position: relative;
  display: inline-flex;
}

/* Button look */
.cog-topic-controls .dropdown-toggle{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--cog-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.2;
}

/* Kill any hover movement from theme defaults */
.cog-topic-controls .dropdown-toggle,
.cog-topic-controls .dropdown-toggle:hover,
.cog-topic-controls .dropdown-toggle:active{
  transform: none !important;
  box-shadow: none !important;
}

/* Menu base (hidden) */
.cog-topic-controls .dropdown-menu{
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  padding: 0.4rem;
  border-radius: 12px;
  border: 1px solid var(--cog-border);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  z-index: 9999; /* keep above cards */
}

/* Show conditions:
   - our fallback .is-open
   - Zendesk toggles aria-expanded
   - keyboard navigation */
.cog-topic-controls .dropdown.is-open .dropdown-menu,
.cog-topic-controls .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
.cog-topic-controls .dropdown:focus-within .dropdown-menu{
  display: block;
}

/* Menu links */
.cog-topic-controls .dropdown-menu a{
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  color: var(--cog-text);
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.93rem;
}

.cog-topic-controls .dropdown-menu a:hover{
  background: rgba(120,191,82,0.10);
  color: var(--cog-green);
}

/* If ANY parent is clipping menus, this prevents it */
.container,
.posts-list,
.striped-list,
.cog-list-card,
.cog-card{
  overflow: visible !important;
}
/* =========================
   Featured & Post Stats Icons
   ========================= */

.cog-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #2f6b4f;
}

.cog-stat svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  display: inline-block;
  flex-shrink: 0;
}

.cog-featured-stats,
.cog-post-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}
/* =========================
   Community follow button ({{subscribe}})
   ========================= */

/* Covers most Zendesk subscribe markup variations */
.cog-topic-actions .subscribe,
.cog-topic-actions .follow,
.cog-topic-actions [data-follow-button],
.cog-topic-actions .community-follow,
.cog-topic-actions .subscription-button,
.cog-topic-actions form[action*="subscriptions"] {
  display: inline-flex;
}

/* The actual clickable element */
.cog-topic-actions .subscribe button,
.cog-topic-actions .follow button,
.cog-topic-actions [data-follow-button] button,
.cog-topic-actions .subscription-button,
.cog-topic-actions a.subscription-button,
.cog-topic-actions input[type="submit"],
.cog-topic-actions button {
  appearance: none;
  border: 1px solid #0b5a3c;        /* Cognexo green */
  background: #ffffff;
  color: #0b5a3c;
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 18px;
  line-height: 1;
  cursor: pointer;
  transition: none;                 /* no movement */
  box-shadow: none;
}

/* Hover/focus (no shifting) */
.cog-topic-actions .subscribe button:hover,
.cog-topic-actions .follow button:hover,
.cog-topic-actions [data-follow-button] button:hover,
.cog-topic-actions .subscription-button:hover,
.cog-topic-actions button:hover {
  background: rgba(11, 90, 60, 0.08);
}

/* “Following” state tends to add classes like .is-following / aria-pressed=true */
.cog-topic-actions [aria-pressed="true"],
.cog-topic-actions .is-following,
.cog-topic-actions .following {
  background: #0b5a3c !important;
  color: #ffffff !important;
  border-color: #0b5a3c !important;
}
/* =========================
   Community Topic List Page
   ========================= */

.cog-community-topics {
  padding-top: 16px;
}

/* Card base (should match your other pages) */
.cog-card {
  border: 1px solid #e6e8eb;
  border-radius: 24px;
  background: #fff;
  padding: 28px;
  margin: 18px 0;
}

/* Header */
.cog-community-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.cog-h1 {
  font-size: 48px;
  line-height: 1.05;
  margin: 0;
  color: #0b1220;
  font-weight: 800;
}

.cog-h2 {
  font-size: 20px;
  margin: 0;
  font-weight: 800;
  color: #0b1220;
}

.cog-header-desc {
  margin-top: 10px;
  margin-bottom: 0;
  color: #6b7280;
  font-size: 18px;
  line-height: 1.45;
  max-width: 70ch;
}

.cog-community-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Featured carousel */
.cog-community-featured-wrap {
  margin-top: 18px;
}

.cog-featured-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 12px;
}

.cog-featured-controls {
  display: flex;
  gap: 10px;
}

.cog-carousel-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #e6e8eb;
  background: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 22px;
  padding: 0;
}

.cog-featured-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.cog-featured-carousel::-webkit-scrollbar {
  height: 10px;
}
.cog-featured-carousel::-webkit-scrollbar-thumb {
  background: #e6e8eb;
  border-radius: 999px;
}

.cog-featured-tile {
  scroll-snap-align: start;
  border: 1px solid #e6e8eb;
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
}

.cog-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11, 90, 60, 0.1);
  color: #0b5a3c;
  font-weight: 800;
  font-size: 13px;
}

.cog-featured-title {
  font-size: 18px;
  font-weight: 800;
  color: #0b1220;
  line-height: 1.25;
}

.cog-featured-cta {
  margin-top: auto;
  font-weight: 800;
  color: #0b5a3c;
}

/* Topics list */
.cog-topics-card-head {
  margin-bottom: 8px;
}

.cog-topics-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
}

.cog-topic-item {
  border-top: 1px solid #eef0f3;
}

.cog-topic-item:first-child {
  border-top: none;
}

.cog-topic-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 4px;
  text-decoration: none;
  color: inherit;
}

.cog-topic-left {
  min-width: 0;
}

.cog-topic-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  color: #0b1220;
}

.cog-topic-desc {
  margin-top: 6px;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.4;
  max-width: 90ch;
}

.cog-topic-meta {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cog-meta-pill {
  display: inline-flex;
  border: 1px solid #e6e8eb;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: #111827;
  background: #fff;
}

.cog-chevron {
  color: #9ca3af;
  flex: 0 0 auto;
}

/* Empty state */
.cog-empty {
  padding: 16px 0 0;
  color: #6b7280;
}
/* =========================
   Community - All Posts Page
   ========================= */

.cog-community-posts {
  padding-top: 16px;
}

/* Card base (keep consistent) */
.cog-card {
  border: 1px solid #e6e8eb;
  border-radius: 24px;
  background: #fff;
  padding: 28px;
  margin: 18px 0;
}

/* Header */
.cog-community-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.cog-h1 {
  font-size: 48px;
  line-height: 1.05;
  margin: 0;
  color: #0b1220;
  font-weight: 800;
}

.cog-header-desc {
  margin-top: 10px;
  margin-bottom: 0;
  color: #6b7280;
  font-size: 18px;
  line-height: 1.45;
  max-width: 70ch;
}

.cog-community-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Featured carousel (same as topic page) */
.cog-featured {
  margin: 6px 0 18px;
}

.cog-featured-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 0 12px;
}

.cog-featured-title {
  font-size: 20px;
  margin: 0;
  font-weight: 800;
  color: #0b1220;
}

.cog-featured-controls {
  display: flex;
  gap: 10px;
}

.cog-featured-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #e6e8eb;
  background: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 22px;
  padding: 0;
}
.cog-featured-btn:hover {
  background: #f7f8fa;
}

.cog-featured-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.cog-featured-track::-webkit-scrollbar {
  height: 10px;
}
.cog-featured-track::-webkit-scrollbar-thumb {
  background: #e6e8eb;
  border-radius: 999px;
}

.cog-featured-card {
  scroll-snap-align: start;
  border: 1px solid #e6e8eb;
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
}

.cog-featured-card:hover {
  border-color: #cfd5dd;
  background: #fbfcfd;
}

.cog-featured-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11, 90, 60, 0.10);
  color: #0b5a3c;
  font-weight: 800;
  font-size: 13px;
}

.cog-featured-card-title {
  font-size: 18px;
  font-weight: 900;
  color: #0b1220;
  line-height: 1.25;
}

.cog-featured-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: #0b5a3c;
  font-weight: 700;
}

.cog-featured-sep {
  opacity: 0.6;
}

/* Featured stats */
.cog-featured-stats {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: auto;
  color: #0b5a3c;
}

.cog-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: inherit;
}

.cog-stat svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto;
}

/* Controls (tight, not a big section) */
.cog-topic-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 10px;
}

/* Make dropdown overlay properly */
.dropdown {
  position: relative;
}

.dropdown-toggle {
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 800;
  color: #0b1220;
  cursor: pointer;
}

.dropdown-toggle:hover {
  background: #f3f4f6;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 220px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid #e6e8eb;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
}

.dropdown-menu a {
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #0b1220;
  font-weight: 700;
}

.dropdown-menu a:hover {
  background: #f7f8fa;
}

/* Posts list (same row cards as topic page) */
.cog-posts-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cog-post-item {
  margin: 0 0 14px;
}

.cog-post-card {
  border: 1px solid #e6e8eb;
  border-radius: 18px;
  padding: 22px 24px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.cog-post-card:hover {
  background: #fbfcfd;
  border-color: #cfd5dd;
}

.cog-post-left {
  min-width: 0;
}

.cog-post-title {
  font-size: 22px;
  font-weight: 900;
  color: #0b1220;
  margin: 0;
  line-height: 1.2;
}

.cog-post-meta {
  margin-top: 10px;
  color: #6b7280;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 15px;
}

.cog-meta {
  color: #6b7280;
}

.cog-post-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #0b5a3c;
  flex: 0 0 auto;
}

/* Pills */
.cog-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid #e6e8eb;
  background: #fff;
  color: #111827;
  margin-left: 10px;
}

.cog-pill-pinned {
  background: #f3f4f6;
  border-color: #e6e8eb;
}

/* Responsive */
@media (max-width: 900px) {
  .cog-post-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .cog-post-stats {
    width: 100%;
    justify-content: flex-start;
  }
}
.cog-featured-meta {
  font-size: 14px;
  color: #0b5a3c;
  display: flex;
  gap: 6px;
  align-items: center;
}

.cog-featured-stats {
  margin-top: auto;
  display: flex;
  gap: 18px;
  align-items: center;
  color: #0b5a3c;
}

.cog-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}

.cog-stat svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto;
}
/* =========================
   Community Post Page (Post)
   ========================= */

.cog-community-post .cog-post-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap:18px;
  align-items:start;
}

@media (max-width: 1024px){
  .cog-community-post .cog-post-layout{
    grid-template-columns: 1fr;
  }
}

/* Card base (use same as other pages if already defined) */
.cog-card{
  border:1px solid #e6e8eb;
  border-radius:24px;
  background:#fff;
  padding:28px;
  margin:18px 0;
}

/* Header card */
.cog-post-header-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.cog-post-h1{
  font-size:34px;
  line-height:1.15;
  margin:0;
  font-weight:800;
  color:#0b1220;
}

.cog-post-title-wrap{
  min-width:0;
}

.cog-post-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.cog-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e6e8eb;
  background:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1;
}

.cog-pill-pinned{ background:#f3f4f6; }
.cog-pill-featured{ background:rgba(11,90,60,.10); color:#0b5a3c; border-color:rgba(11,90,60,.15); }

/* stats row */
.cog-post-stats-row{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  color:#0b5a3c;
}

.cog-stat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:14px;
  line-height:1;
}

.cog-stat svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.cog-post-meta-line{
  margin-left:auto;
  display:flex;
  gap:10px;
  color:#6b7280;
}

/* Post body card layout */
.cog-post-body-grid{
  display:grid;
  grid-template-columns: 220px minmax(0,1fr) 64px;
  gap:18px;
  align-items:start;
}

@media (max-width: 1024px){
  .cog-post-body-grid{
    grid-template-columns: 1fr;
  }
}

/* Author column */
.cog-post-author{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.cog-post-author-meta{
  min-width:0;
}

.cog-post-author-name{
  font-weight:800;
  color:#0b1220;
}

.cog-post-content .post-body{
  margin-top:0;
}

/* Actions column */
.cog-post-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

@media (max-width: 1024px){
  .cog-post-actions{
    align-items:flex-start;
    flex-direction:row;
  }
}

/* Comments head */
.cog-comments-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}

/* Sidebar */
.cog-post-sidebar-card .button{
  margin-top:10px;
  width:100%;
}


.header .dropdown-menu { z-index: 9999; }
.header .dropdown-toggle, 
.header .dropdown-toggle * { pointer-events: auto; }



/* =========================
   User Nav — breadcrumb style
   ========================= */

/* Match the sub-nav “calm row” feel */
.nav-wrapper-desktop .user-nav-list{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--cog-muted);
}

/* Items */
.nav-wrapper-desktop .user-nav-list li{
  display: inline-flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Links */
.nav-wrapper-desktop .user-nav-link{
  color: var(--cog-muted);
  text-decoration: none !important;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}

/* Hover (same as breadcrumbs) */
.nav-wrapper-desktop .user-nav-link:hover{
  background: rgba(120,191,82,0.10);
  color: var(--cog-text);
}

/* Sign-in button should still feel like a breadcrumb “chip” */
.nav-wrapper-desktop .sign-in.user-nav-link{
  color: var(--cog-muted);
}

/* Optional separator like breadcrumbs (only if you want it)
   Add class="nav-sep" to <li> items you want to behave as separators. */
/*
.nav-wrapper-desktop .user-nav-list li.nav-sep::after{
  content: "›";
  margin: 0 0.25rem;
  color: rgba(0,0,0,0.28);
}
*/

/* =========================
   Mobile menu — same vibe
   ========================= */

.menu-list-mobile-items{
  margin: 0;
  padding: 0;
}

.menu-list-mobile-items .item{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Links inside mobile list */
.menu-list-mobile-items .item a,
.menu-list-mobile-items .item .my-profile{
  color: var(--cog-muted);
  text-decoration: none !important;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-list-mobile-items .item a:hover,
.menu-list-mobile-items .item .my-profile:hover{
  background: rgba(120,191,82,0.10);
  color: var(--cog-text);
}

/* Keep existing divider but align to breadcrumb calmness */
.menu-list-mobile-items .nav-divider{
  margin: 10px 0;
  height: 1px;
  background: rgba(0,0,0,0.10);
}

/* ------------------------------
   Sign In Button Styling
   ------------------------------ */

.sign-in.user-nav-link {
  padding: 8px 14px;
  border-radius: 999px; /* pill shape */
  font-weight: 600;
  background: rgba(0, 0, 0, 0.08);
  transition: background-color 150ms ease, transform 150ms ease;
}

/* Hover */
.sign-in.user-nav-link:hover {
  background: rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

/* Active click */
.sign-in.user-nav-link:active {
  transform: translateY(1px);
}

/* Focus accessibility */
.sign-in.user-nav-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* =========================
   Footer Styling
   ========================= */

.footer {
  margin-top: 60px;
  padding: 40px 0 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: #fafafa;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-column {
  flex: 1 1 200px;
}

.footer-title {
  font-size: 0.9rem;
  font-weight: 650;
  margin-bottom: 12px;
  color: var(--cog-text);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  text-decoration: none;
  color: var(--cog-muted);
  transition: color .15s ease;
}

.footer-links a:hover {
  color: var(--cog-text);
}

.footer-bottom {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: center;
  font-size: 0.85rem;
  color: var(--cog-muted);
}


/* =========================================================
   Community Post Page – “clean + modern” pass
   Drop into theme CSS (after default styles)
   ========================================================= */

.cog-community-post { padding-bottom: 28px; }

/* Subnav tightening */
.cog-subnav{
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cog-search{
  max-width: 420px;
}

/* Layout: real two-column, less dead space */
.cog-post-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .cog-post-layout{ grid-template-columns: 1fr; }
  .cog-post-sidebar{ order: 2; }
}

/* Card baseline */
.cog-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.cog-post-card,
.cog-comments-card,
.cog-reply-card,
.cog-sidebar-card{
  padding: 18px;
}

/* Post header */
.cog-post-header{ padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,.06); margin-bottom: 14px; }
.cog-post-title{ margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.cog-post-title-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
@media (max-width: 560px){
  .cog-post-title-row{ flex-direction: column; align-items: flex-start; }
}

/* Meta row */
.cog-post-meta{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cog-post-author{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
}
.cog-author-meta{ display: flex; flex-direction: column; gap: 2px; }
.cog-author-name a{ font-weight: 650; text-decoration: none; }
.cog-meta-date{ font-size: 13px; opacity: .75; }

/* Avatars */
.cog-avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}
.cog-avatar--fallback{
  display: inline-block;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,0,0,.10), rgba(0,0,0,.03)),
    rgba(0,0,0,.04);
}

/* Post body: stop it looking like a huge empty slab */
.cog-post-body{
  padding-top: 6px;
}
.post-body p{ line-height: 1.65; }
.post-body img{ max-width: 100%; border-radius: 12px; }

/* Votes: compact pill */
.cog-vote-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
.cog-vote-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  text-decoration: none;
}
.cog-vote-btn:hover{ transform: translateY(-1px); }
.cog-vote-count{ font-weight: 750; min-width: 18px; text-align: center; }
.cog-voted{ outline: 2px solid rgba(0,0,0,.18); }

/* Section headings */
.cog-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cog-comments-heading{ margin: 0; font-size: 16px; }
.cog-count-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.08);
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
}

/* Comments list */
.cog-comment-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cog-comment-item{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.75);
}
.cog-comment-item--official{
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.02);
}
.cog-comment-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cog-comment-body{ line-height: 1.6; }
.cog-official-badge{
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  opacity: .9;
}

/* Comment votes: smaller */
.cog-comment-vote{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}

/* Empty state */
.cog-empty-state{
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  opacity: .85;
}

/* Reply form */
.cog-reply-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.cog-checkbox{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  opacity: .85;
}
.cog-post-btn{
  border-radius: 999px;
  padding-left: 18px;
  padding-right: 18px;
}

/* Sidebar: “card like the screenshot”, but polished + sticky */
.cog-post-sidebar{ position: sticky; top: 18px; }
@media (max-width: 980px){
  .cog-post-sidebar{ position: static; }
}
.cog-sidebar-title{ margin: 0 0 6px; font-size: 16px; }
.cog-sidebar-subtitle{ margin: 0 0 12px; opacity: .8; }
.cog-sidebar-cta{ width: 100%; border-radius: 999px; }

/* Accessibility helper (if not already in theme) */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   Copenhagen Community Post – clean UI pass (no functionality loss)
   ========================================================= */

/* Better 2-col layout + reduce emptiness */
.cog-post-container .post-container{
  display: block; /* keep safe */
}

.cog-post-container{
  gap: 18px;
}

.post-container.cog-post-container{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .post-container.cog-post-container{
    grid-template-columns: 1fr;
  }
}

/* Reusable card look (without changing DOM) */
.cog-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* Thread card spacing */
.cog-thread-card{
  padding: 18px;
}
.cog-post-header{
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cog-h1{
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Status labels grouped neatly */
.cog-post-status-row{
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Author row tidy */
.cog-post-info-container{
  position: relative;
}
.cog-post-author{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.cog-post-meta .meta-group{
  margin-top: 4px;
}
.post-avatar .user-avatar,
.comment-avatar .user-avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}

/* Post body feels less “raw” */
.cog-post-body{ line-height: 1.65; }
.cog-post-body img{ max-width: 100%; border-radius: 12px; }

/* Content tags look like chips */
.cog-content-tags{
  margin-top: 14px;
  padding-top: 12px;
}
.content-tag-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}
.content-tag-item a{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  text-decoration: none;
  font-size: 13px;
}

/* Actions/vote wrapper: make it a clean pill and stop floating awkwardly */
.cog-actions-wrapper{
  position: sticky;
  top: 18px;
  align-self: start;
}
.post-actions-wrapper.cog-actions-wrapper{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.90);
}

/* Vote buttons: same classes, nicer look */
.vote{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  padding: 6px;
}
.vote a{
  border-radius: 12px;
}

/* Post footer: align share + comment count */
.cog-post-footer{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Comments overview becomes a card */
.cog-comments-overview{
  margin-top: 14px;
  padding: 16px 18px;
}

/* Comments: make each comment a card */
.cog-comment-list{
  margin-top: 14px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cog-comment-wrapper{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.82);
  padding: 14px;
}
.comment-official.cog-comment-wrapper{
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.02);
}

/* Comment actions container: tidy */
.cog-comment-actions{
  margin-left: 10px;
}

/* Reply form becomes a card (but keeps built-in form + avatar) */
.cog-reply-card{
  margin-top: 14px;
  padding: 16px 18px;
}
.cog-form-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Sidebar card + sticky */
.cog-post-sidebar{
  position: sticky;
  top: 18px;
  align-self: start;
}
.cog-sidebar-card{
  padding: 18px;
}
.cog-sidebar-card .button{
  width: 100%;
  border-radius: 999px;
}

/* Subnav */
.cog-subnav{
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cog-search{ max-width: 420px; }

/* =========================================================
   FIX: Copenhagen post vote/actions column looks huge + rough
   Paste AFTER all other CSS
   ========================================================= */

/* Ensure the two-column layout actually applies */
.post-container.cog-post-container{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 18px !important;
  align-items: start !important;
}
@media (max-width: 980px){
  .post-container.cog-post-container{
    grid-template-columns: 1fr !important;
  }
}

/* Make the right rail (vote + actions) a neat floating card */
.post-actions-wrapper.cog-actions-wrapper{
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;

  display: flex !important;
  flex-direction: row !important;     /* horizontal */
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  padding: 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.92) !important;
}

/* If sticky causes weirdness anywhere, uncomment this:
.post-actions-wrapper.cog-actions-wrapper{ position: static !important; }
*/

/* --- VOTE: force compact horizontal pill --- */
.post-actions-wrapper .post-vote.vote{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 6px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.03) !important;

  /* critical: stop the tall vertical widget */
  min-height: 0 !important;
  height: auto !important;
}

/* Vote buttons (up/down) become small icon buttons */
.post-actions-wrapper .vote a.vote-up,
.post-actions-wrapper .vote a.vote-down{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;

  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.9) !important;

  /* prevent default theme spacing making it huge */
  margin: 0 !important;
}

/* Rotate the down arrow so it points down (Copenhagen uses same chevron) */
.post-actions-wrapper .vote a.vote-down svg{
  transform: rotate(180deg) !important;
}

/* Vote sum is the number in the middle — make it compact */
.post-actions-wrapper .vote .vote-sum{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 26px !important;
  height: 34px !important;
  padding: 0 8px !important;

  border-radius: 12px !important;
  font-weight: 750 !important;

  margin: 0 !important;
}

/* Kill any default vertical stacking */
.post-actions-wrapper .vote > *{
  float: none !important;
}

/* --- ACTIONS (gear/cog menu) tidy --- */
.post-actions-wrapper .post-actions.actions{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
}
.post-actions-wrapper .post-actions.actions a,
.post-actions-wrapper .post-actions.actions button{
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.9) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   Optional polish to match your screenshot spacing
   ========================================================= */

/* Make the main post card feel tighter */
.cog-thread-card{
  padding: 18px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.9) !important;
}

/* Title spacing */
.cog-post-title .cog-h1{
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* Featured/Pinned badges sit nicely below title */
.cog-post-status-row{
  margin-top: 10px !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}










































   Clean author/meta/vote layout (Copenhagen-safe)
   ========================================================= */

/* Make the whole post info container a 2-col grid:
   Left = content, Right = vote/actions */
.post-info-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: start !important;
}

/* Keep the actual content stack normal */
.post-info {
  min-width: 0 !important;
}

/* Put vote/actions in the right column, no overlap */
.post-actions-wrapper {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
}

/* Make the author row a clean flex row */
.post-author {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

/* Ensure meta block stays left aligned (fix the centering you’re seeing) */
.post-meta {
  text-align: left !important;
  display: block !important;
  min-width: 0 !important;
}

/* Username: less “linky” */
.post-meta > span a {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 650 !important;
}
.post-meta > span a:hover {
  text-decoration: underline !important;
  opacity: .85;
}

/* Badges: wrap nicely within the left column */
.community-badge-titles {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
}

/* Keep achievement icons from pushing layout weirdly */
.community-badge-achievements {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

/* Prevent anything from spilling under the vote column */
.post-info,
.post-meta,
.community-badge-titles,
.community-badge-achievements {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Mobile: stack vote/actions under the author block */
@media (max-width: 700px) {
  .post-info-container {
    grid-template-columns: 1fr !important;
  }
  .post-actions-wrapper {
    grid-column: 1 !important;
    margin-top: 10px !important;
  }
}

/* =========================================================
   Fix timestamp placement in post header (Copenhagen)
   ========================================================= */

/* Make the author strip behave like a row with a right-aligned meta group */
.post-author {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important; /* avatar | meta | timestamp */
  column-gap: 12px !important;
  align-items: center !important;
}

/* Avatar sits in col 1 */
.post-author .post-avatar { grid-column: 1 !important; }

/* Meta block (name + badges) sits in col 2 */
.post-author .post-meta { 
  grid-column: 2 !important;
  text-align: left !important;
}

/* Timestamp block sits in col 3 and aligns right */
.post-author .meta-group.meta-group-opposite {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
  opacity: .8;
}

/* Keep badges from pushing timestamp down */
.post-author .community-badge-titles,
.post-author .community-badge-achievements {
  max-width: 100% !important;
}

/* On small screens, stack timestamp under name */
@media (max-width: 700px) {
  .post-author {
    grid-template-columns: auto minmax(0, 1fr) !important;
    row-gap: 6px !important;
  }
  .post-author .meta-group.meta-group-opposite {
    grid-column: 2 !important;
    justify-self: start !important;
    opacity: .75;
  }
}

/* =========================================================
   Move post comment counter next to timestamp
   ========================================================= */

/* Keep share icons, but hide the existing counter display */
.post-footer .post-comment-count{
  display: none !important;
}

/* Add a “comment count” pill near the timestamp using the existing markup
   We place it in the meta group row by styling the footer count as a badge
   NOTE: We’ll render it via CSS ::after on the meta-group using data from DOM is not possible.
   So we *don’t* fake the number; we simply move the real element with CSS positioning.
*/

/* Make the post author area a positioning context */
.post-header,
.post-author {
  position: relative !important;
}



  padding: 6px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.03) !important;

  text-decoration: none !important;
  font-size: 13px !important;
  opacity: .9 !important;
}

/* Make sure it stays inside the post card */
#main-content.cog-thread-card{
  overflow: visible !important;
}

/* On small screens, drop it under the title */
@media (max-width: 700px){
  .post-footer .post-comment-count{
    position: static !important;
    margin-left: 0 !important;
  }
}
/* =========================================================
   Bottom half cohesion: comments header + thread + reply
   ========================================================= */

/* Comments header: remove boxy card look */
.comment-overview.cog-comments-overview{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 20px 0 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Make “Comments” title + count sit nicely */
.comment-overview .comment-heading{
  margin: 0 !important;
  font-size: 18px !important;
}
.comment-overview .comment-callout{
  margin: 0 !important;
  opacity: .7 !important;
}

/* Make the sorter look like part of the header */
.comment-overview .comment-sorter{
  margin: 0 !important;
}

/* Comment list tighter and more thread-like */
.cog-comment-list{
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Comment cards: consistent, softer */
.cog-comment-wrapper{
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: rgba(255,255,255,.9) !important;
}

/* Remove that big divider line above reply if present */
.post-comments{
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 12px !important;
}

/* Reply form: same styling as comment cards (so it feels in-thread) */
.post-comments.cog-reply-card{
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: rgba(255,255,255,.9) !important;
}

/* Make textarea feel modern */
.post-comments textarea,
.post-comments .wysiwyg,
.post-comments .zendesk-editor{
  border-radius: 12px !important;
}

/* =========================================================
   Remove extra separator lines in comment area
   ========================================================= */

/* Remove line above reply form */
.post-comments {
  border-top: none !important;
}

/* Remove line above the comment editor */
.comment-form {
  border-top: none !important;
}

/* Remove divider inside the editor */
.comment-container hr,
.zendesk-editor hr,
.wysiwyg hr {
  display: none !important;
}

/* Remove the comment overview divider */
.comment-overview {
  border-bottom: none !important;
}

/* Remove any stray HR elements in comment section */
.post-comments hr {
  display: none !important;
}

/* Remove top-right comments bubble in header */
.header .notification-icon,
.header .comment-icon,
.header [aria-label*="comment"],
.header [aria-label*="Comments"] {
  display: none !important;
}

/* Hard remove comment counter bubble */
header .notification-badge,
header .comment-count,
header .post-comment-count {
  display: none !important;
}

/* =========================================================
   FIX: Dropdown menus (Sort by) not opening / clipped
   ========================================================= */

/* Ensure dropdown container can show children */
.dropdown,
.comment-overview,
.cog-comments-overview,
.comment-sorter {
  overflow: visible !important;
}

/* Make the menu render above cards/vote widgets */
.dropdown-menu {
  z-index: 9999 !important;
}

/* Ensure the menu is actually positioned correctly */
.dropdown {
  position: relative !important;
}

/* If any parent card is clipping, neutralise it */
.cog-card,
.cog-thread-card,
.cog-comments-overview,
.comment-overview,
.post-container,
.post,
.post-info-container {
  overflow: visible !important;
}

/* Make sure nothing is blocking clicks on the sorter */
.comment-sorter,
.comment-sorter * {
  pointer-events: auto !important;
}

/* If your vote/actions wrapper overlaps, keep it contained */
.post-actions-wrapper {
  z-index: 2 !important;
}
.comment-overview,
.cog-comments-overview {
  z-index: 3 !important;
  position: relative !important;
}

/* =========================
   FIX: "Sort by" dropdown (comments) not opening
   ========================= */

/* default hidden (Zendesk expects this) */
.comment-overview .dropdown-menu,
.cog-comments-overview .dropdown-menu{
  display: none;
}

/* show when Zendesk toggles open */
.comment-overview .dropdown.is-open .dropdown-menu,
.cog-comments-overview .dropdown.is-open .dropdown-menu,
.comment-overview .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
.cog-comments-overview .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
.comment-overview .dropdown:focus-within .dropdown-menu,
.cog-comments-overview .dropdown:focus-within .dropdown-menu{
  display: block;
}

/* keep it above the vote widget */
.comment-overview .dropdown,
.cog-comments-overview .dropdown{
  position: relative;
}
.comment-overview .dropdown-menu,
.cog-comments-overview .dropdown-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;     /* optional: aligns menu to the right of "Sort by" */
  left: auto;
  z-index: 9999;
}

/* Community sub-nav row: breadcrumbs left, controls right */
.cog-subnav--community{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px !important;
}

/* Tighten top padding below hero */
.cog-community-topics{
  padding-top: 10px !important;
}

/* Right side toolbar */
.cog-community-toolbar{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex: 0 0 auto;
}

/* Toggle */
.cog-view-toggle{
  display:inline-flex;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
}

.cog-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none !important;
  font-weight:800;
  line-height:1;
  color:#0b1220;
}

.cog-toggle:hover{ background:rgba(0,0,0,.04); }

.cog-toggle.is-active{
  background:#0b5a3c;
  color:#fff !important;
}

/* Smaller New post */
.button.cog-btn-small{
  padding:10px 14px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  font-size:14px !important;
  line-height:1 !important;
  min-height:0 !important;
}


/* =========================================================
   Community Toggle (Topics / Posts) — restore segmented pill
   Paste at END of theme CSS
   ========================================================= */

.cog-community-topbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin: 12px 0 18px; /* tighten breadcrumb → content gap */
}

/* Segmented container */
.cog-community-topbar .cog-toggle{
  display:inline-flex;
  align-items:center;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Buttons inside */
.cog-community-topbar .cog-toggle .cog-toggle-btn{
  appearance:none;
  border: 0 !important;
  background: transparent !important;
  color: var(--cog-green, #0b5a3c) !important;
  text-decoration: none !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 44px;
  padding: 0 18px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 18px;
  line-height: 1;

  transition: background-color .15s ease, color .15s ease;
  transform: none !important;
  box-shadow: none !important;
  white-space: nowrap;
}

/* Hover (inactive only) */
.cog-community-topbar .cog-toggle .cog-toggle-btn:not(.is-active):hover{
  background: rgba(11,90,60,0.08) !important;
}

/* Active tab */
.cog-community-topbar .cog-toggle .cog-toggle-btn.is-active{
  background: var(--cog-green, #0b5a3c) !important;
  color: #fff !important;
}

/* Make sure Zendesk “button” styles don’t override the toggle */
.cog-community-topbar .cog-toggle .cog-toggle-btn.button,
.cog-community-topbar .cog-toggle .cog-toggle-btn.button-large,
.cog-community-topbar .cog-toggle .cog-toggle-btn.button-large-outline{
  padding: 0 18px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
}

/* Smaller New post button (matches toggle height) */
.cog-community-topbar .cog-btn-small{
  height: 44px;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
  transform:none !important;
}

/* Mobile: keep it tidy */
@media (max-width: 700px){
  .cog-community-topbar{
    justify-content: space-between;
  }
  .cog-community-topbar .cog-toggle .cog-toggle-btn{
    height: 40px;
    padding: 0 14px;
    font-size: 16px;
  }
  .cog-community-topbar .cog-btn-small{
    height: 40px;
    padding: 0 14px !important;
    font-size: 16px;
  }
}
/* =========================================================
   Breadcrumb row: left breadcrumbs, right toggle/actions
   ========================================================= */
.cog-subnav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin: 10px 0 14px; /* reduces the big whitespace */
}

.cog-subnav-left{ flex: 1 1 auto; min-width: 0; }
.cog-subnav-right{ flex: 0 0 auto; display:flex; align-items:center; gap:10px; }

/* Prevent breadcrumbs from forcing wrap weirdness */
.cog-subnav-row .breadcrumbs,
.cog-subnav-row .sub-nav{
  margin: 0 !important;
}

/* =========================================================
   Toggle: smaller, tighter, less “floaty”
   ========================================================= */
.cog-community-topbar{ margin: 0 !important; } /* kill extra spacing */

.cog-community-topbar .cog-toggle{
  display:inline-flex;
  align-items:center;
  padding: 4px;                 /* smaller */
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;             /* flatter like before */
  box-shadow: none;             /* removes the “new” look */
}

.cog-community-topbar .cog-toggle .cog-toggle-btn{
  appearance:none;
  border: 0 !important;
  background: transparent !important;
  color: var(--cog-green, #0b5a3c) !important;
  text-decoration: none !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 36px;                 /* smaller than before */
  padding: 0 14px;              /* smaller than before */
  border-radius: 999px;

  font-weight: 800;
  font-size: 16px;              /* smaller than before */
  line-height: 1;

  transform: none !important;
  box-shadow: none !important;
}

.cog-community-topbar .cog-toggle .cog-toggle-btn.is-active{
  background: var(--cog-green, #0b5a3c) !important;
  color: #fff !important;
}

/* New post button: same height as toggle */
.cog-community-topbar .cog-btn-small{
  height: 36px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
  transform:none !important;
}

/* Mobile: stack neatly */
@media (max-width: 700px){
  .cog-subnav-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cog-subnav-right{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Keep breadcrumbs + toggle on one row */
.cog-subnav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin: 14px 0 18px;  /* SAME on topics + posts */
}

.cog-subnav-left{ min-width:0; }
.cog-subnav-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

/* Toggle: consistent sizing (prevents “looks bigger” + row jump) */
.cog-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
}

.cog-toggle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 22px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none !important;
  color:#0b5a3c;
  background:transparent;
  line-height:1;
  white-space:nowrap;
}

.cog-toggle-btn.is-active{
  background:#0b5a3c;
  color:#fff;
}

/* Small “New post” button */
.button.cog-btn-small{
  border-radius:999px;
  padding: 12px 18px;
  font-weight:800;
  line-height:1;
}

/* Prevent tiny layout shifts between pages */
.cog-community-topics .cog-subnav-row,
.cog-community-posts .cog-subnav-row{
  margin-top: 14px;
}

/* If your theme adds a divider on one page, kill it to keep spacing identical */
.cog-community-posts .container-divider{ display:none !important; }

/* =========================================
   Community: shared topbar + toggle + parity
   ========================================= */

/* Make hero->content spacing consistent across topics/posts */
.container.cog-community-topics,
.container.cog-community-posts{
  padding-top: 16px;
}

/* One row: breadcrumbs left, toggle+button right */
.cog-subnav-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 18px;
}

.cog-subnav-left{
  min-width: 0;
}

.cog-subnav-right{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* Breadcrumbs: stop extra margins */
.sub-nav{
  margin: 0 !important;
  padding: 0 !important;
}

/* Toggle pill */
.cog-toggle{
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--cog-border, rgba(0,0,0,0.12));
  background: #fff;
}

.cog-toggle-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none !important;
  color: var(--cog-green, #0b5a3c);
  line-height: 1;
  white-space: nowrap;
}

.cog-toggle-btn.is-active{
  background: var(--cog-green, #0b5a3c);
  color: #fff !important;
}

/* Small New Post button */
.cog-btn-small{
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Make the list cards match between pages */
.cog-list-card{
  border: 1px solid #e6e8eb;
  border-radius: 24px;
  background: #fff;
  padding: 24px;
  margin: 0 0 18px;
}

.cog-list-title{
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 14px;
  color: #0b1220;
}

/* Unified row style (used by BOTH topics + posts) */
.cog-rows{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cog-row{
  border-top: 1px solid #eef0f3;
}
.cog-row:first-child{
  border-top: none;
}

.cog-row-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 4px;
  text-decoration: none !important;
  color: inherit;
}

.cog-row-left{
  min-width: 0;
}

.cog-row-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.25;
  color: #0b1220;
}

.cog-row-desc{
  margin-top: 6px;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.4;
  max-width: 90ch;
}

.cog-row-meta{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cog-meta-pill{
  display: inline-flex;
  border: 1px solid #e6e8eb;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  background: #fff;
}

.cog-chevron{
  color: #9ca3af;
  flex: 0 0 auto;
}

/* Posts controls row: keep it visually light */
.cog-post-controls{
  margin: 0 0 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Dropdown safety (click + clipping) */
.cog-post-controls .dropdown{ position: relative; }
.cog-post-controls .dropdown-menu{ z-index: 9999; }
.cog-list-card,
.container,
.post-container,
.cog-community-posts,
.cog-community-topics{
  overflow: visible !important;
}

/* Responsive: stack right side under breadcrumbs cleanly */
@media (max-width: 820px){
  .cog-subnav-row{
    align-items: flex-start;
    flex-direction: column;
  }
  .cog-subnav-right{
    width: 100%;
    justify-content: flex-start;
  }
}

/* Posts list card header: title + controls inline */
.cog-list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
}

.cog-list-card-header .cog-list-title {
  margin: 0;
}

/* Stat pills: SVG + number inline */
.cog-meta-pill--stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cog-meta-pill--stat svg {
  flex-shrink: 0;
  color: #6b7280;
}

/* ===== Post controls: scoped dropdown fix (mirrors cog-topic-controls) ===== */

.cog-post-controls {
  display: inline-flex;
  gap: 1.5rem;
  align-items: center;
}

.cog-post-controls .dropdown {
  position: relative;
  display: inline-flex;
}

.cog-post-controls .dropdown-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--cog-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.2;
  transform: none !important;
  box-shadow: none !important;
}

.cog-post-controls .dropdown-toggle:hover {
  color: var(--cog-green);
}

.cog-post-controls .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  padding: 0.4rem;
  border-radius: 12px;
  border: 1px solid var(--cog-border);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  z-index: 9999;
}

/* Show on: JS .is-open class, aria-expanded, or keyboard focus-within */
.cog-post-controls .dropdown.is-open .dropdown-menu,
.cog-post-controls .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
.cog-post-controls .dropdown:focus-within .dropdown-menu {
  display: block;
}

/* ===== List card header: title + controls side by side ===== */

.cog-list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
}

.cog-list-card-header .cog-list-title {
  margin: 0;
}

/* ===== Stat pills with SVG icons ===== */

.cog-meta-pill--stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cog-meta-pill--stat svg {
  flex-shrink: 0;
  color: #6b7280;
}

/* ===== Tidied post meta row ===== */

/* Reset the row spacing slightly tighter */
.cog-row-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

/* All pills: strip borders by default — plain inline text */
.cog-row-meta .cog-meta-pill {
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

/* Dot separator between plain-text items using pseudo-element */
.cog-row-meta .cog-meta-pill + .cog-meta-pill::before {
  content: "·";
  margin: 0 6px;
  color: #d1d5db;
  font-weight: 400;
}

/* Stat pills (vote + comment): restore the bordered pill look */
.cog-row-meta .cog-meta-pill--stat {
  border: 1px solid #e6e8eb;
  border-radius: 999px;
  background: #fff;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

/* Remove the dot separator before stat pills */
.cog-row-meta .cog-meta-pill--stat::before {
  display: none;
}

/* First stat pill: add a small left margin gap from the text items */
.cog-row-meta .cog-meta-pill--stat:first-of-type {
  margin-left: 10px;
}

.cog-meta-pill--stat svg {
  flex-shrink: 0;
  color: #9ca3af;
}

/* ===== Row hover — matches featured card hover ===== */

.cog-row {
  transition: background 0.15s ease, border-color 0.15s ease;
  border-radius: 8px;
}

.cog-row:hover {
  background: #fbfcfd;
}

.cog-row:hover .cog-row-link {
  text-decoration: none;
}

/* Shift the chevron slightly on hover for a subtle nudge effect */
.cog-row:hover .cog-chevron {
  color: #6b7280;
  transform: translateX(3px);
  transition: transform 0.15s ease, color 0.15s ease;
}

.cog-chevron {
  transition: transform 0.15s ease, color 0.15s ease;
}

/* ===== Featured card: excerpt + pinned footer ===== */

/* Excerpt sits between title and footer, flex-grows to push footer down */
.cog-featured-card-excerpt {
  flex: 1;
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer wrapper: meta + stats always pinned to bottom */
.cog-featured-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Meta row: author · date — matches post row style */
.cog-featured-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.cog-featured-sep {
  color: #d1d5db;
}

/* Stats row */
.cog-featured-stats {
  display: flex;
  gap: 12px;
}

.cog-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

.cog-stat svg {
  width: 14px;
  height: 14px;
  color: #9ca3af;
}

/* ===== Community hero: compact search strip ===== */

.community-hero.section.hero {
  padding: 1.25rem 0;
  background-image: none;
  background-color: transparent;
  border-bottom: 1px solid #f0f2f4;
  margin-bottom: 0;
}

.community-hero .hero-inner {
  max-width: 760px;
}

/* ===== Community hero: compact search strip ===== */

section.section.community-hero {
  padding: 1rem 0 !important;
  background-image: none !important;
  background-color: transparent;
  border-bottom: 1px solid #f0f2f4;
  margin-bottom: 0;
  min-height: 0;
}

section.section.community-hero .hero-inner {
  max-width: 760px;
  padding: 0 1rem;
}

/* ===== Community hero: compact search strip ===== */

section.section.community-hero {
  height: auto !important;
  min-height: 0 !important;
  padding: 1.25rem 0 !important;
  background-image: none !important;
  background-color: transparent;
  border-bottom: 1px solid #f0f2f4;
  margin-bottom: 0;
}

section.section.community-hero .hero-inner {
  position: static !important;
  top: auto !important;
  transform: none !important;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ===== Subnav inline search ===== */

/* Make the subnav row three-column: breadcrumbs | search | actions */
.cog-community-posts .cog-subnav-row {
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f2f4;
  margin-bottom: 20px;
}

.cog-subnav-search {
  flex: 1 1 auto;
  position: relative;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 36px;
  background: #f9fafb;
  border: 1px solid #e6e8eb;
  border-radius: 999px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cog-subnav-search:focus-within {
  border-color: var(--cog-green-2, #78bf52);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(120, 191, 82, 0.15);
}

.cog-subnav-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  z-index: 1;
}

/* Scope tightly to avoid affecting other search inputs */
.cog-subnav-search .search {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

.cog-subnav-search .search input[type="search"],
.cog-subnav-search .search input[type="text"] {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  padding: 0 14px 0 32px;
  font-size: 13px;
  background: transparent;
  color: #111827;
  outline: none;
  box-shadow: none;
}

.cog-subnav-search .search input[type="search"]:focus,
.cog-subnav-search .search input[type="text"]:focus {
  outline: none;
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Hide the submit button Zendesk renders inside .search */
.cog-subnav-search .search [type="submit"] {
  display: none;
}

/* Hide the native browser clear (×) button on search inputs */
.cog-subnav-search .search input[type="search"]::-webkit-search-cancel-button,
.cog-subnav-search .search input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* ===== Subnav: match toggle height to search bar ===== */

.cog-community-posts .cog-toggle {
  padding: 3px;
}

.cog-community-posts .cog-toggle-btn {
  height: 30px;
  padding: 0 14px;
  font-size: 13px;
}

.cog-community-posts .button.cog-btn-small {
  padding: 7px 14px;
  font-size: 13px;
}

/* ===== Topics page: mirror posts page subnav sizing ===== */

.cog-community-topics .cog-subnav-row {
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f2f4;
  margin-bottom: 20px;
}

.cog-community-topics .cog-toggle {
  padding: 3px;
}

.cog-community-topics .cog-toggle-btn {
  height: 30px;
  padding: 0 14px;
  font-size: 13px;
}

.cog-community-topics .button.cog-btn-small {
  padding: 7px 14px;
  font-size: 13px;
}

/* Topic row meta: plain text style matching posts page */
.cog-community-topics .cog-row-meta .cog-meta-pill {
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.cog-community-topics .cog-row-meta .cog-meta-pill + .cog-meta-pill::before {
  content: "·";
  margin: 0 6px;
  color: #d1d5db;
  font-weight: 400;
}



/* =========================================================
   HOME PAGE — unified tile system
   Replaces: persona-hub, persona-grid, persona-card,
             cog-ways, cog-ways-inner, cog-ways-grid, cog-way
   ========================================================= */

/* Section wrapper: consistent vertical rhythm */
.cog-home-section {
  padding: 2.5rem 0;
}

/* Tinted band (Explore section) */
.cog-home-section--tinted {
  background: var(--cog-soft);
  border-top: 1px solid var(--cog-border);
  border-bottom: 1px solid var(--cog-border);
  padding: 2.5rem 1rem;
}

/* Section headings */
.cog-home-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cog-text);
  margin: 0 0 0.35rem;
}

.cog-home-subtitle {
  font-size: 0.95rem;
  color: var(--cog-muted);
  margin: 0 0 1.75rem;
}

/* Uniform card grid */
.cog-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* Card: matches featured card border/radius language */
.cog-card {
  display: flex;
  flex-direction: column;
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  padding: 1.5rem;
  text-decoration: none !important;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Hover: flat tint — same as community rows and featured cards */
.cog-card:hover {
  background: #fbfcfd;
  border-color: #cfd5dd;
}

.cog-card-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.cog-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--cog-text);
}

.cog-card p {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--cog-muted);
  line-height: 1.45;
  flex: 1;
}

.cog-card-cta {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cog-green);
  margin-top: auto;
}

/* Community panel */
.cog-community-panel {
  background: var(--cog-soft);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  padding: 2rem;
  text-align: center;
}

.cog-community-panel .cog-home-title,
.cog-community-panel .cog-home-subtitle {
  text-align: center;
}

.cog-community-panel .cog-home-subtitle {
  margin-bottom: 1.25rem;
}

.cog-community-panel-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Home hero: fix fixed height + reduce dead space ===== */

section.section.hero:not(.community-hero) {
  height: auto !important;
  min-height: 0 !important;
  padding: 2.5rem 0 !important;
  background-position: center;
  background-size: cover;
}

section.section.hero:not(.community-hero) .hero-inner {
  position: static !important;
  top: auto !important;
  transform: none !important;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Tighten gap between hero and first section */
.cog-home-section:first-of-type {
  padding-top: 1.75rem;
}

/* Reduce the large margin-top that stacks on top of the section padding */
.container .section.knowledge-base,
.section.home-section,
.persona-hub,
.cog-ways {
  margin-top: 0 !important;
}

/* =========================================================
   HOME PAGE — tightened spacing
   ========================================================= */

/* Hero: collapse fixed height, reduce padding */
section.section.hero:not(.community-hero) {
  height: auto !important;
  min-height: 0 !important;
  padding: 1.5rem 0 2rem !important;
}

section.section.hero:not(.community-hero) .hero-inner {
  position: static !important;
  top: auto !important;
  transform: none !important;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Kill all the stacked margin-top on home sections */
.container .section.knowledge-base,
.section.home-section,
.persona-hub,
.cog-ways,
.cog-home-section {
  margin-top: 0 !important;
}

/* Unified section padding — tighter */
.cog-home-section {
  padding: 1.75rem 0;
}

.cog-home-section--tinted {
  background: var(--cog-soft);
  border-top: 1px solid var(--cog-border);
  border-bottom: 1px solid var(--cog-border);
  padding: 1.75rem 1rem;
}

/* Section headings */
.cog-home-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cog-text);
  margin: 0 0 0.25rem;
}

.cog-home-subtitle {
  font-size: 0.9rem;
  color: var(--cog-muted);
  margin: 0 0 1.25rem;
}

/* Card grid */
.cog-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Cards — tighter padding, flat hover matching community rows */
.cog-card {
  display: flex;
  flex-direction: column;
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  padding: 1.1rem 1.25rem;
  text-decoration: none !important;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cog-card:hover {
  background: #fbfcfd;
  border-color: #cfd5dd;
}

.cog-card-icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.cog-card h3 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--cog-text);
}

.cog-card p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--cog-muted);
  line-height: 1.4;
  flex: 1;
}

.cog-card-cta {
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--cog-green);
  margin-top: auto;
}

/* Community panel */
.cog-community-panel {
  background: var(--cog-soft);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  padding: 1.75rem;
  text-align: center;
}

.cog-community-panel .cog-home-subtitle {
  margin-bottom: 1rem;
}

.cog-community-panel-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Also kill persona-hub padding which may still apply */
.persona-hub {
  padding: 0 !important;
}


/* ===== New community post: mirrors new request page ===== */

.cog-new-post {
  max-width: 800px;
}

.cog-new-post-header {
  margin-top: 1.5rem;
}

.cog-new-post-form {
  margin-top: 0;
}

/* Scoped form field styles to match request form feel */
.cog-new-post-form .form-field {
  margin-bottom: 1.25rem;
}

.cog-new-post-form .form-field label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cog-text);
  margin-bottom: 0.4rem;
}

.cog-new-post-form .form-field input[type="text"],
.cog-new-post-form .form-field select {
  width: 100%;
  border: 1px solid var(--cog-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.95rem;
  color: var(--cog-text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cog-new-post-form .form-field input[type="text"]:focus,
.cog-new-post-form .form-field select:focus {
  outline: none;
  border-color: var(--cog-green-2);
  box-shadow: 0 0 0 3px rgba(120, 191, 82, 0.15);
}

.cog-new-post-form footer {
  margin-top: 1.5rem;
  border-top: 1px solid var(--cog-border);
  padding-top: 1.25rem;
}

/* ===== New request page: matches new community post layout ===== */

.cog-request-new {
  max-width: 800px;
}

.cog-request-header {
  margin-top: 1.5rem;
}

.cog-request-form {
  margin-top: 0;
}

/* Scoped form field styles inside the React-rendered form */
.cog-request-form .form-field {
  margin-bottom: 1.25rem;
}

.cog-request-form .form-field label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cog-text);
  margin-bottom: 0.4rem;
}

.cog-request-form .form-field input[type="text"],
.cog-request-form .form-field select,
.cog-request-form .form-field textarea {
  width: 100%;
  border: 1px solid var(--cog-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.95rem;
  color: var(--cog-text);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cog-request-form .form-field input[type="text"]:focus,
.cog-request-form .form-field select:focus,
.cog-request-form .form-field textarea:focus {
  outline: none;
  border-color: var(--cog-green-2);
  box-shadow: 0 0 0 3px rgba(120, 191, 82, 0.15);
}

.cog-request-form footer {
  margin-top: 1.5rem;
  border-top: 1px solid var(--cog-border);
  padding-top: 1.25rem;
}
/* =========================================================
   USER PROFILE PAGE
   ========================================================= */

.cog-profile {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* Breadcrumb subnav */
.cog-profile-subnav {
  margin-bottom: 1rem;
}

/* ---- Header card ---- */
.cog-profile-header-card {
  margin-bottom: 1.25rem;
}

.cog-profile-top {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Avatar */
.cog-profile-avatar-wrap {
  flex-shrink: 0;
}

.cog-profile-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 2px solid var(--cog-border);
  display: block;
}

.icon-agent {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--cog-green);
  color: #fff;
  border-radius: 999px;
  padding: 2px;
}

/* Identity block */
.cog-profile-identity {
  flex: 1 1 0;
  min-width: 0;
}

.cog-profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cog-profile-name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cog-text);
  line-height: 1.2;
}

.cog-profile-name a {
  color: inherit;
  text-decoration: none;
}

.cog-profile-name a:hover {
  color: var(--cog-green);
}

.cog-profile-private {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cog-muted);
  border: 1px solid var(--cog-border);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Title badges */
.cog-profile-title-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

/* Achievement badge icons */
.cog-profile-achievement-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.cog-profile-badge-achievement img {
  width: 32px;
  height: 32px;
}

/* Bio */
.cog-profile-bio {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--cog-muted);
  line-height: 1.45;
}

/* Actions */
.cog-profile-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* ---- Stats row ---- */
.cog-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cog-border);
}

.cog-profile-stat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  border-right: 1px solid var(--cog-border);
  text-align: center;
}

.cog-profile-stat:last-child {
  border-right: none;
}

.cog-profile-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--cog-text);
  line-height: 1.2;
}

.cog-profile-stat-label {
  font-size: 0.75rem;
  color: var(--cog-muted);
  margin-top: 2px;
  white-space: nowrap;
}

/* ---- Tab nav ---- */
.cog-profile-tabs {
  margin-bottom: 1.25rem;
}

.cog-profile-tabs .cog-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  gap: 2px;
}

.cog-profile-tabs .cog-toggle-btn {
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none !important;
  color: var(--cog-green);
  background: transparent;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.cog-profile-tabs .cog-toggle-btn.is-active {
  background: var(--cog-green);
  color: #fff;
}

/* ---- Activity rows ---- */
.cog-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 4px;
  cursor: default;
}

.cog-activity-icon {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--cog-muted);
}

.cog-activity-label {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cog-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Badge rows ---- */
.cog-badge-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  cursor: default;
}

.cog-badge-img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Responsive: stack stats on mobile */
@media (max-width: 640px) {
  .cog-profile-stat {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid var(--cog-border);
    padding: 0.75rem 0.5rem;
  }

  .cog-profile-top {
    flex-direction: column;
  }

  .cog-profile-actions {
    align-items: flex-start;
  }
}

/* =========================================================
   USER PROFILE PAGE — full replacement
   ========================================================= */

.cog-profile {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* ---- Header card ---- */
.cog-profile-header-card {
  margin-bottom: 1.25rem;
}

.cog-profile-top {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cog-profile-avatar-wrap { flex-shrink: 0; }

.cog-profile-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 2px solid var(--cog-border);
  display: block;
}

.cog-profile-identity {
  flex: 1 1 0;
  min-width: 0;
}

.cog-profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cog-profile-name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cog-text);
  line-height: 1.2;
}

.cog-profile-name a {
  color: inherit;
  text-decoration: none;
}

.cog-profile-name a:hover { color: var(--cog-green); }

.cog-profile-private {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cog-muted);
  border: 1px solid var(--cog-border);
  border-radius: 999px;
  padding: 3px 10px;
}

.cog-profile-title-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.cog-profile-achievement-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.cog-profile-badge-achievement img {
  width: 32px;
  height: 32px;
}

.cog-profile-bio {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--cog-muted);
  line-height: 1.45;
}

.cog-profile-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}

/* ---- Stats row ---- */
.cog-profile-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cog-border);
}

.cog-profile-stat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-right: 1px solid var(--cog-border);
  text-align: center;
}

.cog-profile-stat:last-child { border-right: none; }

.cog-profile-stat-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--cog-text);
  line-height: 1.2;
}

.cog-profile-stat-label {
  font-size: 0.72rem;
  color: var(--cog-muted);
  margin-top: 3px;
  white-space: nowrap;
}

/* ---- Tab nav ---- */
.cog-profile-tabs {
  margin-bottom: 1.25rem;
}

.cog-profile-tabs .cog-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

.cog-profile-tabs .cog-toggle-btn {
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none !important;
  color: var(--cog-green);
  background: transparent;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.cog-profile-tabs .cog-toggle-btn.is-active {
  background: var(--cog-green);
  color: #fff;
}

/* ---- Activity items ---- */
.cog-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 4px;
  width: 100%;
}

.cog-activity-icon {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--cog-muted);
}

/* Label: small, muted, sentence case — sits above title */
.cog-activity-label {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cog-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Badge items ---- */
.cog-badge-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  width: 100%;
}

.cog-badge-img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .cog-profile-stat {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid var(--cog-border);
    padding: 0.75rem 0.5rem;
  }

  .cog-profile-top { flex-direction: column; }
  .cog-profile-actions { align-items: flex-start; }
}

/* =========================================================
   REQUESTS LIST PAGE
   ========================================================= */

.cog-requests-page {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* Header card */
.cog-requests-header {
  margin-bottom: 0;
}

/* Tab nav: reuse profile tab pill styles, no changes needed to cog-profile-tabs */
.cog-requests-page .cog-profile-tabs {
  margin: 1.25rem 0;
}

/* Toolbar */
.cog-requests-page .cog-requests-toolbar {
  margin-bottom: 1.25rem;
}

.cog-requests-page .cog-toolbar-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cog-requests-page .cog-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.cog-requests-page .cog-toolbar-right {
  margin-left: auto;
  flex-shrink: 0;
}

/* Search input */
.cog-requests-page .cog-search {
  position: relative;
  min-width: 220px;
}

.cog-requests-page .cog-search .cog-subnav-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

.cog-requests-search-input {
  height: 36px;
  border: 1px solid var(--cog-border);
  border-radius: 999px;
  padding: 0 14px 0 32px;
  font-size: 13px;
  background: #f9fafb;
  color: var(--cog-text);
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cog-requests-search-input:focus {
  outline: none;
  border-color: var(--cog-green-2);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(120, 191, 82, 0.15);
}

/* Filter selects */
.cog-filter-select {
  height: 36px;
  border: 1px solid var(--cog-border);
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  background: #f9fafb;
  color: var(--cog-text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.cog-filter-select:focus {
  outline: none;
  border-color: var(--cog-green-2);
  box-shadow: 0 0 0 3px rgba(120, 191, 82, 0.15);
}

/* Search results info */
.cog-requests-page .cog-search-info {
  margin-top: 10px;
  font-size: 13px;
  color: var(--cog-muted);
}

/* Row meta: plain text with dot separators, no pill borders */
.cog-requests-page .cog-row-meta .cog-meta-pill {
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.cog-requests-page .cog-row-meta .cog-meta-pill + .cog-meta-pill::before {
  content: "·";
  margin: 0 6px;
  color: #d1d5db;
}

/* Right side of row */
.cog-requests-row-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Status pills: subtle bordered style, no solid fills */
.cog-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.cog-status-pill--new {
  background: #fff8ec;
  color: #92400e;
  border-color: #fcd34d;
}

.cog-status-pill--open {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}

.cog-status-pill--pending {
  background: #eff6ff;
  color: #1e40af;
  border-color: #93c5fd;
}

.cog-status-pill--hold {
  background: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

.cog-status-pill--solved {
  background: #f0fdf4;
  color: #166534;
  border-color: #86efac;
}

.cog-status-pill--closed {
  background: #f9fafb;
  color: #9ca3af;
  border-color: #e5e7eb;
}

/* Dim closed row titles */
.cog-requests-page .cog-row.is-closed .cog-row-title {
  opacity: 0.6;
}

/* =========================================================
   REQUEST DETAIL PAGE
   ========================================================= */

.cog-request-page {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* Subnav: breadcrumbs + search matching other interior pages */
.cog-request-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

/* Two-column layout */
.cog-request-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-top: 1.25rem;
}

@media (max-width: 1024px) {
  .cog-request-layout {
    grid-template-columns: 1fr;
  }
}

/* Override old cog-card radius/padding to match cog-list-card */
.cog-request-page .cog-list-card {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cog-request-page .cog-list-card:last-child {
  margin-bottom: 0;
}

/* Header card */
.cog-request-header-card .cog-h1 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.cog-request-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Meta pills on request header: plain text with dots, status pill keeps its border */
.cog-request-meta-row .cog-meta-pill {
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.cog-request-meta-row .cog-meta-pill + .cog-meta-pill::before {
  content: "·";
  margin: 0 6px;
  color: #d1d5db;
}

/* Conversation timeline */
.cog-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cog-timeline-item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--cog-border);
}

.cog-timeline-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cog-comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cog-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid var(--cog-border);
  flex-shrink: 0;
}

.cog-comment-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cog-comment-author-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cog-text);
}

.cog-comment-date {
  font-size: 0.78rem;
  color: var(--cog-muted);
}

.cog-comment-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cog-text);
  padding-left: 46px; /* aligns with text after avatar */
}

/* Reply footer: separator + submit row */
.cog-reply-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cog-border);
}

/* Sidebar detail list */
.cog-detail-list {
  margin: 0;
  padding: 0;
}

.cog-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--cog-border);
  gap: 12px;
}

.cog-detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cog-detail-row dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cog-muted);
  flex-shrink: 0;
}

.cog-detail-row dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cog-text);
  text-align: right;
}

/* ===== Request header meta row ===== */

.cog-request-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0.75rem;
}

.cog-request-meta-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.cog-request-meta-item {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.cog-request-meta-item + .cog-request-meta-item::before {
  content: "·";
  margin: 0 8px;
  color: #d1d5db;
}

/* ===== Requests toolbar: ensure inline layout ===== */

.cog-requests-toolbar .cog-toolbar-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.cog-requests-toolbar .cog-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
}

/* Kill any inherited full-width behaviour from request-filter */
.cog-requests-toolbar .cog-filter-select {
  width: auto !important;
  flex-shrink: 0;
}

.cog-requests-toolbar .cog-search {
  flex-shrink: 1;
}/* ===== Requests page: subnav row with tabs + search + filter inline ===== */

.cog-requests-subnav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 1.25rem 0;
}

.cog-requests-subnav .cog-profile-tabs {
  margin: 0;
  flex-shrink: 0;
}

.cog-requests-subnav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.cog-requests-subnav-right .cog-subnav-search {
  min-width: 180px;
}

.cog-filter-select {
  height: 36px;
  border: 1px solid var(--cog-border);
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  background: #f9fafb;
  color: var(--cog-text);
  cursor: pointer;
  transition: border-color 0.15s ease;
  flex-shrink: 0;
}

.cog-filter-select:focus {
  outline: none;
  border-color: var(--cog-green-2);
  box-shadow: 0 0 0 3px rgba(120, 191, 82, 0.15);
}

/* ===== Requests subnav: force single row ===== */

.cog-requests-subnav-right {
  flex-wrap: nowrap;
  align-items: center;
}

.cog-requests-subnav-right .cog-subnav-search,
.cog-requests-subnav-right .cog-subnav-search input {
  width: 200px !important;
  min-width: 0 !important;
  flex-shrink: 1;
}

.cog-requests-subnav-right .cog-filter-select {
  width: auto !important;
  min-width: 0 !important;
  flex-shrink: 0;
  max-width: 140px;
}

/* =========================================================
   COMMUNITY POST PAGE — targeted fix pass
   Works with Zendesk's actual DOM output
   ========================================================= */

/* ---- Page + layout ---- */
.cog-community-post { padding-bottom: 2rem; }

.post-container.cog-post-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 260px !important;
  gap: 1.25rem !important;
  align-items: start !important;
}

@media (max-width: 980px) {
  .post-container.cog-post-container { grid-template-columns: 1fr !important; }
}

.post.cog-post { min-width: 0; width: 100%; }

/* ---- Thread card ---- */
.cog-thread-card { padding: 1.5rem !important; }

/* ---- Post header: title left, follow right, status below ---- */
.cog-post-header {
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--cog-border) !important;
  margin-bottom: 1rem !important;
}

.cog-post-title-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

/* Title takes remaining space */
.cog-post-title-row .cog-h1 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Follow button doesn't stretch */
.cog-post-title-row .cog-follow { flex-shrink: 0 !important; }

/* Status pills sit below as their own row */
.cog-post-status-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

/* ---- Post info: content left, vote column right ---- */
.post-info-container.cog-post-info-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: start !important;
  margin-bottom: 0 !important;
}

.post-info.cog-post-info {
  min-width: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
}

/* ---- Post author row ---- */
.post-author.cog-post-author {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-bottom: 1rem !important;
}

/* Avatar */
.post-avatar { margin-bottom: 0 !important; }

.post-avatar .user-avatar,
.comment-avatar .user-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 2px solid var(--cog-border) !important;
  object-fit: cover !important;
  display: block !important;
}

/* Meta stack: left-aligned column */
.post-meta.cog-post-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  text-align: left !important;
  vertical-align: unset !important;
  flex: 1 1 0 !important;
  margin-left: 0 !important;
}

.cog-author-name a {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cog-text);
  text-decoration: none;
}
.cog-author-name a:hover { color: var(--cog-green); }

.cog-post-date {
  font-size: 0.78rem;
  color: var(--cog-muted);
}

.cog-meta-item + .cog-meta-item::before {
  content: "·";
  margin: 0 5px;
  color: #d1d5db;
}

/* Badge title pills */
.community-badge-titles {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Achievement badge icons */
.community-badge-achievements {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.community-badge-achievement img { width: 24px; height: 24px; }

/* ---- Vote + actions column ---- */
.post-actions-wrapper.cog-actions-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid var(--cog-border) !important;
  background: var(--cog-soft) !important;
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
  width: auto !important;
}

/* Vote widget: vertical column of up / count / down */
.post-vote.vote.cog-vote {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Zendesk flips vote-up SVG — we undo that and use correct arrows */
.post-vote .vote-up svg { transform: none !important; }

.post-vote .vote-up,
.post-vote .vote-down {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
  transition: border-color 0.15s, color 0.15s !important;
}

.post-vote .vote-up:hover,
.post-vote .vote-down:hover {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

.post-vote .vote-voted {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

.post-vote .vote-sum {
  display: block !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  color: var(--cog-text) !important;
  min-width: 20px !important;
  text-align: center !important;
  margin: 4px 0 !important;
}

/* Actions (gear) button */
.cog-post-actions { display: flex !important; align-items: center !important; }
.cog-post-actions a,
.cog-post-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
}

/* ---- Post body ---- */
.cog-post-body { line-height: 1.7; font-size: 0.95rem; }
.cog-post-body img { max-width: 100%; border-radius: 12px; }

/* ---- Post footer ---- */
.cog-post-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cog-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cog-post-comment-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cog-muted);
  text-decoration: none;
}
.cog-post-comment-count:hover { color: var(--cog-green); }

/* ---- Comments overview header ---- */
.cog-comments-overview {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  overflow: visible !important;
  position: relative;
}

.cog-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cog-soft);
  border: 1px solid var(--cog-border);
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* Dropdown */
.dropdown, .comment-sorter { overflow: visible !important; position: relative !important; }
.dropdown-menu { z-index: 9999 !important; }

.cog-comments-overview .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0; left: auto;
  z-index: 9999;
}

.cog-comments-overview .dropdown.is-open .dropdown-menu,
.cog-comments-overview .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
.cog-comments-overview .dropdown:focus-within .dropdown-menu { display: block; }

/* ---- Comment list ---- */
.cog-comment-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

/* Comment card */
.cog-comment-wrapper {
  padding: 1rem 1.25rem !important;
  margin-top: 0 !important;
}

.comment-official.cog-comment-wrapper {
  background: #f8fffe !important;
  border-color: #86efac !important;
}

/* Comment author: fix Zendesk's flex-wrap + align-items flex-end */
.comment-author.cog-post-author {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-bottom: 0.75rem !important;
}

/* Comment meta: left-aligned column */
.comment-meta.cog-post-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  text-align: left !important;
  flex: 1 1 0 !important;
}

/* Comment labels inline under meta */
.comment-labels {
  flex-basis: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

/* Comment body */
.cog-comment-body {
  line-height: 1.65;
  font-size: 0.9rem;
  margin-top: 0.75rem;
  padding-left: 46px;
}

/* Comment actions row: horizontal, below body */
.cog-comment-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 0.6rem !important;
  padding-left: 46px !important;
}

/* Comment vote: horizontal pill */
.cog-comment-vote.vote {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  border: 1px solid var(--cog-border) !important;
  background: var(--cog-soft) !important;
  min-height: 0 !important;
  height: auto !important;
  text-align: left !important;
}

/* Undo Zendesk's SVG flip on comment vote-up too */
.cog-comment-vote .vote-up svg { transform: none !important; }

.cog-comment-vote .vote-up,
.cog-comment-vote .vote-down {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  min-width: 26px !important;
  border-radius: 999px !important;
  border: none !important;
  background: none !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
}

.cog-comment-vote .vote-up:hover,
.cog-comment-vote .vote-down:hover { color: var(--cog-green) !important; }

.cog-comment-vote .vote-voted { color: var(--cog-green) !important; }

.cog-comment-vote .vote-sum {
  font-weight: 700 !important;
  font-size: 13px !important;
  min-width: 18px !important;
  text-align: center !important;
  color: var(--cog-text) !important;
  margin: 0 !important;
}

/* Gear action button on comments */
.comment-actions a,
.comment-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
}

/* ---- Reply form ---- */
.post-comments.cog-reply-card {
  margin-top: 1.25rem !important;
  padding: 1.25rem !important;
  border-top: none !important;
}

/* Form: avatar left, content right */
.comment-form.cog-comment-form {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding-top: 0 !important;
}

.comment-form.cog-comment-form .comment-container {
  flex: 1 1 0 !important;
  width: auto !important;
}

/* Controls row: always visible, flex */
.comment-form-controls.cog-reply-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--cog-border) !important;
}

/* Official label inline */
.cog-official-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cog-muted);
  cursor: pointer;
}

/* ---- Sidebar ---- */
.cog-post-sidebar {
  position: sticky;
  top: 18px;
  align-self: start;
}
.cog-sidebar-card { padding: 1.25rem !important; }
.cog-sidebar-btn {
  display: block !important;
  width: 100% !important;
  text-align: center;
  border-radius: 999px !important;
  margin-top: 0.75rem;
}

/* ---- Status pills ---- */
.cog-status-pill--pinned,
.cog-status-pill--featured {
  background: #f0fdf4;
  color: #166534;
  border-color: #86efac;
}
.cog-status-pill--official {
  background: #eff6ff;
  color: #1e40af;
  border-color: #93c5fd;
}

/* Content tags */
.cog-content-tags {
  margin-top: 1rem;
  padding-top: 0.75rem;
}
.content-tag-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0; list-style: none; margin: 0;
}
.content-tag-item a {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--cog-border);
  background: var(--cog-soft);
  text-decoration: none;
  font-size: 13px;
  color: var(--cog-text);
}
.content-tag-item a:hover { border-color: var(--cog-green-2); color: var(--cog-green); }

/* Mobile */
@media (max-width: 700px) {
  .post-info-container.cog-post-info-container {
    grid-template-columns: 1fr !important;
  }
  .post-actions-wrapper.cog-actions-wrapper {
    position: static !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
  .cog-comment-body,
  .cog-comment-actions { padding-left: 0 !important; }
}

/* =========================================================
   COMMUNITY POST PAGE — definitive layout fix
   ========================================================= */

/* ---- Post header: override Zendesk's flex-direction: row ---- */
.cog-thread-card .post-header {
  display: block !important;
  margin-bottom: 0 !important;
}

/* Title row: h1 left, follow button right */
.cog-post-title-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.cog-post-title-row .cog-h1 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: block !important;
  vertical-align: unset !important;
}

.cog-post-title-row .cog-follow {
  flex-shrink: 0 !important;
  width: auto !important;
  margin-bottom: 0 !important;
}

/* Status pills: separate row below title */
.cog-post-status-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

/* Hide Zendesk's native inline status label in post-title */
.post-title .status-label,
.post-header .status-label {
  display: none !important;
}

/* ---- Post info: content + vote side by side ---- */
.post-info-container.cog-post-info-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: start !important;
  margin-bottom: 0 !important;
}

.post-info.cog-post-info {
  padding-right: 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* ---- Vote column: compact sticky card ---- */
.post-actions-wrapper.cog-actions-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px !important;
  width: 52px !important;
  border-radius: 14px !important;
  border: 1px solid var(--cog-border) !important;
  background: var(--cog-soft) !important;
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
}

/* Vote: vertical column */
.post-vote.cog-vote {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Undo Zendesk's SVG flip on vote-up */
.post-vote .vote-up svg { transform: none !important; }

.post-vote .vote-up,
.post-vote .vote-down {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important; height: 34px !important;
  min-width: 34px !important; min-height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
  transition: border-color 0.15s, color 0.15s !important;
}

.post-vote .vote-up:hover,
.post-vote .vote-down:hover {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

.post-vote .vote-voted {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

.post-vote .vote-sum {
  display: block !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  color: var(--cog-text) !important;
  text-align: center !important;
  margin: 2px 0 !important;
  line-height: 1.2 !important;
}

/* Actions gear */
.cog-post-actions { display: flex !important; align-items: center !important; }
.cog-post-actions a,
.cog-post-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important; height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
}

/* ---- Author row ---- */
.post-author.cog-post-author {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-bottom: 1rem !important;
}

.post-avatar { margin-bottom: 0 !important; }

.post-avatar .user-avatar,
.comment-avatar .user-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: 999px !important;
  border: 2px solid var(--cog-border) !important;
  object-fit: cover !important;
  display: block !important;
}

.post-meta.cog-post-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  text-align: left !important;
  vertical-align: unset !important;
  flex: 1 1 0 !important;
  margin-left: 0 !important;
}

.cog-author-name a {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cog-text);
  text-decoration: none;
}
.cog-author-name a:hover { color: var(--cog-green); }

.cog-post-date { font-size: 0.78rem; color: var(--cog-muted); }

/* Badge lists */
.community-badge-titles {
  display: flex !important; flex-wrap: wrap !important;
  gap: 4px !important; list-style: none !important;
  margin: 0 !important; padding: 0 !important;
}

.community-badge-achievements {
  display: flex !important; flex-wrap: wrap !important;
  align-items: center !important; gap: 4px !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.community-badge-achievement img { width: 24px; height: 24px; }

/* ---- Comment list ---- */
.cog-comment-list {
  list-style: none !important; padding: 0 !important;
  margin: 0 !important; display: flex !important;
  flex-direction: column !important; gap: 0.75rem !important;
}

.cog-comment-wrapper { padding: 1rem 1.25rem !important; margin-top: 0 !important; }

/* Comment author row */
.comment-author.cog-post-author {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-bottom: 0.75rem !important;
}

.comment-meta.cog-post-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  text-align: left !important;
  flex: 1 1 0 !important;
}

.comment-labels {
  flex-basis: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

/* Comment body indented to align under name */
.cog-comment-body {
  line-height: 1.65; font-size: 0.9rem;
  margin-top: 0.75rem; padding-left: 46px;
}

/* Comment actions row */
.cog-comment-actions {
  display: flex !important; align-items: center !important;
  gap: 8px !important; margin-top: 0.6rem !important;
  padding-left: 46px !important;
}

/* Comment vote: horizontal pill */
.cog-comment-vote.vote {
  display: inline-flex !important; flex-direction: row !important;
  align-items: center !important; gap: 2px !important;
  padding: 3px !important; border-radius: 999px !important;
  border: 1px solid var(--cog-border) !important;
  background: var(--cog-soft) !important;
  min-height: 0 !important; height: auto !important;
  text-align: left !important;
}

.cog-comment-vote .vote-up svg { transform: none !important; }

.cog-comment-vote .vote-up,
.cog-comment-vote .vote-down {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important;
  width: 26px !important; height: 26px !important;
  min-height: 26px !important; min-width: 26px !important;
  border-radius: 999px !important; border: none !important;
  background: none !important; color: var(--cog-muted) !important;
  text-decoration: none !important;
}

.cog-comment-vote .vote-up:hover,
.cog-comment-vote .vote-down:hover { color: var(--cog-green) !important; }
.cog-comment-vote .vote-voted { color: var(--cog-green) !important; }

.cog-comment-vote .vote-sum {
  font-weight: 700 !important; font-size: 13px !important;
  min-width: 18px !important; text-align: center !important;
  color: var(--cog-text) !important; margin: 0 !important;
}

.comment-actions a,
.comment-actions button {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important;
  width: 28px !important; height: 28px !important;
  border-radius: 7px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important; color: var(--cog-muted) !important;
}

/* ---- Reply form ---- */
.post-comments.cog-reply-card {
  margin-top: 1.25rem !important;
  padding: 1.25rem !important;
  border-top: none !important;
}

.comment-form.cog-comment-form {
  display: flex !important; align-items: flex-start !important;
  gap: 10px !important; padding-top: 0 !important;
}

.comment-form.cog-comment-form .comment-container {
  flex: 1 1 0 !important; width: auto !important;
}

.comment-form-controls.cog-reply-footer {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 12px !important;
  margin-top: 1rem !important; padding-top: 1rem !important;
  border-top: 1px solid var(--cog-border) !important;
}

/* ---- Sidebar ---- */
.cog-post-sidebar { position: sticky; top: 18px; align-self: start; }
.cog-sidebar-card { padding: 1.25rem !important; }
.cog-sidebar-btn {
  display: block !important; width: 100% !important;
  text-align: center; border-radius: 999px !important;
  margin-top: 0.75rem;
}

/* Mobile */
@media (max-width: 700px) {
  .post-info-container.cog-post-info-container { grid-template-columns: 1fr !important; }
  .post-actions-wrapper.cog-actions-wrapper {
    position: static !important;
    flex-direction: row !important;
    width: auto !important;
    justify-content: flex-start !important;
  }
  .cog-comment-body,
  .cog-comment-actions { padding-left: 0 !important; }
}
/* =========================================================
   COMMUNITY POST PAGE — single authoritative pass (final)
   ========================================================= */

/* Two-column outer grid */
.post-container.cog-post-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 260px !important;
  gap: 1.25rem !important;
  align-items: start !important;
  flex-direction: unset !important;
}
@media (max-width: 980px) {
  .post-container.cog-post-container { grid-template-columns: 1fr !important; }
}

/* Post column */
.post.cog-post {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* Sidebar: always visible, sticky */
.post-sidebar.cog-post-sidebar {
  display: block !important;
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
}
.cog-sidebar-card { padding: 1.25rem; }
.cog-sidebar-btn {
  display: block !important;
  width: 100%;
  text-align: center;
  border-radius: 999px !important;
  margin-top: 0.75rem;
}

/* Thread card */
.cog-thread-card { padding: 1.5rem !important; width: auto !important; }

/* Post header: block layout so follow button doesn't go inline with title */
.cog-thread-card .post-header { display: block !important; margin-bottom: 0 !important; }

/* Title row: h1 left, follow right */
.cog-post-title-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.cog-post-title-row .cog-h1 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: block !important;
  vertical-align: unset !important;
}
.cog-post-title-row .cog-follow {
  flex-shrink: 0 !important;
  width: auto !important;
  margin-bottom: 0 !important;
}

/* Header border */
.cog-post-header {
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--cog-border) !important;
  margin-bottom: 1rem !important;
}

/* Status pills: own row below title */
.cog-post-status-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
}
.cog-status-pill--pinned,
.cog-status-pill--featured { background: #f0fdf4; color: #166534; border-color: #86efac; }
.cog-status-pill--official  { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }

/* Hide Zendesk's native inline status label */
.post-title .status-label,
.post-header .status-label { display: none !important; }

/* Post body area: content left, 52px vote column right */
.post-info-container.cog-post-info-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 52px !important;
  gap: 14px !important;
  align-items: start !important;
  margin-bottom: 0 !important;
}
.post-info.cog-post-info {
  padding-right: 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Author row */
.post-author.cog-post-author {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-bottom: 1rem !important;
}
.post-avatar { margin-bottom: 0 !important; }
.post-avatar .user-avatar,
.comment-avatar .user-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: 999px !important;
  border: 2px solid var(--cog-border) !important;
  object-fit: cover !important; display: block !important;
}
.post-meta.cog-post-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  text-align: left !important;
  vertical-align: unset !important;
  flex: 1 1 0 !important;
  margin-left: 0 !important;
}
.cog-author-name a { font-weight: 700; font-size: 0.9rem; color: var(--cog-text); text-decoration: none; }
.cog-author-name a:hover { color: var(--cog-green); }
.cog-post-date { font-size: 0.78rem; color: var(--cog-muted); }
.cog-meta-item + .cog-meta-item::before { content: "·"; margin: 0 5px; color: #d1d5db; }

/* Vote column */
.post-actions-wrapper.cog-actions-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px !important;
  width: 52px !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  border: 1px solid var(--cog-border) !important;
  background: var(--cog-soft) !important;
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
}
.vote-up svg { transform: none !important; }
.post-vote.cog-vote {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; gap: 4px !important;
  border: none !important; background: none !important; padding: 0 !important;
}
.post-vote .vote-up,
.post-vote .vote-down {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important;
  border-radius: 8px !important; border: 1px solid var(--cog-border) !important;
  background: #fff !important; color: var(--cog-muted) !important; text-decoration: none !important;
}
.post-vote .vote-up:hover,
.post-vote .vote-down:hover { border-color: var(--cog-green-2) !important; color: var(--cog-green) !important; }
.post-vote .vote-voted { border-color: var(--cog-green-2) !important; color: var(--cog-green) !important; }
.post-vote .vote-sum {
  display: block !important; font-weight: 800 !important; font-size: 0.85rem !important;
  color: var(--cog-text) !important; text-align: center !important; margin: 2px 0 !important;
}
.cog-post-actions { display: flex !important; align-items: center !important; }
.cog-post-actions a,
.cog-post-actions button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 34px !important; height: 34px !important; border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important; background: #fff !important; color: var(--cog-muted) !important;
}

/* Post footer */
.cog-post-footer {
  margin-top: 1rem; padding-top: 0.75rem;
  border-top: 1px solid var(--cog-border);
  display: flex; align-items: center; justify-content: space-between;
}
.cog-post-comment-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--cog-muted); text-decoration: none;
}
.cog-post-comment-count:hover { color: var(--cog-green); }

/* Comment author row */
.comment-author.cog-post-author {
  display: flex !important; align-items: flex-start !important;
  justify-content: flex-start !important; flex-wrap: nowrap !important;
  gap: 10px !important; margin-bottom: 0.75rem !important;
}
.comment-meta.cog-post-meta {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 4px !important;
  text-align: left !important; flex: 1 1 0 !important;
}
.comment-labels { flex-basis: auto !important; display: flex !important; flex-wrap: wrap !important; gap: 4px !important; }

/* Comment body + actions indented under avatar */
.cog-comment-body { line-height: 1.65; font-size: 0.9rem; margin-top: 0.75rem; padding-left: 46px; }
.cog-comment-actions {
  display: flex !important; align-items: center !important;
  gap: 8px !important; margin-top: 0.6rem !important; padding-left: 46px !important;
}

/* Comment vote: horizontal pill */
.cog-comment-vote.vote {
  display: inline-flex !important; flex-direction: row !important;
  align-items: center !important; gap: 2px !important; padding: 3px !important;
  border-radius: 999px !important; border: 1px solid var(--cog-border) !important;
  background: var(--cog-soft) !important; min-height: 0 !important; height: auto !important;
}
.cog-comment-vote .vote-up,
.cog-comment-vote .vote-down {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 26px !important; height: 26px !important; min-height: 26px !important; min-width: 26px !important;
  border-radius: 999px !important; border: none !important; background: none !important;
  color: var(--cog-muted) !important; text-decoration: none !important;
}
.cog-comment-vote .vote-up:hover,
.cog-comment-vote .vote-down:hover { color: var(--cog-green) !important; }
.cog-comment-vote .vote-voted { color: var(--cog-green) !important; }
.cog-comment-vote .vote-sum {
  font-weight: 700 !important; font-size: 13px !important; min-width: 18px !important;
  text-align: center !important; color: var(--cog-text) !important; margin: 0 !important;
}
.comment-actions a,
.comment-actions button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 28px !important; height: 28px !important; border-radius: 7px !important;
  border: 1px solid var(--cog-border) !important; background: #fff !important; color: var(--cog-muted) !important;
}

/* Reply form */
.post-comments.cog-reply-card { margin-top: 1.25rem !important; padding: 1.25rem !important; border-top: none !important; }
.comment-form.cog-comment-form {
  display: flex !important; align-items: flex-start !important; gap: 10px !important; padding-top: 0 !important;
}
.comment-form.cog-comment-form .comment-container { flex: 1 1 0 !important; width: auto !important; }
.cog-reply-body { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin-top: 0.75rem !important; }
.cog-reply-body .comment-container { flex: 1 1 0 !important; }
.comment-form-controls.cog-reply-footer {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px !important; margin-top: 1rem !important; padding-top: 1rem !important;
  border-top: 1px solid var(--cog-border) !important;
}
.cog-official-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cog-muted); }

@media (max-width: 700px) {
  .post-info-container.cog-post-info-container { grid-template-columns: 1fr !important; }
  .post-actions-wrapper.cog-actions-wrapper {
    position: static !important; flex-direction: row !important;
    width: auto !important; justify-content: flex-start !important;
  }
  .cog-comment-body, .cog-comment-actions { padding-left: 0 !important; }
}

/* =========================================================
   COMMUNITY POST PAGE — layout & polish overrides
   ========================================================= */

/* 1. Single column — no sidebar */
.post-container.cog-post-container {
  display: block !important;
  grid-template-columns: unset !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

.post-sidebar.cog-post-sidebar,
.post-sidebar,
aside.cog-post-sidebar {
  display: none !important;
}

.post.cog-post {
  width: 100% !important;
  max-width: none !important;
}

/* 2. Subnav: tighten the gap between breadcrumb row and post card */
.cog-community-post .cog-subnav,
.cog-community-post .sub-nav {
  margin-bottom: 10px !important;
  padding-bottom: 0 !important;
}

/* 3. Thread card: sensible padding */
.cog-thread-card {
  padding: 1.5rem !important;
}

/* 4. Post info: full-width content, compact vote column */
.post-info-container.cog-post-info-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 48px !important;
  gap: 12px !important;
  align-items: start !important;
  margin-bottom: 0 !important;
}

/* 5. Vote column: compact, sticky */
.post-actions-wrapper.cog-actions-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px !important;
  width: 48px !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  border: 1px solid var(--cog-border) !important;
  background: var(--cog-soft) !important;
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
}

.post-vote.cog-vote {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

.vote-up svg { transform: none !important; }

.post-vote .vote-up,
.post-vote .vote-down {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important; height: 32px !important;
  min-width: 32px !important; min-height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
}
.post-vote .vote-up:hover,
.post-vote .vote-down:hover { border-color: var(--cog-green-2) !important; color: var(--cog-green) !important; }
.post-vote .vote-voted { border-color: var(--cog-green-2) !important; color: var(--cog-green) !important; }
.post-vote .vote-sum {
  display: block !important;
  font-weight: 800 !important; font-size: 0.82rem !important;
  color: var(--cog-text) !important; text-align: center !important; margin: 2px 0 !important;
  line-height: 1 !important;
}

.cog-post-actions { display: flex !important; }
.cog-post-actions a,
.cog-post-actions button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 32px !important; height: 32px !important; border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important; background: #fff !important; color: var(--cog-muted) !important;
}

/* 6. Author row: clean left-aligned flex */
.post-author.cog-post-author {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-bottom: 1rem !important;
}
.post-avatar { margin-bottom: 0 !important; }
.post-avatar .user-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid var(--cog-border) !important;
  object-fit: cover !important; display: block !important;
  flex-shrink: 0 !important;
}
.post-meta.cog-post-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  text-align: left !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  vertical-align: unset !important;
  margin-left: 0 !important;
}

/* 7. Badge titles: horizontal wrap */
.community-badge-titles {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.community-badge-title {
  white-space: nowrap !important;
}

/* 8. Achievement icons: horizontal row, clipped cleanly */
.community-badge-achievements {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 3px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.community-badge-achievement img {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
/* "+N more" link badge */
.community-badge-achievement:last-child a.cog-meta-pill {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* 9. Date line */
.cog-post-date {
  font-size: 0.78rem !important;
  color: var(--cog-muted) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
}
.cog-meta-item + .cog-meta-item::before {
  content: "·" !important;
  margin: 0 5px !important;
  color: #d1d5db !important;
}

/* 10. Comment author: same treatment */
.comment-author.cog-post-author {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-bottom: 0.75rem !important;
}
.comment-avatar .user-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid var(--cog-border) !important;
  object-fit: cover !important; display: block !important;
  flex-shrink: 0 !important;
}
.comment-meta.cog-post-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  text-align: left !important;
  flex: 1 1 0 !important;
}
.comment-labels {
  flex-basis: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

/* Comment body + actions indented under name */
.cog-comment-body {
  margin-top: 0.75rem !important;
  padding-left: 46px !important;
  line-height: 1.65 !important;
  font-size: 0.9rem !important;
}
.cog-comment-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 0.5rem !important;
  padding-left: 46px !important;
}

/* Comment vote pill */
.cog-comment-vote.vote {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 3px !important;
  border-radius: 999px !important;
  border: 1px solid var(--cog-border) !important;
  background: var(--cog-soft) !important;
  height: auto !important; min-height: 0 !important;
}
.cog-comment-vote .vote-up,
.cog-comment-vote .vote-down {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important;
  border-radius: 999px !important; border: none !important; background: none !important;
  color: var(--cog-muted) !important;
}
.cog-comment-vote .vote-up:hover,
.cog-comment-vote .vote-down:hover { color: var(--cog-green) !important; }
.cog-comment-vote .vote-voted { color: var(--cog-green) !important; }
.cog-comment-vote .vote-sum {
  font-weight: 700 !important; font-size: 12px !important;
  min-width: 16px !important; text-align: center !important;
  color: var(--cog-text) !important; margin: 0 !important;
}

@media (max-width: 700px) {
  .post-info-container.cog-post-info-container { grid-template-columns: 1fr !important; }
  .post-actions-wrapper.cog-actions-wrapper {
    position: static !important; flex-direction: row !important;
    width: auto !important;
  }
  .cog-comment-body, .cog-comment-actions { padding-left: 0 !important; }
}

/* =========================================================
   COMMUNITY POST PAGE — full-width fix
   ========================================================= */

/* Remove our artificial max-width — let the base container govern width */
.post-container.cog-post-container {
  display: block !important;
  grid-template-columns: unset !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Post fills full width of container */
.post.cog-post {
  width: 100% !important;
  max-width: none !important;
}

/* Thread card fills full width */
.cog-thread-card {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Tighten gap between subnav and card */
.cog-community-post .cog-subnav,
.cog-community-post .sub-nav {
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}

/* Tooltip from badge hover — hide it */
.community-badge-achievement img + span,
.community-badge-achievement [title] { pointer-events: none; }

/* "Green belt" tooltip appearing near badges — suppress Zendesk's native tooltip */
.community-badge-title[title]:hover::after,
.community-badge-achievement[title]:hover::after { display: none !important; }

/* =========================================================
   COMMUNITY POST PAGE — subnav alignment + badge clip fix
   ========================================================= */

/* Subnav: breadcrumbs left, search pinned right */
.cog-community-post .sub-nav,
.cog-community-post .cog-subnav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  margin-bottom: 10px !important;
}

/* Breadcrumbs take remaining space on the left */
.cog-community-post .sub-nav .breadcrumbs,
.cog-community-post .cog-subnav .breadcrumbs {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Search sits on the right, fixed width, not centred */
.cog-community-post .cog-subnav-search {
  flex: 0 0 320px !important;
  max-width: 320px !important;
  margin: 0 !important;
}

/* Badge achievement icons: allow overflow so bottoms aren't clipped */
.community-badge-achievements {
  overflow: visible !important;
  padding-bottom: 2px !important;
}

/* =========================================================
   COMMUNITY POST PAGE — author meta tidy
   ========================================================= */

/* Title: don't overflow the card */
.cog-post-title-row .cog-h1 {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
}

/* Avatar: keep it small */
.post-author.cog-post-author .user-avatar,
.comment-author.cog-post-author .user-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid var(--cog-border) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Author name: normal body size */
.cog-author-name {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.cog-author-name a {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: var(--cog-text) !important;
  text-decoration: none !important;
}

/* Badge title pills in post/comment author context:
   Override cog-meta-pill size back to something compact */
.post-author .community-badge-title,
.comment-author .community-badge-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  line-height: 18px !important;
  background-color: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Achievement icons: 20px, no excess space */
.post-author .community-badge-achievement,
.comment-author .community-badge-achievement {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.post-author .community-badge-achievement img,
.comment-author .community-badge-achievement img {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* +N more link: compact pill matching badges */
.post-author .community-badge-achievements-rest,
.comment-author .community-badge-achievements-rest,
.post-author .community-badge-achievement a,
.comment-author .community-badge-achievement a {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  border: 1px solid var(--cog-border) !important;
  background: var(--cog-soft) !important;
  color: var(--cog-green) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Achievement row: tight horizontal, no clip */
.post-author .community-badge-achievements,
.comment-author .community-badge-achievements {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 3px !important;
  overflow: visible !important;
  padding: 0 0 2px 0 !important;
  margin: 0 !important;
}

/* Date row */
.cog-post-date {
  font-size: 0.78rem !important;
  color: var(--cog-muted) !important;
}

/* =========================================================
   COMMUNITY POST PAGE — badge overlap + header line fixes
   ========================================================= */

/* Remove the divider line between header and author */
.cog-post-header {
  border-bottom: none !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}

/* Fix +2 more overlapping badge: 
   The issue is negative margin from .community-badge margin:2px 
   and the pill rendering on top. Force the last item to not overlap. */
.post-author .community-badge-achievements,
.comment-author .community-badge-achievements {
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

/* Each achievement item: no negative margins */
.post-author .community-badge-achievement,
.comment-author .community-badge-achievement {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* The +2 more link specifically */
.post-author .community-badge-achievements .community-badge:last-child,
.comment-author .community-badge-achievements .community-badge:last-child {
  margin-left: 2px !important;
}

/* =========================================================
   COMMUNITY POST PAGE — +N more badge overlap fix
   ========================================================= */

/* The +N more <a> sits inside a community-badge-achievement <li>
   which is constrained to 20×20px — reset that li when it has a link child */
.post-author .community-badge-achievement:has(a),
.comment-author .community-badge-achievement:has(a) {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Also reset via the rest class if Zendesk uses it */
.post-author .community-badge-achievements-rest,
.comment-author .community-badge-achievements-rest {
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Vote column: don't stick on scroll */
.post-actions-wrapper.cog-actions-wrapper {
  position: static !important;
  top: auto !important;
}

/* =========================================================
   COMMENT CARD — layout fix
   ========================================================= */

/* Comment wrapper: stack vertically, vote floats top-right */
.cog-comment-wrapper.comment-wrapper {
  display: block !important;
  position: relative !important;
}

/* Comment info: full width block */
.cog-comment-wrapper .comment-info {
  display: block !important;
  width: 100% !important;
  padding-right: 0 !important;
}

/* Vote + gear: absolute top-right of the card */
.cog-comment-wrapper .comment-vote.cog-comment-vote,
.cog-comment-wrapper .comment-actions.actions {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
}

.cog-comment-wrapper .comment-actions-container.cog-comment-actions {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
}

/* Author row: avatar left, meta right — no longer needs to be flex-end */
.cog-comment-wrapper .comment-author.cog-post-author {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-bottom: 0.5rem !important;
  padding-right: 80px !important; /* space for absolute vote/gear */
}

/* Meta column: vertical stack */
.cog-comment-wrapper .comment-meta.cog-post-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

/* Name row: name + badge titles inline */
.cog-comment-wrapper .cog-author-name {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Badge titles: inline after name on same visual line */
.cog-comment-wrapper .community-badge-titles {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  vertical-align: middle !important;
}

/* Timestamp: own row below name+badges */
.cog-comment-wrapper .cog-post-date {
  font-size: 0.78rem !important;
  color: var(--cog-muted) !important;
  margin-top: 1px !important;
}

/* Achievement badges row: below timestamp */
.cog-comment-wrapper .community-badge-achievements {
  margin-top: 2px !important;
}

/* Comment body: full width below author, no left indent */
.cog-comment-wrapper .comment-body.cog-comment-body {
  display: block !important;
  padding-left: 0 !important;
  margin-top: 0.75rem !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid var(--cog-border) !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  clear: both !important;
}

/* =========================================================
   COMMENT CARD — meta row restructure + vote position fix
   ========================================================= */

/* Push vote/gear down so they don't overlap the name */
.cog-comment-wrapper .comment-actions-container.cog-comment-actions {
  top: auto !important;
  bottom: 1rem !important;
  right: 1rem !important;
}

/* Meta column: name + badge titles on ONE row, then timestamp, then achievements */
.cog-comment-wrapper .comment-meta.cog-post-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

/* Name + badge titles: same flex row */
.cog-comment-wrapper .cog-author-name {
  display: inline !important;
  margin-right: 4px !important;
}

/* Wrap name + badge-titles in a single visual line using a pseudo-wrapper.
   Since we can't add DOM, use the badge-titles list as inline-flex 
   so it flows next to the name naturally */
.cog-comment-wrapper .community-badge-titles {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
}

/* Make cog-author-name and badge-titles sit on the same line 
   by making the meta a block and letting inline elements flow */
.cog-comment-wrapper .cog-author-name,
.cog-comment-wrapper .community-badge-titles {
  display: inline-flex !important;
  vertical-align: middle !important;
  align-items: center !important;
}

/* Timestamp: block below the name row */
.cog-comment-wrapper .cog-post-date {
  display: block !important;
  font-size: 0.78rem !important;
  color: var(--cog-muted) !important;
  margin-top: 0 !important;
}

/* Achievement icons: below timestamp */
.cog-comment-wrapper .community-badge-achievements {
  margin-top: 2px !important;
}

/* Pending approval / labels: below achievements */
.cog-comment-wrapper .comment-labels {
  margin-top: 2px !important;
}

/* =========================================================
   COMMENT CARD — definitive reset
   ========================================================= */

/* 1. Wrapper: simple block, no flex, relative for internal positioning */
.cog-comment-wrapper {
  display: block !important;
  position: relative !important;
}

/* 2. Undo all previous absolute positioning on vote/actions */
.cog-comment-wrapper .comment-actions-container,
.cog-comment-wrapper .cog-comment-actions {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-left: 0 !important;
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid var(--cog-border) !important;
  justify-content: flex-end !important;
}

/* 3. Author row: avatar + meta side by side */
.cog-comment-wrapper .comment-author {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 0 !important;
  padding-right: 0 !important;
}

/* 4. Avatar */
.cog-comment-wrapper .comment-avatar .user-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid var(--cog-border) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* 5. Meta column: vertical stack */
.cog-comment-wrapper .comment-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* 6. Name + badge titles on same line using inline flow */
.cog-comment-wrapper .cog-author-name {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  display: inline !important;
  margin-right: 4px !important;
  vertical-align: middle !important;
}
.cog-comment-wrapper .community-badge-titles {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cog-comment-wrapper .community-badge-titles li {
  display: inline-flex !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}

/* 7. Timestamp */
.cog-comment-wrapper .cog-post-date {
  font-size: 0.78rem !important;
  color: var(--cog-muted) !important;
  display: block !important;
}

/* 8. Achievement icons row */
.cog-comment-wrapper .community-badge-achievements {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
}
.cog-comment-wrapper .community-badge-achievement {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.cog-comment-wrapper .community-badge-achievement img {
  width: 20px !important;
  height: 20px !important;
}
.cog-comment-wrapper .community-badge-achievement:has(a) {
  width: auto !important;
  height: auto !important;
}

/* 9. Comment body: full width below author, no indent */
.cog-comment-wrapper .comment-body {
  display: block !important;
  padding-left: 0 !important;
  margin-top: 0.75rem !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
}

/* 10. Reply form — undo any comment-form flex interference */
.cog-reply-card .comment-form {
  display: block !important;
}
.cog-reply-card .cog-reply-body {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 0.75rem !important;
}
.cog-reply-card .cog-reply-body .comment-container {
  flex: 1 1 0 !important;
}
.cog-reply-card .comment-form-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--cog-border) !important;
}

/* =========================================================
   COMMENT CARD — final fixes
   ========================================================= */

/* Force block on the wrapper — override Zendesk's flex with high specificity */
div.comment-wrapper.cog-comment-wrapper,
.cog-comment-list .comment-wrapper {
  display: block !important;
}

/* Vote + gear: static, inside the card, right-aligned */
div.comment-wrapper.cog-comment-wrapper .comment-actions-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid var(--cog-border) !important;
  position: static !important;
}

/* Name + badge titles: truly inline on one line */
div.comment-wrapper.cog-comment-wrapper .cog-author-name,
div.comment-wrapper.cog-comment-wrapper .community-badge-titles,
div.comment-wrapper.cog-comment-wrapper .community-badge-titles li {
  display: inline !important;
  vertical-align: middle !important;
}
div.comment-wrapper.cog-comment-wrapper .community-badge-title {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}

/* Reply form: keep everything inside the card */
.cog-reply-card {
  display: block !important;
  overflow: hidden !important;
}
.cog-reply-card .comment-form {
  display: block !important;
}
.cog-reply-card .cog-reply-body {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.cog-reply-card .cog-reply-body .comment-container {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.cog-reply-card .comment-form-controls.cog-reply-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid var(--cog-border) !important;
}

/* =========================================================
   COMMENT CARD — v-final: flex column layout
   ========================================================= */

div.comment-wrapper.cog-comment-wrapper,
.cog-comment-list .comment-wrapper.cog-comment-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

div.comment-wrapper.cog-comment-wrapper > .comment-author {
  order: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--cog-border) !important;
  margin-bottom: 0 !important;
}

div.comment-wrapper.cog-comment-wrapper > .comment-body {
  order: 2 !important;
  padding-left: 0 !important;
  margin-top: 0.75rem !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  border-top: none !important;
  padding-top: 0 !important;
}

div.comment-wrapper.cog-comment-wrapper > .cog-comment-date {
  order: 3 !important;
  font-size: 0.78rem !important;
  color: var(--cog-muted) !important;
  margin-top: 0.4rem !important;
  display: block !important;
}

div.comment-wrapper.cog-comment-wrapper > .comment-actions-container {
  order: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid var(--cog-border) !important;
  position: static !important;
  top: auto !important; bottom: auto !important; right: auto !important;
}

div.comment-wrapper.cog-comment-wrapper .comment-meta .cog-post-date {
  display: none !important;
}

div.comment-wrapper.cog-comment-wrapper .comment-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-author-name {
  display: inline !important;
  margin-right: 4px !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
}
div.comment-wrapper.cog-comment-wrapper .community-badge-titles,
div.comment-wrapper.cog-comment-wrapper .community-badge-titles li {
  display: inline !important;
  vertical-align: middle !important;
}
div.comment-wrapper.cog-comment-wrapper .community-badge-title {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 4px !important;
}
/* Remove separator lines inside comment cards */
.comment-author.cog-post-author {
  border-bottom: none !important;
}

.cog-comment-body {
  border-top: none !important;
}

.cog-comment-actions {
  border-top: none !important;
}

/* Also catch Zendesk's default .comment-author border */
.comment-author {
  border-bottom: none !important;
}/* Remove the lines on comment items */
.comment {
  border-bottom: none !important;
  border-top: none !important;
}

.comment-overview {
  border-bottom: none !important;
  border-top: none !important;
}

/* Remove line under author/badges area */
.comment-author {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   COMMENT CARD — remove all separator lines
   ========================================================= */

/* Remove top and bottom border from each comment card */
.comment-list .comment,
.cog-comment-list .comment,
.comment-wrapper,
.cog-comment-wrapper {
  border-top: none !important;
  border-bottom: none !important;
}

/* Remove the border-bottom that the flex layout adds to the author row */
div.comment-wrapper.cog-comment-wrapper > .comment-author {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Remove border-top from the actions container */
div.comment-wrapper.cog-comment-wrapper > .comment-actions-container,
.cog-reply-card .comment-form-controls.cog-reply-footer,
.cog-reply-card .cog-reply-body {
  border-top: none !important;
  padding-top: 0 !important;
}

/* =========================================================
   COMMENT CARD — fix container borders (top + bottom visible)
   ========================================================= */

/* Ensure the comment card wrapper shows full rounded border */
.cog-comment-wrapper,
div.comment-wrapper.cog-comment-wrapper,
.cog-comment-list .comment-wrapper.cog-comment-wrapper {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  overflow: visible !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
}

/* Reply / new comment box */
.cog-reply-card,
.comment-form-container {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  overflow: visible !important;
  padding: 16px !important;
  background: #fff !important;
}

/* Prevent parent containers from clipping the border */
.cog-comment-list,
.comment-list {
  overflow: visible !important;
}

/* =========================================================
   COMMENT INPUT BOX — fix missing top border + match corner radius
   ========================================================= */

/* The new comment form container */
.new-comment-form-container,
.comment-form-container,
section.new-comment-form,
.cog-new-comment,
.cog-new-comment-form {
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  overflow: visible !important;
  padding: 16px !important;
  background: #fff !important;
  margin-top: 12px !important;
}

/* Match the comment card corner radius to the input box */
.cog-comment-wrapper,
div.comment-wrapper.cog-comment-wrapper,
.cog-comment-list .comment-wrapper.cog-comment-wrapper {
  border-radius: 12px !important;
}

/* Prevent any wrapper clipping the top border */
.comment-list,
.cog-comment-list,
#comments {
  overflow: visible !important;
  padding-top: 1px !important; /* prevents margin collapse eating the top border */
}

/* =========================================================
   REPLY CARD — restore cog-list-card border + radius
   (removes conflicting overrides from previous fixes)
   ========================================================= */

.cog-reply-card,
section.post-comments.cog-list-card {
  border: 1px solid #e6e8eb !important;
  border-radius: 24px !important;
  background: #fff !important;
  padding: 24px !important;
  overflow: visible !important;
}

/* Also ensure comment wrapper cards match */
.cog-comment-wrapper,
div.comment-wrapper.cog-comment-wrapper,
.cog-comment-list .comment-wrapper.cog-comment-wrapper {
  border: 1px solid #e6e8eb !important;
  border-radius: 24px !important;
  overflow: visible !important;
}

/* Prevent the list from clipping card borders */
.cog-comment-list,
#comments {
  overflow: visible !important;
  padding-top: 1px !important;
}
/* =========================================================
   COMMENT CARD — fix vote + gear icon overlap
   ========================================================= */

div.comment-wrapper.cog-comment-wrapper > .comment-actions-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Vote group: flex row so arrow, number, sit inline */
div.comment-wrapper.cog-comment-wrapper .comment-vote.cog-comment-vote {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  background: #fff !important;
}

/* Gear icon button */
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 50% !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}

/* Ensure comment wrapper is relative for absolute positioning */
div.comment-wrapper.cog-comment-wrapper {
  position: relative !important;
}

/* =========================================================
   COMMENT CARD — fix vote + gear spacing
   ========================================================= */

div.comment-wrapper.cog-comment-wrapper > .comment-actions-container {
  gap: 12px !important;
  top: 20px !important;
  right: 20px !important;
}

/* =========================================================
   COMMENT CARD — vote + gear to match post vote style
   ========================================================= */

/* Actions container: absolute top-right, vertical column */
div.comment-wrapper.cog-comment-wrapper > .comment-actions-container {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Vote group: vertical column, no pill wrapper */
div.comment-wrapper.cog-comment-wrapper .comment-vote.cog-comment-vote,
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote.vote {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

/* Up + down arrow buttons: individual bordered squares */
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up,
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-down {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up svg {
  transform: none !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up:hover,
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-down:hover {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-voted {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

/* Vote count */
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-sum {
  display: block !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  color: var(--cog-text) !important;
  text-align: center !important;
  margin: 2px 0 !important;
  line-height: 1.2 !important;
}

/* Gear: same square button style */
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions a,
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
}

div.comment-wrapper.cog-comment-wrapper .comment-actions.actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   COMMENT CARD — vote + gear to match post vote style
   ========================================================= */

/* Actions container: absolute top-right, vertical column */
div.comment-wrapper.cog-comment-wrapper > .comment-actions-container {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Vote group: vertical column, no pill wrapper */
div.comment-wrapper.cog-comment-wrapper .comment-vote.cog-comment-vote,
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote.vote {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

/* Up + down arrow buttons: individual bordered squares */
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up,
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-down {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up svg {
  transform: none !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up:hover,
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-down:hover {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-voted {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

/* Vote count */
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-sum {
  display: block !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  color: var(--cog-text) !important;
  text-align: center !important;
  margin: 2px 0 !important;
  line-height: 1.2 !important;
}

/* Gear: same square button style */
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions a,
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
}

div.comment-wrapper.cog-comment-wrapper .comment-actions.actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   COMMENT CARD — vote + gear correct order and style
   ========================================================= */

div.comment-wrapper.cog-comment-wrapper > .comment-actions-container {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Vote group: sits first (order 1) */
div.comment-wrapper.cog-comment-wrapper .comment-vote.cog-comment-vote {
  order: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

/* Gear group: sits below vote (order 2) */
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Up arrow */
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
}

/* Count */
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-sum {
  order: 2 !important;
  display: block !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  color: var(--cog-text) !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* Down arrow */
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-down {
  order: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up svg {
  transform: none !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up:hover,
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-down:hover {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-voted {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

/* Gear button */
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions a,
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
}

/* =========================================================
   COMMENT CARD — complete rewrite matching standard theme
   structure with custom theme visuals
   ========================================================= */

/* Remove all previous absolute positioning attempts */
div.comment-wrapper.cog-comment-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  position: static !important;
  border: 1px solid var(--cog-border) !important;
  border-radius: 24px !important;
  background: #fff !important;
  padding: 24px !important;
  margin-bottom: 12px !important;
  overflow: visible !important;
}

/* Comment info: takes all remaining space on the left */
div.comment-wrapper.cog-comment-wrapper > .comment-info {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: block !important;
}

/* Actions container: fixed-width column on the right */
div.comment-wrapper.cog-comment-wrapper > .comment-actions-container {
  flex: 0 0 auto !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Vote group: vertical column */
div.comment-wrapper.cog-comment-wrapper .comment-vote.cog-comment-vote,
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote.vote {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

/* Up arrow */
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up svg {
  transform: none !important;
}

/* Count */
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-sum {
  order: 2 !important;
  display: block !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  color: var(--cog-text) !important;
  text-align: center !important;
  margin: 2px 0 !important;
  line-height: 1.2 !important;
}

/* Down arrow */
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-down {
  order: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-up:hover,
div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-down:hover {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

div.comment-wrapper.cog-comment-wrapper .cog-comment-vote .vote-voted {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

/* Gear: same square button, sits below vote */
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions {
  order: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

div.comment-wrapper.cog-comment-wrapper .comment-actions.actions a,
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--cog-border) !important;
  background: #fff !important;
  color: var(--cog-muted) !important;
}

div.comment-wrapper.cog-comment-wrapper .comment-actions.actions a:hover,
div.comment-wrapper.cog-comment-wrapper .comment-actions.actions button:hover {
  border-color: var(--cog-green-2) !important;
  color: var(--cog-green) !important;
}

/* Author row inside comment-info */
div.comment-wrapper.cog-comment-wrapper .comment-author {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
}

/* Comment body */
div.comment-wrapper.cog-comment-wrapper .comment-body {
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
  border-top: none !important;
}
/* =========================================================
   COMMENT CARD — align body + timestamp with author name
   ========================================================= */

div.comment-wrapper.cog-comment-wrapper .comment-body.cog-comment-body,
div.comment-wrapper.cog-comment-wrapper .cog-post-date.cog-comment-date {
  padding-left: 46px !important;
}
/* =========================================================
   COMMENT LIST — tighten gap between cards
   ========================================================= */

#comments.cog-comment-list .comment.cog-comment {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#comments.cog-comment-list .comment-wrapper.cog-comment-wrapper,
#comments.cog-comment-list .cog-list-card {
  margin-bottom: 0px !important;
}

/* =========================================================
   COMMUNITY TOPIC PAGE — updated styles
   ========================================================= */

/* Header card — match cog-list-card */
.cog-topic-header.cog-list-card {
  margin-bottom: 18px !important;
}

.cog-topic-header-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.cog-header-desc {
  margin: 8px 0 0 !important;
  color: var(--cog-muted) !important;
  font-size: 0.95rem !important;
}

/* Move follow + new post to subnav-right */
.cog-topic-actions {
  display: inline-flex !important;
}

.cog-topic-actions button {
  appearance: none !important;
  border: 1px solid var(--cog-green) !important;
  background: #fff !important;
  color: var(--cog-green) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.cog-topic-actions button:hover {
  background: rgba(0,102,59,0.06) !important;
}

/* Post list reset */
.cog-posts-ul,
.cog-rows {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Empty state */
.cog-empty {
  padding: 40px 24px !important;
  text-align: center !important;
  color: var(--cog-muted) !important;
  font-size: 0.95rem !important;
}




/* =========================================================
   HEADER NAV — active page state (matches hover style)
   ========================================================= */

.nav-wrapper-desktop .user-nav-link.is-active,
.nav-wrapper-desktop .user-nav-link[aria-current="page"] {
  background: rgba(120, 191, 82, 0.10) !important;
  color: var(--cog-text) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Mobile active state */
.nav-wrapper-mobile .menu-list-mobile-items a.is-active,
.nav-wrapper-mobile .menu-list-mobile-items a[aria-current="page"] {
  color: var(--cog-green) !important;
  font-weight: 600 !important;
}

/* =========================================================
   ARTICLE PAGE — layout + styles matching community post
   ========================================================= */

.cog-article-page {
  padding-bottom: 28px !important;
}

/* Two-column layout: sidebar left, article right */
.cog-article-layout {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

@media (max-width: 900px) {
  .cog-article-layout {
    grid-template-columns: 1fr !important;
  }
  .cog-article-sidebar {
    order: 2 !important;
  }
  .cog-article-main {
    order: 1 !important;
  }
}

/* Sidebar sticky */
.cog-article-sidebar {
  position: sticky !important;
  top: 20px !important;
}

/* Sidebar nav links */
.cog-sidenav-link {
  display: block !important;
  padding: 8px 4px !important;
  color: var(--cog-muted) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  border-radius: 6px !important;
  transition: color .15s ease !important;
}

.cog-sidenav-link:hover {
  color: var(--cog-green) !important;
  text-decoration: none !important;
}

.cog-sidenav-link.is-active,
.cog-sidenav-link[aria-current="page"] {
  color: var(--cog-green) !important;
  font-weight: 700 !important;
}

.cog-see-more {
  display: inline-block !important;
  margin-top: 10px !important;
  font-size: 0.85rem !important;
  color: var(--cog-green) !important;
  font-weight: 600 !important;
}

/* Article card body */
.cog-article-body {
  margin-top: 24px !important;
  line-height: 1.75 !important;
  font-size: 0.95rem !important;
  color: var(--cog-text) !important;
  border-top: 1px solid var(--cog-border)
  padding-top: 24px !important;
}

.cog-article-body img {
  max-width: 100% !important;
  border-radius: 12px !important;
}

.cog-article-body h2,
.cog-article-body h3 {
  margin-top: 1.5em !important;
}

/* Comments section spacing */
.cog-article-comments {
  margin-top: 18px !important;
}

/* Comment body + timestamp indent to match community post */
.cog-article-comments .comment-body.cog-comment-body,
.cog-article-comments .cog-post-date.cog-comment-date {
  padding-left: 46px !important;
}



/* =========================================
   Recently viewed / Related articles
========================================= */

.cog-article-resources {
  display: grid;
  gap: 20px;
  margin: 28px 0 8px;
}

.cog-resource-card {
  background: #ffffff;
  border: 1px solid #dfe7e2;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.04);
}

/* Heading styling from Zendesk helper output */
.cog-resource-card h2,
.cog-resource-card h3,
.cog-resource-card .recent-articles-title,
.cog-resource-card .related-articles-title {
  margin: 0 0 16px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: #1d2733;
  letter-spacing: -0.02em;
}

/* Remove default list look */
.cog-resource-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cog-resource-card li {
  margin: 0;
  padding: 0;
}

/* Make each article link feel like a card row */
.cog-resource-card li + li {
  margin-top: 10px;
}

.cog-resource-card a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e6ece8;
  border-radius: 14px;
  background: #f8fbf9;
  color: #00663b;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

/* Little article icon */
.cog-resource-card a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 6px;
  background:
    linear-gradient(#78bf52, #78bf52) 4px 4px / 10px 2px no-repeat,
    linear-gradient(#78bf52, #78bf52) 4px 8px / 8px 2px no-repeat,
    linear-gradient(#78bf52, #78bf52) 4px 12px / 6px 2px no-repeat,
    #eaf5ee;
  border: 1px solid #d8eadf;
}

/* Arrow affordance */
.cog-resource-card a::after {
  content: "→";
  margin-left: auto;
  color: #78bf52;
  font-size: 16px;
  transition: transform 0.2s ease;
}

.cog-resource-card a:hover,
.cog-resource-card a:focus-visible {
  background: #ffffff;
  border-color: #78bf52;
  box-shadow: 0 6px 18px rgba(120, 191, 82, 0.14);
  transform: translateY(-1px);
  text-decoration: none;
}

.cog-resource-card a:hover::after,
.cog-resource-card a:focus-visible::after {
  transform: translateX(3px);
}

.cog-resource-card a:focus-visible {
  outline: 3px solid rgba(120, 191, 82, 0.2);
  outline-offset: 2px;
}

/* Optional: subtle tint difference between the two blocks */
.cog-resource-card--recent {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%);
}

.cog-resource-card--related {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
}

/* Mobile */
@media (max-width: 767px) {
  .cog-resource-card {
    padding: 18px;
    border-radius: 16px;
  }

  .cog-resource-card h2,
  .cog-resource-card h3,
  .cog-resource-card .recent-articles-title,
  .cog-resource-card .related-articles-title {
    font-size: 20px;
  }

  .cog-resource-card a {
    padding: 12px 14px;
  }
}
/* Recently viewed / related article cards */
.cog-resource-card {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #dfe7e2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.04);
}

.cog-resource-card--recent {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%);
}

.cog-resource-card--related {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
}

.cog-resource-card__header {
  margin-bottom: 18px;
}

.cog-resource-card__subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #667085;
}

.cog-resource-card__body > h2,
.cog-resource-card__body > h3,
.cog-resource-card__body .recent-articles-title,
.cog-resource-card__body .related-articles-title {
  display: none;
}

.cog-resource-card__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cog-resource-card__body li {
  margin: 0;
  padding: 0;
}

.cog-resource-card__body li + li {
  margin-top: 10px;
}

.cog-resource-card__body a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e6ece8;
  border-radius: 14px;
  background: #f8fbf9;
  color: #00663b;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cog-resource-card__body a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 6px;
  background:
    linear-gradient(#78bf52, #78bf52) 4px 4px / 10px 2px no-repeat,
    linear-gradient(#78bf52, #78bf52) 4px 8px / 8px 2px no-repeat,
    linear-gradient(#78bf52, #78bf52) 4px 12px / 6px 2px no-repeat,
    #eaf5ee;
  border: 1px solid #d8eadf;
}

.cog-resource-card__body a::after {
  content: "→";
  margin-left: auto;
  color: #78bf52;
  font-size: 16px;
  transition: transform 0.2s ease;
}

.cog-resource-card__body a:hover,
.cog-resource-card__body a:focus-visible {
  background: #ffffff;
  border-color: #78bf52;
  box-shadow: 0 6px 18px rgba(120, 191, 82, 0.14);
  transform: translateY(-1px);
  text-decoration: none;
}

.cog-resource-card__body a:hover::after,
.cog-resource-card__body a:focus-visible::after {
  transform: translateX(3px);
}

@media (max-width: 767px) {
  .cog-resource-card {
    padding: 18px;
    border-radius: 18px;
  }
}


/* ======================================
   ARTICLE PAGE — full width + spacing tidy
   ====================================== */

.cog-article-page {
  max-width: 1160px;
}

/* Make breadcrumb/search spacing feel more standard */
.cog-article-subnav {
  align-items: center;
  gap: 16px 24px;
  margin-bottom: 32px;
}

.cog-article-subnav .breadcrumbs {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.cog-article-subnav .search-container {
  flex: 0 0 320px;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
}

@media (max-width: 767px) {
  .cog-article-subnav {
    align-items: stretch;
    gap: 12px;
    margin-bottom: 24px;
  }

  .cog-article-subnav .search-container {
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0;
  }
}

/* Make article genuinely full page */
.cog-article-container.article-container {
  display: block;
  max-width: 100%;
}

.cog-article-full.article {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Optional: keep the article content in a clean readable block */
.cog-article-full .article-header,
.cog-article-full .cog-article-body,
.cog-article-full .cog-content-tags,
.cog-article-full .article-attachments,
.cog-article-full .article-footer,
.cog-article-full .article-relatives,
.cog-article-full .article-more-questions,
.cog-article-full .article-comments {
  width: 100%;
  max-width: 100%;
}

/* Add proper breathing room between body and content tags */
.cog-article-body {
  margin-bottom: 32px;
}

.cog-content-tags {
  margin-top: 0;
  margin-bottom: 32px;
  padding-top: 0;
}

/* Make tags feel a bit more intentional */
.cog-content-tags .content-tag-list {
  gap: 8px;
}

.cog-content-tags .content-tag-item {
  border: 0;
  margin: 0;
  padding: 0;
}

.cog-content-tags .content-tag-item a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(120, 191, 82, 0.10);
  color: var(--cog-green, #00663B);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
}

.cog-content-tags .content-tag-item a:hover {
  background: rgba(120, 191, 82, 0.18);
  text-decoration: none;
}

/* =========================================
   ARTICLE PAGE — force full-width single column
   ========================================= */

.cog-article-page {
  padding-bottom: 2rem !important;
}

/* Match community subnav */
.cog-article-page .sub-nav,
.cog-article-page .cog-subnav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  padding-bottom: 8px !important;
}

.cog-article-page .breadcrumbs {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.cog-article-page .cog-subnav-search {
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 320px !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .cog-article-page .sub-nav,
  .cog-article-page .cog-subnav {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  .cog-article-page .cog-subnav-search {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Kill old sidebar/grid article rules */
.cog-article-page .article-container,
.cog-article-page #article-container.article-container,
.cog-article-page .article-container.cog-article-fullwidth {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 18px 0 0 !important;
  gap: 0 !important;
}

.cog-article-page .article-sidebar {
  display: none !important;
}

.cog-article-page .article,
.cog-article-page .article.cog-article-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

/* Full-width card styling */
.cog-article-page .cog-article-card {
  padding: 28px !important;
  border-radius: 24px !important;
}

@media (max-width: 767px) {
  .cog-article-page .cog-article-card {
    padding: 20px !important;
  }
}

/* Header */
.cog-article-page .article-header.cog-post-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.cog-article-page .cog-post-title-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.cog-article-page .cog-post-title-row .cog-h1 {
  margin: 0 !important;
  flex: 1 1 auto !important;
}

/* Author row */
.cog-article-page .post-author.cog-post-author {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 20px 0 0 !important;
}

/* Body */
.cog-article-body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 24px 0 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--cog-border) !important;
  line-height: 1.75 !important;
}

.cog-article-body img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
}

/* Fix spacing before tags */
.cog-article-tags {
  margin: 0 0 28px !important;
  padding: 0 !important;
}

.cog-article-tags .content-tag-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Attachments and footer */
.cog-article-attachments {
  margin: 0 0 24px !important;
}

.cog-article-page .article-footer {
  margin-top: 8px !important;
}

/* Resource blocks under article */
.cog-article-resources {
  display: grid !important;
  gap: 20px !important;
  margin: 24px 0 0 !important;
}
/* Remove divider above article content tags */

.cog-article-page .cog-article-tags,
.cog-article-page .content-tags {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* =========================================
   Article resources — make bottom blocks feel intentional
   ========================================= */

.cog-article-resources {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 28px 0 0 !important;
}

@media (max-width: 900px) {
  .cog-article-resources {
    grid-template-columns: 1fr !important;
  }
}

.cog-resource-card {
  margin: 0 !important;
}

.cog-resource-card h2,
.cog-resource-card h3,
.cog-resource-card .recent-articles-title,
.cog-resource-card .related-articles-title {
  margin: 0 0 16px !important;
}

.cog-resource-card ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cog-resource-card li + li {
  margin-top: 10px !important;
}

.cog-resource-card a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border: 1px solid #e6ece8 !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}




/* =========================================
   Section page header — description anchored under title
   ========================================= */

.cog-page-header .cog-header-top {
  align-items: center;
}

.cog-page-header .cog-header-desc {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  font-style: normal;
  color: var(--cog-muted);
  font-size: 1rem;
  max-width: 60ch;
}

/* =========================================
   Section page — consistency fixes
   ========================================= */

/* Description sits flush under title, not italic */
.cog-page-header .cog-header-desc {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  font-style: normal;
  color: var(--cog-muted);
  font-size: 1rem;
  max-width: 60ch;
}

/* Sub-nav bottom spacing matches category page */
.cog-section-page .sub-nav,
.container > .sub-nav {
  margin-bottom: 1.25rem;
}

/* Article rows — excerpt shouldn't truncate mid-word awkwardly */
.cog-article-left .cog-list-meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Right-meta on article rows — chevron only, no badge, still consistent */
.cog-list-item .cog-right-meta {
  flex-shrink: 0;
}
/* =================================================================
   COHERENCE PASS — section, article, community pages
   Add to the bottom of style.css
   ================================================================= */

/* -----------------------------------------------------------------
   Shared: sub-nav spacing consistent across all pages
   ----------------------------------------------------------------- */

.sub-nav,
.cog-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  margin-bottom: 1.5rem;
}

.sub-nav .breadcrumbs,
.cog-subnav .breadcrumbs {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.sub-nav .search-container,
.cog-subnav .search-container {
  flex: 0 0 280px;
  max-width: 280px;
}

@media (max-width: 767px) {
  .sub-nav,
  .cog-subnav {
    flex-wrap: wrap;
  }
  .sub-nav .search-container,
  .cog-subnav .search-container {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* -----------------------------------------------------------------
   Shared: page header — title + description grounded together
   ----------------------------------------------------------------- */

.cog-page-header {
  margin-bottom: 1.5rem;
}

.cog-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cog-h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 750;
  line-height: 1.15;
  color: var(--cog-text);
}

.cog-header-desc {
  display: block;
  margin: 0.5rem 0 0;
  font-style: normal;
  color: var(--cog-muted);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 60ch;
}

/* -----------------------------------------------------------------
   Shared: featured carousel — inner wrapper consistent across pages
   The community list pages were missing .cog-featured-inner
   ----------------------------------------------------------------- */

.cog-featured {
  margin-top: 1.25rem;
}

.cog-featured-inner {
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  padding: 1.25rem;
}

.cog-featured-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cog-featured-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 750;
  color: var(--cog-text);
}

.cog-featured-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--cog-muted);
}

.cog-featured-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cog-border);
}

.cog-featured-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--cog-muted);
  min-width: 0;
  overflow: hidden;
}

.cog-featured-author {
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cog-featured-sep {
  opacity: 0.5;
}

.cog-featured-date {
  white-space: nowrap;
}

.cog-featured-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cog-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--cog-muted);
}

.cog-stat svg {
  flex-shrink: 0;
}

/* -----------------------------------------------------------------
   Shared: list card header (title + controls on one line)
   ----------------------------------------------------------------- */

.cog-list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.cog-list-card-header .cog-list-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* -----------------------------------------------------------------
   Shared: meta pills — consistent across article rows + community
   ----------------------------------------------------------------- */

.cog-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--cog-border);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--cog-muted);
  background: var(--cog-bg);
  white-space: nowrap;
}

.cog-meta-pill--stat {
  color: var(--cog-text);
}

.cog-meta-pill--pinned,
.cog-meta-pill--status {
  background: rgba(120, 191, 82, 0.1);
  border-color: rgba(120, 191, 82, 0.3);
  color: var(--cog-green);
}

/* -----------------------------------------------------------------
   Shared: status pills (post page)
   ----------------------------------------------------------------- */

.cog-post-status-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.cog-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.cog-status-pill--pinned,
.cog-status-pill--featured {
  background: rgba(120, 191, 82, 0.12);
  border-color: rgba(120, 191, 82, 0.3);
  color: var(--cog-green);
}

.cog-status-pill--pending {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.35);
  color: #92700a;
}

.cog-status-pill--official {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #1d4ed8;
}

.cog-status-pill--closed {
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.25);
  color: var(--cog-muted);
}

/* -----------------------------------------------------------------
   Section page — article rows with excerpt clamped to 2 lines
   ----------------------------------------------------------------- */

.cog-article-left .cog-list-meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
}

/* -----------------------------------------------------------------
   Article page — full-width single column
   ----------------------------------------------------------------- */

.cog-article-page {
  padding-bottom: 2rem;
}

.cog-article-container.article-container {
  display: block;
  max-width: 100%;
}

.cog-article-card.article {
  width: 100%;
  max-width: 100%;
  padding: 28px;
  border-radius: 24px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .cog-article-card.article {
    padding: 20px;
  }
}

.cog-post-header {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cog-border);
  margin-bottom: 1.25rem;
}

.cog-post-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cog-post-author {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1rem 0;
}

.cog-post-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Name + title badge on the same line */
.cog-post-meta .cog-author-name,
.cog-post-meta .community-badge-titles {
  display: inline-flex;
  align-items: center;
}

.cog-post-meta .cog-author-name {
  margin-right: 6px;
}

.cog-post-meta .community-badge-titles {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Wrap name + badge on a single flex row */
.cog-post-meta > .cog-author-name,
.cog-post-meta > .community-badge-titles {
  float: left;
}

/* Use a clearfix row approach — wrap them in a flex row */
.cog-post-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Override: name + badges share a row via a pseudo flex-row */
.cog-post-meta .cog-author-name + .community-badge-titles {
  display: inline-flex;
}

/* Actually achieve inline name+badge by making the meta a flex-wrap row 
   then pushing date/achievements to new lines */
.cog-post-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.cog-post-meta .cog-post-date,
.cog-post-meta .community-badge-achievements {
  flex-basis: 100%;
  margin-top: 2px;
}

.cog-author-name a {
  font-weight: 650;
  text-decoration: none;
  color: var(--cog-text);
}

.cog-post-date {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--cog-muted);
}

.cog-article-body {
  width: 100%;
  margin: 1.5rem 0 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cog-border);
  line-height: 1.75;
}

.cog-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* -----------------------------------------------------------------
   Community post page — layout
   ----------------------------------------------------------------- */

.cog-post-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  .cog-post-container {
    grid-template-columns: 1fr;
  }
  .cog-post-sidebar {
    order: -1;
  }
}

.cog-thread-card {
  padding: 1.5rem;
  border-radius: calc(var(--cog-radius) + 4px);
}

.cog-post-info-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 640px) {
  .cog-post-info-container {
    grid-template-columns: 1fr;
  }
}

.cog-post-body {
  padding-top: 0.5rem;
  line-height: 1.7;
}

.cog-post-body p { margin-top: 0; }
.cog-post-body img { max-width: 100%; border-radius: 12px; }

.cog-actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

/* Comment list */
.cog-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.cog-comment-wrapper {
  padding: 1.25rem;
  border-radius: calc(var(--cog-radius) + 4px);
}

.cog-official-banner {
  margin-bottom: 0.75rem;
}

.cog-comment-body {
  margin: 0.75rem 0 0.5rem;
  line-height: 1.65;
}

.cog-comment-date {
  font-size: 0.8rem;
  color: var(--cog-muted);
  margin-bottom: 0.75rem;
}

.cog-comment-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Reply form */
.cog-reply-card {
  padding: 1.5rem;
  border-radius: calc(var(--cog-radius) + 4px);
  margin-top: 1rem;
}

.cog-reply-body {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 1rem 0;
}

.cog-reply-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cog-official-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--cog-muted);
  cursor: pointer;
}

/* Sidebar */
.cog-sidebar-card {
  padding: 1.25rem;
  border-radius: calc(var(--cog-radius) + 4px);
}

.cog-sidebar-btn {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  text-align: center;
}

/* -----------------------------------------------------------------
   Community lists — subnav row consistent width
   ----------------------------------------------------------------- */

.cog-subnav-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  margin-bottom: 1.5rem;
}

.cog-subnav-left {
  flex: 1 1 auto;
  min-width: 0;
}

.cog-subnav-search {
  flex: 0 0 240px;
  max-width: 240px;
}

.cog-subnav-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 820px) {
  .cog-subnav-row {
    flex-wrap: wrap;
  }
  .cog-subnav-search {
    flex: 1 1 100%;
    max-width: none;
  }
  .cog-subnav-right {
    width: 100%;
    justify-content: flex-start;
  }
}

/* -----------------------------------------------------------------
   Community topic/post rows — desc clamped to 2 lines
   ----------------------------------------------------------------- */

.cog-row-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Internal topic row — subtle tint */
.cog-row--internal {
  background: rgba(17, 24, 39, 0.015);
}

/* -----------------------------------------------------------------
   Count badge in list card headers
   ----------------------------------------------------------------- */

.cog-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(120, 191, 82, 0.12);
  border: 1px solid rgba(120, 191, 82, 0.25);
  color: var(--cog-green);
}

/* =================================================================
   SEARCH RESULTS PAGE — cog- treatment
   Add to the bottom of style.css
   ================================================================= */

/* -----------------------------------------------------------------
   Page layout: sidebar left, results right
   ----------------------------------------------------------------- */

.cog-search-page {
  padding-bottom: 2.5rem;
}

.cog-search-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 900px) {
  .cog-search-layout {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------
   Sidebar
   ----------------------------------------------------------------- */

.cog-search-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: sticky;
  top: 1.5rem;
}

@media (max-width: 900px) {
  .cog-search-sidebar {
    position: static;
  }
}

/* Filter group (replaces .collapsible-sidebar) */
.cog-filter-group {
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.cog-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--cog-soft);
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cog-text);
  gap: 0.5rem;
  text-align: left;
}

.cog-filter-toggle:hover {
  background: rgba(120, 191, 82, 0.06);
}

.cog-filter-toggle-label {
  flex: 1;
}

/* Hide the x-icon by default, show chevron */
.cog-filter-toggle .x-icon { display: none; }
.cog-filter-toggle[aria-expanded="true"] .chevron-icon { display: none; }
.cog-filter-toggle[aria-expanded="true"] .x-icon { display: block; }

/* On desktop, always show the list */
@media (min-width: 901px) {
  .cog-filter-toggle .x-icon,
  .cog-filter-toggle .chevron-icon { display: none; }
}

.cog-filter-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

/* Collapse on mobile when aria-expanded=false */
.cog-filter-group .collapsible-sidebar-toggle[aria-expanded="false"] + .cog-filter-list {
  display: none;
}

@media (min-width: 901px) {
  .cog-filter-group .collapsible-sidebar-toggle[aria-expanded="false"] + .cog-filter-list {
    display: block;
  }
}

/* Collapsed: hide items beyond 5 */
.cog-filter-list.multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}

.cog-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  color: var(--cog-text);
  text-decoration: none;
  border-radius: 0;
  transition: background 0.12s ease;
}

.cog-filter-item:hover {
  background: rgba(120, 191, 82, 0.06);
  text-decoration: none;
}

.cog-filter-item--active {
  background: rgba(120, 191, 82, 0.1);
  color: var(--cog-green);
  font-weight: 700;
}

.cog-filter-item--active:hover {
  background: rgba(120, 191, 82, 0.15);
}

.cog-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--cog-soft);
  border: 1px solid var(--cog-border);
  color: var(--cog-muted);
  flex-shrink: 0;
}

.cog-filter-item--active .cog-filter-count {
  background: rgba(120, 191, 82, 0.15);
  border-color: rgba(120, 191, 82, 0.3);
  color: var(--cog-green);
}

.cog-filter-show-more {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-top: 1px solid var(--cog-border);
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--cog-green);
  cursor: pointer;
  text-align: left;
}

.cog-filter-show-more[aria-hidden="true"] { display: none; }
.cog-filter-show-more:hover { background: rgba(120, 191, 82, 0.04); }

/* Active tag pill */
.cog-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0.75rem;
  padding: 0.3rem 0.65rem;
  background: rgba(120, 191, 82, 0.1);
  border: 1px solid rgba(120, 191, 82, 0.3);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--cog-green);
}

.cog-active-tag a {
  display: inline-flex;
  align-items: center;
  color: var(--cog-green);
  opacity: 0.7;
}

.cog-active-tag a:hover { opacity: 1; }

/* -----------------------------------------------------------------
   Results column heading
   ----------------------------------------------------------------- */

.cog-search-heading {
  margin-bottom: 1rem;
}

.cog-search-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 750;
  color: var(--cog-text);
}

/* -----------------------------------------------------------------
   Result list
   ----------------------------------------------------------------- */

.cog-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cog-result-item {
  border-top: 1px solid var(--cog-border);
}

.cog-result-item:first-child {
  border-top: none;
}

.cog-result-card {
  padding: 1.1rem 0.25rem;
}

.cog-result-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cog-result-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
  color: var(--cog-text);
}

.cog-result-title a {
  color: var(--cog-text);
  text-decoration: none;
}

.cog-result-title a:hover {
  color: var(--cog-green);
  text-decoration: underline;
}

.cog-result-title a:visited {
  color: var(--cog-muted);
}

.cog-result-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.cog-result-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--cog-muted);
  white-space: nowrap;
}

/* Keep Zendesk's icon colour */
.search-result-votes-icon,
.search-result-meta-count-icon {
  color: var(--cog-green);
  flex-shrink: 0;
}

.cog-result-excerpt {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--cog-muted);
  line-height: 1.55;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Highlight matched terms */
.cog-result-excerpt em,
.search-result-description em {
  font-style: normal;
  font-weight: 700;
  color: var(--cog-text);
  background: rgba(120, 191, 82, 0.15);
  border-radius: 3px;
  padding: 0 2px;
}

.cog-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.cog-result-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--cog-muted);
}

.cog-result-breadcrumbs li + li::before {
  content: "›";
  margin: 0 0.3rem;
  opacity: 0.5;
}

.cog-result-breadcrumbs a {
  color: var(--cog-muted);
  text-decoration: none;
}

.cog-result-breadcrumbs a:hover {
  color: var(--cog-green);
  text-decoration: underline;
}

.cog-result-byline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cog-result-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.cog-result-type-pill--article {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
  color: #1d4ed8;
}

.cog-result-type-pill--post {
  background: rgba(120, 191, 82, 0.1);
  border-color: rgba(120, 191, 82, 0.25);
  color: var(--cog-green);
}

.cog-result-author,
.cog-result-date {
  font-size: 0.78rem;
  color: var(--cog-muted);
}

/* -----------------------------------------------------------------
   No results state
   ----------------------------------------------------------------- */

.cog-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1rem;
  gap: 0.5rem;
}

.cog-no-results svg {
  opacity: 0.5;
  margin-bottom: 0.75rem;
}

.cog-no-results-heading {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 750;
  color: var(--cog-text);
}

.cog-no-results-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cog-muted);
}

.cog-no-results-hint a {
  color: var(--cog-green);
  font-weight: 650;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cog-no-results-hint a:hover {
  text-decoration: underline;
}

/* =================================================================
   SEARCH RESULTS PAGE — cog- overrides
   Add to the bottom of style.css
   ================================================================= */

/* -----------------------------------------------------------------
   Generative answers — full width above the sidebar/results row
   ----------------------------------------------------------------- */

.cog-generative-wrap {
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Ensure the generative answers widget itself fills the wrap */
.cog-generative-wrap > * {
  width: 100%;
}

/* -----------------------------------------------------------------
   Override the base .search-results flex layout
   Keep sidebar narrower and give more room to results
   ----------------------------------------------------------------- */

.cog-search-results-wrap.search-results {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .cog-search-results-wrap.search-results {
    flex-direction: column;
  }
}

/* Sidebar: fixed narrow width, override the default flex: 0 0 20% */
.cog-search-sidebar.search-results-sidebar {
  flex: 0 0 200px;
  width: 200px;
  min-width: 200px;
  border: none;
  border-top: none;
  margin-bottom: 0;
  padding: 0;
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .cog-search-sidebar.search-results-sidebar {
    flex: none;
    width: 100%;
    min-width: 0;
    position: static;
  }
}

/* Results column: take remaining space */
.cog-search-column.search-results-column {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 900px) {
  .cog-search-column.search-results-column {
    flex: none;
    width: 100%;
  }
}

/* -----------------------------------------------------------------
   Filter groups (sidebar)
   ----------------------------------------------------------------- */

.cog-filter-group {
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  overflow: hidden;
  margin-bottom: 0.6rem;
  background: #fff;
}

.cog-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--cog-soft, #f8f8f8);
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cog-text);
  gap: 0.4rem;
  text-align: left;
  line-height: 1.2;
}

.cog-filter-toggle:hover {
  background: rgba(120, 191, 82, 0.06);
}

.cog-filter-toggle-label {
  flex: 1;
}

/* Chevron/X icon toggling */
.cog-filter-toggle .x-icon { display: none; }
.cog-filter-toggle[aria-expanded="true"] .chevron-icon { display: none; }
.cog-filter-toggle[aria-expanded="true"] .x-icon { display: block; }

/* Always show list on desktop */
@media (min-width: 901px) {
  .cog-filter-toggle .x-icon,
  .cog-filter-toggle .chevron-icon { display: none !important; }
}

/* Hide list when collapsed on mobile */
.cog-filter-group .collapsible-sidebar-toggle[aria-expanded="false"] + .cog-filter-list {
  display: none;
}

@media (min-width: 901px) {
  .cog-filter-group .collapsible-sidebar-toggle[aria-expanded="false"] + .cog-filter-list {
    display: block !important;
  }
}

/* Hide items beyond 5 when collapsed */
.cog-filter-list.multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}

.cog-filter-list {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0;
}

/* Override .search-results-sidebar .sidenav-item */
.cog-search-sidebar .cog-filter-item.sidenav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cog-text);
  text-decoration: none;
  border-radius: 0;
  background: transparent;
  margin-bottom: 0;
}

.cog-search-sidebar .cog-filter-item.sidenav-item:hover {
  background: rgba(120, 191, 82, 0.06);
  text-decoration: none;
}

.cog-search-sidebar .cog-filter-item--active.sidenav-item,
.cog-search-sidebar .cog-filter-item--active.sidenav-item:hover {
  background: rgba(120, 191, 82, 0.1);
  color: var(--cog-green);
  font-weight: 700;
}

.cog-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--cog-soft, #f5f5f5);
  border: 1px solid var(--cog-border, #eee);
  color: var(--cog-muted);
  flex-shrink: 0;
}

.cog-filter-item--active .cog-filter-count {
  background: rgba(120, 191, 82, 0.15);
  border-color: rgba(120, 191, 82, 0.3);
  color: var(--cog-green);
}

.cog-filter-show-more {
  display: block;
  width: 100%;
  padding: 0.45rem 0.85rem;
  background: none;
  border: none;
  border-top: 1px solid var(--cog-border, #eee);
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--cog-green);
  cursor: pointer;
  text-align: left;
}

.cog-filter-show-more[aria-hidden="true"] { display: none; }
.cog-filter-show-more:hover { background: rgba(120, 191, 82, 0.04); }

/* Active content tag pill */
.cog-active-tag.content-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0.6rem;
  padding: 0.25rem 0.6rem;
  background: rgba(120, 191, 82, 0.1);
  border: 1px solid rgba(120, 191, 82, 0.3);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--cog-green);
}

.cog-active-tag a {
  display: inline-flex;
  align-items: center;
  color: var(--cog-green);
  opacity: 0.7;
}

.cog-active-tag a:hover { opacity: 1; }

/* -----------------------------------------------------------------
   Results heading — override the default h1 / search-results-subheading
   ----------------------------------------------------------------- */

.cog-search-title.search-results-subheading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cog-muted);
  margin: 0 0 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--cog-border, #eee);
}

/* -----------------------------------------------------------------
   Result list — override .search-results-list
   ----------------------------------------------------------------- */

.cog-result-list.search-results-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cog-result-item {
  border-top: 1px solid var(--cog-border, #eef0f3);
}

/* Remove the old first-child top border override */
.cog-result-list.search-results-list > li:first-child {
  border-top: none;
}

.cog-result-card {
  padding: 1.1rem 0;
}

/* -----------------------------------------------------------------
   Result card internals
   ----------------------------------------------------------------- */

.cog-result-title-row.search-result-title-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cog-result-title.search-result-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
  color: var(--cog-text);
}

.cog-result-title a {
  color: var(--cog-text);
  text-decoration: none;
}

.cog-result-title a:hover {
  color: var(--cog-green);
  text-decoration: underline;
}

.cog-result-title a:visited {
  color: var(--cog-muted);
}

/* Vote/comment counts */
.cog-result-stats {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.cog-result-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--cog-muted);
  white-space: nowrap;
}

.search-result-votes-icon,
.search-result-meta-count-icon {
  color: var(--cog-green);
  flex-shrink: 0;
}

/* Excerpt — override .search-result-description */
.cog-result-excerpt.search-result-description {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  color: var(--cog-muted);
  line-height: 1.55;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Highlight matched terms */
.cog-result-excerpt em,
.search-result-description em {
  font-style: normal;
  font-weight: 700;
  color: var(--cog-text);
  background: rgba(120, 191, 82, 0.15);
  border-radius: 3px;
  padding: 0 2px;
}

/* Meta row — override .search-result-meta-container */
.cog-result-meta.search-result-meta-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
  flex-direction: row; /* override the default column */
}

@media (max-width: 600px) {
  .cog-result-meta.search-result-meta-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Breadcrumbs — override .search-result-breadcrumbs */
.cog-result-breadcrumbs.search-result-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--cog-muted);
  gap: 0;
}

.cog-result-breadcrumbs li + li::before {
  content: "›";
  margin: 0 0.3rem;
  opacity: 0.4;
}

.cog-result-breadcrumbs a {
  color: var(--cog-muted);
  text-decoration: none;
}

.cog-result-breadcrumbs a:hover {
  color: var(--cog-green);
  text-decoration: underline;
}

/* Byline — right side of meta row */
.cog-result-byline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cog-result-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cog-result-type-pill--article {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
  color: #1d4ed8;
}

.cog-result-type-pill--post {
  background: rgba(120, 191, 82, 0.1);
  border-color: rgba(120, 191, 82, 0.25);
  color: var(--cog-green);
}

/* Override .meta-data spacing that was adding left margin */
.cog-result-meta .meta-data {
  font-size: 0.78rem;
  color: var(--cog-muted);
  margin: 0; /* reset the ::after separator Zendesk adds */
}

.cog-result-meta .meta-data::after {
  content: none;
}

/* -----------------------------------------------------------------
   No results state
   ----------------------------------------------------------------- */

.cog-no-results.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1rem;
  gap: 0.4rem;
}

.cog-no-results svg {
  opacity: 0.45;
  margin-bottom: 0.75rem;
}

.cog-no-results-heading.headline {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  color: var(--cog-text);
}

.cog-no-results-hint.action-prompt {
  margin: 0;
  font-size: 0.88rem;
  color: var(--cog-muted);
}

.cog-no-results-hint a {
  color: var(--cog-green);
  font-weight: 650;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cog-no-results-hint a:hover { text-decoration: underline; }

.sub-nav,
.cog-subnav {
  margin-bottom: 1.5rem !important;
}

/* =================================================================
   SEARCH RESULTS PAGE — cog- overrides
   Add to the bottom of style.css
   ================================================================= */

/* -----------------------------------------------------------------
   Generative answers — full width above the sidebar/results row
   ----------------------------------------------------------------- */

.cog-generative-wrap {
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Ensure the generative answers widget itself fills the wrap */
.cog-generative-wrap > * {
  width: 100%;
}

/* -----------------------------------------------------------------
   Override the base .search-results flex layout
   Keep sidebar narrower and give more room to results
   ----------------------------------------------------------------- */

.cog-search-results-wrap.search-results {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .cog-search-results-wrap.search-results {
    flex-direction: column;
  }
}

/* Sidebar: fixed narrow width, override the default flex: 0 0 20% */
.cog-search-sidebar.search-results-sidebar {
  flex: 0 0 200px;
  width: 200px;
  min-width: 200px;
  border: none;
  border-top: none;
  margin-bottom: 0;
  padding: 0;
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .cog-search-sidebar.search-results-sidebar {
    flex: none;
    width: 100%;
    min-width: 0;
    position: static;
  }
}

/* Results column: take remaining space */
.cog-search-column.search-results-column {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 900px) {
  .cog-search-column.search-results-column {
    flex: none;
    width: 100%;
  }
}

/* -----------------------------------------------------------------
   Filter groups (sidebar)
   ----------------------------------------------------------------- */

.cog-filter-group {
  border: 1px solid var(--cog-border, #e6e8eb);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: #fff;
}

/* Header label — flush top, no gap below, looks like a section label not a pill */
.cog-filter-group .cog-filter-toggle {
  border-bottom: 1px solid var(--cog-border, #e6e8eb);
  border-radius: 0;
  margin-bottom: 0;
}

/* list padding handled by the .cog-filter-list rule below */

.cog-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: var(--cog-soft, #f5f7f5);
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cog-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  gap: 0.4rem;
  text-align: left;
  line-height: 1.2;
  border-radius: 0;
}

.cog-filter-toggle:hover {
  background: rgba(120, 191, 82, 0.06);
}

.cog-filter-toggle-label {
  flex: 1;
}

/* Hide chevron icons on desktop */
@media (min-width: 901px) {
  .cog-filter-toggle .chevron-icon,
  .cog-filter-toggle .x-icon { display: none !important; }
}

/* Mobile: chevron visible, x only when expanded */
@media (max-width: 900px) {
  .cog-filter-toggle .x-icon { display: none; }
  .cog-filter-toggle[aria-expanded="true"] .chevron-icon { display: none; }
  .cog-filter-toggle[aria-expanded="true"] .x-icon { display: block; }
}

/* Desktop: ALWAYS show list regardless of aria-expanded */
@media (min-width: 901px) {
  .cog-search-sidebar .multibrand-filter-list,
  .cog-search-sidebar .cog-filter-list {
    display: block !important;
  }
}

/* Mobile: respect aria-expanded toggle */
@media (max-width: 900px) {
  .cog-filter-group .collapsible-sidebar-toggle[aria-expanded="false"] ~ .cog-filter-list {
    display: none;
  }
  .cog-filter-group .collapsible-sidebar-toggle[aria-expanded="true"] ~ .cog-filter-list {
    display: block;
  }
}

/* Hide items beyond 5 */
.cog-search-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}

.cog-filter-list {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0;
}

/* Kill the Zendesk base .collapsible-sidebar constraints inside our sidebar.
   The base sets max-height:45px (mobile clip) and padding:10px 0 on the group,
   which creates the empty gap between the header and items. */
.cog-search-sidebar .cog-filter-group.collapsible-sidebar {
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
}

/* The base .collapsible-sidebar-title adds margin-top — our ul has this class */
.cog-search-sidebar .cog-filter-list.sidenav-title {
  margin-top: 0 !important;
}

/* Remove the absolute positioning Zendesk puts on the toggle button */
.cog-search-sidebar .cog-filter-toggle.collapsible-sidebar-toggle {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
}

/* Override .search-results-sidebar .sidenav-item */
.cog-search-sidebar .cog-filter-item.sidenav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--cog-text);
  text-decoration: none;
  border-radius: 0;
  background: transparent;
  margin-bottom: 0;
}

.cog-search-sidebar .cog-filter-item.sidenav-item:hover {
  background: rgba(120, 191, 82, 0.06);
  text-decoration: none;
}

.cog-search-sidebar .cog-filter-item--active.sidenav-item,
.cog-search-sidebar .cog-filter-item--active.sidenav-item:hover {
  background: rgba(120, 191, 82, 0.1);
  color: var(--cog-green);
  font-weight: 700;
}

.cog-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--cog-soft, #f5f5f5);
  border: 1px solid var(--cog-border, #eee);
  color: var(--cog-muted);
  flex-shrink: 0;
}

.cog-filter-item--active .cog-filter-count {
  background: rgba(120, 191, 82, 0.15);
  border-color: rgba(120, 191, 82, 0.3);
  color: var(--cog-green);
}

.cog-filter-show-more {
  display: block;
  width: 100%;
  padding: 0.45rem 0.85rem;
  background: none;
  border: none;
  border-top: 1px solid var(--cog-border, #eee);
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--cog-green);
  cursor: pointer;
  text-align: left;
}

.cog-filter-show-more[aria-hidden="true"] { display: none; }
.cog-filter-show-more:hover { background: rgba(120, 191, 82, 0.04); }

/* Active content tag pill */
.cog-active-tag.content-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0.6rem;
  padding: 0.25rem 0.6rem;
  background: rgba(120, 191, 82, 0.1);
  border: 1px solid rgba(120, 191, 82, 0.3);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--cog-green);
}

.cog-active-tag a {
  display: inline-flex;
  align-items: center;
  color: var(--cog-green);
  opacity: 0.7;
}

.cog-active-tag a:hover { opacity: 1; }

/* -----------------------------------------------------------------
   Results heading — override the default h1 / search-results-subheading
   ----------------------------------------------------------------- */

.cog-search-title.search-results-subheading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cog-muted);
  margin: 0 0 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--cog-border, #eee);
}

/* -----------------------------------------------------------------
   Result list — override .search-results-list
   ----------------------------------------------------------------- */

.cog-result-list.search-results-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cog-result-item {
  border-top: 1px solid var(--cog-border, #eef0f3);
}

/* Remove the old first-child top border override */
.cog-result-list.search-results-list > li:first-child {
  border-top: none;
}

.cog-result-card {
  padding: 1.1rem 0;
}

/* -----------------------------------------------------------------
   Result card internals
   ----------------------------------------------------------------- */

.cog-result-title-row.search-result-title-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cog-result-title.search-result-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
  color: var(--cog-text);
}

.cog-result-title a {
  color: var(--cog-text);
  text-decoration: none;
}

.cog-result-title a:hover {
  color: var(--cog-green);
  text-decoration: underline;
}

.cog-result-title a:visited {
  color: var(--cog-muted);
}

/* Vote/comment counts */
.cog-result-stats {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.cog-result-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--cog-muted);
  white-space: nowrap;
}

.search-result-votes-icon,
.search-result-meta-count-icon {
  color: var(--cog-green);
  flex-shrink: 0;
}

/* Excerpt — override .search-result-description */
.cog-result-excerpt.search-result-description {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  color: var(--cog-muted);
  line-height: 1.55;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Highlight matched terms */
.cog-result-excerpt em,
.search-result-description em {
  font-style: normal;
  font-weight: 700;
  color: var(--cog-text);
  background: rgba(120, 191, 82, 0.15);
  border-radius: 3px;
  padding: 0 2px;
}

/* Meta row — override .search-result-meta-container */
.cog-result-meta.search-result-meta-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
  flex-direction: row; /* override the default column */
}

@media (max-width: 600px) {
  .cog-result-meta.search-result-meta-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Breadcrumbs — override .search-result-breadcrumbs */
.cog-result-breadcrumbs.search-result-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--cog-muted);
  gap: 0;
}

.cog-result-breadcrumbs li + li::before {
  content: "›";
  margin: 0 0.3rem;
  opacity: 0.4;
}

.cog-result-breadcrumbs a {
  color: var(--cog-muted);
  text-decoration: none;
}

.cog-result-breadcrumbs a:hover {
  color: var(--cog-green);
  text-decoration: underline;
}

/* Byline — right side of meta row */
.cog-result-byline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cog-result-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cog-result-type-pill--article {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
  color: #1d4ed8;
}

.cog-result-type-pill--post {
  background: rgba(120, 191, 82, 0.1);
  border-color: rgba(120, 191, 82, 0.25);
  color: var(--cog-green);
}

/* Override .meta-data spacing that was adding left margin */
.cog-result-meta .meta-data {
  font-size: 0.78rem;
  color: var(--cog-muted);
  margin: 0; /* reset the ::after separator Zendesk adds */
}

.cog-result-meta .meta-data::after {
  content: none;
}

/* -----------------------------------------------------------------
   No results state
   ----------------------------------------------------------------- */

.cog-no-results.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1rem;
  gap: 0.4rem;
}

.cog-no-results svg {
  opacity: 0.45;
  margin-bottom: 0.75rem;
}

.cog-no-results-heading.headline {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  color: var(--cog-text);
}

.cog-no-results-hint.action-prompt {
  margin: 0;
  font-size: 0.88rem;
  color: var(--cog-muted);
}

.cog-no-results-hint a {
  color: var(--cog-green);
  font-weight: 650;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cog-no-results-hint a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------
   Sub-nav: ensure consistent bottom gap on EVERY page
   The later rewrite at ~line 7023 strips margin-bottom — restore it.
   ----------------------------------------------------------------- */

.sub-nav,
.cog-subnav {
  margin-bottom: 1.5rem !important;
}

/* =================================================================
   REMAINING PAGES — activities, error, footer, youtube category
   Add to the bottom of style.css
   ================================================================= */

/* -----------------------------------------------------------------
   My Activities nav bar (contributions + subscriptions pages)
   ----------------------------------------------------------------- */

.cog-activities-nav {
  background: var(--cog-soft, #f8f8f8);
  border-bottom: 1px solid var(--cog-border, #e6e8eb);
  margin-bottom: 0;
}

.cog-activities-nav .container {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.cog-activities-nav .cog-toggle {
  display: flex;
  gap: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.cog-activities-nav .cog-toggle-btn {
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cog-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  transition: color 0.15s, border-color 0.15s;
}

.cog-activities-nav .cog-toggle-btn:hover {
  color: var(--cog-text);
}

.cog-activities-nav .cog-toggle-btn.is-active {
  color: var(--cog-green);
  border-bottom-color: var(--cog-green);
  background: none;
}

/* -----------------------------------------------------------------
   Activities page container
   ----------------------------------------------------------------- */

.cog-activities-page {
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
}

.cog-activities-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cog-activities-header .cog-h1 {
  margin: 0;
}

.cog-activities-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cog-activities-filters .cog-toggle-btn {
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 650;
  border-radius: 999px;
  border: 1px solid var(--cog-border);
  color: var(--cog-muted);
  text-decoration: none;
  background: #fff;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.cog-activities-filters .cog-toggle-btn:hover {
  border-color: var(--cog-green);
  color: var(--cog-green);
}

.cog-activities-filters .cog-toggle-btn.is-active {
  background: rgba(120, 191, 82, 0.1);
  border-color: rgba(120, 191, 82, 0.3);
  color: var(--cog-green);
  font-weight: 700;
}

.cog-activities-dropdown {
  flex-shrink: 0;
}

/* User-type subscription rows */
.cog-activities-user-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cog-activities-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cog-border);
  flex-shrink: 0;
}

.cog-activities-subscribe {
  flex-shrink: 0;
  margin-left: auto;
}

/* -----------------------------------------------------------------
   Error page
   ----------------------------------------------------------------- */

.cog-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 1rem 5rem;
  gap: 0.5rem;
}

.cog-error-icon {
  color: var(--cog-muted);
  margin-bottom: 1rem;
  opacity: 0.6;
}

.cog-error-title {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 750;
  color: var(--cog-text);
}

.cog-error-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.cog-error-message {
  margin: 0;
  font-size: 1.05rem;
  color: var(--cog-text);
  font-weight: 500;
}

.cog-error-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cog-muted);
}

.cog-error-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* -----------------------------------------------------------------
   Footer
   ----------------------------------------------------------------- */

.cog-footer {
  margin-top: 3rem;
  background: var(--cog-soft, #f8f9fa);
  border-top: 1px solid var(--cog-border, #e6e8eb);
}

.cog-footer-inner {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  padding: 2.5rem var(--container-padding, 2rem);
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
}

@media (max-width: 640px) {
  .cog-footer-inner {
    flex-direction: column;
    gap: 2rem;
  }
}

.cog-footer-col {
  flex: 1 1 160px;
}

.cog-footer-title {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cog-muted);
}

.cog-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cog-footer-links a {
  font-size: 0.9rem;
  color: var(--cog-text);
  text-decoration: none;
  opacity: 0.8;
}

.cog-footer-links a:hover {
  opacity: 1;
  color: var(--cog-green);
}

.cog-footer-bottom {
  border-top: 1px solid var(--cog-border, #e6e8eb);
  padding: 1rem var(--container-padding, 2rem);
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  font-size: 0.8rem;
  color: var(--cog-muted);
}

/* -----------------------------------------------------------------
   YouTube category page
   ----------------------------------------------------------------- */

.category-custom-youtube {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.category-custom-youtube__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.category-custom-youtube__item {
  background: #fff;
  border: 1px solid var(--cog-border);
  border-radius: calc(var(--cog-radius) + 4px);
  overflow: hidden;
}

.category-custom-youtube__video {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
}

.category-custom-youtube__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.category-custom-youtube__item-title {
  margin: 0.85rem 1rem 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cog-text);
}

.category-custom-youtube__item-text {
  margin: 0 1rem 1rem;
  font-size: 0.88rem;
  color: var(--cog-muted);
  line-height: 1.5;
}

/* -----------------------------------------------------------------
   Request status pill colour variants
   ----------------------------------------------------------------- */

.cog-status-pill--new,
.cog-status-pill--open {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
  color: #1d4ed8;
}

.cog-status-pill--solved {
  background: rgba(120, 191, 82, 0.1);
  border-color: rgba(120, 191, 82, 0.25);
  color: var(--cog-green);
}

.cog-status-pill--closed {
  background: rgba(107, 114, 128, 0.08);
  border-color: rgba(107, 114, 128, 0.2);
  color: var(--cog-muted);
}

.cog-status-pill--hold,
.cog-status-pill--pending {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.3);
  color: #92700a;
}

/* Closed request row — muted title */
.cog-requests-page .cog-row.is-closed .cog-row-title {
  opacity: 0.55;
}






/* =================================================================
   Background colour override — #f9fafb
   ================================================================= */

html,
body {
  background-color: #f9fafb !important;
}

/* Main content wrapper */
body > main,
.main-content,
.container-divider {
  background-color: #f9fafb;
}

/* Ensure hero and full-bleed sections don't leave white strips */
.section.hero,
.cog-home-section:not(.cog-home-section--tinted) {
  background-color: #f9fafb;
}

/* Cards stay white so they lift off the grey page */
.cog-list-card,
.cog-featured-inner,
.cog-filter-group,
.cog-thread-card,
.cog-comment-wrapper,
.cog-reply-card,
.cog-sidebar-card,
.cog-article-card,
.cog-profile-header-card {
  background-color: #ffffff;
}

/* Tinted home section stays slightly darker than the page */
.cog-home-section--tinted {
  background-color: #f1f3f5;
}

/* Footer sits on the same grey as the page */
.cog-footer,
.footer {
  background-color: #f1f3f5;
}

.cog-logo {
  height: 32px;
  width: auto;
}
/* Home page search bar (replaces hero) */
.cog-home-search-wrap {
  background: #fff;
  border-bottom: 1px solid var(--cog-border, #e6e8eb);
  padding: 2.5rem 0 2rem;
}

.cog-home-search {
  width: 100%;
}

.cog-home-search-pill-wrap {
  max-width: 680px;
}

.cog-introduce-row {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--cog-muted, #6b7280);
}

.cog-introduce-link {
  color: var(--cog-green);
  text-decoration: none;
  font-weight: 500;
}

.cog-introduce-link:hover {
  text-decoration: underline;
}

.cog-introduce-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cog-muted, #6b7280);
  max-width: 560px;
  line-height: 1.5;
}

.cog-introduce-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid var(--cog-border);
  background: #ffffff;
  color: var(--cog-text);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.cog-introduce-btn:hover {
  border-color: var(--cog-green);
  background: var(--cog-green);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 600px) {
  .cog-introduce-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .cog-home-search-pill-wrap {
    max-width: 100%;
  }
  .cog-introduce-btn {
    justify-content: center;
    align-self: stretch;
    text-align: center;
  }
}

.cog-home-search-label {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 750;
  color: var(--cog-text);
}

.cog-home-search-inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  background: #ffffff;
  border: 1.5px solid var(--cog-border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cog-home-search-inner:focus-within {
  border-color: var(--cog-green);
  box-shadow: 0 0 0 3px rgba(120, 191, 82, 0.15);
}

.cog-home-search-icon {
  position: absolute;
  left: 1rem;
  color: var(--cog-muted);
  pointer-events: none;
  z-index: 1;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Target the actual input Zendesk renders inside the search form */
.cog-home-search-inner .search-full input[type="search"],
.cog-home-search-inner .search-full input[type="text"] {
  width: 100%;
  height: 100%;
  padding: 0 1.5rem 0 3rem;
  font-size: 1rem;
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--cog-text);
}

.cog-home-search-inner .search-full {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Kill the old hero styles so they don't bleed through */
.section.hero { display: none; }

.cog-home-search-wrap {
  background: #f9fafb;
  border-bottom: 1px solid var(--cog-border, #e6e8eb);
  padding: 2.5rem 0 2rem;
}
.cog-home-search-wrap {
  background: #f9fafb;
  border-bottom: none;
  padding: 2.5rem 0 2rem;
}

.cog-home-search-icon {
  width: 22px;
  height: 22px;
  left: 1.1rem;
}

/* =========================
   RECENTLY UPDATED CAROUSEL
   ========================= */

.cog-carousel-section {
  position: relative;
}

.cog-carousel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cog-carousel-head .cog-home-title,
.cog-carousel-head .cog-home-subtitle {
  margin-bottom: 0;
}

.cog-carousel-controls {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-self: center;
}

/* Native scroll track — matches .cog-featured-track pattern */
.cog-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.75rem; /* bottom padding for scrollbar gap */
  cursor: grab;
}

.cog-carousel-track:active {
  cursor: grabbing;
}

.cog-carousel-track::-webkit-scrollbar {
  height: 6px;
}

.cog-carousel-track::-webkit-scrollbar-thumb {
  background: var(--cog-border);
  border-radius: 999px;
}

.cog-carousel-track::-webkit-scrollbar-track {
  background: transparent;
}

.cog-carousel-loading {
  color: var(--cog-muted);
  font-size: 0.9rem;
  padding: 1rem 0;
}

.cog-carousel-item {
  scroll-snap-align: start;
  min-width: 0;
}

.cog-carousel-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1rem;
  background: var(--cog-bg);
  border: 1px solid var(--cog-border);
  border-radius: var(--cog-radius);
  text-decoration: none !important;
  color: var(--cog-text);
  height: 100%;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.cog-carousel-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: var(--cog-green);
}

.cog-carousel-card-icon {
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.cog-carousel-card-title {
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--cog-text);
  flex: 1;
}

.cog-carousel-card-date {
  font-size: 0.78rem;
  color: var(--cog-muted);
}

.cog-carousel-card-cta {
  font-size: 0.8rem;
  color: var(--cog-green);
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Prev / Next buttons */
.cog-carousel-btn {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--cog-border);
  background: var(--cog-bg);
  color: var(--cog-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cog-carousel-btn:hover {
  background: var(--cog-soft);
  border-color: var(--cog-green);
  color: var(--cog-green);
}
.cog-carousel-card-type {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  align-self: flex-start;
}

.cog-carousel-card-type--article {
  background: rgba(0, 102, 59, 0.08);
  color: var(--cog-green);
}

.cog-carousel-card-type--post {
  background: rgba(59, 91, 219, 0.08);
  color: #3b5bdb;
}

/* ==========================================================
   COMMENT THREAD — definitive spacing + gear fix
   All rules placed last to win specificity wars
   ========================================================== */

/* --- Gap between cards --- */
#comments.comment-list,
.cog-comment-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 4px !important;
  padding: 0 !important;
  list-style: none !important;
}

.cog-comment-list li.comment,
#comments li.comment {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Card padding --- */
.cog-comment-wrapper,
div.comment-wrapper.cog-comment-wrapper {
  padding: 12px 14px !important;
  margin-bottom: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #e6e8eb !important;
  background: #fff !important;
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- Author row --- */
.cog-comment-wrapper .comment-author.cog-post-author {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
  padding-right: 90px !important; /* room for gear + vote top-right */
}

/* --- Comment body --- */
.cog-comment-wrapper .comment-body.cog-comment-body {
  margin: 4px 0 !important;
  padding: 0 !important;
  padding-left: 46px !important; /* indent under avatar */
}

/* --- Timestamp --- */
.cog-comment-wrapper .cog-post-date.cog-comment-date {
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  padding-left: 46px !important;
  font-size: 0.76rem !important;
  color: #9ca3af !important;
}

/* --- Actions container: pin to top-right of card --- */
.cog-comment-wrapper .comment-actions-container.cog-comment-actions {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* --- Vote pill --- */
.cog-comment-wrapper .comment-vote.cog-comment-vote {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  background: #fff !important;
}

/* --- GEAR ICON: force visible --- */
.cog-comment-wrapper .comment-actions.actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 50% !important;
  background: #fff !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.cog-comment-wrapper .comment-actions.actions button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: #6b7280 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.cog-comment-wrapper .comment-actions.actions button svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
}

/* Gear hover */
.cog-comment-wrapper .comment-actions.actions:hover {
  border-color: var(--cog-green, #00663b) !important;
  color: var(--cog-green, #00663b) !important;
}

/* --- Reply form spacing --- */
.post-comments.cog-reply-card,
section.post-comments.cog-list-card {
  margin-top: 8px !important;
  padding: 16px !important;
}
/* Hide vote widget on comments entirely */
.cog-comment-wrapper .comment-vote.cog-comment-vote,
.cog-comment-list .vote.cog-comment-vote {
  display: none !important;
}/* Hide comment vote widgets — all possible selectors */
#comments .vote,
#comments .comment-vote,
#comments .cog-comment-vote,
#comments .vote-up,
#comments .vote-down,
#comments .vote-sum,
.comment-list .vote,
.comment-list .comment-vote,
.cog-comment-list .vote,
.comment-actions-container .vote,
.cog-comment-actions .vote {
  display: none !important;
}

.cog-header-desc {
  max-width: 100%;
}

ol.breadcrumbs a {
  color: #1f7a6e !important;
}

ol.breadcrumbs li:last-child,
ol.breadcrumbs li:last-child a {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ── Admin weekly summary button (new_community_post_page) ─────────────────── */

.cog-admin-summary-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.cog-admin-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: #1f7a6e;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s;
  white-space: nowrap;
}

.cog-admin-summary-btn:hover:not(:disabled) {
  background: #175f55;
}

.cog-admin-summary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cog-admin-summary-btn svg {
  flex-shrink: 0;
}

.cog-summary-status {
  font-size: 13px;
  color: #666;
  font-style: italic;
}

.cog-summary-status.is-error {
  color: #c0392b;
  font-style: normal;
  font-weight: 500;
}


/* ── New post header — guidelines & support links ──────────────────────────── */

.cog-header-link {
  color: #1f7a6e;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cog-header-link:hover {
  color: #175f55;
}

.cog-header-support {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 7px 12px;
  background: #f0f7f6;
  border: 1px solid #c8e0dd;
  border-radius: 6px;
  font-size: 0.875em;
  color: #444;
  width: fit-content;
}

.cog-header-link--support {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  text-decoration: none;
  color: #1f7a6e;
}

.cog-header-link--support:hover {
  color: #175f55;
  text-decoration: underline;
}

.cog-header-link--support svg {
  flex-shrink: 0;
}


/* ── Community post — topic follow nudge banner ────────────────────────────── */

.cog-topic-follow-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 12px 0 4px;
  background: #f0f7f6;
  border: 1px solid #c8e0dd;
  border-radius: 8px;
  font-size: 0.875em;
  color: #444;
  flex-wrap: wrap;
}

.cog-topic-follow-banner svg {
  flex-shrink: 0;
  color: #1f7a6e;
}

.cog-topic-follow-banner span {
  flex: 1 1 200px;
  line-height: 1.4;
}

.cog-topic-follow-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-weight: 600;
  color: #1f7a6e;
  text-decoration: none;
  padding: 5px 12px;
  border: 1.5px solid #1f7a6e;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.cog-topic-follow-link:hover {
  background: #1f7a6e;
  color: #fff;
}

.cog-topic-follow-link:hover svg {
  color: #fff;
}


/* ── Topic page — follow button highlight (arriving from post banner) ────────── */

@keyframes cog-follow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31, 122, 110, 0.5); }
  50%  { box-shadow: 0 0 0 8px rgba(31, 122, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 122, 110, 0); }
}

.cog-follow-highlight {
  border-radius: 999px;
  animation: cog-follow-pulse 1s ease-out 3;
  outline: 2px solid #1f7a6e;
  outline-offset: 3px;
  transition: outline 0.3s;
}


/* ── Admin bar — label + feature button variant ────────────────────────────── */

.cog-admin-bar-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  white-space: nowrap;
  padding-right: 4px;
}

.cog-admin-summary-btn--feature {
  background: #175f55;
}

.cog-admin-summary-btn--feature:hover:not(:disabled) {
  background: #0f4840;
}

.cog-admin-summary-btn--kb {
  background: #2c5f8a;
}

.cog-admin-summary-btn--kb:hover:not(:disabled) {
  background: #1e4166;
}
.cog-admin-summary-btn--engaged {
  background: #7a4f1f;
}

.cog-admin-summary-btn--engaged:hover:not(:disabled) {
  background: #5c3a15;
}

.cog-admin-summary-btn--yswd {
  background: #1f5a7a;
}

.cog-admin-summary-btn--yswd:hover:not(:disabled) {
  background: #174260;
}

/* ── Community rank banner ──────────────────────────────────────────────────── */

.cog-rank-banner {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 7px 5%;
  background: #f8f8f8;
  border-bottom: 1px solid #ddd;
  font-size: 12.5px;
  color: #555;
  flex-wrap: wrap;
  margin-bottom: 16px;
  overflow: visible;
}

@media (min-width: 1160px) {
  .cog-rank-banner {
    padding: 7px calc(50% - 580px);
  }
}

.cog-rank-banner.is-loaded {
  display: flex;
}

.cog-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Tier colours — toned down to sit within the light site theme */
.cog-rank-badge--1 { background: #f0f0f0; color: #666; border-color: #ddd; }
.cog-rank-badge--2 { background: #e6f4f1; color: #1f6b5e; border-color: #b2d8d2; }
.cog-rank-badge--3 { background: #e8f5eb; color: #2a7a3e; border-color: #aad6b4; }
.cog-rank-badge--4 { background: #f0fae6; color: #4a8a20; border-color: #c0e090; }
.cog-rank-badge--5 { background: #fff; color: #333; border-color: #bbb; font-weight: 700; }

.cog-rank-divider {
  color: #ddd;
  font-size: 13px;
}

.cog-rank-next {
  color: #777;
  flex: 1;
  min-width: 0;
}

.cog-rank-next strong {
  color: #333;
}

.cog-rank-progress-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cog-rank-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  color: #555;
}

.cog-rank-pill .met {
  color: #2a7a3e;
  font-weight: 600;
}

.cog-rank-pill .unmet {
  color: #999;
}

.cog-rank-pill .need {
  color: #b06000;
  font-weight: 500;
}

.cog-rank-champion {
  color: #2a7a3e;
  font-weight: 500;
}

.cog-rank-pending {
  color: #7a5c00;
  font-weight: 500;
  background: #fffbea;
  border: 1px solid #f0d060;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
}

/* ── Rank tier track ── */
.cog-rank-label {
  font-size: 11.5px;
  color: #999;
  font-weight: 400;
  margin-right: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cog-rank-badge-current {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #1f6b5e;
  border-radius: 20px;
  padding: 2px 10px;
  margin-right: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  cursor: default;
}

.cog-rank-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  border-left: 1px solid #ddd;
  padding-left: 10px;
  margin-left: 2px;
}

.cog-rank-step {
  font-size: 11.5px;
  padding: 2px 0;
  white-space: nowrap;
  transition: color 0.15s;
}

.cog-rank-step.is-past {
  color: #bbb;
}

.cog-rank-step.is-current {
  font-weight: 700;
  color: #1f6b5e;
}

.cog-rank-step.is-next {
  color: #555;
  font-weight: 500;
}

.cog-rank-step.is-future {
  color: #ccc;
}

.cog-rank-step-sep {
  color: #ccc;
  font-size: 13px;
  padding: 0 4px;
  line-height: 1;
}



/* ── Community post page — restored layout ─────────────────────────────────── */

.cog-post-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 28px 32px;
  margin: 18px 0;
}

.cog-post-card .cog-post-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.cog-post-card .cog-post-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.cog-post-card .cog-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cog-post-card .cog-post-body {
  line-height: 1.7;
  color: #333;
  font-size: 15px;
}

.cog-post-card .cog-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.cog-comments-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 28px 32px;
  margin: 0 0 18px 0;
}

.cog-comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.cog-comment {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid #f0f0f0;
}

.cog-comment:last-child {
  border-bottom: none;
}

.cog-comment-avatar-wrap {
  flex-shrink: 0;
}

.cog-comment-avatar-wrap .cog-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.cog-comment-body-wrap {
  flex: 1;
  min-width: 0;
}

.cog-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.cog-comment-author {
  font-weight: 600;
  color: #1a1a1a;
  font-size: 13px;
}

.cog-comment-date {
  font-size: 12px;
  color: #999;
}

.cog-comment-body {
  font-size: 14px;
  line-height: 1.65;
  color: #333;
}

.cog-new-comment {
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.cog-reply-footer {
  margin-top: 12px;
}

/* ── Rank banner tooltips ── */
.cog-rank-step[data-cog-tooltip],
.cog-rank-badge-current[data-cog-tooltip] {
  position: relative;
  cursor: default;
}

/* tooltip box — appears BELOW since banner is at top of page */
.cog-rank-step[data-cog-tooltip]::after,
.cog-rank-badge-current[data-cog-tooltip]::after {
  content: attr(data-cog-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 9999;
}

/* arrow pointing UP toward the banner */
.cog-rank-step[data-cog-tooltip]::before,
.cog-rank-badge-current[data-cog-tooltip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #1a1a1a;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 9999;
}

.cog-rank-step[data-cog-tooltip]:hover::after,
.cog-rank-badge-current[data-cog-tooltip]:hover::after,
.cog-rank-step[data-cog-tooltip]:hover::before,
.cog-rank-badge-current[data-cog-tooltip]:hover::before {
  opacity: 1;
}

/* ── Rank banner learn more link ── */
.cog-rank-learn-more {
  margin-left: auto;
  font-size: 11.5px;
  color: #888;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.cog-rank-learn-more:hover {
  color: #1f6b5e;
  text-decoration: underline;
}

/* ── Community post page: name + impact level badge on same line ── */
.cog-thread-card .cog-post-meta,
.cog-comment-wrapper .cog-post-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
}

.cog-thread-card .cog-post-meta .cog-post-date,
.cog-thread-card .cog-post-meta .community-badge-achievements,
.cog-comment-wrapper .cog-post-meta .cog-post-date,
.cog-comment-wrapper .cog-post-meta .community-badge-achievements {
  flex-basis: 100%;
}

.cog-thread-card .cog-post-meta .community-badge-titles,
.cog-comment-wrapper .cog-post-meta .community-badge-titles {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================================
   Article Info Banner
   ========================================= */
.cog-article-info-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  background: #f0f7eb;
  border: 1px solid #c3ddb0;
  border-left: 4px solid #78BF52;
  border-radius: 10px;
}
.cog-aib-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 180px;
}
.cog-aib-icon {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}
.cog-aib-label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #00663B;
}
.cog-aib-value {
  margin: 0;
  font-size: 14px;
  color: #111827;
  font-weight: 500;
}
.cog-aib-label {
  text-decoration: none;
}
.cog-aib-label:hover {
  text-decoration: underline;
}

/* ── Guest login banner ─────────────────────────────────────────────────── */
.cog-guest-banner {
  background: #f0f7eb;
  border-bottom: 1px solid #c3ddb0;
  border-top: 1px solid #c3ddb0;
}

.cog-guest-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 5%;
}

@media (min-width: 1160px) {
  .cog-guest-banner-inner {
    padding: 10px 0;
    width: 90%;
  }
}

.cog-guest-banner-icon {
  flex-shrink: 0;
  color: rgba(0, 99, 65, 1);
}

.cog-guest-banner-text {
  flex: 1;
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.4;
}

.cog-guest-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cog-guest-banner-btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 16px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  line-height: 1.6;
}

.cog-guest-banner-btn--primary {
  background: rgba(0, 99, 65, 1);
  color: #FFFFFF;
  border: 1px solid rgba(0, 99, 65, 1);
}

.cog-guest-banner-btn--primary:visited {
  color: #FFFFFF;
}

.cog-guest-banner-btn--primary:hover,
.cog-guest-banner-btn--primary:focus {
  background: #003020;
  border-color: #003020;
  text-decoration: none;
  color: #FFFFFF;
}

@media (max-width: 600px) {
  .cog-guest-banner-text {
    font-size: 12px;
  }

  .cog-guest-banner-inner {
    gap: 8px;
  }
}

/* ── Carousel guest sign-in CTA ─────────────────────────────────────────── */
.cog-carousel-card-cta--signin {
  color: rgba(0, 99, 65, 1);
  font-style: italic;
}


/* ── Guest comments blur + sign-in card ─────────────────────────────────── */
.cog-guest-comments-wrap {
  position: relative;
  margin-bottom: 24px;
}

.cog-guest-comments-blur {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
  padding-bottom: 40px;
}

.cog-guest-blur-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.cog-guest-blur-inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(245,247,245,0) 0%, rgba(245,247,245,1) 100%);
  pointer-events: none;
}

.cog-fake-comment {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px 24px;
}

.cog-fake-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #c3ddb0;
  flex-shrink: 0;
}

.cog-fake-avatar--alt {
  background: #b5d4f4;
}

.cog-fake-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.cog-fake-line {
  height: 11px;
  border-radius: 6px;
  background: #ebebeb;
}

.cog-fake-line--name  { width: 30%; background: #ddd; height: 12px; }
.cog-fake-line--long  { width: 90%; }
.cog-fake-line--med   { width: 65%; }
.cog-fake-line--short { width: 40%; }

.cog-guest-signin-card {
  background: #fff;
  border: 1px solid #c3ddb0;
  border-radius: 10px;
  padding: 36px 32px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cog-guest-signin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f0f7eb;
  color: rgba(0, 99, 65, 1);
  margin-bottom: 14px;
}

.cog-guest-signin-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}

.cog-guest-signin-desc {
  font-size: 14px;
  color: #555;
  margin: 0 0 20px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.cog-guest-signin-btn {
  display: inline-block;
  background: rgba(0, 99, 65, 1);
  color: #FFFFFF;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  padding: 0 32px;
  line-height: 2.72;
  text-decoration: none;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.cog-guest-signin-btn:visited {
  color: #FFFFFF;
}

.cog-guest-signin-btn:hover,
.cog-guest-signin-btn:focus {
  background: #003020;
  text-decoration: none;
  color: #FFFFFF;
}


/* ── Conversational thread comments ─────────────────────────────────────── */
.cog-comment-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 8px 0 16px !important;
  padding: 0 !important;
  list-style: none !important;
}

.cog-thread-comment {
  padding: 4px 0;
}

.cog-thread-comment--official {
  background: #f8fdf4;
  border-left: 3px solid rgba(0, 99, 65, 1);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  margin-left: -12px;
}

.cog-thread-comment-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Avatar */
.cog-thread-avatar-col {
  flex-shrink: 0;
  padding-top: 2px;
}

.cog-thread-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}

/* Bubble column */
.cog-thread-bubble-col {
  flex: 1;
  min-width: 0;
}

.cog-thread-bubble {
  background: #f4f6f4;
  border-radius: 4px 16px 16px 16px;
  padding: 12px 16px;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
}

.cog-thread-bubble-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.cog-thread-author-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}

.cog-thread-author-name a {
  color: inherit;
  text-decoration: none;
}

.cog-thread-author-name a:hover {
  text-decoration: underline;
}

.cog-thread-badge {
  font-size: 11px !important;
  padding: 1px 7px !important;
  background: rgba(0,0,0,0.06) !important;
  border-radius: 20px !important;
  color: #555 !important;
  font-weight: 500 !important;
}

.cog-thread-bubble-body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #2a2a2a;
  margin: 0;
}

/* Meta row: timestamp + votes + actions */
.cog-thread-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 5px;
  padding-left: 4px;
}

.cog-thread-timestamp {
  font-size: 12px;
  color: #999;
}

.cog-thread-vote {
  display: flex !important;
  align-items: center;
  gap: 2px;
}

.cog-thread-vote-btn {
  background: none !important;
  border: none !important;
  padding: 2px 4px !important;
  cursor: pointer;
  color: #aaa !important;
  display: inline-flex;
  align-items: center;
  transition: color 0.12s ease;
  line-height: 1 !important;
}

.cog-thread-vote-btn:hover,
.cog-thread-vote-btn.vote-voted {
  color: rgba(0, 99, 65, 1) !important;
}

.cog-thread-vote-count {
  font-size: 12px !important;
  color: #888 !important;
  min-width: 14px;
  text-align: center;
}

.cog-thread-actions {
  margin-left: auto;
}

.cog-thread-actions a,
.cog-thread-actions button {
  color: #bbb;
  transition: color 0.12s ease;
}

.cog-thread-actions a:hover,
.cog-thread-actions button:hover {
  color: #666;
}

/* Official comment variant: bubble gets a green tint */
.cog-thread-comment--official .cog-thread-bubble {
  background: #edf7e6;
}


/* ── Post body read-more blur (guests) ──────────────────────────────────── */
.cog-post-body-guest-wrap {
  position: relative;
  overflow: hidden;
}

.cog-post-body--blurred {
  max-height: 180px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 100%);
}

.cog-post-body-blur-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cog-post-body-blur-cta {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cog-post-body-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(0, 99, 65, 1);
  border: none;
  border-radius: 20px;
  padding: 10px 24px;
  text-decoration: none;
  transition: background-color 0.12s ease;
  white-space: nowrap;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
}

.cog-post-body-signin-btn:visited {
  color: #FFFFFF;
}

.cog-post-body-signin-btn:hover,
.cog-post-body-signin-btn:focus {
  background: #003020;
  text-decoration: none;
  color: #FFFFFF;
}


/* ── Post author clean inline row ───────────────────────────────────────── */
.cog-post-author--thread {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 16px;
}

.cog-post-author--thread .avatar {
  flex-shrink: 0;
}

.cog-post-author-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.3;
}

.cog-post-author-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
}

.cog-post-author-name a {
  color: inherit;
  text-decoration: none;
}

.cog-post-author-name a:hover {
  text-decoration: underline;
}

.cog-post-author-badge {
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  background: #f0f7eb !important;
  color: #1f6b3e !important;
  border: 1px solid #c3ddb0 !important;
  font-weight: 500 !important;
}

.cog-post-author-sep {
  color: #ccc;
  font-size: 13px;
}

.cog-post-author-date {
  font-size: 0.87rem;
  color: #999;
}

/* ── Inline post action bar (Like + Comment + settings cog) ─────────────── */
.cog-post-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eee;
  margin-top: 20px;
  padding-top: 12px;
  gap: 8px;
}

.cog-post-action-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cog-post-action-bar-right {
  display: flex;
  align-items: center;
}

/* Comment button — matches like button style */
.cog-action-bar-comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #666 !important;
  text-decoration: none !important;
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: 20px;
  transition: all 0.15s ease;
  line-height: 1;
}

.cog-action-bar-comment-btn:hover,
.cog-action-bar-comment-btn:focus {
  border-color: rgba(0, 99, 65, 1) !important;
  color: rgba(0, 99, 65, 1) !important;
  background: #f4faf0 !important;
  text-decoration: none !important;
}

.cog-action-bar-comment-btn--guest {
  border-style: dashed;
  color: #888 !important;
}

.cog-action-bar-comment-btn--guest:hover,
.cog-action-bar-comment-btn--guest:focus {
  border-style: solid;
}

/* ── Hide Zendesk vote elements — we use our own button ─────────────────── */
.cog-vote-hidden {
  display: none !important;
}

/* ── Like button — our own <button> element ─────────────────────────────── */
#cog-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #d0d5d0;
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  transition: all 0.15s ease;
  white-space: nowrap;
}

#cog-like-btn:hover {
  border-color: rgba(0, 99, 65, 1);
  color: rgba(0, 99, 65, 1);
  background: #f4faf0;
}

#cog-like-btn.is-liked {
  border-color: rgba(0, 99, 65, 1);
  color: rgba(0, 99, 65, 1);
  background: #f4faf0;
}

#cog-like-btn.is-liked .cog-like-icon {
  fill: rgba(0, 99, 65, 1);
  stroke: rgba(0, 99, 65, 1);
}

.cog-like-icon {
  flex-shrink: 0;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.cog-like-label {
  font-size: 13px;
  font-weight: 600;
}

.cog-like-inline-count {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
}

/* ── "Add a comment" prompt above comments list ─────────────────────────── */
.cog-reply-prompt {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.cog-reply-prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 99, 65, 1) !important;
  text-decoration: none !important;
  padding: 6px 12px;
  border: 1px solid rgba(0, 99, 65, 1);
  border-radius: 20px;
  transition: all 0.15s ease;
}

.cog-reply-prompt-btn:hover,
.cog-reply-prompt-btn:focus {
  background: rgba(0, 99, 65, 1);
  color: #FFFFFF !important;
  text-decoration: none !important;
}
/* ── Poll widget ─────────────────────────────────────────────────────────── */
.cog-poll {
  margin: 16px 0 24px;
  background: $brand_color_opaque_5, #f7f8fa;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 12px;
  padding: 20px 20px 16px;
  max-width: 520px;
}

.cog-poll-question {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 14px;
}

.cog-poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.cog-poll-option-btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 1.5px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* Ensure inner divs don't block clicks */
  z-index: 0;
}

.cog-poll-option-btn:hover:not(:disabled) {
  border-color: rgba(0, 99, 65, 1);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.cog-poll-option-btn:disabled {
  cursor: default;
  opacity: 0.75;
}

.cog-poll-option-btn.is-voted {
  border-color: rgba(0, 99, 65, 1);
  background: #f0f7ff;
}

/* Progress bar — sits behind text */
.cog-poll-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(30, 100, 255, 0.10);
  border-radius: 6px;
  transition: width 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.cog-poll-option-btn.is-voted .cog-poll-bar {
  background: rgba(30, 100, 255, 0.15);
}

/* Label + percentage row — sits above the bar */
.cog-poll-option-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  z-index: 1;
  pointer-events: none;
}

.cog-poll-pct {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  min-width: 36px;
  text-align: right;
}

/* After voting — hide unvoted buttons in a subtle way */
.cog-poll--voted .cog-poll-option-btn:not(.is-voted) {
  opacity: 0.7;
}

.cog-poll-meta {
  font-size: 12px;
  color: #9ca3af;
  margin: 6px 0 0;
}