@charset "UTF-8";

/* ============================================
   ONTARIO FONTS & ICONS
   ============================================ */

/* Inter Font Family */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Phosphor Icons */
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css');


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

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}


/* ============================================
   PHOSPHOR ICONS CONFIGURATION
   ============================================ */

/* Base icon class */
.ph {
  font-family: 'Phosphor' !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bold variant */
.ph-bold {
  font-family: 'Phosphor-Bold' !important;
  font-weight: 700;
}

/* Fill variant */
.ph-fill {
  font-family: 'Phosphor-Fill' !important;
}

/* Icon sizing */
.ph-sm { font-size: 16px; }
.ph-md { font-size: 20px; }
.ph-lg { font-size: 24px; }
.ph-xl { font-size: 32px; }

/* ============================================
   ONTARIO ICON COLORS
   Icons use Ontario blue palette - no colorful icons
   ============================================ */

/* Default icon color - Ontario blue-700 */
.ph,
.ph-bold,
.ph-fill {
  color: #0A52A2 !important;
}

/* Icons in section headers on homepage - white on gradient backgrounds */
.knowledge-base .section h3 .section-icon {
  color: #FFFFFF !important;
  font-size: 24px;
  margin-right: 12px;
  vertical-align: middle;
}

/* Icons in article content - Ontario blue */
.article-body .ph,
.article-body .ph-bold,
.article-body .ph-fill {
  color: #0A52A2 !important;
}

/* Icons in buttons/interactive elements - inherit or white */
button .ph,
.article-read-more .ph,
a.button .ph {
  color: inherit !important;
}

/* Icons in light backgrounds - dark blue for contrast */
.callout .ph,
.intro-note .ph,
.alert .ph {
  color: #050A51 !important;
}

/* Hover states - slightly lighter blue */
a:hover .ph,
.see-all-articles:hover .ph {
  color: #1275BF !important;
}

/* Success/status icons can use semantic colors ONLY when explicitly set */
.ph.icon-success { color: #10B981 !important; }
.ph.icon-warning { color: #F59E0B !important; }
.ph.icon-error { color: #EF4444 !important; }
.ph.icon-info { color: #0A52A2 !important; }


/* ============================================
   ONTARIO HERO - NO OVERFLOW VERSION
   Replace your hero section CSS with this
   ============================================ */

.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Contained animation - stays within bounds */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 80px,
    rgba(255, 255, 255, 0.04) 80px,
    rgba(255, 255, 255, 0.04) 160px
  );
  animation: diagonalSlideContained 40s linear infinite;
  pointer-events: none;
  overflow: hidden;
}

@keyframes diagonalSlideContained {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 160px 160px;
  }
}

/* Glow accent - contained */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 400px;
  height: 400px;
  max-width: 40%;
  background: radial-gradient(circle, rgba(107, 195, 231, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Hero inner content */
.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

@charset "UTF-8";

/* ============================================
   ONTARIO FONTS & ICONS
   ============================================ */

/* Inter Font Family */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Phosphor Icons */
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css');
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css');


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

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}


/* ============================================
   PHOSPHOR ICONS CONFIGURATION
   ============================================ */

/* Base icon class */
.ph {
  font-family: 'Phosphor' !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bold variant */
.ph-bold {
  font-family: 'Phosphor-Bold' !important;
  font-weight: 700;
}

/* Fill variant */
.ph-fill {
  font-family: 'Phosphor-Fill' !important;
}

/* Icon sizing */
.ph-sm { font-size: 16px; }
.ph-md { font-size: 20px; }
.ph-lg { font-size: 24px; }
.ph-xl { font-size: 32px; }

/* ============================================
   ONTARIO ICON COLORS
   Icons use Ontario blue palette - no colorful icons
   ============================================ */

/* Default icon color - Ontario blue-700 */
.ph,
.ph-bold,
.ph-fill {
  color: #0A52A2 !important;
}

/* Icons in section headers on homepage - white on gradient backgrounds */
.knowledge-base .section h3 .section-icon {
  color: #FFFFFF !important;
  font-size: 24px;
  margin-right: 12px;
  vertical-align: middle;
}

/* Icons in article content - Ontario blue */
.article-body .ph,
.article-body .ph-bold,
.article-body .ph-fill {
  color: #0A52A2 !important;
}

/* Icons in buttons/interactive elements - inherit or white */
button .ph,
.article-read-more .ph,
a.button .ph {
  color: inherit !important;
}

/* Icons in light backgrounds - dark blue for contrast */
.callout .ph,
.intro-note .ph,
.alert .ph {
  color: #050A51 !important;
}

/* Hover states - slightly lighter blue */
a:hover .ph,
.see-all-articles:hover .ph {
  color: #1275BF !important;
}

/* Success/status icons can use semantic colors ONLY when explicitly set */
.ph.icon-success { color: #10B981 !important; }
.ph.icon-warning { color: #F59E0B !important; }
.ph.icon-error { color: #EF4444 !important; }
.ph.icon-info { color: #0A52A2 !important; }


/* ============================================
   ONTARIO HERO - NO OVERFLOW VERSION
   Replace your hero section CSS with this
   ============================================ */

.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Contained animation - stays within bounds */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 80px,
    rgba(255, 255, 255, 0.04) 80px,
    rgba(255, 255, 255, 0.04) 160px
  );
  animation: diagonalSlideContained 40s linear infinite;
  pointer-events: none;
  overflow: hidden;
}

@keyframes diagonalSlideContained {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 160px 160px;
  }
}

/* Glow accent - contained */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 400px;
  height: 400px;
  max-width: 40%;
  background: radial-gradient(circle, rgba(107, 195, 231, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Hero inner content */
.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Logo sizing */
.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Responsive sizing */
@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  
  .hero-inner img {
    max-width: 400px !important;
  }
  
  .hero::after {
    width: 300px;
    height: 300px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}


/* ============================================
   ALTERNATIVE: NO ANIMATION (SAFEST)
   Use this if overflow persists
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(107, 195, 231, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(18, 117, 191, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/

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

body {
  background-color: rgba(1, 34, 81, 1);
  color: rgba(255, 255, 255, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: rgba(90, 174, 253, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(5, 227, 227, 1);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

input,
textarea {
  color: #000;
  font-size: 14px;
}

input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
}
input:not([type=checkbox]) {
  outline: none;
}
input:not([type=checkbox]):focus {
  border: 1px solid rgba(5, 227, 227, 1);
}

input[disabled] {
  background-color: #ddd;
}

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%;
}
select:focus {
  border: 1px solid rgba(5, 227, 227, 1);
}
select::-ms-expand {
  display: none;
}

textarea {
  border: 1px solid #87929D;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
textarea:focus {
  border: 1px solid rgba(5, 227, 227, 1);
}

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

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

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

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

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

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid rgba(5, 227, 227, 1);
  border-radius: 4px;
  color: rgba(5, 227, 227, 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(5, 227, 227, 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(5, 227, 227, 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: #037f7f;
  border-color: #037f7f;
}
.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, input[type=submit] {
  cursor: pointer;
  background-color: rgba(5, 227, 227, 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, input[type=submit] {
    width: auto;
  }
}
.button-large:visited, input[type=submit]:visited {
  color: #FFFFFF;
}
.button-large:hover, .button-large:active, .button-large:focus, input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
  background-color: #037f7f;
}
.button-large[disabled], input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #fff;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #fff;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(255, 255, 255, 1);
  border: 1px solid #87929D;
  background-color: #011c42;
}

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

.split-button button {
  background-color: rgba(5, 227, 227, 1);
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: rgba(5, 227, 227, 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: #fff;
  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(5, 227, 227, 1);
}

.form-field input[type=text] {
  border: 1px solid #87929D;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(5, 227, 227, 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(5, 227, 227, 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(5, 227, 227, 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: #fff;
  margin-left: 4px;
}

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

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

.form footer a {
  color: #fff;
  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(5, 227, 227, 1);
}

/* ============================================================
   HINT TEXT ABOVE INPUT: OPTIONAL STYLE ENHANCEMENTS
   ============================================================ */
.hint-above {
  margin-bottom: 6px;
  color: #666;
  font-size: 0.9em;
}

/* Form info header styling */
.form-info-header {
  margin-bottom: 24px;
  padding: 16px 20px;
  background-color: #f7f9fa;
  border-left: 4px solid #17494D;
  border-radius: 4px;
}

.form-info-title {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2f3941;
}

.form-info-description {
  margin: 0;
  font-size: 0.95rem;
  color: #68737d;
  line-height: 1.5;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .form-info-header {
    background-color: #1a1a1a;
    border-left-color: #4a9ba0;
  }
  
  .form-info-title {
    color: #e6e6e6;
  }
  
  .form-info-description {
    color: #a0a0a0;
  }
}

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

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

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

.logo a {
  display: inline-block;
}

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

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

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

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(90, 174, 253, 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(90, 174, 253, 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(255, 255, 255, 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(255, 255, 255, 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(90, 174, 253, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(90, 174, 253, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(90, 174, 253, 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(5, 227, 227, 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: none;
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: #1E3A8A;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: #1E3A8A;
  display: inline-block;
}

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

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #fff;
  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(90, 174, 253, 1);
}

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

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

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: rgba(5, 227, 227, 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(5, 227, 227, 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(5, 227, 227, 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(5, 227, 227, 1);
}

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

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

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

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

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid rgba(5, 227, 227, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(5, 227, 227, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(5, 227, 227, 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(255, 255, 255, 1);
}
.blocks-item-link {
  color: rgba(5, 227, 227, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(5, 227, 227, 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;
}

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

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

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

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01K3H6W11D4KHX91DAH6HQC3K9);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(5, 227, 227, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(5, 227, 227, 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(255, 255, 255, 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(90, 174, 253, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(5, 227, 227, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(5, 227, 227, 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(5, 227, 227, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 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(255, 255, 255, 1);
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: rgba(255, 255, 255, 1);
}

.icon-star {
  color: rgba(5, 227, 227, 1);
  font-size: 18px;
}

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

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: rgba(255, 255, 255, 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%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(5, 227, 227, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(5, 227, 227, 1);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #011738;
}
.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: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #fff;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(5, 227, 227, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(5, 227, 227, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(5, 227, 227, 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(255, 255, 255, 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;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* ============================================
   TABLE OF CONTENTS (TOC)
   ============================================ */
.toc-container {
  background: #fff;
  border-left: 3px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin: 1em 0 2em 0;
  padding: 1em 1em 1em 1.2em;
  border-radius: 6px;
  font-size: 0.95em;
}

.toc-container .toc-heading-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #222;
}

.toc-container ul {
  list-style: none;
  padding-left: 1em;
  margin: 0;
}

.toc-h2 a {
  text-decoration: none;
  color: #0073e6;
  display: block;
  padding: 4px 0;
  line-height: 1.4;
}

.toc-container a.active {
  font-weight: bold;
  color: #222;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .toc-container {
    background: #1c1c1e;
    border-left-color: #444;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.08);
  }

  .toc-container .toc-heading-label,
  .toc-container a {
    color: #ddd;
  }

  .toc-container a.active {
    color: #fff;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .toc-container {
    padding: 1em 1em 1em 1.2em;
    border-left: 3px solid #ddd;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
  }

  .toc-container ul {
    display: block !important;
    padding-left: 1em;
  }

  .toc-container .toc-heading-label {
    background: none;
    padding: 0;
    cursor: default;
    margin-bottom: 8px;
    border-radius: 0;
  }
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
#back-to-top-btn {
  position: fixed;
  bottom: 40px;
  left: 40px;
  background: #050A51; /* Ontario primary color */
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#back-to-top-btn:hover {
  background: #0A1270; /* Slightly lighter Ontario blue */
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
}

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

#back-to-top-btn svg {
  transform: rotate(180deg);
}

/* Mobile optimization */
@media (max-width: 768px) {
  #back-to-top-btn {
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    opacity: 0.85;
    position: fixed !important;
    -webkit-position: fixed !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  #back-to-top-btn.visible {
    opacity: 0.85;
  }
  
  #back-to-top-btn:active {
    opacity: 1;
  }
}

/* ============================================
   READING PROGRESS BAR
   ============================================ */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: #05FCFC; /* Smith Electric Blue */
  z-index: 9999;
  transition: width 0.2s ease-out;
  box-shadow: 0 2px 4px rgba(5, 252, 252, 0.3);
}

/* Subtle glow effect */
.reading-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(5, 252, 252, 0.4));
  pointer-events: none;
}

/* Mobile - slightly thicker for visibility */
@media (max-width: 768px) {
  .reading-progress-bar {
    height: 5px;
  }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
  .reading-progress-bar {
    background: currentColor;
    opacity: 1;
  }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reading-progress-bar {
    transition: none;
  }
}

/* Print - hide progress bar */
@media print {
  .reading-progress-bar {
    display: none;
  }
}

/* Floating Back to Top Button - Article Pages Only */
#back-to-top-btn {
  position: fixed;
  bottom: 40px;
  left: 40px;
  background: #1a8ac3;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Force hardware acceleration for smoother mobile performance */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#back-to-top-btn:hover {
  background: #0A52A2;
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
}

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

#back-to-top-btn svg {
  transform: rotate(180deg);
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  #back-to-top-btn {
    /* Use viewport units for better mobile support */
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    opacity: 0.85;
    /* Ensure it stays fixed on mobile */
    position: fixed !important;
    -webkit-position: fixed !important;
    /* Prevent iOS Safari from breaking fixed positioning */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  #back-to-top-btn.visible {
    opacity: 0.85;
  }
  
  #back-to-top-btn:active {
    opacity: 1;
  }
}

/* Fix Zendesk support widget positioning on mobile */
@media (max-width: 768px) {
  /* Target the widget container */
  .sc-1w3tvxe-0,
  [class*="sc-1w3tvxe"],
  iframe[title*="Messaging window"],
  div[shape="square"],
  .StyledButton-sc-qe3ace-0 {
    position: fixed !important;
    -webkit-position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    /* iOS Safari fixes */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}
/* ==== END FLOATING BACK TO TOP BUTTON ==== */

/* ==== TOC MAIN STYLING ==== */
.toc-container {
  background: #fff;
  border-left: 3px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin: 1em 0 2em 0;
  padding: 1em 1em 1em 1.2em;
  border-radius: 6px;
  font-size: 0.95em;
}

.toc-container .toc-heading-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #222;
}

.toc-container ul {
  list-style: none;
  padding-left: 1em; /* <-- slight indent */
  margin: 0;
}

.toc-h2 a {
  text-decoration: none;
  color: #0073e6;
  display: block;
  padding: 4px 0;
  line-height: 1.4;
}

.toc-container a.active {
  font-weight: bold;
  color: #222;
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
  .toc-container {
    background: #1c1c1e;
    border-left-color: #444;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.08);
  }

  .toc-container .toc-heading-label,
  .toc-container a {
    color: #ddd;
  }

  .toc-container a.active {
    color: #fff;
  }
}

/* === MOBILE COLLAPSIBLE === */
@media (max-width: 768px) {
  .toc-container {
    padding: 1em 1em 1em 1.2em;
    border-left: 3px solid #ddd;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
  }

  .toc-container ul {
    display: block !important;
    padding-left: 1em;
  }

  .toc-container .toc-heading-label {
    background: none;
    padding: 0;
    cursor: default;
    margin-bottom: 8px;
    border-radius: 0;
  }
}
/* === ALERT BANNER === */
.alert-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #003E51; /* Deep brand teal */
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  z-index: 999;
  position: relative;
  text-align: center;
}

.alert-banner.alert-info {
  background-color: #007E94;
}

.alert-banner.alert-warning {
  background-color: #FFD166;
  color: #231f20;
}

.alert-banner button#dismiss-alert {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  margin-left: 20px;
}



/***** 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(255, 255, 255, 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: #fff;
}

/***** 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: #fff;
}
.share a:hover {
  text-decoration: none;
  color: rgba(5, 227, 227, 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: #fff;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(5, 227, 227, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(5, 227, 227, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #fff;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(5, 227, 227, 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(5, 227, 227, 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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(5, 227, 227, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(5, 227, 227, 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: #011738;
}
.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: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  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: #fff;
  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(5, 227, 227, 1);
}

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

.vote-voted {
  color: rgba(5, 227, 227, 1);
}

.vote-voted:hover {
  color: #037f7f;
}

/***** 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/01K3H6W0JQ58P5V0D1JA2A2WTR);
  margin-bottom: 10px;
}
.community-hero h2 {
  color: #fff;
}
.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(5, 227, 227, 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(5, 227, 227, 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: #037f7f;
  border-color: #037f7f;
}
.community-follow button::after {
  border-left: 1px solid rgba(5, 227, 227, 1);
  content: attr(data-follower-count);
  color: rgba(5, 227, 227, 1);
  display: inline-block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 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(5, 227, 227, 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(90, 174, 253, 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(5, 227, 227, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #fff;
  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(255, 255, 255, 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(5, 227, 227, 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: #fff;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #236a6d;
  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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 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(90, 174, 253, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(5, 227, 227, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(5, 227, 227, 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: #011738;
}
.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: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #fff;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(5, 227, 227, 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(5, 227, 227, 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(255, 255, 255, 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(255, 255, 255, 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(5, 227, 227, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(255, 255, 255, 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;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(5, 227, 227, 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: #011738;
  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: #fff;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #fff;
}

/***** 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: #fff;
  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(5, 227, 227, 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(5, 227, 227, 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: #011c42;
    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 {
  color: #fff;
  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: #fff;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "•";
  margin: 0 8px;
  opacity: 0.6;
}

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

.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: #fff;
  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(5, 227, 227, 1);
  border-radius: 4px;
  color: rgba(5, 227, 227, 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: #011738;
  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: #fff;
  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: #fff;
  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: #011c42;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

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

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

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

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[dir=rtl] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir=rtl] .dropdown-menu-end {
  left: 0;
  right: auto;
}

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

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

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

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

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

/*################################################################################################################################################################################################*/
/*#################### CUSTOM STYLES: No changes have been made to default stylesheet. All changes and overrides are below. ######################################################################*/
/*################################################################################################################################################################################################*/

/* ############### GLOBAL STYLES ############### */
body, html, h1, h2, h3, h4, h5, h6, p, a {
  font-family: 'Instrument Sans', 'Open Sans', Sans-serif;
}
h1 {
  line-height: 1.3;
  font-weight: 600;
}
.page-header h1, .post-title h1, h1.article-title, header.my-activities-header h1, .search-result-title {
  font-weight: 600;
}
h2 {
  font-size: 32px;
  font-weight: 600;
}
h3 {
  line-height: 1.3;
  margin-bottom: 5px !important;
}
.category-tree .section-tree h3 {
  font-size: 22px;
}
.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 {
  border-radius: 20px;
}
@media (min-width: 1024px) {
.section-content {
    flex: 0 0 100%;
}
}
.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 {
    border: 1px solid rgb(31 115 183);
    color: rgb(31 115 183);
}
.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: #236a6d;
}
.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: #236a6d;
  text-decoration: none;
  border-color: #236a6d; 
}
.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: #236a6d;
  border-color: #236a6d;
}
.section-tree {
    justify-content: flex-start;
    gap: 20px;
}

/* ############### HEADER ############### */
header.article-header {
  background: #f3f3f3;
  padding: 20px 40px;
  border-radius: 20px;
}
#global-header {
  width: 100%;
  background: linear-gradient(180deg, #000000 0%, #01265A 100%);
}
.hero-inner svg {
  max-width: 450px;
}
@media (max-width: 768px) {
  .hero-inner svg {
    max-width: 300px;
}
}
.user-info span {
  color: #fff;
}
.button-large, input[type=submit] {
  background-color: #236a6d;
  border-radius: 20px;
  min-width: 150px;
  padding: 0 1em;
  transition: opacity ease-in-out 0.5s;
}
.button-large:hover, input[type=submit]:hover {
  background-color: #236a6d;
  text-decoration: none;
  opacity: 0.75;
}
a.button.button-large {
  color: #fff;
}
.sub-nav .breadcrumbs {
  margin-top: 10px;
}
/* ############### NAV ############### */
.header .user-nav li a, .header .user-nav li .cat-dropdown-btn {
  color: #fff;
  font-weight: 500;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  text-decoration: none;
  color: #b3d6e5 !important;
}
.nav-wrapper-desktop .dropdown-menu a:hover, .nav-wrapper-desktop .dropdown-menu a:focus, .nav-wrapper-desktop .dropdown-menu a:active {
  text-decoration: none;
  color: #2f3941 !important;
}
.dropdown-menu [role=separator] {
    border-bottom: 0 solid #e9ebed;
}

/* ############### CATEGORY/SECTION NAV ############### */
.cat-dropdown {
  position: relative; /* Needed for menu positioning */
  display: inline-block;
}
.cat-dropdown-btn {
  cursor: pointer;
  background: none;
  border-style: none;
  padding: 0 20px 0 0;
}
.cat-dropdown-content {
 display: none;
  position: absolute; /* Positions the menu relative to button */
  /*background-color: #2c5364;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10; /* Ensures menu appears above other elements */
    background: #fff;
    border: 1px solid #d8dcde;
    border-radius: 3px;
    box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    left: 0;
    margin-top: 1px;
    min-width: 170px;
    padding: 10px 0;
    position: absolute;
    text-align: left;
    z-index: 1000;
}
.cat-dropdown-content a, .cat-dropdown-content a:hover {
  /*color: #fff;*/
  color: #2f3941 !important;
  font-weight: 300 !important;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
}
.cat-dropdown-content a:hover {
  background: #1f73b714;
}
/*.cat-dropdown:hover .cat-dropdown-content { /* Optional hover effect */
 /*display: block;
}*/
.show {
  display: block;
}

/* ############### SEARCH ############### */
.search input[type="search"] {
  border-radius: 30px;
  box-sizing: border-box;
  color: #333333 !important;
  height: 48px;
  padding-left: 40px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #2c4959 0%, #5a99a3 38%, #2c4959 100%) border-box !important;
  border-radius: 50em !important;
  border: 4px solid transparent !important;
}
.search-wrapper {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 610px;
    margin: 0 auto;
}
.search {
  border-style: none;
}
.search-icon {
  color: #333333;
  top: 82%;
}
.top-search-bar {
  margin-top: 100px;
  text-align: center;
}
.top-search-bar h2 {
  font-size: 34px;
  margin-bottom: 12px;
}
input {
  font-size: 16px;
}
.search .clear-button, .search .clear-button:hover {
  color: #fff;
  background-color: #236a6d;
  border-color: transparent;
  padding: 0 18px;
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
}

/* ############### HOME: TRENDING TOPICS ############### */
.browse-other-bucket {
/*background: #f3f3f3;
  padding: 20px;
  border-radius: 20px;
  max-width: 200px;
  text-align: center;*/
}
section.other-guides {
  margin-bottom: 70px;
  margin-top: 20px;
}
#browse-other-wrapper {
  display: flex !important;
  gap: 50px;
}
.browse-other-bucket {
  display: flex !important;
  align-items: center;
  flex: 1;
  /* Make each child flex item take up equal space */
  /*min-height: 100px;*/
}
.browse-other-bucket img {
  width: 100%;
}
@media (max-width: 768px) {
  section.other-guides {
    margin-top: 20px;
  }
  #browse-other-wrapper {
    flex-wrap: wrap;
    gap: inherit;
  }
  .browse-other-bucket img {
    height: 120px !important;
    width: auto !important;
    margin: 10px 10px;
    text-align: center;
  }
}

/* ############### HOME: ARTICLES ############### */
.section-tree .section {
  border: 4px solid #7BA0C440;
  border-radius: 20px;
  padding: 30px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 30px;
  }
  .section-tree .section {
    flex: 0 0 32%;
  }
}
@media (min-width: 1024px) {
  .promoted-articles {
    gap: 30px;
  }
.promoted-articles-item {
    align-self: flex-start;
    flex: 0 0 auto;
    width: 31.5%;
    padding-right: 0;
  }
}
section.articles {
  margin-top: 40px;
}
a.see-all-articles {
  background: #236a6d;
  color: #fff;
  width: 60%;
  text-align: center;
  border-radius: 20px;
}
.section-tree .see-all-articles {
  padding: 10px 10px;
  margin-top: 20px;
}
li.promoted-articles-item a {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 0;
}
.promoted-articles-item:last-child a {
  border-bottom: 0;
}
li.promoted-articles-item img {
  width: 100%;
  border-radius: 20px;
}
.promoted-articles-item a {
  border-bottom: none;
  line-height: 1.3;
  margin-bottom: 8px;
}
.community, .activity {
  border-top: none;
}
section:not(.profile-section) h3 a, 
section:not(.profile-section) h3 a:visited {
  color: #333;
}
 
/* ############### HOME: RECENT ACTIVITY AND COMMUNITY ############### */
/*h2.recent-activity-header, .community h2, .articles h2 {
  font-size: 32px;
  color: rgba(127, 39, 41, 1);
  font-weight: 600;
}
@media (min-width: 768px) {
  .recent-activity-list {
    display: flex;
    flex-wrap: wrap;
  }
  .recent-activity-item {
    flex: 1 0 21%;
    padding: 20px;
    border-bottom: 0;
  }
  .recent-activity-item-meta {
    float: none;
  }
}*/
section.section.home-section.activity {
  display: none;
}
.community a, .recent-activity-controls a, a.article-sidebar-item {
  text-decoration: none;
  color: #fff !important;
  background: #236a6d;
  padding: 10px 20px;
  border-radius: 20px;
}
.community a:hover, .recent-activity-controls a:hover, a.article-sidebar-item:hover {
  text-decoration: none;
  background: #0A52A2;
  transition: all ease-in-out 0.5s;
}
.community-image {
  margin-top: 40px;
}
.recent-activity-item-parent {
  font-size: 16px;
}
.recent-activity-item-link {
  font-size: 15px;
}
/* Recent Activities show 5 and cannot change. Hide last child to display only 4 */
/*.recent-activity-list .recent-activity-item:last-child {
  display: none;
}
section.recent-activity-item {
  border-radius: 20px;
  margin: 10px;
  background: #f3f3f3;
}
.recent-activity-controls {
  text-align: center;
  margin-top: 10px;
} */
@media (max-width: 768px) {
 .community-image {
    background-position: center left;
  }
}

/* ############### FOOTER ############### */
.footer {
  background-color: #E2E8F0;  /* Light grey background */
  background-image: none;
  padding: 40px 0 70px;
  text-align: center;
  width: 100%;
}

.footer .ebm-footer-info p, 
.footer .ebm-footer-info a {
  color: #1E3A8A;  /* EBM Navy blue text */
}

.footer .ebm-footer-info a:hover {
  color: #0A52A2;  /* Lighter blue on hover */
  text-decoration: underline;
}
.footer .ebm-footer-info p {
  margin-bottom: 5px;
  margin-top: 5px;
}
@media (max-width: 768px) {
  .footer .ebm-footer-info p {
  font-size: 12px;
    line-height: 16px;
    margin-left: 10px;
  }
  .footer-inner {
    display: block;
  }
}

/* ############### COMMUNITY LANDING PAGE: community_topic_list_page ############### */
.blocks-item {
  border: 4px solid #7BA0C440;
  border-radius: 20px;
  padding: 20px;
}
.blocks-item:hover {
  background: #7BA0C440;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #231f20;
  text-decoration: none;
}
a span.blocks-item-title {
  font-size: 24px;
  font-weight: 500;
}
.community-footer-title {
  font-size: 28px;
  font-weight: 600;
}
.community-featured-posts .title {
  font-size: 28px;
}
.community-header .title {
  font-size: 28px;
  font-weight: 600;
}
.blocks-item-link:focus {
  box-shadow: 0 0 0 0 rgb(242 0 61);
}
.recent-activity-comment-icon svg {
    color: #0A52A2;
}
.status-label-pinned, .status-label-featured, .status-label-official {
    background-color: rgb(9 113 206);
}

/* ############### SEARCH BAR INTERIOR PAGES (white bg) ############### */
.search-container .search input[type="search"] {
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #2c4959 0%, #5a99a3 38%, #2c4959 100%) border-box !important;
  color: #757575 !important;
}
.search-container .search-icon {
  color: #757575;
  top: 52%;
}

/* ############### ARTICLES ############### */
.collapsible-sidebar-body li:last-child {
  margin-bottom: 40px;
}
.collapsible-sidebar-body {
  padding-bottom: 30px;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 85%;
    max-width: 85%;
  }
}
.recent-articles li, .related-articles li {
  margin-bottom: 5px;
}

/* --- Enhanced Blockquote Styling --- */
.article-body blockquote {
  border-left: 4px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 4px;
  color: #333;
  font-style: normal;
  padding: 10px 16px;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  animation: fadeSlideIn 0.3s ease;
}

/* Default blockquote (unstyled) */
.article-body blockquote:not(.important):not(.fyi):not(.note):not(.info):not(.relevant):not(.tip):not(.action):not(.troubleshoot):not(.context) {
  background-color: #f4f5f7;
  border-left-color: #5e6c84;
  color: #333;
  font-style: normal;
}

/* --- Updated and New Blockquote Variants --- */

/* Important - Light Pink */
.article-body blockquote.important {
  background-color: #ffebe6;
  border-left-color: #d13c2f;
  color: #333;
}

/* FYI - Light Blue */
.article-body blockquote.fyi {
  background-color: #deebff;
  border-left-color: #3779db;
  color: #333;
}

/* Note - Soft Yellow */
.article-body blockquote.note {
  background-color: #fffbe6;
  border-left-color: #e6b800;
  color: #333;
}

/* Info - Soft Mint */
.article-body blockquote.info {
  background-color: #e6fbf3;
  border-left-color: #3aa77d;
  color: #333;
}

/* Relevant - Soft Lavender Blue */
.article-body blockquote.relevant {
  background-color: #f5f3f0;
  border-left-color: #a09b92;
  color: #2e2e2e;
}

/* Tip - Light Green */
.article-body blockquote.tip {
  background-color: #e8f5e9;
  border-left-color: #43a047;
  color: #2e7d32;
}

/* Action - Light Orange */
.article-body blockquote.action {
  background-color: #fff3e0;
  border-left-color: #fb8c00;
  color: #e65100;
}

/* Troubleshoot - Warm Peach */
.article-body blockquote.troubleshoot {
  background-color: #fbe9e7;
  border-left-color: #d84315;
  color: #4e342e;
}

/* Context - Soft Steel Blue */
.article-body blockquote.context {
  background-color: #e3e7f0;
  border-left-color: #627aa0;
  color: #2f3e5c;
}

/* Hover effect for all blockquotes */
.article-body blockquote:hover {
  background-color: #eef1f3;
}

/* Inline Alert Callout */
.article-body .alert-inline {
  display: inline-block;
  background-color: #fff8c5;
  color: #594d00;
  border-left: 4px solid #e3b800;
  padding: 4px 8px;
  margin: 2px 0;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  animation: fadeSlideIn 0.3s ease;
}

/* Slide & Fade In Animation */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Font Adjustment on Mobile */
@media (max-width: 600px) {
  .article-body blockquote {
    font-size: 15px;
  }
  .article-body .alert-inline {
    font-size: 14px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .article-body blockquote {
    background-color: #2e2e2e;
    color: #ddd;
    border-left-color: #666;
  }
  .article-body blockquote:not(.important):not(.fyi):not(.note):not(.info):not(.relevant):not(.tip):not(.action):not(.troubleshoot):not(.context) {
    background-color: #3a3a3a;
    border-left-color: #888;
    color: #ddd;
  }
  .article-body blockquote.important {
    background-color: #4b1f1f;
    border-left-color: #ff6b6b;
  }
  .article-body blockquote.fyi {
    background-color: #1f2b4b;
    border-left-color: #4c9aff;
  }
  .article-body blockquote.note {
    background-color: #4b3f1f;
    border-left-color: #ffcd4b;
  }
  .article-body blockquote.info {
    background-color: #1f4b2b;
    border-left-color: #4bffa0;
  }
  .article-body blockquote.relevant {
    background-color: #3b4152;
    border-left-color: #91a4d1;
    color: #eee;
  }
  .article-body blockquote.tip {
    background-color: #264d36;
    border-left-color: #43ff91;
  }
  .article-body blockquote.action {
    background-color: #4e3b1f;
    border-left-color: #ffc47d;
  }
  .article-body blockquote.troubleshoot {
    background-color: #51231d;
    border-left-color: #ff8e72;
  }
  .article-body blockquote.context {
    background-color: #2f3540;
    border-left-color: #99b0d1;
  }
  .article-body .alert-inline {
    background-color: #5c4600;
    color: #fff8c5;
    border-left-color: #ffcc00;
  }
}
/* === FEATURED IMAGE VISIBILITY & RESIZE === */
.article-body .feat-image {
  display: none;
}

.article-body p.feat-image img {
  max-width: 921px;
  max-height: 518px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Heading anchor links */
.heading-anchor {
  margin-left: 0.5em;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--link-color, #1f73b7);
  padding: 0.25em;
  text-decoration: none;
  vertical-align: middle;
}

.heading-anchor:hover {
  color: var(--link-color-hover, #0d5a9e);
}

.heading-anchor svg {
  display: inline-block;
  vertical-align: middle;
}

/* Show on heading hover */
.article-body h2:hover .heading-anchor,
.article-body h3:hover .heading-anchor,
.article-body h4:hover .heading-anchor,
.heading-anchor:focus {
  opacity: 1;
}

/* Copied feedback */
.heading-anchor.copied::after {
  content: 'Copied!';
  margin-left: 0.5em;
  font-size: 12px;
  background: #68737d;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .heading-anchor {
    color: #6db3f2;
  }
  .heading-anchor:hover {
    color: #9ecbf7;
  }
  .heading-anchor.copied::after {
    background: #87929d;
  }
}

/* ############### SECTIONS PAGE ############### */
.section-header {
  background: #4991D6 !important; /* image removed for Smith */
  /* background-position removed */
  /* background-size removed */
  padding: 50px 40px;
  width: 100%; 
  margin-bottom: 40px;
}
.section-header h1 {
  color: #fff;
}
.section-header .section-subscribe button:hover {
  background-color: #0A52A2;
  border: 1px solid #0A52A2;
}
.section-header .section-subscribe button {
    border: 1px solid rgb(255 255 255);
    color: rgb(255 255 255);
}
.section-container {
  display: flex;
  justify-content: flex-start;
}
.article-list-item a.article-list-link {
  color: rgba(26, 138, 195, 1);
  font-weight: 500;
  font-size: 18px;
}
li.article-list-item {
  padding: 26px;
  background: #f5f5f5;
  border-radius: 20px;
}
li.article-list-item.article-promoted svg {
    color: rgb(123 160 196 / 60%);
}
.article-read-more {
  background: #236a6d;
  padding: 6px 12px;
  color: #fff !important;
  border-radius: 15px;
  font-size: 12px;
}
.article-read-more:hover {
  background: #0A52A2;
  transition: all ease-in-out 0.5s;
  text-decoration: none;
}
.section-container ul.article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
@media (min-width: 768px) {
.section-container .article-list-item {
  width: 31.6%;
}
}

/* ############### REQUESTS ############### */
header.my-activities-header h1 {
  margin-top: 40px;
}
.requests-table-toolbar .search input[type="search"] {
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #4ca1bc 0%, #409FC1 30%, #3196C2 34%, #1B8AC3 38%, #0981C5 66%, #264A82 95%, #264A82 100%) border-box !important;
  color: #757575 !important;
}
.requests-table-toolbar .search-icon {
  color: #757575;
  top: 52%;
}

/* ############### CATEGORIES TEMPLATE ############### */
@media (min-width: 1024px) {
  .category-content {
      flex: 0 0 100%;
  }
}
.category-container {
    li.article-list-item {
        padding: 0;
        background: transparent;
        border-radius: 0;
        margin-bottom: 10px;
    }
    h1 {
      margin-bottom: 30px;
    }
    h2.section-tree-title {
        font-size: 22px;
        margin-bottom: 8px;
    }
  a.see-all-articles {
    width: 100%;
    background: #236a6d;
    transition: all ease-in-out .5s;
  }
  a.see-all-articles:hover {
    opacity: .75;
    text-decoration: none;
  }
}
/* Limit number of articles to 3 */
.category-container .article-list li:nth-child(n+4) {
 display: none;
}

/* #################### REQUESTS PAGE #######################*/
.request-breadcrumbs {
    margin-top: 14px;
}

/* #################### USER PROFILE PAGE ############################ */
.split-button button {
    background-color: rgb(31 115 183);
    color: #ffffff !important;
    outline-color: rgb(31 115 183);
    transition: all ease-in-out .5s;
}
.split-button button:hover {
    opacity: .75;
}

/* #################### MOBILE ############################ */
.nav-wrapper-mobile .menu-button-mobile {
    color: #fff;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  display: none;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
    background: #008dc4;
}

/*#################### CUSTOM FEATURE: Request Form Inline Note #################################################################*/

.request-note {
  background: #f7fafc;               /* light neutral background */
  border-left: 3px solid #1a8ac3;    /* subtle brand-colored accent */
  padding: 8px 12px;
  margin: 6px 0 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #2f3941;
}

.request-note a {
  color: #1a8ac3;                    /* match brand link color */
  text-decoration: underline;
  font-weight: 500;
}

.request-note p {
  margin: 0;
  line-height: 1.5;
}

/*#################### CUSTOM FEATURE: Search Inline by Typing in Dropdowns #################################################################*/

/* Keyboard search highlighting inside Zendesk Nesty panels */
.nesty-panel li.kb-match {
  background-color: #fff6d6; /* subtle highlight for all matches */
}
.nesty-panel li.kb-focused {
  background-color: #ffe8a3; /* stronger highlight for focused match */
  outline: 1px dashed #c97a00;
}

/* ========================================
   COMPREHENSIVE DARK MODE IMPLEMENTATION
   Add this to the end of style.css
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ========== BASE STYLES ========== */
  body {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  .container,
  .error-page,
  main {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  /* ========== HEADINGS ========== */
  h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
  }
  
  /* ========== LINKS ========== */
  a {
    color: #4db8ff !important;
  }
  
a:visited:not(.search-results-sidebar a):not(.sidenav-item a):not(.knowledge-base .section h3 a):not(.section-tree .section h3 a):not(.section h3 a):not(.section .article-list a):not(.section-tree .section ul a):not(.article-list-item a):not(.promoted-articles-item a):not(.see-all-articles) {
  color: #9d7dff !important;
}
  
  a:hover, a:active, a:focus {
    color: #6ec6ff !important;
  }
  
  /* Override for search sidebar - keep visited links dark for contrast */
.search-results-sidebar a:visited,
.search-results-sidebar .sidenav-item a:visited {
  color: #e0e0e0 !important;
}
  
  /* ========== FORMS & INPUTS ========== */
  input:not([type=checkbox]),
  textarea,
  select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: #4db8ff !important;
    background-color: #333333 !important;
  }
  
  input[disabled] {
    background-color: #3a3a3a !important;
    color: #888 !important;
  }
  
  input::placeholder,
  textarea::placeholder {
    color: #888 !important;
  }
  
  /* Fix all heading levels in form description CKEditor - both themes */
.ck-editor__editable h1,
.ck-editor__editable h2,
.ck-editor__editable h3 {
  color: #2f3941 !important;
}

@media (prefers-color-scheme: dark) {
  .ck-editor__editable h1,
  .ck-editor__editable h2,
  .ck-editor__editable h3 {
    color: #2f3941 !important;
  }
}
  
  /* Select dropdown arrow */
  select {
    background-image: 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='%23888' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") !important;
  }
  
  /* ========== BUTTONS ========== */
  .button,
  .pagination-next-link,
  .pagination-prev-link,
  .pagination-first-link,
  .pagination-last-link,
  button {
    background-color: #2d2d2d !important;
    color: #4db8ff !important;
    border-color: #4db8ff !important;
  }
  
  .button:hover,
  button:hover {
    background-color: #3a3a3a !important;
    color: #6ec6ff !important;
  }
  
  .button-primary,
  .button[aria-selected="true"] {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== HEADER & NAVIGATION ========== */
  .header {
    background-color: #1f1f1f !important;
    border-bottom-color: #333 !important;
  }
  
  .header .logo-link,
  .header a {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .menu-button {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .dropdown-menu {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .nav-wrapper .dropdown-menu a {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .dropdown-menu a:hover {
    background-color: #3a3a3a !important;
  }
  
  /* Mobile navigation */
  .nav-wrapper-mobile {
    background-color: #1f1f1f !important;
  }
  
  .nav-wrapper-mobile .menu-button-mobile {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper-mobile .menu-list-mobile {
    background-color: #2d2d2d !important;
  }
  
  /* ========== BREADCRUMBS ========== */
  .breadcrumbs {
    color: #b0b0b0 !important;
  }
  
  .breadcrumbs a {
    color: #4db8ff !important;
  }
  
  /* ========== SEARCH ========== */
  .search input[type="search"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .search-icon {
    color: #888 !important;
  }
  
  /* ========== HOME PAGE ========== */
  .hero {
    background-color: #242424 !important;
  }
  
  .hero h1,
  .hero p {
    color: #ffffff !important;
  }
  
  .blocks {
    background-color: #1a1a1a !important;
  }
  
  .blocks-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .blocks-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .blocks-item-title {
    color: #ffffff !important;
  }
  
  .blocks-item-description {
    color: #b0b0b0 !important;
  }
  
  /* ========== SECTION PAGE ========== */
  .section-header {
    background-color: #1f3a52 !important;
  }
  
  .section-header h1 {
    color: #ffffff !important;
  }
  
  .section-container {
    background-color: #1a1a1a !important;
  }
  
  li.article-list-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  li.article-list-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .article-list-link {
    color: #4db8ff !important;
  }
  
  .article-list-item-description {
    color: #b0b0b0 !important;
  }
  
  .article-read-more {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  .article-read-more:hover {
    background-color: #0A52A2 !important;
  }
  
  /* ========== CATEGORY PAGE ========== */
  .category-container {
    background-color: #1a1a1a !important;
  }
  
  .section-tree-title {
    color: #ffffff !important;
  }
  
  .see-all-articles {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== ARTICLE PAGE ========== */
  .article {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  .article-header {
    border-bottom-color: #333 !important;
  }
  
  .article-title {
    color: #ffffff !important;
  }
  
  .article-sidebar {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .sidenav-item {
    color: #e0e0e0 !important;
    border-bottom-color: #333 !important;
  }
  
  .sidenav-item:hover,
  .sidenav-item.current-article {
    background-color: #2d2d2d !important;
    color: #4db8ff !important;
  }
  
  .sidenav-title {
    color: #ffffff !important;
  }
  
  /* Article body content */
  .article-body {
    color: #e0e0e0 !important;
  }
  
  .article-body p,
  .article-body li,
  .article-body td,
  .article-body th {
    color: #e0e0e0 !important;
  }
  
  .article-body strong,
  .article-body b {
    color: #ffffff !important;
  }
  
  /* Code blocks */
  .article-body pre,
  .article-body code {
    background-color: #2d2d2d !important;
    color: #f0f0f0 !important;
    border-color: #454545 !important;
  }
  
  /* Horizontal rules */
  .article-body hr {
    border-color: #454545 !important;
  }
  
  /* ========== ARTICLE INLINE STYLES (Critical for custom HTML) ========== */
  
  /* Override inline background colors for divs and spans */
  .article-body div[style*="background"],
  .article-body span[style*="background"],
  .article-body p[style*="background"] {
    background-color: #2d2d2d !important;
  }
  
  /* Override inline text colors */
  .article-body div[style*="color"],
  .article-body span[style*="color"],
  .article-body p[style*="color"],
  .article-body h1[style*="color"],
  .article-body h2[style*="color"],
  .article-body h3[style*="color"],
  .article-body h4[style*="color"] {
    color: #e0e0e0 !important;
  }
  
  /* Gradient backgrounds (for hero sections) */
  .article-body div[style*="linear-gradient"],
  .article-body div[style*="gradient"] {
    background: linear-gradient(135deg, #050A51 0%, #1F94D3 100%);
  }
  
  /* Tables with inline styles */
  .article-body table,
  .article-body table[style] {
    border-color: #454545 !important;
  }
  
  .article-body th,
  .article-body td,
  .article-body th[style],
  .article-body td[style] {
    border-color: #454545 !important;
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
  }
  
  .article-body thead th,
  .article-body thead th[style] {
    background-color: #1a4d7a !important;
    color: #ffffff !important;
  }
  
  .article-body tr[style*="background-color"] {
    background-color: #242424 !important;
  }
  
  .article-body tbody tr:nth-child(even) {
    background-color: #242424 !important;
  }
  
  /* Colored boxes and containers */
  .article-body div[style*="#e3f2fd"],
  .article-body div[style*="#e8f5e9"],
  .article-body div[style*="#f5f7fa"],
  .article-body div[style*="#fff3e0"],
  .article-body div[style*="background: #f"] {
    background-color: #2d3d4d !important;
    border-color: #4db8ff !important;
  }
  
  /* Special styled sections */
  .article-body .intro-note,
  .article-body .closing-cta {
    background-color: #2d2d2d !important;
  }
  
  /* Figures and images containers */
  .article-body figure {
    background-color: transparent !important;
  }
  
  /* ========== BLOCKQUOTES (Enhanced) ========== */
  .article-body blockquote {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-left-color: #666 !important;
  }
  
  /* All blockquote variants already handled in existing CSS (lines 5432-5485) */
  /* But let's add overrides for any inline styles */
  .article-body blockquote[style*="background"] {
    background-color: #2d2d2d !important;
  }
  
  .article-body blockquote[style*="border-left"] {
    border-left-color: #4db8ff !important;
  }
  
  /* ========== TABLES (General) ========== */
  table {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  thead {
    background-color: #1f1f1f !important;
  }
  
  th {
    background-color: #1a4d7a !important;
    color: #ffffff !important;
    border-color: #454545 !important;
  }
  
  td {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  tbody tr:nth-child(even) td {
    background-color: #242424 !important;
  }
  
  /* ========== REQUESTS PAGE ========== */
  .requests-table {
    background-color: #2d2d2d !important;
  }
  
  .requests-table th {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
    border-bottom-color: #454545 !important;
  }
  
  .requests-table td {
    border-bottom-color: #333 !important;
  }
  
  .requests-table tr:hover {
    background-color: #3a3a3a !important;
  }
  
  .request-status {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  .request-id {
    color: #4db8ff !important;
  }
  
  /* ========== REQUEST PAGE (Single Request) ========== */
  .request-container {
    background-color: #2d2d2d !important;
  }
  
  .request-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .request-title {
    color: #ffffff !important;
  }
  
  .status-label {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  /* Request comments */
  .comment {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .comment:hover {
    background-color: #2d2d2d !important;
  }
  
  .comment-body {
    color: #e0e0e0 !important;
  }
  
  .comment-info {
    border-bottom-color: #333 !important;
  }
  
  /* Request form */
  .request-form {
    background-color: #2d2d2d !important;
  }
  
  .form-field label {
    color: #e0e0e0 !important;
  }
  
  .request-note {
    background-color: #2d3d4d !important;
    color: #e0e0e0 !important;
    border-left-color: #4db8ff !important;
  }
  
  /* ========== FOOTER ========== */
  .footer {
    background-color: #1f2937 !important;  /* Dark slate grey */
    background-image: none !important;
    border-top-color: #374151 !important;
    color: #e5e7eb !important;
  }
  
  .footer .ebm-footer-info p,
  .footer .ebm-footer-info a {
    color: #e5e7eb !important;  /* Light grey text in dark mode */
  }
  
  .footer .ebm-footer-info a:hover {
    color: #93c5fd !important;  /* Light blue on hover */
  }
  
  .footer h2,
  .footer h3 {
    color: #ffffff !important;
  }
  
  /* ========== PAGINATION ========== */
  .pagination {
    background-color: transparent !important;
  }
  
  .pagination-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .pagination-item:hover,
  .pagination-item.current {
    background-color: #3a3a3a !important;
  }
  
  /* ========== DROPDOWNS ========== */
  .dropdown-menu {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }
  
  .dropdown-menu a {
    color: #e0e0e0 !important;
  }
  
  .dropdown-menu a:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== LABELS & BADGES ========== */
  .label,
  .badge {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  .label-primary {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== AVATARS ========== */
  .avatar {
    background-color: #3a3a3a !important;
  }
  
  .user-avatar {
    border-color: #454545 !important;
  }
  
  /* ========== NOTIFICATIONS & ALERTS ========== */
  .notification,
  .alert {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
    color: #e0e0e0 !important;
  }
  
  .notification-success {
    background-color: #1a3d2d !important;
    border-color: #2d6d4d !important;
  }
  
  .notification-error {
    background-color: #4d1a1a !important;
    border-color: #7d2d2d !important;
  }
  
  .notification-info {
    background-color: #1a2d4d !important;
    border-color: #2d4d7d !important;
  }
  
  /* ========== ICONS ========== */
  svg {
    color: inherit !important;
  }
  
  .icon-lock,
  .icon-agent {
    color: #b0b0b0 !important;
  }
  
  /* ========== LOADING & SPINNER ========== */
  .loading {
    background-color: #2d2d2d !important;
  }
  
  .spinner {
    border-color: #454545 !important;
    border-top-color: #4db8ff !important;
  }
  
  /* ========== TOOLTIPS ========== */
  .tooltip {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
    border: 1px solid #454545 !important;
  }
  
  /* ========== COMMUNITY / FORUMS ========== */
  .community-post,
  .community-topic {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .community-post:hover,
  .community-topic:hover {
    background-color: #3a3a3a !important;
  }
  
  .community-badge {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  /* ========== VOTES ========== */
  .article-votes {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .article-vote {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .article-vote:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== SUBSCRIPTIONS ========== */
  .subscriptions-list {
    background-color: #2d2d2d !important;
  }
  
  .subscriptions-list-item {
    border-bottom-color: #333 !important;
  }
  
  .subscriptions-list-item:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== CONTRIBUTIONS PAGE ========== */
  .contributions-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .contributions-nav {
    background-color: #2d2d2d !important;
  }
  
  .contributions-nav a {
    color: #4db8ff !important;
  }
  
  .contributions-nav a.active {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
  }
  
  /* ========== USER PROFILE ========== */
  .profile-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .profile-card {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .profile-info {
    color: #e0e0e0 !important;
  }
  
  .profile-stats {
    background-color: #242424 !important;
  }
  
  .profile-stat-value {
    color: #ffffff !important;
  }
  
  /* ========== SEARCH RESULTS ========== */
  .search-results {
    background-color: #1a1a1a !important;
  }
  
  .search-result-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .search-result-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .search-result-title {
    color: #4db8ff !important;
  }
  
  .search-result-description {
    color: #b0b0b0 !important;
  }
  
  .search-result-breadcrumbs {
    color: #888 !important;
  }
  
  /* ========== ERROR PAGE ========== */
  .error-page {
    background-color: #1a1a1a !important;
  }
  
  .error-page h1,
  .error-page h2 {
    color: #ffffff !important;
  }
  
  /* ========== COLLAPSIBLE SIDEBAR ========== */
  .collapsible-sidebar {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .collapsible-sidebar-toggle {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
  }
  
  .collapsible-sidebar-toggle:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== ATTACHMENTS ========== */
  .attachment-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .attachment-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .attachment-icon {
    color: #b0b0b0 !important;
  }
  
  /* ========== NESTY PANELS (Dropdown search) ========== */
  .nesty-panel {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .nesty-panel li {
    color: #e0e0e0 !important;
  }
  
  .nesty-panel li:hover {
    background-color: #3a3a3a !important;
  }
  
  .nesty-panel li.kb-match {
    background-color: #3d3d2d !important;
  }
  
  .nesty-panel li.kb-focused {
    background-color: #4d4d2d !important;
    outline-color: #d4a574 !important;
  }
  
  /* ========== CONTAINER DIVIDERS ========== */
  .container-divider {
    border-top-color: #333 !important;
  }
  
  /* ========== SHADOWS ========== */
  .shadow,
  .box-shadow,
  [class*="shadow"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* ========== SPECIAL OVERRIDES FOR INLINE STYLES ========== */
  
  /* White text on colored backgrounds needs special handling */
  .article-body div[style*="color: white"],
  .article-body div[style*="color:#fff"],
  .article-body div[style*="color: #fff"],
  .article-body h1[style*="color: white"],
  .article-body h2[style*="color: white"],
  .article-body h3[style*="color: white"],
  .article-body h4[style*="color: white"],
  .article-body p[style*="color: white"] {
    color: #ffffff !important;
  }
  
  /* Preserve white backgrounds that are intentional */
  .article-body div[style*="background: white"],
  .article-body div[style*="background:#fff"],
  .article-body div[style*="background: #fff"] {
    background-color: #2d2d2d !important;
  }
  
  /* Border colors */
  .article-body div[style*="border"],
  .article-body table[style*="border"] {
    border-color: #454545 !important;
  }
  
  /* ========== IMAGES ========== */
  
  /* Reduce brightness for images in dark mode */
  .article-body img {
    opacity: 0.9;
  }
  
  /* Keep logos and icons at full brightness */
  .logo img,
  .icon img,
  .avatar img {
    opacity: 1 !important;
  }
  
  /* ========== ACCESSIBILITY ========== */
  
  /* Focus indicators */
  *:focus {
    outline-color: #4db8ff !important;
  }
  
  /* Selection highlight */
  ::selection {
    background-color: #4db8ff !important;
    color: #ffffff !important;
  }
  
  ::-moz-selection {
    background-color: #4db8ff !important;
    color: #ffffff !important;
  }
  
  /* ========== SCROLLBARS (Webkit browsers) ========== */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #454545;
    border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555555;
  }
  
  /* ========== PRINT STYLES (Revert to light mode for printing) ========== */
  @media print {
    body,
    .container,
    .article-body {
      background-color: white !important;
      color: black !important;
    }
    
    a {
      color: #0066cc !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
      color: black !important;
    }
  }
  
}

/* ========== END DARK MODE ========== */

/* ========================================
   DARK MODE FIXES - Add after the main dark mode CSS
   Addresses: Article titles, header disconnect, profile page white bar
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: ARTICLE TITLE VISIBILITY ===== */
  /* Make sure article header has dark background so white title is visible */
  
  .article-header,
  .article .article-header {
    background-color: #1a1a1a !important;
  }
  
  /* Ensure article title is always visible */
  .article-title,
  .article .article-title,
  .article-header .article-title,
  h1.article-title {
    color: #ffffff !important;
    background-color: transparent !important;
  }
  
  /* Article header wrapper - ensure no light backgrounds */
  .article-header-wrapper,
  .article-info,
  header.article-header {
    background-color: #1a1a1a !important;
  }
  
  
  /* ===== FIX 2: HEADER BAR - SMOOTH TRANSITION ===== */
  /* Keep the teal header (brand color) but ensure smooth visual flow */
  
  /* Main header - keep teal but slightly darker for consistency */
  .header,
  header.header,
  .header-wrapper {
    background-color: #012251 !important; /* Ontario navy */
    border-bottom: 1px solid #1a1a1a !important;
  }
  
  /* Alternative: If you prefer all-black header, uncomment below and comment above */
  /*
  .header,
  header.header,
  .header-wrapper {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333 !important;
  }
  */
  
  /* Header inner elements */
  .header .container,
  .header-inner {
    background-color: transparent !important;
  }
  
  /* Navigation area directly under header */
  .sub-nav,
  .breadcrumbs-container,
  nav[aria-label="Current location"] {
    background-color: #1a1a1a !important;
    padding-top: 10px;
  }
  
  /* Remove any white gaps */
  body > header,
  body > .header {
    margin-bottom: 0 !important;
  }
  
  main,
  body > main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  
  /* ===== FIX 3: PROFILE PAGE WHITE BAR ===== */
  /* Fix the white bar behind Contributions/Following tabs */
  
  /* Activities header (the white bar area) */
  .my-activities-header,
  header.my-activities-header,
  .activities-header {
    background-color: #1a1a1a !important;
  }
  
  /* Profile navigation tabs */
  .profile-nav,
  .my-activities-nav,
  .activities-nav {
    background-color: #1a1a1a !important;
    border-bottom-color: #333 !important;
  }
  
  /* Individual tab items */
  .profile-nav a,
  .my-activities-nav a,
  .activities-nav a {
    background-color: transparent !important;
    color: #4db8ff !important;
    border-bottom: 2px solid transparent !important;
  }
  
  .profile-nav a:hover,
  .my-activities-nav a:hover,
  .activities-nav a:hover {
    background-color: #2d2d2d !important;
    border-bottom-color: #4db8ff !important;
  }
  
  .profile-nav a.active,
  .my-activities-nav a.active,
  .activities-nav a.active,
  .profile-nav a[aria-selected="true"],
  .my-activities-nav a[aria-selected="true"],
  .activities-nav a[aria-selected="true"] {
    color: #ffffff !important;
    border-bottom-color: #4db8ff !important;
    background-color: #2d2d2d !important;
  }
  
  /* Contributions page specific */
  .contributions-header,
  .subscriptions-header {
    background-color: #1a1a1a !important;
  }
  
  /* Remove any white backgrounds in profile area */
  .profile-header,
  .my-activities,
  .contributions,
  .subscriptions {
    background-color: #1a1a1a !important;
  }
  
  /* Profile page container */
  .profile-container,
  .my-activities-container {
    background-color: #1a1a1a !important;
  }
  
  
  /* ===== ADDITIONAL SAFETY FIXES ===== */
  /* Catch any other potential white backgrounds */
  
/* Ensure no white backgrounds anywhere */
section[class*="header"],
div[class*="header"]:not([class*="article-header"]):not(.header-inner) {
  background-color: #1a1a1a !important;
}
  
  /* Article container should be fully dark */
  .article-container,
  .article-wrapper {
    background-color: #1a1a1a !important;
  }
  
  /* Search container in header area */
  .search-container {
    background-color: transparent !important;
  }
  
  /* Ensure sidebar has no light backgrounds */
  .article-sidebar,
  aside.article-sidebar {
    background-color: #242424 !important;
  }
  
  /* Tab/nav lists should blend with dark background */
  nav ul,
  .nav-list,
  [role="navigation"] ul {
    background-color: transparent !important;
  }
  
  /* Fix any light-colored backgrounds on navigation items */
  nav li,
  .nav-item {
    background-color: transparent !important;
  }
  
  nav li:hover,
  .nav-item:hover {
    background-color: #2d2d2d !important;
  }
  
}

/* ========== END FIXES ========== */

/* ========================================
   DROPDOWN MENU FIXES - Add after previous fixes
   Addresses: Menu text contrast, black boxes, hover readability
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: DROPDOWN MENU TEXT VISIBILITY ===== */
  /* Make dropdown menu items clearly readable */
  
  /* Topics dropdown and all dropdown menus */
  .dropdown-menu,
  .nav-wrapper .dropdown-menu,
  [role="menu"],
  .menu-dropdown {
    background-color: #ffffff !important; /* Keep light background for readability */
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Dropdown menu items - DARK TEXT on LIGHT background */
  .dropdown-menu a,
  .nav-wrapper .dropdown-menu a,
  [role="menu"] a,
  [role="menuitem"],
  .dropdown-menu li,
  .menu-dropdown a {
    color: #333333 !important; /* Dark gray text for contrast */
    background-color: transparent !important;
  }
  
  /* Dropdown hover state - light gray background, keep dark text */
  .dropdown-menu a:hover,
  .nav-wrapper .dropdown-menu a:hover,
  [role="menu"] a:hover,
  [role="menuitem"]:hover,
  .dropdown-menu li:hover,
  .menu-dropdown a:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text on hover */
  }
  
  /* Active/selected dropdown items */
  .dropdown-menu a:active,
  .dropdown-menu a[aria-checked="true"],
  .dropdown-menu .active {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  
  /* ===== FIX 2: REMOVE BLACK BOXES AROUND DROPDOWNS ===== */
  /* Remove unwanted black backgrounds */
  
  /* Dropdown toggle buttons (Topics, Profile name) */
  .dropdown-toggle,
  .nav-wrapper .dropdown-toggle,
  button.dropdown-toggle {
    background-color: transparent !important;
  }
  
  /* Dropdown containers - no black boxes */
  .dropdown,
  .nav-wrapper .dropdown,
  nav .dropdown {
    background-color: transparent !important;
  }
  
  /* Remove any wrapper backgrounds */
  .dropdown-wrapper,
  .menu-wrapper {
    background-color: transparent !important;
  }
  
  
  /* ===== FIX 3: PROFILE DROPDOWN SPECIFIC ===== */
  /* Fix the user profile dropdown menu */
  
  /* Profile dropdown menu */
  .user-nav .dropdown-menu,
  [aria-labelledby*="user"],
  .profile-dropdown .dropdown-menu {
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  /* Profile menu items */
  .user-nav .dropdown-menu a,
  .profile-dropdown .dropdown-menu a {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  /* Profile menu hover - readable */
  .user-nav .dropdown-menu a:hover,
  .profile-dropdown .dropdown-menu a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== FIX 4: NAVIGATION ITEMS CONSISTENCY ===== */
  /* Make sure all top nav items look consistent */
  
  /* Top navigation links (Community, Topics, Submit a request) */
  .header .nav-link,
  .nav-wrapper .nav-link,
  header nav a {
    background-color: transparent !important;
  }
  
  /* Keep header text white/light for visibility on teal */
  .header a,
  .header button,
  .nav-wrapper a,
  .nav-wrapper button {
    color: #ffffff !important;
  }
  
  .header a:hover,
  .header button:hover,
  .nav-wrapper a:hover,
  .nav-wrapper button:hover {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 5: CHEVRON ICONS IN DROPDOWNS ===== */
  /* Ensure dropdown arrows are visible */
  
  .dropdown-toggle svg,
  .dropdown-chevron-icon,
  .chevron-icon {
    color: currentColor !important;
  }
  
  
  /* ===== FIX 6: MOBILE DROPDOWN MENUS ===== */
  /* Fix mobile navigation dropdowns */
  
  @media (max-width: 768px) {
    .menu-list-mobile .dropdown-menu,
    .mobile-nav .dropdown-menu {
      background-color: #ffffff !important;
    }
    
    .menu-list-mobile .dropdown-menu a,
    .mobile-nav .dropdown-menu a {
      color: #333333 !important;
    }
    
    .menu-list-mobile .dropdown-menu a:hover,
    .mobile-nav .dropdown-menu a:hover {
      background-color: #f5f5f5 !important;
      color: #000000 !important;
    }
  }
  
  
  /* ===== FIX 7: SEARCH DROPDOWN (if applicable) ===== */
  /* Fix search suggestions dropdown */
  
  .search-results-dropdown,
  .search-dropdown {
    background-color: #ffffff !important;
  }
  
  .search-results-dropdown a,
  .search-dropdown a {
    color: #333333 !important;
  }
  
  .search-results-dropdown a:hover,
  .search-dropdown a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== FIX 8: ENSURE DROPDOWN POSITIONING ===== */
  /* Make sure dropdowns appear correctly */
  
  .dropdown-menu {
    position: absolute !important;
    z-index: 1000 !important;
  }
  
  /* Remove any dark overlays */
  .dropdown-backdrop,
  .dropdown-overlay {
    display: none !important;
  }
  
}

/* ========== END DROPDOWN FIXES ========== */

/* ========================================
   CUSTOM TOPICS DROPDOWN FIXES - Add after previous dropdown fixes
   Targets the .cat-dropdown custom menu structure
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: REMOVE BLACK BACKGROUND FROM TOPICS BUTTON ===== */
  
  /* Topics button - should be transparent like other nav items */
  .cat-dropdown-btn,
  button.cat-dropdown-btn {
    background-color: transparent !important;
    color: #ffffff !important; /* White text to match other header items */
    border: none !important;
  }
  
  /* Topics button hover */
  .cat-dropdown-btn:hover,
  button.cat-dropdown-btn:hover {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }
  
  /* Topics dropdown container */
  .cat-dropdown {
    background-color: transparent !important;
  }
  
  
  /* ===== FIX 2: MAKE DROPDOWN MENU ITEMS VISIBLE ===== */
  
  /* Topics dropdown content - LIGHT background for readability */
  .cat-dropdown-content,
  .cat-dropdown-content.show {
    background-color: #ffffff !important; /* White background */
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Topics dropdown links - DARK text, always visible */
  .cat-dropdown-content a,
  .cat-dropdown-content.show a {
    color: #333333 !important; /* Dark gray text - always visible */
    background-color: transparent !important;
    display: block !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    opacity: 1 !important; /* Ensure links are always visible */
    visibility: visible !important;
  }
  
  
  /* ===== FIX 3: READABLE HOVER STATES ===== */
  
  /* Topics dropdown hover - LIGHT gray with DARK text */
  .cat-dropdown-content a:hover,
  .cat-dropdown-content.show a:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text for maximum contrast */
    text-decoration: none !important;
  }
  
  /* Active/focus states */
  .cat-dropdown-content a:active,
  .cat-dropdown-content a:focus,
  .cat-dropdown-content.show a:active,
  .cat-dropdown-content.show a:focus {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  
  /* ===== FIX 4: ENSURE TEXT IS NEVER HIDDEN ===== */
  
  /* Override any opacity or visibility rules */
  .cat-dropdown-content a,
  .cat-dropdown-content a span,
  .cat-dropdown-content a *,
  .cat-dropdown-content.show a,
  .cat-dropdown-content.show a span,
  .cat-dropdown-content.show a * {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
  }
  
  /* Ensure no color: transparent or similar issues */
  .cat-dropdown-content {
    color: #333333 !important;
  }
  
  
  /* ===== FIX 5: DROPDOWN POSITIONING & DISPLAY ===== */
  
  /* Make sure dropdown appears correctly */
  .cat-dropdown-content {
    position: absolute !important;
    z-index: 1000 !important;
    min-width: 200px !important;
  }
  
  /* Show dropdown when open */
  .cat-dropdown-content.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== FIX 6: CONSISTENCY WITH OTHER NAV ITEMS ===== */
  
  /* Make sure Topics button looks like other nav items */
  .header .cat-dropdown-btn,
  .nav-wrapper .cat-dropdown-btn {
    font-weight: normal !important;
    font-size: inherit !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
  }
  
  /* Chevron icon in Topics button */
  .cat-dropdown-btn svg,
  .cat-dropdown-btn .dropdown-chevron-icon {
    color: #ffffff !important; /* White to match button text */
  }
  
  .cat-dropdown-btn:hover svg,
  .cat-dropdown-btn:hover .dropdown-chevron-icon {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 7: MOBILE RESPONSIVENESS ===== */
  
  @media (max-width: 768px) {
    .cat-dropdown-content {
      width: 100% !important;
      left: 0 !important;
      right: 0 !important;
    }
    
    .cat-dropdown-content a {
      padding: 12px 16px !important;
      font-size: 14px !important;
    }
  }
  
}

/* ========== END CUSTOM TOPICS DROPDOWN FIXES ========== */

/* ========================================
   USER PROFILE DROPDOWN FIX v2 - PRECISE TARGETING
   Targets a[role="menuitem"] in profile dropdown
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX: TARGET MENU ITEMS BY ROLE ATTRIBUTE ===== */
  
  /* All menu items with role="menuitem" in dropdown */
  a[role="menuitem"],
  [role="menuitem"] {
    color: #333333 !important; /* Dark gray text - ALWAYS visible */
    background-color: transparent !important;
    display: block !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    opacity: 1 !important; /* Force visibility */
    visibility: visible !important; /* Force visibility */
  }
  
  /* Hover state for menuitem links */
  a[role="menuitem"]:hover,
  [role="menuitem"]:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text for contrast */
    text-decoration: none !important;
  }
  
  /* Focus state for accessibility */
  a[role="menuitem"]:focus,
  [role="menuitem"]:focus {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
    outline: 2px solid #0066cc !important;
  }
  
  
  /* ===== TARGET SPECIFIC MENU ITEMS ===== */
  
  /* Profile link */
  a[role="menuitem"][href*="/profiles/"],
  a[role="menuitem"][href*="profiles"] {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Requests link */
  a[role="menuitem"][href*="/requests"],
  a[role="menuitem"].requests-link,
  .requests-link {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Activities link */
  a[role="menuitem"][href*="/contributions"],
  a[role="menuitem"][href*="contributions/posts"] {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== ENSURE PARENT DROPDOWN IS LIGHT ===== */
  
  /* Target dropdown menu containing role="menuitem" items */
  .dropdown-menu:has(a[role="menuitem"]),
  [role="menu"]:has(a[role="menuitem"]),
  div:has(> a[role="menuitem"]) {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Fallback for browsers that don't support :has() */
  .dropdown-menu,
  [role="menu"] {
    background-color: #ffffff !important;
  }
  
  
  /* ===== FORCE ALL TEXT CONTENT TO BE VISIBLE ===== */
  
  /* Ensure all text within menuitem links is visible */
  a[role="menuitem"] *,
  [role="menuitem"] * {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Override any potential color: transparent or white */
  a[role="menuitem"],
  a[role="menuitem"]:link,
  a[role="menuitem"]:visited {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
  }
  
  /* Hover override */
  a[role="menuitem"]:hover,
  a[role="menuitem"]:hover * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }
  
  
  /* ===== REMOVE ANY HIDING MECHANISMS ===== */
  
  /* Remove display: none or visibility: hidden */
  a[role="menuitem"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }
  
  /* Ensure no clip-path or clip hiding */
  a[role="menuitem"],
  [role="menuitem"] {
    clip-path: none !important;
    clip: auto !important;
  }
  
  
  /* ===== DROPDOWN POSITIONING ===== */
  
  /* Ensure dropdown menu is visible and positioned correctly */
  .dropdown-menu:has(a[role="menuitem"]) {
    position: absolute !important;
    z-index: 1000 !important;
    min-width: 160px !important;
    display: block !important;
  }
  
  /* When dropdown is shown */
  .dropdown-menu.show,
  .dropdown-menu[style*="display: block"] {
    background-color: #ffffff !important;
  }
  
  
  /* ===== SPECIFICITY OVERRIDES ===== */
  
  /* Maximum specificity for stubborn styles */
  .header a[role="menuitem"],
  .nav-wrapper a[role="menuitem"],
  header a[role="menuitem"],
  nav a[role="menuitem"] {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  .header a[role="menuitem"]:hover,
  .nav-wrapper a[role="menuitem"]:hover,
  header a[role="menuitem"]:hover,
  nav a[role="menuitem"]:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  /* Target within any dropdown container */
  .dropdown a[role="menuitem"],
  [class*="dropdown"] a[role="menuitem"] {
    color: #333333 !important;
  }
  
  .dropdown a[role="menuitem"]:hover,
  [class*="dropdown"] a[role="menuitem"]:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== MOBILE RESPONSIVE ===== */
  
  @media (max-width: 768px) {
    a[role="menuitem"] {
      padding: 12px 16px !important;
      font-size: 14px !important;
    }
  }
  
}

/* ========== END USER PROFILE DROPDOWN FIX v2 ========== */

/* ========================================
   ADDITIONAL DARK MODE FIXES - Round 6
   Add after all previous dark mode CSS
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: PROFILE PAGE ACTIVITY TEXT ===== */
  /* Make activity/contribution text more visible */
  
  .profile-contribution-body,
  .profile-activity-body,
  .activity-body {
    color: #e0e0e0 !important; /* Light grey for readability */
  }
  
  /* Profile contribution items */
  .profile-contribution,
  .profile-activity-item {
    color: #e0e0e0 !important;
  }
  
  /* Any paragraphs in profile sections */
  .profile-section p,
  .activity-section p {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 2: PROFILE DROPDOWN - REMOVE ALWAYS-VISIBLE BUG ===== */
  /* Fix the dropdown that stays open all the time */
  
  /* CRITICAL: Remove the display: block that was forcing it to always show */
  .dropdown-menu:has(a[role="menuitem"]) {
    display: none !important; /* Hidden by default */
  }
  
  /* ONLY show when it has the .show class */
  .dropdown-menu.show:has(a[role="menuitem"]),
  .dropdown-menu[aria-expanded="true"]:has(a[role="menuitem"]) {
    display: block !important; /* Only visible when open */
  }
  
  /* Alternative targeting for the specific dropdown */
  div[role="menu"].dropdown-menu {
    display: none !important; /* Hidden by default */
  }
  
  div[role="menu"].dropdown-menu.show,
  div[role="menu"].dropdown-menu[aria-expanded="true"] {
    display: block !important; /* Only visible when open */
  }
  
  
  /* ===== FIX 3: MY REQUESTS PAGE - SORTABLE COLUMN HEADERS ===== */
  /* Make "Created" and "Last activity" headers more visible */
  
  /* Sortable column headers */
  .requests-link,
  a.requests-link {
    color: #4db8ff !important; /* Bright blue for visibility */
  }
  
  .requests-link:hover,
  a.requests-link:hover {
    color: #6ec6ff !important; /* Lighter blue on hover */
  }
  
  /* Sort symbol (arrow) */
  .requests-sort-symbol {
    color: #4db8ff !important;
  }
  
  /* Table headers in requests page */
  .requests-table th a {
    color: #4db8ff !important;
  }
  
  
  /* ===== FIX 4: FORM EMAIL PILLS - TEXT VISIBILITY ===== */
  /* Make entered email addresses readable */
  
  /* Email pill container */
  li[data-hc-pill="true"],
  [data-hc-pill="true"] {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
  }
  
  /* Email text inside pill */
  li[data-hc-pill="true"] span,
  [data-hc-pill="true"] span {
    color: #ffffff !important; /* White text */
  }
  
  /* Pills container */
  ul[data-hc-pills-container="true"],
  [data-hc-pills-container="true"] {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  /* Input field inside pills */
  ul[data-hc-pills-container] input[type="text"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: none !important;
  }
  
  
  /* ===== FIX 5: FORM DESCRIPTION TEXT - HINTS AND LABELS ===== */
  /* Make all form helper text more visible */
  
  /* Hint text (paragraphs with *_hint id) */
  p[id*="_hint"],
  .hint,
  .form-hint,
  .field-hint {
    color: #b0b0b0 !important; /* Light grey for helper text */
  }
  
  /* Form labels */
  .form-field label,
  label {
    color: #e0e0e0 !important; /* Bright for labels */
  }
  
  /* Required field indicators */
  .required,
  abbr[title="required"] {
    color: #ff6b6b !important;
  }
  
  /* Form descriptions and instructions */
  .form-description,
  .field-description,
  .form-instructions {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== FIX 6: DROPDOWN MENU SELECTIONS (NESTY) ===== */
  /* Make dropdown options visible before hover */
  
  /* Nesty input (dropdown trigger) */
  .nesty-input,
  a.nesty-input {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .nesty-input:hover,
  a.nesty-input:hover {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
  }
  
  /* Nesty panel (dropdown menu) */
  .nesty-panel {
    background-color: #ffffff !important; /* Light background for readability */
    border-color: #ddd !important;
  }
  
  /* Nesty options - ALWAYS VISIBLE */
  .nesty-panel li,
  .nesty-panel a,
  .nesty-panel div {
    color: #333333 !important; /* Dark text on light background */
    background-color: transparent !important;
  }
  
  /* Nesty hover state */
  .nesty-panel li:hover,
  .nesty-panel a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  /* Nesty focused/selected item */
  .nesty-panel li.kb-focused,
  .nesty-panel li[aria-selected="true"] {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  /* Ensure nesty items are visible */
  .nesty-panel li,
  .nesty-panel div {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== ADDITIONAL FORM FIXES ===== */
  /* Catch any other form elements that might be hard to read */
  
  /* All form inputs */
  .request-form input:not([type="checkbox"]):not([type="radio"]),
  .request-form textarea,
  .request-form select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  /* Form input focus state */
  .request-form input:focus,
  .request-form textarea:focus,
  .request-form select:focus {
    background-color: #333333 !important;
    border-color: #4db8ff !important;
  }
  
  /* Placeholder text */
  .request-form input::placeholder,
  .request-form textarea::placeholder {
    color: #888 !important;
  }
  
  /* Form field wrappers */
  .form-field {
    background-color: transparent !important;
  }
  
  /* Error messages */
  .error-message,
  .field-error,
  [id*="_error"] {
    color: #ff6b6b !important;
  }
  
  
  /* ===== PROFILE PAGE ADDITIONAL FIXES ===== */
  /* Ensure all profile text is readable */
  
  /* Activity items */
  .activity-item,
  .contribution-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .activity-item:hover,
  .contribution-item:hover {
    background-color: #3a3a3a !important;
  }
  
  /* Activity timestamps */
  .activity-timestamp,
  .contribution-timestamp {
    color: #b0b0b0 !important;
  }
  
  /* Activity titles/links */
  .activity-title,
  .contribution-title {
    color: #4db8ff !important;
  }
  
  
  /* ===== TABLE IMPROVEMENTS ===== */
  /* Improve all table headers that might be links */
  
  /* Table header links */
  th a,
  thead a {
    color: #4db8ff !important;
  }
  
  th a:hover,
  thead a:hover {
    color: #6ec6ff !important;
  }
  
  
  /* ===== SEPARATOR VISIBILITY ===== */
  /* Make dropdown separators visible */
  
  .separator[role="separator"],
  .dropdown-menu .separator {
    border-top: 1px solid #ddd !important;
    margin: 5px 0 !important;
  }
  
}

/* ========== END ROUND 6 FIXES ========== */


/* ========================================
   ADDITIONAL DARK MODE FIXES - Round 7
   Add after Round 6 fixes
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: PROFILE DROPDOWN - MAKE IT WORK AGAIN ===== */
  /* Fix the dropdown so it opens when clicked */
  
  /* REVERT the display: none from Round 6 - it broke the dropdown */
  /* Instead, rely on Zendesk's JavaScript to manage visibility */
  
  /* Remove the forced display: none */
  .dropdown-menu:has(a[role="menuitem"]) {
    display: none; /* Not !important - allow JS to override */
  }
  
  /* Show when aria-expanded is true OR when .show class is present */
  .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
  .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu,
  button[aria-expanded="true"] + .dropdown-menu,
  button[aria-expanded="true"] ~ .dropdown-menu {
    display: block !important;
  }
  
  /* Also show when .show class is present */
  .dropdown-menu.show {
    display: block !important;
  }
  
  /* User dropdown specific - using the button ID pattern */
  .user-info.dropdown .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
  .user-info.dropdown button[aria-expanded="true"] + .dropdown-menu {
    display: block !important;
  }
  
  /* Ensure dropdown menu stays light with dark text */
  .user-info .dropdown-menu {
    background-color: #ffffff !important;
  }
  
  
  /* ===== FIX 2: PROFILE ACTIVITY TEXT - STRONGER SELECTORS ===== */
  /* Make profile contribution body text more visible */
  
  /* Target the specific profile contribution structure */
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution .profile-contribution-body,
  p.profile-contribution-body {
    color: #e0e0e0 !important; /* Light grey for readability */
    background-color: transparent !important;
  }
  
  /* All text content within profile contributions */
  .profile-activity-contribution,
  .profile-contribution {
    color: #e0e0e0 !important;
  }
  
  /* Profile contribution headers */
  .profile-contribution-header {
    background-color: transparent !important;
  }
  
  /* Profile contribution title */
  .profile-contribution-title {
    color: #ffffff !important;
  }
  
  .profile-contribution-title a {
    color: #4db8ff !important;
  }
  
  /* Profile contribution breadcrumbs */
  .profile-contribution-breadcrumbs {
    color: #b0b0b0 !important;
  }
  
  .profile-contribution-breadcrumbs a {
    color: #4db8ff !important;
  }
  
  /* Meta data in contributions */
  .profile-contribution .meta-data,
  .profile-activity-contribution .meta-data {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== FIX 3: EMAIL SIGNATURES IN COMMENTS ===== */
  /* Override inline styles in email signatures to make them readable */
  
  /* Target comment body section */
  .comment-body,
  section.comment-body {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }
  
  /* Override all inline color styles in comments */
  .comment-body *[style*="color"],
  .zd-comment *[style*="color"],
  .zd-comment-pre-styled *[style*="color"] {
    color: #e0e0e0 !important; /* Override ALL inline colors */
  }
  
  /* Override inline background colors in comments */
  .comment-body *[style*="background"],
  .zd-comment *[style*="background"],
  .zd-comment-pre-styled *[style*="background"] {
    background-color: transparent !important;
  }
  
  /* Specific targeting for email signature tables */
  .comment-body table,
  .comment-body table[style],
  .zd-comment table,
  .zd-comment table[style] {
    background-color: transparent !important;
    border-color: #454545 !important;
  }
  
  .comment-body table td,
  .comment-body table td[style],
  .comment-body table span,
  .comment-body table span[style],
  .zd-comment table td,
  .zd-comment table td[style],
  .zd-comment table span,
  .zd-comment table span[style] {
    color: #e0e0e0 !important; /* Force light color */
    background-color: transparent !important;
  }
  
  /* Email signature paragraphs */
  .comment-body p,
  .comment-body p[style],
  .zd-comment p,
  .zd-comment p[style] {
    color: #e0e0e0 !important;
  }
  
  /* Links in comments should be visible */
  .comment-body a,
  .zd-comment a {
    color: #4db8ff !important;
  }
  
  .comment-body a:hover,
  .zd-comment a:hover {
    color: #6ec6ff !important;
  }
  
  /* Bold text in signatures */
  .comment-body b,
  .comment-body strong,
  .zd-comment b,
  .zd-comment strong {
    color: #ffffff !important;
  }
  
  /* Divs with inline styles in comments */
  .comment-body div[style],
  .zd-comment div[style],
  .zd-comment-pre-styled div[style] {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }
  
  /* Override color: black specifically (common in email signatures) */
  .comment-body *[style*="color: black"],
  .comment-body *[style*="color:black"],
  .comment-body *[style*="color:#000"],
  .zd-comment *[style*="color: black"],
  .zd-comment *[style*="color:black"],
  .zd-comment *[style*="color:#000"] {
    color: #e0e0e0 !important;
  }
  
  /* Override color: currentcolor (common in links) */
  .comment-body *[style*="color: currentcolor"],
  .comment-body *[style*="color:currentcolor"],
  .zd-comment *[style*="color: currentcolor"],
  .zd-comment *[style*="color:currentcolor"] {
    color: #4db8ff !important;
  }
  
  /* Override specific RGB colors that might be too dark */
  .comment-body *[style*="color: rgb"],
  .zd-comment *[style*="color: rgb"] {
    color: #e0e0e0 !important;
  }
  
  /* Comment container background */
  .comment {
    background-color: #242424 !important;
    border-color: #454545 !important;
  }
  
  .comment:hover {
    background-color: #2d2d2d !important;
  }
  
  /* Comment info section */
  .comment-info {
    border-bottom-color: #454545 !important;
  }
  
  /* Comment author name */
  .comment-author a {
    color: #4db8ff !important;
  }
  
  /* Comment meta data */
  .comment-meta .meta-data {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== ADDITIONAL SAFETY OVERRIDES ===== */
  /* Catch any other potential inline style issues */
  
  /* Override white text on white background */
  .comment-body *[style*="color: white"],
  .comment-body *[style*="color:#fff"],
  .comment-body *[style*="color: #fff"],
  .zd-comment *[style*="color: white"],
  .zd-comment *[style*="color:#fff"],
  .zd-comment *[style*="color: #fff"] {
    color: #ffffff !important; /* Keep white text white */
  }
  
  /* Force visibility of all comment content */
  .comment-body *,
  .zd-comment * {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Remove any potential hiding mechanisms */
  .comment-body,
  .zd-comment {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
}

/* ========== END ROUND 7 FIXES ========== */

/* ========================================
   PROFILE ACTIVITY TEXT FIX - Round 8
   Add after Round 6 and Round 7
   Dark text for white activity boxes
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== PROFILE ACTIVITY BOXES - WHITE BACKGROUND ===== */
  /* These boxes have white backgrounds, so text needs to be DARK */
  
  /* Profile contribution container - ensure white background */
  .profile-activity-contribution,
  .profile-contribution {
    background-color: #ffffff !important; /* White boxes */
    border: 1px solid #ddd !important;
  }
  
  /* Profile contribution body text - DARK on WHITE */
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution .profile-contribution-body,
  p.profile-contribution-body {
    color: #333333 !important; /* Dark grey for readability on white */
    background-color: transparent !important;
  }
  
  /* Profile contribution header - white background */
  .profile-contribution-header {
    background-color: #ffffff !important;
  }
  
  /* Profile contribution title - dark on white */
  .profile-contribution-title {
    color: #1a1a1a !important;
  }
  
  /* Profile contribution title links - blue */
  .profile-contribution-title a {
    color: #0066cc !important;
  }
  
  .profile-contribution-title a:hover {
    color: #0A52A2 !important;
  }
  
  /* Profile contribution breadcrumbs - dark on white */
  .profile-contribution-breadcrumbs {
    color: #666666 !important;
  }
  
  .profile-contribution-breadcrumbs a {
    color: #0066cc !important;
  }
  
  /* Meta data in contributions - medium grey on white */
  .profile-contribution .meta-data,
  .profile-activity-contribution .meta-data {
    color: #666666 !important;
  }
  
  /* Meta group container */
  .profile-contribution .meta-group,
  .profile-activity-contribution .meta-group {
    background-color: transparent !important;
  }
  
  
  /* ===== PROFILE ACTIVITY HEADER (OUTSIDE BOXES) ===== */
  /* This is the dark area with "Tom S created an article" */
  
  .profile-activity-header {
    background-color: transparent !important;
  }
  
  .profile-activity-description {
    color: #e0e0e0 !important; /* Light text on dark background */
  }
  
  .profile-activity-description span {
    color: #ffffff !important;
  }
  
  
  /* ===== PROFILE SECTION HEADERS ===== */
  /* "Activity overview" heading area */
  
  .profile-section-header {
    background-color: transparent !important;
  }
  
  .profile-section-title {
    color: #ffffff !important;
  }
  
  .profile-section-description {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== PROFILE ACTIVITY LIST ===== */
  /* The container for all activities */
  
  .profile-activity-list {
    background-color: transparent !important;
  }
  
  .profile-activity-list li {
    background-color: transparent !important;
  }
  
  /* Profile activity item (the whole item with icon and box) */
  .profile-activity {
    background-color: transparent !important;
  }
  
  /* Profile activity icon */
  .profile-activity-icon {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-icon svg {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== ENSURE CONTRAST ===== */
  /* Make sure all text is readable */
  
  /* Any paragraph in the white contribution boxes */
  .profile-contribution p,
  .profile-activity-contribution p {
    color: #333333 !important;
  }
  
  /* Any div in the white contribution boxes */
  .profile-contribution div,
  .profile-activity-contribution div {
    color: inherit;
  }
  
  /* Strong/bold text in contributions */
  .profile-contribution strong,
  .profile-contribution b {
    color: #1a1a1a !important;
  }
  
}

/* ========== END ROUND 8 FIX ========== */

/* ============================================
   ESTIMATED READING TIME
   ============================================
   Displays reading time in article metadata
   Styled to match existing meta-data elements
*/

.reading-time {
  display: inline-flex;
  align-items: center;
  font-weight: 500; /* Slightly bolder to stand out */
}

.reading-time-icon svg {
  display: inline-block;
  opacity: 0.7;
}

/* Ensure reading time is visible in both light and dark modes */
.reading-time {
  color: inherit; /* Uses the same color as other meta-data */
}

/* Hover effect for better interactivity */
.reading-time:hover .reading-time-icon svg {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Mobile optimization - ensure icon scales properly */
@media (max-width: 768px) {
  .reading-time {
    font-size: inherit; /* Match parent font size */
  }
  
  .reading-time-icon svg {
    width: 11px;
    height: 11px;
  }
}

/* Print styles - include reading time in print but hide progress bar */
@media print {
  .reading-progress-bar {
    display: none;
  }
  
  .reading-time {
    display: inline-flex;
  }
}


/* ============================================
   OPTIONAL ENHANCEMENTS
   ============================================
   Uncomment these if you want additional features
*/

/* Animated pulse on page load to draw attention to progress bar */
/*
@keyframes progress-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.reading-progress-bar {
  animation: progress-pulse 2s ease-in-out 1;
}
*/

/* Alternative: Solid color progress bar (simpler look) */
/*
.reading-progress-bar {
  background: #0070B9; 
  background: var(--brand-color, #0070B9);
}

.reading-progress-bar::after {
  display: none;
}
*/

/* Alternative: Rounded edge on progress bar */
/*
.reading-progress-bar {
  border-radius: 0 0 4px 0;
}
*/
/* Hide Trending Topics section for Ontario MVP */
.other-guides {
  display: none !important;
}
/* ============================================
   ONTARIO THEME CUSTOMIZATIONS
   Add these rules to the END of your style.css
   ============================================ */

/* Hide Trending Topics section */
.other-guides {
  display: none !important;
}

/* Update progress bar gradient to Ontario colors */
.reading-progress-bar {
  background: linear-gradient(90deg, #050A51, #1F94D3) !important;
}

/* Update hero section gradient to Ontario colors */
.hero {
  background: linear-gradient(135deg, #050A51 0%, #1F94D3 100%) !important;
}

/* Section header styling with Ontario gradient background */
.section-header,
.category-header,
section.section h3 {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 20px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

.section-header a,
.category-header a,
section.section h3 a {
  color: #FFFFFF !important;
}

.section-header a:hover,
.category-header a:hover,
section.section h3 a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
}

/* Section page headers (like "Getting Started" page) */
.section-page .section-header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 40px 20px;
  margin: -40px -20px 40px;
  border-radius: 0;
}

.section-page .section-title {
  color: #FFFFFF !important;
  font-size: 36px;
  margin: 0;
}

.section-page .section-description {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 10px;
}

/* Category page headers */
.category-page .category-header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 40px 20px;
  margin: -40px -20px 40px;
  border-radius: 0;
}

.category-page .category-title {
  color: #FFFFFF !important;
  font-size: 36px;
  margin: 0;
}

/* Ensure section cards have proper styling */
.section-tree .section {
  background-color: #414771;
  border: 1px solid rgba(90, 174, 253, 0.3);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.section-tree .section:hover {
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.15);
}

.section-tree .section h3 {
  margin: 0;
  border-radius: 8px 8px 0 0;
}

.section-tree .section ul {
  padding: 20px;
}

/* Dark mode adjustments for section headers */
@media (prefers-color-scheme: dark) {
  .section-tree .section {
    background-color: #242424;
    border-color: #454545;
  }
  
  .section-header,
  .category-header,
  section.section h3 {
    /* Keep gradient in dark mode - it looks good */
    background: #4991D6; /* gradient removed for Smith */
  }
}
/* Fix header bar to use Ontario colors */
.header {
  background-color: #012251 !important; /* Smith Midnight Blue */
}

/* Ensure nav items are white */
.header a,
.header .menu-button-mobile {
  color: #FFFFFF !important;
}

/* Header hover states */
.header a:hover,
.header a:focus {
  color: rgba(255, 255, 255, 0.9) !important;
}
/* ============================================
   ONTARIO HEADER FIXES - COMPLETE
   Replace your previous header CSS with this
   ============================================ */

/* Header background - full width */
.header {
  background-color: #012251 !important;
  padding: 0 !important;
}

/* Header inner - constrained width for content */
.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent !important;
}

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

/* Remove conflicting full-width CSS */
#global-header {
  width: 100% !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #012251 !important;
}

/* Logo positioning */
.logo {
  flex-shrink: 0;
}

/* Navigation wrapper */
.nav-wrapper-desktop {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: transparent !important;
}

.nav-wrapper-mobile {
  background-color: transparent !important;
}

/* User nav list */
.user-nav-list {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav links styling */
.user-nav-list a {
  color: #FFFFFF !important;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 14px;
}

.user-nav-list a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-decoration: none;
}

/* ============================================
   TOPICS DROPDOWN FIXES
   ============================================ */

/* Topics Dropdown Container */
.cat-dropdown {
  position: relative;
  display: inline-block;
}

/* Topics Button */
.cat-dropdown-btn {
  background-color: transparent;
  border: none;
  color: #FFFFFF !important;
  cursor: pointer;
  font-size: 14px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.2s ease;
}

.cat-dropdown-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* Dropdown chevron */
.cat-dropdown-btn .dropdown-chevron-icon {
  transition: transform 0.3s ease;
}

.cat-dropdown-btn[aria-expanded="true"] .dropdown-chevron-icon {
  transform: rotate(180deg);
}

/* Dropdown Content - FIXED CONTRAST */
.cat-dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFFFFF !important;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 4px;
  z-index: 1000;
  top: 100%;
  left: 0;
  margin-top: 5px;
  border: 1px solid #ddd;
}

.cat-dropdown-content.show {
  display: block;
}

/* Dropdown Links - FIXED CONTRAST */
.cat-dropdown-content a {
  color: #333333 !important; /* Dark text on white background */
  background-color: #FFFFFF !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background-color 0.2s ease;
  border: none !important;
}

.cat-dropdown-content a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important; /* Ontario blue on hover */
  text-decoration: none;
}

.cat-dropdown-content a:first-child {
  border-radius: 4px 4px 0 0;
}

.cat-dropdown-content a:last-child {
  border-radius: 0 0 4px 4px;
}

/* ============================================
   PROFILE DROPDOWN FIXES
   ============================================ */

/* User info dropdown button */
.user-info .dropdown-toggle {
  color: #FFFFFF !important;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info .dropdown-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.user-info .dropdown-toggle span {
  color: #FFFFFF !important;
}

.user-info .dropdown-toggle .dropdown-chevron-icon {
  stroke: #FFFFFF;
}

/* Profile dropdown menu - FIXED CONTRAST */
.user-info .dropdown-menu {
  background-color: #FFFFFF !important;
  border: 1px solid #ddd;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 4px;
  min-width: 180px;
  margin-top: 5px;
}

.user-info .dropdown-menu a {
  color: #333333 !important; /* Dark text on white background */
  background-color: #FFFFFF !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.user-info .dropdown-menu a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important; /* Ontario blue on hover */
  text-decoration: none;
}

.user-info .dropdown-menu .separator {
  height: 1px;
  background-color: #ddd;
  margin: 8px 0;
}

/* ============================================
   MOBILE MENU
   ============================================ */

.menu-list-mobile {
  background-color: #FFFFFF !important;
}

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

.menu-list-mobile-items .item a {
  color: #333333 !important;
  padding: 12px 20px;
  display: block;
  text-decoration: none;
}

.menu-list-mobile-items .item a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important;
  text-decoration: none;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
  .header {
    background-color: #012251 !important; /* Keep Ontario blue in dark mode */
  }
  
  /* Dropdown menus stay white for contrast */
  .cat-dropdown-content,
  .user-info .dropdown-menu {
    background-color: #FFFFFF !important;
  }
  
  .cat-dropdown-content a,
  .user-info .dropdown-menu a {
    color: #333333 !important;
  }
}


/* ============================================
   PHOSPHOR ICONS CONFIGURATION
   ============================================ */

/* Base icon class */
.ph {
  font-family: 'Phosphor' !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bold variant */
.ph-bold {
  font-family: 'Phosphor-Bold' !important;
  font-weight: 700;
}

/* Fill variant */
.ph-fill {
  font-family: 'Phosphor-Fill' !important;
}

/* Icon sizing */
.ph-sm { font-size: 16px; }
.ph-md { font-size: 20px; }
.ph-lg { font-size: 24px; }
.ph-xl { font-size: 32px; }


/* ============================================
   ONTARIO HERO BACKGROUNDS - CATALYST INSPIRED
   Pick ONE option by uncommenting it
   ============================================ */

/* ============================================
   OPTION 1: DIAGONAL LINES (CATALYST STYLE)
   Most similar to Catalyst screenshot
   ============================================ */
/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

/* Animated diagonal light streaks */
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 80px,
    rgba(255, 255, 255, 0.04) 80px,
    rgba(255, 255, 255, 0.04) 160px
  );
  animation: diagonalSlide 40s linear infinite;
  pointer-events: none;
}

@keyframes diagonalSlide {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(160px) translateY(160px);
  }
}

/* Subtle glow accent */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(107, 195, 231, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Ensure logo stays on top */
.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

/* Make logo larger */
.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Responsive sizing */
@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/

/* ============================================
   OPTION 2: FLOWING DATA WAVES
   More dynamic wave movement
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.03) 100px,
      rgba(255, 255, 255, 0.03) 200px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 60px,
      rgba(255, 255, 255, 0.02) 60px,
      rgba(255, 255, 255, 0.02) 120px
    );
  animation: waveFlow 30s linear infinite;
  pointer-events: none;
}

@keyframes waveFlow {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(200px) translateY(-100px);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(57, 176, 225, 0.2) 0%, transparent 70%);
  animation: floatGlow 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatGlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(50px, -30px) scale(1.3);
    opacity: 0.6;
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/


/* ============================================
   OPTION 3: TECH GRID WITH LIGHT BEAMS
   Similar to Catalyst but with grid overlay
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -100%;
  right: -50%;
  width: 200%;
  height: 300%;
  background-image: 
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.03) 100px,
      rgba(255, 255, 255, 0.03) 102px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.02) 100px,
      rgba(255, 255, 255, 0.02) 102px
    );
  animation: gridSlide 50s linear infinite;
  pointer-events: none;
}

@keyframes gridSlide {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  100% {
    transform: translateX(100px) translateY(100px) rotate(2deg);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(57, 176, 225, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(18, 117, 191, 0.12) 0%, transparent 50%);
  animation: lightShift 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lightShift {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/


/* ============================================
   OPTION 4: SPEED LINES (FASTEST MOTION)
   High-energy streaking lines
   ============================================ */


.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: repeating-linear-gradient(
    -30deg,
    transparent,
    transparent 120px,
    rgba(255, 255, 255, 0.05) 120px,
    rgba(255, 255, 255, 0.05) 125px,
    transparent 125px,
    transparent 250px
  );
  animation: speedLines 25s linear infinite;
  pointer-events: none;
}

@keyframes speedLines {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(250px);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20%;
  width: 600px;
  height: 300px;
  background: linear-gradient(90deg, transparent 0%, rgba(107, 195, 231, 0.1) 50%, transparent 100%);
  transform: translateY(-50%) skewX(-15deg);
  animation: sweepLight 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sweepLight {
  0%, 100% {
    opacity: 0;
    transform: translateY(-50%) translateX(-100px) skewX(-15deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) translateX(100px) skewX(-15deg);
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}

/* ============================================
   ONTARIO COMMUNITY BANNER - FIXED
   No horizontal overflow + Inverted colors
   ============================================ */

/* Hide the default community-image div (Catalyst banner) */
.community-image {
  display: none !important;
}

/* Ensure no horizontal overflow from community section */
.home-section.community {
  text-align: center;
  background: #F5F7FA;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(10, 82, 162, 0.1);
  border: 2px solid #E5F4F9;
  max-width: 100%;
  box-sizing: border-box;
}

/* Subtle blue accent gradient on edges */
.home-section.community::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, rgba(10, 82, 162, 0.03) 0%, transparent 20%, transparent 80%, rgba(57, 176, 225, 0.03) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Decorative accent bar at top */
.home-section.community::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #050A51 0%, #0A52A2 50%, #1F94D3 100%);
  z-index: 0;
}

/* Community content styling */
.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

/* Call-to-action button - Blue gradient */
.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
  color: #FFFFFF !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .home-section.community {
    padding: 40px 20px;
    margin: 30px 0;
  }
  
  .home-section.community h2 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  
  .home-section.community p {
    font-size: 16px !important;
    padding: 0 10px 20px 10px !important;
  }
  
  .community-link {
    padding: 12px 24px;
    font-size: 15px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .home-section.community h2 {
    font-size: 28px;
  }
}

/* Fix any potential overflow from parent containers */
.container {
  max-width: 100%;
  overflow-x: hidden;
}


/* ============================================
   ALTERNATIVE: WHITE WITH BLUE ACCENTS
   Clean white card style
   ============================================ */

/*
.community-image {
  display: none !important;
}

.home-section.community {
  text-align: center;
  background: #FFFFFF;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(10, 82, 162, 0.12);
  border: 3px solid #050A51;
  max-width: 100%;
  box-sizing: border-box;
}

.home-section.community::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 6px;
  background: linear-gradient(90deg, #050A51 0%, #0A52A2 50%, #1F94D3 100%);
  z-index: 0;
}

.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}
*/


/* ============================================
   ALTERNATIVE: SUBTLE PATTERN BACKGROUND
   Light grey with dot pattern
   ============================================ */


.community-image {
  display: none !important;
}

.home-section.community {
  text-align: center;
  background: 
    radial-gradient(circle, rgba(10, 82, 162, 0.05) 1px, transparent 1px);
  background-color: #F8F9FA;
  background-size: 20px 20px;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(10, 82, 162, 0.08);
  border-top: 4px solid #050A51;
  border-bottom: 4px solid #1F94D3;
  max-width: 100%;
  box-sizing: border-box;
}

.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================
   ONTARIO - SECTION PAGE SPACING
   Adds space above article list on section pages
   ============================================ */

/* Add space above article list on section pages only */
.section-content > .article-list {
  margin-top: 40px;
}

/* Ensure cards align at top and have consistent heights */
.section-content .article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.section-content .article-list-item {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Keep homepage sections unaffected */
.knowledge-base .article-list {
  margin-top: 0;
}

/* ============================================
   ONTARIO SITE-WIDE ENHANCEMENTS (FINAL v2)
   Underline animation + Blue buttons + Colored hover backgrounds
   ============================================ */

/* ===== 1. SECTION ICONS (HOMEPAGE ONLY) ===== */

/* Icons now handled by Phosphor Icons in home_page.hbs template */
/* Emoji ::before content removed - white Phosphor icons display instead */

/* Getting Started - Now uses Phosphor ph-rocket-launch */
.knowledge-base .section a[href*="Getting-Started"]::before {
  content: '';
}

/* Project Management - Now uses Phosphor ph-kanban */
.knowledge-base .section a[href*="Project-Management"]::before {
  content: '';
}

/* Files and Folders - Now uses Phosphor ph-folder-open */
.knowledge-base .section a[href*="Files-and-Folders"]::before {
  content: '';
}

/* Tasks and Workflows - Now uses Phosphor ph-list-checks */
.knowledge-base .section a[href*="Tasks-and-Workflows"]::before {
  content: '';
}

/* User Management - Now uses Phosphor ph-users-three */
.knowledge-base .section a[href*="User-Management"]::before {
  content: '';
}

/* Notifications & Help - Now uses Phosphor ph-bell-ringing */
.knowledge-base .section a[href*="Notifications-Help"]::before {
  content: '';
}

/* NO ICONS IN BREADCRUMBS */
.breadcrumbs a::before {
  content: none !important;
}


/* ===== 2. HOMEPAGE CARD STRUCTURE WITH COLORED HOVER BACKGROUNDS ===== */

/* Section cards - white background */
.knowledge-base .section {
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  background: #414771;
  border: 1px solid rgba(90, 174, 253, 0.3);
}

/* Hover effect - lift, shadow, and colored background */
.knowledge-base .section:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(10, 82, 162, 0.15);
}

/* Unique hover background colors for each section */
.knowledge-base .section:nth-child(1):hover {
  background: rgba(10, 82, 162, 0.05); /* Getting Started - Very light deep blue */
}

.knowledge-base .section:nth-child(2):hover {
  background: rgba(18, 117, 191, 0.05); /* Project Management - Very light medium blue */
}

.knowledge-base .section:nth-child(3):hover {
  background: rgba(57, 176, 225, 0.05); /* Files and Folders - Very light light blue */
}

.knowledge-base .section:nth-child(4):hover {
  background: rgba(31, 148, 211, 0.05); /* Tasks and Workflows - Very light blue-500 */
}

.knowledge-base .section:nth-child(5):hover {
  background: rgba(7, 43, 125, 0.05); /* User Management - Very light blue-800 */
}

.knowledge-base .section:nth-child(6):hover {
  background: rgba(107, 195, 231, 0.05); /* Notifications & Help - Very light bright blue */
}

/* Section header hover effect */
.knowledge-base .section h3 {
  transition: background 0.3s ease;
}

.knowledge-base .section:hover h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
}


/* ===== 3. SECTION PAGE HEADER STYLING ===== */

/* Section page header bar */
.section-page header,
.category-page header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 30px 40px;
  margin-bottom: 40px;
  border-radius: 8px;
}

.section-page header h1,
.category-page header h1 {
  color: #FFFFFF !important;
  margin: 0;
  font-size: 32px;
}

/* Apply gradient variations to section page headers */
body[class*="section-42679658758925"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Getting Started */
}

body[class*="section-42679681047053"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Project Management */
}

body[class*="section-42679711032589"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Files and Folders */
}

body[class*="section-42679693922189"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Tasks and Workflows */
}

body[class*="section-42679736498573"] header {
  background: #4991D6; /* gradient removed for Smith */ /* User Management */
}

body[class*="section-42679701344781"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Notifications & Help */
}


/* ===== 4. HOMEPAGE SECTION HEADER GRADIENTS ===== */

/* Base gradient for all homepage section headers */
.knowledge-base .section h3 {
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF;
  padding: 20px;
  margin: 0;
  border-radius: 8px 8px 0 0;
}

/* Unique gradients for each homepage section */
.knowledge-base .section:nth-child(1) h3 {
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%); /* Getting Started */
}

.knowledge-base .section:nth-child(2) h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1275BF 100%); /* Project Management */
}

.knowledge-base .section:nth-child(3) h3 {
  background: linear-gradient(135deg, #1275BF 0%, #1F94D3 100%); /* Files and Folders */
}

.knowledge-base .section:nth-child(4) h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%); /* Tasks and Workflows */
}

.knowledge-base .section:nth-child(5) h3 {
  background: linear-gradient(135deg, #050A51 0%, #1275BF 100%); /* User Management */
}

.knowledge-base .section:nth-child(6) h3 {
  background: linear-gradient(135deg, #1F94D3 0%, #39B0E1 100%); /* Notifications & Help */
}


/* ===== 5. ARTICLE CARD HOVER EFFECTS (SECTION PAGES) ===== */

/* Article cards on section pages */
.section-content .article-list-item {
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 20px;
  background: #F8F9FA;
  border: 1px solid #E5E5E5;
}

.section-content .article-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.1);
  background: #FFFFFF;
  border-color: #0A52A2;
}


/* ===== 6. LINK STYLING - UNDERLINE ANIMATION ===== */

/* Article links with animated underline */
.article-list a,
.article-list-link {
  color: #1275BF;
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* Animated underline */
.article-list a::after,
.article-list-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.article-list a:hover::after,
.article-list-link:hover::after {
  width: 100%;
}

.article-list a:hover,
.article-list-link:hover {
  color: #0A52A2;
  text-decoration: none;
}

/* Homepage article links */
.knowledge-base .section .article-list a {
  display: block;
  padding: 8px 0;
}


/* ===== 7. BREADCRUMB STYLING ===== */

/* Clean breadcrumbs */
.breadcrumbs {
  margin-bottom: 20px;
  font-size: 14px;
}

.breadcrumbs a {
  color: #1275BF;
  position: relative;
  text-decoration: none;
}

/* Animated underline for breadcrumbs */
.breadcrumbs a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.breadcrumbs a:hover::after {
  width: 100%;
}

.breadcrumbs a:hover {
  color: #0A52A2;
}


/* ===== 8. READ MORE BUTTONS - PRIMARY BLUE ===== */

/* Primary blue button with hover effect */
.article-read-more {
  display: inline-block;
  background-color: #050A51; /* Primary deep blue */
  color: #FFFFFF !important;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: 10px;
  border: none;
}

.article-read-more:hover {
  background-color: #0A52A2; /* Lighter blue on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5, 10, 81, 0.3);
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* "See all articles" link */
.see-all-articles {
  color: #0A52A2;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  display: inline-block;
}

/* Animated underline for see all link */
.see-all-articles::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.see-all-articles:hover::after {
  width: 100%;
}

.see-all-articles:hover {
  color: #050A51;
  text-decoration: none;
}


/* ===== 9. HOMEPAGE SECTION CONTENT STRUCTURE ===== */

/* Homepage section content area */
.knowledge-base .section > div {
  padding: 20px;
}


/* ===== 10. RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  /* Smaller icons on mobile */
  .knowledge-base .section h3 a::before {
    font-size: 16px;
    margin-right: 6px;
  }
  
  /* Less dramatic hovers on mobile */
  .knowledge-base .section:hover {
    transform: translateY(-2px);
  }
  
  .section-content .article-list-item:hover {
    transform: translateY(-1px);
  }
  
  /* Smaller section page headers */
  .section-page header,
  .category-page header {
    padding: 20px;
  }
  
  .section-page header h1,
  .category-page header h1 {
    font-size: 24px;
  }
}


/* ============================================
   FINAL DESIGN FEATURES:
   
   ✅ Animated underline on all links
   ✅ Primary blue (#0A52A2) buttons
   ✅ Colored background on card hover (matches section color)
   ✅ Blue gradient headers (maintained)
   ✅ Icons on homepage sections
   ✅ Card lift + shadow hover effects
   ✅ Clean white cards (not blue overload)
   ✅ Each section has unique visual identity
   
   ⚠️  Dark mode support NOT included yet
   ============================================ */

/* ============================================
   ONTARIO HEADER ALIGNMENT & MOBILE MENU FIX
   Fixes misalignment and mobile breakpoint issues
   ============================================ */

/* ===== FIX 1: HEADER ALIGNMENT ===== */

/* Ensure header container matches Catalyst alignment */
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 71px !important;
}

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

/* Logo alignment */
.header .logo {
  display: flex;
  align-items: center;
  margin: 0;
}

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

/* Right side navigation alignment */
.header .nav-wrapper-desktop,
.header .nav-wrapper-mobile {
  display: flex;
  align-items: center;
  margin: 0;
}


/* ===== FIX 2: MOBILE MENU BREAKPOINT ===== */

/* Hide mobile menu on desktop (>= 1024px) */
@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none !important;
  }
}

/* Show mobile menu on tablet and mobile (< 1024px) */
@media (max-width: 1023px) {
  .nav-wrapper-desktop {
    display: none !important;
  }
  
  .nav-wrapper-mobile {
    display: inline-block !important;
  }
}

/* Proper mobile menu button styling */
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* Mobile menu dropdown positioning */
.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: 999;
  max-width: 100vw;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}


/* ===== FIX 3: DESKTOP NAVIGATION SPACING ===== */

/* Ensure desktop nav items have proper spacing */
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: flex !important;
    align-items: center;
    gap: 20px;
  }
  
  .nav-wrapper-desktop a,
  .nav-wrapper-desktop button,
  .nav-wrapper-desktop .dropdown {
    margin: 0 10px;
  }
}


/* ===== FIX 4: USER PROFILE ALIGNMENT ===== */

/* Fix user profile dropdown alignment */
.user-nav {
  display: inline-flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

/* Profile button */
.user-nav button,
.user-nav .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
}


/* ===== FIX 5: PREVENT HORIZONTAL OVERFLOW ===== */

/* Ensure nothing causes horizontal scroll */
html {
  overflow-x: hidden !important;
}

body {
  overflow-x: hidden !important;
}

.header,
.header * {
  max-width: 100%;
  box-sizing: border-box;
}


/* ===== FIX 6: TOPICS DROPDOWN ALIGNMENT ===== */

/* Fix Topics dropdown if present */
.header .dropdown {
  display: inline-flex;
  align-items: center;
}

.header .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent !important;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.header .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 200px;
  z-index: 1000;
}


/* ===== FIX 7: SUBMIT A REQUEST BUTTON ===== */

/* Ensure "Submit a request" is properly aligned */
.header a[href*="requests"],
.header a[href*="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  white-space: nowrap;
}


/* ===== FIX 8: RESPONSIVE HEADER ADJUSTMENTS ===== */

/* Tablet breakpoint adjustments */
@media (max-width: 1023px) {
  .header {
    padding: 0 20px !important;
  }
  
  /* Ensure logo doesn't get too small */
  .header .logo img {
    max-height: 32px;
  }
}

/* Mobile breakpoint adjustments */
@media (max-width: 768px) {
  .header {
    padding: 0 16px !important;
  }
  
  .header .logo img {
    max-height: 28px;
  }
}


/* ===== FIX 9: PREVENT ITEMS FROM SQUASHING ===== */

/* Ensure header items maintain minimum sizes */
.header .nav-wrapper-mobile {
  flex-shrink: 0;
  min-width: 71px;
}

.header .logo {
  flex-shrink: 0;
  min-width: 100px;
}

.header .user-nav {
  flex-shrink: 0;
}


/* ===== FIX 10: Z-INDEX MANAGEMENT ===== */

/* Proper z-index layering */
.header {
  position: relative;
  z-index: 100;
}

.nav-wrapper-mobile .menu-list-mobile {
  z-index: 999;
}

.header .dropdown-menu {
  z-index: 1000;
}


/* ============================================
   ONTARIO PROFILE DROPDOWN - SINGLE SELECTOR FIX
   ============================================ */

/* Ultra-specific selector to override everything */
.user-info.dropdown .dropdown-menu[role="menu"][id] {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !important;
  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 8px 0 !important;
  position: absolute !important;
  right: 0 !important;
  margin-top: 8px !important;
  min-width: 200px !important;
  z-index: 1000 !important;
}

/* Clean menu items */
.user-info.dropdown .dropdown-menu[role="menu"] a {
  display: block !important;
  padding: 10px 20px !important;
  color: #333333 !important;
  text-decoration: none !important;
  background: transparent !important;
}

.user-info.dropdown .dropdown-menu[role="menu"] a:hover {
  background-color: #f5f5f5 !important;
}

/* Separator */
.user-info.dropdown .dropdown-menu .separator {
  border-top: 1px solid #e5e5e5 !important;
  margin: 8px 0 !important;
}


/* ============================================
   ONTARIO DARK MODE FIXES
   Forms, Profile, Articles - NOT header
   ============================================ */


/* ================================================================================
   FORM DROPDOWN (NESTY-PANEL) HOVER STATES
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  .nesty-panel {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }
  
  .nesty-panel li {
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  .nesty-panel li a,
  .nesty-panel a {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  .nesty-panel li:hover,
  .nesty-panel li:focus,
  .nesty-panel li.is-selected,
  .nesty-panel li[aria-selected="true"] {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
  }
  
  .nesty-panel li:hover a,
  .nesty-panel li:focus a,
  .nesty-panel li.is-selected a {
    color: #000000 !important;
  }
  
  .nesty-panel li.is-current,
  .nesty-panel li.selected,
  .nesty-panel li[data-selected="true"] {
    background-color: #e3f2fd !important;
    color: #0066cc !important;
  }
  
  .nesty-input {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .nesty-input:focus {
    border-color: #4db8ff !important;
  }
  
  .nesty-input .nesty-current-value,
  .nesty-input span {
    color: #e0e0e0 !important;
  }
}


/* ================================================================================
   PROFILE PAGE ACTIVITY CARDS
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  .profile-activity-contribution {
    background-color: #2d3748 !important;
    border-radius: 8px;
    padding: 16px;
  }
  
  .profile-activity-contribution a,
  .profile-contribution-title a,
  .profile-activity-contribution .profile-contribution-title {
    color: #4db8ff !important;
  }
  
  .profile-activity-contribution a:hover {
    color: #6ec6ff !important;
  }
  
  .profile-activity-contribution .meta-data,
  .profile-activity-contribution .meta-group a {
    color: #f59e0b !important;
  }
  
  .profile-activity-contribution p,
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution-body {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-contribution span,
  .profile-activity-contribution div:not([class]) {
    color: #cbd5e1 !important;
  }
  
  .profile-activity-contribution .meta-group,
  .profile-activity-contribution .meta-data {
    color: #888888 !important;
  }
  
  .profile-contribution {
    border-color: #374151 !important;
  }
  
  .profile-contribution-title {
    color: #ffffff !important;
  }
  
  .profile-activity-description {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-description span:first-child {
    color: #ffffff !important;
  }
  
  .profile-activity-icon {
    background-color: #374151 !important;
  }
  
  .profile-header {
    background-color: #1f2937 !important;
  }
  
  .profile-header .name,
  .profile-header h1 {
    color: #4db8ff !important;
  }
  
  .profile-stats .stat-label {
    color: #9ca3af !important;
  }
  
  .profile-stats .stat-value,
  .profile-stats-activity .stat span:not(.stat-label),
  .profile-stats-counters .stat span:not(.stat-label) {
    color: #e0e0e0 !important;
  }
  
  .profile-nav {
    background-color: #111827 !important;
    border-bottom-color: #374151 !important;
  }
  
  .profile-nav a {
    color: #4db8ff !important;
  }
  
  .profile-nav a:hover,
  .profile-nav a.current {
    color: #ffffff !important;
    border-bottom-color: #4db8ff !important;
  }
  
  .profile-section h2,
  .activity-overview h2 {
    color: #ffffff !important;
  }
  
  .profile-section > p,
  .activity-overview > p {
    color: #9ca3af !important;
  }
  
  .profile-activity-description span:first-child,
  .profile-activity strong {
    color: #ffffff !important;
  }
  
  .profile-activity-description {
    color: #d1d5db !important;
  }
}


/* ================================================================================
   MOBILE RESPONSIVE - ARTICLE CONTENT CARDS
   ================================================================================  */

@media (max-width: 768px) {
  
  .article-body div[style*="display: flex"],
  zd-html-block div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  
  .article-body div[style*="min-width: 200px"],
  .article-body div[style*="min-width:200px"],
  zd-html-block div[style*="min-width: 200px"],
  zd-html-block div[style*="min-width:200px"] {
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }
  
  .article-body div[style*="flex: 1"],
  zd-html-block div[style*="flex: 1"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  
  .article-body zd-html-block,
  .article-body > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  
  .article-body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  
  .article-body div[style*="min-width: 200px"],
  zd-html-block div[style*="min-width: 200px"] {
    min-width: 45% !important;
    flex: 1 1 45% !important;
  }
}


/* ================================================================================
   ARTICLE DARK MODE - INLINE STYLES
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  /* Target gradient backgrounds */
  zd-html-block div[style*="gradient"][style*="135deg"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #234e78 100%) !important;
  }
  
  [style*="f0f9ff"],
  [style*="e0f2fe"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #234e78 100%) !important;
  }
  
  [style*="e3f2fd"] {
    background: #1e3a5f !important;
  }
  
  [style*="f8fafc"] {
    background: #1e293b !important;
  }
  
  [style*="border: 2px dashed"][style*="f8fafc"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
  }
  
  [style*="color: #0c4a6e"],
  [style*="color:#0c4a6e"] {
    color: #7dd3fc !important;
  }
  
  [style*="color: #475569"],
  [style*="color:#475569"] {
    color: #cbd5e1 !important;
  }
  
  [style*="color: #1e293b"],
  [style*="color:#1e293b"] {
    color: #f1f5f9 !important;
  }
  
  [style*="color: #64748b"],
  [style*="color:#64748b"] {
    color: #94a3b8 !important;
  }
  
  [style*="background: white"],
  [style*="background-color: white"],
  [style*="background:#fff"],
  [style*="background-color:#fff"] {
    background: #2d3748 !important;
  }
  
  [style*="border"][style*="#e2e8f0"],
  [style*="border"][style*="#e5e7eb"],
  [style*="border"][style*="#cbd5e1"] {
    border-color: #475569 !important;
  }
  
  zd-html-block p {
    color: #cbd5e1 !important;
  }
  
  zd-html-block li {
    color: #cbd5e1 !important;
  }
  
  zd-html-block h1,
  zd-html-block h2,
  zd-html-block h3,
  zd-html-block h4,
  zd-html-block h5,
  zd-html-block h6 {
    color: #f1f5f9 !important;
  }
  
  zd-html-block h3[style*="#0c4a6e"],
  zd-html-block h4[style*="#0c4a6e"] {
    color: #7dd3fc !important;
  }
}

/* Form submit button - make it distinct */
input[type="submit"],
.form input[type="submit"],
button[type="submit"] {
  background-color: #012251 !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

input[type="submit"]:hover,
.form input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: #0A52A2 !important;
}

/* Dark mode submit button */
@media (prefers-color-scheme: dark) {
  input[type="submit"],
  .form input[type="submit"],
  button[type="submit"] {
    background-color: #1F94D3 !important;
    color: #FFFFFF !important;
  }
  
  input[type="submit"]:hover,
  .form input[type="submit"]:hover,
  button[type="submit"]:hover {
    background-color: #39B0E1 !important;
  }
}

/* ================================================================================
   END OF DARK MODE FIXES - HEADER NOT INCLUDED
   ================================================================================  */

/* ============================================
   COMPLETE ARTICLE LIST SECTION
   Located on homepage below section cards
   ============================================ */

/* Main container */
.complete-article-list {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* ===== HERO BANNER ===== */
.article-list-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8c 50%, #4a7ab8 100%);
  border-radius: 16px;
  padding: 50px 40px;
  margin-bottom: 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Decorative circle */
.article-list-hero::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  top: -200px;
  right: -100px;
  pointer-events: none;
}

.article-list-hero-content {
  position: relative;
  z-index: 1;
}

.article-list-hero h2 {
  color: #FFFFFF;
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.article-list-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  margin: 0;
  font-weight: 400;
}

/* ===== SECTION GROUPS ===== */
.article-section-group {
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid #E5E5E5;
}

.article-section-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Section header with icon */
.article-section-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.section-icon-large {
  font-size: 36px;
  color: #0A52A2;
  flex-shrink: 0;
}

.article-section-header-text h3 {
  margin: 0 0 5px 0;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
}

.article-section-header-text p.section-description {
  margin: 0;
  font-size: 15px;
  color: #64748b;
  line-height: 1.5;
}

/* ===== ARTICLE GRID ===== */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

/* Article cards */
.article-card {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(10, 82, 162, 0.12);
  border-color: #0A52A2;
}

.article-card h4 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

.article-card:hover h4 {
  color: #0A52A2;
}

.article-card .article-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  flex-grow: 1;
}

.article-card .article-read-more {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #0A52A2;
  margin-top: auto;
}

.article-card:hover .article-read-more {
  gap: 10px;
}

.article-card .article-read-more i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.article-card:hover .article-read-more i {
  transform: translateX(4px);
}

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

/* Tablet */
@media (max-width: 1024px) {
  .article-list-hero {
    padding: 40px 30px;
  }
  
  .article-list-hero h2 {
    font-size: 32px;
  }
  
  .article-list-hero p {
    font-size: 16px;
  }
  
  .article-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  
  .article-section-header-text h3 {
    font-size: 22px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .complete-article-list {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .article-list-hero {
    padding: 30px 20px;
    margin-bottom: 35px;
  }
  
  .article-list-hero h2 {
    font-size: 26px;
  }
  
  .article-list-hero p {
    font-size: 15px;
  }
  
  .article-section-group {
    margin-bottom: 40px;
    padding-bottom: 30px;
  }
  
  .article-section-header {
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .section-icon-large {
    font-size: 28px;
  }
  
  .article-section-header-text h3 {
    font-size: 20px;
  }
  
  .article-section-header-text p.section-description {
    font-size: 14px;
  }
  
  .article-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .article-card {
    padding: 20px;
  }
  
  .article-card h4 {
    font-size: 16px;
  }
  
  .article-card .article-description {
    font-size: 13px;
  }
  
  .article-card:hover {
    transform: translateY(-2px);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .article-list-hero h2 {
    font-size: 22px;
  }
  
  .article-list-hero p {
    font-size: 14px;
  }
  
  .article-section-header {
    gap: 12px;
  }
  
  .section-icon-large {
    font-size: 24px;
  }
  
  .article-section-header-text h3 {
    font-size: 18px;
  }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  /* Main container - dark background */
  .complete-article-list {
    background-color: #1a1a1a;
  }
  
  /* Hero banner - keep gradient but adjust for dark mode */
  .article-list-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #2563eb 100%);
  }
  
  /* Section groups - dark borders */
  .article-section-group {
    border-bottom-color: #333333;
  }
  
  /* Section header text */
  .article-section-header-text h3 {
    color: #ffffff !important;
  }
  
  .article-section-header-text p.section-description {
    color: #a0a0a0 !important;
  }
  
  /* Article cards - dark background */
  .article-card {
    background: #242424;
    border-color: #333333;
  }
  
  .article-card:hover {
    background: #2a2a2a;
    border-color: #4db8ff;
    box-shadow: 0 12px 24px rgba(77, 184, 255, 0.15);
  }
  
  /* Article card titles - WHITE TEXT (this is the fix!) */
  .article-card h4 {
    color: #ffffff !important;
  }
  
  .article-card:hover h4 {
    color: #4db8ff !important;
  }
  
  /* Article descriptions */
  .article-card .article-description {
    color: #a0a0a0 !important;
  }
  
  /* Read more links */
  .article-card .article-read-more {
    color: #4db8ff !important;
  }
  
  /* Icon color in dark mode */
  .section-icon-large {
    color: #4db8ff !important;
  }
}

/* ==== ZENDESK WEB WIDGET CUSTOMIZATIONS ==== */

/* 1. Conversation header bar - white background, medium weight text */
[class*="sc-vrqbdz-0"][class*="enrcyr"],
iframe[title*="Messaging"] [class*="sc-vrqbdz-0"] {
  background-color: #FFFFFF !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

/* 2. Bot avatar image - 80% size */
[class*="sc-vrqbdz-2"][class*="ilyblu"] img,
[class*="ilyblu"] img {
  width: 80% !important;
  height: 80% !important;
}

/* 3. Avatar styling - .dysjee class adjustments */
img[class*="dysjee"],
[class*="sc-1p16ygh"] img {
  min-height: 1.75rem !important;
  max-height: 1.75rem !important;
  min-width: 1.75rem !important;
  max-width: 1.75rem !important;
  border-radius: 0.25rem !important;
  object-fit: cover !important;
}

/* 4. Hide "Built with Zendesk" branding */
[class*="sc-"][data-testid*="powered-by"],
a[href*="zendesk.com"][class*="powered"],
[class*="PoweredBy"],
iframe[title*="Messaging"] + div[class*="powered"],
div[class*="sc-"]:has(> a[href*="zendesk.com/messaging"]) {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   SMITH AGGRESSIVE COLOR OVERRIDES
   Ensures Smith branding appears correctly
   ============================================ */

/* SECTION CARDS - Force slate background #414771 */
.knowledge-base .section,
.section-tree .section,
section.section {
  background-color: #414771 !important;
  background: #414771 !important;
  background-image: none !important;
  border: 1px solid rgba(90, 174, 253, 0.3) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* SECTION HEADERS - Force teal #05E3E3 */
.knowledge-base .section h3,
.section-tree .section h3,
section.section h3,
.section h3 {
  background: #05E3E3 !important;
  background-color: #05E3E3 !important;
  background-image: none !important;
  color: #ffffff !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  border: none !important;
}

.section h3 a,
.section h3 a:visited,
.section h3 a:hover {
  color: #ffffff !important;
}

/* ARTICLE LIST INSIDE SECTIONS - Force slate background */
.section .article-list,
.section ul.article-list {
  background: #414771 !important;
  background-color: #414771 !important;
  padding: 20px 24px !important;
}

.section .article-list li,
.section .article-list li a {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.section .article-list li a:hover {
  color: #05E3E3 !important;
}

/* BOTTOM SECTION HEADERS - Force WHITE text */
.article-section-header h3,
.article-section-group h3 {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
}

.article-section-header .section-description,
.article-section-header p {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

/* ARTICLE CARDS AT BOTTOM - Force slate with white text */
.article-card,
a.article-card {
  background: #414771 !important;
  background-color: #414771 !important;
  color: #ffffff !important;
  border: 1px solid rgba(90, 174, 253, 0.3) !important;
}

.article-card h4,
.article-card h4 a {
  color: #ffffff !important;
}

.article-card p,
.article-card .article-description {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

.article-card .article-read-more {
  color: #05E3E3 !important;
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ============================================
   SMITH HEADER GAP FIX - CRITICAL
   Removes the dark blue gap in header middle
   ============================================ */

/* Force full-width header background */
#global-header {
  width: 100% !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #01265A !important;
}

.header {
  background-color: #01265A !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Header inner - constrained content width */
.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent !important;
}

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

/* ============================================
   SMITH VISUAL UPDATES - ADD TO END OF STYLE.CSS
   Hero logo sizing, blue section headers, community fixes
   ============================================ */

/* ===== HERO LOGO SIZING ===== */
.hero-logo {
  max-width: 500px !important;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-logo {
    max-width: 350px !important;
  }
}

@media (max-width: 480px) {
  .hero-logo {
    max-width: 280px !important;
  }
}


/* ===== SECTION CARD HEADERS - SOLID TEAL ===== */

/* Homepage section cards - h3 gets the color */
.knowledge-base .section h3 {
  background: #4991d6 !important;
  color: #ffffff !important;
}

/* The <a> inside h3 must be transparent - kills the inner box */
.knowledge-base .section h3 a,
.knowledge-base .section h3 a:visited,
.knowledge-base .section h3 a:hover {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* Section tree at bottom */
.section-tree .section h3 {
  background: #4991d6 !important;
  color: #ffffff !important;
}
.section-tree .section h3 a,
.section-tree .section h3 a:visited {
  background: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
}

/* Complete article list section headers - WHITE TEXT */
.article-section-header-text h3 {
  color: #ffffff !important;
  background: transparent !important;
}
.section-icon-large {
  color: #05E3E3 !important;
}

/* ===== COMMUNITY SECTION IMPROVEMENTS ===== */
.home-section.community {
  background: linear-gradient(135deg, #414771 0%, #2a2d52 100%) !important;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  border: 1px solid rgba(73, 145, 214, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Community heading - white for contrast */
.home-section.community h2 {
  color: #ffffff !important;
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Community description text - light color for readability */
.home-section.community p {
  color: #e8eef5 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-section.community p strong {
  color: #ffffff !important;
  font-weight: 600;
}

/* Community button - blue with white text */
.community-link {
  display: inline-block;
  background: #4991d6 !important;
  color: #ffffff !important;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(73, 145, 214, 0.3);
  border: 2px solid transparent;
}

.community-link:hover {
  background: #5aa3e8 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(73, 145, 214, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
}

.community-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(73, 145, 214, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .home-section.community {
    padding: 40px 20px;
  }
  
  .home-section.community h2 {
    font-size: 28px;
  }
  
  .home-section.community p {
    font-size: 16px !important;
    padding: 0 10px 20px 10px !important;
  }
  
  .community-link {
    padding: 12px 24px;
    font-size: 15px;
  }
}


/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  /* Keep section headers blue in dark mode */
  .knowledge-base .section h3,
  .knowledge-base .section h3 a,
  .section-tree .section h3,
  .section-tree .section h3 a {
    background: #4991d6 !important;
    color: #ffffff !important;
  }
  
  /* Community section maintains its styling in dark mode */
  .home-section.community {
    background: linear-gradient(135deg, #414771 0%, #2a2d52 100%) !important;
    border-color: rgba(73, 145, 214, 0.3);
  }
  
  .home-section.community h2 {
    color: #ffffff !important;
  }
  
  .home-section.community p {
    color: #e8eef5 !important;
  }
  
  .community-link {
    background: #4991d6 !important;
    color: #ffffff !important;
  }
  
  .community-link:hover {
    background: #5aa3e8 !important;
  }
}

/* ============================================
   SMITH FOOTER STYLING
   Slate gray background with light text
   ADD THIS TO END OF STYLE.CSS (after previous additions)
   ============================================ */

/* Footer background - slate gray */
.footer {
  background-color: #414771 !important;
  border-top: 1px solid rgba(90, 174, 253, 0.2);
  padding: 30px 20px;
  margin-top: 60px;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Footer logo */
.footer-logo {
  flex-shrink: 0;
}

.footer-logo img {
  max-width: 80px;
  height: auto;
  filter: brightness(1.2);
}

/* Footer info text */
.ebm-footer-info {
  flex-grow: 1;
  text-align: right;
}

.ebm-footer-info p {
  color: #e8eef5 !important;
  font-size: 14px;
  line-height: 1.6;
  margin: 5px 0;
}

/* Footer links - Finance Blue */
.ebm-footer-info a {
  color: #5AAEFD !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ebm-footer-info a:hover {
  color: #7bc4ff !important;
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .footer-logo {
    order: -1;
  }
  
  .ebm-footer-info {
    text-align: center;
  }
  
  .ebm-footer-info p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 25px 15px;
  }
  
  .ebm-footer-info p {
    font-size: 12px;
    line-height: 1.8;
  }
  
  /* Stack bullets on mobile for better readability */
  .ebm-footer-info p {
    word-break: break-word;
  }
}

/* Dark mode - maintain consistent footer styling */
@media (prefers-color-scheme: dark) {
  .footer {
    background-color: #414771 !important;
    border-top-color: rgba(90, 174, 253, 0.2);
  }
  
  .ebm-footer-info p {
    color: #e8eef5 !important;
  }
  
  .ebm-footer-info a {
    color: #5AAEFD !important;
  }
  
  .ebm-footer-info a:hover {
    color: #7bc4ff !important;
  }
}


/* ============================================
   ALTERNATIVE: NO ANIMATION (SAFEST)
   Use this if overflow persists
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(107, 195, 231, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(18, 117, 191, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/

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

body {
  background-color: rgba(1, 34, 81, 1);
  color: rgba(255, 255, 255, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: rgba(90, 174, 253, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(5, 227, 227, 1);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

input,
textarea {
  color: #000;
  font-size: 14px;
}

input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
}
input:not([type=checkbox]) {
  outline: none;
}
input:not([type=checkbox]):focus {
  border: 1px solid rgba(5, 227, 227, 1);
}

input[disabled] {
  background-color: #ddd;
}

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%;
}
select:focus {
  border: 1px solid rgba(5, 227, 227, 1);
}
select::-ms-expand {
  display: none;
}

textarea {
  border: 1px solid #87929D;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
textarea:focus {
  border: 1px solid rgba(5, 227, 227, 1);
}

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

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

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

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

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

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid rgba(5, 227, 227, 1);
  border-radius: 4px;
  color: rgba(5, 227, 227, 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(5, 227, 227, 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(5, 227, 227, 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: #037f7f;
  border-color: #037f7f;
}
.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, input[type=submit] {
  cursor: pointer;
  background-color: rgba(5, 227, 227, 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, input[type=submit] {
    width: auto;
  }
}
.button-large:visited, input[type=submit]:visited {
  color: #FFFFFF;
}
.button-large:hover, .button-large:active, .button-large:focus, input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
  background-color: #037f7f;
}
.button-large[disabled], input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #fff;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #fff;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(255, 255, 255, 1);
  border: 1px solid #87929D;
  background-color: #011c42;
}

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

.split-button button {
  background-color: rgba(5, 227, 227, 1);
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: rgba(5, 227, 227, 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: #fff;
  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(5, 227, 227, 1);
}

.form-field input[type=text] {
  border: 1px solid #87929D;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(5, 227, 227, 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(5, 227, 227, 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(5, 227, 227, 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: #fff;
  margin-left: 4px;
}

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

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

.form footer a {
  color: #fff;
  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(5, 227, 227, 1);
}

/* ============================================================
   HINT TEXT ABOVE INPUT: OPTIONAL STYLE ENHANCEMENTS
   ============================================================ */
.hint-above {
  margin-bottom: 6px;
  color: #666;
  font-size: 0.9em;
}

/* Form info header styling */
.form-info-header {
  margin-bottom: 24px;
  padding: 16px 20px;
  background-color: #f7f9fa;
  border-left: 4px solid #17494D;
  border-radius: 4px;
}

.form-info-title {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2f3941;
}

.form-info-description {
  margin: 0;
  font-size: 0.95rem;
  color: #68737d;
  line-height: 1.5;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .form-info-header {
    background-color: #1a1a1a;
    border-left-color: #4a9ba0;
  }
  
  .form-info-title {
    color: #e6e6e6;
  }
  
  .form-info-description {
    color: #a0a0a0;
  }
}

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

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

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

.logo a {
  display: inline-block;
}

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

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

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

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(90, 174, 253, 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(90, 174, 253, 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(255, 255, 255, 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(255, 255, 255, 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(90, 174, 253, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(90, 174, 253, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(90, 174, 253, 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(5, 227, 227, 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: none;
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: #1E3A8A;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: #1E3A8A;
  display: inline-block;
}

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

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #fff;
  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(90, 174, 253, 1);
}

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

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

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: rgba(5, 227, 227, 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(5, 227, 227, 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(5, 227, 227, 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(5, 227, 227, 1);
}

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

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

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

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

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid rgba(5, 227, 227, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(5, 227, 227, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(5, 227, 227, 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(255, 255, 255, 1);
}
.blocks-item-link {
  color: rgba(5, 227, 227, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(5, 227, 227, 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;
}

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

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

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

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01K3H6W11D4KHX91DAH6HQC3K9);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(5, 227, 227, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(5, 227, 227, 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(255, 255, 255, 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(90, 174, 253, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(5, 227, 227, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(5, 227, 227, 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(5, 227, 227, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 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(255, 255, 255, 1);
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: rgba(255, 255, 255, 1);
}

.icon-star {
  color: rgba(5, 227, 227, 1);
  font-size: 18px;
}

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

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: rgba(255, 255, 255, 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%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(5, 227, 227, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(5, 227, 227, 1);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #011738;
}
.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: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #fff;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(5, 227, 227, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(5, 227, 227, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(5, 227, 227, 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(255, 255, 255, 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;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* ============================================
   TABLE OF CONTENTS (TOC)
   ============================================ */
.toc-container {
  background: #fff;
  border-left: 3px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin: 1em 0 2em 0;
  padding: 1em 1em 1em 1.2em;
  border-radius: 6px;
  font-size: 0.95em;
}

.toc-container .toc-heading-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #222;
}

.toc-container ul {
  list-style: none;
  padding-left: 1em;
  margin: 0;
}

.toc-h2 a {
  text-decoration: none;
  color: #0073e6;
  display: block;
  padding: 4px 0;
  line-height: 1.4;
}

.toc-container a.active {
  font-weight: bold;
  color: #222;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .toc-container {
    background: #1c1c1e;
    border-left-color: #444;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.08);
  }

  .toc-container .toc-heading-label,
  .toc-container a {
    color: #ddd;
  }

  .toc-container a.active {
    color: #fff;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .toc-container {
    padding: 1em 1em 1em 1.2em;
    border-left: 3px solid #ddd;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
  }

  .toc-container ul {
    display: block !important;
    padding-left: 1em;
  }

  .toc-container .toc-heading-label {
    background: none;
    padding: 0;
    cursor: default;
    margin-bottom: 8px;
    border-radius: 0;
  }
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
#back-to-top-btn {
  position: fixed;
  bottom: 40px;
  left: 40px;
  background: #050A51; /* Ontario primary color */
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#back-to-top-btn:hover {
  background: #0A1270; /* Slightly lighter Ontario blue */
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
}

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

#back-to-top-btn svg {
  transform: rotate(180deg);
}

/* Mobile optimization */
@media (max-width: 768px) {
  #back-to-top-btn {
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    opacity: 0.85;
    position: fixed !important;
    -webkit-position: fixed !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  #back-to-top-btn.visible {
    opacity: 0.85;
  }
  
  #back-to-top-btn:active {
    opacity: 1;
  }
}

/* Floating Back to Top Button - Article Pages Only */
#back-to-top-btn {
  position: fixed;
  bottom: 40px;
  left: 40px;
  background: #1a8ac3;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Force hardware acceleration for smoother mobile performance */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

#back-to-top-btn:hover {
  background: #0A52A2;
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
}

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

#back-to-top-btn svg {
  transform: rotate(180deg);
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  #back-to-top-btn {
    /* Use viewport units for better mobile support */
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    opacity: 0.85;
    /* Ensure it stays fixed on mobile */
    position: fixed !important;
    -webkit-position: fixed !important;
    /* Prevent iOS Safari from breaking fixed positioning */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  #back-to-top-btn.visible {
    opacity: 0.85;
  }
  
  #back-to-top-btn:active {
    opacity: 1;
  }
}

/* Fix Zendesk support widget positioning on mobile */
@media (max-width: 768px) {
  /* Target the widget container */
  .sc-1w3tvxe-0,
  [class*="sc-1w3tvxe"],
  iframe[title*="Messaging window"],
  div[shape="square"],
  .StyledButton-sc-qe3ace-0 {
    position: fixed !important;
    -webkit-position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    /* iOS Safari fixes */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}
/* ==== END FLOATING BACK TO TOP BUTTON ==== */

/* ==== TOC MAIN STYLING ==== */
.toc-container {
  background: #fff;
  border-left: 3px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin: 1em 0 2em 0;
  padding: 1em 1em 1em 1.2em;
  border-radius: 6px;
  font-size: 0.95em;
}

.toc-container .toc-heading-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #222;
}

.toc-container ul {
  list-style: none;
  padding-left: 1em; /* <-- slight indent */
  margin: 0;
}

.toc-h2 a {
  text-decoration: none;
  color: #0073e6;
  display: block;
  padding: 4px 0;
  line-height: 1.4;
}

.toc-container a.active {
  font-weight: bold;
  color: #222;
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
  .toc-container {
    background: #1c1c1e;
    border-left-color: #444;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.08);
  }

  .toc-container .toc-heading-label,
  .toc-container a {
    color: #ddd;
  }

  .toc-container a.active {
    color: #fff;
  }
}

/* === MOBILE COLLAPSIBLE === */
@media (max-width: 768px) {
  .toc-container {
    padding: 1em 1em 1em 1.2em;
    border-left: 3px solid #ddd;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
  }

  .toc-container ul {
    display: block !important;
    padding-left: 1em;
  }

  .toc-container .toc-heading-label {
    background: none;
    padding: 0;
    cursor: default;
    margin-bottom: 8px;
    border-radius: 0;
  }
}
/* === ALERT BANNER === */
.alert-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #003E51; /* Deep brand teal */
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  z-index: 999;
  position: relative;
  text-align: center;
}

.alert-banner.alert-info {
  background-color: #007E94;
}

.alert-banner.alert-warning {
  background-color: #FFD166;
  color: #231f20;
}

.alert-banner button#dismiss-alert {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  margin-left: 20px;
}



/***** 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(255, 255, 255, 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: #fff;
}

/***** 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: #fff;
}
.share a:hover {
  text-decoration: none;
  color: rgba(5, 227, 227, 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: #fff;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(5, 227, 227, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(5, 227, 227, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #fff;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(5, 227, 227, 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(5, 227, 227, 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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(90, 174, 253, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(5, 227, 227, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(5, 227, 227, 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: #011738;
}
.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: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  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: #fff;
  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(5, 227, 227, 1);
}

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

.vote-voted {
  color: rgba(5, 227, 227, 1);
}

.vote-voted:hover {
  color: #037f7f;
}

/***** 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/01K3H6W0JQ58P5V0D1JA2A2WTR);
  margin-bottom: 10px;
}
.community-hero h2 {
  color: #fff;
}
.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(5, 227, 227, 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(5, 227, 227, 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: #037f7f;
  border-color: #037f7f;
}
.community-follow button::after {
  border-left: 1px solid rgba(5, 227, 227, 1);
  content: attr(data-follower-count);
  color: rgba(5, 227, 227, 1);
  display: inline-block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 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(5, 227, 227, 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(90, 174, 253, 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(5, 227, 227, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #fff;
  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;
  }
}
/* Fix 1: Striped list separator */
.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(255, 255, 255, 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(5, 227, 227, 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: #fff;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #236a6d;
  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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 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(90, 174, 253, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(5, 227, 227, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(5, 227, 227, 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: #011738;
}
.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: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #011c42;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #fff;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #fff;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(5, 227, 227, 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(5, 227, 227, 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(255, 255, 255, 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(255, 255, 255, 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(5, 227, 227, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(255, 255, 255, 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;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(5, 227, 227, 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: #011738;
  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: #fff;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #fff;
}

/***** 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: #fff;
  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(5, 227, 227, 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(5, 227, 227, 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: #011c42;
    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 {
  color: #fff;
  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: #fff;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "•";
  margin: 0 8px;
  opacity: 0.6;
}

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

.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: #fff;
  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(5, 227, 227, 1);
  border-radius: 4px;
  color: rgba(5, 227, 227, 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: #011738;
  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: #fff;
  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: #fff;
  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: #011c42;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

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

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

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 1);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(90, 174, 253, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
/* Fix 2: Search filters expand arrow */
.search-results-sidebar .see-all-filters::after {
  content: " ↓";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: rgba(90, 174, 253, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(90, 174, 253, 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: #fff;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(5, 227, 227, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[dir=rtl] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir=rtl] .dropdown-menu-end {
  left: 0;
  right: auto;
}

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

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

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

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

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

/*################################################################################################################################################################################################*/
/*#################### CUSTOM STYLES: No changes have been made to default stylesheet. All changes and overrides are below. ######################################################################*/
/*################################################################################################################################################################################################*/

/* ############### GLOBAL STYLES ############### */
body, html, h1, h2, h3, h4, h5, h6, p, a {
  font-family: 'Instrument Sans', 'Open Sans', Sans-serif;
}
h1 {
  line-height: 1.3;
  font-weight: 600;
}
.page-header h1, .post-title h1, h1.article-title, header.my-activities-header h1, .search-result-title {
  font-weight: 600;
}
h2 {
  font-size: 32px;
  font-weight: 600;
}
h3 {
  line-height: 1.3;
  margin-bottom: 5px !important;
}
.category-tree .section-tree h3 {
  font-size: 22px;
}
.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 {
  border-radius: 20px;
}
@media (min-width: 1024px) {
.section-content {
    flex: 0 0 100%;
}
}
.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 {
    border: 1px solid rgb(31 115 183);
    color: rgb(31 115 183);
}
.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: #236a6d;
}
.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: #236a6d;
  text-decoration: none;
  border-color: #236a6d; 
}
.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: #236a6d;
  border-color: #236a6d;
}
.section-tree {
    justify-content: flex-start;
    gap: 20px;
}

/* ############### HEADER ############### */
header.article-header {
  background: #f3f3f3;
  padding: 20px 40px;
  border-radius: 20px;
}
#global-header {
  width: 100%;
  background: linear-gradient(180deg, #000000 0%, #01265A 100%);
}
.hero-inner svg {
  max-width: 450px;
}
@media (max-width: 768px) {
  .hero-inner svg {
    max-width: 300px;
}
}
.user-info span {
  color: #fff;
}
.button-large, input[type=submit] {
  background-color: #236a6d;
  border-radius: 20px;
  min-width: 150px;
  padding: 0 1em;
  transition: opacity ease-in-out 0.5s;
}
.button-large:hover, input[type=submit]:hover {
  background-color: #236a6d;
  text-decoration: none;
  opacity: 0.75;
}
a.button.button-large {
  color: #fff;
}
.sub-nav .breadcrumbs {
  margin-top: 10px;
}
/* ############### NAV ############### */
.header .user-nav li a, .header .user-nav li .cat-dropdown-btn {
  color: #fff;
  font-weight: 500;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  text-decoration: none;
  color: #b3d6e5 !important;
}
.nav-wrapper-desktop .dropdown-menu a:hover, .nav-wrapper-desktop .dropdown-menu a:focus, .nav-wrapper-desktop .dropdown-menu a:active {
  text-decoration: none;
  color: #2f3941 !important;
}
.dropdown-menu [role=separator] {
    border-bottom: 0 solid #e9ebed;
}

/* ############### CATEGORY/SECTION NAV ############### */
.cat-dropdown {
  position: relative; /* Needed for menu positioning */
  display: inline-block;
}
.cat-dropdown-btn {
  cursor: pointer;
  background: none;
  border-style: none;
  padding: 0 20px 0 0;
}
.cat-dropdown-content {
 display: none;
  position: absolute; /* Positions the menu relative to button */
  /*background-color: #2c5364;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10; /* Ensures menu appears above other elements */
    background: #fff;
    border: 1px solid #d8dcde;
    border-radius: 3px;
    box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    left: 0;
    margin-top: 1px;
    min-width: 170px;
    padding: 10px 0;
    position: absolute;
    text-align: left;
    z-index: 1000;
}
.cat-dropdown-content a, .cat-dropdown-content a:hover {
  /*color: #fff;*/
  color: #2f3941 !important;
  font-weight: 300 !important;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
}
.cat-dropdown-content a:hover {
  background: #1f73b714;
}
/*.cat-dropdown:hover .cat-dropdown-content { /* Optional hover effect */
 /*display: block;
}*/
.show {
  display: block;
}

/* ############### SEARCH ############### */
.search input[type="search"] {
  border-radius: 30px;
  box-sizing: border-box;
  color: #333333 !important;
  height: 48px;
  padding-left: 40px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #2c4959 0%, #5a99a3 38%, #2c4959 100%) border-box !important;
  border-radius: 50em !important;
  border: 4px solid transparent !important;
}
.search-wrapper {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 610px;
    margin: 0 auto;
}
.search {
  border-style: none;
}
.search-icon {
  color: #333333;
  top: 82%;
}
.top-search-bar {
  margin-top: 100px;
  text-align: center;
}
.top-search-bar h2 {
  font-size: 34px;
  margin-bottom: 12px;
}
input {
  font-size: 16px;
}
.search .clear-button, .search .clear-button:hover {
  color: #fff;
  background-color: #236a6d;
  border-color: transparent;
  padding: 0 18px;
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
}

/* ############### HOME: TRENDING TOPICS ############### */
.browse-other-bucket {
/*background: #f3f3f3;
  padding: 20px;
  border-radius: 20px;
  max-width: 200px;
  text-align: center;*/
}
section.other-guides {
  margin-bottom: 70px;
  margin-top: 20px;
}
#browse-other-wrapper {
  display: flex !important;
  gap: 50px;
}
.browse-other-bucket {
  display: flex !important;
  align-items: center;
  flex: 1;
  /* Make each child flex item take up equal space */
  /*min-height: 100px;*/
}
.browse-other-bucket img {
  width: 100%;
}
@media (max-width: 768px) {
  section.other-guides {
    margin-top: 20px;
  }
  #browse-other-wrapper {
    flex-wrap: wrap;
    gap: inherit;
  }
  .browse-other-bucket img {
    height: 120px !important;
    width: auto !important;
    margin: 10px 10px;
    text-align: center;
  }
}

/* ############### HOME: ARTICLES ############### */
.section-tree .section {
  border: 4px solid #7BA0C440;
  border-radius: 20px;
  padding: 30px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 30px;
  }
  .section-tree .section {
    flex: 0 0 32%;
  }
}
@media (min-width: 1024px) {
  .promoted-articles {
    gap: 30px;
  }
.promoted-articles-item {
    align-self: flex-start;
    flex: 0 0 auto;
    width: 31.5%;
    padding-right: 0;
  }
}
section.articles {
  margin-top: 40px;
}
a.see-all-articles {
  background: #236a6d;
  color: #fff;
  width: 60%;
  text-align: center;
  border-radius: 20px;
}
.section-tree .see-all-articles {
  padding: 10px 10px;
  margin-top: 20px;
}
li.promoted-articles-item a {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 0;
}
.promoted-articles-item:last-child a {
  border-bottom: 0;
}
li.promoted-articles-item img {
  width: 100%;
  border-radius: 20px;
}
.promoted-articles-item a {
  border-bottom: none;
  line-height: 1.3;
  margin-bottom: 8px;
}
.community, .activity {
  border-top: none;
}
section:not(.profile-section) h3 a, 
section:not(.profile-section) h3 a:visited {
  color: #333;
}
 
/* ############### HOME: RECENT ACTIVITY AND COMMUNITY ############### */
/*h2.recent-activity-header, .community h2, .articles h2 {
  font-size: 32px;
  color: rgba(127, 39, 41, 1);
  font-weight: 600;
}
@media (min-width: 768px) {
  .recent-activity-list {
    display: flex;
    flex-wrap: wrap;
  }
  .recent-activity-item {
    flex: 1 0 21%;
    padding: 20px;
    border-bottom: 0;
  }
  .recent-activity-item-meta {
    float: none;
  }
}*/
section.section.home-section.activity {
  display: none;
}
.community a, .recent-activity-controls a, a.article-sidebar-item {
  text-decoration: none;
  color: #fff !important;
  background: #236a6d;
  padding: 10px 20px;
  border-radius: 20px;
}
.community a:hover, .recent-activity-controls a:hover, a.article-sidebar-item:hover {
  text-decoration: none;
  background: #0A52A2;
  transition: all ease-in-out 0.5s;
}
.community-image {
  margin-top: 40px;
}
.recent-activity-item-parent {
  font-size: 16px;
}
.recent-activity-item-link {
  font-size: 15px;
}
/* Recent Activities show 5 and cannot change. Hide last child to display only 4 */
/*.recent-activity-list .recent-activity-item:last-child {
  display: none;
}
section.recent-activity-item {
  border-radius: 20px;
  margin: 10px;
  background: #f3f3f3;
}
.recent-activity-controls {
  text-align: center;
  margin-top: 10px;
} */
@media (max-width: 768px) {
 .community-image {
    background-position: center left;
  }
}

/* ############### FOOTER ############### */
.footer {
  background-color: #E2E8F0;  /* Light grey background */
  background-image: none;
  padding: 40px 0 70px;
  text-align: center;
  width: 100%;
}

.footer .ebm-footer-info p, 
.footer .ebm-footer-info a {
  color: #1E3A8A;  /* EBM Navy blue text */
}

.footer .ebm-footer-info a:hover {
  color: #0A52A2;  /* Lighter blue on hover */
  text-decoration: underline;
}
.footer .ebm-footer-info p {
  margin-bottom: 5px;
  margin-top: 5px;
}
@media (max-width: 768px) {
  .footer .ebm-footer-info p {
  font-size: 12px;
    line-height: 16px;
    margin-left: 10px;
  }
  .footer-inner {
    display: block;
  }
}

/* ############### COMMUNITY LANDING PAGE: community_topic_list_page ############### */
.blocks-item {
  border: 4px solid #7BA0C440;
  border-radius: 20px;
  padding: 20px;
}
.blocks-item:hover {
  background: #7BA0C440;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #231f20;
  text-decoration: none;
}
a span.blocks-item-title {
  font-size: 24px;
  font-weight: 500;
}
.community-footer-title {
  font-size: 28px;
  font-weight: 600;
}
.community-featured-posts .title {
  font-size: 28px;
}
.community-header .title {
  font-size: 28px;
  font-weight: 600;
}
.blocks-item-link:focus {
  box-shadow: 0 0 0 0 rgb(242 0 61);
}
.recent-activity-comment-icon svg {
    color: #0A52A2;
}
.status-label-pinned, .status-label-featured, .status-label-official {
    background-color: rgb(9 113 206);
}

/* ############### SEARCH BAR INTERIOR PAGES (white bg) ############### */
.search-container .search input[type="search"] {
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #2c4959 0%, #5a99a3 38%, #2c4959 100%) border-box !important;
  color: #757575 !important;
}
.search-container .search-icon {
  color: #757575;
  top: 52%;
}

/* ############### ARTICLES ############### */
.collapsible-sidebar-body li:last-child {
  margin-bottom: 40px;
}
.collapsible-sidebar-body {
  padding-bottom: 30px;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 85%;
    max-width: 85%;
  }
}
.recent-articles li, .related-articles li {
  margin-bottom: 5px;
}

/* --- Enhanced Blockquote Styling --- */
.article-body blockquote {
  border-left: 4px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 4px;
  color: #333;
  font-style: normal;
  padding: 10px 16px;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  animation: fadeSlideIn 0.3s ease;
}

/* Default blockquote (unstyled) */
.article-body blockquote:not(.important):not(.fyi):not(.note):not(.info):not(.relevant):not(.tip):not(.action):not(.troubleshoot):not(.context) {
  background-color: #f4f5f7;
  border-left-color: #5e6c84;
  color: #333;
  font-style: normal;
}

/* --- Updated and New Blockquote Variants --- */

/* Important - Light Pink */
.article-body blockquote.important {
  background-color: #ffebe6;
  border-left-color: #d13c2f;
  color: #333;
}

/* FYI - Light Blue */
.article-body blockquote.fyi {
  background-color: #deebff;
  border-left-color: #3779db;
  color: #333;
}

/* Note - Soft Yellow */
.article-body blockquote.note {
  background-color: #fffbe6;
  border-left-color: #e6b800;
  color: #333;
}

/* Info - Soft Mint */
.article-body blockquote.info {
  background-color: #e6fbf3;
  border-left-color: #3aa77d;
  color: #333;
}

/* Relevant - Soft Lavender Blue */
.article-body blockquote.relevant {
  background-color: #f5f3f0;
  border-left-color: #a09b92;
  color: #2e2e2e;
}

/* Tip - Light Green */
.article-body blockquote.tip {
  background-color: #e8f5e9;
  border-left-color: #43a047;
  color: #2e7d32;
}

/* Action - Light Orange */
.article-body blockquote.action {
  background-color: #fff3e0;
  border-left-color: #fb8c00;
  color: #e65100;
}

/* Troubleshoot - Warm Peach */
.article-body blockquote.troubleshoot {
  background-color: #fbe9e7;
  border-left-color: #d84315;
  color: #4e342e;
}

/* Context - Soft Steel Blue */
.article-body blockquote.context {
  background-color: #e3e7f0;
  border-left-color: #627aa0;
  color: #2f3e5c;
}

/* Hover effect for all blockquotes */
.article-body blockquote:hover {
  background-color: #eef1f3;
}

/* Inline Alert Callout */
.article-body .alert-inline {
  display: inline-block;
  background-color: #fff8c5;
  color: #594d00;
  border-left: 4px solid #e3b800;
  padding: 4px 8px;
  margin: 2px 0;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  animation: fadeSlideIn 0.3s ease;
}

/* Slide & Fade In Animation */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Font Adjustment on Mobile */
@media (max-width: 600px) {
  .article-body blockquote {
    font-size: 15px;
  }
  .article-body .alert-inline {
    font-size: 14px;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .article-body blockquote {
    background-color: #2e2e2e;
    color: #ddd;
    border-left-color: #666;
  }
  .article-body blockquote:not(.important):not(.fyi):not(.note):not(.info):not(.relevant):not(.tip):not(.action):not(.troubleshoot):not(.context) {
    background-color: #3a3a3a;
    border-left-color: #888;
    color: #ddd;
  }
  .article-body blockquote.important {
    background-color: #4b1f1f;
    border-left-color: #ff6b6b;
  }
  .article-body blockquote.fyi {
    background-color: #1f2b4b;
    border-left-color: #4c9aff;
  }
  .article-body blockquote.note {
    background-color: #4b3f1f;
    border-left-color: #ffcd4b;
  }
  .article-body blockquote.info {
    background-color: #1f4b2b;
    border-left-color: #4bffa0;
  }
  .article-body blockquote.relevant {
    background-color: #3b4152;
    border-left-color: #91a4d1;
    color: #eee;
  }
  .article-body blockquote.tip {
    background-color: #264d36;
    border-left-color: #43ff91;
  }
  .article-body blockquote.action {
    background-color: #4e3b1f;
    border-left-color: #ffc47d;
  }
  .article-body blockquote.troubleshoot {
    background-color: #51231d;
    border-left-color: #ff8e72;
  }
  .article-body blockquote.context {
    background-color: #2f3540;
    border-left-color: #99b0d1;
  }
  .article-body .alert-inline {
    background-color: #5c4600;
    color: #fff8c5;
    border-left-color: #ffcc00;
  }
}
/* === FEATURED IMAGE VISIBILITY & RESIZE === */
.article-body .feat-image {
  display: none;
}

.article-body p.feat-image img {
  max-width: 921px;
  max-height: 518px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Heading anchor links */
.heading-anchor {
  margin-left: 0.5em;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--link-color, #1f73b7);
  padding: 0.25em;
  text-decoration: none;
  vertical-align: middle;
}

.heading-anchor:hover {
  color: var(--link-color-hover, #0d5a9e);
}

.heading-anchor svg {
  display: inline-block;
  vertical-align: middle;
}

/* Show on heading hover */
.article-body h2:hover .heading-anchor,
.article-body h3:hover .heading-anchor,
.article-body h4:hover .heading-anchor,
.heading-anchor:focus {
  opacity: 1;
}

/* Copied feedback */
.heading-anchor.copied::after {
  content: 'Copied!';
  margin-left: 0.5em;
  font-size: 12px;
  background: #68737d;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .heading-anchor {
    color: #6db3f2;
  }
  .heading-anchor:hover {
    color: #9ecbf7;
  }
  .heading-anchor.copied::after {
    background: #87929d;
  }
}

/* ############### SECTIONS PAGE ############### */
.section-header {
  background: #4991D6 !important; /* image removed for Smith */
  /* background-position removed */
  /* background-size removed */
  padding: 50px 40px;
  width: 100%; 
  margin-bottom: 40px;
}
.section-header h1 {
  color: #fff;
}
.section-header .section-subscribe button:hover {
  background-color: #0A52A2;
  border: 1px solid #0A52A2;
}
.section-header .section-subscribe button {
    border: 1px solid rgb(255 255 255);
    color: rgb(255 255 255);
}
.section-container {
  display: flex;
  justify-content: flex-start;
}
.article-list-item a.article-list-link {
  color: rgba(26, 138, 195, 1);
  font-weight: 500;
  font-size: 18px;
}
li.article-list-item {
  padding: 26px;
  background: #f5f5f5;
  border-radius: 20px;
}
li.article-list-item.article-promoted svg {
    color: rgb(123 160 196 / 60%);
}
.article-read-more {
  background: #236a6d;
  padding: 6px 12px;
  color: #fff !important;
  border-radius: 15px;
  font-size: 12px;
}
.article-read-more:hover {
  background: #0A52A2;
  transition: all ease-in-out 0.5s;
  text-decoration: none;
}
.section-container ul.article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
@media (min-width: 768px) {
.section-container .article-list-item {
  width: 31.6%;
}
}

/* ############### REQUESTS ############### */
header.my-activities-header h1 {
  margin-top: 40px;
}
.requests-table-toolbar .search input[type="search"] {
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #4ca1bc 0%, #409FC1 30%, #3196C2 34%, #1B8AC3 38%, #0981C5 66%, #264A82 95%, #264A82 100%) border-box !important;
  color: #757575 !important;
}
.requests-table-toolbar .search-icon {
  color: #757575;
  top: 52%;
}

/* ############### CATEGORIES TEMPLATE ############### */
@media (min-width: 1024px) {
  .category-content {
      flex: 0 0 100%;
  }
}
.category-container {
    li.article-list-item {
        padding: 0;
        background: transparent;
        border-radius: 0;
        margin-bottom: 10px;
    }
    h1 {
      margin-bottom: 30px;
    }
    h2.section-tree-title {
        font-size: 22px;
        margin-bottom: 8px;
    }
  a.see-all-articles {
    width: 100%;
    background: #236a6d;
    transition: all ease-in-out .5s;
  }
  a.see-all-articles:hover {
    opacity: .75;
    text-decoration: none;
  }
}
/* Limit number of articles to 3 */
.category-container .article-list li:nth-child(n+4) {
 display: none;
}

/* #################### REQUESTS PAGE #######################*/
.request-breadcrumbs {
    margin-top: 14px;
}

/* #################### USER PROFILE PAGE ############################ */
.split-button button {
    background-color: rgb(31 115 183);
    color: #ffffff !important;
    outline-color: rgb(31 115 183);
    transition: all ease-in-out .5s;
}
.split-button button:hover {
    opacity: .75;
}

/* #################### MOBILE ############################ */
.nav-wrapper-mobile .menu-button-mobile {
    color: #fff;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  display: none;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
    background: #008dc4;
}

/*#################### CUSTOM FEATURE: Request Form Inline Note #################################################################*/

.request-note {
  background: #f7fafc;               /* light neutral background */
  border-left: 3px solid #1a8ac3;    /* subtle brand-colored accent */
  padding: 8px 12px;
  margin: 6px 0 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #2f3941;
}

.request-note a {
  color: #1a8ac3;                    /* match brand link color */
  text-decoration: underline;
  font-weight: 500;
}

.request-note p {
  margin: 0;
  line-height: 1.5;
}

/*#################### CUSTOM FEATURE: Search Inline by Typing in Dropdowns #################################################################*/

/* Keyboard search highlighting inside Zendesk Nesty panels */
.nesty-panel li.kb-match {
  background-color: #fff6d6; /* subtle highlight for all matches */
}
.nesty-panel li.kb-focused {
  background-color: #ffe8a3; /* stronger highlight for focused match */
  outline: 1px dashed #c97a00;
}

/* ========================================
   COMPREHENSIVE DARK MODE IMPLEMENTATION
   Add this to the end of style.css
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ========== BASE STYLES ========== */
  body {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  .container,
  .error-page,
  main {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  /* ========== HEADINGS ========== */
  h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
  }
  
  /* ========== LINKS ========== */
  a {
    color: #4db8ff !important;
  }
  
  a:visited {
    color: #9d7dff !important;
  }
  
  a:hover, a:active, a:focus {
    color: #6ec6ff !important;
  }
  
  /* ========== FORMS & INPUTS ========== */
  input:not([type=checkbox]),
  textarea,
  select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: #4db8ff !important;
    background-color: #333333 !important;
  }
  
  input[disabled] {
    background-color: #3a3a3a !important;
    color: #888 !important;
  }
  
  input::placeholder,
  textarea::placeholder {
    color: #888 !important;
  }
  
  /* Fix all heading levels in form description CKEditor - both themes */
.ck-editor__editable h1,
.ck-editor__editable h2,
.ck-editor__editable h3 {
  color: #2f3941 !important;
}

@media (prefers-color-scheme: dark) {
  .ck-editor__editable h1,
  .ck-editor__editable h2,
  .ck-editor__editable h3 {
    color: #2f3941 !important;
  }
}
  
  /* Select dropdown arrow */
  select {
    background-image: 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='%23888' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") !important;
  }
  
  /* ========== BUTTONS ========== */
  .button,
  .pagination-next-link,
  .pagination-prev-link,
  .pagination-first-link,
  .pagination-last-link,
  button {
    background-color: #2d2d2d !important;
    color: #4db8ff !important;
    border-color: #4db8ff !important;
  }
  
  .button:hover,
  button:hover {
    background-color: #3a3a3a !important;
    color: #6ec6ff !important;
  }
  
  .button-primary,
  .button[aria-selected="true"] {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== HEADER & NAVIGATION ========== */
  .header {
    background-color: #1f1f1f !important;
    border-bottom-color: #333 !important;
  }
  
  .header .logo-link,
  .header a {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .menu-button {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .dropdown-menu {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .nav-wrapper .dropdown-menu a {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper .dropdown-menu a:hover {
    background-color: #3a3a3a !important;
  }
  
  /* Mobile navigation */
  .nav-wrapper-mobile {
    background-color: #1f1f1f !important;
  }
  
  .nav-wrapper-mobile .menu-button-mobile {
    color: #e0e0e0 !important;
  }
  
  .nav-wrapper-mobile .menu-list-mobile {
    background-color: #2d2d2d !important;
  }
  
  /* ========== BREADCRUMBS ========== */
  .breadcrumbs {
    color: #b0b0b0 !important;
  }
  
  .breadcrumbs a {
    color: #4db8ff !important;
  }
  
  /* ========== SEARCH ========== */
  .search input[type="search"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .search-icon {
    color: #888 !important;
  }
  
  /* ========== HOME PAGE ========== */
  .hero {
    background-color: #242424 !important;
  }
  
  .hero h1,
  .hero p {
    color: #ffffff !important;
  }
  
  .blocks {
    background-color: #1a1a1a !important;
  }
  
  .blocks-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .blocks-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .blocks-item-title {
    color: #ffffff !important;
  }
  
  .blocks-item-description {
    color: #b0b0b0 !important;
  }
  
  /* ========== SECTION PAGE ========== */
  .section-header {
    background-color: #1f3a52 !important;
  }
  
  .section-header h1 {
    color: #ffffff !important;
  }
  
  .section-container {
    background-color: #1a1a1a !important;
  }
  
  li.article-list-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  li.article-list-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .article-list-link {
    color: #4db8ff !important;
  }
  
  .article-list-item-description {
    color: #b0b0b0 !important;
  }
  
  .article-read-more {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  .article-read-more:hover {
    background-color: #0A52A2 !important;
  }
  
  /* ========== CATEGORY PAGE ========== */
  .category-container {
    background-color: #1a1a1a !important;
  }
  
  .section-tree-title {
    color: #ffffff !important;
  }
  
  .see-all-articles {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== ARTICLE PAGE ========== */
  .article {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }
  
  .article-header {
    border-bottom-color: #333 !important;
  }
  
  .article-title {
    color: #ffffff !important;
  }
  
  .article-author,
  .article-meta {
    color: #b0b0b0 !important;
  }
  
  .article-sidebar {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .sidenav-item {
    color: #e0e0e0 !important;
    border-bottom-color: #333 !important;
  }
  
  .sidenav-item:hover,
  .sidenav-item.current-article {
    background-color: #2d2d2d !important;
    color: #4db8ff !important;
  }
  
  .sidenav-title {
    color: #ffffff !important;
  }
  
  /* Article body content */
  .article-body {
    color: #e0e0e0 !important;
  }
  
  .article-body p,
  .article-body li,
  .article-body td,
  .article-body th {
    color: #e0e0e0 !important;
  }
  
  .article-body strong,
  .article-body b {
    color: #ffffff !important;
  }
  
  /* Code blocks */
  .article-body pre,
  .article-body code {
    background-color: #2d2d2d !important;
    color: #f0f0f0 !important;
    border-color: #454545 !important;
  }
  
  /* Horizontal rules */
  .article-body hr {
    border-color: #454545 !important;
  }
  
  /* ========== ARTICLE INLINE STYLES (Critical for custom HTML) ========== */
  
  /* Override inline background colors for divs and spans */
  .article-body div[style*="background"],
  .article-body span[style*="background"],
  .article-body p[style*="background"] {
    background-color: #2d2d2d !important;
  }
  
  /* Override inline text colors */
  .article-body div[style*="color"],
  .article-body span[style*="color"],
  .article-body p[style*="color"],
  .article-body h1[style*="color"],
  .article-body h2[style*="color"],
  .article-body h3[style*="color"],
  .article-body h4[style*="color"] {
    color: #e0e0e0 !important;
  }
  
  /* Gradient backgrounds (for hero sections) */
  .article-body div[style*="linear-gradient"],
  .article-body div[style*="gradient"] {
    background: linear-gradient(135deg, #050A51 0%, #1F94D3 100%);
  }
  
  /* Tables with inline styles */
  .article-body table,
  .article-body table[style] {
    border-color: #454545 !important;
  }
  
  .article-body th,
  .article-body td,
  .article-body th[style],
  .article-body td[style] {
    border-color: #454545 !important;
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
  }
  
  .article-body thead th,
  .article-body thead th[style] {
    background-color: #1a4d7a !important;
    color: #ffffff !important;
  }
  
  .article-body tr[style*="background-color"] {
    background-color: #242424 !important;
  }
  
  .article-body tbody tr:nth-child(even) {
    background-color: #242424 !important;
  }
  
  /* Colored boxes and containers */
  .article-body div[style*="#e3f2fd"],
  .article-body div[style*="#e8f5e9"],
  .article-body div[style*="#f5f7fa"],
  .article-body div[style*="#fff3e0"],
  .article-body div[style*="background: #f"] {
    background-color: #2d3d4d !important;
    border-color: #4db8ff !important;
  }
  
  /* Special styled sections */
  .article-body .intro-note,
  .article-body .closing-cta {
    background-color: #2d2d2d !important;
  }
  
  /* Figures and images containers */
  .article-body figure {
    background-color: transparent !important;
  }
  
  /* ========== BLOCKQUOTES (Enhanced) ========== */
  .article-body blockquote {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-left-color: #666 !important;
  }
  
  /* All blockquote variants already handled in existing CSS (lines 5432-5485) */
  /* But let's add overrides for any inline styles */
  .article-body blockquote[style*="background"] {
    background-color: #2d2d2d !important;
  }
  
  .article-body blockquote[style*="border-left"] {
    border-left-color: #4db8ff !important;
  }
  
  /* ========== TABLES (General) ========== */
  table {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  thead {
    background-color: #1f1f1f !important;
  }
  
  th {
    background-color: #1a4d7a !important;
    color: #ffffff !important;
    border-color: #454545 !important;
  }
  
  td {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  tbody tr:nth-child(even) td {
    background-color: #242424 !important;
  }
  
  /* ========== REQUESTS PAGE ========== */
  .requests-table {
    background-color: #2d2d2d !important;
  }
  
  .requests-table th {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
    border-bottom-color: #454545 !important;
  }
  
  .requests-table td {
    border-bottom-color: #333 !important;
  }
  
  .requests-table tr:hover {
    background-color: #3a3a3a !important;
  }
  
  .request-status {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  .request-id {
    color: #4db8ff !important;
  }
  
  /* ========== REQUEST PAGE (Single Request) ========== */
  .request-container {
    background-color: #2d2d2d !important;
  }
  
  .request-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .request-title {
    color: #ffffff !important;
  }
  
  .status-label {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  /* Request comments */
  .comment {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .comment:hover {
    background-color: #2d2d2d !important;
  }
  
  .comment-body {
    color: #e0e0e0 !important;
  }
  
  .comment-info {
    border-bottom-color: #333 !important;
  }
  
  /* Request form */
  .request-form {
    background-color: #2d2d2d !important;
  }
  
  .form-field label {
    color: #e0e0e0 !important;
  }
  
  .request-note {
    background-color: #2d3d4d !important;
    color: #e0e0e0 !important;
    border-left-color: #4db8ff !important;
  }
  
  /* ========== FOOTER ========== */
  .footer {
    background-color: #1f2937 !important;  /* Dark slate grey */
    background-image: none !important;
    border-top-color: #374151 !important;
    color: #e5e7eb !important;
  }
  
  .footer .ebm-footer-info p,
  .footer .ebm-footer-info a {
    color: #e5e7eb !important;  /* Light grey text in dark mode */
  }
  
  .footer .ebm-footer-info a:hover {
    color: #93c5fd !important;  /* Light blue on hover */
  }
  
  .footer h2,
  .footer h3 {
    color: #ffffff !important;
  }
  
  /* ========== PAGINATION ========== */
  .pagination {
    background-color: transparent !important;
  }
  
  .pagination-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .pagination-item:hover,
  .pagination-item.current {
    background-color: #3a3a3a !important;
  }
  
  /* ========== DROPDOWNS ========== */
  .dropdown-menu {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }
  
  .dropdown-menu a {
    color: #e0e0e0 !important;
  }
  
  .dropdown-menu a:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== LABELS & BADGES ========== */
  .label,
  .badge {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  .label-primary {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
  
  /* ========== AVATARS ========== */
  .avatar {
    background-color: #3a3a3a !important;
  }
  
  .user-avatar {
    border-color: #454545 !important;
  }
  
  /* ========== NOTIFICATIONS & ALERTS ========== */
  .notification,
  .alert {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
    color: #e0e0e0 !important;
  }
  
  .notification-success {
    background-color: #1a3d2d !important;
    border-color: #2d6d4d !important;
  }
  
  .notification-error {
    background-color: #4d1a1a !important;
    border-color: #7d2d2d !important;
  }
  
  .notification-info {
    background-color: #1a2d4d !important;
    border-color: #2d4d7d !important;
  }
  
  /* ========== ICONS ========== */
  svg {
    color: inherit !important;
  }
  
  .icon-lock,
  .icon-agent {
    color: #b0b0b0 !important;
  }
  
  /* ========== LOADING & SPINNER ========== */
  .loading {
    background-color: #2d2d2d !important;
  }
  
  .spinner {
    border-color: #454545 !important;
    border-top-color: #4db8ff !important;
  }
  
  /* ========== TOOLTIPS ========== */
  .tooltip {
    background-color: #1f1f1f !important;
    color: #e0e0e0 !important;
    border: 1px solid #454545 !important;
  }
  
  /* ========== COMMUNITY / FORUMS ========== */
  .community-post,
  .community-topic {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .community-post:hover,
  .community-topic:hover {
    background-color: #3a3a3a !important;
  }
  
  .community-badge {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  /* ========== VOTES ========== */
  .article-votes {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .article-vote {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .article-vote:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== SUBSCRIPTIONS ========== */
  .subscriptions-list {
    background-color: #2d2d2d !important;
  }
  
  .subscriptions-list-item {
    border-bottom-color: #333 !important;
  }
  
  .subscriptions-list-item:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== CONTRIBUTIONS PAGE ========== */
  .contributions-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .contributions-nav {
    background-color: #2d2d2d !important;
  }
  
  .contributions-nav a {
    color: #4db8ff !important;
  }
  
  .contributions-nav a.active {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
  }
  
  /* ========== USER PROFILE ========== */
  .profile-header {
    background-color: #242424 !important;
    border-bottom-color: #333 !important;
  }
  
  .profile-card {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .profile-info {
    color: #e0e0e0 !important;
  }
  
  .profile-stats {
    background-color: #242424 !important;
  }
  
  .profile-stat-value {
    color: #ffffff !important;
  }
  
  /* ========== SEARCH RESULTS ========== */
  .search-results {
    background-color: #1a1a1a !important;
  }
  
  .search-result-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .search-result-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .search-result-title {
    color: #4db8ff !important;
  }
  
  .search-result-description {
    color: #b0b0b0 !important;
  }
  
  .search-result-breadcrumbs {
    color: #888 !important;
  }
  
  /* ========== ERROR PAGE ========== */
  .error-page {
    background-color: #1a1a1a !important;
  }
  
  .error-page h1,
  .error-page h2 {
    color: #ffffff !important;
  }
  
  /* ========== COLLAPSIBLE SIDEBAR ========== */
  .collapsible-sidebar {
    background-color: #242424 !important;
    border-color: #333 !important;
  }
  
  .collapsible-sidebar-toggle {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
  }
  
  .collapsible-sidebar-toggle:hover {
    background-color: #3a3a3a !important;
  }
  
  /* ========== ATTACHMENTS ========== */
  .attachment-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .attachment-item:hover {
    background-color: #3a3a3a !important;
  }
  
  .attachment-icon {
    color: #b0b0b0 !important;
  }
  
  /* ========== NESTY PANELS (Dropdown search) ========== */
  .nesty-panel {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .nesty-panel li {
    color: #e0e0e0 !important;
  }
  
  .nesty-panel li:hover {
    background-color: #3a3a3a !important;
  }
  
  .nesty-panel li.kb-match {
    background-color: #3d3d2d !important;
  }
  
  .nesty-panel li.kb-focused {
    background-color: #4d4d2d !important;
    outline-color: #d4a574 !important;
  }
  
  /* ========== CONTAINER DIVIDERS ========== */
  .container-divider {
    border-top-color: #333 !important;
  }
  
  /* ========== SHADOWS ========== */
  .shadow,
  .box-shadow,
  [class*="shadow"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }
  
  /* ========== SPECIAL OVERRIDES FOR INLINE STYLES ========== */
  
  /* White text on colored backgrounds needs special handling */
  .article-body div[style*="color: white"],
  .article-body div[style*="color:#fff"],
  .article-body div[style*="color: #fff"],
  .article-body h1[style*="color: white"],
  .article-body h2[style*="color: white"],
  .article-body h3[style*="color: white"],
  .article-body h4[style*="color: white"],
  .article-body p[style*="color: white"] {
    color: #ffffff !important;
  }
  
  /* Preserve white backgrounds that are intentional */
  .article-body div[style*="background: white"],
  .article-body div[style*="background:#fff"],
  .article-body div[style*="background: #fff"] {
    background-color: #2d2d2d !important;
  }
  
  /* Border colors */
  .article-body div[style*="border"],
  .article-body table[style*="border"] {
    border-color: #454545 !important;
  }
  
  /* ========== IMAGES ========== */
  
  /* Reduce brightness for images in dark mode */
  .article-body img {
    opacity: 0.9;
  }
  
  /* Keep logos and icons at full brightness */
  .logo img,
  .icon img,
  .avatar img {
    opacity: 1 !important;
  }
  
  /* ========== ACCESSIBILITY ========== */
  
  /* Focus indicators */
  *:focus {
    outline-color: #4db8ff !important;
  }
  
  /* Selection highlight */
  ::selection {
    background-color: #4db8ff !important;
    color: #ffffff !important;
  }
  
  ::-moz-selection {
    background-color: #4db8ff !important;
    color: #ffffff !important;
  }
  
  /* ========== SCROLLBARS (Webkit browsers) ========== */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #454545;
    border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555555;
  }
  
  /* ========== PRINT STYLES (Revert to light mode for printing) ========== */
  @media print {
    body,
    .container,
    .article-body {
      background-color: white !important;
      color: black !important;
    }
    
    a {
      color: #0066cc !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
      color: black !important;
    }
  }
  
}

/* ========== END DARK MODE ========== */

/* ========================================
   DARK MODE FIXES - Add after the main dark mode CSS
   Addresses: Article titles, header disconnect, profile page white bar
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: ARTICLE TITLE VISIBILITY ===== */
  /* Make sure article header has dark background so white title is visible */
  
  .article-header,
  .article .article-header {
    background-color: #1a1a1a !important;
  }
  
  /* Ensure article title is always visible */
  .article-title,
  .article .article-title,
  .article-header .article-title,
  h1.article-title {
    color: #ffffff !important;
    background-color: transparent !important;
  }
  
  /* Article header wrapper - ensure no light backgrounds */
  .article-header-wrapper,
  .article-info,
  header.article-header {
    background-color: #1a1a1a !important;
  }
  
  
  /* ===== FIX 2: HEADER BAR - SMOOTH TRANSITION ===== */
  /* Keep the teal header (brand color) but ensure smooth visual flow */
  
  /* Main header - keep teal but slightly darker for consistency */
  .header,
  header.header,
  .header-wrapper {
    background-color: #012251 !important; /* Ontario navy */
    border-bottom: 1px solid #1a1a1a !important;
  }
  
  /* Alternative: If you prefer all-black header, uncomment below and comment above */
  /*
  .header,
  header.header,
  .header-wrapper {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333 !important;
  }
  */
  
  /* Header inner elements */
  .header .container,
  .header-inner {
    background-color: transparent !important;
  }
  
  /* Navigation area directly under header */
  .sub-nav,
  .breadcrumbs-container,
  nav[aria-label="Current location"] {
    background-color: #1a1a1a !important;
    padding-top: 10px;
  }
  
  /* Remove any white gaps */
  body > header,
  body > .header {
    margin-bottom: 0 !important;
  }
  
  main,
  body > main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  
  /* ===== FIX 3: PROFILE PAGE WHITE BAR ===== */
  /* Fix the white bar behind Contributions/Following tabs */
  
  /* Activities header (the white bar area) */
  .my-activities-header,
  header.my-activities-header,
  .activities-header {
    background-color: #1a1a1a !important;
  }
  
  /* Profile navigation tabs */
  .profile-nav,
  .my-activities-nav,
  .activities-nav {
    background-color: #1a1a1a !important;
    border-bottom-color: #333 !important;
  }
  
  /* Individual tab items */
  .profile-nav a,
  .my-activities-nav a,
  .activities-nav a {
    background-color: transparent !important;
    color: #4db8ff !important;
    border-bottom: 2px solid transparent !important;
  }
  
  .profile-nav a:hover,
  .my-activities-nav a:hover,
  .activities-nav a:hover {
    background-color: #2d2d2d !important;
    border-bottom-color: #4db8ff !important;
  }
  
  .profile-nav a.active,
  .my-activities-nav a.active,
  .activities-nav a.active,
  .profile-nav a[aria-selected="true"],
  .my-activities-nav a[aria-selected="true"],
  .activities-nav a[aria-selected="true"] {
    color: #ffffff !important;
    border-bottom-color: #4db8ff !important;
    background-color: #2d2d2d !important;
  }
  
  /* Contributions page specific */
  .contributions-header,
  .subscriptions-header {
    background-color: #1a1a1a !important;
  }
  
  /* Remove any white backgrounds in profile area */
  .profile-header,
  .my-activities,
  .contributions,
  .subscriptions {
    background-color: #1a1a1a !important;
  }
  
  /* Profile page container */
  .profile-container,
  .my-activities-container {
    background-color: #1a1a1a !important;
  }
  
  
  /* ===== ADDITIONAL SAFETY FIXES ===== */
  /* Catch any other potential white backgrounds */
  
/* Ensure no white backgrounds anywhere */
section[class*="header"],
div[class*="header"]:not([class*="article-header"]):not(.header-inner) {
  background-color: #1a1a1a !important;
}
  
  /* Article container should be fully dark */
  .article-container,
  .article-wrapper {
    background-color: #1a1a1a !important;
  }
  
  /* Search container in header area */
  .search-container {
    background-color: transparent !important;
  }
  
  /* Ensure sidebar has no light backgrounds */
  .article-sidebar,
  aside.article-sidebar {
    background-color: #242424 !important;
  }
  
  /* Tab/nav lists should blend with dark background */
  nav ul,
  .nav-list,
  [role="navigation"] ul {
    background-color: transparent !important;
  }
  
  /* Fix any light-colored backgrounds on navigation items */
  nav li,
  .nav-item {
    background-color: transparent !important;
  }
  
  nav li:hover,
  .nav-item:hover {
    background-color: #2d2d2d !important;
  }
  
}

/* ========== END FIXES ========== */

/* ========================================
   DROPDOWN MENU FIXES - Add after previous fixes
   Addresses: Menu text contrast, black boxes, hover readability
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: DROPDOWN MENU TEXT VISIBILITY ===== */
  /* Make dropdown menu items clearly readable */
  
  /* Topics dropdown and all dropdown menus */
  .dropdown-menu,
  .nav-wrapper .dropdown-menu,
  [role="menu"],
  .menu-dropdown {
    background-color: #ffffff !important; /* Keep light background for readability */
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Dropdown menu items - DARK TEXT on LIGHT background */
  .dropdown-menu a,
  .nav-wrapper .dropdown-menu a,
  [role="menu"] a,
  [role="menuitem"],
  .dropdown-menu li,
  .menu-dropdown a {
    color: #333333 !important; /* Dark gray text for contrast */
    background-color: transparent !important;
  }
  
  /* Dropdown hover state - light gray background, keep dark text */
  .dropdown-menu a:hover,
  .nav-wrapper .dropdown-menu a:hover,
  [role="menu"] a:hover,
  [role="menuitem"]:hover,
  .dropdown-menu li:hover,
  .menu-dropdown a:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text on hover */
  }
  
  /* Active/selected dropdown items */
  .dropdown-menu a:active,
  .dropdown-menu a[aria-checked="true"],
  .dropdown-menu .active {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  
  /* ===== FIX 2: REMOVE BLACK BOXES AROUND DROPDOWNS ===== */
  /* Remove unwanted black backgrounds */
  
  /* Dropdown toggle buttons (Topics, Profile name) */
  .dropdown-toggle,
  .nav-wrapper .dropdown-toggle,
  button.dropdown-toggle {
    background-color: transparent !important;
  }
  
  /* Dropdown containers - no black boxes */
  .dropdown,
  .nav-wrapper .dropdown,
  nav .dropdown {
    background-color: transparent !important;
  }
  
  /* Remove any wrapper backgrounds */
  .dropdown-wrapper,
  .menu-wrapper {
    background-color: transparent !important;
  }
  
  
  /* ===== FIX 3: PROFILE DROPDOWN SPECIFIC ===== */
  /* Fix the user profile dropdown menu */
  
  /* Profile dropdown menu */
  .user-nav .dropdown-menu,
  [aria-labelledby*="user"],
  .profile-dropdown .dropdown-menu {
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  /* Profile menu items */
  .user-nav .dropdown-menu a,
  .profile-dropdown .dropdown-menu a {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  /* Profile menu hover - readable */
  .user-nav .dropdown-menu a:hover,
  .profile-dropdown .dropdown-menu a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== FIX 4: NAVIGATION ITEMS CONSISTENCY ===== */
  /* Make sure all top nav items look consistent */
  
  /* Top navigation links (Community, Topics, Submit a request) */
  .header .nav-link,
  .nav-wrapper .nav-link,
  header nav a {
    background-color: transparent !important;
  }
  
  /* Keep header text white/light for visibility on teal */
  .header a,
  .header button,
  .nav-wrapper a,
  .nav-wrapper button {
    color: #ffffff !important;
  }
  
  .header a:hover,
  .header button:hover,
  .nav-wrapper a:hover,
  .nav-wrapper button:hover {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 5: CHEVRON ICONS IN DROPDOWNS ===== */
  /* Ensure dropdown arrows are visible */
  
  .dropdown-toggle svg,
  .dropdown-chevron-icon,
  .chevron-icon {
    color: currentColor !important;
  }
  
  
  /* ===== FIX 6: MOBILE DROPDOWN MENUS ===== */
  /* Fix mobile navigation dropdowns */
  
  @media (max-width: 768px) {
    .menu-list-mobile .dropdown-menu,
    .mobile-nav .dropdown-menu {
      background-color: #ffffff !important;
    }
    
    .menu-list-mobile .dropdown-menu a,
    .mobile-nav .dropdown-menu a {
      color: #333333 !important;
    }
    
    .menu-list-mobile .dropdown-menu a:hover,
    .mobile-nav .dropdown-menu a:hover {
      background-color: #f5f5f5 !important;
      color: #000000 !important;
    }
  }
  
  
  /* ===== FIX 7: SEARCH DROPDOWN (if applicable) ===== */
  /* Fix search suggestions dropdown */
  
  .search-results-dropdown,
  .search-dropdown {
    background-color: #ffffff !important;
  }
  
  .search-results-dropdown a,
  .search-dropdown a {
    color: #333333 !important;
  }
  
  .search-results-dropdown a:hover,
  .search-dropdown a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== FIX 8: ENSURE DROPDOWN POSITIONING ===== */
  /* Make sure dropdowns appear correctly */
  
  .dropdown-menu {
    position: absolute !important;
    z-index: 1000 !important;
  }
  
  /* Remove any dark overlays */
  .dropdown-backdrop,
  .dropdown-overlay {
    display: none !important;
  }
  
}

/* ========== END DROPDOWN FIXES ========== */

/* ========================================
   CUSTOM TOPICS DROPDOWN FIXES - Add after previous dropdown fixes
   Targets the .cat-dropdown custom menu structure
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: REMOVE BLACK BACKGROUND FROM TOPICS BUTTON ===== */
  
  /* Topics button - should be transparent like other nav items */
  .cat-dropdown-btn,
  button.cat-dropdown-btn {
    background-color: transparent !important;
    color: #ffffff !important; /* White text to match other header items */
    border: none !important;
  }
  
  /* Topics button hover */
  .cat-dropdown-btn:hover,
  button.cat-dropdown-btn:hover {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }
  
  /* Topics dropdown container */
  .cat-dropdown {
    background-color: transparent !important;
  }
  
  
  /* ===== FIX 2: MAKE DROPDOWN MENU ITEMS VISIBLE ===== */
  
  /* Topics dropdown content - LIGHT background for readability */
  .cat-dropdown-content,
  .cat-dropdown-content.show {
    background-color: #ffffff !important; /* White background */
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Topics dropdown links - DARK text, always visible */
  .cat-dropdown-content a,
  .cat-dropdown-content.show a {
    color: #333333 !important; /* Dark gray text - always visible */
    background-color: transparent !important;
    display: block !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    opacity: 1 !important; /* Ensure links are always visible */
    visibility: visible !important;
  }
  
  
  /* ===== FIX 3: READABLE HOVER STATES ===== */
  
  /* Topics dropdown hover - LIGHT gray with DARK text */
  .cat-dropdown-content a:hover,
  .cat-dropdown-content.show a:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text for maximum contrast */
    text-decoration: none !important;
  }
  
  /* Active/focus states */
  .cat-dropdown-content a:active,
  .cat-dropdown-content a:focus,
  .cat-dropdown-content.show a:active,
  .cat-dropdown-content.show a:focus {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  
  /* ===== FIX 4: ENSURE TEXT IS NEVER HIDDEN ===== */
  
  /* Override any opacity or visibility rules */
  .cat-dropdown-content a,
  .cat-dropdown-content a span,
  .cat-dropdown-content a *,
  .cat-dropdown-content.show a,
  .cat-dropdown-content.show a span,
  .cat-dropdown-content.show a * {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
  }
  
  /* Ensure no color: transparent or similar issues */
  .cat-dropdown-content {
    color: #333333 !important;
  }
  
  
  /* ===== FIX 5: DROPDOWN POSITIONING & DISPLAY ===== */
  
  /* Make sure dropdown appears correctly */
  .cat-dropdown-content {
    position: absolute !important;
    z-index: 1000 !important;
    min-width: 200px !important;
  }
  
  /* Show dropdown when open */
  .cat-dropdown-content.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== FIX 6: CONSISTENCY WITH OTHER NAV ITEMS ===== */
  
  /* Make sure Topics button looks like other nav items */
  .header .cat-dropdown-btn,
  .nav-wrapper .cat-dropdown-btn {
    font-weight: normal !important;
    font-size: inherit !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
  }
  
  /* Chevron icon in Topics button */
  .cat-dropdown-btn svg,
  .cat-dropdown-btn .dropdown-chevron-icon {
    color: #ffffff !important; /* White to match button text */
  }
  
  .cat-dropdown-btn:hover svg,
  .cat-dropdown-btn:hover .dropdown-chevron-icon {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 7: MOBILE RESPONSIVENESS ===== */
  
  @media (max-width: 768px) {
    .cat-dropdown-content {
      width: 100% !important;
      left: 0 !important;
      right: 0 !important;
    }
    
    .cat-dropdown-content a {
      padding: 12px 16px !important;
      font-size: 14px !important;
    }
  }
  
}

/* ========== END CUSTOM TOPICS DROPDOWN FIXES ========== */

/* ========================================
   USER PROFILE DROPDOWN FIX v2 - PRECISE TARGETING
   Targets a[role="menuitem"] in profile dropdown
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX: TARGET MENU ITEMS BY ROLE ATTRIBUTE ===== */
  
  /* All menu items with role="menuitem" in dropdown */
  a[role="menuitem"],
  [role="menuitem"] {
    color: #333333 !important; /* Dark gray text - ALWAYS visible */
    background-color: transparent !important;
    display: block !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    opacity: 1 !important; /* Force visibility */
    visibility: visible !important; /* Force visibility */
  }
  
  /* Hover state for menuitem links */
  a[role="menuitem"]:hover,
  [role="menuitem"]:hover {
    background-color: #f5f5f5 !important; /* Light gray hover */
    color: #000000 !important; /* Black text for contrast */
    text-decoration: none !important;
  }
  
  /* Focus state for accessibility */
  a[role="menuitem"]:focus,
  [role="menuitem"]:focus {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
    outline: 2px solid #0066cc !important;
  }
  
  
  /* ===== TARGET SPECIFIC MENU ITEMS ===== */
  
  /* Profile link */
  a[role="menuitem"][href*="/profiles/"],
  a[role="menuitem"][href*="profiles"] {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Requests link */
  a[role="menuitem"][href*="/requests"],
  a[role="menuitem"].requests-link,
  .requests-link {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Activities link */
  a[role="menuitem"][href*="/contributions"],
  a[role="menuitem"][href*="contributions/posts"] {
    color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== ENSURE PARENT DROPDOWN IS LIGHT ===== */
  
  /* Target dropdown menu containing role="menuitem" items */
  .dropdown-menu:has(a[role="menuitem"]),
  [role="menu"]:has(a[role="menuitem"]),
  div:has(> a[role="menuitem"]) {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Fallback for browsers that don't support :has() */
  .dropdown-menu,
  [role="menu"] {
    background-color: #ffffff !important;
  }
  
  
  /* ===== FORCE ALL TEXT CONTENT TO BE VISIBLE ===== */
  
  /* Ensure all text within menuitem links is visible */
  a[role="menuitem"] *,
  [role="menuitem"] * {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Override any potential color: transparent or white */
  a[role="menuitem"],
  a[role="menuitem"]:link,
  a[role="menuitem"]:visited {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
  }
  
  /* Hover override */
  a[role="menuitem"]:hover,
  a[role="menuitem"]:hover * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }
  
  
  /* ===== REMOVE ANY HIDING MECHANISMS ===== */
  
  /* Remove display: none or visibility: hidden */
  a[role="menuitem"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }
  
  /* Ensure no clip-path or clip hiding */
  a[role="menuitem"],
  [role="menuitem"] {
    clip-path: none !important;
    clip: auto !important;
  }
  
  
  /* ===== DROPDOWN POSITIONING ===== */
  
  /* Ensure dropdown menu is visible and positioned correctly */
  .dropdown-menu:has(a[role="menuitem"]) {
    position: absolute !important;
    z-index: 1000 !important;
    min-width: 160px !important;
    display: block !important;
  }
  
  /* When dropdown is shown */
  .dropdown-menu.show,
  .dropdown-menu[style*="display: block"] {
    background-color: #ffffff !important;
  }
  
  
  /* ===== SPECIFICITY OVERRIDES ===== */
  
  /* Maximum specificity for stubborn styles */
  .header a[role="menuitem"],
  .nav-wrapper a[role="menuitem"],
  header a[role="menuitem"],
  nav a[role="menuitem"] {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  .header a[role="menuitem"]:hover,
  .nav-wrapper a[role="menuitem"]:hover,
  header a[role="menuitem"]:hover,
  nav a[role="menuitem"]:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  /* Target within any dropdown container */
  .dropdown a[role="menuitem"],
  [class*="dropdown"] a[role="menuitem"] {
    color: #333333 !important;
  }
  
  .dropdown a[role="menuitem"]:hover,
  [class*="dropdown"] a[role="menuitem"]:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  
  /* ===== MOBILE RESPONSIVE ===== */
  
  @media (max-width: 768px) {
    a[role="menuitem"] {
      padding: 12px 16px !important;
      font-size: 14px !important;
    }
  }
  
}

/* ========== END USER PROFILE DROPDOWN FIX v2 ========== */

/* ========================================
   ADDITIONAL DARK MODE FIXES - Round 6
   Add after all previous dark mode CSS
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: PROFILE PAGE ACTIVITY TEXT ===== */
  /* Make activity/contribution text more visible */
  
  .profile-contribution-body,
  .profile-activity-body,
  .activity-body {
    color: #e0e0e0 !important; /* Light grey for readability */
  }
  
  /* Profile contribution items */
  .profile-contribution,
  .profile-activity-item {
    color: #e0e0e0 !important;
  }
  
  /* Any paragraphs in profile sections */
  .profile-section p,
  .activity-section p {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== FIX 2: PROFILE DROPDOWN - REMOVE ALWAYS-VISIBLE BUG ===== */
  /* Fix the dropdown that stays open all the time */
  
  /* CRITICAL: Remove the display: block that was forcing it to always show */
  .dropdown-menu:has(a[role="menuitem"]) {
    display: none !important; /* Hidden by default */
  }
  
  /* ONLY show when it has the .show class */
  .dropdown-menu.show:has(a[role="menuitem"]),
  .dropdown-menu[aria-expanded="true"]:has(a[role="menuitem"]) {
    display: block !important; /* Only visible when open */
  }
  
  /* Alternative targeting for the specific dropdown */
  div[role="menu"].dropdown-menu {
    display: none !important; /* Hidden by default */
  }
  
  div[role="menu"].dropdown-menu.show,
  div[role="menu"].dropdown-menu[aria-expanded="true"] {
    display: block !important; /* Only visible when open */
  }
  
  
  /* ===== FIX 3: MY REQUESTS PAGE - SORTABLE COLUMN HEADERS ===== */
  /* Make "Created" and "Last activity" headers more visible */
  
  /* Sortable column headers */
  .requests-link,
  a.requests-link {
    color: #4db8ff !important; /* Bright blue for visibility */
  }
  
  .requests-link:hover,
  a.requests-link:hover {
    color: #6ec6ff !important; /* Lighter blue on hover */
  }
  
  /* Sort symbol (arrow) */
  .requests-sort-symbol {
    color: #4db8ff !important;
  }
  
  /* Table headers in requests page */
  .requests-table th a {
    color: #4db8ff !important;
  }
  
  
  /* ===== FIX 4: FORM EMAIL PILLS - TEXT VISIBILITY ===== */
  /* Make entered email addresses readable */
  
  /* Email pill container */
  li[data-hc-pill="true"],
  [data-hc-pill="true"] {
    background-color: #3a3a3a !important;
    border-color: #555 !important;
  }
  
  /* Email text inside pill */
  li[data-hc-pill="true"] span,
  [data-hc-pill="true"] span {
    color: #ffffff !important; /* White text */
  }
  
  /* Pills container */
  ul[data-hc-pills-container="true"],
  [data-hc-pills-container="true"] {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  /* Input field inside pills */
  ul[data-hc-pills-container] input[type="text"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: none !important;
  }
  
  
  /* ===== FIX 5: FORM DESCRIPTION TEXT - HINTS AND LABELS ===== */
  /* Make all form helper text more visible */
  
  /* Hint text (paragraphs with *_hint id) */
  p[id*="_hint"],
  .hint,
  .form-hint,
  .field-hint {
    color: #b0b0b0 !important; /* Light grey for helper text */
  }
  
  /* Form labels */
  .form-field label,
  label {
    color: #e0e0e0 !important; /* Bright for labels */
  }
  
  /* Required field indicators */
  .required,
  abbr[title="required"] {
    color: #ff6b6b !important;
  }
  
  /* Form descriptions and instructions */
  .form-description,
  .field-description,
  .form-instructions {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== FIX 6: DROPDOWN MENU SELECTIONS (NESTY) ===== */
  /* Make dropdown options visible before hover */
  
  /* Nesty input (dropdown trigger) */
  .nesty-input,
  a.nesty-input {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .nesty-input:hover,
  a.nesty-input:hover {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
  }
  
  /* Nesty panel (dropdown menu) */
  .nesty-panel {
    background-color: #ffffff !important; /* Light background for readability */
    border-color: #ddd !important;
  }
  
  /* Nesty options - ALWAYS VISIBLE */
  .nesty-panel li,
  .nesty-panel a,
  .nesty-panel div {
    color: #333333 !important; /* Dark text on light background */
    background-color: transparent !important;
  }
  
  /* Nesty hover state */
  .nesty-panel li:hover,
  .nesty-panel a:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
  }
  
  /* Nesty focused/selected item */
  .nesty-panel li.kb-focused,
  .nesty-panel li[aria-selected="true"] {
    background-color: #e8f4f8 !important;
    color: #0066cc !important;
  }
  
  /* Ensure nesty items are visible */
  .nesty-panel li,
  .nesty-panel div {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  
  /* ===== ADDITIONAL FORM FIXES ===== */
  /* Catch any other form elements that might be hard to read */
  
  /* All form inputs */
  .request-form input:not([type="checkbox"]):not([type="radio"]),
  .request-form textarea,
  .request-form select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  /* Form input focus state */
  .request-form input:focus,
  .request-form textarea:focus,
  .request-form select:focus {
    background-color: #333333 !important;
    border-color: #4db8ff !important;
  }
  
  /* Placeholder text */
  .request-form input::placeholder,
  .request-form textarea::placeholder {
    color: #888 !important;
  }
  
  /* Form field wrappers */
  .form-field {
    background-color: transparent !important;
  }
  
  /* Error messages */
  .error-message,
  .field-error,
  [id*="_error"] {
    color: #ff6b6b !important;
  }
  
  
  /* ===== PROFILE PAGE ADDITIONAL FIXES ===== */
  /* Ensure all profile text is readable */
  
  /* Activity items */
  .activity-item,
  .contribution-item {
    background-color: #2d2d2d !important;
    border-color: #454545 !important;
  }
  
  .activity-item:hover,
  .contribution-item:hover {
    background-color: #3a3a3a !important;
  }
  
  /* Activity timestamps */
  .activity-timestamp,
  .contribution-timestamp {
    color: #b0b0b0 !important;
  }
  
  /* Activity titles/links */
  .activity-title,
  .contribution-title {
    color: #4db8ff !important;
  }
  
  
  /* ===== TABLE IMPROVEMENTS ===== */
  /* Improve all table headers that might be links */
  
  /* Table header links */
  th a,
  thead a {
    color: #4db8ff !important;
  }
  
  th a:hover,
  thead a:hover {
    color: #6ec6ff !important;
  }
  
  
  /* ===== SEPARATOR VISIBILITY ===== */
  /* Make dropdown separators visible */
  
  .separator[role="separator"],
  .dropdown-menu .separator {
    border-top: 1px solid #ddd !important;
    margin: 5px 0 !important;
  }
  
}

/* ========== END ROUND 6 FIXES ========== */


/* ========================================
   ADDITIONAL DARK MODE FIXES - Round 7
   Add after Round 6 fixes
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== FIX 1: PROFILE DROPDOWN - MAKE IT WORK AGAIN ===== */
  /* Fix the dropdown so it opens when clicked */
  
  /* REVERT the display: none from Round 6 - it broke the dropdown */
  /* Instead, rely on Zendesk's JavaScript to manage visibility */
  
  /* Remove the forced display: none */
  .dropdown-menu:has(a[role="menuitem"]) {
    display: none; /* Not !important - allow JS to override */
  }
  
  /* Show when aria-expanded is true OR when .show class is present */
  .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
  .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu,
  button[aria-expanded="true"] + .dropdown-menu,
  button[aria-expanded="true"] ~ .dropdown-menu {
    display: block !important;
  }
  
  /* Also show when .show class is present */
  .dropdown-menu.show {
    display: block !important;
  }
  
  /* User dropdown specific - using the button ID pattern */
  .user-info.dropdown .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
  .user-info.dropdown button[aria-expanded="true"] + .dropdown-menu {
    display: block !important;
  }
  
  /* Ensure dropdown menu stays light with dark text */
  .user-info .dropdown-menu {
    background-color: #ffffff !important;
  }
  
  
  /* ===== FIX 2: PROFILE ACTIVITY TEXT - STRONGER SELECTORS ===== */
  /* Make profile contribution body text more visible */
  
  /* Target the specific profile contribution structure */
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution .profile-contribution-body,
  p.profile-contribution-body {
    color: #e0e0e0 !important; /* Light grey for readability */
    background-color: transparent !important;
  }
  
  /* All text content within profile contributions */
  .profile-activity-contribution,
  .profile-contribution {
    color: #e0e0e0 !important;
  }
  
  /* Profile contribution headers */
  .profile-contribution-header {
    background-color: transparent !important;
  }
  
  /* Profile contribution title */
  .profile-contribution-title {
    color: #ffffff !important;
  }
  
  .profile-contribution-title a {
    color: #4db8ff !important;
  }
  
  /* Profile contribution breadcrumbs */
  .profile-contribution-breadcrumbs {
    color: #b0b0b0 !important;
  }
  
  .profile-contribution-breadcrumbs a {
    color: #4db8ff !important;
  }
  
  /* Meta data in contributions */
  .profile-contribution .meta-data,
  .profile-activity-contribution .meta-data {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== FIX 3: EMAIL SIGNATURES IN COMMENTS ===== */
  /* Override inline styles in email signatures to make them readable */
  
  /* Target comment body section */
  .comment-body,
  section.comment-body {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }
  
  /* Override all inline color styles in comments */
  .comment-body *[style*="color"],
  .zd-comment *[style*="color"],
  .zd-comment-pre-styled *[style*="color"] {
    color: #e0e0e0 !important; /* Override ALL inline colors */
  }
  
  /* Override inline background colors in comments */
  .comment-body *[style*="background"],
  .zd-comment *[style*="background"],
  .zd-comment-pre-styled *[style*="background"] {
    background-color: transparent !important;
  }
  
  /* Specific targeting for email signature tables */
  .comment-body table,
  .comment-body table[style],
  .zd-comment table,
  .zd-comment table[style] {
    background-color: transparent !important;
    border-color: #454545 !important;
  }
  
  .comment-body table td,
  .comment-body table td[style],
  .comment-body table span,
  .comment-body table span[style],
  .zd-comment table td,
  .zd-comment table td[style],
  .zd-comment table span,
  .zd-comment table span[style] {
    color: #e0e0e0 !important; /* Force light color */
    background-color: transparent !important;
  }
  
  /* Email signature paragraphs */
  .comment-body p,
  .comment-body p[style],
  .zd-comment p,
  .zd-comment p[style] {
    color: #e0e0e0 !important;
  }
  
  /* Links in comments should be visible */
  .comment-body a,
  .zd-comment a {
    color: #4db8ff !important;
  }
  
  .comment-body a:hover,
  .zd-comment a:hover {
    color: #6ec6ff !important;
  }
  
  /* Bold text in signatures */
  .comment-body b,
  .comment-body strong,
  .zd-comment b,
  .zd-comment strong {
    color: #ffffff !important;
  }
  
  /* Divs with inline styles in comments */
  .comment-body div[style],
  .zd-comment div[style],
  .zd-comment-pre-styled div[style] {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }
  
  /* Override color: black specifically (common in email signatures) */
  .comment-body *[style*="color: black"],
  .comment-body *[style*="color:black"],
  .comment-body *[style*="color:#000"],
  .zd-comment *[style*="color: black"],
  .zd-comment *[style*="color:black"],
  .zd-comment *[style*="color:#000"] {
    color: #e0e0e0 !important;
  }
  
  /* Override color: currentcolor (common in links) */
  .comment-body *[style*="color: currentcolor"],
  .comment-body *[style*="color:currentcolor"],
  .zd-comment *[style*="color: currentcolor"],
  .zd-comment *[style*="color:currentcolor"] {
    color: #4db8ff !important;
  }
  
  /* Override specific RGB colors that might be too dark */
  .comment-body *[style*="color: rgb"],
  .zd-comment *[style*="color: rgb"] {
    color: #e0e0e0 !important;
  }
  
  /* Comment container background */
  .comment {
    background-color: #242424 !important;
    border-color: #454545 !important;
  }
  
  .comment:hover {
    background-color: #2d2d2d !important;
  }
  
  /* Comment info section */
  .comment-info {
    border-bottom-color: #454545 !important;
  }
  
  /* Comment author name */
  .comment-author a {
    color: #4db8ff !important;
  }
  
  /* Comment meta data */
  .comment-meta .meta-data {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== ADDITIONAL SAFETY OVERRIDES ===== */
  /* Catch any other potential inline style issues */
  
  /* Override white text on white background */
  .comment-body *[style*="color: white"],
  .comment-body *[style*="color:#fff"],
  .comment-body *[style*="color: #fff"],
  .zd-comment *[style*="color: white"],
  .zd-comment *[style*="color:#fff"],
  .zd-comment *[style*="color: #fff"] {
    color: #ffffff !important; /* Keep white text white */
  }
  
  /* Force visibility of all comment content */
  .comment-body *,
  .zd-comment * {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Remove any potential hiding mechanisms */
  .comment-body,
  .zd-comment {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
}

/* ========== END ROUND 7 FIXES ========== */

/* ========================================
   PROFILE ACTIVITY TEXT FIX - Round 8
   Add after Round 6 and Round 7
   Dark text for white activity boxes
   ======================================== */

@media (prefers-color-scheme: dark) {
  
  /* ===== PROFILE ACTIVITY BOXES - WHITE BACKGROUND ===== */
  /* These boxes have white backgrounds, so text needs to be DARK */
  
  /* Profile contribution container - ensure white background */
  .profile-activity-contribution,
  .profile-contribution {
    background-color: #ffffff !important; /* White boxes */
    border: 1px solid #ddd !important;
  }
  
  /* Profile contribution body text - DARK on WHITE */
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution .profile-contribution-body,
  p.profile-contribution-body {
    color: #333333 !important; /* Dark grey for readability on white */
    background-color: transparent !important;
  }
  
  /* Profile contribution header - white background */
  .profile-contribution-header {
    background-color: #ffffff !important;
  }
  
  /* Profile contribution title - dark on white */
  .profile-contribution-title {
    color: #1a1a1a !important;
  }
  
  /* Profile contribution title links - blue */
  .profile-contribution-title a {
    color: #0066cc !important;
  }
  
  .profile-contribution-title a:hover {
    color: #0A52A2 !important;
  }
  
  /* Profile contribution breadcrumbs - dark on white */
  .profile-contribution-breadcrumbs {
    color: #666666 !important;
  }
  
  .profile-contribution-breadcrumbs a {
    color: #0066cc !important;
  }
  
  /* Meta data in contributions - medium grey on white */
  .profile-contribution .meta-data,
  .profile-activity-contribution .meta-data {
    color: #666666 !important;
  }
  
  /* Meta group container */
  .profile-contribution .meta-group,
  .profile-activity-contribution .meta-group {
    background-color: transparent !important;
  }
  
  
  /* ===== PROFILE ACTIVITY HEADER (OUTSIDE BOXES) ===== */
  /* This is the dark area with "Tom S created an article" */
  
  .profile-activity-header {
    background-color: transparent !important;
  }
  
  .profile-activity-description {
    color: #e0e0e0 !important; /* Light text on dark background */
  }
  
  .profile-activity-description span {
    color: #ffffff !important;
  }
  
  
  /* ===== PROFILE SECTION HEADERS ===== */
  /* "Activity overview" heading area */
  
  .profile-section-header {
    background-color: transparent !important;
  }
  
  .profile-section-title {
    color: #ffffff !important;
  }
  
  .profile-section-description {
    color: #b0b0b0 !important;
  }
  
  
  /* ===== PROFILE ACTIVITY LIST ===== */
  /* The container for all activities */
  
  .profile-activity-list {
    background-color: transparent !important;
  }
  
  .profile-activity-list li {
    background-color: transparent !important;
  }
  
  /* Profile activity item (the whole item with icon and box) */
  .profile-activity {
    background-color: transparent !important;
  }
  
  /* Profile activity icon */
  .profile-activity-icon {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-icon svg {
    color: #e0e0e0 !important;
  }
  
  
  /* ===== ENSURE CONTRAST ===== */
  /* Make sure all text is readable */
  
  /* Any paragraph in the white contribution boxes */
  .profile-contribution p,
  .profile-activity-contribution p {
    color: #333333 !important;
  }
  
  /* Any div in the white contribution boxes */
  .profile-contribution div,
  .profile-activity-contribution div {
    color: inherit;
  }
  
  /* Strong/bold text in contributions */
  .profile-contribution strong,
  .profile-contribution b {
    color: #1a1a1a !important;
  }
  
}

/* ========== END ROUND 8 FIX ========== */


/* ============================================
   ESTIMATED READING TIME
   ============================================
   Displays reading time in article metadata
   Styled to match existing meta-data elements
*/

.reading-time {
  display: inline-flex;
  align-items: center;
  font-weight: 500; /* Slightly bolder to stand out */
}

.reading-time-icon svg {
  display: inline-block;
  opacity: 0.7;
}

/* Ensure reading time is visible in both light and dark modes */
.reading-time {
  color: inherit; /* Uses the same color as other meta-data */
}

/* Hover effect for better interactivity */
.reading-time:hover .reading-time-icon svg {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Mobile optimization - ensure icon scales properly */
@media (max-width: 768px) {
  .reading-time {
    font-size: inherit; /* Match parent font size */
  }
  
  .reading-time-icon svg {
    width: 11px;
    height: 11px;
  }
}

/* Print styles - include reading time in print but hide progress bar */
@media print {
  .reading-progress-bar {
    display: none;
  }
  
  .reading-time {
    display: inline-flex;
  }
}


/* ============================================
   OPTIONAL ENHANCEMENTS
   ============================================
   Uncomment these if you want additional features
*/

/* Animated pulse on page load to draw attention to progress bar */
/*
@keyframes progress-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.reading-progress-bar {
  animation: progress-pulse 2s ease-in-out 1;
}
*/

/* Alternative: Solid color progress bar (simpler look) */
/*
.reading-progress-bar {
  background: #0070B9; 
  background: var(--brand-color, #0070B9);
}

.reading-progress-bar::after {
  display: none;
}
*/

/* Alternative: Rounded edge on progress bar */
/*
.reading-progress-bar {
  border-radius: 0 0 4px 0;
}
*/
/* Hide Trending Topics section for Ontario MVP */
.other-guides {
  display: none !important;
}
/* ============================================
   ONTARIO THEME CUSTOMIZATIONS
   Add these rules to the END of your style.css
   ============================================ */

/* Hide Trending Topics section */
.other-guides {
  display: none !important;
}

/* Update hero section gradient to Ontario colors */
.hero {
  background: linear-gradient(135deg, #050A51 0%, #1F94D3 100%) !important;
}

/* Section header styling with Ontario gradient background */
.section-header,
.category-header,
section.section h3 {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 20px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

.section-header a,
.category-header a,
section.section h3 a {
  color: #FFFFFF !important;
}

.section-header a:hover,
.category-header a:hover,
section.section h3 a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
}

/* Section page headers (like "Getting Started" page) */
.section-page .section-header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 40px 20px;
  margin: -40px -20px 40px;
  border-radius: 0;
}

.section-page .section-title {
  color: #FFFFFF !important;
  font-size: 36px;
  margin: 0;
}

.section-page .section-description {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 10px;
}

/* Category page headers */
.category-page .category-header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 40px 20px;
  margin: -40px -20px 40px;
  border-radius: 0;
}

.category-page .category-title {
  color: #FFFFFF !important;
  font-size: 36px;
  margin: 0;
}

/* Ensure section cards have proper styling */
.section-tree .section {
  background-color: #414771;
  border: 1px solid rgba(90, 174, 253, 0.3);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.section-tree .section:hover {
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.15);
}

.section-tree .section h3 {
  margin: 0;
  border-radius: 8px 8px 0 0;
}

.section-tree .section ul {
  padding: 20px;
}

/* Dark mode adjustments for section headers */
@media (prefers-color-scheme: dark) {
  .section-tree .section {
    background-color: #242424;
    border-color: #454545;
  }
  
  .section-header,
  .category-header,
  section.section h3 {
    /* Keep gradient in dark mode - it looks good */
    background: linear-gradient(135deg, #050A51 0%, #1F94D3 100%);
  }
}
/* Fix header bar to use Ontario colors */
.header {
  background-color: #012251 !important; /* Smith Midnight Blue */
}

/* Ensure nav items are white */
.header a,
.header .menu-button-mobile {
  color: #FFFFFF !important;
}

/* Header hover states */
.header a:hover,
.header a:focus {
  color: rgba(255, 255, 255, 0.9) !important;
}
/* ============================================
   ONTARIO HEADER FIXES - COMPLETE
   Replace your previous header CSS with this
   ============================================ */

/* Header background - full width */
.header {
  background-color: #012251 !important;
  padding: 0 !important;
}

/* Header inner - constrained width for content */
.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent !important;
}

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

/* Remove conflicting full-width CSS */
#global-header {
  width: 100% !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #012251 !important;
}

/* Logo positioning */
.logo {
  flex-shrink: 0;
}

/* Navigation wrapper */
.nav-wrapper-desktop {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: transparent !important;
}

.nav-wrapper-mobile {
  background-color: transparent !important;
}

/* User nav list */
.user-nav-list {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav links styling */
.user-nav-list a {
  color: #FFFFFF !important;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 14px;
}

.user-nav-list a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-decoration: none;
}

/* ============================================
   TOPICS DROPDOWN FIXES
   ============================================ */

/* Topics Dropdown Container */
.cat-dropdown {
  position: relative;
  display: inline-block;
}

/* Topics Button */
.cat-dropdown-btn {
  background-color: transparent;
  border: none;
  color: #FFFFFF !important;
  cursor: pointer;
  font-size: 14px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.2s ease;
}

.cat-dropdown-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* Dropdown chevron */
.cat-dropdown-btn .dropdown-chevron-icon {
  transition: transform 0.3s ease;
}

.cat-dropdown-btn[aria-expanded="true"] .dropdown-chevron-icon {
  transform: rotate(180deg);
}

/* Dropdown Content - FIXED CONTRAST */
.cat-dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFFFFF !important;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 4px;
  z-index: 1000;
  top: 100%;
  left: 0;
  margin-top: 5px;
  border: 1px solid #ddd;
}

.cat-dropdown-content.show {
  display: block;
}

/* Dropdown Links - FIXED CONTRAST */
.cat-dropdown-content a {
  color: #333333 !important; /* Dark text on white background */
  background-color: #FFFFFF !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background-color 0.2s ease;
  border: none !important;
}

.cat-dropdown-content a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important; /* Ontario blue on hover */
  text-decoration: none;
}

.cat-dropdown-content a:first-child {
  border-radius: 4px 4px 0 0;
}

.cat-dropdown-content a:last-child {
  border-radius: 0 0 4px 4px;
}

/* ============================================
   PROFILE DROPDOWN FIXES
   ============================================ */

/* User info dropdown button */
.user-info .dropdown-toggle {
  color: #FFFFFF !important;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info .dropdown-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.user-info .dropdown-toggle span {
  color: #FFFFFF !important;
}

.user-info .dropdown-toggle .dropdown-chevron-icon {
  stroke: #FFFFFF;
}

/* Profile dropdown menu - FIXED CONTRAST */
.user-info .dropdown-menu {
  background-color: #FFFFFF !important;
  border: 1px solid #ddd;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 4px;
  min-width: 180px;
  margin-top: 5px;
}

.user-info .dropdown-menu a {
  color: #333333 !important; /* Dark text on white background */
  background-color: #FFFFFF !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.user-info .dropdown-menu a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important; /* Ontario blue on hover */
  text-decoration: none;
}

.user-info .dropdown-menu .separator {
  height: 1px;
  background-color: #ddd;
  margin: 8px 0;
}

/* ============================================
   MOBILE MENU
   ============================================ */

.menu-list-mobile {
  background-color: #FFFFFF !important;
}

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

.menu-list-mobile-items .item a {
  color: #333333 !important;
  padding: 12px 20px;
  display: block;
  text-decoration: none;
}

.menu-list-mobile-items .item a:hover {
  background-color: #f5f5f5 !important;
  color: #0A52A2 !important;
  text-decoration: none;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
  .header {
    background-color: #012251 !important; /* Keep Ontario blue in dark mode */
  }
  
  /* Dropdown menus stay white for contrast */
  .cat-dropdown-content,
  .user-info .dropdown-menu {
    background-color: #FFFFFF !important;
  }
  
  .cat-dropdown-content a,
  .user-info .dropdown-menu a {
    color: #333333 !important;
  }
}


/* ============================================
   PHOSPHOR ICONS CONFIGURATION
   ============================================ */

/* Base icon class */
.ph {
  font-family: 'Phosphor' !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bold variant */
.ph-bold {
  font-family: 'Phosphor-Bold' !important;
  font-weight: 700;
}

/* Fill variant */
.ph-fill {
  font-family: 'Phosphor-Fill' !important;
}

/* Icon sizing */
.ph-sm { font-size: 16px; }
.ph-md { font-size: 20px; }
.ph-lg { font-size: 24px; }
.ph-xl { font-size: 32px; }


/* ============================================
   ONTARIO HERO BACKGROUNDS - CATALYST INSPIRED
   Pick ONE option by uncommenting it
   ============================================ */

/* ============================================
   OPTION 1: DIAGONAL LINES (CATALYST STYLE)
   Most similar to Catalyst screenshot
   ============================================ */
/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

/* Animated diagonal light streaks */
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 80px,
    rgba(255, 255, 255, 0.04) 80px,
    rgba(255, 255, 255, 0.04) 160px
  );
  animation: diagonalSlide 40s linear infinite;
  pointer-events: none;
}

@keyframes diagonalSlide {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(160px) translateY(160px);
  }
}

/* Subtle glow accent */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(107, 195, 231, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Ensure logo stays on top */
.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

/* Make logo larger */
.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Responsive sizing */
@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/

/* ============================================
   OPTION 2: FLOWING DATA WAVES
   More dynamic wave movement
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.03) 100px,
      rgba(255, 255, 255, 0.03) 200px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 60px,
      rgba(255, 255, 255, 0.02) 60px,
      rgba(255, 255, 255, 0.02) 120px
    );
  animation: waveFlow 30s linear infinite;
  pointer-events: none;
}

@keyframes waveFlow {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(200px) translateY(-100px);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(57, 176, 225, 0.2) 0%, transparent 70%);
  animation: floatGlow 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatGlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(50px, -30px) scale(1.3);
    opacity: 0.6;
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/


/* ============================================
   OPTION 3: TECH GRID WITH LIGHT BEAMS
   Similar to Catalyst but with grid overlay
   ============================================ */

/*
.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -100%;
  right: -50%;
  width: 200%;
  height: 300%;
  background-image: 
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.03) 100px,
      rgba(255, 255, 255, 0.03) 102px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 100px,
      rgba(255, 255, 255, 0.02) 100px,
      rgba(255, 255, 255, 0.02) 102px
    );
  animation: gridSlide 50s linear infinite;
  pointer-events: none;
}

@keyframes gridSlide {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  100% {
    transform: translateX(100px) translateY(100px) rotate(2deg);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(57, 176, 225, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(18, 117, 191, 0.12) 0%, transparent 50%);
  animation: lightShift 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lightShift {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}
*/


/* ============================================
   OPTION 4: SPEED LINES (FASTEST MOTION)
   High-energy streaking lines
   ============================================ */


.hero {
  background: linear-gradient(90deg, #050A51 0%, #1F94D3 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: repeating-linear-gradient(
    -30deg,
    transparent,
    transparent 120px,
    rgba(255, 255, 255, 0.05) 120px,
    rgba(255, 255, 255, 0.05) 125px,
    transparent 125px,
    transparent 250px
  );
  animation: speedLines 25s linear infinite;
  pointer-events: none;
}

@keyframes speedLines {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(250px);
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20%;
  width: 600px;
  height: 300px;
  background: linear-gradient(90deg, transparent 0%, rgba(107, 195, 231, 0.1) 50%, transparent 100%);
  transform: translateY(-50%) skewX(-15deg);
  animation: sweepLight 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sweepLight {
  0%, 100% {
    opacity: 0;
    transform: translateY(-50%) translateX(-100px) skewX(-15deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) translateX(100px) skewX(-15deg);
  }
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 40px 20px;
}

.hero-inner img {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 0 !important;
  }
  .hero-inner img {
    max-width: 400px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner img {
    max-width: 500px !important;
  }
}

/* ============================================
   ONTARIO COMMUNITY BANNER - FIXED
   No horizontal overflow + Inverted colors
   ============================================ */

/* Hide the default community-image div (Catalyst banner) */
.community-image {
  display: none !important;
}

/* Ensure no horizontal overflow from community section */
.home-section.community {
  text-align: center;
  background: #F5F7FA;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(10, 82, 162, 0.1);
  border: 2px solid #E5F4F9;
  max-width: 100%;
  box-sizing: border-box;
}

/* Subtle blue accent gradient on edges */
.home-section.community::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, rgba(10, 82, 162, 0.03) 0%, transparent 20%, transparent 80%, rgba(57, 176, 225, 0.03) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Decorative accent bar at top */
.home-section.community::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #050A51 0%, #0A52A2 50%, #1F94D3 100%);
  z-index: 0;
}

/* Community content styling */
.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

/* Call-to-action button - Blue gradient */
.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
  color: #FFFFFF !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .home-section.community {
    padding: 40px 20px;
    margin: 30px 0;
  }
  
  .home-section.community h2 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  
  .home-section.community p {
    font-size: 16px !important;
    padding: 0 10px 20px 10px !important;
  }
  
  .community-link {
    padding: 12px 24px;
    font-size: 15px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .home-section.community h2 {
    font-size: 28px;
  }
}

/* Fix any potential overflow from parent containers */
.container {
  max-width: 100%;
  overflow-x: hidden;
}


/* ============================================
   ALTERNATIVE: WHITE WITH BLUE ACCENTS
   Clean white card style
   ============================================ */

/*
.community-image {
  display: none !important;
}

.home-section.community {
  text-align: center;
  background: #FFFFFF;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(10, 82, 162, 0.12);
  border: 3px solid #050A51;
  max-width: 100%;
  box-sizing: border-box;
}

.home-section.community::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 6px;
  background: linear-gradient(90deg, #050A51 0%, #0A52A2 50%, #1F94D3 100%);
  z-index: 0;
}

.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}
*/


/* ============================================
   ALTERNATIVE: SUBTLE PATTERN BACKGROUND
   Light grey with dot pattern
   ============================================ */


.community-image {
  display: none !important;
}

.home-section.community {
  text-align: center;
  background: 
    radial-gradient(circle, rgba(10, 82, 162, 0.05) 1px, transparent 1px);
  background-color: #F8F9FA;
  background-size: 20px 20px;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(10, 82, 162, 0.08);
  border-top: 4px solid #050A51;
  border-bottom: 4px solid #1F94D3;
  max-width: 100%;
  box-sizing: border-box;
}

.home-section.community h2 {
  color: #0A52A2 !important;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.home-section.community p {
  color: #333333 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.community-link {
  display: inline-block;
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF !important;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.25);
}

.community-link:hover {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 82, 162, 0.35);
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================
   ONTARIO - SECTION PAGE SPACING
   Adds space above article list on section pages
   ============================================ */

/* Add space above article list on section pages only */
.section-content > .article-list {
  margin-top: 40px;
}

/* Ensure cards align at top and have consistent heights */
.section-content .article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.section-content .article-list-item {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Keep homepage sections unaffected */
.knowledge-base .article-list {
  margin-top: 0;
}

/* ============================================
   ONTARIO SITE-WIDE ENHANCEMENTS (FINAL v2)
   Underline animation + Blue buttons + Colored hover backgrounds
   ============================================ */

/* ===== 1. SECTION ICONS (HOMEPAGE ONLY) ===== */

/* Icons now handled by Phosphor Icons in home_page.hbs template */
/* Emoji ::before content removed - white Phosphor icons display instead */

/* Getting Started - Now uses Phosphor ph-rocket-launch */
.knowledge-base .section a[href*="Getting-Started"]::before {
  content: '';
}

/* Project Management - Now uses Phosphor ph-kanban */
.knowledge-base .section a[href*="Project-Management"]::before {
  content: '';
}

/* Files and Folders - Now uses Phosphor ph-folder-open */
.knowledge-base .section a[href*="Files-and-Folders"]::before {
  content: '';
}

/* Tasks and Workflows - Now uses Phosphor ph-list-checks */
.knowledge-base .section a[href*="Tasks-and-Workflows"]::before {
  content: '';
}

/* User Management - Now uses Phosphor ph-users-three */
.knowledge-base .section a[href*="User-Management"]::before {
  content: '';
}

/* Notifications & Help - Now uses Phosphor ph-bell-ringing */
.knowledge-base .section a[href*="Notifications-Help"]::before {
  content: '';
}

/* NO ICONS IN BREADCRUMBS */
.breadcrumbs a::before {
  content: none !important;
}


/* ===== 2. HOMEPAGE CARD STRUCTURE WITH COLORED HOVER BACKGROUNDS ===== */

/* Section cards - white background */
.knowledge-base .section {
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  background: #414771;
  border: 1px solid rgba(90, 174, 253, 0.3);
}

/* Hover effect - lift, shadow, and colored background */
.knowledge-base .section:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(10, 82, 162, 0.15);
}

/* Unique hover background colors for each section */
.knowledge-base .section:nth-child(1):hover {
  background: rgba(10, 82, 162, 0.05); /* Getting Started - Very light deep blue */
}

.knowledge-base .section:nth-child(2):hover {
  background: rgba(18, 117, 191, 0.05); /* Project Management - Very light medium blue */
}

.knowledge-base .section:nth-child(3):hover {
  background: rgba(57, 176, 225, 0.05); /* Files and Folders - Very light light blue */
}

.knowledge-base .section:nth-child(4):hover {
  background: rgba(31, 148, 211, 0.05); /* Tasks and Workflows - Very light blue-500 */
}

.knowledge-base .section:nth-child(5):hover {
  background: rgba(7, 43, 125, 0.05); /* User Management - Very light blue-800 */
}

.knowledge-base .section:nth-child(6):hover {
  background: rgba(107, 195, 231, 0.05); /* Notifications & Help - Very light bright blue */
}

/* Section header hover effect */
.knowledge-base .section h3 {
  transition: background 0.3s ease;
}

.knowledge-base .section:hover h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%);
}


/* ===== 3. SECTION PAGE HEADER STYLING ===== */

/* Section page header bar */
.section-page header,
.category-page header {
  background: #4991D6; /* gradient removed for Smith */
  color: #FFFFFF;
  padding: 30px 40px;
  margin-bottom: 40px;
  border-radius: 8px;
}

.section-page header h1,
.category-page header h1 {
  color: #FFFFFF !important;
  margin: 0;
  font-size: 32px;
}

/* Apply gradient variations to section page headers */
body[class*="section-42679658758925"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Getting Started */
}

body[class*="section-42679681047053"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Project Management */
}

body[class*="section-42679711032589"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Files and Folders */
}

body[class*="section-42679693922189"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Tasks and Workflows */
}

body[class*="section-42679736498573"] header {
  background: #4991D6; /* gradient removed for Smith */ /* User Management */
}

body[class*="section-42679701344781"] header {
  background: #4991D6; /* gradient removed for Smith */ /* Notifications & Help */
}


/* ===== 4. HOMEPAGE SECTION HEADER GRADIENTS ===== */

/* Base gradient for all homepage section headers */
.knowledge-base .section h3 {
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%);
  color: #FFFFFF;
  padding: 20px;
  margin: 0;
  border-radius: 8px 8px 0 0;
}

/* Unique gradients for each homepage section */
.knowledge-base .section:nth-child(1) h3 {
  background: linear-gradient(135deg, #050A51 0%, #0A52A2 100%); /* Getting Started */
}

.knowledge-base .section:nth-child(2) h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1275BF 100%); /* Project Management */
}

.knowledge-base .section:nth-child(3) h3 {
  background: linear-gradient(135deg, #1275BF 0%, #1F94D3 100%); /* Files and Folders */
}

.knowledge-base .section:nth-child(4) h3 {
  background: linear-gradient(135deg, #0A52A2 0%, #1F94D3 100%); /* Tasks and Workflows */
}

.knowledge-base .section:nth-child(5) h3 {
  background: linear-gradient(135deg, #050A51 0%, #1275BF 100%); /* User Management */
}

.knowledge-base .section:nth-child(6) h3 {
  background: linear-gradient(135deg, #1F94D3 0%, #39B0E1 100%); /* Notifications & Help */
}


/* ===== 5. ARTICLE CARD HOVER EFFECTS (SECTION PAGES) ===== */

/* Article cards on section pages */
.section-content .article-list-item {
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 20px;
  background: #F8F9FA;
  border: 1px solid #E5E5E5;
}

.section-content .article-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 82, 162, 0.1);
  background: #FFFFFF;
  border-color: #0A52A2;
}


/* ===== 6. LINK STYLING - UNDERLINE ANIMATION ===== */

/* Article links with animated underline */
.article-list a,
.article-list-link {
  color: #1275BF;
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* Animated underline */
.article-list a::after,
.article-list-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.article-list a:hover::after,
.article-list-link:hover::after {
  width: 100%;
}

.article-list a:hover,
.article-list-link:hover {
  color: #0A52A2;
  text-decoration: none;
}

/* Homepage article links */
.knowledge-base .section .article-list a {
  display: block;
  padding: 8px 0;
}


/* ===== 7. BREADCRUMB STYLING ===== */

/* Clean breadcrumbs */
.breadcrumbs {
  margin-bottom: 20px;
  font-size: 14px;
}

.breadcrumbs a {
  color: #1275BF;
  position: relative;
  text-decoration: none;
}

/* Animated underline for breadcrumbs */
.breadcrumbs a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.breadcrumbs a:hover::after {
  width: 100%;
}

.breadcrumbs a:hover {
  color: #0A52A2;
}


/* ===== 8. READ MORE BUTTONS - PRIMARY BLUE ===== */

/* Primary blue button with hover effect */
.article-read-more {
  display: inline-block;
  background-color: #050A51; /* Primary deep blue */
  color: #FFFFFF !important;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: 10px;
  border: none;
}

.article-read-more:hover {
  background-color: #0A52A2; /* Lighter blue on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5, 10, 81, 0.3);
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* "See all articles" link */
.see-all-articles {
  color: #0A52A2;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  display: inline-block;
}

/* Animated underline for see all link */
.see-all-articles::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #050A51;
  transition: width 0.3s ease;
}

.see-all-articles:hover::after {
  width: 100%;
}

.see-all-articles:hover {
  color: #050A51;
  text-decoration: none;
}


/* ===== 9. HOMEPAGE SECTION CONTENT STRUCTURE ===== */

/* Homepage section content area */
.knowledge-base .section > div {
  padding: 20px;
}


/* ===== 10. RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  /* Smaller icons on mobile */
  .knowledge-base .section h3 a::before {
    font-size: 16px;
    margin-right: 6px;
  }
  
  /* Less dramatic hovers on mobile */
  .knowledge-base .section:hover {
    transform: translateY(-2px);
  }
  
  .section-content .article-list-item:hover {
    transform: translateY(-1px);
  }
  
  /* Smaller section page headers */
  .section-page header,
  .category-page header {
    padding: 20px;
  }
  
  .section-page header h1,
  .category-page header h1 {
    font-size: 24px;
  }
}


/* ============================================
   FINAL DESIGN FEATURES:
   
   ✅ Animated underline on all links
   ✅ Primary blue (#0A52A2) buttons
   ✅ Colored background on card hover (matches section color)
   ✅ Blue gradient headers (maintained)
   ✅ Icons on homepage sections
   ✅ Card lift + shadow hover effects
   ✅ Clean white cards (not blue overload)
   ✅ Each section has unique visual identity
   
   ⚠️  Dark mode support NOT included yet
   ============================================ */

/* ============================================
   ONTARIO HEADER ALIGNMENT & MOBILE MENU FIX
   Fixes misalignment and mobile breakpoint issues
   ============================================ */

/* ===== FIX 1: HEADER ALIGNMENT ===== */

/* Ensure header container matches Catalyst alignment */
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 71px !important;
}

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

/* Logo alignment */
.header .logo {
  display: flex;
  align-items: center;
  margin: 0;
}

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

/* Right side navigation alignment */
.header .nav-wrapper-desktop,
.header .nav-wrapper-mobile {
  display: flex;
  align-items: center;
  margin: 0;
}


/* ===== FIX 2: MOBILE MENU BREAKPOINT ===== */

/* Hide mobile menu on desktop (>= 1024px) */
@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none !important;
  }
}

/* Show mobile menu on tablet and mobile (< 1024px) */
@media (max-width: 1023px) {
  .nav-wrapper-desktop {
    display: none !important;
  }
  
  .nav-wrapper-mobile {
    display: inline-block !important;
  }
}

/* Proper mobile menu button styling */
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* Mobile menu dropdown positioning */
.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: 999;
  max-width: 100vw;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}

.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}


/* ===== FIX 3: DESKTOP NAVIGATION SPACING ===== */

/* Ensure desktop nav items have proper spacing */
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: flex !important;
    align-items: center;
    gap: 20px;
  }
  
  .nav-wrapper-desktop a,
  .nav-wrapper-desktop button,
  .nav-wrapper-desktop .dropdown {
    margin: 0 10px;
  }
}


/* ===== FIX 4: USER PROFILE ALIGNMENT ===== */

/* Fix user profile dropdown alignment */
.user-nav {
  display: inline-flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

/* Profile button */
.user-nav button,
.user-nav .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
}


/* ===== FIX 5: PREVENT HORIZONTAL OVERFLOW ===== */

/* Ensure nothing causes horizontal scroll */
html {
  overflow-x: hidden !important;
}

body {
  overflow-x: hidden !important;
}

.header,
.header * {
  max-width: 100%;
  box-sizing: border-box;
}


/* ===== FIX 6: TOPICS DROPDOWN ALIGNMENT ===== */

/* Fix Topics dropdown if present */
.header .dropdown {
  display: inline-flex;
  align-items: center;
}

.header .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent !important;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.header .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 200px;
  z-index: 1000;
}


/* ===== FIX 7: SUBMIT A REQUEST BUTTON ===== */

/* Ensure "Submit a request" is properly aligned */
.header a[href*="requests"],
.header a[href*="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  white-space: nowrap;
}


/* ===== FIX 8: RESPONSIVE HEADER ADJUSTMENTS ===== */

/* Tablet breakpoint adjustments */
@media (max-width: 1023px) {
  .header {
    padding: 0 20px !important;
  }
  
  /* Ensure logo doesn't get too small */
  .header .logo img {
    max-height: 32px;
  }
}

/* Mobile breakpoint adjustments */
@media (max-width: 768px) {
  .header {
    padding: 0 16px !important;
  }
  
  .header .logo img {
    max-height: 28px;
  }
}


/* ===== FIX 9: PREVENT ITEMS FROM SQUASHING ===== */

/* Ensure header items maintain minimum sizes */
.header .nav-wrapper-mobile {
  flex-shrink: 0;
  min-width: 71px;
}

.header .logo {
  flex-shrink: 0;
  min-width: 100px;
}

.header .user-nav {
  flex-shrink: 0;
}


/* ===== FIX 10: Z-INDEX MANAGEMENT ===== */

/* Proper z-index layering */
.header {
  position: relative;
  z-index: 100;
}

.nav-wrapper-mobile .menu-list-mobile {
  z-index: 999;
}

.header .dropdown-menu {
  z-index: 1000;
}


/* ============================================
   ONTARIO PROFILE DROPDOWN - SINGLE SELECTOR FIX
   ============================================ */

/* Ultra-specific selector to override everything */
.user-info.dropdown .dropdown-menu[role="menu"][id] {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !important;
  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 8px 0 !important;
  position: absolute !important;
  right: 0 !important;
  margin-top: 8px !important;
  min-width: 200px !important;
  z-index: 1000 !important;
}

/* Clean menu items */
.user-info.dropdown .dropdown-menu[role="menu"] a {
  display: block !important;
  padding: 10px 20px !important;
  color: #333333 !important;
  text-decoration: none !important;
  background: transparent !important;
}

.user-info.dropdown .dropdown-menu[role="menu"] a:hover {
  background-color: #f5f5f5 !important;
}

/* Separator */
.user-info.dropdown .dropdown-menu .separator {
  border-top: 1px solid #e5e5e5 !important;
  margin: 8px 0 !important;
}


/* ============================================
   ONTARIO DARK MODE FIXES
   Forms, Profile, Articles - NOT header
   ============================================ */


/* ================================================================================
   FORM DROPDOWN (NESTY-PANEL) HOVER STATES
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  .nesty-panel {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }
  
  .nesty-panel li {
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  .nesty-panel li a,
  .nesty-panel a {
    color: #333333 !important;
    background-color: transparent !important;
  }
  
  .nesty-panel li:hover,
  .nesty-panel li:focus,
  .nesty-panel li.is-selected,
  .nesty-panel li[aria-selected="true"] {
    background-color: #f0f0f0 !important;
    color: #000000 !important;
  }
  
  .nesty-panel li:hover a,
  .nesty-panel li:focus a,
  .nesty-panel li.is-selected a {
    color: #000000 !important;
  }
  
  .nesty-panel li.is-current,
  .nesty-panel li.selected,
  .nesty-panel li[data-selected="true"] {
    background-color: #e3f2fd !important;
    color: #0066cc !important;
  }
  
  .nesty-input {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #454545 !important;
  }
  
  .nesty-input:focus {
    border-color: #4db8ff !important;
  }
  
  .nesty-input .nesty-current-value,
  .nesty-input span {
    color: #e0e0e0 !important;
  }
}


/* ================================================================================
   PROFILE PAGE ACTIVITY CARDS
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  .profile-activity-contribution {
    background-color: #2d3748 !important;
    border-radius: 8px;
    padding: 16px;
  }
  
  .profile-activity-contribution a,
  .profile-contribution-title a,
  .profile-activity-contribution .profile-contribution-title {
    color: #4db8ff !important;
  }
  
  .profile-activity-contribution a:hover {
    color: #6ec6ff !important;
  }
  
  .profile-activity-contribution .meta-data,
  .profile-activity-contribution .meta-group a {
    color: #f59e0b !important;
  }
  
  .profile-activity-contribution p,
  .profile-activity-contribution .profile-contribution-body,
  .profile-contribution-body {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-contribution span,
  .profile-activity-contribution div:not([class]) {
    color: #cbd5e1 !important;
  }
  
  .profile-activity-contribution .meta-group,
  .profile-activity-contribution .meta-data {
    color: #888888 !important;
  }
  
  .profile-contribution {
    border-color: #374151 !important;
  }
  
  .profile-contribution-title {
    color: #ffffff !important;
  }
  
  .profile-activity-description {
    color: #e0e0e0 !important;
  }
  
  .profile-activity-description span:first-child {
    color: #ffffff !important;
  }
  
  .profile-activity-icon {
    background-color: #374151 !important;
  }
  
  .profile-header {
    background-color: #1f2937 !important;
  }
  
  .profile-header .name,
  .profile-header h1 {
    color: #4db8ff !important;
  }
  
  .profile-stats .stat-label {
    color: #9ca3af !important;
  }
  
  .profile-stats .stat-value,
  .profile-stats-activity .stat span:not(.stat-label),
  .profile-stats-counters .stat span:not(.stat-label) {
    color: #e0e0e0 !important;
  }
  
  .profile-nav {
    background-color: #111827 !important;
    border-bottom-color: #374151 !important;
  }
  
  .profile-nav a {
    color: #4db8ff !important;
  }
  
  .profile-nav a:hover,
  .profile-nav a.current {
    color: #ffffff !important;
    border-bottom-color: #4db8ff !important;
  }
  
  .profile-section h2,
  .activity-overview h2 {
    color: #ffffff !important;
  }
  
  .profile-section > p,
  .activity-overview > p {
    color: #9ca3af !important;
  }
  
  .profile-activity-description span:first-child,
  .profile-activity strong {
    color: #ffffff !important;
  }
  
  .profile-activity-description {
    color: #d1d5db !important;
  }
}


/* ================================================================================
   MOBILE RESPONSIVE - ARTICLE CONTENT CARDS
   ================================================================================  */

@media (max-width: 768px) {
  
  .article-body div[style*="display: flex"],
  zd-html-block div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  
  .article-body div[style*="min-width: 200px"],
  .article-body div[style*="min-width:200px"],
  zd-html-block div[style*="min-width: 200px"],
  zd-html-block div[style*="min-width:200px"] {
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }
  
  .article-body div[style*="flex: 1"],
  zd-html-block div[style*="flex: 1"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  
  .article-body zd-html-block,
  .article-body > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  
  .article-body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  
  .article-body div[style*="min-width: 200px"],
  zd-html-block div[style*="min-width: 200px"] {
    min-width: 45% !important;
    flex: 1 1 45% !important;
  }
}


/* ================================================================================
   ARTICLE DARK MODE - INLINE STYLES
   ================================================================================  */

@media (prefers-color-scheme: dark) {
  
  /* Target gradient backgrounds */
  zd-html-block div[style*="gradient"][style*="135deg"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #234e78 100%) !important;
  }
  
  [style*="f0f9ff"],
  [style*="e0f2fe"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #234e78 100%) !important;
  }
  
  [style*="e3f2fd"] {
    background: #1e3a5f !important;
  }
  
  [style*="f8fafc"] {
    background: #1e293b !important;
  }
  
  [style*="border: 2px dashed"][style*="f8fafc"] {
    background: #2d3748 !important;
    border-color: #4a5568 !important;
  }
  
  [style*="color: #0c4a6e"],
  [style*="color:#0c4a6e"] {
    color: #7dd3fc !important;
  }
  
  [style*="color: #475569"],
  [style*="color:#475569"] {
    color: #cbd5e1 !important;
  }
  
  [style*="color: #1e293b"],
  [style*="color:#1e293b"] {
    color: #f1f5f9 !important;
  }
  
  [style*="color: #64748b"],
  [style*="color:#64748b"] {
    color: #94a3b8 !important;
  }
  
  [style*="background: white"],
  [style*="background-color: white"],
  [style*="background:#fff"],
  [style*="background-color:#fff"] {
    background: #2d3748 !important;
  }
  
  [style*="border"][style*="#e2e8f0"],
  [style*="border"][style*="#e5e7eb"],
  [style*="border"][style*="#cbd5e1"] {
    border-color: #475569 !important;
  }
  
  zd-html-block p {
    color: #cbd5e1 !important;
  }
  
  zd-html-block li {
    color: #cbd5e1 !important;
  }
  
  zd-html-block h1,
  zd-html-block h2,
  zd-html-block h3,
  zd-html-block h4,
  zd-html-block h5,
  zd-html-block h6 {
    color: #f1f5f9 !important;
  }
  
  zd-html-block h3[style*="#0c4a6e"],
  zd-html-block h4[style*="#0c4a6e"] {
    color: #7dd3fc !important;
  }
}

/* Form submit button - make it distinct */
input[type="submit"],
.form input[type="submit"],
button[type="submit"] {
  background-color: #012251 !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

input[type="submit"]:hover,
.form input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: #0A52A2 !important;
}

/* Dark mode submit button */
@media (prefers-color-scheme: dark) {
  input[type="submit"],
  .form input[type="submit"],
  button[type="submit"] {
    background-color: #1F94D3 !important;
    color: #FFFFFF !important;
  }
  
  input[type="submit"]:hover,
  .form input[type="submit"]:hover,
  button[type="submit"]:hover {
    background-color: #39B0E1 !important;
  }
}

/* ================================================================================
   END OF DARK MODE FIXES - HEADER NOT INCLUDED
   ================================================================================  */

/* ============================================
   COMPLETE ARTICLE LIST SECTION
   Located on homepage below section cards
   ============================================ */

/* Main container */
.complete-article-list {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* ===== HERO BANNER ===== */
.article-list-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8c 50%, #4a7ab8 100%);
  border-radius: 16px;
  padding: 50px 40px;
  margin-bottom: 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Decorative circle */
.article-list-hero::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  top: -200px;
  right: -100px;
  pointer-events: none;
}

.article-list-hero-content {
  position: relative;
  z-index: 1;
}

.article-list-hero h2 {
  color: #FFFFFF;
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.article-list-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  margin: 0;
  font-weight: 400;
}

/* ===== SECTION GROUPS ===== */
.article-section-group {
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid #E5E5E5;
}

.article-section-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Section header with icon */
.article-section-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.section-icon-large {
  font-size: 36px;
  color: #0A52A2;
  flex-shrink: 0;
}

.article-section-header-text h3 {
  margin: 0 0 5px 0;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
}

.article-section-header-text p.section-description {
  margin: 0;
  font-size: 15px;
  color: #64748b;
  line-height: 1.5;
}

/* ===== ARTICLE GRID ===== */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

/* Article cards */
.article-card {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(10, 82, 162, 0.12);
  border-color: #0A52A2;
}

.article-card h4 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

.article-card:hover h4 {
  color: #0A52A2;
}

.article-card .article-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  flex-grow: 1;
}

.article-card .article-read-more {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #0A52A2;
  margin-top: auto;
}

.article-card:hover .article-read-more {
  gap: 10px;
}

.article-card .article-read-more i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.article-card:hover .article-read-more i {
  transform: translateX(4px);
}

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

/* Tablet */
@media (max-width: 1024px) {
  .article-list-hero {
    padding: 40px 30px;
  }
  
  .article-list-hero h2 {
    font-size: 32px;
  }
  
  .article-list-hero p {
    font-size: 16px;
  }
  
  .article-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  
  .article-section-header-text h3 {
    font-size: 22px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .complete-article-list {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .article-list-hero {
    padding: 30px 20px;
    margin-bottom: 35px;
  }
  
  .article-list-hero h2 {
    font-size: 26px;
  }
  
  .article-list-hero p {
    font-size: 15px;
  }
  
  .article-section-group {
    margin-bottom: 40px;
    padding-bottom: 30px;
  }
  
  .article-section-header {
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .section-icon-large {
    font-size: 28px;
  }
  
  .article-section-header-text h3 {
    font-size: 20px;
  }
  
  .article-section-header-text p.section-description {
    font-size: 14px;
  }
  
  .article-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .article-card {
    padding: 20px;
  }
  
  .article-card h4 {
    font-size: 16px;
  }
  
  .article-card .article-description {
    font-size: 13px;
  }
  
  .article-card:hover {
    transform: translateY(-2px);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .article-list-hero h2 {
    font-size: 22px;
  }
  
  .article-list-hero p {
    font-size: 14px;
  }
  
  .article-section-header {
    gap: 12px;
  }
  
  .section-icon-large {
    font-size: 24px;
  }
  
  .article-section-header-text h3 {
    font-size: 18px;
  }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  /* Main container - dark background */
  .complete-article-list {
    background-color: #1a1a1a;
  }
  
  /* Hero banner - keep gradient but adjust for dark mode */
  .article-list-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #2563eb 100%);
  }
  
  /* Section groups - dark borders */
  .article-section-group {
    border-bottom-color: #333333;
  }
  
  /* Section header text */
  .article-section-header-text h3 {
    color: #ffffff !important;
  }
  
  .article-section-header-text p.section-description {
    color: #a0a0a0 !important;
  }
  
  /* Article cards - dark background */
  .article-card {
    background: #242424;
    border-color: #333333;
  }
  
  .article-card:hover {
    background: #2a2a2a;
    border-color: #4db8ff;
    box-shadow: 0 12px 24px rgba(77, 184, 255, 0.15);
  }
  
  /* Article card titles - WHITE TEXT (this is the fix!) */
  .article-card h4 {
    color: #ffffff !important;
  }
  
  .article-card:hover h4 {
    color: #4db8ff !important;
  }
  
  /* Article descriptions */
  .article-card .article-description {
    color: #a0a0a0 !important;
  }
  
  /* Read more links */
  .article-card .article-read-more {
    color: #4db8ff !important;
  }
  
  /* Icon color in dark mode */
  .section-icon-large {
    color: #4db8ff !important;
  }
}

/* ==== ZENDESK WEB WIDGET CUSTOMIZATIONS ==== */

/* 1. Conversation header bar - white background, medium weight text */
[class*="sc-vrqbdz-0"][class*="enrcyr"],
iframe[title*="Messaging"] [class*="sc-vrqbdz-0"] {
  background-color: #FFFFFF !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

/* 2. Bot avatar image - 80% size */
[class*="sc-vrqbdz-2"][class*="ilyblu"] img,
[class*="ilyblu"] img {
  width: 80% !important;
  height: 80% !important;
}

/* 3. Avatar styling - .dysjee class adjustments */
img[class*="dysjee"],
[class*="sc-1p16ygh"] img {
  min-height: 1.75rem !important;
  max-height: 1.75rem !important;
  min-width: 1.75rem !important;
  max-width: 1.75rem !important;
  border-radius: 0.25rem !important;
  object-fit: cover !important;
}

/* 4. Hide "Built with Zendesk" branding */
[class*="sc-"][data-testid*="powered-by"],
a[href*="zendesk.com"][class*="powered"],
[class*="PoweredBy"],
iframe[title*="Messaging"] + div[class*="powered"],
div[class*="sc-"]:has(> a[href*="zendesk.com/messaging"]) {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================
   SMITH AGGRESSIVE COLOR OVERRIDES
   Ensures Smith branding appears correctly
   ============================================ */

/* SECTION CARDS - Force slate background #414771 */
.knowledge-base .section,
.section-tree .section,
section.section {
  background-color: #414771 !important;
  background: #414771 !important;
  background-image: none !important;
  border: 1px solid rgba(90, 174, 253, 0.3) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* SECTION HEADERS - Force teal #05E3E3 */
.knowledge-base .section h3,
.section-tree .section h3,
section.section h3,
.section h3 {
  background: #05E3E3 !important;
  background-color: #05E3E3 !important;
  background-image: none !important;
  color: #ffffff !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  border: none !important;
}

.section h3 a,
.section h3 a:visited,
.section h3 a:hover {
  color: #ffffff !important;
}

/* ARTICLE LIST INSIDE SECTIONS - Force slate background */
.section .article-list,
.section ul.article-list {
  background: #414771 !important;
  background-color: #414771 !important;
  padding: 20px 24px !important;
}

.section .article-list li,
.section .article-list li a {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.section .article-list li a:hover {
  color: #05E3E3 !important;
}

/* BOTTOM SECTION HEADERS - Force WHITE text */
.article-section-header h3,
.article-section-group h3 {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
}

.article-section-header .section-description,
.article-section-header p {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

/* ARTICLE CARDS AT BOTTOM - Force slate with white text */
.article-card,
a.article-card {
  background: #414771 !important;
  background-color: #414771 !important;
  color: #ffffff !important;
  border: 1px solid rgba(90, 174, 253, 0.3) !important;
}

.article-card h4,
.article-card h4 a {
  color: #ffffff !important;
}

.article-card p,
.article-card .article-description {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

.article-card .article-read-more {
  color: #01265A !important;
  background: #05E3E3 !important;
  background-color: #05E3E3 !important;
  padding: 8px 18px !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.article-read-more:hover {
  background: #03a3a3 !important;
  color: #01265A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  text-decoration: none !important;
}

/* ============================================
   SMITH HEADER GAP FIX - CRITICAL
   Removes the dark blue gap in header middle
   ============================================ */

/* Force full-width header background */
#global-header {
  width: 100% !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #01265A !important;
}

.header {
  background-color: #01265A !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Header inner - constrained content width */
.header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent !important;
}

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

/* ============================================
   SMITH VISUAL UPDATES - ADD TO END OF STYLE.CSS
   Hero logo sizing, blue section headers, community fixes
   ============================================ */

/* ===== HERO LOGO SIZING ===== */
.hero-logo {
  max-width: 500px !important;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-logo {
    max-width: 350px !important;
  }
}

@media (max-width: 480px) {
  .hero-logo {
    max-width: 280px !important;
  }
}


/* ===== COMMUNITY SECTION IMPROVEMENTS ===== */
.home-section.community {
  background: linear-gradient(135deg, #414771 0%, #2a2d52 100%) !important;
  padding: 60px 40px;
  margin: 40px 0;
  border-radius: 12px;
  border: 1px solid rgba(73, 145, 214, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Community heading - white for contrast */
.home-section.community h2 {
  color: #ffffff !important;
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Community description text - light color for readability */
.home-section.community p {
  color: #e8eef5 !important;
  font-size: 18px !important;
  padding: 0 20px 30px 20px !important;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-section.community p strong {
  color: #ffffff !important;
  font-weight: 600;
}

/* Community button - blue with white text */
.community-link {
  display: inline-block;
  background: #4991d6 !important;
  color: #ffffff !important;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(73, 145, 214, 0.3);
  border: 2px solid transparent;
}

.community-link:hover {
  background: #5aa3e8 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(73, 145, 214, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
}

.community-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(73, 145, 214, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .home-section.community {
    padding: 40px 20px;
  }
  
  .home-section.community h2 {
    font-size: 28px;
  }
  
  .home-section.community p {
    font-size: 16px !important;
    padding: 0 10px 20px 10px !important;
  }
  
  .community-link {
    padding: 12px 24px;
    font-size: 15px;
  }
}


/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  /* Keep teal in dark mode */
  .knowledge-base .section h3,
  .knowledge-base .section h3 a,
  .section-tree .section h3,
  .section-tree .section h3 a {
    background: #05E3E3 !important;
    color: #ffffff !important;
  }
  
  /* Article section headers - WHITE TEXT in dark mode */
  .article-section-header-text h3 {
    color: #ffffff !important;
    background: transparent !important;
  }
  
  .section-icon-large {
    color: #05E3E3 !important;
  }
  
  /* Community section maintains its styling in dark mode */
  .home-section.community {
    background: linear-gradient(135deg, #414771 0%, #2a2d52 100%) !important;
    border-color: rgba(73, 145, 214, 0.3);
  }
  
  .home-section.community h2 {
    color: #ffffff !important;
  }
  
  .home-section.community p {
    color: #e8eef5 !important;
  }
  
  .community-link {
    background: #4991d6 !important;
    color: #ffffff !important;
  }
  
  .community-link:hover {
    background: #5aa3e8 !important;
  }
}

/* ============================================
   SMITH FOOTER STYLING
   Slate gray background with light text
   ADD THIS TO END OF STYLE.CSS (after previous additions)
   ============================================ */

/* Footer background - slate gray */
.footer {
  background-color: #414771 !important;
  border-top: 1px solid rgba(90, 174, 253, 0.2);
  padding: 30px 20px;
  margin-top: 60px;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Footer logo */
.footer-logo {
  flex-shrink: 0;
}

.footer-logo img {
  max-width: 80px;
  height: auto;
  filter: brightness(1.2);
}

/* Footer info text */
.ebm-footer-info {
  flex-grow: 1;
  text-align: right;
}

.ebm-footer-info p {
  color: #e8eef5 !important;
  font-size: 14px;
  line-height: 1.6;
  margin: 5px 0;
}

/* Footer links - Finance Blue */
.ebm-footer-info a {
  color: #5AAEFD !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ebm-footer-info a:hover {
  color: #7bc4ff !important;
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .footer-logo {
    order: -1;
  }
  
  .ebm-footer-info {
    text-align: center;
  }
  
  .ebm-footer-info p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 25px 15px;
  }
  
  .ebm-footer-info p {
    font-size: 12px;
    line-height: 1.8;
  }
  
  /* Stack bullets on mobile for better readability */
  .ebm-footer-info p {
    word-break: break-word;
  }
}

/* Dark mode - maintain consistent footer styling */
@media (prefers-color-scheme: dark) {
  .footer {
    background-color: #414771 !important;
    border-top-color: rgba(90, 174, 253, 0.2);
  }
  
  .ebm-footer-info p {
    color: #e8eef5 !important;
  }
  
  .ebm-footer-info a {
    color: #5AAEFD !important;
  }
  
  .ebm-footer-info a:hover {
    color: #7bc4ff !important;
  }
}}

/* ============================================
   SMITH SECTION PAGE OVERRIDES
   Aligns section pages with homepage styling
   ============================================ */

/* --- SECTION HEADER BAR: solid #4991D6 --- */
/* Nuclear override - covers every possible selector that sets a gradient */
.section-header,
.section-page .section-header,
.category-page .section-header,
.category-page .category-header,
section.section-header,
.section-header header,
.section-header .page-header,
.section-page header.page-header,
.section-page .section-header header,
.section-page .section-header .page-header,
.category-page header.page-header,
.category-page .section-header header,
.category-page .section-header .page-header,
body[class*="section-42679658758925"] header,
body[class*="section-42679681047053"] header,
body[class*="section-42679711032589"] header,
body[class*="section-42679693922189"] header,
body[class*="section-42679736498573"] header,
body[class*="section-42679701344781"] header,
body[class*="section-"] header,
body[class*="section-"] .section-header,
body[class*="section-"] .page-header {
  background: #4991D6 !important;
  background-image: none !important;
  background-color: #4991D6 !important;
}

/* Section header container shape */
.section-header {
  padding: 50px 40px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* Inner header element should be transparent (not double-layered) */
.section-header header,
.section-header .page-header {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.section-header h1,
.section-header .page-header h1 {
  color: #FFFFFF !important;
  font-weight: 600;
}

/* Follow button on section header */
.section-header .section-subscribe button {
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  color: #FFFFFF !important;
  background: transparent !important;
}

.section-header .section-subscribe button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: #FFFFFF !important;
}

/* --- SECTION PAGE BACKGROUND: #012251 (matches main page) --- */
.section-container {
  background-color: #012251 !important;
  padding: 40px 20px !important;
}

/* Remove gap between section-header and section-container */
.sub-nav {
  margin-bottom: 20px !important;
}

/* Container divider - subtle on dark backgrounds */
.container-divider {
  border-top-color: rgba(90, 174, 253, 0.15) !important;
}

/* --- ARTICLE CARDS: #414771 with light text --- */
li.article-list-item {
  background: #414771 !important;
  border-radius: 12px !important;
  padding: 26px !important;
  border: 1px solid rgba(90, 174, 253, 0.2) !important;
  transition: all 0.3s ease !important;
}

li.article-list-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  background: #4d5580 !important;
  border-color: rgba(90, 174, 253, 0.4) !important;
}

/* Article title links - light for dark card background */
.article-list-item a.article-list-link {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

.article-list-item a.article-list-link:hover {
  color: #5AAEFD !important;
}

/* Article description text - light on dark card */
.article-list-item .article-list-item-description,
.article-list-item p {
  color: #c8d0e0 !important;
}

/* --- READ MORE BUTTON: #05E3E3 --- */
.article-read-more {
  background: #05E3E3 !important;
  color: #01265A !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.article-read-more:hover {
  background: #04c9c9 !important;
  color: #01265A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(5, 227, 227, 0.3) !important;
  text-decoration: none !important;
}

/* Article list layout */
.section-container ul.article-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

/* Promoted article star icon */
li.article-list-item.article-promoted svg {
  color: #5AAEFD !important;
}

/* ============================================
   SMITH ARTICLE PAGE OVERRIDES
   Article header card = #4991D6
   Article body background = #414771
   ============================================ */

/* Article container - the dark card */
.article-container {
  background-color: #414771 !important;
  border-radius: 12px !important;
  padding: 30px !important;
  margin-top: 20px !important;
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force the parent .container on article pages to not overflow */
.container:has(.article-container) {
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Fallback for browsers without :has() — apply to all .container */
body[class*="article-"] .container {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Article sidebar - breathing room */
.article-sidebar,
.collapsible-sidebar {
  background-color: transparent !important;
  padding-right: 20px !important;
}

@media (min-width: 1024px) {
  .article-sidebar {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    border-right: 1px solid rgba(90, 174, 253, 0.15) !important;
    margin-right: 20px !important;
  }
}

.sidenav-title,
.collapsible-sidebar-title {
  color: #FFFFFF !important;
}

.sidenav-item {
  color: #c8d0e0 !important;
}

.sidenav-item:hover,
.sidenav-item.current-article {
  color: #5AAEFD !important;
}

/* Article header card - #4991D6 */
.article-header {
  background: #4991D6 !important;
  padding: 30px !important;
  border-radius: 12px !important;
  margin-bottom: 30px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Article title */
.article-title,
h1.article-title {
  color: #FFFFFF !important;
}

.meta-data:not(:last-child)::after {
  content: "•";
  margin: 0 8px;
  opacity: 0.6;
}

/* Follow button on article page */
.article-header .article-subscribe button,
.article [role=button] {
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  color: #FFFFFF !important;
  background: transparent !important;
}

.article-header .article-subscribe button:hover,
.article [role=button]:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Main article area - prevent overflow */
.article {
  padding: 0 20px 0 0 !important;
  background-color: transparent !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-width: 0 !important; /* flex item shrink fix */
  flex: 1 1 0% !important; /* allow shrinking */
}

@media (min-width: 1024px) {
  .article {
    max-width: calc(80% - 50px) !important; /* sidebar is 20% + margins */
  }
}

/* Article body */
.article-body {
  background-color: transparent !important;
  color: #e8eef5 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Constrain all children inside article body */
.article-body > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Article body text */
.article-body p,
.article-body li,
.article-body td,
.article-body th {
  color: #e8eef5 !important;
}

.article-body strong,
.article-body b {
  color: #FFFFFF !important;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  color: #FFFFFF !important;
}

/* Article links */
.article-body a {
  color: #5AAEFD !important;
}

.article-body a:hover {
  color: #7bc4ff !important;
}

/* ============================================
   DARK BACKGROUND PROTECTION FOR ARTICLE HTML
   Overrides all inline light backgrounds and
   dark text colors from article templates
   ============================================ */

/* --- LIGHT BACKGROUND OVERRIDES --- */
/* Target every common light bg used in article HTML templates */
.article-body div[style*="background-color: #f0f7ff"],
.article-body div[style*="background-color: #f8fafc"],
.article-body div[style*="background-color: #e0f2fe"],
.article-body div[style*="background-color: #e3f2fd"],
.article-body div[style*="background-color: #f0f9ff"],
.article-body div[style*="background-color: #dbeafe"],
.article-body div[style*="background-color: #dcfce7"],
.article-body div[style*="background-color: #fef3c7"],
.article-body div[style*="background-color: #f3e8ff"],
.article-body div[style*="background-color: #fff"],
.article-body div[style*="background-color: white"],
.article-body div[style*="background: #f8fafc"],
.article-body div[style*="background: #dbeafe"],
.article-body div[style*="background: #dcfce7"],
.article-body div[style*="background: #fef3c7"],
.article-body div[style*="background: #f3e8ff"],
.article-body div[style*="background: white"] {
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(90, 174, 253, 0.2) !important;
}

/* Gradient light backgrounds (timeline, step flow sections) */
.article-body div[style*="linear-gradient(135deg, #f0f9ff"],
.article-body div[style*="linear-gradient(135deg, #f0f7ff"] {
  background: rgba(90, 174, 253, 0.08) !important;
  border: 1px solid rgba(90, 174, 253, 0.2) !important;
}

/* Intro note / "In This Article" box */
.article-body .intro-note,
.article-body div[style*="background-color: #e0f2fe"] {
  background-color: rgba(90, 174, 253, 0.1) !important;
  border-left-color: #5AAEFD !important;
}

/* White background cards (role cards, essential reading cards) */
.article-body div[style*="background: white"],
.article-body div[style*="background-color: white"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(90, 174, 253, 0.2) !important;
}

/* Screenshot placeholder boxes */
.article-body div[style*="border: 2px dashed"] {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(90, 174, 253, 0.25) !important;
}

/* --- DARK TEXT COLOR OVERRIDES --- */
/* These target inline text colors that are unreadable on #414771 */

/* Near-black text: #0c4a6e, #1e293b, #1e40af */
.article-body div[style*="color: #0c4a6e"] *,
.article-body div[style*="color: #0c4a6e"],
.article-body h3[style*="color: #0c4a6e"],
.article-body h4[style*="color: #0c4a6e"],
.article-body p[style*="color: #0c4a6e"] {
  color: #FFFFFF !important;
}

.article-body div[style*="color: #1e293b"] *,
.article-body div[style*="color: #1e293b"],
.article-body h3[style*="color: #1e293b"],
.article-body h4[style*="color: #1e293b"],
.article-body p[style*="color: #1e293b"] {
  color: #FFFFFF !important;
}

/* Medium-dark text: #475569, #64748b, #666 */
.article-body p[style*="color: #475569"],
.article-body li[style*="color: #475569"],
.article-body div[style*="color: #475569"],
.article-body ul[style*="color: #475569"],
.article-body ul[style*="color: #475569"] li {
  color: #c8d0e0 !important;
}

.article-body p[style*="color: #64748b"],
.article-body div[style*="color: #64748b"] {
  color: #9fadc0 !important;
}

.article-body p[style*="color: #666"] {
  color: #9fadc0 !important;
}

/* Colored badge text (these are on colored pill backgrounds, leave them) */
/* #1e40af on #dbeafe, #15803d on #dcfce7, #92400e on #fef3c7, #6b21a8 on #f3e8ff */
/* These badge spans keep their colors since their bg pills are small and readable */
.article-body span[style*="background: #dbeafe"],
.article-body span[style*="background: #dcfce7"],
.article-body span[style*="background: #fef3c7"],
.article-body span[style*="background: #f3e8ff"] {
  /* Keep badge pill backgrounds — they're small and have good contrast */
}

/* Card heading colors in role grid */
.article-body h3[style*="color: #1e293b"] {
  color: #FFFFFF !important;
}

/* --- BLOCKQUOTE STYLING --- */
/* The note/info blockquotes that show as yellow/green */
.article-body blockquote,
.article-body blockquote.note,
.article-body blockquote.info {
  background-color: rgba(90, 174, 253, 0.08) !important;
  border-left: 4px solid #5AAEFD !important;
  color: #e8eef5 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
}

.article-body blockquote p,
.article-body blockquote li {
  color: #e8eef5 !important;
}

/* --- HR DIVIDERS --- */
.article-body hr,
.article hr,
.article-relatives {
  border-color: rgba(90, 174, 253, 0.15) !important;
}

/* --- BUTTON / CTA LINKS --- */
.article-body a[style*="background-color: #2d5a8c"] {
  background-color: #5AAEFD !important;
  color: #01265A !important;
}

/* Social sharing icons */
.share a,
.article-body ~ div a {
  color: #c8d0e0 !important;
}

/* Article vote section */
.article-vote,
.article-vote-controls {
  color: #e8eef5 !important;
}

.article-vote-controls button {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #e8eef5 !important;
  background: transparent !important;
}

.article-vote-controls button:hover {
  border-color: #5AAEFD !important;
  color: #5AAEFD !important;
}

/* --- TABLE OF CONTENTS --- */
.toc-container {
  background: rgba(255, 255, 255, 0.06) !important;
  border-left: 3px solid #5AAEFD !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.toc-container .toc-heading-label {
  color: #FFFFFF !important;
}

.toc-h2 a,
.toc-container a {
  color: #5AAEFD !important;
}

.toc-container a.active {
  color: #FFFFFF !important;
}

/* ============================================
   SMITH HEADER BAR: #012251
   ============================================ */
.header,
.header-wrapper,
#global-header {
  background-color: #012251 !important;
  background: #012251 !important;
}

.header-inner {
  background-color: transparent !important;
}

/* ============================================
   SMITH HOMEPAGE SECTION TITLE COLOR + 
   SECTION-TREE READ MORE VISIBILITY
   ============================================ */

/* Homepage section card titles + icons - #012681 on teal bg */
.knowledge-base .section h3,
.knowledge-base .section h3 a {
  color: #012681 !important;
}

.knowledge-base .section h3 .section-icon,
.knowledge-base .section h3 i {
  color: #012681 !important;
}

.knowledge-base .section h3 a:hover {
  color: #FFFFFF !important;
}

/* Section-tree "See all articles" button - visible on dark bg */
.section-tree .see-all-articles,
a.see-all-articles {
  background: #05E3E3 !important;
  color: #01265A !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.section-tree .see-all-articles:hover,
a.see-all-articles:hover {
  background: #04c9c9 !important;
  color: #01265A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(5, 227, 227, 0.3) !important;
}

/* Section-tree article links */
.section-tree .section ul a,
.section-tree .article-list a,
.section-tree .article-promoted a {
  color: #c8d0e0 !important;
}

.section-tree .section ul a:hover,
.section-tree .article-list a:hover,
.section-tree .article-promoted a:hover {
  color: #5AAEFD !important;
}

.article-header .article-author a,
.article-header .article-author-name {
  color: #FFFFFF !important;
}

/* ============================================
   REQUEST FORM CLEANUP
   Styling for the Submit a Support Request page
   ============================================ */

/* Top teal header box - centered */
div.form-info-header {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #05e3e3 !important;
  color: #01265A !important;
  padding: 40px !important;
}

.form-info-title {
  color: #01265A !important;
  font-weight: 600 !important;
}

.form-info-description {
  color: #01265A !important;
}

/* Cyan instructional box - centered */
div#inline-note.request-note {
  background-color: #05e3e3 !important;
  padding: 20px 40px !important;
  margin: 20px auto 40px auto !important;
  max-width: 1200px !important;
  border-radius: 0 !important;
}

div#inline-note.request-note p {
  color: #01265A !important;
  margin: 0 !important;
}

div#inline-note.request-note a {
  color: #01265A !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

/* Main form container - centered */
div#main-content.form {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Form itself - centered within container */
form#new_request.request-form {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ALL form fields - #414771 background with white text */
form#new_request input[type="text"],
form#new_request input[type="email"],
form#new_request input[type="url"],
form#new_request select,
form#new_request textarea,
form#new_request .nesty-input {
  background-color: #414771 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Dropdown arrow color */
form#new_request select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
}

/* Submit button - Finance Blue default */
form#new_request input[type="submit"],
form#new_request button[type="submit"] {
  background-color: #5AAEFD !important;
  color: #01265A !important;
  border: none !important;
  padding: 12px 32px !important;
  font-family: 'Actor', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

/* Submit button hover - Electric Blue */
form#new_request input[type="submit"]:hover,
form#new_request button[type="submit"]:hover {
  background-color: #05FCFC !important;
  color: #01265A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(5, 252, 252, 0.3) !important;
}

/* ========================================
   CC EMAIL CHIPS FIX - SMITH COLORS
   Use #414771 background instead of black
   ======================================== */

/* Email pills - #414771 background with white text */
li[data-hc-pill="true"],
[data-hc-pill="true"],
span[data-hc-pill="true"] {
  background-color: #414771 !important;
  border: 1px solid #5AAEFD !important; /* Finance Blue border */
  color: #ffffff !important;
}

/* Email text inside pill - force white */
li[data-hc-pill="true"] span,
[data-hc-pill="true"] span,
li[data-hc-pill="true"] > span {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Pills container background - also #414771 */
ul[data-hc-pills-container="true"],
[data-hc-pills-container="true"],
ul[data-hc-pills-container] {
  background-color: #414771 !important;
  border-color: #5AAEFD !important;
}

/* Input field inside pills container - #414771 background */
ul[data-hc-pills-container] input[type="text"],
[data-hc-pills-container] input[type="text"] {
  background-color: #414771 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Placeholder text */
ul[data-hc-pills-container] input[type="text"]::placeholder,
[data-hc-pills-container] input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Close button (X) on pills */
li[data-hc-pill="true"] span[aria-label="Close"],
[data-hc-pill="true"] span[aria-label="Close"] {
  color: #ffffff !important;
  opacity: 0.7;
}

li[data-hc-pill="true"] span[aria-label="Close"]:hover,
[data-hc-pill="true"] span[aria-label="Close"]:hover {
  opacity: 1;
}

/* ========================================
   HOMEPAGE SECTION CARDS - VISITED LINK FIX
   Prevent visited links from staying white
   ======================================== */

/* Reset visited state to match unvisited for section cards */
.blocks-item-link:visited {
  color: inherit !important;
}

.blocks-item-link:visited .blocks-item-title {
  color: inherit !important;
}

/* Ensure hover still works for visited links */
.blocks-item:hover .blocks-item-link:visited,
.blocks-item:hover .blocks-item-link:visited * {
  color: #ffffff !important;
}

/* ========================================
   SEARCH SIDEBAR - BACKGROUND FIX
   Fix light backgrounds in search sidebar
   ======================================== */

/* Brand color background for sidebar */
.search-results-sidebar {
  background-color: #414771 !important;
}

/* Darker shade for hover and current items */
.search-results-sidebar .sidenav-item:hover,
.search-results-sidebar .sidenav-item.current {
  background-color: #2d3350 !important;
}

/* Ensure text is visible */
.search-results-sidebar .sidenav-item {
  color: #e0e0e0 !important;
}

.search-results-sidebar .sidenav-item.current {
  color: #ffffff !important;
}

/* ========================================
   SEARCH SIDEBAR - PADDING AND NUMBER FIXES
   Add spacing and improve readability
   ======================================== */

/* Add padding to sidebar sections */
.search-results-sidebar {
  background-color: #414771 !important;
  padding: 20px !important;
}

/* Add padding to section titles */
.search-results-sidebar .collapsible-sidebar-title,
.search-results-sidebar h3 {
  padding-left: 0 !important;
  margin-top: 0 !important;
}

/* Lighter color for document counts in parentheses */
.search-results-sidebar .doc-count,
.search-results-sidebar .sidenav-subitem .doc-count {
  color: #b0b0b0 !important;
}

/* Also target the count if it's in the filter name */
.search-results-sidebar .filter-name span {
  color: #b0b0b0 !important;
}

/* ========================================
   SEARCH NO RESULTS - TEXT VISIBILITY FIX
   Fix dark text on dark background
   ======================================== */

/* No results message */
.search-results .no-results,
.no-results,
.search-results .no-results .headline,
.no-results .headline {
  color: #ffffff !important;
}

/* No results subheading/description */
.search-results .no-results p,
.no-results p,
.search-results .no-results .action-prompt,
.no-results .action-prompt {
  color: #e0e0e0 !important;
}

/* No results links */
.search-results .no-results a,
.no-results a {
  color: #5AAEFD !important;
}

.search-results .no-results a:hover,
.no-results a:hover {
  color: #05e3e3 !important;
}

/* ========================================
   VISITED LINK CONTRAST FIX - SMITH HELP CENTER
   Prevents visited state from washing out section
   card headings and article list links.
   Must remain the LAST rule in the file.
   ======================================== */

/* Section card headings (homepage + category pages) */
.knowledge-base .section h3 a:visited,
.knowledge-base .section h3 a:link,
.section-tree .section h3 a:visited,
.section-tree .section h3 a:link,
.section h3 a:visited,
.section h3 a:link {
  color: #012681 !important; /* Dark navy - readable on teal #05E3E3 header bg */
}

.knowledge-base .section h3 a:hover,
.section-tree .section h3 a:hover,
.section h3 a:hover {
  color: #ffffff !important;
}

/* Article list links inside section cards (homepage + category pages) */
.section .article-list a:visited,
.section .article-list a:link,
.section-tree .section ul a:visited,
.section-tree .section ul a:link {
  color: rgba(255, 255, 255, 0.95) !important; /* Light on #414771 card bg */
}

.section .article-list a:hover,
.section-tree .section ul a:hover {
  color: #05E3E3 !important; /* Electric Blue on hover */
}

/* Article list items on section pages */
.article-list-item a:visited,
.article-list-item a:link,
.article-list-item a.article-list-link:visited,
.article-list-item a.article-list-link:link {
  color: #ffffff !important; /* White on #414771 card bg */
}

.article-list-item a:hover,
.article-list-item a.article-list-link:hover {
  color: #5AAEFD !important; /* Finance Blue on hover */
}

/* Promoted articles on homepage */
.promoted-articles-item a:visited,
.promoted-articles-item a:link {
  color: inherit !important;
}

/* "See all articles" button */
.see-all-articles:visited,
.see-all-articles:link {
  color: #01265A !important; /* Midnight Blue on Electric Blue / teal bg */
}

.see-all-articles:hover {
  color: #01265A !important;
}

/* ============================================================
   SMITH TRAINING CENTER, theme CSS append
   Append to the theme's style.css.

   Almost all Training Center visual styling is now inline in the
   article bodies, matching the existing help center articles. This
   file holds ONLY what inline styles cannot do: the demo animation
   reveal states (toggled by the theme JS) and the learning-track
   filter rules. Scoped under .demo / .tc-filterscope / .pcard so
   nothing else is affected. Dark theme is the help center default;
   nothing here is gated behind prefers-color-scheme.
   ============================================================ */

/* ---- demo: revealed states (JS toggles .show / .running) ---- */
.demo.running .dstage { display: block !important; }
.demo .dline.show { opacity: 1 !important; transform: translateY(0) !important; }
.demo .dctas.show { opacity: 1 !important; }

/* typing cursor injected by the demo engine */
.demo .cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #05FCFC;
  margin-left: 2px;
  vertical-align: middle;
  animation: tcblink .9s steps(1) infinite;
}
@keyframes tcblink { 50% { opacity: 0; } }

/* ---- persona accordion caret rotation ---- */
.pcard[open] .tc-caret { transform: rotate(90deg); }
.pcard summary::-webkit-details-marker { display: none; }

/* ---- effort/level filter ----
   Hiding is done in JS (toggling display per .play card), which is reliable
   across card, row, and accordion markup. CSS here only handles the dynamic
   odd-card full-width: JS adds .span-full to the last VISIBLE card when the
   visible count is odd, so the grid never leaves an orphan. */
.tc-filterscope .play.span-full { grid-column: 1 / -1; }

/* filter buttons active state */
.fltbar [data-flt].on {
  background: #05FCFC;
  color: #01265A;
  font-weight: 700;
  border-color: #05FCFC;
}

/* ---- mobile ---- */
@media (max-width: 768px) {
  .pcard summary span[style*="margin-left:auto"] { display: none; }
  /* play grids collapse to one column; full-width span resets to normal flow */
  .tc-filterscope > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .tc-filterscope .play.span-full { grid-column: auto; }
  /* persona kit: 3-column layer grid stacks on mobile */
  .tc-layergrid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SMITH TRAINING CENTER — homepage promo block (DARK)
   Paste into style.css. Sits above "Explore Knowledge Base".
   Brand: Midnight #01265A, Finance #5AAEFD, Electric #05FCFC.
   Uniform tiles; prominent high-contrast icons.
   ============================================================ */
.training-center-promo {
  margin: 50px 0 60px;
}

/* ----- Standout banner ----- */
.tc-band {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 46px 40px;
  text-align: center;
  background: linear-gradient(135deg, #01265A 0%, #023a7e 55%, #0152a6 100%);
  border: 1px solid #2c4a78;
}
.tc-band-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(440px 320px at 85% -15%, rgba(5, 252, 252, 0.18), transparent 60%),
    radial-gradient(380px 300px at 8% 125%, rgba(90, 174, 253, 0.22), transparent 60%);
}
.tc-band-content { position: relative; z-index: 1; }
.tc-band-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(5, 252, 252, 0.14);
  color: #05FCFC;
  border: 1px solid rgba(5, 252, 252, 0.4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 18px;
}
.tc-band h2 {
  color: #ffffff;
  font-size: 38px;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.tc-band p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto 26px;
}
.tc-band-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #05FCFC;
  color: #01265A !important;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tc-band-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(5, 252, 252, 0.4);
}
.tc-band-cta i { font-size: 18px; }

/* ----- Uniform feature grid ----- */
.tc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 8px;
}
.tc-tile {
  display: flex;
  flex-direction: column;
  background: #06234d;
  border: 1px solid #2c4a78;
  border-radius: 14px;
  padding: 26px 24px;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tc-tile:hover {
  transform: translateY(-3px);
  border-color: #05FCFC;
  background: #082c5e;
}

/* Prominent, high-contrast icon: solid Finance Blue chip, white glyph */
.tc-tile-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: #5AAEFD;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(90, 174, 253, 0.35);
}
.tc-tile:hover .tc-tile-icon {
  background: #05FCFC;
  color: #01265A;
  box-shadow: 0 6px 18px rgba(5, 252, 252, 0.45);
}
.tc-tile h4 {
  margin: 0 0 7px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}
.tc-tile p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #b9c9e4;
}

/* ----- See all (high-contrast on dark) ----- */
.tc-seeall-wrap { text-align: center; margin-top: 24px; }
.tc-seeall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #05FCFC !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 12px 26px;
  border: 2px solid #05FCFC;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.tc-seeall:hover {
  background: #05FCFC;
  color: #01265A !important;
}
.tc-seeall i { font-size: 16px; }

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .tc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tc-band { padding: 36px 22px; }
  .tc-band h2 { font-size: 28px; }
  .tc-band p { font-size: 16px; }
}
@media (max-width: 560px) {
  .tc-grid { grid-template-columns: 1fr; }
}

/* === Read more button (section pages) — outranks generic .article-list-item a link rules === */
ul.article-list li.article-list-item a.article-read-more,
ul.article-list li.article-list-item a.article-read-more:link,
ul.article-list li.article-list-item a.article-read-more:visited {
  background: #05E3E3 !important;
  color: #01265A !important;
  padding: 8px 18px !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}
ul.article-list li.article-list-item a.article-read-more:hover {
  background: #03a3a3 !important;
  color: #01265A !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* ============================================
   TRAINING CENTER SECTION PAGE  — CUSTOM VIEW
   Scoped under .tc-section-view (added by JS on section 46678344528909).
   Palette: Midnight #01265A, Finance #5AAEFD, Electric #05FCFC,
   card #012251, border #2c4a78, callout #4e5478.
   ============================================ */

.tc-section-view {
  --tc-midnight: #01265A;
  --tc-finance: #5AAEFD;
  --tc-electric: #05FCFC;
  --tc-card: #012251;
  --tc-border: #2c4a78;
  --tc-callout: #4e5478;
  --tc-ink: #e7eefb;
  --tc-muted: #a9b8d4;
}

/* The hero replaces the default header's title/description, but we keep the
   .section-header element in the DOM so the live follow button survives.
   We collapse its visual chrome and relocate the subscribe button into the
   hero (see JS). */
.tc-section-view .section-header { margin: 0; padding: 0; }
.tc-section-view .section-header .page-header > h1,
.tc-section-view .section-header .page-header-description { display: none; }
/* If the subscribe button hasn't been relocated for any reason, keep it
   visible and usable rather than orphaned. */
.tc-section-view .section-header .section-subscribe { margin: 0 0 18px; }
/* Once the button is relocated into the hero, the original wrapper is empty. */
.tc-section-view .section-header.tc-header-emptied { display: none; }

/* Follow button: top-right of the hero, clear of the stage chips. */
.tc-section-view .tc-hero-follow {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 3;
}
.tc-section-view .tc-hero-follow .section-subscribe { margin: 0; }

/* ---------- HERO ---------- */
.tc-section-view .tc-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 42px 40px 36px;
  margin: 0 0 28px;
  width: 100%;
  box-sizing: border-box;
  background:
    radial-gradient(120% 140% at 0% 0%, #073a86 0%, transparent 55%),
    linear-gradient(135deg, #01265A 0%, #012251 60%, #001a44 100%);
  border: 1px solid var(--tc-border);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}
.tc-section-view .tc-hero-bub {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .22;
  pointer-events: none;
}
.tc-section-view .tc-hero-bub1 {
  width: 240px; height: 240px; top: -90px; right: -40px;
  background: radial-gradient(circle, var(--tc-electric), transparent 70%);
}
.tc-section-view .tc-hero-bub2 {
  width: 180px; height: 180px; bottom: -70px; right: 160px;
  background: radial-gradient(circle, var(--tc-finance), transparent 70%);
}
.tc-section-view .tc-hero-pill {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--tc-electric);
  background: rgba(5, 252, 252, .08);
  border: 1px solid rgba(5, 252, 252, .35);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.tc-section-view .tc-hero-title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 38px;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 12px;
  border: none;
  padding: 0;
}
.tc-section-view .tc-hero-sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--tc-muted);
  max-width: 640px;
  margin: 0 0 22px;
}
.tc-section-view .tc-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  position: relative;
  z-index: 2;
}
.tc-section-view .tc-hero-chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-ink);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(90, 174, 253, .1);
  border: 1px solid rgba(90, 174, 253, .4);
  transition: background .15s ease, transform .15s ease;
}
.tc-section-view .tc-hero-chip:hover {
  background: rgba(90, 174, 253, .26);
  transform: translateY(-1px);
}

/* ---------- LAYOUT: sidebar + content ---------- */
.tc-section-view .section-container.tc-has-sidebar {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* ---------- STICKY SIDEBAR ---------- */
.tc-section-view .tc-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  background: var(--tc-card);
  border: 1px solid var(--tc-border);
  border-radius: 14px;
  padding: 18px 14px;
}
.tc-section-view .tc-side-head {
  padding: 2px 8px 14px;
  border-bottom: 1px solid var(--tc-border);
  margin-bottom: 12px;
}
.tc-section-view .tc-side-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--tc-electric);
  font-weight: 700;
}
.tc-section-view .tc-side-sub {
  display: block;
  font-size: 12px;
  color: var(--tc-muted);
  margin-top: 5px;
}
.tc-section-view .tc-side-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tc-section-view .tc-side-group { display: flex; flex-direction: column; }
.tc-section-view .tc-side-grouprow {
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.tc-section-view .tc-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 8px 9px 10px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--tc-ink);
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease;
}
.tc-section-view .tc-side-link:hover {
  background: rgba(90, 174, 253, .12);
}
.tc-section-view .tc-side-link.is-active {
  background: rgba(90, 174, 253, .16);
  border-color: rgba(90, 174, 253, .45);
}
.tc-section-view .tc-side-ico {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--tc-finance);
  color: #ffffff;
}
.tc-section-view .tc-side-ico svg { width: 15px; height: 15px; }
.tc-section-view .tc-side-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-section-view .tc-side-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--tc-muted);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 22px;
  text-align: center;
}
.tc-section-view .tc-side-link.is-active .tc-side-count {
  color: var(--tc-electric);
}

/* Expand/collapse chevron */
.tc-section-view .tc-side-toggle {
  flex: 0 0 auto;
  width: 30px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--tc-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .14s ease, color .14s ease;
}
.tc-section-view .tc-side-toggle:hover {
  background: rgba(90, 174, 253, .12);
  color: var(--tc-ink);
}
.tc-section-view .tc-side-toggle svg {
  width: 16px; height: 16px;
  transition: transform .18s ease;
}
.tc-section-view .tc-side-group.is-open .tc-side-toggle svg {
  transform: rotate(180deg);
}

/* Article titles under each group (collapsed by default) */
.tc-section-view .tc-side-articles {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.tc-section-view .tc-side-group.is-open .tc-side-articles {
  max-height: 800px;
}
.tc-section-view .tc-side-article a {
  display: block;
  padding: 6px 10px 6px 38px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tc-muted);
  text-decoration: none;
  border-radius: 7px;
  border-left: 1px solid var(--tc-border);
  margin-left: 18px;
}
.tc-section-view .tc-side-article a:hover {
  color: var(--tc-ink);
  background: rgba(90, 174, 253, .1);
  border-left-color: var(--tc-finance);
}
.tc-section-view .tc-side-top {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tc-border);
  font-size: 12.5px;
  color: var(--tc-finance);
  text-decoration: none;
}
.tc-section-view .tc-side-top:hover { text-decoration: underline; }

/* ---------- GROUPED SECTIONS ---------- */
.tc-section-view .tc-groups { margin-top: 4px; }
.tc-section-view .tc-group { margin: 0 0 34px; scroll-margin-top: 90px; }
.tc-section-view .tc-group:last-child { margin-bottom: 0; }

.tc-section-view .tc-group-header {
  margin: 0 0 16px;
}
.tc-section-view .tc-gh-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(1, 38, 90, .9), rgba(1, 34, 81, .9));
  border: 1px solid var(--tc-border);
  border-left: 4px solid var(--tc-finance);
}
.tc-section-view .tc-gh-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--tc-finance);
  color: #ffffff;
}
.tc-section-view .tc-gh-icon svg { width: 22px; height: 22px; }
.tc-section-view .tc-gh-text { display: flex; flex-direction: column; }
.tc-section-view .tc-gh-kicker {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--tc-electric);
  font-weight: 700;
}
.tc-section-view .tc-gh-title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 2px 0 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.tc-section-view .tc-gh-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--tc-muted);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--tc-border);
  border-radius: 999px;
  padding: 3px 10px;
  text-transform: none;
}
.tc-section-view .tc-gh-blurb {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tc-muted);
  max-width: 820px;
}

/* Clean per-group article grid: three across, even rows, no scatter.
   The theme sets .section-container ul.article-list to display:flex with high
   specificity, so we match that specificity and override to grid. */
.tc-section-view .section-container ul.tc-group-grid,
.tc-section-view .tc-group-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tc-section-view .tc-group-grid .article-list-item {
  /* Override the theme's flex sizing; the grid controls width now. */
  width: auto !important;
  flex: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
}
/* Make sure the title, preview text, and link all wrap inside the card
   instead of overflowing to the right. */
.tc-section-view .tc-group-grid .article-list-item > * {
  max-width: 100%;
  min-width: 0;
}
.tc-section-view .tc-group-grid .article-list-item p,
.tc-section-view .tc-group-grid .article-list-item a.article-list-link {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
@media (max-width: 1100px) {
  .tc-section-view .section-container ul.tc-group-grid,
  .tc-section-view .tc-group-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .tc-section-view .section-container ul.tc-group-grid,
  .tc-section-view .tc-group-grid { grid-template-columns: 1fr; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 980px) {
  .tc-section-view .section-container.tc-has-sidebar {
    grid-template-columns: 1fr;
  }
  .tc-section-view .tc-sidebar {
    position: static;
    max-height: none;
    margin-bottom: 22px;
  }
  .tc-section-view .tc-side-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .tc-section-view .tc-side-link { flex: 1 1 auto; }
}
@media (max-width: 768px) {
  .tc-section-view .tc-hero { padding: 30px 22px 26px; }
  .tc-section-view .tc-hero-title { font-size: 28px; }
  .tc-section-view .tc-gh-title { font-size: 19px; }
  .tc-section-view .tc-gh-inner { flex-direction: column; gap: 10px; }
}

/* ---------- FLOATING BACK-TO-TOP ---------- */
.tc-fab-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(90, 174, 253, .5);
  background: var(--tc-finance);
  color: #01265A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2000;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .15s ease;
}
.tc-fab-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tc-fab-top:hover {
  background: var(--tc-electric);
}
.tc-fab-top svg { width: 20px; height: 20px; }

/* ============================================================
   SMITH HELP CENTER — ARTICLE ENHANCEMENTS (append to theme style.css)
   Paste at the END of style.css so these rules win the cascade.

   Contains:
     A. Redesigned article title card, two variants:
        .is-tc-article  -> Training Center  (navy gradient, accent pill)
        .is-hc-article  -> Help Center      (clean midnight card)
        Variant class is set by JS from the article's section ID.
     B. Next / Previous article navigation pills (injected by JS).

   Styling targets the .article-header WRAPPER and adds a pseudo card,
   it never restyles Zendesk's author/follow nodes structurally, so
   their built-in event handlers stay intact. All rules are always-on
   (NOT inside prefers-color-scheme) per the always-dark Smith theme.
   ============================================================ */

/* ----------------------------------------------------------------
   A. ARTICLE TITLE CARD — shared frame
   ---------------------------------------------------------------- */
.smith-article header.article-header {
  position: relative;
  display: block;            /* override the flex bland bar */
  margin: 0 0 36px;
  padding: 30px 34px 26px;
  border-radius: 18px;
  border: 1px solid rgba(90, 174, 253, 0.22);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* Decorative soft orbs, echoing the Training Center hero. */
.smith-article header.article-header::before,
.smith-article header.article-header::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.smith-article header.article-header::after {
  width: 320px;
  height: 320px;
  right: -90px;
  top: -120px;
  background: radial-gradient(circle, rgba(90, 174, 253, 0.20) 0%, transparent 70%);
}
.smith-article header.article-header::before {
  width: 220px;
  height: 220px;
  left: -70px;
  bottom: -130px;
  background: radial-gradient(circle, rgba(5, 252, 252, 0.10) 0%, transparent 70%);
}

/* The title itself, rendered above the orbs. */
.smith-article header.article-header .article-title {
  position: relative;
  z-index: 1;
  color: #ffffff !important;
  background: transparent !important;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 0 14px;
  max-width: 760px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
@media (max-width: 768px) {
  .smith-article header.article-header { padding: 24px 20px 22px; }
  .smith-article header.article-header .article-title { font-size: 26px; }
}

/* Author + meta + follow row, kept on one line under the title. */
.smith-article header.article-header .article-author {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  margin: 0;
  vertical-align: middle;
}
.smith-article header.article-header .article-author .article-meta a,
.smith-article header.article-header .article-author .meta-data {
  color: rgba(255, 255, 255, 0.78) !important;
}
.smith-article header.article-header .article-meta .meta-group {
  display: inline-flex;
  gap: 10px;
}
.smith-article header.article-header .article-meta .meta-data + .meta-data::before {
  content: "\00b7";
  margin-right: 10px;
  opacity: 0.6;
}
.smith-article header.article-header .article-avatar img {
  border: 2px solid rgba(255, 255, 255, 0.35);
}

/* Follow button: float it to the right edge of the card. */
.smith-article header.article-header .article-subscribe {
  position: absolute;
  right: 34px;
  bottom: 26px;
  z-index: 2;
  margin: 0;
}
@media (max-width: 768px) {
  .smith-article header.article-header .article-subscribe {
    position: static;
    margin-top: 16px;
    display: block;
  }
}

/* Kicker pill above the title. The label text is supplied per-variant
   below (Training Center / Help Center); this is the shared shape. */
.smith-article header.article-header .article-title::before {
  display: block;
  width: max-content;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ----------------------------------------------------------------
   A1. TRAINING CENTER variant
   ---------------------------------------------------------------- */
.is-tc-article header.article-header {
  background:
    linear-gradient(135deg, #013a8a 0%, #01265A 55%, #001a42 100%) !important;
}
.is-tc-article header.article-header .article-title::before {
  content: "Training Center";
  color: #01265A;
  background: linear-gradient(90deg, #5AAEFD 0%, #05FCFC 100%);
}

/* ----------------------------------------------------------------
   A2. HELP CENTER variant
   ---------------------------------------------------------------- */
.is-hc-article header.article-header {
  background:
    linear-gradient(135deg, #06224d 0%, #01265A 60%, #011634 100%) !important;
}
.is-hc-article header.article-header .article-title::before {
  content: "Help Center";
  color: #ffffff;
  background: rgba(90, 174, 253, 0.18);
  border: 1px solid rgba(90, 174, 253, 0.45);
}

/* ----------------------------------------------------------------
   B. NEXT / PREVIOUS ARTICLE NAVIGATION
   Injected by JS into .article-next-mount, just above the footer.
   ---------------------------------------------------------------- */
.article-next-mount { margin: 14px 0 4px; }

.article-next-nav {
  display: flex;
  gap: 16px;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}
.article-next-nav .article-nav-spacer { flex: 1 1 0; }

.article-next-nav .article-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 calc(50% - 8px);
  min-width: 240px;
  padding: 16px 20px;
  border-radius: 14px;
  text-decoration: none !important;
  border: 1px solid rgba(90, 174, 253, 0.30);
  background: #012251;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.article-next-nav .article-nav-link:hover {
  transform: translateY(-2px);
  border-color: #5AAEFD;
  background: #02295f;
  text-decoration: none !important;
}
.article-next-nav .article-nav-next { justify-content: flex-end; text-align: right; }
.article-next-nav .article-nav-prev { justify-content: flex-start; text-align: left; }

.article-next-nav .article-nav-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.article-next-nav .article-nav-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #5AAEFD;
}
.article-next-nav .article-nav-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.article-next-nav .article-nav-arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #5AAEFD 0%, #05FCFC 100%);
}
.article-next-nav .article-nav-prev .article-nav-arrow {
  background: rgba(90, 174, 253, 0.18);
  border: 1px solid rgba(90, 174, 253, 0.45);
}

@media (max-width: 768px) {
  .article-next-nav { flex-direction: column; }
  .article-next-nav .article-nav-link { flex: 1 1 100%; }
}

/* ============================================================
   SMITH HELP CENTER — SECTION TITLE CARD (append to theme style.css)
   Paste at the END of style.css, AFTER the article-enhancements block.

   Restyles the section landing-page header (the bland #4991D6 blue bar)
   into a card consistent with the Smith family (navy gradient, accent
   orbs, brand pill) but visually DISTINCT from the article title cards
   and the Training Center hero:
     - Article cards  -> blue/cyan pill, left-to-right gradient
     - TC hero        -> its own bespoke layout (unchanged)
     - Section card   -> TEAL accent pill ("Section"), diagonal-up gradient,
                         accent rule under the title

   No section IDs needed. Applies to EVERY Help Center section, present
   and future, automatically. The Training Center section is excluded
   because its header is emptied by JS (.tc-header-emptied) and replaced
   with the custom .tc-hero, so these rules deliberately skip it.

   All rules always-on (not inside prefers-color-scheme), per the
   always-dark Smith theme.
   ============================================================ */

/* Frame. :not(.tc-header-emptied) keeps the Training Center hero untouched. */
.section-header:not(.tc-header-emptied) {
  position: relative !important;
  background:
    linear-gradient(25deg, #001a42 0%, #01265A 55%, #063b7e 100%) !important;
  padding: 34px 38px 30px !important;
  width: 100% !important;
  margin-bottom: 40px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(45, 225, 194, 0.28) !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28) !important;
}

/* Decorative orbs, teal-led to differentiate from the article cards. */
.section-header:not(.tc-header-emptied)::before,
.section-header:not(.tc-header-emptied)::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.section-header:not(.tc-header-emptied)::after {
  width: 300px;
  height: 300px;
  right: -80px;
  top: -110px;
  background: radial-gradient(circle, rgba(45, 225, 194, 0.18) 0%, transparent 70%);
}
.section-header:not(.tc-header-emptied)::before {
  width: 220px;
  height: 220px;
  left: -70px;
  bottom: -120px;
  background: radial-gradient(circle, rgba(90, 174, 253, 0.12) 0%, transparent 70%);
}

/* Keep the inner header above the orbs. */
.section-header:not(.tc-header-emptied) .page-header {
  position: relative;
  z-index: 1;
}

/* Title + teal "Section" pill above it. */
.section-header:not(.tc-header-emptied) .page-header h1 {
  color: #ffffff !important;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 0;
  padding-bottom: 12px;
  position: relative;
}
.section-header:not(.tc-header-emptied) .page-header h1::before {
  content: "Section";
  display: block;
  width: max-content;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #01265A;
  background: linear-gradient(90deg, #2de1c2 0%, #5AAEFD 100%);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
/* Short accent rule under the title, the section card's signature detail. */
.section-header:not(.tc-header-emptied) .page-header h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2de1c2, #5AAEFD);
}

/* Optional section description, if one is set in Zendesk. */
.section-header:not(.tc-header-emptied) .page-header-description {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 15px;
  line-height: 1.5;
  margin: 14px 0 0;
  max-width: 760px;
  position: relative;
  z-index: 1;
}

/* Follow button anchored to the card's top-right. */
.section-header:not(.tc-header-emptied) .section-subscribe {
  position: absolute;
  top: 30px;
  right: 38px;
  z-index: 2;
  margin: 0;
}
.section-header:not(.tc-header-emptied) .section-subscribe button {
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px !important;
}
.section-header:not(.tc-header-emptied) .section-subscribe button:hover {
  background: rgba(45, 225, 194, 0.22) !important;
  border-color: #2de1c2 !important;
}

/* Mobile: stack the follow button, tighten padding, shrink the title. */
@media (max-width: 768px) {
  .section-header:not(.tc-header-emptied) {
    padding: 24px 20px 22px !important;
  }
  .section-header:not(.tc-header-emptied) .page-header h1 {
    font-size: 26px;
  }
  .section-header:not(.tc-header-emptied) .section-subscribe {
    position: static;
    margin-top: 16px;
    display: block;
  }
}