/* Shared brand and navigation icons. No page layout rules belong here. */
.luvio-brand,
.luvio-public .luvio-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: max-content;
  color: var(--LUVIO-text);
  text-decoration: none;
}
.luvio-brand .luvio-brand__mark { display: block; width: 32px; height: 32px; flex: 0 0 32px; }
.luvio-brand .luvio-brand__name {
  color: inherit;
  font-family: var(--LUVIO-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.luvio-brand:focus-visible { outline: 2px solid var(--LUVIO-btn-primary); outline-offset: 4px; }
.luvio-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; color: inherit; }
.homeHeader { color: var(--LUVIO-icon); }
.homeHeader .header-icon-link,
.homeHeader > a,
.homeHeader-filter { color: var(--LUVIO-icon); }
.homeHeader .header-icon-link:hover,
.homeHeader .header-icon-link.active { color: var(--LUVIO-icon-active); }
.setting-icons-main {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
  color: var(--LUVIO-icon);
  background: var(--LUVIO-icon-surface);
}
.setting-icons-main2 { color: var(--LUVIO-error); background: #fff0f0; }
.setting-arrow.luvio-icon { width: 20px; height: 20px; flex-basis: 20px; color: var(--LUVIO-icon-muted); }
.home-setting-icons-main > .luvio-icon { width: 20px; height: 20px; color: var(--LUVIO-icon-muted); }
.home-setting-icons-main[data-bs-target="#exampleModal"] .setting-icons-main { color: var(--LUVIO-icon); background: var(--LUVIO-icon-surface); }
.help-topic-card__icon { color: var(--LUVIO-icon); }
.help-topic-card .help-topic-card__icon { color: var(--LUVIO-icon); }
.help-search > .luvio-icon { color: var(--LUVIO-icon-muted); }
.footer-nav .nav-item > .luvio-icon { color: var(--LUVIO-icon-muted); }
.footer-nav .nav-item.active > .luvio-icon,
.footer-nav .nav-item:hover > .luvio-icon { color: var(--LUVIO-icon-active); }
@media (min-width: 992px) {
  .footer-nav .nav-item > .luvio-icon { color: var(--LUVIO-icon-on-dark); }
  .footer-nav .nav-item.active > .luvio-icon,
  .footer-nav .nav-item:hover > .luvio-icon { color: var(--LUVIO-primary-light); }
}