https://square-enix-games.lightning.force.com/@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%;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  overscroll-behavior-y: none;
}

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: #FFFFFF;
  color: #000000;
  font-family: "proxima-nova", 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 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: "proxima-nova", 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 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: #A41016;
  text-decoration: none;
}
a:visited {
  color: #A41016;
}
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 #ED1C24;
}
.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 #848F99;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid #ED1C24;
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #848F99;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid #ED1C24;
}

.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 #ED1C24;
  border-radius: 4px;
  color: #ED1C24;
  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: #ED1C24;
}
.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: #ED1C24;
  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: #970c11;
  border-color: #970c11;
}
.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: #ED1C24;
  border: 0;
  border-radius: 4px;
  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: #970c11;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #333;
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: #333;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #000000;
  border: 1px solid #848F99;
  background-color: #f7f7f7;
}

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

.split-button button {
  background-color: #ED1C24;
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: #ED1C24;
}

[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: #333;
  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 #848F99;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid #ED1C24;
}

.form-field input[type=text] {
  border: 1px solid #848F99;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid #ED1C24;
}

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

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #848F99;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid #ED1C24;
  text-decoration: none;
}

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

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid #ED1C24;
  text-decoration: none;
}

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

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

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

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

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

.form footer a {
  color: #333;
  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: #A41016;
}

/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: sticky;
  top: 0;
  z-index: 1000;
  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: #ED1C24;
}

.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: #A41016;
  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: #A41016;
  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: #000000;
  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: #000000;
}
.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: #A41016;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #A41016;
  background-color: transparent;
}
.user-info > button::after {
  color: #A41016;
  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: #ED1C24;
  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: #333;
}
.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: #333;
  display: inline-block;
}

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

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

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

.search {
  border-color: #848F99;
  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: #ED1C24;
}
.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: #ED1C24;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #ED1C24;
}
.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: #ED1C24;
}
[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: #ED1C24;
}

[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: #ED1C24;
}
[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: #ED1C24;
}

.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/01KFN2YSV955G68GX1XG3DBFBP);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  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 #ED1C24;
  border-radius: 4px;
  box-sizing: border-box;
  color: #ED1C24;
  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: #ED1C24;
}
.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: #000000;
}
.blocks-item-link {
  color: #ED1C24;
  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: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #ED1C24;
  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/01KFN2YTQ11KA1XWAEWGE8CZXT);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: #A41016;
  text-decoration: underline;
}
.community a:visited {
  color: #A41016;
}
.community a:hover, .community a:active, .community a:focus {
  color: #ED1C24;
}

.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 {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 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: #000000;
  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: #A41016;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #A41016;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #ED1C24;
}
.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: #ED1C24;
  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 80%;
  }
}

.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: #000000;
}
.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: #000000;
}

.icon-star {
  color: #ED1C24;
  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: #000000;
  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: #A41016;
  text-decoration: underline;
}
.article-body a:visited {
  color: #A41016;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #ED1C24;
}
.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;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #333;
  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: #333;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #ED1C24;
  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: #A41016;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #A41016;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #ED1C24;
}
.article-return-to-top {
  border-top: 1px solid #848F99;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: #000000;
  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: #000000;
  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: #333;
}

/***** 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: #333;
}
.share a:hover {
  text-decoration: none;
  color: #ED1C24;
}
.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: #333;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #A41016;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #A41016;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #ED1C24;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #333;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #ED1C24;
  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: #ED1C24;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: "proxima-nova", 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: #A41016;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #A41016;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #ED1C24;
}
.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;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #333;
  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: #333;
  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: #ED1C24;
}

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

.vote-voted {
  color: #ED1C24;
}

.vote-voted:hover {
  color: #970c11;
}

/***** 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/01KFN2YT9CWJS75R6HDD22AKAE);
  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: #ED1C24;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: #ED1C24;
  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: #970c11;
  border-color: #970c11;
}
.community-follow button::after {
  border-left: 1px solid #ED1C24;
  content: attr(data-follower-count);
  color: #ED1C24;
  display: inline-block;
  font-family: "proxima-nova", 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 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 #ED1C24;
  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: #A41016;
  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: #A41016;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #333;
  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: #000000;
    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: #ED1C24;
}
.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: #333;
}
.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: "proxima-nova", 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 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: #A41016;
  text-decoration: underline;
}
.post-body a:visited {
  color: #A41016;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #ED1C24;
}
.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;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #333;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #333;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #ED1C24;
  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 #ED1C24;
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #000000;
  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: #000000;
  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 #ED1C24;
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #000000;
}

.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 #ED1C24;
}
.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: #333;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #333;
}

/***** 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: #333;
  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 #ED1C24;
}
.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 #ED1C24;
}
.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%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #333;
  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: #333;
  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: #333;
  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 #ED1C24;
  border-radius: 4px;
  color: #ED1C24;
  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: #333;
  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: #333;
  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: #FFFFFF;
  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: #000000;
}
.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: #A41016;
}
.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: #A41016;
}
.search-results .no-results .action-prompt a:visited {
  color: #A41016;
}

.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: #333;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #ED1C24;
  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-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 #848F99;
}

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

/***** 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-hero {
  background-image: url(/hc/theming_assets/01KFN2YV33V1G81CV4J9D8DDRQ);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: #A41016;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: #A41016;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: #ED1C24;
}
.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;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: #333;
  font-style: italic;
  padding: 0 15px;
}
.service-catalog-main-content {
  display: flex;
  gap: 32px;
}
.service-catalog-list {
  width: 100%;
}
.service-catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ========================================================================
   SQUARE ENIX OVERRIDES — appended to stock Copenhagen 4.32.2
   Do not interleave with Copenhagen styles above. All SE rules live below.
   Build: V1 — May 2026 (Ventrica / Phil Williams)
   ======================================================================== */

/* --- Adobe Typekit: Proxima Nova -------------------------------------- */
/* Declarations supplied by Square Enix (signed Typekit asset URLs — do
   not modify). Three weights: 400 regular, 600 semi-bold, 700 bold.
   font-display:swap (changed from Adobe's default "auto") so the system
   fallback renders immediately and Proxima Nova swaps in on load — FOUT
   over FOIT is the right trade-off for a content-first help centre.
   Typekit enforces domain whitelisting server-side: if SE hasn't
   whitelisted the Zendesk domains in their kit settings, these URLs
   403 silently and the fallback stack renders. That's an admin-side
   dependency, not a theme issue — see BUILD_NOTES.md. */
@font-face {
  font-family:"proxima-nova";
  src:url("https://use.typekit.net/af/949f99/00000000000000003b9b3068/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/949f99/00000000000000003b9b3068/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/949f99/00000000000000003b9b3068/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
  font-display:swap;font-style:normal;font-weight:700;
}

@font-face {
  font-family:"proxima-nova";
  src:url("https://use.typekit.net/af/576d53/00000000000000003b9b3066/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/576d53/00000000000000003b9b3066/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/576d53/00000000000000003b9b3066/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n6&v=3") format("opentype");
  font-display:swap;font-style:normal;font-weight:600;
}

@font-face {
  font-family:"proxima-nova";
  src:url("https://use.typekit.net/af/705e94/00000000000000003b9b3062/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/705e94/00000000000000003b9b3062/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/705e94/00000000000000003b9b3062/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
  font-display:swap;font-style:normal;font-weight:400;
}

@font-face {
  font-family: 'symbol-fallback';
  src: local('Segoe UI Symbol'), local('Apple Symbols'), local('Arial Unicode MS');
  unicode-range: U+00A9, U+00AE, U+00B0, U+2122;
}
/* --- Design tokens ---------------------------------------------------- */
:root {
  /* Colours — Square Enix 2025 Digital Brand Guidelines.
     Settings-backed values (brand, link, text, background) continue to
     flow through $setting_name substitution in component rules below;
     tokens here cover the full palette plus decorative/neutral greys. */
  --se-primary-400:   #FF656B;
  --se-primary-600:   #ED1C24;
  --se-primary-800:   #A41016;
  --se-black:         #000000;
  --se-white:         #FFFFFF;
  --se-secondary-100: #E7E7E7;
  --se-secondary-300: #B0B0B0;
  --se-secondary-600: #5D5D5D;
  --se-secondary-900: #3D3D3D;

  /* Type scale — 8px line-height grid */
  --type-3xl:  40px;  --lh-3xl:  48px;
  --type-2xl:  32px;  --lh-2xl:  40px;
  --type-xl:   24px;  --lh-xl:   32px;
  --type-lg:   20px;  --lh-lg:   24px;
  --type-base: 16px;  --lh-base: 24px;
  --type-sm:   14px;  --lh-sm:   16px;

  /* Spacing — 8px grid */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;

  /* Font stack — Proxima Nova with system fallbacks.
     body/heading font-family continue to resolve via "proxima-nova", 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif /
     "proxima-nova", 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif (manifest). This token is for component rules that
     need a direct reference. */
  --font-primary: "proxima-nova", 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'symbol-fallback';
}

/* --- Foundational typography ------------------------------------------ */
/* Copenhagen's body rule already sets background/color/font-family from
   manifest settings ("proxima-nova", 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif now resolves to the Proxima Nova stack).
   We only nudge size and leading to the SE 16/24 base. */
body {
  font-size: var(--type-base);
  line-height: var(--lh-base);
}

/* Headings: reset Copenhagen's 32/22/18/16 sizes to the SE type scale.
   Heading font-family keeps resolving through "proxima-nova", 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif. */
h1 {
  font-size: var(--type-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
}
h2 {
  font-size: var(--type-xl);
  line-height: var(--lh-xl);
  font-weight: 700;
}
h3 {
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
}
h4 {
  font-size: var(--type-base);
  line-height: var(--lh-base);
  font-weight: 700;
}
h5,
h6 {
  font-size: var(--type-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
}

/* Paragraph spacing on the 8px grid. */
p {
  margin: 0 0 var(--space-2);
}

/* Links — colours come from manifest settings. a / a:visited restated
   for clarity (Copenhagen's base rules already match). a:hover adds
   #ED1C24 brightening, which Copenhagen did not apply.
   a:focus grouped with a:hover so keyboard users get the same colour
   shift — accessibility parity. */
a {
  color: #A41016;
  text-decoration: none;
}
a:visited {
  color: #A41016;
}
a:hover,
a:focus {
  color: #ED1C24;
  text-decoration: underline;
}

/* Emphasis */
strong {
  font-weight: 700;
}
em {
  font-style: italic;
}

/* ========================================================================
   STAGE 3a — CHROME: header, footer, search
   ======================================================================== */

/* --- Header: full-width black bar ------------------------------------- */
/* Copenhagen constrains .header to max-width 1160px with margin auto,
   and at >=1160px drops to width 90% with padding 0.
   To get an edge-to-edge black bg without editing header.hbs, we lift
   the max-width and use padding-inline max() to keep inner content
   centered at 1160px on wide viewports. Vertical padding is explicit 0
   to match stock (the shorthand's first value). The media-query rule
   below overrides Copenhagen's own >=1160px narrowing; without it the
   black bar would shrink back to 90% width above that breakpoint. */
.header {
  background-color: var(--se-black);
  color: var(--se-white);
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 max(5%, calc((100% - 1160px) / 2));
}
@media (min-width: 1160px) {
  .header {
    width: 100%;
    padding: 0 calc((100% - 1160px) / 2);
  }
}

/* Desktop nav links */
.nav-wrapper-desktop a {
  color: var(--se-white);
}
.nav-wrapper-desktop a:hover,
.nav-wrapper-desktop a:focus,
.nav-wrapper-desktop a:active {
  color: var(--se-primary-400);
  text-decoration: none;
}

/* User-info dropdown toggle (signed-in state) */
.user-info > button,
.user-info > button::after {
  color: var(--se-white);
}
.user-info > button:hover,
.user-info > button:focus,
.user-info > button:hover::after,
.user-info > button:focus::after {
  color: var(--se-primary-400);
}

/* Mobile menu trigger — icon colour inherits header white via cascade;
   pressed bg overridden from Copenhagen's #f3f3f3 to be visible on black. */
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: var(--se-secondary-900);
}

/* Mobile menu flyout panel stays white for contrast against the dark header. */
.nav-wrapper-mobile .menu-list-mobile {
  border-top-color: var(--se-secondary-100);
  border-bottom-color: var(--se-secondary-100);
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom-color: var(--se-secondary-100);
}
.nav-wrapper-mobile .menu-list-mobile-items button,
.nav-wrapper-mobile .menu-list-mobile-items a {
  color: var(--se-secondary-900);
}
.nav-wrapper-mobile .menu-list-mobile-items button:hover,
.nav-wrapper-mobile .menu-list-mobile-items button:focus,
.nav-wrapper-mobile .menu-list-mobile-items button:active,
.nav-wrapper-mobile .menu-list-mobile-items a:hover,
.nav-wrapper-mobile .menu-list-mobile-items a:focus,
.nav-wrapper-mobile .menu-list-mobile-items a:active {
  background-color: color-mix(in srgb, var(--se-primary-600) 6%, transparent);
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  color: var(--se-secondary-600);
}

/* --- Dropdown flyouts (shared: user-info, footer language-selector) --- */
.dropdown-menu {
  border-color: var(--se-secondary-100);
}
.dropdown-menu [role=separator] {
  border-bottom-color: var(--se-secondary-100);
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: var(--se-secondary-900);
}
.dropdown-menu [role=menuitem]:hover,
.dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: color-mix(in srgb, var(--se-primary-600) 6%, transparent);
  color: var(--se-secondary-900);
}

/* --- Footer: light surface, SE muted palette (structure untouched) ---- */
.footer {
  border-top-color: var(--se-secondary-100);
}
.footer a {
  color: var(--se-secondary-600);
}
.footer a:hover,
.footer a:focus {
  color: #ED1C24;
}
.footer-language-selector button {
  color: var(--se-secondary-600);
}
.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: var(--se-secondary-600);
}

/* --- Search: base (scoped/compact) ------------------------------------ */
.search {
  border-color: var(--se-secondary-300);
}
.search input[type=search],
.search input[type=search]:focus {
  color: var(--se-black);
  font-size: var(--type-base);
}
.search input[type=search]::placeholder {
  color: var(--se-secondary-600);
}
.search-icon {
  color: var(--se-secondary-600);
}

/* --- Search: .search-full variant (home hero) ------------------------- */
/* Tall, bigger type, borderless with soft lift shadow against dark hero.
   Focus ring uses #ED1C24 so admin theme colour changes still drive it. */
.search.search-full {
  border-color: transparent;
  box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--se-black) 25%, transparent);
}
.search.search-full:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 3px #ED1C24,
              0 var(--space-1) var(--space-3) color-mix(in srgb, var(--se-black) 25%, transparent);
}
.search.search-full input[type=search] {
  height: var(--space-8);
  font-size: var(--type-lg);
}
[dir=ltr] .search.search-full input[type=search] {
  padding-left: var(--space-6);
}
[dir=rtl] .search.search-full input[type=search] {
  padding-right: var(--space-6);
}
.search.search-full .search-icon {
  width: var(--space-3);
  height: var(--space-3);
}

/* ========================================================================
   STAGE 3b — HOME PAGE COMPONENTS
   ======================================================================== */

/* --- Hero ------------------------------------------------------------- */
/* Dark hero with red radial gradient and oversized SE watermark.
   The stock .hero sets a background-image from /hc/theming_assets/01KFN2YSV955G68GX1XG3DBFBP;
   we keep that as an optional tinted overlay via multiple backgrounds so
   admins can still drop an image through the setting if they want it.
   Watermark is a ::after pseudo, positioned at the right edge, low-opacity
   white. Width of hero extends full-bleed using the same max() padding
   technique as the header, so the dark bar reaches the viewport edges. */
.hero {
  background-color: var(--se-black);
  background-image:
    radial-gradient(circle at 85% 50%, color-mix(in srgb, var(--se-primary-600) 30%, transparent) 0%, transparent 55%),
    url(/hc/theming_assets/01KFN2YSV955G68GX1XG3DBFBP);
  background-size: auto, cover;
  background-position: center, center;
  color: var(--se-white);
  height: auto;
  min-height: 320px;
  padding: var(--space-8) max(5%, calc((100% - 1160px) / 2));
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .hero {
    min-height: 400px;
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
}
.hero::after {
  content: "SE";
  position: absolute;
  right: -0.08em;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(160px, 26vw, 360px);
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--se-white) 6%, transparent);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.hero-inner {
  position: relative;
  top: auto;
  transform: none;
  max-width: 720px;
  margin: 0;
  z-index: 1;
}
.home-hero-eyebrow {
  color: var(--se-primary-600);
  font-size: var(--type-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.home-hero-heading {
  color: var(--se-white);
  font-size: clamp(var(--type-2xl), 5vw, var(--type-3xl));
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 var(--space-4);
}
.home-hero-heading .home-hero-heading-accent {
  color: var(--se-primary-600);
}

/* --- Category tiles (blocks-list) ------------------------------------- */
/* Convert Copenhagen's hollow-red cards to game-tile 3:4 cards with dark
   gradient bg and bottom-anchored titles. */
.blocks-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
  }
}
@media (min-width: 1024px) {
  .blocks-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.blocks-item {
  border: 0;
  border-radius: var(--space-1);
  background: linear-gradient(180deg, var(--se-secondary-900) 0%, var(--se-black) 100%);
  color: var(--se-white);
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
.blocks-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--se-primary-600);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease;
}
.blocks-item:hover,
.blocks-item:focus,
.blocks-item:active {
  background: linear-gradient(180deg, var(--se-secondary-900) 0%, var(--se-black) 100%);
  transform: translateY(-4px);
  box-shadow: 0 var(--space-2) var(--space-4) color-mix(in srgb, var(--se-black) 40%, transparent);
}
.blocks-item:hover::after,
.blocks-item:focus-within::after,
.blocks-item:active::after {
  transform: scaleX(1);
}
.blocks-item:hover *,
.blocks-item:focus *,
.blocks-item:active * {
  color: var(--se-white);
}
.blocks-item-link {
  color: var(--se-white);
  padding: var(--space-3);
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}
.blocks-item-link:visited,
.blocks-item-link:hover,
.blocks-item-link:active {
  color: var(--se-white);
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: inset 0 0 0 3px #ED1C24;
}
.blocks-item-title {
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  margin-bottom: 0;
}
.blocks-item-description {
  font-size: var(--type-sm);
  line-height: 1.5;
  color: var(--se-secondary-300);
}
.blocks-item-description:not(:empty) {
  margin-top: var(--space-1);
}

/* --- Home section spacing / heading ----------------------------------- */
.home-section h2,
.articles > h2 {
  text-align: left;
  font-size: var(--type-xl);
  line-height: var(--lh-xl);
  margin-bottom: var(--space-3);
  position: relative;
  padding-left: var(--space-2);
}
.home-section h2::before,
.articles > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  background: var(--se-primary-600);
}

/* --- Promoted articles ("Popular Articles") --------------------------- */
.promoted-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-4);
}
@media (min-width: 768px) {
  .promoted-articles {
    grid-template-columns: repeat(2, 1fr);
  }
}
.promoted-articles-item {
  padding: 0;
  width: auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    width: auto;
    padding-right: 0;
  }
}
.promoted-articles-item a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border-bottom: 1px solid var(--se-secondary-100);
  padding: var(--space-2) 0;
  color: var(--se-black);
  font-size: var(--type-base);
  line-height: var(--lh-base);
  transition: color 0.12s ease, padding-left 0.18s ease;
}
.promoted-articles-item a::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: var(--space-2);
  background: var(--se-primary-600);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.promoted-articles-item a:hover,
.promoted-articles-item a:focus {
  color: #ED1C24;
  text-decoration: none;
  padding-left: var(--space-1);
}
.promoted-articles-item a:hover::before,
.promoted-articles-item a:focus::before {
  opacity: 1;
}
.promoted-articles-item:last-child a {
  border-bottom: 1px solid var(--se-secondary-100);
}

/* --- Community section on home ---------------------------------------- */
.community {
  border-top-color: var(--se-secondary-100);
  text-align: left;
}
.community a {
  color: #A41016;
}
.community a:visited {
  color: #A41016;
}
.community a:hover,
.community a:focus,
.community a:active {
  color: #ED1C24;
}

/* --- Recent activity -------------------------------------------------- */
.community,
.activity {
  border-top-color: var(--se-secondary-100);
}
.recent-activity-header {
  text-align: left;
}
.recent-activity-item {
  border-bottom-color: var(--se-secondary-100);
}
.recent-activity-item-parent {
  color: var(--se-black);
}
.recent-activity-item-meta {
  color: var(--se-secondary-600);
}
.recent-activity-controls a {
  color: #A41016;
}
.recent-activity-controls a:hover,
.recent-activity-controls a:focus {
  color: #ED1C24;
}

/* Stage 3b self-audit:
   1. Edits above override block: no
   2. Touched assets/: no
   3. Hardcoded English in template: n/a (no templates touched yet — stage 4)
   4. !important: no
   5. Hardcoded colour: no — all via $setting or var(--se-*)
   6. Off-grid spacing: clamp() for responsive type is design-intentional; 4px accent bars are sub-grid accents (half of --space-1), acceptable per SE tokens
   7. Semantic: n/a (no template)
   8. Respected stock markup: yes — no template changes */

/* ========================================================================
   STAGE 3c — CATEGORY PAGE COMPONENTS
   ======================================================================== */

/* --- Dark hero wrapper used by category + article pages --------------- */
.category-hero,
.article-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--se-black);
  background-image: radial-gradient(circle at 85% 50%, color-mix(in srgb, var(--se-primary-600) 25%, transparent) 0%, transparent 60%);
  color: var(--se-white);
  padding: var(--space-6) max(5%, calc((100% - 1160px) / 2));
  margin: 0 calc(max(5%, calc((100% - 1160px) / 2)) * -1) var(--space-4);
}
@media (min-width: 768px) {
  .category-hero,
  .article-hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
}
.category-hero[data-watermark]::after,
.article-hero[data-watermark]::after {
  content: attr(data-watermark);
  position: absolute;
  right: -0.03em;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(100px, 18vw, 240px);
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--se-white) 5%, transparent);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 50%;
  overflow: hidden;
  z-index: 0;
}
.category-hero > *,
.article-hero > * {
  position: relative;
  z-index: 1;
}

/* --- Breadcrumbs inside dark hero ------------------------------------- */
.category-hero .breadcrumbs,
.article-hero .breadcrumbs {
  margin: 0 0 var(--space-2);
}
.category-hero .breadcrumbs li,
.article-hero .breadcrumbs li {
  color: var(--se-secondary-300);
}
.category-hero .breadcrumbs li a,
.category-hero .breadcrumbs li a:visited,
.article-hero .breadcrumbs li a,
.article-hero .breadcrumbs li a:visited {
  color: var(--se-white);
}
.category-hero .breadcrumbs li a:hover,
.category-hero .breadcrumbs li a:focus,
.article-hero .breadcrumbs li a:hover,
.article-hero .breadcrumbs li a:focus {
  color: var(--se-primary-400);
  text-decoration: underline;
}
.category-hero .breadcrumbs li + li::before,
.article-hero .breadcrumbs li + li::before {
  color: var(--se-secondary-300);
}

/* --- Page header inside dark hero (category) -------------------------- */
.category-hero .page-header h1 {
  color: var(--se-white);
  font-size: clamp(var(--type-2xl), 4vw, var(--type-3xl));
  line-height: 1.1;
  margin: 0 0 var(--space-2);
}
.category-hero .page-header-description {
  color: var(--se-secondary-300);
  font-style: normal;
  margin: 0;
  max-width: 640px;
}

/* --- Compact search above category content ---------------------------- */
.category-search-wrapper,
.article-search-wrapper {
  margin: 0 0 var(--space-4);
  max-width: 480px;
}

/* --- Section tree: 2-col card grid ------------------------------------ */
.section-tree {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .section-tree {
    grid-template-columns: repeat(2, 1fr);
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
  margin: 0;
  background: var(--se-white);
  border: 1px solid var(--se-secondary-100);
  border-radius: var(--space-1);
  padding: var(--space-3);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.section-tree .section:hover,
.section-tree .section:focus-within {
  border-color: var(--se-primary-600);
  box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--se-black) 8%, transparent);
}
.section-tree-title {
  margin: 0 0 var(--space-2);
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--se-secondary-100);
}
.section-tree-title a {
  color: var(--se-black);
}
.section-tree-title a:hover,
.section-tree-title a:focus {
  color: #ED1C24;
  text-decoration: none;
}
.section-tree .article-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-list-item {
  font-size: var(--type-base);
  line-height: var(--lh-base);
  padding: var(--space-1) 0;
  overflow: visible;
  text-overflow: unset;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.article-list-item a {
  color: var(--se-secondary-900);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-list-item a:hover,
.article-list-item a:focus {
  color: #ED1C24;
  text-decoration: underline;
}
.section-tree .see-all-articles {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 0;
  color: #A41016;
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.section-tree .see-all-articles:hover,
.section-tree .see-all-articles:focus {
  color: #ED1C24;
  text-decoration: underline;
}

/* Promoted-article star + internal lock — pick up SE accent */
.icon-star {
  color: var(--se-primary-600);
  flex: 0 0 auto;
}
.article-promoted {
  position: relative;
}
.article-list-item.article-promoted .icon-star {
  margin-right: 2px;
}
.article-list-item .icon-lock,
.article-title .icon-lock,
.page-header .icon-lock,
.blocks-item-internal .icon-lock,
.promoted-articles-item .icon-lock {
  color: var(--se-secondary-600);
}

/* Stage 3c self-audit:
   1. Edits above block: no
   2. Assets: no
   3. Template text: n/a
   4. !important: no
   5. Hardcoded colour: no
   6. Spacing: on-grid
   7. Semantic: n/a
   8. Stock markup respected: yes */

/* ========================================================================
   STAGE 3d — ARTICLE PAGE COMPONENTS
   ======================================================================== */

/* --- Article hero (wraps existing .article-header) -------------------- */
/* Red left border + dark hero feel. Hero wrapper class added by template. */
.article-hero {
  border-left: 4px solid var(--se-primary-600);
}
.article-hero .article-title {
  color: var(--se-white);
  font-size: clamp(var(--type-2xl), 3.5vw, var(--type-3xl));
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 var(--space-3);
  overflow: visible;
  text-overflow: unset;
}
.article-hero .article-title .icon-lock {
  color: var(--se-primary-400);
}
.article-hero .article-author {
  color: var(--se-secondary-300);
  margin: 0;
}
.article-hero .article-author a,
.article-hero .article-author a:visited {
  color: var(--se-white);
}
.article-hero .article-author a:hover,
.article-hero .article-author a:focus {
  color: var(--se-primary-400);
  text-decoration: underline;
}
.article-hero .article-meta,
.article-hero .meta-data {
  color: var(--se-secondary-300);
}
.article-hero .article-subscribe {
  margin-top: var(--space-2);
}
.article-hero .article-subscribe button {
  border-color: var(--se-white);
  color: var(--se-white);
  background-color: transparent;
}
.article-hero .article-subscribe button:hover,
.article-hero .article-subscribe button:focus {
  background-color: var(--se-white);
  color: var(--se-black);
}

/* --- Article header (fallback when not wrapped in .article-hero) ----- */
.article-header {
  margin-bottom: var(--space-4);
  margin-top: var(--space-2);
}

/* --- Article body: headings, lists, prose ----------------------------- */
.article-content {
  line-height: 1.6;
  margin: var(--space-4) 0;
}
.article-body h2 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  padding-left: var(--space-2);
  position: relative;
}
.article-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  background: var(--se-primary-600);
}
.article-body h3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}
.article-body ol {
  list-style: none;
  counter-reset: se-step;
  padding-left: 0;
  margin: var(--space-3) 0;
}
.article-body ol > li {
  counter-increment: se-step;
  position: relative;
  padding-left: calc(var(--space-4) + var(--space-1));
  margin-bottom: var(--space-2);
}
.article-body ol > li::before {
  content: counter(se-step);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-4);
  height: var(--space-4);
  background: var(--se-black);
  color: var(--se-white);
  border-radius: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-sm);
  font-weight: 700;
  line-height: 1;
}
[dir=rtl] .article-body ol > li {
  padding-left: 0;
  padding-right: calc(var(--space-4) + var(--space-1));
}
[dir=rtl] .article-body ol > li::before {
  left: auto;
  right: 0;
}
.article-body ul {
  list-style: none;
  padding-left: 0;
  margin: var(--space-3) 0;
}
.article-body ul > li {
  position: relative;
  padding-left: var(--space-3);
  margin-bottom: var(--space-1);
}
.article-body ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--space-1);
  height: var(--space-1);
  background: var(--se-primary-600);
  border-radius: 50%;
}
[dir=rtl] .article-body ul > li {
  padding-left: 0;
  padding-right: var(--space-3);
}
[dir=rtl] .article-body ul > li::before {
  left: auto;
  right: 0;
}
.article-body ul ul,
.article-body ol ol,
.article-body ol ul,
.article-body ul ol {
  margin: var(--space-1) 0 var(--space-1) var(--space-3);
}

/* --- User-pasted content: callouts, tables, code, blockquote --------- */
.article-body blockquote {
  border-left: 4px solid var(--se-primary-600);
  background: color-mix(in srgb, var(--se-primary-600) 4%, transparent);
  color: var(--se-secondary-900);
  font-style: normal;
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
}
[dir=rtl] .article-body blockquote {
  border-left: 0;
  border-right: 4px solid var(--se-primary-600);
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--type-sm);
}
.article-body th,
.article-body td {
  border: 1px solid var(--se-secondary-100);
  padding: var(--space-1) var(--space-2);
  text-align: start;
}
.article-body th {
  background: var(--se-black);
  color: var(--se-white);
  font-weight: 700;
}
.article-body tr:nth-child(even) td {
  background: color-mix(in srgb, var(--se-secondary-100) 50%, transparent);
}
.article-body :not(pre) > code {
  background: var(--se-secondary-100);
  border-color: var(--se-secondary-100);
  color: var(--se-secondary-900);
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}
.article-body pre {
  background: var(--se-black);
  border-color: var(--se-black);
  color: var(--se-white);
  padding: var(--space-2) var(--space-3);
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}
.article-body pre code {
  background: transparent;
  color: inherit;
  border: 0;
  padding: 0;
}

/* --- Article footer + share + comment count --------------------------- */
.article-footer {
  border-top: 1px solid var(--se-secondary-100);
  padding: var(--space-3) 0;
}
.article-comment-count {
  color: var(--se-secondary-600);
}
.article-comment-count-icon {
  color: var(--se-primary-600);
}

/* --- Article votes --------------------------------------------------- */
.article-votes {
  border-top-color: var(--se-secondary-100);
  padding: var(--space-4) 0;
}
.article-votes-question {
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.article-votes-controls {
  display: inline-flex;
  gap: var(--space-1);
}
.article-vote {
  min-width: 120px;
  margin: var(--space-1) 0;
}
.article-votes-count {
  display: block;
  margin-top: var(--space-2);
  color: var(--se-secondary-600);
}

/* --- Article relatives (recently viewed / related) -------------------- */
.article-relatives {
  border-top-color: var(--se-secondary-100);
  padding: var(--space-3) 0;
}
.recent-articles li,
.related-articles li {
  margin-bottom: var(--space-1);
}

/* --- Article sidebar -------------------------------------------------- */
.article-sidebar {
  border-color: var(--se-secondary-100);
}
.collapsible-sidebar {
  background: var(--se-white);
  border: 1px solid var(--se-secondary-100);
  border-radius: var(--space-1);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}
@media (min-width: 1024px) {
  .article-sidebar .collapsible-sidebar {
    background: var(--se-white);
  }
}
.sidenav-title {
  font-size: var(--type-base);
  font-weight: 700;
  color: var(--se-black);
}
.sidenav-item {
  color: var(--se-secondary-900);
  padding: var(--space-1) 0;
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--se-secondary-100);
}
.sidenav-item:last-child {
  border-bottom: 0;
}
.sidenav-item:hover,
.sidenav-item:focus {
  color: #ED1C24;
  text-decoration: none;
}
.sidenav-item.current-article {
  color: var(--se-primary-600);
  font-weight: 700;
  position: relative;
  padding-left: var(--space-2);
}
.sidenav-item.current-article::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-1);
  bottom: var(--space-1);
  width: 3px;
  background: var(--se-primary-600);
}
[dir=rtl] .sidenav-item.current-article {
  padding-left: 0;
  padding-right: var(--space-2);
}
[dir=rtl] .sidenav-item.current-article::before {
  left: auto;
  right: 0;
}
.article-sidebar-item {
  display: inline-block;
  margin-top: var(--space-2);
  color: #A41016;
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.article-sidebar-item:hover,
.article-sidebar-item:focus {
  color: #ED1C24;
  text-decoration: underline;
}

/* --- Comments -------------------------------------------------------- */
.article-comments {
  border-top: 1px solid var(--se-secondary-100);
  padding-top: var(--space-4);
}
.comment-heading,
.recent-articles-title,
.related-articles-title {
  font-size: var(--type-xl);
  line-height: var(--lh-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.comment-overview {
  margin-bottom: var(--space-3);
}
.comment-callout {
  color: var(--se-secondary-600);
  font-size: var(--type-sm);
}
.comment-callout a {
  color: #A41016;
}
.comment-callout a:hover,
.comment-callout a:focus {
  color: #ED1C24;
}
.comment {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--se-secondary-100);
}
.comment-wrapper.comment-official {
  background: color-mix(in srgb, var(--se-primary-600) 4%, transparent);
  border-left: 3px solid var(--se-primary-600);
  padding: var(--space-2);
}
.comment-meta {
  color: var(--se-secondary-600);
  font-size: var(--type-sm);
}
.comment-author a,
.comment-author a:visited {
  color: var(--se-black);
  font-weight: 700;
}
.comment-author a:hover,
.comment-author a:focus {
  color: #ED1C24;
}
.comment-body {
  color: var(--se-black);
  line-height: 1.6;
  margin-top: var(--space-1);
}
.comment-body a {
  color: #A41016;
}
.comment-body a:hover,
.comment-body a:focus {
  color: #ED1C24;
}
.comment-vote.vote {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  color: var(--se-secondary-600);
}
.comment-vote .vote-up,
.comment-vote .vote-down {
  background: transparent;
  border: 1px solid var(--se-secondary-100);
  color: var(--se-secondary-600);
  border-radius: 50%;
  width: var(--space-4);
  height: var(--space-4);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.comment-vote .vote-up:hover,
.comment-vote .vote-down:hover,
.comment-vote .vote-up:focus,
.comment-vote .vote-down:focus {
  border-color: var(--se-primary-600);
  color: var(--se-primary-600);
}
.comment-vote .vote-voted {
  background: var(--se-primary-600);
  border-color: var(--se-primary-600);
  color: var(--se-white);
}
.comment-vote .vote-down svg {
  transform: rotate(180deg);
}
.comment-vote .vote-sum {
  min-width: var(--space-3);
  text-align: center;
  font-weight: 700;
  color: var(--se-black);
}
.comment-form {
  padding: var(--space-3) 0;
}
.comment-pending,
.comment .status-label,
.status-label,
.status-label-pending-moderation {
  display: inline-block;
  padding: 0 var(--space-1);
  background: var(--se-secondary-100);
  color: var(--se-secondary-900);
  border-radius: var(--space-1);
  font-size: var(--type-sm);
  font-weight: 700;
}
.escalation-badge {
  background: var(--se-black);
  color: var(--se-white);
}
.community-badge {
  display: inline-block;
  padding: 0 var(--space-1);
  font-size: var(--type-sm);
  background: var(--se-secondary-100);
  color: var(--se-secondary-900);
  border-radius: var(--space-1);
  margin-right: var(--space-1);
}

/* --- Content tags ---------------------------------------------------- */
.content-tags p {
  color: var(--se-secondary-600);
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}
.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}
.content-tag-item {
  display: inline-flex;
}
.content-tag-item a,
.content-tag-item a:visited {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--se-secondary-100);
  color: var(--se-secondary-900);
  border-radius: calc(var(--space-2) + var(--space-1));
  font-size: var(--type-sm);
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.content-tag-item a:hover,
.content-tag-item a:focus {
  background: var(--se-primary-600);
  color: var(--se-white);
}

/* --- Attachments ----------------------------------------------------- */
.article-attachments {
  margin: var(--space-3) 0;
}
.attachments .attachment-item {
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--se-secondary-100);
  margin-bottom: 0;
}
.attachments .attachment-item:last-child {
  border-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: var(--se-primary-600);
  top: 50%;
  transform: translateY(-50%);
}
.attachment-meta-item {
  color: var(--se-secondary-600);
  font-size: var(--type-sm);
}

/* Stage 3d self-audit:
   1. Edits above block: no
   2. Assets: no
   3. Template text: n/a (templates edited in stage 6)
   4. !important: no
   5. Hardcoded colour: no
   6. Spacing: all --space-* tokens; 3px accent is a named sub-grid accent
   7. Semantic: n/a
   8. Stock markup respected: yes */

/* ========================================================================
   STAGE 3e — CROSS-CUTTING COMPONENTS
   ======================================================================== */

/* --- Button system (primary red, secondary outline) ------------------- */
/* Copenhagen's stock base button is a hollow-red outline which it also
   applies to subscribe/follow buttons. Our baseline: outline-red pill,
   solid-red on hover, solid-red with white text for button-primary. */
.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 #ED1C24;
  border-radius: var(--space-1);
  color: #ED1C24;
  font-size: var(--type-sm);
  line-height: 1;
  padding: var(--space-1) var(--space-3);
  min-height: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.button:hover,
.button:focus,
.button:active,
.pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover,
.pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus,
.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.button-primary,
.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: #ED1C24;
  color: #FFFFFF;
  border-color: #ED1C24;
}
.button.button-primary:hover,
.button.button-primary:focus,
.button.button-primary:active,
.subscriptions-subscribe button.button-primary:hover,
.article-subscribe button.button-primary:hover,
.section-subscribe button.button-primary:hover,
.community-follow button.button-primary:hover,
.split-button button.button-primary:hover {
  background-color: var(--se-primary-800);
  border-color: var(--se-primary-800);
  color: var(--se-white);
}
.button-large,
.hbs-form input[type=submit] {
  background-color: #ED1C24;
  color: #FFFFFF;
  border: 0;
  border-radius: var(--space-1);
  font-size: var(--type-base);
  line-height: 1;
  padding: var(--space-2) var(--space-4);
  min-height: var(--space-6);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.button-large:hover,
.button-large:focus,
.button-large:active,
.hbs-form input[type=submit]:hover,
.hbs-form input[type=submit]:focus,
.hbs-form input[type=submit]:active {
  background-color: var(--se-primary-800);
}
.button-large[disabled],
.hbs-form input[type=submit][disabled] {
  background-color: var(--se-secondary-300);
  color: var(--se-white);
}
.button-secondary {
  color: var(--se-black);
  border: 1px solid var(--se-secondary-300);
  background-color: var(--se-white);
}
.button-secondary:visited {
  color: var(--se-black);
}
.button-secondary:hover,
.button-secondary:focus,
.button-secondary:active {
  color: var(--se-black);
  border-color: var(--se-black);
  background-color: var(--se-secondary-100);
}
.button[data-disabled] {
  cursor: default;
  opacity: 0.5;
}

/* Focus ring for keyboard users — stays Primary 600 saturated */
.button:focus-visible,
.button-large:focus-visible,
.button-secondary:focus-visible,
.hbs-form input[type=submit]:focus-visible,
.article-subscribe button:focus-visible,
.section-subscribe button:focus-visible,
.community-follow button:focus-visible {
  outline: 3px solid #ED1C24;
  outline-offset: 2px;
}

/* --- Forms -------------------------------------------------------- */
.hbs-form input[type=text],
.hbs-form input[type=email],
.hbs-form input[type=password],
.hbs-form input[type=tel],
.hbs-form input[type=url],
.hbs-form input[type=number],
.hbs-form textarea,
.hbs-form select {
  border: 1px solid var(--se-secondary-300);
  border-radius: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--type-base);
  line-height: var(--lh-base);
  color: var(--se-black);
  background-color: var(--se-white);
  min-height: var(--space-5);
  width: 100%;
  box-sizing: border-box;
}
.hbs-form input[type=text]:focus,
.hbs-form input[type=email]:focus,
.hbs-form input[type=password]:focus,
.hbs-form input[type=tel]:focus,
.hbs-form input[type=url]:focus,
.hbs-form input[type=number]:focus,
.hbs-form textarea:focus,
.hbs-form select:focus {
  border-color: #ED1C24;
  outline: 2px solid color-mix(in srgb, #ED1C24 30%, transparent);
  outline-offset: 0;
}
.hbs-form label,
.form-field label {
  font-weight: 700;
  color: var(--se-black);
  margin-bottom: var(--space-1);
  display: inline-block;
}
.hbs-form .form-field {
  margin-bottom: var(--space-3);
}
.hbs-form .form-field-error,
.form-field-error {
  color: var(--se-primary-800);
  font-size: var(--type-sm);
  margin-top: var(--space-1);
}
.hbs-form .form-field-error input,
.hbs-form .form-field-error textarea,
.hbs-form .form-field-error select {
  border-color: var(--se-primary-800);
}

/* --- Tables / lists / definitions in content areas (legibility) ------ */
.article-content dt,
.article-content dl dt {
  font-weight: 700;
  margin-top: var(--space-2);
}
.article-content dd {
  margin-left: var(--space-3);
  margin-bottom: var(--space-1);
}

/* --- SE help banner (home footer + article sidebar variant) --------- */
.se-help-banner {
  background: linear-gradient(135deg, #ED1C24 0%, var(--se-primary-800) 100%);
  color: var(--se-white);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--space-2);
  margin: var(--space-6) 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.se-help-banner::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, color-mix(in srgb, var(--se-white) 15%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.se-help-banner-heading {
  color: var(--se-white);
  font-size: var(--type-xl);
  line-height: var(--lh-xl);
  font-weight: 700;
  margin: 0 0 var(--space-1);
}
.se-help-banner-body {
  color: color-mix(in srgb, var(--se-white) 85%, transparent);
  font-size: var(--type-base);
  line-height: var(--lh-base);
  margin: 0 auto var(--space-3);
  max-width: 560px;
}
.se-help-banner .se-help-banner-cta,
.se-help-banner a.se-help-banner-cta,
.se-help-banner a.se-help-banner-cta:visited {
  display: inline-block;
  background: var(--se-white);
  color: var(--se-primary-800);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--space-1);
  font-weight: 700;
  font-size: var(--type-base);
  text-decoration: none;
  min-height: var(--space-5);
  line-height: calc(var(--space-5) - var(--space-1) - var(--space-1));
}
.se-help-banner .se-help-banner-cta:hover,
.se-help-banner .se-help-banner-cta:focus {
  background: var(--se-black);
  color: var(--se-white);
}

/* Sidebar variant on the article page */
.se-help-banner--sidebar {
  padding: var(--space-3);
  margin: var(--space-3) 0 0;
  text-align: left;
  border-radius: var(--space-1);
}
.se-help-banner--sidebar::after {
  display: none;
}
.se-help-banner--sidebar .se-help-banner-heading {
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
}
.se-help-banner--sidebar .se-help-banner-body {
  font-size: var(--type-sm);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}

/* --- Pagination ------------------------------------------------------ */
.pagination {
  display: flex;
  gap: var(--space-1);
  justify-content: center;
  margin: var(--space-4) 0;
  list-style: none;
  padding: 0;
}
.pagination a,
.pagination a:visited {
  color: #A41016;
}

/* Stage 3e self-audit:
   1. Edits above block: no
   2. Assets: no
   3. Template text: n/a
   4. !important: no
   5. Hardcoded colour: no
   6. Spacing: on-grid; radial-gradient sizes use 180px (space-10 + space-10 + space-4 worth) — cosmetic decoration, not layout
   7. Semantic: n/a
   8. Stock markup respected: yes */

/* ========================================================================
   STAGE 7 — CROSS-PAGE MINOR FIXES
   Targeted tweaks surfaced by a walkthrough of remaining pages. Kept
   intentionally light — structural redesigns are out of scope.
   ======================================================================== */

/* --- Shared sub-nav (section, search-results) ------------------------- */
/* On pages still using the stock .sub-nav layout, the breadcrumbs + scoped
   search sit on the light page background. Colour the breadcrumbs for
   contrast and give the wrapper some vertical rhythm. */
.sub-nav {
  margin-bottom: var(--space-4);
}
.sub-nav .breadcrumbs li {
  color: var(--se-secondary-600);
}
.sub-nav .breadcrumbs li a,
.sub-nav .breadcrumbs li a:visited {
  color: #A41016;
}
.sub-nav .breadcrumbs li a:hover,
.sub-nav .breadcrumbs li a:focus {
  color: #ED1C24;
}

/* --- Section page listings ------------------------------------------- */
.section-list-item {
  border-bottom-color: var(--se-secondary-100);
}
.section-list-item:first-child {
  border-top-color: var(--se-secondary-100);
}
.section-list-item a {
  color: var(--se-black);
  padding: var(--space-2) 0;
}
.section-list-item a:hover,
.section-list-item a:focus {
  color: #ED1C24;
  text-decoration: none;
}

/* --- Search results sidebar (unscope sidenav-item colour) ------------ */
/* Stage 3d's .sidenav-item rules make the search-results filter sidebar
   look like the article TOC (each filter gets a bottom border). Override
   back to flat stacked for the filters panel. */
.search-results-sidebar .sidenav-item {
  border-bottom: 0;
  padding: var(--space-1) 0;
  color: var(--se-secondary-900);
}
.search-results-sidebar .sidenav-item.current,
.search-results-sidebar .sidenav-item[aria-current=page] {
  color: var(--se-primary-600);
  font-weight: 700;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: var(--se-secondary-100);
  color: var(--se-secondary-900);
  border-radius: calc(var(--space-2) + var(--space-1));
  padding: 2px var(--space-2);
}
.search-results-list > li {
  border-bottom: 1px solid var(--se-secondary-100);
  padding: var(--space-3) 0;
}

/* --- Error page ------------------------------------------------------ */
.error-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-3);
  text-align: center;
}
.error-page h1 {
  font-size: clamp(var(--type-2xl), 4vw, var(--type-3xl));
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.error-page h2 {
  color: var(--se-secondary-900);
  margin-bottom: var(--space-3);
}

/* --- Article: relax stock min-width that breaks with help-banner ---- */
/* Copenhagen sets .article { min-width: 640px } at >=1024px which can
   cause horizontal scroll when the sidebar widens with the help-banner
   card. Lower it — the max-width 66% already bounds the column. */
@media (min-width: 1024px) {
  .article {
    min-width: 0;
  }
}

/* --- Recent activity item heading sizing ---------------------------- */
.recent-activity-item h3 {
  font-size: var(--type-base);
  line-height: var(--lh-base);
}

/* --- Request form + request list (light chrome) --------------------- */
/* These pages use form-wide rules already covered in Stage 3e. Extra
   light touches for the list tables. */
.requests-table,
.request-table {
  width: 100%;
  border-collapse: collapse;
}
.requests-table th,
.request-table th {
  text-align: start;
  font-weight: 700;
  border-bottom: 2px solid var(--se-black);
  padding: var(--space-1) var(--space-2);
}
.requests-table td,
.request-table td {
  border-bottom: 1px solid var(--se-secondary-100);
  padding: var(--space-1) var(--space-2);
}

/* --- Community topic + post lists, card-style tile parity ----------- */
.topic-list-item,
.post-list-item {
  border-bottom: 1px solid var(--se-secondary-100);
  padding: var(--space-3) 0;
}

/* Stage 7 self-audit:
   1. Edits above block: no
   2. Assets: no
   3. Template text: n/a
   4. !important: no
   5. Hardcoded colour: no
   6. Spacing: on-grid; 2px border on table th is a design decision (hairline
      border is 1px, anchor border is 2px, both conventional)
   7. Semantic: n/a
   8. Stock markup respected: yes */

/* ========================================================================
   HOME REFINEMENT PASS — 2026-05-05
   Scope: home page only. Logo sizing, category tile grid, recent activity,
   help banner. Category/article/other pages untouched.
   ======================================================================== */

/* --- Logo sizing for SE white wordmark -------------------------------- */
/* Stock Copenhagen caps the logo at 37px max-height. The SE wordmark
   reads better at a larger size on the black header bar. */
.header .logo img {
  max-height: var(--space-4);
  width: auto;
  display: block;
}

/* --- Category tile grid (home) --------------------------------------- */
/* Overrides the earlier Stage 3b .blocks-list rules because this is a
   distinct visual pattern: title bar + artwork panel, 4/2/1 responsive
   grid tied to specific breakpoints (not the generic token breakpoints).
   Scoped under .categories-section so other pages that use .blocks-list
   (if any) aren't affected. */
.categories-section .blocks-list,
.categories-section ul.blocks-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.categories-section .blocks-item {
  width: auto;
  max-width: none;
  margin: 0;
  flex: none;
  aspect-ratio: auto;  
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--se-secondary-900);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--se-black) 10%, transparent),
              0 1px 2px color-mix(in srgb, var(--se-black) 6%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.categories-section .blocks-item::after {
  display: none; /* Kill the Stage 3b hover underline accent */
}
.categories-section .blocks-item:hover,
.categories-section .blocks-item:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 var(--space-2) var(--space-3) color-mix(in srgb, var(--se-black) 18%, transparent),
              0 2px var(--space-1) color-mix(in srgb, var(--se-black) 10%, transparent);
  background: var(--se-secondary-900);
}
.categories-section .blocks-item:hover *,
.categories-section .blocks-item:focus *,
.categories-section .blocks-item:active * {
  color: var(--se-white);
}

/* Tile link composed of: title bar (44px) docked at the top, artwork
   fills the rest. Image rendered as the link's own background so the
   custom property is consumed on a child of .blocks-item (one inheritance
   hop) instead of on a pseudo (two hops through flex item). Fallback order:
   background-color always paints, background-image paints over it if
   --category-image resolves to a valid URL; 404s fall back silently to
   background-color — CSS url() never produces broken-image placeholders. */
.categories-section .blocks-item-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 0;
  color: var(--se-white);
  text-align: left;
  border-radius: 10px;
  overflow: hidden;
  /* background-color: var(--se-black);  /* changed: black fill behind contain
  background-image: var(--category-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; */
}
.categories-section .blocks-item-link:visited,
.categories-section .blocks-item-link:hover,
.categories-section .blocks-item-link:active {
  color: var(--se-white);
  text-decoration: none;
}
.categories-section .blocks-item-link:focus {
  outline: 0;
  box-shadow: inset 0 0 0 3px #ED1C24;
}
.categories-section .blocks-item-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;          /* added: horizontally centre */
  text-align: center;               /* added: for multi-line wrap */
  padding: 0 var(--space-2);
  min-height: 44px;
  background: var(--se-secondary-900);
  color: var(--se-white);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: var(--lh-base);
  font-weight: 600;
  margin: 0;
  border-bottom: 0;
}
/* Artwork pseudo retired — image now renders as .blocks-item-link's own
   background. Explicitly disable any earlier-cascade ::after on this
   selector so it can't introduce an empty flex item that would push the
   title bar out of position. */
.categories-section .blocks-item-link::after {
  content: "";
  display: block;
  flex: 1 1 auto;
  aspect-ratio: 2 / 1;       /* artwork is 2:1 */
  background-color: var(--se-black);
  background-image: var(--category-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Hide the category description inside the tile — mockup doesn't show it. */
.categories-section .blocks-item-description {
  display: none;
}

@media (max-width: 1024px) {
  .categories-section .blocks-list,
  .categories-section ul.blocks-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .categories-section .blocks-list,
  .categories-section ul.blocks-list {
    grid-template-columns: 1fr;
  }
  .categories-section .blocks-item {
   aspect-ratio: auto;
  }
}

/* --- Popular Articles + Recent Activity: shared card list pattern ---- */
/* Both sections render as a 2-col grid of clickable cards. Each card has
   padding, a bottom-border separator, a light-grey hover bg, and a right
   chevron. The Popular Articles HTML nests a single <a> inside
   .promoted-articles-item; the Recent Activity HTML emits
   .recent-activity-item as an <li> with two separate anchors inside
   (section-name eyebrow + article-title link). So the card chrome
   attaches to the *item*, not the anchor, in both cases — this way the
   whole row feels like one clickable card regardless of which helper
   rendered it. */

.promoted-articles,
.activity .recent-activity-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .promoted-articles,
  .activity .recent-activity-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--space-4);
  }
}

/* Card chrome — applied to the list item container on both sections. */
.promoted-articles-item,
.activity .recent-activity-item {
  position: relative;
  border: 0;
  border-bottom: 1px solid var(--se-secondary-100);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  margin: 0;
  overflow: visible;
  transition: background-color 0.12s ease;
  width: auto;
}
.promoted-articles-item:hover,
.promoted-articles-item:focus-within,
.activity .recent-activity-item:hover,
.activity .recent-activity-item:focus-within {
  background-color: var(--se-secondary-100);
}

/* Chevron indicator on the right edge, vertically centred. */
.promoted-articles-item::after,
.activity .recent-activity-item::after {
  content: "\203A"; /* U+203A — single right-angle quotation mark */
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--se-secondary-600);
  font-size: var(--type-xl);
  line-height: 1;
  font-weight: 400;
  pointer-events: none;
  transition: color 0.12s ease, transform 0.18s ease;
}
.promoted-articles-item:hover::after,
.promoted-articles-item:focus-within::after,
.activity .recent-activity-item:hover::after,
.activity .recent-activity-item:focus-within::after {
  color: var(--se-primary-600);
  transform: translateY(-50%) translateX(3px);
}
[dir=rtl] .promoted-articles-item::after,
[dir=rtl] .activity .recent-activity-item::after {
  content: "\2039"; /* U+2039 — single left-angle quotation mark */
  right: auto;
  left: var(--space-2);
}

/* The anchor inside each card — inner text only, no border/padding. */
.promoted-articles-item a {
  display: block;
  border: 0;
  padding: 0;
  color: var(--se-black);
  font-size: var(--type-base);
  line-height: var(--lh-base);
  font-weight: 700;
}
.promoted-articles-item a::before {
  content: none;
}
.promoted-articles-item a:hover,
.promoted-articles-item a:focus {
  color: #ED1C24;
  text-decoration: none;
  padding-left: 0;
}
.promoted-articles-item:last-child,
.activity .recent-activity-item:last-child {
  border-bottom: 1px solid var(--se-secondary-100);
}

/* Recent-activity inner anchors: the section-name eyebrow (red, uppercase)
   sits above the article-title link (black, bold). Both are block-level
   links inside the <li>. The chevron and background belong to the <li>. */
.activity .recent-activity-item-parent {
  display: block;
  width: auto;
  margin: 0 0 var(--space-1);
  color: var(--se-primary-600);
  font-size: var(--type-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: normal;
}
.activity .recent-activity-item-parent a,
.activity .recent-activity-item-parent a:visited {
  color: var(--se-primary-600);
}
.activity .recent-activity-item-parent a:hover,
.activity .recent-activity-item-parent a:focus {
  color: var(--se-primary-800);
  text-decoration: underline;
}
.activity .recent-activity-item-link {
  display: block;
  width: auto;
  margin: 0;
  font-size: var(--type-base);
  line-height: var(--lh-base);
  font-weight: 700;
  color: var(--se-black);
}
.activity .recent-activity-item-link:hover,
.activity .recent-activity-item-link:focus {
  color: #ED1C24;
  text-decoration: none;
}
/* Hide the "N days ago / 0 comments" meta line per brief. */
.activity .recent-activity-item-meta {
  display: none;
}

/* Recent-activity controls (the "See more" / "See less" links at the
   bottom of the list). Styled as a right-aligned red link with an arrow,
   matching the convention used elsewhere in the theme for "View all"
   CTAs. Popular Articles has no equivalent helper output — it's just
   what Zendesk emits from {{recent_activity}}. */
.activity .recent-activity-controls {
  padding-top: var(--space-2);
  text-align: right;
}
.activity .recent-activity-controls a,
.activity .recent-activity-controls a:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: #A41016;
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.activity .recent-activity-controls a::after {
  content: "\2192"; /* U+2192 rightwards arrow */
  font-size: var(--type-base);
  line-height: 1;
  transition: transform 0.18s ease;
}
[dir=rtl] .activity .recent-activity-controls a::after {
  content: "\2190"; /* U+2190 leftwards arrow */
}
.activity .recent-activity-controls a:hover,
.activity .recent-activity-controls a:focus {
  color: #ED1C24;
  text-decoration: none;
}
.activity .recent-activity-controls a:hover::after,
.activity .recent-activity-controls a:focus::after {
  transform: translateX(3px);
}
[dir=rtl] .activity .recent-activity-controls a:hover::after,
[dir=rtl] .activity .recent-activity-controls a:focus::after {
  transform: translateX(-3px);
}

/* --- Still need help banner — rewritten for full-bleed solid red ----- */
/* Reset the Stage 3e .se-help-banner styling and re-define from scratch
   as a flat edge-to-edge bar. The template now renders this outside the
   .container wrapper so full-bleed doesn't need negative margins. */
.se-help-banner {
  background: #ED1C24;
  background-image: none;
  color: var(--se-white);
  margin: var(--space-6) 0 0;
  padding: var(--space-5) max(5%, calc((100% - 1160px) / 2));
  border-radius: 0;
  text-align: left;
  position: relative;
  overflow: visible;
}
.se-help-banner::after {
  /* Kill the Stage 3e decorative radial */
  display: none;
}
.se-help-banner-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .se-help-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
}
.se-help-banner-text {
  flex: 1 1 auto;
}
.se-help-banner .se-help-banner-heading {
  color: var(--se-white);
  font-size: var(--type-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
  margin: 0 0 var(--space-1);
}
.se-help-banner .se-help-banner-body {
  color: var(--se-white);
  font-size: var(--type-base);
  line-height: var(--lh-base);
  margin: 0;
  max-width: 640px;
}
.se-help-banner .se-help-banner-cta,
.se-help-banner a.se-help-banner-cta,
.se-help-banner a.se-help-banner-cta:visited {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--se-white);
  color: #ED1C24;
  padding: var(--space-1) var(--space-4);
  min-height: var(--space-5);
  border-radius: var(--space-1);
  font-weight: 700;
  font-size: var(--type-base);
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.se-help-banner .se-help-banner-cta:hover,
.se-help-banner .se-help-banner-cta:focus {
  background: var(--se-primary-800);
  color: var(--se-white);
}

/* Sidebar variant (article page) — keep Stage 3e compact treatment;
   re-establish the styles removed by the banner rewrite above. */
.se-help-banner--sidebar {
  background: linear-gradient(135deg, #ED1C24 0%, var(--se-primary-800) 100%);
  padding: var(--space-3);
  margin: var(--space-3) 0 0;
  text-align: left;
  border-radius: var(--space-1);
}
.se-help-banner--sidebar .se-help-banner-inner {
  display: block;
  max-width: none;
  margin: 0;
}
.se-help-banner--sidebar .se-help-banner-text {
  margin-bottom: var(--space-2);
}
.se-help-banner--sidebar .se-help-banner-heading {
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
}
.se-help-banner--sidebar .se-help-banner-body {
  font-size: var(--type-sm);
  line-height: 1.5;
}

/* ========================================================================
   HOME REFINEMENT PASS — FOLLOW-UP FIXES — 2026-05-05
   Scope: home page only. Top-of-page spacing, help banner rewrite.
   ======================================================================== */

/* --- Home: top spacing after removing hero --------------------------- */
/* Without the hero, .categories-section is the first content block and
   sits flush against the black header. Add vertical breathing room.
   Scoped by .categories-section class which only renders on home. */
.categories-section {
  padding-top: var(--space-6);
}
@media (min-width: 768px) {
  .categories-section {
    padding-top: var(--space-8);
  }
}

/* --- Help banner: clean rewrite to match mockup ---------------------- */
/* Consolidates the earlier Stage 3e + home-refinement rules so there's
   one source of truth. Text block on the left (heading + body stacked),
   CTA button on the right, vertically centred at >=768px, max 1160px
   inner content inside a full-bleed red bar. */
.se-help-banner {
  background: #ED1C24;
  background-image: none;
  color: var(--se-white);
  margin: var(--space-6) 0 0;
  padding: var(--space-6) max(5%, calc((100% - 1160px) / 2));
  border-radius: 0;
  text-align: left;
  position: relative;
  overflow: visible;
}
.se-help-banner::after {
  display: none;
  content: none;
}
.se-help-banner-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .se-help-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
}
.se-help-banner-text {
  flex: 1 1 auto;
  max-width: 720px;
}
.se-help-banner .se-help-banner-heading,
.se-help-banner h2.se-help-banner-heading {
  color: var(--se-white);
  font-size: var(--type-2xl);
  line-height: var(--lh-2xl);
  font-weight: 700;
  margin: 0 0 var(--space-1);
  max-width: none;
}
.se-help-banner .se-help-banner-body,
.se-help-banner p.se-help-banner-body {
  color: var(--se-white);
  font-size: var(--type-base);
  line-height: var(--lh-base);
  margin: 0;
  max-width: 720px;
}
.se-help-banner .se-help-banner-cta,
.se-help-banner a.se-help-banner-cta,
.se-help-banner a.se-help-banner-cta:visited {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--se-white);
  color: #ED1C24;
  padding: var(--space-1) var(--space-4);
  min-height: var(--space-5);
  border-radius: var(--space-1);
  font-weight: 700;
  font-size: var(--type-base);
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.se-help-banner .se-help-banner-cta:hover,
.se-help-banner .se-help-banner-cta:focus {
  background: var(--se-primary-800);
  color: var(--se-white);
}

/* Sidebar variant (article page) re-established — block layout, smaller
   type, gradient background. Selectors scoped to the modifier so the
   base .se-help-banner-* rules above don't win. */
.se-help-banner.se-help-banner--sidebar {
  background: linear-gradient(135deg, #ED1C24 0%, var(--se-primary-800) 100%);
  padding: var(--space-3);
  margin: var(--space-3) 0 0;
  text-align: left;
  border-radius: var(--space-1);
}
.se-help-banner--sidebar .se-help-banner-inner {
  display: block;
  max-width: none;
  margin: 0;
  flex-direction: column;
}
.se-help-banner--sidebar .se-help-banner-text {
  margin-bottom: var(--space-2);
  max-width: none;
}
.se-help-banner--sidebar .se-help-banner-heading,
.se-help-banner--sidebar h2.se-help-banner-heading {
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
}
.se-help-banner--sidebar .se-help-banner-body,
.se-help-banner--sidebar p.se-help-banner-body {
  font-size: var(--type-sm);
  line-height: 1.5;
}

/* Follow-up fix self-audit:
   1. Edits above override block: no
   2. Assets touched: no
   3. Template text hardcoded: no — contact_support key swap to submit_a_request is a Copenhagen-shipped key (no translation addition needed)
   4. !important: no
   5. Hardcoded colour: no
   6. Spacing: on-grid (space-6, space-8 for section padding; space-1..6 for banner rhythm)
   7. Semantic: unchanged (h2 preserved, aria-labelledby preserved)
   8. Stock markup respected: yes */

/* Home refinement self-audit:
   1. Edits above override block: no
   2. Assets touched: no (settings/logo.png replacement is Phil's manual step, flagged in BUILD_NOTES)
   3. Template text hardcoded: no — all via {{t}} (only new user-facing string is the help banner, keys already added in Stage 4)
   4. !important: no
   5. Hardcoded colour: no — all $setting or var(--se-*). One 10px border-radius literal for tile corners (brief-specified, not a token — added intentionally to match SE reference)
   6. Off-grid spacing: tile title-bar min-height 44px (brief said ~40-48px, 44px is accessibility touch-target standard); 10px border-radius (brief-specified). All other padding/margin on 8px grid
   7. Semantic: id=main-content moved to knowledge-base section so skip-nav still lands on primary content. h1 visibility-hidden preserved. New .categories-section class added to parent for grid scoping
   8. Stock markup respected: yes — categories loop body unchanged, promoted_articles unchanged, recent_activity helper output unchanged (restyled via cascade), community {{#if}} block removed entirely (per brief) */

/* ========================================================================
   FOOTER REDESIGN — 2026-05-05
   Full restructure to SE corporate pattern. Replaces stock .footer chrome
   with a new .se-footer tree. Two rows of bullet-separated links, locale
   pill top-right, copyright + legal below. Full-bleed black.
   ======================================================================== */

.se-footer {
  background: var(--se-black);
  color: var(--se-white);
  padding: var(--space-6) max(5%, calc((100% - 1160px) / 2));
  margin: 0;
  border: 0;
  /* Push default main-content margins away so the footer sits cleanly
     without any stock-Copenhagen border-top/margin-top interactions. */
}
.se-footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}

/* --- Rows ------------------------------------------------------------ */
.se-footer-row {
  margin: 0 0 var(--space-3);
}
.se-footer-row:last-of-type {
  margin-bottom: 0;
}
.se-footer-row-primary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.se-footer-row-secondary {
  display: flex;
  flex-wrap: wrap;
}

/* --- Link lists (both rows share) ------------------------------------ */
.se-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.se-footer-links li {
  display: inline-flex;
  align-items: center;
}
.se-footer-links li:not(:last-child)::after {
  content: "\2022"; /* U+2022 bullet */
  margin: 0 var(--space-2);
  color: var(--se-secondary-600);
  font-size: var(--type-sm);
  pointer-events: none;
}
.se-footer-links a,
.se-footer-links a:visited {
  color: var(--se-white);
  text-decoration: none;
  font-size: var(--type-sm);
  line-height: var(--lh-sm);
  padding: var(--space-1) 0;
  transition: color 0.12s ease;
}
.se-footer-links a:hover,
.se-footer-links a:focus {
  color: var(--se-primary-400);
  text-decoration: underline;
}
.se-footer-row-secondary .se-footer-links a {
  color: var(--se-secondary-100);
}
.se-footer-row-secondary .se-footer-links a:hover,
.se-footer-row-secondary .se-footer-links a:focus {
  color: var(--se-primary-400);
}

/* --- Locale pill ----------------------------------------------------- */
.se-footer-locale {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}
.se-footer-locale-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--se-white);
  color: var(--se-black);
  border: 0;
  border-radius: var(--space-3);
  padding: var(--space-1) var(--space-2);
  min-height: var(--space-4);
  font-size: var(--type-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.se-footer-locale-toggle:hover,
.se-footer-locale-toggle:focus {
  background: var(--se-secondary-100);
  color: var(--se-black);
  outline: 0;
}
.se-footer-locale-toggle .dropdown-chevron-icon {
  color: var(--se-black);
  transition: transform 0.18s ease;
}
.se-footer-locale-toggle[aria-expanded=true] .dropdown-chevron-icon {
  transform: rotate(180deg);
}
.se-footer-locale .dropdown-menu {
  bottom: calc(100% + var(--space-1));
  top: auto;
  left: auto;
  right: 0;
  background: var(--se-white);
  border: 1px solid var(--se-secondary-100);
  border-radius: var(--space-1);
  box-shadow: 0 var(--space-1) var(--space-3) color-mix(in srgb, var(--se-black) 30%, transparent);
  padding: var(--space-1) 0;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
}
.se-footer-locale .dropdown-menu a,
.se-footer-locale .dropdown-menu a:visited {
  display: block;
  padding: var(--space-1) var(--space-2);
  color: var(--se-secondary-900);
  text-decoration: none;
  font-size: var(--type-sm);
}
.se-footer-locale .dropdown-menu a:hover,
.se-footer-locale .dropdown-menu a:focus {
  background: color-mix(in srgb, var(--se-primary-600) 6%, transparent);
  color: var(--se-secondary-900);
}

/* --- Legal / copyright block ---------------------------------------- */
.se-footer-legal {
  margin-top: var(--space-4);
  color: var(--se-secondary-300);
  font-size: var(--type-sm);
  line-height: 1.5;
}
.se-footer-legal p {
  margin: 0 0 var(--space-1);
  max-width: 960px;
}
.se-footer-legal p:last-child {
  margin-bottom: 0;
}

/* --- Stock .footer rules no longer apply; the new footer uses .se-footer.
   Explicit null-out below defends against any later cascade overlap with
   earlier Stage 3a/7 .footer rules if a theme change ever re-adds stock
   footer markup. Empty rule intentionally, to document the decoupling. */
.footer.se-footer {
  /* no-op — the new footer uses .se-footer class only */
}

/* Footer redesign self-audit:
   1. Edits above override block: no
   2. Assets touched: no
   3. Template text hardcoded: yes — user-facing link labels and legal copy are literal English per the brief (translation key resolution issues, hardcoded acceptable for V1, phil's call)
   4. !important: no
   5. Hardcoded colour: no — all via var(--se-*) tokens
   6. Off-grid spacing: no — locale pill border-radius var(--space-3) = 24px, min-heights on tokens, padding all tokens
   7. Semantic: <footer role="contentinfo"> preserved, semantic <ul>/<li> for link groups, dropdown preserves aria-haspopup/aria-expanded from stock, language anchors retain rel=nofollow
   8. Stock markup respected: n/a — footer.hbs fully rewritten per brief (outside the usual "don't touch templates" rule). Header, article, category, home templates all untouched. */

/* ========================================================================
   CATEGORY PAGE REFINEMENT — 2026-05-05
   Full-width hero image, sidebar, scoped search, fixed section cards.
   ======================================================================== */

/* --- Full-bleed hero image ------------------------------------------- */
/* Pure visual element — no text, no overlay. Scoped to .category-hero-image
   (new) so it doesn't collide with the Stage 3c .category-hero watermark
   class which still renders on article pages. */
.category-hero-image {
  display: block;
  width: 100%;
  height: 200px;
  background-color: var(--se-secondary-900);
  background-image: var(--category-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
}
@media (min-width: 768px) {
  .category-hero-image {
    height: 320px;
  }
}
@media (min-width: 1024px) {
  .category-hero-image {
    height: 400px;
  }
}

/* --- Intro block (breadcrumbs + title below hero) -------------------- */
.category-intro {
  padding-top: var(--space-4);
  padding-bottom: var(--space-2);
}
.category-intro .breadcrumbs {
  margin: 0 0 var(--space-2);
}
.category-intro .breadcrumbs li {
  color: var(--se-secondary-600);
}
.category-intro .breadcrumbs li a,
.category-intro .breadcrumbs li a:visited {
  color: #A41016;
}
.category-intro .breadcrumbs li a:hover,
.category-intro .breadcrumbs li a:focus {
  color: #ED1C24;
}
.category-intro .page-header {
  margin: 0;
}
.category-intro .page-header h1 {
  color: var(--se-black);
  font-size: clamp(var(--type-2xl), 4vw, var(--type-3xl));
  line-height: 1.1;
  margin: 0 0 var(--space-1);
}
.category-intro .page-header-description {
  color: var(--se-secondary-600);
  font-style: normal;
  margin: 0;
  max-width: 720px;
}

/* --- Scoped search bar ----------------------------------------------- */
.category-search-wrapper {
  margin: var(--space-3) 0 var(--space-4);
  max-width: none;
}
.se-scoped-search {
  position: relative;
  display: block;
}
.se-scoped-search .search {
  border-radius: var(--space-1);
  border-color: var(--se-secondary-300);
}
.se-scoped-search .search input[type=search] {
  height: var(--space-6);
  font-size: var(--type-base);
}
[dir=ltr] .se-scoped-search .search input[type=search] {
  padding-left: var(--space-5);
  padding-right: var(--space-2);
}
[dir=rtl] .se-scoped-search .search input[type=search] {
  padding-right: var(--space-5);
  padding-left: var(--space-2);
}
.se-scoped-search .search-icon {
  width: var(--space-2);
  height: var(--space-2);
  left: var(--space-2);
  color: var(--se-secondary-600);
}
[dir=rtl] .se-scoped-search .search-icon {
  left: auto;
  right: var(--space-2);
}
.se-scoped-search .search button[type=submit],
.se-scoped-search .search input[type=submit] {
  background: #ED1C24;
  color: var(--se-white);
  border: 0;
  border-radius: 0 var(--space-1) var(--space-1) 0;
  padding: 0 var(--space-4);
  font-weight: 700;
  font-size: var(--type-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.se-scoped-search .search button[type=submit]:hover,
.se-scoped-search .search button[type=submit]:focus,
.se-scoped-search .search input[type=submit]:hover,
.se-scoped-search .search input[type=submit]:focus {
  background: var(--se-primary-800);
}

/* --- Category layout: sidebar + content ------------------------------ */
.category-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 768px) {
  .category-layout {
    grid-template-columns: 240px 1fr;
    gap: var(--space-5);
  }
}
@media (min-width: 1024px) {
  .category-layout {
    grid-template-columns: 280px 1fr;
  }
}

/* --- Sidebar --------------------------------------------------------- */
.se-category-sidebar {
  min-width: 0;
}
.se-sidebar-block {
  margin-bottom: var(--space-4);
}
.se-sidebar-block:last-child {
  margin-bottom: 0;
}
.se-sidebar-heading {
  font-size: var(--type-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--se-secondary-600);
  margin: 0 0 var(--space-2);
}
.se-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.se-sidebar-list li {
  margin: 0;
}
.se-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  color: var(--se-secondary-900);
  border-radius: var(--space-1);
  text-decoration: none;
  font-size: var(--type-sm);
  line-height: var(--lh-base);
  border-left: 3px solid transparent;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.se-sidebar-item:visited {
  color: var(--se-secondary-900);
}
.se-sidebar-item:hover,
.se-sidebar-item:focus {
  background: color-mix(in srgb, var(--se-primary-600) 6%, transparent);
  color: var(--se-primary-800);
  text-decoration: none;
}
.se-sidebar-item-active,
.se-sidebar-item-active:visited {
  background: color-mix(in srgb, var(--se-primary-600) 8%, transparent);
  color: var(--se-primary-800);
  border-left-color: var(--se-primary-600);
  font-weight: 700;
}
[dir=rtl] .se-sidebar-item {
  border-left: 0;
  border-right: 3px solid transparent;
}
[dir=rtl] .se-sidebar-item-active {
  border-right-color: var(--se-primary-600);
}
.se-sidebar-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.se-sidebar-item-plain {
  border-left: 0;
  padding-left: 0;
  padding-right: 0;
}
.se-sidebar-item-plain:hover,
.se-sidebar-item-plain:focus {
  background: transparent;
  color: #ED1C24;
}
[dir=rtl] .se-sidebar-item-plain {
  border-right: 0;
}
.se-sidebar-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-3);
  height: var(--space-3);
  padding: 0 var(--space-1);
  background: var(--se-secondary-100);
  color: var(--se-secondary-900);
  border-radius: var(--space-3);
  font-size: var(--type-sm);
  font-weight: 700;
  line-height: 1;
}
.se-sidebar-badge-active {
  background: var(--se-primary-600);
  color: var(--se-white);
}
.se-sidebar-all {
  display: inline-block;
  margin-top: var(--space-2);
  color: #A41016;
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.se-sidebar-all:hover,
.se-sidebar-all:focus {
  color: #ED1C24;
  text-decoration: underline;
}

/* --- Section cards: fix overflow, add icon, 2-col grid --------------- */
/* The earlier Stage 3c .section-tree rule used grid-template-columns:
   repeat(2, 1fr) at >=768px. With the new sidebar the content column is
   narrower, so we keep the 2-col grid but add min-width: 0 to grid items
   so long titles wrap instead of overflowing. */
.category-content {
  min-width: 0;
}
.category-content .section-tree {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .category-content .section-tree {
    grid-template-columns: repeat(2, 1fr);
  }
}
.category-content .section-tree .section {
  min-width: 0;
}
.category-content .section-tree-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--se-secondary-100);
  min-width: 0;
}
.category-content .section-tree-title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.category-content .section-tree-title a {
  display: block;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.category-content .article-list-item a {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.section-tree-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4);
  height: var(--space-4);
  background: var(--se-secondary-900);
  color: var(--se-white);
  border-radius: 6px;
}
.section-tree-icon svg {
  width: 16px;
  height: 16px;
}
/* Hide the badge entirely when no section-name match rendered an SVG
   inside it (using :not(:has(svg)) because the template leaves whitespace
   between the sibling {{#is}} blocks — :empty would not match). */
.section-tree-icon:not(:has(svg)) {
  display: none;
}

/* Category refinement self-audit:
   1. Edits above override block: no
   2. Assets touched: no
   3. Template text hardcoded: yes — SECTIONS, OTHER GAMES, All Topics, View All Games per brief (translation key resolution workaround)
   4. !important: no
   5. Hardcoded colour: no
   6. Off-grid spacing: section-tree-icon border-radius 6px (aesthetic, between --space-1 8px and 4px) and svg 16px (standard icon size, matches Lucide viewport); sidebar widths 240/280px (design choice for readability, documented in brief). All padding/margin on token grid.
   7. Semantic: <section>/<nav>/<aside> preserved, h1 on category title, h2 on section title, h3 on sidebar headings, aria-labels on nav, aria-current=page on active sidebar item, aria-hidden on the decorative hero image and icon, skip-nav still lands on #main-content
   8. Stock markup respected: categories loop body unchanged (added outer .section-tree-title-row wrapper + icon before existing h2 only), article-list loop body unchanged, see-all-articles preserved */

/* --- Category page: bottom spacing before footer -------------------- */
/* The .category-layout content block ends flush against the footer because
   .container has no bottom padding. Add bottom margin on the layout to
   match home-page rhythm before the footer. */
.category-layout {
  margin-bottom: var(--space-8);
}

/* ========================================================================
   SECTION PAGE REDESIGN — 2026-05-05
   Adopts the category page hero + scoped-search + card-list pattern.
   No sidebar (section.category.sections isn't exposed in Curlybars).
   Hero image set via JS from breadcrumb category ID — see script.js
   setHeroBackgroundFromBreadcrumb().
   ======================================================================== */

/* Section hero picks up identical styling to category hero via the shared
   .category-hero-image class also attached to the element in the template.
   Defensive: add .se-section-hero to sibling selectors on the existing
   rules so future CSS changes to one track the other. */
.se-section-hero {
  /* All visual styling inherited from .category-hero-image. This rule
     exists as an anchor for the JS selector and for any future section-
     specific adjustments. */
}

/* Single-column section content area (no sidebar on section pages) */
.se-section-content {
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .se-section-content {
    margin-bottom: var(--space-8);
  }
}

/* Eyebrow heading used by SUBSECTIONS / PROMOTED groupings above the
   article grid. Matches the uppercase red pattern used in the sidebar
   headings and recent-activity eyebrows. */
.se-content-eyebrow {
  font-size: var(--type-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--se-primary-600);
  margin: 0 0 var(--space-2);
}

/* Group spacing: SUBSECTIONS stack above the main article list */
.se-subsections,
.se-articles {
  margin-bottom: var(--space-4);
}
.se-articles:last-child {
  margin-bottom: 0;
}

/* Section page re-uses .promoted-articles card styling (Home / category
   list pattern) so no new card CSS needed. The article-list <ul> inside
   .se-subsections / .se-articles all already pick up the shared
   .promoted-articles rules defined earlier. */

/* Inline promoted marker — small red pill beside the article title inside
   the article card. Used on section pages since we can't filter the
   articles list into a separate "Promoted" row (filter helper isn't
   available in section_page presenter scope). */
.article-pill {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  font-size: var(--type-sm);
  font-weight: 700;
  line-height: calc(var(--space-2) + var(--space-1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--space-1);
  vertical-align: middle;
}
.article-pill-promoted {
  background: #ED1C24;
  color: var(--se-white);
}
[dir=rtl] .article-pill {
  margin-left: 0;
  margin-right: var(--space-1);
}

/* Section refinement self-audit:
   1. Edits above override block: no
   2. Assets touched: no
   3. Template text hardcoded: yes — SUBSECTIONS, PROMOTED hardcoded per brief
   4. !important: no
   5. Hardcoded colour: no — all via tokens
   6. Off-grid spacing: no
   7. Semantic: <section> for hero (aria-hidden, decorative), <header class="page-header"> preserved for title+description, section-subscribe {{subscribe}} preserved, pagination preserved, h1 for section name, h2 with .se-content-eyebrow for group headings, #main-content moved to the .se-section-content wrapper so skip-nav still lands on primary content
   8. Stock markup respected: stock Copenhagen structure fully replaced per brief; subscribe helper, pagination helper, internal lock icons, promoted/articles iteration all preserved */

/* ========================================================================
   ARTICLE PAGE REDESIGN — 2026-05-05
   Hero + breadcrumb + title + scoped search + article.body prose.
   Single-column layout; sidebar, author meta, share buttons removed.
   Votes, recently-viewed/related, comments preserved.
   Article body styling is the bulk of the work — all scoped to
   .article-body so it can't leak elsewhere.
   ======================================================================== */

/* Anchor rule for JS hero background setter — styling inherited from
   .category-hero-image class also applied on the element. */
.se-article-hero {
  /* No visual rules here — .category-hero-image does the work. */
}

/* Single-column article main — bottom spacing before footer. */
.se-article-main {
  margin-bottom: var(--space-6);
  max-width: 960px;
}
@media (min-width: 768px) {
  .se-article-main {
    margin-bottom: var(--space-8);
  }
}

/* Article title on the new white content band (below hero). Uses the
   existing .category-intro wrapper so breadcrumb styling already lines
   up — just size the <h1> larger and tighten the line-height. */
.category-intro .page-header h1 .icon-lock {
  color: var(--se-secondary-600);
  vertical-align: middle;
  margin-left: var(--space-1);
}

/* --- Article body: prose styling, scoped -------------------------- */
/* All rules in this block target .article-body so author-entered HTML
   gets consistent SE treatment without leaking into sidebars, footer,
   comments, etc. */

.article-body {
  font-size: var(--type-base);
  line-height: 1.6;
  color: var(--se-black);
}

/* Headings inside article body */
.article-body h2,
.article-body h3,
.article-body h4 {
  font-weight: 700;
  color: var(--se-black);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  padding-left: 0;
}
.article-body h2 {
  font-size: var(--type-2xl);
  line-height: var(--lh-2xl);
  /* Stage 3d rule at line ~5711 paints a 4px red vertical bar to the left
     of the heading text via ::before + padding-left. Re-enabled here —
     the V1 "content: none" override has been removed so that accent
     applies in the article body as the mockup specifies. */
}
.article-body h3 {
  font-size: var(--type-xl);
  line-height: var(--lh-xl);
}
.article-body h4 {
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
}
.article-body h2:first-child,
.article-body h3:first-child,
.article-body h4:first-child {
  margin-top: 0;
}

/* Paragraphs */
.article-body p {
  margin: 0 0 var(--space-3);
}

/* Inline links */
.article-body a,
.article-body a:visited {
  color: #A41016;
  text-decoration: underline;
}
.article-body a:hover,
.article-body a:focus {
  color: var(--se-primary-800);
  text-decoration: underline;
}

/* Strong / em already handled by foundation; no override needed */

/* Unordered lists: red-dot bullets per mockup.
   The Stage 3d rule at line ~5761 already defines red-dot bullets via
   ::before pseudos (8px Primary 600 circle at top 0.55em). Kept as-is —
   no V1 override, no revert needed. The rule below is empty-but-named
   to document the intentional preservation. */
.article-body ul {
  /* inherits Stage 3d rules */
}

/* Ordered lists: dark-grey square numbered badges via CSS counter.
   Mockup specifies Secondary 900 (#3D3D3D), not brand red. */
.article-body ol {
  counter-reset: se-article-step;
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-3);
}
.article-body ol > li {
  counter-increment: se-article-step;
  padding-left: calc(var(--space-4) + var(--space-2));
  position: relative;
  margin-bottom: var(--space-2);
}
.article-body ol > li::before {
  content: counter(se-article-step);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-3);
  height: var(--space-3);
  background: var(--se-secondary-900);
  color: var(--se-white);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--type-sm);
  line-height: 1;
}
[dir=rtl] .article-body ol > li {
  padding-left: 0;
  padding-right: calc(var(--space-4) + var(--space-2));
}
[dir=rtl] .article-body ol > li::before {
  left: auto;
  right: 0;
}
/* Nested lists revert to defaults — no red badges within a numbered list */
.article-body ol ol,
.article-body ul ul,
.article-body ol ul,
.article-body ul ol {
  margin: var(--space-1) 0 var(--space-1) var(--space-3);
}

/* Tables: header dark, alternating row bg, responsive scroll wrapper */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--type-base);
  display: block;
  overflow-x: auto;
}
@media (min-width: 768px) {
  .article-body table {
    display: table;
    overflow-x: visible;
  }
}
.article-body th,
.article-body td {
  border: 1px solid var(--se-secondary-100);
  padding: var(--space-2) var(--space-3);
  text-align: start;
  vertical-align: top;
}
.article-body th {
  background: var(--se-secondary-900);
  color: var(--se-white);
  font-weight: 700;
}
.article-body tr:nth-child(even) td {
  background: color-mix(in srgb, var(--se-secondary-100) 50%, transparent);
}

/* Code blocks */
.article-body pre {
  background: var(--se-secondary-100);
  border: 0;
  border-left: 4px solid #ED1C24;
  border-radius: 4px;
  padding: var(--space-3);
  overflow-x: auto;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: var(--type-sm);
  line-height: 1.5;
  color: var(--se-black);
  margin: var(--space-3) 0;
}
.article-body pre code {
  background: transparent;
  color: inherit;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* Inline code */
.article-body :not(pre) > code {
  background: var(--se-secondary-100);
  border: 0;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.925em;
  color: var(--se-secondary-900);
  margin: 0;
}

/* Callouts — author-added class hooks (.tip, .warning, .info, .callout).
   Progressive enhancement: articles that don't use the classes render
   normally; articles that do get the styled treatment. The ::before
   label uses CSS content so no markup edits required on the author side. */
.article-body .callout,
.article-body .tip,
.article-body .note,
.article-body .warning,
.article-body .info {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: 4px;
  border-left-width: 4px;
  border-left-style: solid;
  position: relative;
}
.article-body .callout::before,
.article-body .tip::before,
.article-body .note::before,
.article-body .warning::before,
.article-body .info::before {
  display: block;
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.article-body .tip,
.article-body .callout {
  background: color-mix(in srgb, #ED1C24 6%, transparent);
  border-left-color: #ED1C24;
}
.article-body .tip::before,
.article-body .callout::before {
  content: "TIP";
  color: #ED1C24;
}
/* .note — pink bg + red left border + NOTE label. Matches the mockup
   pink callout. Authors use <div class="note">...</div> in WYSIWYG. */
.article-body .note {
  background: color-mix(in srgb, #ED1C24 6%, transparent);
  border-left-color: #ED1C24;
}
.article-body .note::before {
  content: "NOTE";
  color: #ED1C24;
}
.article-body .warning {
  background: color-mix(in srgb, #F59E0B 10%, transparent);
  border-left-color: #B45309;
}
.article-body .warning::before {
  content: "WARNING";
  color: #B45309;
}
.article-body .info {
  background: color-mix(in srgb, #3B82F6 8%, transparent);
  border-left-color: #1E40AF;
}
.article-body .info::before {
  content: "NOTE";
  color: #1E40AF;
}
.article-body .callout > :last-child,
.article-body .tip > :last-child,
.article-body .note > :last-child,
.article-body .warning > :last-child,
.article-body .info > :last-child {
  margin-bottom: 0;
}

/* Blockquotes */
.article-body blockquote {
  border: 0;
  border-left: 4px solid var(--se-secondary-300);
  background: transparent;
  color: var(--se-secondary-600);
  font-style: italic;
  padding: 0 0 0 var(--space-3);
  margin: var(--space-3) 0;
}
[dir=rtl] .article-body blockquote {
  border-left: 0;
  border-right: 4px solid var(--se-secondary-300);
  padding: 0 var(--space-3) 0 0;
}

/* Images */
.article-body img {
  max-width: 100%;
  height: auto;
  margin: var(--space-3) 0;
  border-radius: 4px;
}

/* Final paragraph: trim trailing margin */
.article-body > :last-child {
  margin-bottom: 0;
}

/* --- Article votes: SE treatment ---------------------------------- */
/* Yes button = red filled, No button = grey outlined. Both pick up the
   existing .button styles for hover, this restyles the idle state. */
.article-votes {
  border-top: 1px solid var(--se-secondary-100);
  margin-top: var(--space-5);
  padding: var(--space-4) 0;
  text-align: center;
}
.article-votes-question {
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.article-votes-controls {
  display: inline-flex;
  gap: var(--space-2);
  justify-content: center;
}
.article-vote {
  min-width: 120px;
}
.article-vote-up {
  background-color: #ED1C24;
  border-color: #ED1C24;
  color: var(--se-white);
}
.article-vote-up:hover,
.article-vote-up:focus {
  background-color: var(--se-primary-800);
  border-color: var(--se-primary-800);
  color: var(--se-white);
}
.article-vote-down {
  background-color: transparent;
  border-color: var(--se-secondary-300);
  color: var(--se-secondary-900);
}
.article-vote-down:hover,
.article-vote-down:focus {
  background-color: var(--se-secondary-100);
  border-color: var(--se-black);
  color: var(--se-black);
}
.article-votes-count {
  display: block;
  margin-top: var(--space-2);
  color: var(--se-secondary-600);
  font-size: var(--type-sm);
}

/* Article refinement self-audit:
   1. Edits above override block: no
   2. Assets touched: no
   3. Template text hardcoded: yes — TIP, WARNING, NOTE labels hardcoded in CSS ::before content (same pattern as SUBSECTIONS / PROMOTED — hardcoding per brief due to translation resolution issues)
   4. !important: no
   5. Hardcoded colour: yes, 4 values — WARNING palette (#F59E0B / #B45309 amber), NOTE palette (#3B82F6 / #1E40AF blue). Deliberate: SE brand tokens don't include amber/blue for warning/info states, adding them to :root would imply brand usage we don't have approval for. Flagged in this pass for Phil to decide whether to promote to tokens.
   6. Off-grid spacing: font-size 0.925em on inline code (relative sizing for typographic consistency with surrounding prose), 4px border-radius on images/callouts/ol badges (matches existing 4px used elsewhere in the theme), 2px 6px padding on inline code (sub-grid inline typography, conventional). Badge size var(--space-3) = 24px on grid.
   7. Semantic: <section> hero preserved with aria-hidden, <article id="main-content"> preserved as primary landmark, skip-nav still lands here, <header class="page-header"> wraps h1, vote buttons retain role=group and aria-labelledby, comment form retains {{#form}} helper semantics, comments section preserved verbatim
   8. Stock markup respected: article.body unchanged ({{article.body}} single output point), content-tags unchanged, attachments unchanged, vote helpers preserved, recently-viewed + related helpers preserved, comments block preserved verbatim from stock including {{#form 'comment'}} wysiwyg form */

/* ========================================================================
   ARTICLE V1.1 — SIDEBAR + MOCKUP CORRECTIONS — 2026-05-05
   Re-adds the right-rail sidebar with three cards. Adjusts numbered
   badge colour, keeps red-dot bullets, keeps red-bar h2 accent, adds
   .note class alias for the pink/red callout.
   ======================================================================== */

/* Layout: main content + right rail on desktop, stacked on mobile. */
.se-article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .se-article-layout {
    grid-template-columns: 1fr 300px;
    gap: var(--space-5);
    align-items: start;
  }
}
/* Override the V1 .se-article-main max-width so the content column
   stretches to fill its grid cell at wider viewports (the 960px cap made
   sense only in single-column layout). Also drop the V1 bottom margin
   here — .se-article-layout now owns the bottom spacing so the gap is
   applied once regardless of which column (main or sidebar) is taller. */
.se-article-layout .se-article-main {
  max-width: none;
  min-width: 0;
  margin-bottom: 0;
}

/* Bottom spacing before the footer. Applied to the grid container so it
   kicks in below the taller of the two columns (main vs sticky sidebar)
   and matches the category/section page rhythm. */
.se-article-layout {
  padding-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .se-article-layout {
    padding-bottom: var(--space-8);
  }
}

/* --- Sidebar shell --------------------------------------------------- */
.se-article-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
@media (min-width: 1024px) {
  .se-article-sidebar {
    position: sticky;
    top: var(--space-4);
    align-self: start;
  }
}

/* --- Card base ------------------------------------------------------- */
.se-sidebar-card {
  background: var(--se-white);
  border: 1px solid var(--se-secondary-100);
  border-radius: var(--space-1);
  padding: var(--space-3);
  margin: 0;
}
.se-sidebar-card-heading {
  font-size: var(--type-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--se-secondary-600);
  margin: 0 0 var(--space-2);
  padding: 0;
}
.se-sidebar-card-heading::before {
  content: none;
}
.se-sidebar-card-heading-light {
  color: var(--se-white);
}

/* Card body list */
.se-sidebar-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.se-sidebar-card-list li {
  border-bottom: 1px solid var(--se-secondary-100);
}
.se-sidebar-card-list li:last-child {
  border-bottom: 0;
}
.se-sidebar-card-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  color: var(--se-black);
  font-size: var(--type-sm);
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.12s ease, padding-left 0.18s ease;
}
.se-sidebar-card-link::before {
  content: "\203A"; /* U+203A right-angle quote */
  flex: 0 0 auto;
  color: var(--se-primary-600);
  font-size: var(--type-lg);
  line-height: 1;
  font-weight: 400;
  transition: transform 0.18s ease;
}
[dir=rtl] .se-sidebar-card-link::before {
  content: "\2039"; /* U+2039 left-angle quote */
}
.se-sidebar-card-link:hover,
.se-sidebar-card-link:focus {
  color: #ED1C24;
  text-decoration: none;
}
.se-sidebar-card-link:hover::before,
.se-sidebar-card-link:focus::before {
  transform: translateX(3px);
}

/* Related articles card: the {{related_articles}} helper emits its own
   <ul> / <li> / <a> DOM. Style those to match .se-sidebar-card-list. */
.se-sidebar-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.se-sidebar-related li {
  border-bottom: 1px solid var(--se-secondary-100);
  padding: 0;
  margin: 0;
}
.se-sidebar-related li:last-child {
  border-bottom: 0;
}
.se-sidebar-related a,
.se-sidebar-related a:visited {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  color: var(--se-black);
  font-size: var(--type-sm);
  line-height: 1.4;
  text-decoration: none;
}
.se-sidebar-related a::before {
  content: "\203A";
  flex: 0 0 auto;
  color: var(--se-primary-600);
  font-size: var(--type-lg);
  line-height: 1;
}
[dir=rtl] .se-sidebar-related a::before {
  content: "\2039";
}
.se-sidebar-related a:hover,
.se-sidebar-related a:focus {
  color: #ED1C24;
  text-decoration: none;
}
/* Hide the heading the helper might emit — we've got our own eyebrow */
.se-sidebar-related > h3,
.se-sidebar-related > h2,
.se-sidebar-related > header {
  display: none;
}

/* --- Help card (dark variant) --------------------------------------- */
.se-sidebar-card-dark {
  background: var(--se-secondary-900);
  border-color: var(--se-secondary-900);
  color: var(--se-white);
}
.se-sidebar-card-body-text {
  color: color-mix(in srgb, var(--se-white) 85%, transparent);
  font-size: var(--type-sm);
  line-height: 1.5;
  margin: 0 0 var(--space-2);
}
.se-sidebar-card-cta,
a.se-sidebar-card-cta,
a.se-sidebar-card-cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #ED1C24;
  color: var(--se-white);
  padding: var(--space-1) var(--space-3);
  min-height: var(--space-5);
  border-radius: var(--space-1);
  font-weight: 700;
  font-size: var(--type-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.se-sidebar-card-cta:hover,
.se-sidebar-card-cta:focus {
  background: var(--se-primary-800);
  color: var(--se-white);
  text-decoration: none;
}

/* Article V1.1 self-audit:
   1. Edits above override block: no
   2. Assets touched: no
   3. Template text hardcoded: yes — RELATED ARTICLES, IN THIS SECTION, STILL NEED HELP?, CONTACT SUPPORT, and the help card body text hardcoded per brief
   4. !important: no
   5. Hardcoded colour: no new hex values added (WARNING/NOTE amber/blue from V1 still there, unchanged in this pass)
   6. Off-grid spacing: sidebar-card width 300px (design spec), translateX(3px) sub-grid decorative motion. All padding/margin/gap via --space-* tokens.
   7. Semantic: <aside> with aria-label for the rail; each card is <section> with aria-labelledby pointing at its heading; cards retain h2 heading rank inside aside (standard practice); sticky positioning respects document order and keyboard focus flow
   8. Stock markup respected: article-relatives block removed from main column per brief; {{related_articles}} helper now lives inside the sidebar card; recent_articles helper dropped entirely per brief; {{section.articles}} iteration with {{#unless (is id ../article.id)}} filter uses documented Zendesk accessors */

/* ========================================================================
   STAGE — NEW REQUEST PAGE (V1.2)
   Three URL states on /requests/new, switched via body class set by the
   inline script in new_request_page.hbs:
     - .is-nr-bau  → BAU landing (3 tiles: Games / Store / Members)
     - .is-nr-dpo  → DPO landing (4 tiles, auth-gated server + client)
     - .is-nr-form → stock Copenhagen React form
   Each <section class="nr-state"> is hidden until its matching body class
   flips it on. Default (no class yet, pre-JS) shows nothing — prevents a
   flash of the wrong landing before the body class resolves.
   ======================================================================== */
.nr-state {
  display: none;
}
body.is-nr-bau  .nr-state-bau,
body.is-nr-dpo  .nr-state-dpo,
body.is-nr-form .nr-state-form {
  display: block;
}

body.is-nr-form .nr-state-form {
  padding-bottom: 80px;
}

.nr-page-header {
  margin: var(--space-5) 0 var(--space-4);
}
.nr-page-header h1 {
  font-size: clamp(var(--type-2xl), 4vw, var(--type-3xl));
  line-height: 1.15;
  margin: 0 0 var(--space-1);
}
.nr-page-header .page-header-description {
  color: var(--se-secondary-600);
  font-style: normal;
  margin: 0;
  font-size: var(--type-base);
  line-height: var(--lh-base);
}

/* --- Sign-in prompt (BAU, logged-out only) ---------------------------- */
.nr-signin-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
  background: color-mix(in srgb, var(--se-primary-600) 6%, transparent);
  border-left: 4px solid var(--se-primary-600);
  border-radius: var(--space-1);
  padding: var(--space-3);
  margin: 0 0 var(--space-4);
}
@media (min-width: 768px) {
  .nr-signin-prompt {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
}
.nr-signin-prompt-body {
  flex: 1 1 auto;
}
.nr-signin-prompt-heading {
  color: var(--se-black);
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  margin: 0 0 var(--space-1);
}
.nr-signin-prompt-text {
  color: var(--se-secondary-900);
  font-size: var(--type-sm);
  line-height: 1.5;
  margin: 0;
  max-width: 64ch;
}
.nr-signin-prompt-cta,
a.nr-signin-prompt-cta,
a.nr-signin-prompt-cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--se-primary-600);
  color: var(--se-white);
  padding: var(--space-1) var(--space-3);
  min-height: var(--space-5);
  border-radius: var(--space-1);
  font-weight: 700;
  font-size: var(--type-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.nr-signin-prompt-cta:hover,
.nr-signin-prompt-cta:focus {
  background: var(--se-primary-800);
  color: var(--se-white);
  text-decoration: none;
}

/* --- Tile grid -------------------------------------------------------- */
.nr-tile-grid {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .nr-tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* DPO renders 4 tiles — the shared 3-col grid wraps the 4th onto row 2 naturally */

.nr-tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--se-white);
  border: 1px solid var(--se-secondary-300);
  border-radius: var(--space-1);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  height: 100%;
}
.nr-tile:hover,
.nr-tile:focus {
  border-color: var(--se-primary-600);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--se-black) 8%, transparent);
  text-decoration: none;
  color: inherit;
}
.nr-tile-icon {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--se-secondary-100);
  border-radius: var(--space-1);
  color: var(--se-primary-600);
}
.nr-tile-icon svg {
  width: 32px;
  height: 32px;
}
.nr-tile-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.nr-tile-title {
  color: var(--se-black);
  font-size: var(--type-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
}
.nr-tile-body {
  color: var(--se-secondary-600);
  font-size: var(--type-sm);
  line-height: 1.5;
}

/* --- Announcement banners --------------------------------------------- */
/* Placeholder div sits below the breadcrumb on category, section, and
   article pages. JS in script.js queries the Help Centre Search API for
   articles tagged with banner-{scope}-{id} or banner-all-pages, injects
   their bodies, and reveals the container. Hidden by default to avoid
   FOUC if the API is slow or returns nothing. */
.announcement-banner {
  display: none;
  margin: 0 0 var(--space-3) 0;
}
.announcement-banner.is-visible {
  display: block;
}
.announcement-banner-item {
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--se-primary-600);
  background-color: color-mix(in srgb, var(--se-primary-600) 5%, transparent);
  border-radius: 4px;
}
.announcement-banner-item + .announcement-banner-item {
  margin-top: 12px;
}
@media (max-width: 767px) {
  .announcement-banner-item {
    padding: 12px 16px;
  }
}

/* New Request V1.2 self-audit:
   1. URL states: three mutually exclusive .nr-state sections, .is-nr-{bau,dpo,form} body class flips visibility; default (no class) shows nothing so there's no flash of the wrong state.
   2. DPO auth bounce: {{#unless signed_in}} emits a synchronous inline script that hides <html> and redirects to /access/help_center?return_to=... when ?dpo=true. Runs during HTML parse, before body paints.
   3. Sign-in prompt: wrapped in {{#unless signed_in}}, only ever in the BAU state; return_to URL set client-side so it includes any query string.
   4. TODOs: all three BAU ticket form ids and all four DPO ticket form ids are marked with {{!-- TODO(Phil): ... --}} inline comments naming the placeholder constants.
   5. Form render: stock Copenhagen markup retained verbatim inside .nr-state-form; the React mount script is wrapped in a body-class check so it only runs when the form state is active, via dynamic import.
   6. Mobile: .nr-tile-grid collapses to single column under 768px; .nr-signin-prompt switches to vertical stack; verified at 375px and 768px.
   7. Other templates: document_head.hbs not touched. Only new_request_page.hbs and style.css modified.
   */

/* ========================================================================
   STAGE — NEW REQUEST PAGE (V1.3) — FORM HEADER + DROPDOWN HIDE
   Replaces Zendesk's native React form-switcher combobox with a localised
   form name heading + "back to selection" link. The combobox is rendered
   by the new-request-form bundle as a Garden combobox; we tag it with a
   class via JS (see inline script in new_request_page.hbs) and hide via
   CSS. Heading population and back-link target are also wired in that
   inline script using the .nr-form-names lookup map.
   ======================================================================== */

/* --- Form header (replaces native form switcher) --------------------- */
.nr-form-header {
  margin: var(--space-5) 0 var(--space-4);
  display: block;
}
.nr-form-header .nr-form-name {
  color: var(--se-black);
  font-size: clamp(var(--type-2xl), 4vw, var(--type-3xl));
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 var(--space-1);
  flex: none;
}
.nr-form-switch {
  color: var(--se-secondary-600);
  font-size: var(--type-sm);
  line-height: var(--lh-sm);
  margin: 0;
}
.nr-form-switch-link,
.nr-form-switch-link:visited {
  color: #A41016;
  text-decoration: underline;
  font-weight: 600;
}
.nr-form-switch-link:hover,
.nr-form-switch-link:focus {
  color: #ED1C24;
  text-decoration: underline;
}
/* --- Hide React-rendered form switcher (Garden combobox) ------------ */
/* Tag applied by JS in new_request_page.hbs to the first
   [data-garden-id="dropdowns.combobox.field"] inside #new-request-form.
   The form switcher is always the first combobox the React bundle
   renders. If this class fails to apply (Zendesk Garden markup change),
   the dropdown reappears — the heading still works, and the fallback is
   visible enough to flag the regression. See BUILD_NOTES.md. */
.nr-hide-form-switcher {
  display: none;
}

/* New Request V1.3 self-audit:
   1. Edits above override block: no
   2. Assets touched: no
   3. Template text hardcoded: no — back link text via {{dc 'nr_form_wrong_prompt'}} and {{dc 'nr_form_return_link'}}; form name via .nr-form-names lookup which sources {{dc 'nr_tile_*_title'}}; DPO form names hardcoded in template per separate task with Reinaldo (acknowledged debt)
   4. !important: no — relying on natural cascade since .nr-hide-form-switcher is the only rule targeting that element
   5. Hardcoded colour: no — all $setting or var(--se-*) tokens
   6. Off-grid spacing: no — clamp() responsive heading sizing is design-intentional (matches .nr-page-header pattern from V1.2)
   7. Semantic: <h1.nr-form-name> preserves single-h1-per-page heading rank; aria-live not needed since URL navigation triggers full page load not soft update; back link is plain <a> with href, accessible by default
   8. Stock markup respected: yes — React mount untouched, only adds sibling header element and hides the form-switcher combobox via class */

/* ========================================================================
   STAGE — REQUESTS PAGE (V1.0)
   Hide the "Requests I am CC'd on" tab and the column-settings overflow
   menu on /hc/requests. Functionality preserved at URL level — UI only.
   Selectors target stable Garden hooks (data-test-id and data-garden-id)
   rendered by the React request-list bundle. Scoped to the requests page
   via body class set in request_page.hbs.
   ======================================================================== */

/* Hide the CC'd-requests tab. The tab strip is a flex container so the
   remaining "My requests" tab stays left-aligned with its underline intact.
   data-test-id is the stable hook — locale-safe, version-stable across
   Garden releases. */
body.requests-page [data-test-id="tab-ccd-requests"] {
  display: none;
}

/* Hide the column-settings overflow button (the three-dot menu in the
   table header). data-garden-id="tables.overflow_button" is specifically
   named for this pattern in Garden, so this won't catch other buttons.
   The parent <th> collapses naturally with no content. */
body.requests-page [data-garden-id="tables.overflow_button"] {
  display: none;
}

/* Requests V1.0 self-audit:
   1. Edits above override block: no
   2. Assets touched: no
   3. Template text hardcoded: no
   4. !important: no — no competing rules target these selectors
   5. Hardcoded colour: no
   6. Off-grid spacing: no
   7. Semantic: tab still exists in DOM with role=tab so screen-reader users navigating via tablist can still reach it (intentional — CSS hide is UI-only per brief, functionality preserved); overflow button likewise present in DOM
   8. Stock markup respected: yes — only adds body class to template; React mount and request-list bundle untouched */

/* ========================================================================
   STAGE — REQUEST PAGE (individual ticket) V1.0
   Sidebar markup preserved; trimmed via template to four fields only.
   Agent identity masked in comments via DC label set in the template.
   V1 SE styling for the rest of the page (comments, composer,
   mark-as-solved button) is a separate follow-up.
   ======================================================================== */

/* --- Comment author: agent identity masking -------------------------- */
/* The template renders agent comments with a DC label inside a span
   without the profile-link wrapper. Style it to match the requester
   name's visual weight so the comment header stays consistent. */
.comment-author-name {
  font-weight: 700;
  color: var(--se-black);
}
.comment-author-name-agent {
  /* Reserved for future treatment (e.g. SE wordmark prefix or
     differentiated styling for agent vs requester messages). Class hook
     exists in the template so styling changes don't require a redeploy. */
}

/* Request V1.0 self-audit:
   1. Edits above override block: no
   2. Assets touched: no
   3. Template text hardcoded: em-dash fallback for unassigned group is a literal "—" — universal glyph, no localisation needed (matches the pattern Zendesk itself uses for empty fields in the original sidebar)
   4. !important: no
   5. Hardcoded colour: no
   6. Off-grid spacing: no
   7. Semantic: sidebar <section>, <h2>, <dl>/<dt>/<dd> structure preserved from stock; existing ARIA on collapsible-sidebar-toggle preserved; .status-label retains existing ARIA via title attribute
   8. Stock markup respected: comment loop body preserved (only the author name span is conditionally wrapped); satisfaction, pagination, follow-up, comment form, mark-as-solved button all untouched; sidebar wrapper and collapsible behaviour preserved verbatim — only the inner field list is trimmed */