/* CRITICAL: Prevent Layout Flash on Video Articles */
body.is-video-article .article-sidebar.toc-sidebar:not(.guided-toc-sidebar),
body.is-video-article .toc-sidebar:not(.guided-toc-sidebar) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-video-article .article-container-new {
  grid-template-columns: 1fr !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
:root {
  --cerello: #FFC700;
  --navy: #00314A;
  --teal: #00AB94;
  --pale-teal: #F2FBFA;
  --orange: #FF9100;
  
  --text-primary: #00314A;
  --text-secondary: #4a5568;
  --text-light: #718096;
  
  --shadow-sm: 0 1px 3px rgba(0, 49, 74, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 49, 74, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 49, 74, 0.12);
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --ink:#0f172a;
  --muted:#5b6a7d;
  --brand:#0b5fff;
  --line:#e3e8ef;
  --row-bg:#f7f9fc;
  --card-bg:#fff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body, pre, .language-auto {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  background: #fafafa;
}

.language-auto {
  background: none;
}

main {
  display: block;
}

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

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

a {
  background-color: transparent;
}

.text-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}


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


@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1, h2,
h3,
h4,
h5,
h6 {
  font-family: Helvetica, Arial, sans-serif;
  margin-top: 0;
}


h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: rgba(0, 49, 74, 1);
  text-decoration: none;
}
/*a:visited {
  color: rgba(0, 49, 74, 1);
}*/
a:hover, a:active, a:focus {
  text-decoration: none;
}

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

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 2rem;
  
}
@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;
}

/* Section Headers - CENTERED */
.section-header {
  margin-bottom: 1.5rem;
}

.section-header.second {
  margin-top: 3rem;
}

.section-header.centered {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

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

.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  background-color: rgba(0, 49, 74, 1);
  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: #000;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #0075b0;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #0075b0;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(0, 49, 74, 1);
  border: 1px solid #87929D;
  background-color: #f7f7f7;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/***** Header *****/
.header {
  background: white;
  border-bottom: 3px solid var(--cerello);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow 0.3s;
}

.header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}


  .footer-language-selector {

    margin-left: auto;
  }

@media (min-width: 1160px) {
  .header {
    padding: 0;
  }
}


.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap:10px;
}

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

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

.logo a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.logo span {
  color: var(--navy);
  font-weight: 600;
  font-size: 1.125rem;
}

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

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

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

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

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

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

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

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


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

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

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: #0075b0;
}
.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: #0075b0;*/
  display: inline-block;
}

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

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

/***** Search field *****/
.search-container {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.search {
  border-color: #87929D;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
  padding: 0px 40px;
}
.search:focus-within {
  border-color: rgba(0, 49, 74, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}

.search-full {
  width: 100%;
  padding: .250rem 1.5rem .250rem 3.5rem;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  font-size: 1.0625rem;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  outline: none;
  background: white;
}

.search-full:focus {
  border-color: var(--teal);
  box-shadow: 0 4px 20px rgba(0, 171, 148, 0.15);
}

.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: rgba(0, 49, 74, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 49, 74, 1);
}
.search-has-value .clear-button {
  display: flex;
}

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

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

.search-icon {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  z-index: 2;
}
[dir=rtl] .search-icon {
  left: auto;
  right: 15px;
}
.search-header-container {
  margin-bottom: 2rem;
}

.search-header {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.search-subheader {
  font-size: 1.25rem;
  color: var(--text-secondary);
}

/* Popular Tags */
.popular-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
  position: relative;
  z-index: 1;
}

.fa-solid.fa-rocket {
  color: var(--teal); 
  margin-right: .5rem;
}

.fas.fa-book-open {
  color: var(--teal); 
  margin-right: 0.5rem;
}

.tags-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.tag:hover {
  background: var(--pale-teal);
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-1px);
}

/* Additional Resources Section (Secondary) */
.additional-resources-header {
  margin-top: 5rem;
  margin-bottom: 2.5rem;
}

.additional-resources-section {
  margin-bottom: 5rem;
}

.resource-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.resource-card {
  background: white;
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 49, 74, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e7e7e7;
}

.resource-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 49, 74, 0.15);
  border-color: currentColor;
}

.resource-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: currentColor;
}

.resource-card-teal {
  color: var(--teal);
}

.resource-card-pink {
  color: #E91E63;
}

.resource-card-blue {
  color: #2196F3;
}

.resource-card-orange {
  color: var(--orange);
}

.resource-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: transform 0.3s;
  box-shadow: 0 3px 12px currentColor;
  opacity: 0.9;
}

.resource-card:hover .resource-card-icon {
  transform: scale(1.1) rotate(5deg);
  opacity: 1;
}

.resource-card-icon i {
  font-size: 1.5rem;
  color: white;
}

.resource-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}

/* Product Grid - WITH COUNTS */
.product-grid-section {
  margin-bottom: 5rem;
}

.product-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 1.5rem;
}

/* Tablet - 4 columns */
@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 1.25rem;
  }
}

/* Large mobile - 3 columns */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 1rem;
  }
}

/* Small mobile - 2 columns */
@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

.product-card {
  background: white;
  border: 2px solid #e7e7e7;
  border-radius: var(--radius-lg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--cerello);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.product-card:hover::before {
  transform: scaleX(1);
}

.product-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem 1.5rem;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.product-card:hover {
  border-color: var(--cerello);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.product-icon {
  margin-bottom: 1rem;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  transition: transform 0.3s;
}


.product-card:hover .product-icon {
  transform: scale(1.1);
}

.product-link h3 {
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 0;
  font-weight: 600;
}



/* Guided Tutorials - Compact & Modern */
.guided-tutorials {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tutorial-group {
  background: white;
  border: 1px solid #e7e7e7;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.3s;
}

.tutorial-group:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}

.tutorial-group-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(to right, var(--pale-teal) 0%, white 100%);
  border-bottom: 1px solid #f0f0f0;
}

.tutorial-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: linear-gradient(135deg, var(--teal) 0%, #00c9a7 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

.tutorial-group-header h3 {
  font-size: 1.0625rem;
  color: var(--navy);
  margin: 0;
  font-weight: 600;
  flex: 1;
}

.tutorial-count {
  font-size: 0.8125rem;
  color: var(--text-light);
  background: white;
  padding: 0.25rem 0.625rem;
  border-radius: 12px;
  font-weight: 500;
  border: 1px solid #e7e7e7;
}

.tutorial-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
}

.tutorial-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid #f7f7f7;
  transition: all 0.2s;
  font-size: 0.9375rem;
}

.tutorial-link:last-child {
  border-bottom: none;
}

.tutorial-link i {
  color: var(--teal);
  font-size: 0.75rem;
  transition: transform 0.2s;
  opacity: 0.6;
}

.tutorial-link:hover {
  background: var(--pale-teal);
  padding-left: 1.5rem;
}

.tutorial-link:hover i {
  transform: translateX(3px);
  opacity: 1;
}

.tutorial-link span {
  flex: 1;
}

/* Trending Articles */
.trending-section {
  background: white;
  border: 2px solid #e7e7e7;
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: sticky;
  top: 120px;
}

.trending-icon {
  color: var(--orange);
  margin-right: 0.5rem;
}

.trending-list {
  list-style: none;
  margin-top: 1.5rem;
}

.trending-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  margin-bottom: 0.5rem;
}

.trending-item:hover {
  background: var(--pale-teal);
}

.trending-rank {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: linear-gradient(135deg, var(--cerello) 0%, #ffdb4d 100%);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.trending-content {
  flex: 1;
}

.trending-content a {
  text-decoration: none;
  color: inherit;
}

.trending-content h4 {
  font-size: 0.9375rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s;
}

.trending-item:hover h4 {
  color: var(--teal);
}

.trending-meta {
  font-size: 0.8125rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.view-all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.875rem;
  background: var(--pale-teal);
  color: var(--teal);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: all 0.3s;
}

.view-all-link:hover {
  background: var(--teal);
  color: white;
}
/***** Hero component *****/
.hero {
  background: linear-gradient(135deg, var(--pale-teal) 0%, #ffffff 50%, var(--pale-teal) 100%);
  padding: 2rem 2rem 2rem;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 199, 0, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-30px, 30px); }
}

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


/***** User header home icon *****/
.header-home-link{
  position: relative;
}
.header-home-link.right {
  display: right;
}

.header-home-link:hover .header-home-text {
  color: var(--teal);
}
.header-home-link:focus{ outline:2px solid #0b5fff; outline-offset:2px; }
.header-home-icon{ width:18px; height:18px; color:currentColor; }

/* icon-only on small screens */
@media (max-width:720px){
  .header-home-text{ display:none; }
  .header-home-link{ padding:6px; }
}


/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 30px 10px;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}

.singleline-list {
  display: flex;
  //*flex-wrap: wrap;*//
  justify-content: flex-start;
  list-style: none;
  padding: 30px 10px;
  width:100%;
}
@media (min-width: 768px) {
  .singleline-list {
    margin: 0 -15px;
  }
}


.blocks-item {
  //*border: 1px solid rgba(0, 49, 74, 1);
  border-radius: 4px;*//
  box-sizing: border-box;
  color: rgba(0, 49, 74, 1);
  display: flex;
  flex-direction: column;
  flex: 1 0 175px;
  margin: 0 0 10px;
  max-width: 100%;
  align-items: center;
  text-align: center;
  flex-shrink: 1;
}

.blocks-item.top {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
              0 1px 3px rgba(0, 0, 0, 0.06);
  max-width: 100%;
  text-align: left;
}

@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(0, 49, 74, 1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: rgba(0, 49, 74, 1);
}

.blocks-item-link {
  color: rgba(0, 49, 74, 1);
  padding: 5px 5px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: inherit;
}

.blocks-item-link img {
  width: 75px;
  padding: inherit;
}

.blocks-item-link.top {
  align-items: start;
  text-align: left;
  justify-content: left;
}

.blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}

.blocks-item-link:visited {
  color: #004b8d
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 49, 74, 1);
  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;
}

/* Container list */
.blocks-list {
display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Each block item */
.blocks-item {
  border: 1px solid #e2e8f0;
  background-color: #fff;
  border-radius: 8px;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.blocks-item:hover {
  border: 1px solid #0077cc;
  box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.2); /* subtle blue outline */
}

/* Link inside */
.blocks-item-link {
  display: block;
  padding: 16px 20px;
  color: #004b8d;
  text-decoration: none;
  height: 100%;
}

/* Title and description */
.blocks-item-title {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.blocks-item-description {
  color: #555;
  font-size: 0.9rem;
  line-height: 1.4;
}

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

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

.video-label {
  margin-left: 6px;
  background-color: #e6f2ff;
  color: #004b8d;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.hc-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}
.hc-badge--video   { background:#e6f4ff; color:#004b8d; }
.hc-badge--article { background:#eef7ec; color:#2f6a1f; }
/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01J4790GS0DM3YZ4Y4W1HR5BHR);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(0, 49, 74, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(0, 49, 74, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(0, 125, 110, 1);
}

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

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  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: rgba(0, 49, 74, 1);
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: rgba(0, 49, 74, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(0, 49, 74, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(0, 125, 110, 1);
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(0, 49, 74, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.category-content {
  /*display: grid;*/
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  align-items: stretch;
}
@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: rgba(0, 49, 74, 1);
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.section-groups {
  display: grid;
  gap: 28px;
}

@media (min-width: 980px) {
  .section-groups {
    grid-template-columns: 1fr 1fr; /* exactly two columns */
  }
}

/* Group headings */
.group-title{
  margin:0 0 14px;
  font-size:1.1rem;
  font-weight:800;
  color:#0a345a;
}


.article-list-item:last-child { border-bottom: 0; }

.icon-star {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  color: gold;
}

.icon-star { grid-column: 1; width:16px; height:16px; color:#f5b301; }
.icon-lock { grid-column: 4; width:16px; height:16px; justify-self:end; opacity:.65; }

.article-list-link {
    grid-column:2 / 4;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;            /* allow truncation */
  color:#0b3a67;
  text-decoration:none;
}
.article-list-link:hover .row-title { text-decoration: underline; }

.article-list-link:focus{
  outline:2px solid #7cc0ff;
  outline-offset:2px;
  border-radius:8px;
}

.row-icon{
  flex:0 0 20px;
  width:20px; height:20px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  opacity:.92;
}

/* Default doc icon (Article group) */
.group--article .row-icon,
.group:not(.group--video) .row-icon{
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' stroke='%23004b8d' stroke-width='1.5'/%3E%3Cpath d='M14 3v5h5' stroke='%23004b8d' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Video icon (Video group) */
.group--video .row-icon{
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%23004b8d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z'/%3E%3Cpath d='M16 10l5-3v10l-5-3V10z' fill='%23004b8d'/%3E%3C/svg%3E");
}

/* Title (truncate) */
.row-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.35;
  font-size:1rem;
}

/* Right arrow (consistent, even if your markup has none) */
.article-list-item::after{
  content:"";
  position:absolute;
  right:16px; top:50%;
  width:22px; height:22px;
  transform:translateY(-50%);
  border-radius:999px;
  background:
    radial-gradient(circle at center, #0b375d 0 0) left/0 0 no-repeat,
    url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%230b375d'%3E%3Cpath d='M8 5l7 7-7 7' stroke='%230b375d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
  background-color:#f2f7fb;
  transition:transform .15s ease, background-color .15s ease;
}
.article-list-item:hover::after{
  transform:translateY(-50%) translateX(2px);
  background-color:#e6f2ff;
}

/***** Microsites 

.header-nav .dropdown.product-dropdown{
  display: none; 
} *****/


/***** Middle pages *****/
.content-container-home {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.two-column-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 3rem;
}

.left-column,
.right-column {
  flex: 1 1 100%;
}


.left-column {
padding-right: 24px;
  border-right: 1px solid #e6e6e6;
}

@media screen and (min-width: 1024px) {
  .left-column,
  .right-column {
    flex: 1 1 48%;
  }
}

/* ============================================
   FEATURED ARTICLES - COMPACT & COLLAPSIBLE
   ============================================ */

.right-column {
  min-width: 0;
}

/* Featured Articles Container */
.popular-article-section {
  background: white;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: 1.75rem;
  position: sticky;
  top: 2rem;
  box-shadow: 0 2px 12px rgba(0, 49, 74, 0.06);
}

/* Header */
.popular-article-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.popular-article-section h2::before {
  font-size: 1.5rem;
}

/* Subtitle */
.featured-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem 0;
  padding-bottom: 0.875rem;
  border-bottom: 2px solid #e7e7e7;
}

/* Article List - COMPACT VERSION */
.featured-articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Individual Article Items - COMPACT */
.promoted-article {
  position: relative;
}

/* Article Link Styling - COMPACT */
.popular-article-link {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: #fafafa;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  color: var(--navy);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.popular-article-link:hover {
  background: var(--pale-teal);
  border-color: var(--teal);
  border-left-color: var(--teal);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 171, 148, 0.1);
}

/* Article Icon - COMPACT */
.popular-article-link .icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform 0.25s;
}

.popular-article-link:hover .icon {
  transform: scale(1.1);
}

/* Article Title - COMPACT */
.popular-article-link .title {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
}

.popular-article-link:hover .title {
  color: var(--teal);
}

/* Lock Icon */
.popular-article-link .icon-lock {
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================
   COLLAPSIBLE FUNCTIONALITY - FIXED!
   ============================================ */

/* Hidden Articles (initially hidden after 10th) */
.featured-article-hidden {
  display: none;
}

/* Show when expanded - WITH !important to override */
.featured-expanded .featured-article-hidden {
  display: block !important;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   SHOW MORE/LESS BUTTON
   ============================================ */

.featured-show-more-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem 1.25rem;
  background: white;
  border: 2px solid var(--teal);
  border-radius: 8px;
  color: var(--teal);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
}

.featured-show-more-btn:hover {
  background: var(--teal);
  color: white;
}

.featured-show-more-btn:hover .show-more-icon {
  transform: translateY(2px);
}

/* Button text toggle */
.show-less-text {
  display: none;
}

.featured-show-more-btn[aria-expanded="true"] .show-more-text {
  display: none;
}

.featured-show-more-btn[aria-expanded="true"] .show-less-text {
  display: inline;
}

/* Button icon rotate */
.show-more-icon {
  transition: transform 0.3s;
}

.featured-show-more-btn[aria-expanded="true"] .show-more-icon {
  transform: rotate(180deg);
}

.featured-show-more-btn[aria-expanded="true"]:hover .show-more-icon {
  transform: rotate(180deg) translateY(-2px);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .popular-article-section {
    position: static;
  }
}

@media (max-width: 768px) {
  .popular-article-section {
    padding: 1.5rem;
  }

  .popular-article-section h2 {
    font-size: 1.25rem;
  }

  .featured-subtitle {
    font-size: 0.8125rem;
  }

  .popular-article-link {
    padding: 0.625rem 0.75rem;
  }

  .popular-article-link .title {
    font-size: 0.8125rem;
  }

  .featured-show-more-btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
}


@media (min-width: 1024px) {
  .content-container-home {
    flex: 0 0 80%;
  }
}
.middle-list {
  margin: 0px 0;
}

.middle-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.middle-list-item:first-child {
  border-top: 1px solid #ddd;
}
.middle-list-item a {
  align-items: center;
  color: rgba(0, 49, 74, 1);
  display: flex;
  justify-content: space-between;
}

.learn-section {
    /*display: flex;*/
    width: 100%; /* Ensures uniform width */
    /*max-width: 800px; /* Adjust based on your design */
    border: 1px solid black;
    border-radius: 4px;
    background: #ffffff;
    margin-bottom: 15px;
    text-align: left;
}

.learn-section summary {
  background: #f9f9f9;
  padding: 12px 16px;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  list-style: none;
}

.learn-section[open] {
  	border-bottom: none;
  border-radius: 4px 4px 0 0;
}


.learn-section ul.subsection-list {
  border: 1px solid #ccc;
  border-top: none;
  padding: 8px 16px;
  margin: 0;
}


.learn-section ul.subsection-list li a {
  display: block;
  padding: 6px 0;
  color: #004b8d;
  text-decoration: underline;
}


.accordion-content ul {
  list-style: none;
  margin: 12px 0;
  padding: 0;
}

.accordion-content li {
  margin: 10px 0;
}

.accordion-content a {
  color: #004b8d;
  text-decoration: underline;
}



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

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: center;
  margin: 0 125px;
}
.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: rgba(0, 49, 74, 1);
  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%
  */
  order:2;
  grid-column: 2;
}
@media (min-width: 1024px) {
  .article { order: 2; }
}
.article-container {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(860px, 1fr) minmax(220px, 280px);
  column-gap: 24px;
  align-items: start;
  overflow: visible;
  max-width: 1800px;        
  margin: 0 auto;           
  padding: 24px 12px; 
  
  /* 2) Narrow rails, generous gap around the article */
  grid-template-columns:
    minmax(190px, 220px)           /* left rail */
    minmax(0, 1fr)                 /* article */
    minmax(220px, 260px);          /* right rail */

  /* BIG breathing room between rails and article */
  column-gap: clamp(40px, 6vw, 96px);
}
.article-sidebar.toc-sidebar { grid-column: 1; }
.article-sidebar--related    { 
  grid-row: 1;
  align-self: start;
  grid-column: 3; }

@media (max-width: 1024px) {
  .article-container {
    display: block;
  }
}

/*OG test before removing 
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 5px;
  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;
  width: 14px;
  height: 14px;
  margin-left: 8px;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}

.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(0, 171, 148, 1);
  text-decoration: none;
}
.article-body a:visited {
 
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(0, 125, 110, 1);
}
.article-body img {
  height: auto;
  max-width: 100%;
}

.article-body h2 {
  color:rgba(0, 171, 148, 1);
}
.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 {
  padding: 10px 15px;
	overflow: auto;
	width: 100%;
	height: auto;
	white-space: initial;
	border-radius: 12px;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-family: inherit;  
}

.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #0075b0;
  font-style: italic;
  padding: 0 15px;
}

.idea {
  border-left: 5px solid #cceeea;
  background-color: #cceeea63; 
}

.idea::before {
  content: "\1F4A1";
  color: #00314a;
  margin-right: 8px;
  font-size: 1.2em;
}

.warning   { 
  border-left: 5px solid #f8001c;
  background-color: #f8001c17; 
}

.warning::before {
  content: "\26A0";
  color: #00314a;
  margin-right: 8px;
  font-size: 1.2em;
}

.info { 
  border-left: 5px solid #d2b447;
  background-color: #ffc90745; 
}

.info::before {
  content: "\2139";
  color: #00314a;
  margin-right: 8px;
  font-size: 1.2em;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 5px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #0075b0;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(0, 49, 74, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  padding: 0;
  margin: .75em 0;
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  .article-sidebar { flex: 0 0 17%; max-width: 17%; }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  gap:40px;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 45%;
  min-width: 45%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(0, 49, 74, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(0, 49, 74, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(0, 125, 110, 1);
}
.article-return-to-top {
  border-top: 1px solid #87929D;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: rgba(0, 49, 74, 1);
  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;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 16px 8px 14px; /* adjust left padding */
  margin-left: -17px; /* align active border with sidebar line */
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

.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: rgba(0, 49, 74, 1);
  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: #0075b0;
}

/* ToC sidebar inherits your .article-sidebar styles; add specifics */
.toc-sidebar {
  position: sticky;
  max-height: calc(100vh - 48px);
  overflow: auto;
}

/* Scrollable list */
.toc-sidebar .toc-list {
  max-height: none;
}

/* Title */
.toc-sidebar .sidenav-title {
  font-size: 14px;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: #0075b0;
  margin: 14px 0 6px 0;
}

/* Items */
.toc-sidebar .toc-list a {
  display: block;
  padding: 6px 8px 6px 14px;
  color: inherit;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* Level spacing */
.toc-sidebar .toc-lvl-1 > a { font-weight: 600; }
.toc-sidebar .toc-lvl-2 > a { padding-left: 22px; font-size: .95em; }

/* Hover + active */
.toc-sidebar .toc-list a:hover { color: rgba(0, 49, 74, 1); }
.toc-sidebar .toc-list a.current-article {
  color: rgba(0, 49, 74, 1);
  border-left-color: rgba(0, 49, 74, 1);
  background: rgba(0,0,0,.02);
}

/* Mobile: collapse */
@media (max-width: 1023px) {
  .toc-sidebar { position: static; max-height: none; }
  .toc-sidebar[aria-expanded="false"] .toc-list { display: none; }
  .toc-sidebar .collapsible-sidebar-toggle { display: inline-block; }
  .toc-sidebar.collapsible-sidebar {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (min-width: 1024px) {
  .collapsible-sidebar { overflow: visible; }  /* undo the global hidden */
  .article-sidebar.toc-sidebar.collapsible-sidebar {
    position: sticky;
    top: 24px;                                  /* adjust to clear your header */
    max-height: calc(100vh - 48px);
    overflow: auto;                              /* internal scroll */
  }
}


/* Right column card blocks */
.aside-card {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding: 14px 14px 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.aside-card h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #00537d;
  text-transform: uppercase;
  letter-spacing: .2px;
}

/* Links list */
.aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aside-list li + li { margin-top: 8px; }

.aside-list a {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(0, 49, 74, 1);
  text-decoration: none;
  padding: 8px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.aside-list a:hover {
  background: #fafafa;
  border-color: #eee;
  color: rgba(0, 49, 74, 1);
}

/* Optional chevron */
.aside-list a::after {
  content: "↗";
  float: right;
  color: #0096e3;
}

/* Mobile: put these below the article content */
@media (max-width: 1023px) {
  .article-sidebar--related .aside-card { margin-top: 8px; }
}

/* Tabs wrapper (mobile only) */
@media (max-width: 1023px) {
  .article-aux-tabs {
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background: #fff;
    margin-top: 8px;
  }
  .article-aux-tabs__nav {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #eee;
  }
  .article-aux-tabs__btn {
    flex: 1;
    font: inherit;
    background: #f6f6f6;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
  }
  .article-aux-tabs__btn[aria-selected="true"] {
    background: rgba(0, 49, 74, 1);
    color: #FFFFFF;
    border-color: rgba(0, 49, 74, 1);
  }
  .article-aux-tabs__panel { display: none; padding: 10px; }
  .article-aux-tabs__panel[aria-hidden="false"] { display: block; }
}


/***** 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: #0075b0;
}
.share a:hover {
  text-decoration: none;
  color: rgba(0, 49, 74, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

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

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

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

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

.vote-voted {
  color: rgba(0, 49, 74, 1);
}

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

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

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

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

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

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

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

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: rgba(0, 49, 74, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: rgba(0, 49, 74, 1);
  color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
  background-color: #000;
  border-color: #000;
}
.community-follow button::after {
  border-left: 1px solid rgba(0, 49, 74, 1);
  content: attr(data-follower-count);
  color: rgba(0, 49, 74, 1);
  display: inline-block;
  font-family: 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 rgba(0, 49, 74, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(0, 49, 74, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(0, 49, 74, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #0075b0;
  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: rgba(0, 49, 74, 1);
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(0, 49, 74, 1);
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #0075b0;
}
.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: 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: rgba(0, 49, 74, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(0, 49, 74, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(0, 125, 110, 1);
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #0075b0;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #0075b0;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(0, 49, 74, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

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

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

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

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

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: rgba(0, 49, 74, 1);
  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: rgba(0, 49, 74, 1);
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(0, 49, 74, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(0, 49, 74, 1);
}

.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;*/
  margin: 0.67em 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%;
  
}
.sidenav-list {
  border-left: 2px solid rgba(0, 49, 74, 1); /* or use a brand gray */
  list-style: none;
  padding-left: 1rem;
  margin: 10px 0;
}

@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(0, 49, 74, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

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

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

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

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

.no-activities {
  color: #0075b0;
}

/***** 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: #0075b0;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid rgba(0, 49, 74, 1);
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(0, 49, 74, 1);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #0075b0;
  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: #0075b0;
  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: #0075b0;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #0075b0;
  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: #0075b0;
  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: rgba(0, 49, 74, 1);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  color: rgba(0, 49, 74, 1);
  text-decoration: none;
}
.sidenav-item.current-article {
  color: rgba(0, 49, 74, 1);
  font-weight: 500;
  border-left: 2px solid rgba(0, 49, 74, 1); /* match brand color */
  /* background-color: rgba(0, 168, 148, 0.05);  optional: subtle bg */
}


.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(0, 49, 74, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}


.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: rgba(0, 49, 74, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(0, 49, 74, 1);
}

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

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

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



/* Title row: left doc/video icon + right arrow */

.search-result-title a{
  color:#0b3a67;
  text-decoration:none;
  display:inline-block;
  padding-right:28px; /* space for arrow */
}
.search-result-title a:hover{ text-decoration:underline; }

/* Left icon (default: document) */
.search-results-list > li .search-result-title a::before{
  content:"";
  position:absolute;
  left:0; top:2px;
  width:20px; height:20px;
  background-repeat:no-repeat; background-position:center; background-size:18px;
  opacity:.92;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' stroke='%23004b8d' stroke-width='1.5'/%3E%3Cpath d='M14 3v5h5' stroke='%23004b8d' stroke-width='1.5'/%3E%3C/svg%3E");
}
/* Switch icon for video results (class added by JS below) */
.search-results-list > li.is-video .search-result-title a::before{
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%23004b8d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z'/%3E%3Cpath d='M16 10l5-3v10l-5-3V10z'/%3E%3C/svg%3E");
}

/* Right arrow */
.search-result-title a::after{
  content:"";
  position:absolute;
  right:0; top:50%;
  width:22px; height:22px;
  transform:translateY(-50%);
  border-radius:999px;
  background-color:#f2f7fb;
  background:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%230b375d'%3E%3Cpath d='M8 5l7 7-7 7' stroke='%230b375d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
  transition:transform .15s ease, background-color .15s ease;
}
.search-results-list > li:hover .search-result-title a::after{
  transform:translateY(-50%) translateX(2px);
  background-color:#e6f2ff;
}

/* Votes / comments row alignment */
.search-result-title-container{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.search-result-icons{ display:flex; gap:10px; align-items:center; }

/* Breadcrumbs + meta */
.search-result-meta-container{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:6px;
  font-size:12px;
  color:#6a7785;
}
.search-result-breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
}
.search-result-breadcrumbs li{
  list-style:none;
}
.search-result-breadcrumbs li::after{
  content:"›";
  margin:0 4px;
  color:#a9b6c3;
}

.search-result-breadcrumbs li:last-child::after{ content:none; }

.search-result-breadcrumbs a{
  color:#4b6b8a;
  text-decoration:none;
}

.search-result-breadcrumbs a:hover{ text-decoration:underline; }

/* Snippet/description – clamp to 2 lines, highlight <em> */
.search-result-description{
  color:#294b69;
  line-height:1.35;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.search-result-description em{
  background:#fff3bf;
  padding:0 .15em;
  border-radius:3px;
  font-style:normal;
}

/* Sidebar filter polish (works with your existing markup) */
.filters-in-section{ border:1px solid #e6edf3; border-radius:10px; padding:10px; background:#fff; }
.filters-in-section + .filters-in-section{ margin-top:16px; }
.filters-in-section .sidenav-title{ margin:4px 0 8px; font-size:.95rem; font-weight:800; color:#0a345a; }
.multibrand-filter-list{ list-style:none; margin:0; padding:0; }
.multibrand-filter-list .sidenav-item{ display:flex; justify-content:space-between; padding:6px 8px; border-radius:6px; color:#0a345a; text-decoration:none; }
.multibrand-filter-list .sidenav-item.current,
.multibrand-filter-list .sidenav-item:hover{ background:#f4f8fc; }
.see-all-filters{ margin-top:6px; background:#fff; border:1px solid #e6edf3; padding:6px 8px; border-radius:6px; cursor:pointer; }

/* Headline above list */
.search-results-subheading{ font-size:1.1rem; font-weight:800; color:#0a345a; margin:0 0 10px; }


/***** 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 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  color: var(--navy);
  font-weight: 500;
  transition: color 0.2s;
}

.dropdown-toggle:hover {
  color: var(--teal);
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  background: white;
  border: 1px solid #e7e7e7;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: 0.5rem;
  display: none;
  z-index: 1000;
  animation: fadeInDown 0.2s ease;
}
[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 {
  transition: transform 0.3s;
}

.dropdown:hover .dropdown-chevron-icon,
.language-selector:hover .dropdown-chevron-icon {
  transform: rotate(180deg);
}

.dropdown:hover .dropdown-menu,
.language-selector:hover .dropdown-menu {
  display: block;
}

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

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

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

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

.loading-container {
    text-align: center;
    margin: 20px 0;
}

.loading-icon {
    font-size: 2rem;  /* Adjust size */
    color: #0073e6;   /* Change to match your theme */
}


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

/* ========================================
   VIDEO TUTORIALS SECTION
   Clean card layout with title below
   ======================================== */

/* CSS Custom Properties */
.video-tutorials {
  --vt-spacing-sm: 0.75rem;
  --vt-spacing-md: 1.5rem;
  --vt-spacing-lg: 3rem;
  --vt-color-text: #0f2c3f;
  --vt-color-text-muted: #5a6d7c;
  --vt-color-primary: #004b8d;
  --vt-color-primary-hover: #003366;
  --vt-color-bg: #ffffff;
  --vt-color-border: #e0e6ed;
  --vt-color-button: #fbbf24;
  --vt-color-button-hover: #f59e0b;
  --vt-border-radius: 12px;
  --vt-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  width: 100%;
  padding: var(--vt-spacing-lg) 0;
  background: #f9fafb;
}

.video-tutorials__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--vt-spacing-md);
}

/* ========================================
   HEADER SECTION
   ======================================== */

.video-tutorials__header {
  text-align: center;
  margin-bottom: var(--vt-spacing-lg);
}

.video-tutorials__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--vt-color-text);
  margin: 0 0 var(--vt-spacing-sm);
  line-height: 1.2;
}

.video-tutorials__description {
  font-size: 1.125rem;
  color: var(--vt-color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ========================================
   VIDEO GRID
   ======================================== */

.showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 2.5rem;
  margin-bottom: var(--vt-spacing-lg);
}

/* ========================================
   VIDEO CARD - TITLE BELOW STYLE
   ======================================== */

.video-card {
  position: relative;
  background: var(--vt-color-bg);
  border-radius: var(--vt-border-radius);
  overflow: hidden;
  transition: var(--vt-transition);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 
    0 12px 28px rgba(0, 0, 0, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.08);
}

.video-card:focus-visible {
  outline: 2px solid var(--vt-color-primary);
  outline-offset: 2px;
}

/* Thumbnail Section */
.video-card__thumbnail {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: var(--vt-border-radius) var(--vt-border-radius) 0 0;
}

.video-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.video-card:hover .video-card__thumbnail img {
  transform: scale(1.03);
}

/* Info Section - Below Thumbnail */
.video-card__info {
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.video-card__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vt-color-text);
  margin: 0;
  line-height: 1.3;
  transition: color 0.2s;
}

.video-card:hover .video-card__title {
  color: var(--vt-color-primary);
}

.video-card__description {
  font-size: 1rem;
  color: var(--vt-color-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ========================================
   VIEW ALL BUTTON (CTA)
   ======================================== */

.video-tutorials__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--vt-spacing-md);
}

.video-tutorials__view-all-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--vt-color-button);
  color: var(--vt-color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  transition: var(--vt-transition);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.video-tutorials__view-all-button:hover {
  background: var(--vt-color-button-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.video-tutorials__view-all-button:focus-visible {
  outline: 2px solid var(--vt-color-primary);
  outline-offset: 2px;
}

.video-tutorials__button-icon {
  width: 20px;
  height: 20px;
}

/* ========================================
   LOADING STATE
   ======================================== */

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  padding: var(--vt-spacing-lg) 0;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vt-spacing-sm);
}

.loading-spinner__icon {
  color: var(--vt-color-primary);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========================================
   EMPTY STATE
   ======================================== */

.showcase-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--vt-spacing-lg);
  text-align: center;
  color: var(--vt-color-text-muted);
  min-height: 300px;
}

.showcase-empty__icon {
  margin-bottom: var(--vt-spacing-md);
  opacity: 0.5;
  font-size: 3rem;
}

.showcase-empty__text {
  font-size: 1rem;
  margin: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */

.showcase-error {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--vt-spacing-lg);
  text-align: center;
  min-height: 300px;
}

.showcase-error__icon {
  margin-bottom: var(--vt-spacing-md);
  color: #dc2626;
  font-size: 3rem;
}

.showcase-error__text {
  font-size: 1rem;
  color: var(--vt-color-text-muted);
  margin: 0 0 var(--vt-spacing-md);
}

.showcase-error__retry {
  padding: 0.75rem 1.5rem;
  background: var(--vt-color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--vt-transition);
}

.showcase-error__retry:hover {
  background: var(--vt-color-primary-hover);
}

.showcase-error__retry:focus-visible {
  outline: 2px solid var(--vt-color-primary);
  outline-offset: 2px;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (min-width: 640px) {
  .video-card__thumbnail {
    height: 160px;
  }
}

@media (min-width: 768px) {
  .showcase {
    grid-template-columns: repeat(2, 1fr);
  }
    .video-card__thumbnail {
    height: 180px;
  }
}

@media (min-width: 1024px) {
  .showcase {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
  
  
  .video-card__thumbnail {
    height: 200px;
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .video-card,
  .video-tutorials__view-all-button,
  .loading-spinner__icon {
    animation: none !important;
    transition: none !important;
  }
  
  .video-card:hover,
  .video-tutorials__view-all-button:hover {
    transform: none !important;
  }
}



/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .video-tutorials {
    display: none;
  }
}


/***** Dropdown container *****/
.product-dropdown {
  position: relative;
  display: inline-block;
  
}

/***** Button styling to match "Resources" style *****/
.product-dropdown button {
  background: transparent;
  border: none;
  color: #5a6d7c;
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}


/***** Dropdown menu styling *****/
.product-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  padding: 8px 0;
  z-index: 1000;
}

/***** Show dropdown when active *****/
.product-dropdown.active .dropdown-menu {
  display: block;
}

/***** Dropdown menu items *****/
.product-dropdown .dropdown-menu a {
  display: block;
  padding: 10px 15px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: background 0.3s ease;
}

/***** Hover effect on items *****/
.product-dropdown .dropdown-menu a:hover {
  background: #f3f3f3;
}

.dropdown-menu a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--navy);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.dropdown-menu a:hover {
  background: var(--pale-teal);
  color: var(--teal);
}

body[data-page-type="home"] #product-navigation {
  display: none !important;
}



/* Left sidebar (navigation) */
.sub-nav {
  width: 250px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 8px;
}

/* Sidebar links */
.sub-nav a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sub-nav a:hover {
  color: {{settings.brand_color}};
}

/* Styling for section cards */
.section-tree {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* Section title */
.section-tree-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Section container */
.section {
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.see-all-articles{
  display:block;
  margin:12px 0 18px;     /* <— bottom space so the next group ("Video") isn't jammed */
  background:#0b375d;
  color:#fff;
  text-align:center;
  text-decoration:none;
  padding:12px 14px;
  border-radius:12px;
  font-weight:700;
  transition:background .15s ease, transform .15s ease;
}

.see-all-articles:visited, .see-all-articles a {
  color: white !important;
}

.header-home-link a::visited, {
  color: #0f172a !important;
}

.header-home-text {
  color: var(--navy);
  font-weight: 500;
  transition: color 0.2s;
}

.article-list-item {
  list-style: none;
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
  border: 1px solid #e0e0e0;
  /*OG test before removing*/
  display: grid;
  grid-template-columns: 16px 20px 1fr 16px; /* ⭐ | icon | title | 🔒 */
  align-items: center;
  column-gap: 10px;
  border-bottom: 1px solid #eef2f6;
}

.article-list-item {
    display: grid;
    grid-template-columns: 16px 20px 1fr 16px; /* ⭐ | icon | title | 🔒 */
    align-items: center;
    column-gap: 10px;
    border-bottom: 1px solid #eef2f6;
  }

.category.article-list-item {
   list-style: none;


  padding: 5px;

  border: 1px solid #e0e0e0;
}



.article-list-item a {
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: #0056b3; /* Brand color */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-list-item:hover {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}

.article-list-item a::after {
  content: '→';
  font-size: 18px;
  color: #0056b3;
  transition: transform 0.2s ease-in-out;
}

.article-list-item a:hover::after {
  transform: translateX(5px);
}



/* Sidebar styling */
.category-sidebar {
  width: 250px;
  padding: 25px;
  background: #f8f8f8;
  border-radius: 8px;
  flex-shrink: 0;
}

.category-sidebar h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.category-sidebar ul {
  list-style: none;
  padding: 0;
}

.category-sidebar li {
  margin-bottom: 8px;
}

.category-sidebar a {
  text-decoration: none;
  color: #0056b3;
  font-size: 14px;
  transition: color 0.3s ease;
}

.category-sidebar a:hover {
  color: rgba(0, 49, 74, 1);
}



/* Styling for each section */
.section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Section title */
.section-tree-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #1f2d3d;
  border-bottom: 2px solid #ddd;
  padding-bottom: 4px;
}

/* Article list */
.article-list {
  list-style: none;
  padding: 0;
  margin:0;
  display:grid; 
  gap:14px;
}


.article-list-item, .category-article-list-item {
  font-size: 14px;
  margin-bottom: 6px;
}



.article-list-item a, .category-article-list-item a {
  text-decoration: none;
  color: rgba(0, 49, 74, 1);
}

.article-list-item a:hover, .category-article-list-item a {
  text-decoration: none;
  color: $hoover_color;
}


/* Main category section */
.category-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ====== Grid + Card ====== */
.section-tree.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.category-card {
  background: #fff;
  border: 1px solid #e6edf3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  padding: 18px 18px 14px;
}

/* Top section title inside card */
.category-card .section-tree-title {
  margin: 0 0 12px;
}
.category-card .section-tree-title a {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a345a;
  text-decoration: none;
}
.category-card .section-tree-title a:hover { text-decoration: underline; }

/* Group headers (Article / Video) */
.category-card .group {
  margin-top: 12px;
}
.category-card .group:first-of-type {
  margin-top: 6px;
}
.category-card h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0a345a;
}

/* ====== Group headers: Article / Video  ====== */
.group > h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  color: #3c4858;
}

/* ====== Add icons next to headers  (hidden for now) ======

.group--article > h4::before {
   content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' stroke='%23004b8d' stroke-width='1.5'/%3E%3Cpath d='M14 3v5h5' stroke='%23004b8d' stroke-width='1.5'/%3E%3C/svg%3E");
}


.group--video > h4::before {
  content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%23004b8d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z'/%3E%3Cpath d='M16 10l5-3v10l-5-3V10z' fill='%23004b8d'/%3E%3C/svg%3E");
  margin-right: 0.5rem;
  font-size: 1.1rem;
}
*/

/* ====== Lists / Rows ====== */
.category-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}
/* Turn each row into a 4-col grid: [star][row-icon][title][lock] */
.category-list li {
  display: grid;
  grid-template-columns: 16px 20px 1fr 16px;
  align-items: center;
  column-gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f6;
}
.category-list li:last-child { border-bottom: 0; }

/* Row hover (subtle) */
.category-list li:hover {
  background: linear-gradient(0deg, rgba(0,0,0,0.015), rgba(0,0,0,0.015));
  border-radius: 8px;
}

/* Place native SVGs in the grid */
.category-list li .icon-star {           /* existing class in your HBS */
  grid-column: 1;
  width: 16px; height: 16px;
  color: #f5b301;
}
.category-list li .icon-lock {           /* existing class in your HBS */
  grid-column: 4;
  width: 16px; height: 16px;
  justify-self: end;
  opacity: .65;
}

.category-article-list-item {
  margin-bottom: 0.4rem;
  padding: 0.4rem 0.6rem;
  transition: background 0.2s;
  border-radius: 4px;
}

.category-article-list-item:hover {
  background-color: #f8f9fa;
}


/* ====== Link + icon + title ====== */
/* The link spans columns 2–3 (row icon + title) */
.cat-article-link {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;              /* allows truncation */
  color: #004b8d;
  text-decoration: none;
}
.cat-article-link:focus {
  outline: 2px solid #7cc0ff;
  outline-offset: 2px;
  border-radius: 6px;
}
.cat-article-link:hover .cat-title { text-decoration: underline; }

/* Title truncation (prevents jagged columns) */
.cat-title {
  font-weight: 500;
  font-size: 0.95rem;
}

/* Icons */
.cat-icon {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  opacity: .92;
}

/* Document icon (Article) */
.group--article .cat-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' stroke='%23004b8d' stroke-width='1.5'/%3E%3Cpath d='M14 3v5h5' stroke='%23004b8d' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Video icon */
.group--video .cat-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%23004b8d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z'/%3E%3Cpath d='M16 10l5-3v10l-5-3V10z' fill='%23004b8d'/%3E%3C/svg%3E");
}

/* ====== “See all articles” CTA ====== */
.see-all-articles {
  display: block;
  margin-top: 12px;
  margin-bottom: 16px;  /* <- adds space before the next group (e.g., Video) */
  background: #0b375d;
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
  transition: background .15s ease;
}
.see-all-articles:hover { background: #072840; }
.see-all-articles:focus { outline: 2px solid #7cc0ff; outline-offset: 2px; }

/* ====== Sidebar spacing (optional tidy) ====== */
.category-sidebar h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #0a345a;
}
.category-sidebar ul { margin: 0; padding: 0; list-style: none; }
.category-sidebar li a {
  display: block;
  padding: 8px 10px;
  color: #0a345a;
  text-decoration: none;
  border-radius: 6px;
}
.category-sidebar li a:hover { background: #f4f8fc; text-decoration: underline; }

.category-card .group { margin-top: 14px; }
.category-card .group:first-of-type { margin-top: 6px; }



/* Header styling */
.page-header {
  margin: 20px 0px;
  text-align: left;
}

.page-header h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}


/* Ensure Resources dropdown and Language selector are aligned */
.header-nav .resources-dropdown {
  order: 1; /* Move Resources dropdown before Language */
}

.header-nav .footer-language-selector {
  order: 2;
}

/**********************
 * SEARCH RESULTS LAYOUT
 **********************/
.search-results{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:32px;
  align-items:start;
}

.search-results-sidebar{
  position: sticky;
  top: 84px;            /* keeps filters visible while scrolling */
  align-self:start;
}

@media (max-width: 1024px){
  .search-results{ grid-template-columns: 1fr; }
  .search-results-sidebar{ position: static; }
}

/**********************
 * RESULTS HEADER
 **********************/
.search-results-subheading{
  font-size: 20px;
  font-weight: 700;
  color:#073b63;
  margin: 8px 0 14px;
}

/**********************
 * QUICK / GENERATIVE ANSWER CARD
 **********************/
.search-results .quick-answer,
.search-results .generative-answers,
.search-results .ai-answer,
.search-results .answer,
.search-results .ai-card{
  border:1px solid #e6eef8;
  background:rgb(255, 255, 255);
  border-radius:12px;
  padding:16px 20px;
  box-shadow: 0 2px 8px rgba(0,30,84,.04);
  margin-bottom:24px;
}

/**********************
 * RESULT LIST AS CARDS
 **********************/
.search-results-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.search-results-list > li{
  list-style:none;
}

.search-results-list article{
  border:1px solid #e6eef8;
  border-radius:12px;
  background:#fff;
  padding:16px 20px;
  transition: box-shadow .18s ease, border-color .18s ease, transform .02s;
}

.search-results-list article:hover{
  border-color:#cfe2f7;
  box-shadow:0 6px 18px rgba(0,46,114,.08);
}

/**********************
 * TITLE + RIGHT META ROW
 **********************/
.search-result-title-container{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.search-result-title{
  margin:0;
  line-height:1.35;
  font-size:16px;
}

.search-result-title a{
  color:#063a62;
  font-weight:600;
  text-decoration:none;
  position:relative;
  padding-left:28px;  /* room for the icon */
}

.search-result-title a:hover{
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Small stack on mobile so icons don’t crash into the title */
@media (max-width: 520px){
  .search-result-title-container{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/**********************
 * DOC / VIDEO ICONS
 * (base doc icon, then override when <li> has .is-video)
 **********************/
.search-results-list .search-result-title a::before{
  content:"";
  position:absolute; left:0; top:2px;
  width:20px; height:20px;
  background-repeat:no-repeat; background-position:center; background-size:18px;
  opacity:.95;
  /* default: document icon */
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' stroke='%23004b8d' stroke-width='1.5'/%3E%3Cpath d='M14 3v5h5' stroke='%23004b8d' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* when JS marks result as video */
.search-results .search-results-list li.is-video .search-result-title a::before{
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%23004b8d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z'/%3E%3Cpath d='M16 10l5-3v10l-5-3V10z'/%3E%3C/svg%3E") !important;
}

/**********************
 * RIGHT-SIDE META (votes, comments)
 **********************/
.search-result-icons{
  display:flex;
  align-items:center;
  gap:12px;
  color:#7a8896;
  flex:0 0 auto;
}

/**********************
 * BREADCRUMBS + META LINE
 **********************/
.search-result-meta-container{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:6px;
  font-size:12px;
  color:#6a7785;
}

.search-result-breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
}

.search-result-breadcrumbs li{
  list-style:none;
}

.search-result-breadcrumbs li::after{
  content:"›";
  margin:0 4px;
  color:#a9b6c3;
}

.search-result-breadcrumbs li:last-child::after{ content:none; }


.search-result-breadcrumbs a{
  color:#4b6b8a;
  text-decoration:none;
}

.search-result-breadcrumbs a:hover{ text-decoration:underline; }

/**********************
 * SNIPPET / HIGHLIGHT
 **********************/
.search-result-description{
  font-size:14px;
  color:#2a3440;
  margin:8px 0 0;
}

.search-results em,
.search-results mark,
.search-results .highlight{
  background:#fff5c0;
  padding:0 2px;
  border-radius:3px;
  font-style:normal;
}

/**********************
 * FILTERS (left)
 **********************/
.filters-in-section{
  border:1px solid #e6eef8;
  border-radius:10px;
  padding:12px 12px 8px;
  background:#fff;
  margin-bottom:16px;
}

.filters-in-section .sidenav-title{
  margin:0 0 8px;
  font-size:14px;
  color:#073b63;
}

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

.multibrand-filter-list .sidenav-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#083c64;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
}

.multibrand-filter-list .sidenav-item:hover{
  background:#f5f9ff;
}

.multibrand-filter-list .sidenav-item.current{
  background:#e8f2ff;
  font-weight:600;
}

/**********************
 * PAGINATION SPACING
 **********************/
.container > .pagination,
.search-results + .pagination{
  margin-top: 28px;
}

/* Hide native search clear buttons (WebKit, Edge/IE) */
.search-container input[type="search"]::-webkit-search-decoration,
.search-container input[type="search"]::-webkit-search-cancel-button,
.search-container input[type="search"]::-webkit-search-results-button,
.search-container input[type="search"]::-webkit-search-results-decoration { display: none; }

.search-container input[type="search"]::-ms-clear,
.search-container input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; }
/* --- Article header layout ------------------------------------------------ */
.article-header {
  display: flex;
  align-items: center;         /* align icon/button to title baseline */
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;             /* allow wrap on small screens */
}

.article-header .article-title {
  margin: 0;                   /* remove extra vertical space */
  line-height: 1.25;
  color: #0f172a;              /* dark navy */
  flex: 1 1 auto;              /* title takes available space */
  min-width: 240px;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}


/* Right-side action area created by JS */
.article-header .article-actions-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* --- Print button --------------------------------------------------------- */
.print-article-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #dbe1ea;   /* subtle border */
  background: #fff;
  color: #0f172a;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease-in-out;
  box-shadow: 0 1px 1px rgba(16,24,40,0.04);
}

.print-article-btn:hover {
  background: #f6f8fb;
  border-color: #cfd7e3;
}

.print-article-btn:active {
  transform: translateY(1px);
  background: #eef2f7;
}

.print-article-btn:focus {
  outline: 2px solid #0b5fff;  /* accessible focus ring */
  outline-offset: 2px;
}

.print-article-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  color: currentColor;
}

/* Keep spacing tidy when the button wraps under the title */
@media (max-width: 720px) {
  .article-header {
    align-items: flex-start;
  }
  .print-article-btn .print-article-label {
    display: none;             /* icon-only on mobile */
  }
  .print-article-btn {
    padding: 6px;              /* tighter padding when label hidden */
  }
}


/* --- Print view cleanup --------------------------------------------------- */
@media print {
  .header, .footer, .hero, .breadcrumbs, .article-actions-slot,
  .article-sidebar, .sub-nav, .search-container, .article-aux-tabs, #preview-bar-container, .breadcrumbs-link, .related-articles-inline, footer, .article-relatives, #live-preview-container {
    display: none !important;
  }
  .article-container, .article-body, #main-content, .content, .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0.6in !important;
  }
}

/* Overall spacing for video articles */
.is-video-article .article-header {
  margin-bottom: 12px;
}

/* "Video" chip before the title */
.video-chip {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #0b5fff;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Video card wrapper: responsive 16:9 player with polish */
.video-card.article {
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.08);
  overflow: hidden;
  /* responsive height: prefer modern aspect-ratio, fallback uses padding below */
  aspect-ratio: 16 / 9;
  max-width: 1100px;
  margin: 12px 0 24px;
}

/* Fallback for older browsers: keep ratio with padding hack */
@supports not (aspect-ratio: 16/9) {
  .video-card.article { position: relative; height: 0; padding-bottom: 56.25%; }
  .video-card .iframe-container,
  .video-card iframe { position: absolute; inset: 0; height: 100%; width: 100%; }
}

/* Normalize any .iframe-container inside */
.video-card .iframe-container {
  height: 100%;
  width: 100%;
}

.video-card.article iframe {  min-height: 500px;  width: 100%;}


/* Tighten page: center primary column a bit when video is main content */
.is-video-article .article-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Reduce noise: no TOC block if empty (JS hides it too) */
body.is-video-article .toc-sidebar:not(.guided-toc-sidebar) {
  display: none !important;
}

body.is-video-article .guided-toc-sidebar {
  display: block !important;
}

body.is-video-article.has-guided-toc .article-container-new {
  grid-template-columns: 280px 1fr !important;
  gap: 32px !important;
}

/* Don't distract with print on video pages (JS hides, CSS backs it up) */
.is-video-article .print-article-btn { display: none !important; }

/* Optional: soften “Was this helpful” spacing for media-heavy pages */
.is-video-article .article-votes { margin-top: 16px; }

/* Mobile tweaks */
@media (max-width: 720px) {
  .video-card.article { border-radius: 10px; }
  .is-video-article .article-content { max-width: 100%; }
  .video-chip { margin-bottom: 6px; }
}

/* =========================
 * CATEGORY CHIPS
 * ========================= */

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
  transition: transform 0.15s ease;
}

.category-chip-icon {
  font-size: 0.875em;
  line-height: 1;
}

.category-chip-text {
  line-height: 1;
  white-space: wrap;
}

/* Chip Types */
.category-chip--info {
  background: #e6f2ff;
  color: #0b5fff;
}

.category-chip--success {
  background: #e6f7f0;
  color: #007a4d;
}

.category-chip--warning {
  background: #fff5e6;
  color: #c77700;
}

.category-chip--new {
  background: #f0e6ff;
  color: #7c3aed;
}

.category-chip--deprecated {
  background: #fee;
  color: #c00;
}

/* Size Variants */
.category-chip--small {
  padding: 2px 6px;
  font-size: 0.6875rem;
  margin-left: 4px;
}

/* Context Specific */
.blocks-item-title .category-chip {
  margin-left: 6px;
  vertical-align: baseline;
}

h1 .category-chip {
  font-size: 0.875rem;
  padding: 5px 12px;
  margin-left: 12px;
}

/* Hover States */
.blocks-item-link:hover .category-chip,
.blocks-item-link:focus .category-chip,
a:hover .category-chip {
  opacity: 1;
}

.category-chip:hover {
  transform: scale(1.05);
}

/* Mobile */
@media (max-width: 768px) {
  .category-chip {
    font-size: 0.6875rem;
    padding: 3px 8px;
    margin-left: 6px;
  }
  
  h1 .category-chip {
    font-size: 0.75rem;
    padding: 4px 10px;
    margin-left: 8px;
  }
}


/* ---------- layout ---------- */
.left-column h2{
  margin: 0 0 12px;
  color: var(--ink);
  font-weight: 800;
}

/* stack items with breathing room */
.accordion{
  display: flex;
  flex-direction: column;
  gap: 12px;
 /* OG test b4 removing  margin-bottom: 2rem; */
}

/* OG test before removing
.accordion-item {
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
  }*/

/* each accordion card */
.accordion-item{
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}

/* header button */
.accordion-button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  /* OG, test B4 removing
  background-color: #fdfdfd;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  text-align: left;
  font-weight: bold;
  font-size: 1rem;
  color: #003366;
  transition: background 0.2s ease;*/
}

.accordion-title{
  font-weight: 700;
  color: var(--ink);
}

/* plus → minus using only CSS */
.accordion-icon{
  width: 22px; height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  color: var(--brand);
  background: rgba(11,95,255,.06);
  transition: background .15s ease, transform .15s ease;
  /* OG test before removing 
  font-size: 1.2rem;
  transition: transform 0.3s ease; */
}


/* hover/focus */
.accordion-button:hover{ 
    background: rgba(15,23,42,.03); }

.accordion-button:focus{ 
    outline: 2px solid var(--brand); outline-offset: 2px; }

/* content panel animates height (works with your JS that sets max-height) */
.accordion-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background:#fff;
 /* OG test before removing
    background-color: #fcfcfc;
    padding: 0 20px;
  }*/
}

/* list */
.learn-how-to-section{
  list-style: none;
  margin: 6px 0 12px;
  padding: 0 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* link row look */
.learn-how-to-section li a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;              /* ← remove default blue underline */
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .02s;
}

/* subtle leading dot */
.learn-how-to-section li a::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .18;
  transition: transform .15s ease, opacity .15s ease;
}

.learn-how-to-section li a:hover{
  background: var(--row-bg);
  border-color: var(--line);
}
.learn-how-to-section li a:hover::before{
  opacity: .9;
  transform: scale(1.25);
}

/* keyboard focus */
.learn-how-to-section li a:focus{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* mobile spacing */
@media (max-width: 720px){
  .accordion-title{ font-size: 1rem; }
  .learn-how-to-section li a{ padding: 10px; }
}

.accordion-button[aria-expanded="true"] .accordion-icon{
  transform: rotate(180deg);
  background: rgba(11,95,255,.12);
  /* OG test b4 removing
  ransform: rotate(45deg); */
}

.accordion-button[aria-expanded="true"] .accordion-icon::before{
    content:"–";
}

/* OG test b4 removing
.accordion-icon::before{
    content:"+";
    font-weight: 700;
    line-height: 1;
  }*/

.accordion-icon::before{ 
    content: none; } /* hide the +/– text version */


.header-nav{ display:flex; align-items:center; gap:22px; }
.cc-link{ margin-left:auto; color:#0f2c3f; text-decoration:none; font-weight:600; padding:6px 8px; border-radius:8px; }
.cc-link:hover{ background:rgba(15,44,63,.06); }
.cc-link:focus{ outline:2px solid #0b5fff; outline-offset:2px; }

/* =========================
 * MICROSITE STYLES
 * ========================= */


/* Optional: Different styling per microsite */
body.microsite-4405148109588 {
  /* Implementation microsite customizations */
}

body.microsite-360002808052 {
  /* eLearning microsite customizations */
}

/* =========================
 * UNIFIED CONTENT TYPE STYLING
 * Videos and Articles
 * ========================= */

/* --- Content Type Chips (Article Page) ------------------------------------ */
.video-chip,
.article-chip {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #f0f4f8;
  color: #4a5568;
}

.video-chip {
  background: #eaf2ff;
  color: #0b5fff;
}

.article-chip {
  background: #f0f4f8;
  color: #4a5568;
}


/* --- List Item Icons (Section/Category Pages) ----------------------------- */
.article-list-item .row-icon,
.category-article-list-item .row-icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 1.125rem;
  line-height: 1;
  vertical-align: middle;
}

/* Default icon is document */
.article-list-item .row-icon::before,
.category-article-list-item .row-icon::before {
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' stroke='%23004b8d' stroke-width='1.5'/%3E%3Cpath d='M14 3v5h5' stroke='%23004b8d' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Video items get video icon */
.article-list-item.is-video .row-icon::before,
.category-article-list-item.is-video .row-icon::before,
.group--video .row-icon::before {
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%23004b8d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z'/%3E%3Cpath d='M16 10l5-3v10l-5-3V10z'/%3E%3C/svg%3E") !important;
}

/* --- Popular Articles (Homepage) ------------------------------------------ */
.popular-article-item .icon {
  font-size: 1.25rem;
  margin-right: 8px;
}

.popular-article-item.is-video .icon {
  color: #0b5fff;
}

.popular-article-item.is-article .icon {
  color: #4a5568;
}

/* --- Search Results ------------------------------------------------------- */
.search-result .content-type-badge {
  display: inline-block;
  margin-right: 6px;
  font-size: 1rem;
  vertical-align: middle;
}

.search-result.is-video {
  border-left: 3px solid #0b5fff;
}

.search-result.is-article {
  border-left: 3px solid #e2e8f0;
}

/* --- Section Groups (Article vs Video sections) --------------------------- */
.group--video {
  background: transparent;
  padding: 0;
  margin-bottom: 24px;
}

.group--article {
  background: #ffffff;
  padding: 20px;
  margin-bottom: 24px;
}

.group--video .group-title::before {
  content: '🎥 ';
  margin-right: 8px;
}

.group--article .group-title::before {
  content: '📄 ';
  margin-right: 8px;
}

/* --- Print Button Visibility ---------------------------------------------- */
/* Print button should only show for articles, not videos */
.is-video-article .print-article-btn {
  display: none !important;
}

.is-article-article .print-article-btn {
  display: inline-flex !important;
}

/* --- Table of Contents Adjustments ---------------------------------------- */
/* Video articles often have minimal text, hide empty TOC */
.is-video-article .toc-sidebar:empty,
.is-video-article .toc-sidebar:not(:has(.toc-list li)) {
  display: none;
}

/* --- Mobile Responsive ---------------------------------------------------- */
@media (max-width: 768px) {

  .video-chip,
  .article-chip {
    font-size: 0.6875rem;
    padding: 3px 8px;
    margin-right: 6px;
  }

  .is-video-article .article-body p {
    font-size: 1rem;
  }
}


/* --- Accessibility Improvements ------------------------------------------- */
/* Ensure chips have proper contrast */
.video-chip,
.article-chip {
  transition: transform 0.1s ease;
}

/* Hover states for interactive elements */
.article-list-item:hover,
.category-article-list-item:hover,
.popular-article-item:hover {
  background: #f7fafc;
}

.article-list-item.is-video:hover {
  background: #eef2ff;
}

/* Focus states */
.article-list-link:focus,
.popular-article-link:focus {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Animation for Loading States ----------------------------------------- */
@keyframes shimmer {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.article-list-item.loading .row-icon,
.popular-article-item.loading .icon {
  animation: shimmer 1.5s ease-in-out infinite;
}

/* --- Legacy Support ------------------------------------------------------- */
/* Support old class names for backwards compatibility */
.is-video .row-icon::before {
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%23004b8d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z'/%3E%3Cpath d='M16 10l5-3v10l-5-3V10z'/%3E%3C/svg%3E") !important;
}

.group.is-video {
  background: linear-gradient(135deg, #eaf2ff 0%, #f7faff 100%);
  border-radius: 8px;
  padding: 20px;
}

/***** Tables *****/
 table {
  width: 100%;
  table-layout: fixed;
   /*font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
   font-size:1em;*/
   color:black;
   margin-bottom:1.5em;
} 

td, th {
  /*font-size: 1em;
  padding: 0 2em;*/
  font-weight: 400;
  text-align: left;
  padding: 0 0em;
  
}

tr:nth-child(even){
  border-bottom: .02em solid #d0d0d0;
  border-top: .02em solid #d0d0d0;
}
/*
th {
  background-color: #4CAF50;
  color: white;
}*/

.list {
    width: 100%;
    table-layout: fixed;
}

.list td {
  /*font-size: 1em;
  font-weight: 300;*/
  text-align: left;
  padding: 0;
}

.list tr{
  border:none;
}

.checklist{
  display: flex;
  flex-flow: column wrap;
  line-height: 1.5;
  overflow:wrap;
  flex: 1 10 auto;
  width:100%;
}

.checklist.bg td {
  font-size:.80em;
}

.images {
  border:none;
  display: flex;
  flex-flow: column wrap;
  line-height: 1.5;
  overflow:wrap;
  flex: 1 10 auto;
  width:100%;
  margin-left:-24.5px;
}

.images td {
  vertical-align: top;
}

.infoandtables {
  border:none;
  display: inline;
  flex-flow: column wrap;
  line-height: 1.5;
  overflow:wrap;
  flex: 1 10 auto;
  width:100%;
  margin-left:-24.5px;
}

.infoandtables td {
  vertical-align: center;
}
summary.before {
  
}
  /*display: flex;
  width:100%;
  table-layout:fixed;
  border: 1px solid black;
  align-content: flex-start


.checklist td {
  font-size: 1em;
  font-weight: 300;
  padding: 0;
  padding-left:5px;
  border-right: 1px solid black;
  border-left:0px;
  vertical-align: text-top;
  text-align:center;
}*/
 .checklist tr, {
  flex-flow: row nowrap;
  flex-grow: 1;
  padding: 0.5em;
  text-overflow: ellipsis;
  min-width: 0px;
  white-space: wrap;
  border-bottom: 2px solid #d0d0d0;
   border-top: 2px solid #d0d0d0;
} 

#change {
  background-color: #f2f2f2 !important;
  text-align:center;
}

.checklist tr:first-child {
  text-align:center;
  vertical-align: middle;
}

.checklist ul {
  list-style-type: none!important;
  text-align: center; !important;
  margin-left:1em;
  
}

.checklist ul li:before {
content:"◻";
  font-size:2.5em;
  color: black !important; 
}

.checklist td {
  border: 2px solid #d0d0d0;
  padding:0 1.5em;
}

.reports {
  border: 1px solid white;
}

.reports h3 {
  padding:0 1.5em;
}

.reports h3 a{
  color: rgba(0, 49, 74, 1);
}

.reports.small {
  width:50%;
  table-layout:fixed;
  border: 1px solid white;
  margin: .5em .5em;
}

.reports td, .wysiwyg-table td {
  padding: 0 .5em;
  border-right: 2px solid white;
  margin-top:0em;
  vertical-align: middle;
  width:auto;
  text-align: left;
}

.reports p {
      margin-block-end: 1em;
  margin-top: 1em;
  
}

.checklist tr:first-child {
  background:rgb(0 171 148); 
  text-align:center;
  font-size: 1em;
}
.reports tr:first-child{
  background:#fec40b; 
  text-align:center;
  font-size: 1em;
}

.reports tr:first-child td:first-child {
  text-align:center;
}

.reports td:nth-child(3) {
  width:50%;
  white-space:wrap;
  text-align: left;
  padding:.5em;
}

.reports td:nth-child(4) {
  width:18%;
}

.reports.small tr:first-child {
  background:#fec40b; 
  text-align:center;
  font-size: 1em;
}

.reports.matrix {
  padding: 3em 3em;
}


.reports tr {
    border: 3px solid white;
    width: auto; 
}

.reports.matrix tr:first-child {
  color: #fec40b;
  background:#474e54;
  vertical-align: middle;
  word-wrap:break-word;
  
}
.reports.matrix tr {
  background-color: #f2f2f2;
  
}

.reports.matrix td {
  width:100%;
  text-align:center;
}

.reports ul {
  margin: 5px 50px
}

.reports.matrix ul {
  list-style-type: none;
  text-align: center;
  margin: 1em;
}

.reports.matrix ul li:before {
content: "\2714\0020";
  color:#fec40b;
  text-shadow: 1.5px 1.5px grey;
  font-size:1.5em;
}

.reports.matrix ol, .reports.matrix ol li {
  list-style-type: none;
  text-align: center; 
  margin-left: -1.25em;
  margin-top: 1em ;
}

.reports.matrix ol li:before {
content: '\2718\0020';
  color:#21b6d7;
text-shadow: 1.5px 1.5px grey;
  font-size:1.5em;
}

.reports tr:nth-child(even){
  background-color: #f2f2f2;
}

.reports.simple tr:nth-child(even){
  background-color: #f2f2f2;
}

@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}

.table th,
.table th a {
  color: #0075b0;
  font-size: 13px;
  font-weight: 300;
  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;
  }
}

/* Fix table rendering inside Zendesk figure.wysiwyg-table */
.wysiwyg-table {
  width: 100% !important;
  height: auto !important;        /* 🔹 allow table to grow naturally */
  overflow-x: auto;
  overflow-y: visible;
  margin: 1.5em 0;
  display: block;
}

figure.wysiwyg-table table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;             /* 🔹 let columns size themselves */
  word-break: normal;
  white-space: normal;
  font-size: 14px;
}

figure.wysiwyg-table th,
figure.wysiwyg-table td {
  border: 1px solid #ddd;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

figure.wysiwyg-table th {
  background-color: #f6f8fa;
  font-weight: 600;
  color: #222;
}

figure.wysiwyg-table tr:nth-child(even) td {
  background-color: #fafafa;
}

figure.wysiwyg-table tr:hover td {
  background-color: #f1f5fa;
}

/* ====================================
   CATEGORY PAGE GRID LAYOUT STYLES
   ==================================== */

/* Main category page container */
.category-page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* Layout: Sidebar + Main Content */
.category-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 32px;
}

/* ====================================
   SIDEBAR NAVIGATION
   ==================================== */
.category-sidebar {
  position: sticky;
  top: 100px;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e6edf3;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 700;
  color: #0a345a;
  margin: 0 0 16px 0;
}

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

.sidebar-item {
  margin-bottom: 4px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  color: #0a345a;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.sidebar-link:hover {
  background: #f4f8fc;
  color: #004b8d;
}

.sidebar-link:focus {
  outline: 2px solid #7cc0ff;
  outline-offset: 2px;
}

.sidebar-link.active {
  background: #e6f2ff;
  color: #004b8d;
  font-weight: 600;
}

.sidebar-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}

/* Sidebar Back Link */
.sidebar-back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  margin-top: 24px;
  color: #0066cc;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-top: 1px solid #e6edf3;
  transition: all 0.2s ease;
}

.sidebar-back-link:hover {
  color: #0052a3;
  padding-left: 8px;
}

.sidebar-back-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ====================================
   MAIN CONTENT AREA
   ==================================== */
.category-main-content {
  min-width: 0;
}

/* ========================================
           BREADCRUMBS - OPTION 1 (Minimal & Clean)
           ======================================== */
        .breadcrumbs {
            margin-bottom: 32px;
        }

        .breadcrumbs-list {
            display: flex;
            align-items: center;
            gap: 8px;
            list-style: none;
            flex-wrap: wrap;
        }

        .breadcrumbs-item {
            display: flex;
            align-items: center;
        }

        .breadcrumbs-link {
            color: #00314A;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: color 0.2s ease;
            display: flex;
            /*align-items: center;*/
            gap: 6px;
        }

        .breadcrumbs-link:hover {
            color: #0066cc;
        }

        .breadcrumbs-home-icon {
            width: 18px;
            height: 18px;
        }

        .breadcrumbs-separator {
            color: #cbd5e0;
            font-size: 14px;
            margin: 0 4px;
            user-select: none;
        }

        .breadcrumbs-current {
            color: #00314A;
            font-size: 14px;
            font-weight: 600;
        }

        /* Category Page Layout */
        .category-page-container {
            background: white;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .category-header {
            margin-bottom: 40px;
            padding-bottom: 24px;
            border-bottom: 2px solid #e6edf3;
        }

        .category-title {
            font-size: 32px;
            font-weight: 700;
            color: #0a345a;
            margin-bottom: 12px;
        }

        .category-description {
            font-size: 16px;
            color: #5a6c7d;
            line-height: 1.6;
        }

        .category-sections-grid {
            display: flex;
            flex-direction: column;
            gap: 48px;
        }

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #e6f2ff;
  color: #004b8d;
  font-size: 10px;
  font-weight: 600;
  border-radius: 20px;
}

.chip-icon {
  width: 16px;
  height: 16px;
  color: currentColor;
}


/* ====================================
   SECTIONS (One per row, stacked vertically)
   ==================================== */
.category-sections-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Individual Section Card */
.section-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e6edf3;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.section-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #cfe2f7;
}

/* Section Card Header */
.section-card-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e6edf3;
}

.section-card-title {
  font-size: 20px;
  font-weight: 600;
  color: #0a345a;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.section-card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.section-card-title-link:hover {
  color: #004b8d;
  text-decoration: underline;
}

.section-card-description {
  font-size: 13px;
  color: #5a6c7d;
  margin: 0;
  line-height: 1.4;
}

/* Section Card Content */
.section-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}


/* ====================================
   UNIFIED CONTENT GROUP
   ==================================== */
.unified-content-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.unified-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 8px;
}

.unified-content-title {
  font-size: 14px;
  font-weight: 600;
  color: #0a345a;
  margin: 0;
}

.unified-content-count {
  font-size: 12px;
  color: #5a6c7d;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

/* ====================================
   UNIFIED ARTICLE LIST (2-3 columns grid)
   ==================================== */
.unified-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 12px;
  flex: 1;
}

.unified-article-item {
  margin: 0;
}

.unified-article-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  position: relative;
  min-height: 80px;
  height: 100%;
}

.unified-article-link:hover {
  background: #fff5f0;
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.1);
}

.unified-article-link:focus {
  outline: 2px solid #7cc0ff;
  outline-offset: 2px;
}

/* Star Icon (Promoted) */
.unified-article-star {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 12px;
  height: 12px;
  color: #f5b301;
  z-index: 1;
}

/* Article Info */
.unified-article-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.unified-article-title {
  font-size: 15px;
  font-weight: 500;
  color: #0a345a;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.unified-article-link:hover .unified-article-title {
  color: #004b8d;
}

.unified-article-meta {
  font-size: 12px;
  color: #5a6c7d;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.unified-article-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: #e9ecef;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.unified-article-type--video {
  background: #e3f2fd;
  color: #1976d2;
}

.unified-article-type--article {
  background: #f3e5f5;
  color: #7b1fa2;
}

.unified-article-type--infographic {
  background: #f3e5f5;
  color: #7b1fa2;
}

.unified-article-separator {
  color: #cbd5e0;
}

.unified-article-updated {
  color: #5a6c7d;
}

/* Lock Icon (Internal) */
.unified-article-lock {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #5a6c7d;
  opacity: 0.65;
}

/* ====================================
   SEE ALL LINK (Blue style with arrow)
   ==================================== */
.see-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  background: transparent;
  color: #0066cc;
  text-decoration: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
  align-self: flex-start;
  border: none;
}

.see-all-link:hover {
  color: #0052a3;
  background: transparent;
  transform: translateX(4px);
  box-shadow: none;
}

.see-all-link:focus {
  outline: 2px solid #7cc0ff;
  outline-offset: 2px;
}

.see-all-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.see-all-link:hover svg {
  transform: translateX(4px);
}

/* ====================================
   SHOW MORE ARTICLES BUTTON
   ==================================== */
.show-more-articles-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 16px;
  background: #f8f9fa;
  color: #0a345a;
  text-decoration: none;
  border: 1px solid #e6edf3;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.show-more-articles-btn:hover {
  background: #e9ecef;
  border-color: #cfe2f7;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.show-more-articles-btn:focus {
  outline: 2px solid #7cc0ff;
  outline-offset: 2px;
}

.show-more-articles-btn svg {
  width: 12px;
  height: 12px;
}

/* ====================================
   EMPTY STATE
   ==================================== */
.category-empty {
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e6edf3;
}

.category-empty p {
  font-size: 16px;
  color: #5a6c7d;
  margin-bottom: 20px;
}

/* ====================================
   BACK TO TOP BUTTON
   ==================================== */
.back-to-top-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  background: var(--teal);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top-btn:hover {
  background: #0052a3;
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
}

.back-to-top-btn:active {
  transform: translateY(-2px);
}

.back-to-top-btn svg {
  width: 20px;
  height: 20px;
}

/* ====================================
   RESPONSIVE BREAKPOINTS
   ==================================== */

/* Tablet: Sidebar below */
@media (max-width: 1024px) {
  .category-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .category-sidebar {
    position: static;
    order: -1;
  }
  
  .unified-article-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: Single column */
@media (max-width: 767px) {
  .category-page-container {
    padding: 0 16px 32px;
  }
  
  .category-layout {
    gap: 24px;
  }
  
  .category-header {
    margin-bottom: 24px;
  }
  
  .category-title {
    font-size: 24px;
  }
  
  .category-sections-grid {
    gap: 32px;
  }
  
  .section-card {
    padding: 20px;
  }
  
  .section-card-title {
    font-size: 18px;
  }
  
  .sidebar-link {
    font-size: 13px;
    padding: 8px 10px;
  }
  
  .unified-article-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .unified-article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .unified-article-separator {
    display: none;
  }
  
  .back-to-top-btn {
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }
  
  .back-to-top-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* Very Small Screens */
@media (max-width: 480px) {
  .unified-article-list {
    grid-template-columns: 1fr;
  }
  
  .unified-article-link {
    padding: 12px;
  }
}

/* ==========================================================================
   IMPROVED SECTION PAGE STYLES - Mockup 4 Sidebar Navigation
   ========================================================================== */

/* ==========================================================================
   Main Layout with Sidebar
   ========================================================================== */

.section-layout-sidebar {
  display: flex;
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* ==========================================================================
   Left Sidebar Navigation - IMPROVED
   ========================================================================== */

.section-sidebar {
  flex-shrink: 0;
  width: 280px;
  position: sticky;
  top: 40px;
  height: fit-content;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* Sidebar Header - Removed duplicate title */
.section-sidebar-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #E5E7EB;
}

.section-sidebar-title {
  font-size: 20px;
  font-weight: 700;
  color: #1F2937;
  margin: 0;
  line-height: 1.3;
}

.section-sidebar-description {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
  margin: 8px 0 0 0;
}

/* Sidebar Navigation Menu - IMPROVED */
.section-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.section-nav-item {
  margin-bottom: 0;
}

.section-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: #4B5563;
  text-decoration: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  border-left: 3px solid transparent;
  margin-bottom: 4px;
}

.section-nav-link:hover {
  background: #F3F4F6;
  color: #1F2937;
  border-left-color: #D1D5DB;
}

.section-nav-link.active {
  background: #EFF6FF;
  color: #0066B2;
  font-weight: 600;
  border-left-color: #0066B2;
}

/* Icons - Using SVG instead of emoji */
.section-nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b5fff;
}

.section-nav-link:hover .section-nav-icon {
  color: #6B7280;
}

.section-nav-link.active .section-nav-icon {
  color: #0066B2;
  
}

.section-nav-icon svg {
  width: 18px;
  height: 18px;
}

.section-nav-text {
  flex: 1;
  min-width: 0;
}

.section-nav-count {
  flex-shrink: 0;
  font-size: 12px;
  color: rgb(107, 114, 128);
  font-weight: 600;
  margin-left: auto;
  padding: 2px 8px;
  background: #F3F4F6;
  border-radius: 10px;
}

.section-nav-link.active .section-nav-count {
  color: #0066B2;
  background: #DBEAFE;
}

.section-nav-link:hover .section-nav-count {
  background: #E5E7EB;
}

/* Sidebar Stats - IMPROVED */
.section-sidebar-stats {
  margin-top: 24px;
  padding: 16px;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.sidebar-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.sidebar-stat:not(:last-child) {
  border-bottom: 1px solid #E5E7EB;
}

.sidebar-stat-label {
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
}

.sidebar-stat-value {
  font-size: 18px;
  color: #1F2937;
  font-weight: 700;
}

/* Sidebar Subscribe */
.section-sidebar-subscribe {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
}

/* ==========================================================================
   Main Content Area - IMPROVED
   ========================================================================== */

.section-main-content {
  flex: 1;
  min-width: 0;
}

/* Breadcrumb */
.breadcrumb-wrapper {
  margin-bottom: 16px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6B7280;
}

.breadcrumb-link {
  color: #0066B2;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover {
  color: #004D87;
  text-decoration: underline;
}

.breadcrumb-separator {
  color: #D1D5DB;
}

.breadcrumb-current {
  color: #374151;
  font-weight: 500;
}

/* Content Header - IMPROVED (removed duplicate title) */
.content-header-sidebar {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid #E5E7EB;
}

.content-title-sidebar {
  font-size: 28px;
  font-weight: 700;
  color: #1F2937;
  margin: 0;
  line-height: 1.2;
}

/* Hide content title if it's same as breadcrumb */
.content-title-sidebar:empty {
  display: none;
}

/* ==========================================================================
   Section Groups - IMPROVED
   ========================================================================== */

.section-group-sidebar {
  margin-bottom: 40px;
}

.section-group-sidebar:last-child {
  margin-bottom: 0;
}

.section-group-header-sidebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #E5E7EB;
}

.section-group-title-sidebar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #1F2937;
  margin: 0;
}

.section-group-icon-sidebar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #F0F9FF;
  color: #0066B2;
}

.section-group-icon-sidebar svg {
  width: 18px;
  height: 18px;
}

.section-group-count-sidebar {
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  padding: 4px 10px;
  background: #F3F4F6;
  border-radius: 12px;
}

/* ==========================================================================
   Article List - Clean Rows
   ========================================================================== */

.article-list--sidebar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom:40px;
}

.article-list-item-sidebar {
  /* No styling needed */
}

.article-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.article-row:hover {
  border-color: #0066B2;
  box-shadow: 0 2px 8px rgba(0, 102, 178, 0.1);
  transform: translateX(4px);
}

.article-row:focus {
  outline: 2px solid #0066B2;
  outline-offset: 2px;
}

/* Article Icon */
.article-icon-wrapper {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #F0F9FF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0066B2;
  transition: all 0.2s ease;
}

.article-icon-wrapper svg {
  width: 24px;
  height: 24px;
}

.article-icon-wrapper--video {
  background: #F0F9FF;
  color: #0066B2;
}

.article-row:hover .article-icon-wrapper {
  transform: scale(1.05);
}

/* Article Info */
.article-info {
  flex: 1;
  min-width: 0;
}

.article-info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.article-row-title {
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
  margin: 0;
  transition: color 0.2s ease;
}

.article-row:hover .article-row-title {
  color: #0066B2;
}

/* Article Actions */
.article-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-small svg {
  width: 10px;
  height: 10px;
}

.badge-small--featured {
  background: #FEF3C7;
  color: #92400E;
}

.badge-small--internal {
  background: #E0E7FF;
  color: #3730A3;
}

.article-arrow-icon {
  color: #D1D5DB;
  transition: all 0.2s ease;
  width: 20px;
  height: 20px;
}

.article-row:hover .article-arrow-icon {
  color: #0066B2;
  transform: translateX(4px);
}

/* Section Group Footer */
.section-group-footer-sidebar {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: center;
}

.btn-view-all-sidebar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: white;
  border: 2px solid #0066B2;
  border-radius: 8px;
  color: #0066B2;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-view-all-sidebar:hover {
  background: #0066B2;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 102, 178, 0.2);
}

.btn-view-all-sidebar svg {
  transition: transform 0.2s ease;
  width: 16px;
  height: 16px;
}

.btn-view-all-sidebar:hover svg {
  transform: translateX(4px);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.content-empty-sidebar {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
}

.content-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: #D1D5DB;
}

.content-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin: 0 0 8px 0;
}

.content-empty-text {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

.content-empty-text a {
  color: #0066B2;
  text-decoration: none;
}

.content-empty-text a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1200px) {
  .section-layout-sidebar {
    gap: 32px;
  }
  
  .section-sidebar {
    width: 240px;
  }
}

@media (max-width: 1024px) {
  .section-layout-sidebar {
    flex-direction: column;
    gap: 32px;
    padding: 24px 16px;
  }
  
  .section-sidebar {
    position: static;
    width: 100%;
    max-height: none;
    overflow-y: visible;
  }
  
  /* Horizontal scrolling nav on tablet */
  .section-nav {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  
  .section-nav-item {
    margin-bottom: 0;
  }
  
  .section-nav-link {
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  
  .section-nav-link:hover {
    border-bottom-color: #D1D5DB;
  }
  
  .section-nav-link.active {
    border-bottom-color: #0066B2;
  }
  
  .section-sidebar-stats {
    display: flex;
    gap: 16px;
  }
  
  .sidebar-stat {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none;
    border-right: 1px solid #E5E7EB;
    padding: 8px 12px;
  }
  
  .sidebar-stat:last-child {
    border-right: none;
  }
  
  .sidebar-stat-label {
    margin-bottom: 4px;
  }
}

@media (max-width: 768px) {
  .content-title-sidebar {
    font-size: 24px;
  }
  
  .section-group-title-sidebar {
    font-size: 18px;
  }
  
  .section-group-icon-sidebar {
    width: 28px;
    height: 28px;
  }
  
  .section-group-icon-sidebar svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 640px) {
  .section-layout-sidebar {
    padding: 16px 12px;
  }
  
  .article-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  
  .article-icon-wrapper {
    width: 40px;
    height: 40px;
  }
  
  .article-icon-wrapper svg {
    width: 20px;
    height: 20px;
  }
  
  .article-info-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .article-actions {
    width: 100%;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
    margin-top: 12px;
  }
  
  .btn-view-all-sidebar {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .section-sidebar {
    display: none;
  }
  
  .section-layout-sidebar {
    display: block;
  }
  
  .article-row {
    border: 1px solid #000;
    box-shadow: none;
    page-break-inside: avoid;
  }
  
  .article-arrow-icon {
    display: none;
  }
  
  .btn-view-all-sidebar {
    display: none;
  }
}

/* ==========================================================================
   Focus Styles for Accessibility
   ========================================================================== */

.section-nav-link:focus-visible,
.article-row:focus-visible,
.btn-view-all-sidebar:focus-visible {
  outline: 2px solid #0066B2;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ==========================================================================
   Smooth Scrolling
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   ARTICLE PAGE - OPTION 2: MAXIMUM WIDTH
   Complete styling with all sections unified
   ============================================ */

/* Main article container - Maximum width layout */
.article-container-new {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 60px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 40px 20px;
  align-items: start;
}

/* Left sidebar - Table of Contents */
.article-container-new .toc-sidebar {
  position: sticky;
  top: 20px;
  background: white;
  padding: 5px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  height: fit-content;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

.toc-sidebar {
  padding:25px !important;
}

.article-container-new .toc-sidebar .sidenav-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}

.article-container-new .toc-sidebar .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-container-new .toc-sidebar .toc-list li {
  margin-bottom: 12px;
}

.article-container-new .toc-sidebar .toc-list a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}

.article-container-new .toc-sidebar .toc-list a:hover {
  background: var(--pale-teal);
  color: var(--teal);
  border-left-color: var(--teal);
}

.article-container-new .toc-sidebar .toc-list a.current-article {
  background: var(--pale-teal);
  color: var(--teal);
  border-left-color: var(--teal);
  font-weight: 500;
}

/* Main article wrapper */
.article-main-wrapper {
  min-width: 0; /* Prevents grid blowout */
}

/* Breadcrumb styling */
.article-breadcrumb {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 30px;
}

.article-breadcrumb a {
  color: var(--teal);
  text-decoration: none;
}

.article-breadcrumb a:hover {
  text-decoration: underline;
}

/* Article main content */
.article-container-new .article {
  background: white;
  padding: 50px 80px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Article title */
.article-container-new .article-title {
  font-size: 44px;
  color: var(--navy);
  margin-bottom: 20px;
  line-height: 1.2;
  font-weight: 700;
}

/* Article metadata */
.article-metadata {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 14px;
  color: var(--text-light);
  padding-bottom: 30px;
  margin-bottom: 40px;
  border-bottom: 1px solid #e5e7eb;
}

.article-metadata .meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-metadata .meta-item svg {
  color: var(--teal);
}

.article-metadata .meta-separator {
  color: #d1d5db;
}

/* Article body */
.article-container-new .article-body {
  font-size: 18px;
  line-height: 1.8;
  color: var(--text-primary);
}

/* ============================================
   RELATED ARTICLES - CLEAN MODERN STYLE
   ============================================ */
.related-articles-inline {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid #e5e7eb;
}

.related-articles-inline .related-title {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.related-articles-inline .related-title::before {
  content: "";
  width: 4px;
  height: 24px;
  background: var(--teal);
  border-radius: 2px;
}

.related-articles-inline .related-section-name {
  color: var(--teal);
  font-weight: 600;
}

.related-articles-inline .related-articles-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  margin: 0;
  padding: 0;
}

.related-articles-inline .related-articles-list li {
  margin: 0;
}

.related-articles-inline .related-articles-list a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.related-articles-inline .related-articles-list a::before {
  content: "→";
  color: var(--teal);
  font-size: 16px;
  line-height: 1.5;
  flex-shrink: 0;
  font-weight: 600;
}

.related-articles-inline .related-articles-list a:hover {
  color: var(--teal);
}

.related-articles-inline .see-all-articles {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  color: var(--teal);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: gap 0.2s ease;
}

.related-articles-inline .see-all-articles::after {
  content: "→";
  font-size: 14px;
}

.related-articles-inline .see-all-articles:hover {
  gap: 10px;
}

/* ============================================
   VOTING SECTION - MODERN STYLED
   ============================================ */
.article-container-new .article-votes {
  margin-top: 60px;
  padding: 40px;
  background: #f9fafb;
  border-radius: var(--radius-lg);
  text-align: center;
}

.article-container-new .article-votes-question {
  font-size: 20px;
  margin-bottom: 24px;
  color: var(--navy);
  font-weight: 600;
}

.article-container-new .article-votes-controls {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}

.article-container-new .article-vote {
  padding: 12px 40px;
  border: 2px solid var(--teal);
  background: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 15px;
  color: var(--teal);
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.article-container-new .article-vote:hover {
  background: var(--teal);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.article-container-new .article-vote.button-primary {
  background: var(--teal);
  color: white;
}

.article-container-new .article-votes-count {
  font-size: 14px;
  color: var(--text-secondary);
  display: block;
  margin-top: 12px;
}

/* ============================================
   RECENTLY VIEWED & RELATED ARTICLES
   ============================================ */
.article-container-new .article-relatives {
  margin-top: 60px;
}

.article-container-new .recent-articles,
.article-container-new .related-articles {
  padding: 40px;
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid #e5e7eb;
  margin-bottom: 30px;
}

.article-container-new .recent-articles h2,
.article-container-new .related-articles h2 {
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-container-new .recent-articles h2::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMmM1LjUxNCAwIDEwIDQuNDg2IDEwIDEwcy00LjQ4NiAxMC0xMCAxMC0xMC00LjQ4Ni0xMC0xMCA0LjQ4Ni0xMCAxMC0xMHptMC0yYy02LjYyNyAwLTEyIDUuMzczLTEyIDEyczUuMzczIDEyIDEyIDEyIDEyLTUuMzczIDEyLTEyLTUuMzczLTEyLTEyLTEyem0xIDEydi02aC0ydjhoN3YtMmgtNXoiLz48L3N2Zz4=");
  font-size: 22px;
}

.article-container-new .related-articles h2::before {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' stroke='%23004b8d' stroke-width='1.5'/%3E%3Cpath d='M14 3v5h5' stroke='%23004b8d' stroke-width='1.5'/%3E%3C/svg%3E");
  font-size: 22px;
}

.article-container-new .recent-articles ul,
.article-container-new .related-articles ul {
  list-style: none;
  display: grid;
  gap: 12px;
}

.article-container-new .recent-articles li,
.article-container-new .related-articles li {
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.article-container-new .recent-articles li:hover,
.article-container-new .related-articles li:hover {
  border-left-color: var(--teal);
  background: var(--pale-teal);
}

.article-container-new .recent-articles a,
.article-container-new .related-articles a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-container-new .recent-articles a::before,
.article-container-new .related-articles a::before {
  content: "→";
  color: var(--teal);
  font-weight: 600;
  flex-shrink: 0;
}

.article-container-new .recent-articles a:hover,
.article-container-new .related-articles a:hover {
  color: var(--teal);
}

/* ============================================
   FOOTER - MODERN DESIGN
   ============================================ */
.footer {
  background: var(--navy);
  color: white;
  margin-top: 80px;
  padding: 60px 0 30px;
  border-top: 4px solid var(--teal);
}

.footer-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 40px;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 30px;
}

.footer-brand {
  max-width: 400px;
}

.footer-logo-link {
  text-decoration: none;
}

.footer-logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--cerello);
  display: block;
  margin-bottom: 12px;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.6;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.footer-column {
  min-width: 0;
}

.footer-heading {
  color: var(--cerello);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

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

.footer-link-list li {
  margin-bottom: 10px;
}

.footer-link-list a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
  display: inline-block;
}

.footer-link-list a:hover {
  color: white;
  padding-left: 5px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin: 0;
}

.footer-social {
  display: flex;
  gap: 15px;
}

/* Footer responsive */
@media (max-width: 768px) {
  .footer {
    padding: 40px 0 20px;
  }

  .footer-inner {
    padding: 0 20px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   RESPONSIVE BEHAVIOR
   ============================================ */

/* Tablet: Stack TOC below content */
@media (max-width: 1024px) {
  .article-container-new {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 20px;
  }

  .article-container-new .toc-sidebar {
    position: static;
    max-height: none;
    order: 2;
  }

  .article-main-wrapper {
    order: 1;
  }

  .article-container-new .article {
    padding: 40px 30px;
  }

  .article-container-new .article-title {
    font-size: 36px;
  }

  .related-articles-inline .related-articles-list {
    grid-template-columns: 1fr;
  }
}

/* Mobile: Further adjustments */
@media (max-width: 768px) {
  .article-container-new {
    padding: 20px 15px;
  }

  .article-container-new .article {
    padding: 30px 20px;
    border-radius: var(--radius-md);
  }

  .article-container-new .article-title {
    font-size: 28px;
  }

  .article-container-new .article-body {
    font-size: 16px;
  }

  .article-metadata {
    flex-wrap: wrap;
    gap: 12px;
  }

  .related-articles-inline {
    padding: 20px 0;
  }

  .article-container-new .article-votes {
    padding: 30px 20px;
  }

  .article-container-new .article-votes-controls {
    flex-direction: column;
  }

  .article-container-new .article-vote {
    width: 100%;
  }

  .article-container-new .recent-articles,
  .article-container-new .related-articles {
    padding: 25px 20px;
  }

  /* Make TOC collapsible on mobile */
  .article-container-new .toc-sidebar {
    padding: 20px;
  }

  .article-container-new .toc-sidebar[aria-expanded="false"] .toc-list {
    display: none;
  }

  .article-container-new .toc-sidebar .collapsible-sidebar-toggle {
    display: inline-block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--navy);
  }
}

/* ============================================
   ENSURE COMPATIBILITY WITH EXISTING STYLES
   ============================================ */

/* Keep existing article sidebar styles for backwards compatibility */
.article-sidebar {
  /* Existing styles remain intact */
}

/* Override only for new container */
.article-container-new .article-sidebar.toc-sidebar {
  /* New styles apply only within new container */
}

/* Ensure TOC items work with existing JS */
.article-container-new .toc-list .toc-lvl-1 > a {
  font-weight: 600;
}

.article-container-new .toc-list .toc-lvl-2 > a {
  padding-left: 28px;
  font-size: 0.95em;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .article-container-new {
    display: block;
  }

  .article-container-new .toc-sidebar {
    display: none;
  }

  .article-container-new .article {
    box-shadow: none;
    padding: 0;
  }

  .footer {
    display: none;
  }
}

/* ===================================================================
   OPTION 3: PREMIUM SPLIT VIEW STYLES FOR SEARCH RESULTS
   Add these styles to the END of your existing style.css file
   ================================================================= */

/* Split view layout */
.search-results--split-view {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 40px 20px;
}

@media (max-width: 1024px) {
  .search-results--split-view {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Premium sidebar with filter cards */
.search-results-sidebar--premium {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

.filter-card {
  background: white;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 49, 74, 0.1);
  transition: box-shadow 0.2s ease;
}

.filter-card:hover {
  box-shadow: 0 6px 16px rgba(0, 49, 74, 0.12);
}

.filter-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.filter-card-icon {
  font-size: 24px;
  line-height: 1;
}

.filter-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #00314A;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

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

.filter-card-list li {
  margin-bottom: 4px;
}

.filter-card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #4a5568;
  font-size: 14px;
  transition: all 0.2s ease;
}

.filter-card-item:hover {
  background: #F2FBFA;
  color: #00AB94;
}

.filter-card-item--active {
  background: #F2FBFA;
  color: #00AB94;
  font-weight: 600;
}

.filter-card-item-name {
  flex: 1;
}

.filter-card-item-count {
  font-size: 13px;
  color: #718096;
  font-weight: 500;
  padding: 2px 8px;
  background: #f5f5f5;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

.filter-card-item--active .filter-card-item-count {
  background: #00AB94;
  color: white;
}

/* Premium results column */
.search-results-column--premium {
  min-width: 0;
}

/* Full width when no sidebar */
.search-results-column--full-width {
  grid-column: 1 / -1;
  max-width: 1200px;
  margin: 0 auto;
}

.content-tag-active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #F2FBFA;
  border-radius: 6px;
  gap: 8px;
}

.content-tag-active .label {
  color: #00AB94;
  font-size: 14px;
  font-weight: 600;
}

.content-tag-active a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: background 0.2s ease;
}

.content-tag-active a:hover {
  background: #e5e7eb;
}

.content-tag-active .close-icon {
  stroke: #00AB94;
  width: 10px;
  height: 10px;
}

.search-results-header {
  margin-bottom: 30px;
}

.search-results-heading {
  font-size: 28px;
  font-weight: 700;
  color: #00314A;
  margin: 0 0 8px 0;
}

.search-results-count {
  font-size: 15px;
  color: #718096;
  margin: 0;
}

/* Premium result cards */
.search-results-list--premium {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-result-card {
  background: white;
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 2px 8px rgba(0, 49, 74, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Teal accent bar on hover */
.search-result-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #00AB94;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.search-result-card:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}

.search-result-card:hover {
  box-shadow: 0 8px 24px rgba(0, 49, 74, 0.12);
  transform: translateY(-2px);
}

.search-result-card-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.search-result-card-title a {
  color: #00314A;
  text-decoration: none;
  transition: color 0.2s ease;
}

.search-result-card-title a:hover {
  color: #00AB94;
}

.search-result-card-breadcrumb {
  margin-bottom: 16px;
}

.search-result-card-breadcrumb .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #718096;
}

.search-result-card-breadcrumb .breadcrumbs li {
  display: flex;
  align-items: center;
}

.search-result-card-breadcrumb .breadcrumbs li:not(:last-child)::after {
  content: '›';
  margin: 0 6px;
  color: #cbd5e0;
}

.search-result-card-breadcrumb .breadcrumbs a {
  color: #718096;
  text-decoration: none;
  transition: color 0.2s ease;
}

.search-result-card-breadcrumb .breadcrumbs a:hover {
  color: #00AB94;
}

.search-result-card-description {
  font-size: 15px;
  line-height: 1.6;
  color: #4a5568;
  margin: 0 0 20px 0;
}

.search-result-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.search-result-card-read-more {
  font-size: 14px;
  font-weight: 600;
  color: #00AB94;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.search-result-card-read-more:hover {
  color: #00314A;
  gap: 8px;
}

.search-disclaimer {
  font-size: 0.9em;
  color: #666;
  margin-top: 4px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .search-results--split-view {
    padding: 20px 16px;
  }

  .search-result-card {
    padding: 20px;
  }

  .search-result-card-title {
    font-size: 18px;
  }

  .search-results-heading {
    font-size: 24px;
  }

  .filter-card {
    padding: 20px;
  }
}

/* ==================================================
   ARTICLE CONTENT ENHANCEMENT - CSS FIXES
   ================================================== */

/* =========================
   VIDEO ARTICLE STYLES
   ========================= */

/* Enhanced video wrapper for larger display */
.video-wrapper-enhanced {
  position: relative;
  width: 100%;
  max-width: 1200px; /* Larger max width for videos */
  margin: 24px auto 32px; /* Center with good spacing */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  
  /* 16:9 aspect ratio */
  aspect-ratio: 16 / 9;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16/9) {
  .video-wrapper-enhanced {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
  }
  
  .video-wrapper-enhanced iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* When article has video label, maximize content width */
.is-video-article .article-main-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.is-video-article .article-content {
  max-width: 100%;
}

/* Hide TOC completely for video articles */
.is-video-article .toc-sidebar,
.is-video-article .article-sidebar.toc-sidebar {
  display: none !important;
}

/* Adjust layout when TOC is hidden */
.is-video-article .article-container-new {
  grid-template-columns: 1fr; /* Single column layout */
  max-width: 1200px;
  margin: 0 auto;
}

/* Hide read time in metadata for videos */
.is-video-article .article-metadata .meta-item {
  /* Will be hidden via JS if contains read time */
}

/* =========================
   ARTICLE ACTION BUTTONS
   ========================= */

/* Container for print and share buttons */
.article-actions-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* Push to the right */
}

/* --- Print button --------------------------------------------------------- */
.print-article-btn,
.share-article-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #dbe1ea;   /* subtle border */
  background: #fff;
  color: #0f172a;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease-in-out;
  box-shadow: 0 1px 1px rgba(16,24,40,0.04);
}

.print-article-btn:hover,
.share-article-btn:hover {
  background: #f6f8fb;
  border-color: #cfd7e3;
}

.print-article-btn:active,
.share-article-btn:active {
  transform: translateY(1px);
  background: #eef2f7;
}

.print-article-btn:focus,
.share-article-btn:focus {
  outline: 2px solid #0b5fff;  /* accessible focus ring */
  outline-offset: 2px;
}

.print-article-icon,
.share-article-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  color: currentColor;
}

/* Share dropdown menu */
.share-dropdown {
  position: relative;
  display: inline-block;
}

/* Hide print button for video articles */
.is-video-article .print-article-btn {
  display: none !important;
}

* Share dropdown menu */
.share-dropdown {
  position: relative;
  display: inline-block;
}

.share-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: white;
  border: 1px solid #dbe1ea;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 49, 74, 0.12);
  padding: 6px;
  min-width: 240px;
  z-index: 1000;
  display: none;
}

.share-menu.active {
  display: block;
}

.share-menu-section {
  border-bottom: 1px solid #f1f5f9;
  padding: 4px 0;
  margin-bottom: 4px;
}

.share-menu-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.share-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  color: #0f172a;
  text-decoration: none;
  font-size: 0.875rem;
  transition: background .15s ease;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.share-menu-item:hover {
  background: #f6f8fb;
}

.share-menu-item svg {
  width: 18px;
  height: 18px;
  color: #64748b;
  flex-shrink: 0;
}

.share-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.share-item-label {
  font-size: 0.875rem;
  color: #0f172a;
  font-weight: 500;
}

.share-item-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.3;
}

/* Keep spacing tidy when the button wraps under the title */
@media (max-width: 720px) {
  .article-header-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .print-article-btn .print-article-label,
  .share-article-btn .share-article-label {
    display: none;             /* icon-only on mobile */
  }
  .print-article-btn,
  .share-article-btn {
    padding: 6px;              /* tighter padding when label hidden */
  }
}


/* --- Print view cleanup --------------------------------------------------- */
@media print {
  .header, .footer, .hero, .breadcrumbs, .article-actions-slot,
  .article-sidebar, .sub-nav, .search-container, .article-aux-tabs {
    display: none !important;
  }
  .article-container, .article-body, #main-content, .content, .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0.6in !important;
  }
}

/* =========================
   CONTENT TYPE CHIPS
   ========================= */

.video-chip,
.article-chip {
  display: inline-block;
  padding: 4px 10px;
  margin-right: 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.video-chip {
  background: #eaf2ff;
  color: #0b5fff;
  border: 1px solid #c3d9ff;
}

.article-chip {
  background: #f0f4f8;
  color: #4a5568;
  border: 1px solid #d2dae2;
}

/* =========================
   SHARE TOAST NOTIFICATION
   ========================= */

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
}

.share-toast {
  animation: fadeInOut 2s ease;
}

/* =========================
   RESPONSIVE ADJUSTMENTS
   ========================= */

@media (max-width: 768px) {
  /* Stack header elements on mobile */
  .article-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .article-actions-slot {
    margin-left: 0;
    margin-top: 12px;
  }
  
  /* Show only icons on mobile */
  .print-article-label,
  .share-article-label {
    display: none;
  }
  
  .print-article-btn,
  .share-article-btn {
    padding: 8px;
  }
  
  /* Smaller video wrapper on mobile */
  .video-wrapper-enhanced {
    margin: 16px 0 24px;
    border-radius: 8px;
  }
  
  /* Hide chips on very small screens */
  @media (max-width: 480px) {
    .video-chip,
    .article-chip {
      display: none;
    }
  }
}

/* =========================
   PRINT STYLES
   ========================= */

@media print {
  /* Hide action buttons when printing */
  .article-actions-slot,
  .print-article-btn,
  .share-article-btn,
  .video-chip,
  .article-chip {
    display: none !important;
  }
  
  /* Hide video embeds when printing */
  .video-wrapper-enhanced {
    display: none !important;
  }
  
  /* Show a placeholder for videos */
  .is-video-article .article-body::before {
    content: "[Video content available online]";
    display: block;
    padding: 20px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    text-align: center;
    font-style: italic;
  }
}


/* =================================================================
   CSS ADDITIONS FOR INTEGRATED JAVASCRIPT FIXES
   Add these styles to your main style.css file
   ================================================================= */

/* ===================================
   FIX 1: Category Item Count Badges
   ================================ === */

.item-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #00314A; /* Navy */
  background-color: #FFC700; /* Cerello Yellow */
  border-radius: 11px;
  transition: all 0.2s ease;
}

.item-count-badge:empty {
  display: none;
}

/* ===================================
   FIX 2: Section Page Video Icons
   =================================== */

.video-icon {
  color: #00AB94; /* Teal */
}

.video-icon svg {
  fill: currentColor;
  width: 20px;
  height: 20px;
}

.article-list-icon.video-icon,
.icon.video-icon {
  color: #00AB94;
}

/* ===================================
   FIX 3: Modern Article Voting UI
   =================================== */

/* Main voting container */
.article-votes-modern {
  padding: 32px;
  background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%);
  border: 1px solid #E0E4E8;
  border-radius: 16px;
  text-align: center;
  margin: 48px 0;
  box-shadow: 0 2px 8px rgba(0, 49, 74, 0.04);
  transition: all 0.3s ease;
}

.article-votes-modern:hover {
  box-shadow: 0 4px 16px rgba(0, 49, 74, 0.08);
}

/* Voting prompt/question */
.vote-prompt-modern {
  font-size: 20px;
  font-weight: 600;
  color: #00314A; /* Navy */
  margin: 0 0 24px 0;
  line-height: 1.4;
}

/* Button container */
.vote-buttons-container {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Modern vote buttons */
.vote-btn-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  color: #00314A;
  min-width: 120px;
  position: relative;
  overflow: hidden;
}

.vote-btn-modern::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.vote-btn-modern:hover::before {
  width: 300px;
  height: 300px;
}

.vote-btn-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.vote-btn-modern:active {
  transform: translateY(-1px);
}

/* Yes button (positive) */
.vote-yes {
  border-color: #00AB94; /* Teal */
  color: #00AB94;
}

.vote-yes:hover {
  background: #00AB94;
  color: white;
  border-color: #00AB94;
}

.vote-yes.voted {
  background: #00AB94;
  color: white;
  border-color: #00AB94;
  box-shadow: 0 4px 16px rgba(0, 171, 148, 0.3);
}

/* No button (negative) */
.vote-no {
  border-color: #E74C3C; /* Red */
  color: #E74C3C;
}

.vote-no:hover {
  background: #E74C3C;
  color: white;
  border-color: #E74C3C;
}

.vote-no.voted {
  background: #E74C3C;
  color: white;
  border-color: #E74C3C;
  box-shadow: 0 4px 16px rgba(231, 76, 60, 0.3);
}

/* Disabled state */
.vote-btn-modern:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.vote-btn-modern:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Vote icon styling */
.vote-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.vote-btn-modern:hover .vote-icon {
  transform: scale(1.1);
}

.vote-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.5;
}

/* Vote label */
.vote-label {
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Thank you message */
.vote-thank-you {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  background: #E8F5F3;
  border: 1px solid #00AB94;
  border-radius: 8px;
  color: #00314A;
  font-weight: 500;
  margin-top: 20px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vote-thank-you-icon {
  color: #00AB94;
  flex-shrink: 0;
}

.vote-thank-you-icon svg {
  width: 24px;
  height: 24px;
}

.vote-thank-you-text {
  font-size: 16px;
}

/* ===================================
   FIX 4: Print & Share Buttons
   =================================== */

/* These styles already exist in your main CSS, but here are enhancements */

.article-actions-slot {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.print-article-btn,
.share-article-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #00314A;
  background: white;
  border: 2px solid #E0E4E8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.print-article-btn:hover,
.share-article-btn:hover {
  border-color: #00AB94;
  background: #F0FAF8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 171, 148, 0.15);
}

.print-article-icon,
.share-article-icon {
  flex-shrink: 0;
}

.print-article-label,
.share-article-label {
  font-weight: 600;
}

/* Share toast notification */
.share-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #00314A;
  color: white;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: fadeInOut 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 768px) {
  /* Voting UI */
  .article-votes-modern {
    padding: 24px 16px;
    margin: 32px 0;
  }

  .vote-prompt-modern {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .vote-buttons-container {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .vote-btn-modern {
    width: 100%;
    max-width: 300px;
    padding: 12px 20px;
    font-size: 15px;
  }

  /* Item count badges */
  .item-count-badge {
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
  }

  /* Print/Share buttons */
  .article-actions-slot {
    width: 100%;
    justify-content: flex-start;
  }

  .print-article-btn,
  .share-article-btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  /* Toast on mobile */
  .share-toast {
    left: 16px;
    right: 16px;
    transform: none;
    width: auto;
  }

  @keyframes fadeInOut {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    15% {
      opacity: 1;
      transform: translateY(0);
    }
    85% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(20px);
    }
  }
}

@media (max-width: 480px) {
  .vote-btn-modern {
    font-size: 14px;
    padding: 10px 16px;
  }

  .vote-icon svg {
    width: 18px;
    height: 18px;
  }

  .print-article-label,
  .share-article-label {
    display: none; /* Show icons only on very small screens */
  }
}


/* ===================================
   ACCESSIBILITY ENHANCEMENTS
   =================================== */

/* Focus states for keyboard navigation */
.vote-btn-modern:focus-visible {
  outline: 3px solid #FFC700;
  outline-offset: 2px;
}

.print-article-btn:focus-visible,
.share-article-btn:focus-visible {
  outline: 3px solid #00AB94;
  outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .vote-btn-modern,
  .print-article-btn,
  .share-article-btn,
  .article-votes-modern,
  .vote-icon,
  .share-toast {
    transition: none;
    animation: none;
  }

  .vote-btn-modern:hover,
  .print-article-btn:hover,
  .share-article-btn:hover {
    transform: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .vote-btn-modern {
    border-width: 3px;
  }

  .article-votes-modern {
    border-width: 2px;
  }
}


/* ==================================================
   CSS FIXES FOR ALL REPORTED ISSUES
   Add these to your main stylesheet
   ================================================== */

/* =========================
 * FIX #3: Video Section Icons
 * ========================= */

/* Override default document icon for video sections */
.section-nav-link[href*="Video"] .section-nav-icon,
.section-nav-link[href*="Vídeo"] .section-nav-icon,
.section-nav-link[href*="Vidéo"] .section-nav-icon {
  background-image: none !important;
}

.section-nav-link[href*="Video"] .section-nav-icon::before,
.section-nav-link[href*="Vídeo"] .section-nav-icon::before,
.section-nav-link[href*="Vidéo"] .section-nav-icon::before {
  display: none !important;
}

.section-nav-link[href*="Video"] .section-nav-icon svg,
.section-nav-link[href*="Vídeo"] .section-nav-icon svg,
.section-nav-link[href*="Vidéo"] .section-nav-icon svg {
  display: block !important;
  width: 20px;
  height: 20px;
}

/* Also fix icons in article lists */
.article-list-item.is-video .row-icon,
.unified-article-item[data-content-type="video"] .row-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%23004b8d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z'/%3E%3Cpath d='M16 10l5-3v10l-5-3V10z'/%3E%3C/svg%3E") !important;
}

/* =========================
 * FIX #5 & #6: Video Article Page
 * ========================= */

/* Immediately hide TOC for video articles (prevent flash) */
.is-video-article .toc-sidebar,
.is-video-article .article-sidebar.toc-sidebar {
  display: none !important;
  visibility: hidden !important;
}

/* Make video full width and larger */
.is-video-article .video-wrapper-enhanced {
  max-width: 100%;
  width: 100%;
  margin: 32px 0;
  min-height: 500px;
}

.is-video-article .video-wrapper-enhanced iframe {
  min-height: 500px;
}

/* Single column layout for video articles */
.is-video-article .article-container-new {
  grid-template-columns: 1fr !important;
  max-width: 1400px;
}

.is-video-article .article-main-content {
  max-width: 100%;
}

/* Video duration display (like read time) */
.video-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #5a6c7d;
  margin-right: 12px;
}

.video-duration-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.video-duration span {
  white-space: nowrap;
}

/* Mobile responsiveness for videos */
@media (max-width: 768px) {
  .is-video-article .video-wrapper-enhanced {
    min-height: 280px;
    margin: 20px 0;
  }
  
  .is-video-article .video-wrapper-enhanced iframe {
    min-height: 280px;
  }
}

/* =========================
 * FIX #7: Voting Button SVG
 * ========================= */

/* Fix voting button SVG rendering */
.article-vote-up,
.article-vote-down {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.article-vote-up svg,
.article-vote-down svg {
  display: inline-block !important;
  width: 18px;
  height: 18px;
  margin-right: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Hide any stray "svg" text that might appear */
.article-vote-up::before,
.article-vote-down::before {
  content: '' !important;
  display: none !important;
}

/* Ensure button text is visible */
.article-vote-up span,
.article-vote-down span {
  font-size: 14px;
  display: inline-block;
}

/* Alternative: If buttons contain literal "svg" text, hide it */
.article-voting button {
  font-size: 14px;
}

.article-voting button:contains("svg") {
  font-size: 0;
}

.article-voting button span {
  font-size: 14px !important;
}

/* Make sure SVG icons are properly styled */
.article-votes svg {
  pointer-events: none;
}

/* =========================
 * ADDITIONAL IMPROVEMENTS
 * ========================= */

/* Ensure item count badges look good */
.item-count-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #e6f2ff;
  color: #0b5fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* Section group styling when some are hidden */
.section-group-sidebar[style*="display: none"],
.section-group[style*="display: none"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure video articles don't show print button */
.is-video-article .print-article-btn {
  display: none !important;
}

/* Video chip styling */
.video-chip {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #eaf2ff;
  color: #0b5fff;
}

/* Article chip styling */
.article-chip {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #f0f4f8;
  color: #4a5568;
}

/* Make sure content counts are aligned */
.unified-content-count {
  font-size: 12px;
  color: #5a6c7d;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* Prevent layout shift when sections are hidden */
.section-nav-item[style*="display: none"] {
  margin: 0;
  height: 0;
  overflow: hidden;
}

/* ==================================================
   PRINT STYLES
   ================================================== */

@media print {
  .video-duration {
    display: inline-block;
  }
  
  .video-chip,
  .article-chip {
    border: 1px solid currentColor;
  }
  
  .is-video-article .video-wrapper-enhanced {
    border: 2px solid #ccc;
    background: #f5f5f5;
  }
  
  .is-video-article .video-wrapper-enhanced::after {
    content: 'Video content - view online';
    display: block;
    text-align: center;
    padding: 20px;
    color: #666;
  }
}


/* ==================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================== */

/* Focus states for video controls */
.is-video-article .video-wrapper-enhanced:focus-within {
  outline: 2px solid #0b5fff;
  outline-offset: 4px;
}

/* Ensure proper contrast for chips */
.video-chip,
.article-chip {
  min-width: 60px;
  text-align: center;
}

/* Make sure voting buttons have good touch targets */
.article-vote-up,
.article-vote-down {
  min-width: 100px;
  min-height: 44px;
  justify-content: center;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .video-wrapper-enhanced,
  .video-chip,
  .article-chip,
  .unified-content-count {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================
 * Section Page Video Icons
 * ========================= */

/* Force video icons for video content */
.article-list-item.is-video .row-icon::before,
.article-list-item[data-content-type="video"] .row-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='%23004b8d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z'/%3E%3Cpath d='M16 10l5-3v10l-5-3V10z'/%3E%3C/svg%3E") !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Remove default document icon for videos */
.article-list-item.is-video .row-icon {
  background-image: none !important;
}

/* =========================
 * Voting Button SVG Display
 * ========================= */

/* Proper button layout */
.article-vote {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  min-width: 100px;
  justify-content: center;
}

/* SVG icon styling */
.article-vote svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  display: block !important;
  pointer-events: none;
}

/* Text styling */
.article-vote span {
  display: inline-block !important;
  font-size: 14px !important;
}

/* Hide any "svg" text leak */
.article-vote {
  font-size: 0 !important;
}

.article-vote * {
  font-size: initial;
}

/* Hover states */
.article-vote:hover {
  background: #f0f4f8 !important;
  border-color: #0b5fff !important;
}

.article-vote.button-primary {
  background: #0b5fff !important;
  color: white !important;
  border-color: #0b5fff !important;
}

.article-vote.button-primary svg {
  stroke: white !important;
}

/* =========================
 * Guided Article Progress Bar
 * ========================= */

.guided-article-progress {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 32px;
  border: 2px solid #e5e7eb;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.progress-bar-track {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00AB94 0%, #0b5fff 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
  min-width: 8px;
}

.progress-text {
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
}

.guided-nav-arrows {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.guided-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  color: #00314A;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  min-width: 120px;
  justify-content: center;
}

.guided-nav-btn:hover {
  border-color: #00AB94;
  background: #f0fdf4;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 171, 148, 0.1);
}

.guided-nav-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.guided-nav-disabled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Progress bar mobile responsive */
@media (max-width: 640px) {
  .guided-article-progress {
    padding: 16px;
  }
  
  .progress-bar-container {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .progress-text {
    text-align: center;
  }
  
  .guided-nav-arrows {
    flex-direction: column;
  }
  
  .guided-nav-btn {
    width: 100%;
  }
}

/* =========================
 * FIX #4: VIDEO ARTICLE - FORCE LARGE SIZE
 * Override ALL conflicting rules
 * ========================= */

/* CRITICAL: Hide TOC immediately (prevent flash) */
body.is-video-article .toc-sidebar,
body.is-video-article .article-sidebar.toc-sidebar,
body.is-video-article .article-container-new .toc-sidebar,
body.is-video-article aside.toc-sidebar {
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Force single column layout */
body.is-video-article .article-container-new {
  grid-template-columns: 1fr !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
}

/* Remove max-width restrictions on content */
body.is-video-article .article-content,
body.is-video-article .article-main-content,
body.is-video-article .article,
body.is-video-article .article-body {
  max-width: none !important;
  width: 100% !important;
}

/* Make video wrapper full width */
body.is-video-article .video-wrapper-enhanced {
  max-width: 100% !important;
  width: 100% !important;
  margin: 32px 0 !important;
}

/* Ensure iframe fills wrapper */
body.is-video-article .video-wrapper-enhanced iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important;
}

/* Video aspect ratio */
body.is-video-article .video-wrapper-enhanced {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16/9) {
  body.is-video-article .video-wrapper-enhanced {
    padding-bottom: 56.25% !important;
    height: 0 !important;
  }
  
  body.is-video-article .video-wrapper-enhanced iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Override any container max-widths */
body.is-video-article .container,
body.is-video-article .article-container {
  max-width: 1600px !important;
}

/* Ensure article header doesn't constrain */
body.is-video-article .article-header {
  max-width: none !important;
}

/* Mobile responsive for videos */
@media (max-width: 1024px) {
  body.is-video-article .article-container-new {
    padding: 30px 16px !important;
  }
  
  body.is-video-article .video-wrapper-enhanced iframe {
    min-height: 450px !important;
  }
}

@media (max-width: 768px) {
  body.is-video-article .article-container-new {
    padding: 20px 12px !important;
  }
  
  body.is-video-article .video-wrapper-enhanced iframe {
    min-height: 350px !important;
  }
  
  body.is-video-article .video-wrapper-enhanced {
    border-radius: 8px;
    margin: 24px 0 !important;
  }
}

@media (max-width: 480px) {
  body.is-video-article .video-wrapper-enhanced iframe {
    min-height: 250px !important;
  }
  
  body.is-video-article .article-container-new {
    padding: 16px 8px !important;
  }
}

/* =========================
 * ADDITIONAL REFINEMENTS
 * ========================= */

/* Ensure video duration displays properly */
.video-duration {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #5a6c7d;
  margin-right: 12px;
}

.video-duration-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Item count badges */
.item-count-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #e6f2ff;
  color: #0b5fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* Content count styling */
.unified-content-count {
  font-size: 12px;
  color: #5a6c7d;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* Hide empty sections cleanly */
.section-group-sidebar[style*="display: none"],
.section-group[style*="display: none"],
.section-nav-item[style*="display: none"] {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Video/Article chips */
.video-chip,
.article-chip {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.video-chip {
  background: #eaf2ff;
  color: #0b5fff;
}

.article-chip {
  background: #f0f4f8;
  color: #4a5568;
}

/* =========================
 * PRINT STYLES
 * ========================= */

@media print {
  .guided-article-progress {
    border: 1px solid #ccc;
  }
  
  .guided-nav-arrows {
    display: none;
  }
  
  body.is-video-article .video-wrapper-enhanced::after {
    content: 'Video content - view online at ' attr(data-video-url);
    display: block;
    text-align: center;
    padding: 20px;
    color: #666;
    background: #f5f5f5;
  }
  
  .article-vote {
    border: 1px solid #ccc;
  }
}


/* =========================
 * ACCESSIBILITY
 * ========================= */

/* Focus states */
.guided-nav-btn:focus-visible,
.article-vote:focus-visible {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
}

body.is-video-article .video-wrapper-enhanced:focus-within {
  outline: 2px solid #0b5fff;
  outline-offset: 4px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill,
  .guided-nav-btn,
  .article-vote,
  body.is-video-article .video-wrapper-enhanced {
    transition: none !important;
    animation: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .guided-article-progress {
    border: 3px solid currentColor;
  }
  
  .progress-bar-track {
    border: 2px solid currentColor;
  }
  
  .guided-nav-btn {
    border: 3px solid currentColor;
  }
  
  .video-chip,
  .article-chip {
    border: 2px solid currentColor;
  }
}

/* Voting buttons - proper SVG display */
.article-vote {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
}

.article-vote svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block !important;
}

.article-vote span {
  display: inline-block;
  font-size: 14px;
}

/* Remove any "svg" text that might appear */
.article-vote {
  font-size: 0;
}

.article-vote span {
  font-size: 14px !important;
}

/* Ensure hover states work */
.article-vote:hover {
  background: #f0f4f8;
  border-color: #0b5fff;
}

.article-vote.button-primary {
  background: #0b5fff;
  color: white;
  border-color: #0b5fff;
}

/* Guided Article Progress Bar */
.guided-article-progress {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 32px;
  border: 2px solid #e5e7eb;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.progress-bar-track {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00AB94 0%, #0b5fff 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
}

.guided-nav-arrows {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.guided-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  color: #00314A;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}

.guided-nav-btn:hover {
  border-color: #00AB94;
  background: #f0fdf4;
  transform: translateY(-2px);
}

.guided-nav-btn svg {
  width: 20px;
  height: 20px;
}

.guided-nav-disabled {
  opacity: 0;
  pointer-events: none;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .guided-article-progress {
    padding: 16px;
  }
  
  .progress-bar-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .guided-nav-arrows {
    flex-direction: column;
  }
  
  .guided-nav-btn {
    justify-content: center;
  }
}


/* =========================
 * SECTION-LEVEL PROGRESS BAR
 * ========================= */

.guided-progress-wrapper {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  border: 2px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.guided-progress-bar {
  max-width: 900px;
  margin: 0 auto;
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.progress-section-name {
  font-size: 16px;
  font-weight: 700;
  color: #00314A;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-section-name::before {
  content: '📚';
  font-size: 20px;
}

.progress-counter {
  font-size: 14px;
  font-weight: 600;
  color: #00AB94;
  background: white;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.progress-track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00AB94 0%, #0b5fff 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
  position: relative;
  min-width: 8px;
}

.progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: white;
  border: 3px solid #00AB94;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-navigation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.progress-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  color: #00314A;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
  justify-content: center;
}

.progress-nav-btn:hover {
  border-color: #00AB94;
  background: #f0fdf4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 171, 148, 0.15);
}

.progress-nav-btn:active {
  transform: translateY(0);
}

.progress-nav-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.progress-nav-btn[style*="visibility: hidden"] {
  opacity: 0;
  pointer-events: none;
}

/* Pulse animation on next button */
.progress-next {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 171, 148, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 171, 148, 0.2);
  }
}

/* Mobile responsive */
@media (max-width: 640px) {
  .guided-progress-wrapper {
    padding: 16px;
  }
  
  .progress-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .progress-navigation {
    flex-direction: column;
    width: 100%;
  }
  
  .progress-nav-btn {
    width: 100%;
  }
  
  .progress-section-name {
    font-size: 14px;
  }
  
  .progress-counter {
    font-size: 12px;
  }
}

/* Print styles */
@media print {
  .guided-progress-wrapper {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
  
  .progress-navigation {
    display: none;
  }
}


/* Accessibility */
.progress-nav-btn:focus-visible {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill,
  .progress-nav-btn,
  .progress-next {
    transition: none !important;
    animation: none !important;
  }
}

/* ================================================
   Updated: GUIDED TOC STYLING
   Matches the design shown in screenshot
   ================================================ */

/* Container and overall styling */
.guided-toc-sidebar {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin-bottom: 24px;
}

.guided-toc-sidebar .collapsible-sidebar-body {
  padding: 16px;
}

/* ─────────────────────────────────
   PROGRESS HEADER SECTION
   ───────────────────────────────── */

.toc-progress-header {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.toc-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 700;
  color: #00314A;
  line-height: 1.4;
}

.toc-section-icon {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Progress Bar Track */
.toc-progress-track {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
  width: 100%;
}

.toc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00AB94 0%, #0b5fff 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
  min-width: 0;
}

/* Progress Counter */
.toc-progress-counter {
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  text-align: left;
  line-height: 1.4;
  letter-spacing: 0.3px;
}

/* ─────────────────────────────────
   ARTICLE LIST SECTION
   ───────────────────────────────── */

.toc-guided-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 16px;
}

.toc-guided-item {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 6px;
}

/* Article Links */
.toc-guided-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #4b5563;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
}

.toc-guided-link:hover {
  background: #f0f4f8;
  color: #00AB94;
  border-color: #e5e7eb;
}

/* Current Article (in progress) */
.toc-guided-link.current {
  background: linear-gradient(135deg, rgba(0, 171, 148, 0.08) 0%, rgba(11, 95, 255, 0.08) 100%);
  color: #00AB94;
  font-weight: 600;
  border-color: #00AB94;
  box-shadow: inset 0 0 0 1px #00AB94;
}

.toc-guided-link.current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: #00AB94;
  border-radius: 0 999px 999px 0;
}

/* Completed Article */
.toc-guided-link.completed {
  color: #00AB94;
  opacity: 0.6;
}

.toc-guided-link.completed:hover {
  opacity: 0.8;
}

/* Upcoming Article */
.toc-guided-link.upcoming {
  color: #9ca3af;
}

.toc-guided-link.upcoming:hover {
  color: #4b5563;
}

/* Icon Styling */
.toc-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  color: currentColor;
}

/* Current icon */
.toc-guided-link.current .toc-item-icon {
  color: #00AB94;
}

/* Completed icon */
.toc-guided-link.completed .toc-item-icon {
  color: #00AB94;
}

/* Upcoming icon */
.toc-guided-link.upcoming .toc-item-icon {
  color: #d1d5db;
}

/* ─────────────────────────────────
   NAVIGATION BUTTONS
   ───────────────────────────────── */

.toc-navigation {
  display: flex;
  gap: 8px;
}

.toc-nav-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: #ffffff;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.toc-nav-btn:hover:not(:disabled) {
  border-color: #00AB94;
  color: #00AB94;
  background: #f0fdf4;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 171, 148, 0.1);
}

.toc-nav-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.toc-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #e5e7eb;
  color: #9ca3af;
}

/* Button SVG icons */
.toc-nav-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  line-height: 1;
}

.toc-nav-btn span {
  display: inline-block;
  line-height: 1.4;
}

/* Previous button */
.toc-nav-prev {
  flex: 1;
}

/* Next button */
.toc-nav-next {
  flex: 1;
}

/* Button text visibility */
.toc-nav-btn span {
  font-size: 13px;
}


/* ─────────────────────────────────
   MOBILE RESPONSIVE
   ───────────────────────────────── */

@media (max-width: 1024px) {
  .guided-toc-sidebar {
    margin-bottom: 24px;
  }
  
  .guided-toc-sidebar .collapsible-sidebar-body {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .guided-toc-sidebar {
    border-radius: 10px;
    margin-bottom: 20px;
  }
  
  .guided-toc-sidebar .collapsible-sidebar-body {
    padding: 12px;
  }
  
  .toc-section-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .toc-section-icon {
    font-size: 14px;
  }
  
  .toc-progress-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
  
  .toc-progress-track {
    height: 5px;
    margin-bottom: 6px;
  }
  
  .toc-progress-counter {
    font-size: 11px;
  }
  
  .toc-guided-link {
    padding: 8px 10px;
    font-size: 13px;
    gap: 8px;
  }
  
  .toc-item-icon {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  
  .toc-navigation {
    gap: 6px;
  }
  
  .toc-nav-btn {
    padding: 8px 10px;
    font-size: 12px;
    gap: 4px;
  }
  
  .toc-nav-btn svg {
    width: 14px;
    height: 14px;
  }
  
  .toc-nav-btn span {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .guided-toc-sidebar .collapsible-sidebar-body {
    padding: 12px;
  }
  
  .toc-section-title {
    font-size: 13px;
    gap: 6px;
  }
  
  .toc-guided-link {
    padding: 8px;
    font-size: 12px;
    gap: 6px;
  }
  
  .toc-nav-btn {
    padding: 8px;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }
  
  .toc-nav-btn span {
    font-size: 11px;
    display: none;
  }
  
  .toc-nav-btn svg {
    width: 16px;
    height: 16px;
  }
}



/* ─────────────────────────────────
   PRINT STYLES
   ───────────────────────────────── */

@media print {
  .guided-toc-sidebar {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
  
  .toc-navigation {
    display: none;
  }
  
  .toc-guided-link {
    color: #000;
    border: none;
  }
  
  .toc-guided-link.completed::before {
    content: '✓ ';
  }
  
  .toc-guided-link.current::before {
    content: '→ ';
  }
  
  .toc-guided-link.upcoming::before {
    content: '○ ';
  }
}

/* ─────────────────────────────────
   ACCESSIBILITY
   ───────────────────────────────── */

/* Focus states */
.toc-guided-link:focus-visible {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
}

.toc-nav-btn:focus-visible {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
}

.see-all-articles:focus-visible {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .guided-toc-sidebar {
    border: 2px solid currentColor;
  }
  
  .toc-progress-track {
    border: 1px solid currentColor;
  }
  
  .toc-nav-btn {
    border-width: 2px;
  }
  
  .toc-guided-link:focus-visible {
    outline-width: 3px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toc-progress-fill,
  .toc-guided-link,
  .toc-nav-btn,
  .see-all-articles {
    transition: none !important;
  }
}

/* ================================================
   COMPREHENSIVE FIX: Guided TOC on Videos
   
   This MUST come AFTER all other video article CSS
   to override all the display:none !important rules
   
   Location: Add this at the VERY END of style.css
   ================================================ */

/* ─────────────────────────────────────────────
   STEP 1: Override ALL instances of TOC hiding
   ───────────────────────────────────────────── */

/* Override rule 1 */
.is-video-article .toc-sidebar:not(.guided-toc-sidebar),
.is-video-article .article-sidebar.toc-sidebar:not(.guided-toc-sidebar) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Override rule 2 */
body.is-video-article .toc-sidebar:not(.guided-toc-sidebar) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Override rule 3 */
body.is-video-article .toc-sidebar:not(.guided-toc-sidebar),
body.is-video-article .article-sidebar.toc-sidebar:not(.guided-toc-sidebar),
body.is-video-article .article-container-new .toc-sidebar:not(.guided-toc-sidebar),
body.is-video-article aside.toc-sidebar:not(.guided-toc-sidebar) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ─────────────────────────────────────────────
   STEP 2: Force guided TOC to ALWAYS be visible
   ───────────────────────────────────────────── */

/* Target ALL possible selectors for guided TOC */
.guided-toc-sidebar,
.is-video-article .guided-toc-sidebar,
body.is-video-article .guided-toc-sidebar,
body.is-video-article .article-sidebar.guided-toc-sidebar,
body.is-video-article .article-container-new .guided-toc-sidebar,
body.is-video-article aside.guided-toc-sidebar {
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: sticky !important;
  top: 84px !important;
  align-self: start !important;
}

/* ─────────────────────────────────────────────
   STEP 3: Adjust layout for video + guided TOC
   ───────────────────────────────────────────── */

/* Layout when article is video AND has guided TOC */
body.is-video-article.has-guided-toc .article-container-new {
  grid-template-columns: 280px 1fr !important;
  gap: 32px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Alternative: if has-guided-toc not applied, use this */
body.is-video-article:has(.guided-toc-sidebar) .article-container-new {
  grid-template-columns: 280px 1fr !important;
  gap: 32px !important;
  max-width: 1800px !important;
  margin: 0 auto !important;
}

/* ─────────────────────────────────────────────
   STEP 4: Video wrapper sizing with TOC
   ───────────────────────────────────────────── */

body.is-video-article .video-wrapper-enhanced {
  max-width: 100% !important;
  width: 100% !important;
  margin: 32px 0 !important;
}

body.is-video-article .article-main-wrapper {
  max-width: 100% !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────────────
   GUIDED TOC STYLING
   ───────────────────────────────────────────── */

.guided-toc-sidebar {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  margin-bottom: 24px;
}

.guided-toc-sidebar .collapsible-sidebar-body {
  padding: 16px;
}

/* Progress Header */
.toc-progress-header {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.toc-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 700;
  color: #00314A;
  line-height: 1.4;
}

.toc-section-icon {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Progress Bar Track */
.toc-progress-track {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
  width: 100%;
}

.toc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00AB94 0%, #0b5fff 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
  min-width: 0;
}

/* Progress Counter */
.toc-progress-counter {
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  text-align: left;
  line-height: 1.4;
  letter-spacing: 0.3px;
}

/* Article List */
.toc-guided-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 16px;
}

.toc-guided-item {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 6px;
}

.toc-guided-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #4b5563;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
}

.toc-guided-link:hover {
  background: #f0f4f8;
  color: #00AB94;
  border-color: #e5e7eb;
}

/* Current Article */
.toc-guided-link.current {
  background: linear-gradient(135deg, rgba(0, 171, 148, 0.08) 0%, rgba(11, 95, 255, 0.08) 100%);
  color: #00AB94;
  font-weight: 600;
  border-color: #00AB94;
  box-shadow: inset 0 0 0 1px #00AB94;
}

.toc-guided-link.current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: #00AB94;
  border-radius: 0 999px 999px 0;
}

/* Completed Article */
.toc-guided-link.completed {
  color: #00AB94;
  opacity: 0.6;
}

.toc-guided-link.completed:hover {
  opacity: 0.8;
}

/* Upcoming Article */
.toc-guided-link.upcoming {
  color: #9ca3af;
}

.toc-guided-link.upcoming:hover {
  color: #4b5563;
}

/* Icon Styling */
.toc-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  color: currentColor;
}

.toc-guided-link.current .toc-item-icon {
  color: #00AB94;
}

.toc-guided-link.completed .toc-item-icon {
  color: #00AB94;
}

.toc-guided-link.upcoming .toc-item-icon {
  color: #d1d5db;
}

/* Navigation Buttons */
.toc-navigation {
  display: flex;
  gap: 8px;
}

.toc-nav-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: #ffffff;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.toc-nav-btn:hover:not(:disabled) {
  border-color: #00AB94;
  color: #00AB94;
  background: #f0fdf4;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 171, 148, 0.1);
}

.toc-nav-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.toc-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #e5e7eb;
  color: #9ca3af;
}

.toc-nav-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  line-height: 1;
}

.toc-nav-btn span {
  display: inline-block;
  line-height: 1.4;
  font-size: 13px;
}

/* See More Link */
.see-all-articles {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #00AB94;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  margin-top: 8px;
}

.see-all-articles:hover {
  background: #f0fdf4;
  border-color: #00AB94;
  color: #008870;
}

/* ─────────────────────────────────────────────
   MOBILE & RESPONSIVE
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .guided-toc-sidebar {
    margin-bottom: 24px;
  }
  
  body.is-video-article.has-guided-toc .article-container-new {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  body.is-video-article:has(.guided-toc-sidebar) .article-container-new {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  body.is-video-article .guided-toc-sidebar {
    position: static !important;
    order: -1;
  }
}

@media (max-width: 768px) {
  .guided-toc-sidebar {
    border-radius: 10px;
    margin-bottom: 20px;
  }
  
  .guided-toc-sidebar .collapsible-sidebar-body {
    padding: 12px;
  }
  
  .toc-section-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .toc-section-icon {
    font-size: 14px;
  }
  
  .toc-progress-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
  
  .toc-progress-track {
    height: 5px;
    margin-bottom: 6px;
  }
  
  .toc-progress-counter {
    font-size: 11px;
  }
  
  .toc-guided-link {
    padding: 8px 10px;
    font-size: 13px;
    gap: 8px;
  }
  
  .toc-item-icon {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  
  .toc-navigation {
    gap: 6px;
  }
  
  .toc-nav-btn {
    padding: 8px 10px;
    font-size: 12px;
    gap: 4px;
  }
  
  .toc-nav-btn svg {
    width: 14px;
    height: 14px;
  }
  
  .toc-nav-btn span {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .guided-toc-sidebar .collapsible-sidebar-body {
    padding: 12px;
  }
  
  .toc-section-title {
    font-size: 13px;
    gap: 6px;
  }
  
  .toc-guided-link {
    padding: 8px;
    font-size: 12px;
    gap: 6px;
  }
  
  .toc-nav-btn {
    padding: 8px;
    min-width: 0;
  }
  
  .toc-nav-btn span {
    font-size: 11px;
    display: none;
  }
  
  .toc-nav-btn svg {
    width: 16px;
    height: 16px;
  }
}



/* ─────────────────────────────────────────────
   ACCESSIBILITY
   ───────────────────────────────────────────── */

.toc-guided-link:focus-visible {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
}

.toc-nav-btn:focus-visible {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
}

.see-all-articles:focus-visible {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .toc-progress-fill,
  .toc-guided-link,
  .toc-nav-btn,
  .see-all-articles {
    transition: none !important;
  }
}

/* ─────────────────────────────────────────
   PROGRESS BADGE IN METADATA (inline)
   ───────────────────────────────────────── */

.meta-separator {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: #e5e7eb;
  margin: 0 12px;
  vertical-align: middle;
}

.progress-badge-inline {
  background: #00ab9412;
  color: #00AB94;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.progress-badge-inline.reporting {
  background: #f0fdf4;
  color: #00AB94;
}

/* ─────────────────────────────────────────
   REPORTING SECTION (sidebar)
   ───────────────────────────────────────── */

.reporting-section {
  margin-top: 28px;
  padding-top: 24px;
  padding-bottom: 0;
  border-top: 2px solid #e5e7eb;
}

.reporting-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #00314A;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reporting-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.reporting-description {
  font-size: 12px;
  color: #666;
  margin-bottom: 16px;
  padding: 0 12px;
  line-height: 1.5;
}

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

.reporting-item {
  margin-bottom: 0;
}

.reporting-link {
  color: #00AB94;
  text-decoration: none;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 0;
  display: block;
  transition: all 0.2s;
  border-left: 3px solid transparent;
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

.reporting-link:hover {
  background: #00ab9412;
  border-left-color: #00AB94;
}

.reporting-link.active {
  background: #f0f4ff;
  border-left-color: #0b5fff;
  font-weight: 600;
  color: #00AB94;
}

/* Responsive */
@media (max-width: 768px) {
  .reporting-section {
    margin-top: 20px;
    padding-top: 20px;
  }
  
  .reporting-header {
    font-size: 12px;
    margin-bottom: 10px;
  }
  
  .reporting-link {
    padding: 8px 10px;
    font-size: 12px;
  }
}
/* ─────────────────────────────────────────
   PREVIOUS/NEXT BUTTONS (article body)
   ───────────────────────────────────────── */

.article-nav-bottom {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 20px 0 0 0;
  background: transparent;
  border-radius: 0;
  margin-top: 40px;
  margin-bottom: 30px;
  border-top: 2px solid #e5e7eb;
  padding-top: 30px;
}

.nav-btn {
  padding: 10px 14px;
  border: 1px solid #00AB94;
  border-radius: 6px;
  background: white;
  color: #00AB94;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  overflow: visible;
  height: auto;
}

.nav-btn.nav-prev {
  justify-content: flex-start;
}

.nav-btn.nav-next {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.nav-btn span {
  flex: 0 1 auto;
  min-width: 0;
  display: inline;
  visibility: visible;
  opacity: 1;
  color: currentColor !important;
  font-size: 13px;
  font-weight: 600;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word;
}

.nav-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.nav-btn:hover:not(:disabled) {
  background: #00AB94;
  color: white;
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-btn:focus-visible {
  outline: 2px solid #00AB94;
  outline-offset: 2px;
}

/* Hide nav buttons for reporting articles */
.reporting-article .article-nav-bottom {
  display: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .article-nav-bottom {
    flex-direction: column;
    gap: 8px;
  }
  
  .nav-btn {
    flex: 1;
  }
  
  .meta-separator {
    display: none;
  }
  
  .progress-badge-inline {
    display: block;
    margin-top: 8px;
  }
}

.related-articles-inline .see-all-articles {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  background: var(--teal);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: gap 0.2s ease;
  color:white;
}

.related-articles-inline .see-all-articles::after {
  content: "→";
  font-size: 14px;
}

.related-articles-inline .see-all-articles:hover {
  gap: 10px;
}

.toc-list .sidenav-item a.toc-active {
  background:#00ab9412;
  color:var(--teal);
  font-weight: 600;
  border-left: 3px solid var(--teal);
  padding-left: calc(12px - 3px);
  margin-left: -3px;
  border-radius: 4px;
}