.shortcut-example {
  box-shadow: 0 0 0 0.25rem steelblue;
  background-color: white;
  max-width: 50vw;
  padding: 1rem;
}
.shortcut-example::first-letter {
  padding-right: 0.25rem;
  color: steelblue;
  font-weight: bold;
  font-size: 3rem;
  float: left;
}

/* Sidebar section numbering logic */
#sidebar .menu-list {
  counter-reset: shadocs-section;
}

/* Main Topics (Top Level) - Show plain numbers without boxes */
/* Targets both expanded sidebar entries and the collapsed icons shown on mobile/narrow view */
#sidebar :is(.is-fs-expandable-icon, .is-sidebar-list-wrapper > li > .card) .card-header-title > i.fa:not(.fa-home) {
  counter-increment: shadocs-section;
  display: inline-flex !important;
  background: transparent !important;
  color: #fff !important;
  min-width: 1.2rem !important;
  height: auto !important;
  margin-right: 0.5rem !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}

#sidebar :is(.is-fs-expandable-icon, .is-sidebar-list-wrapper > li > .card) .card-header-title > i.fa:not(.fa-home)::before {
  content: counter(shadocs-section) !important;
}

/* Sub Topics (Nested Level) - Show only arrows */
/* Generalize to any icon in sub-lists to ensure "↳" is shown consistently */
#sidebar .is-sidebar-list-wrapper li ul i.fa:not(.fa-turn-up) {
  display: inline-flex !important;
  background: transparent !important;
  color: #aaa !important;
  min-width: unset !important;
  height: auto !important;
  margin-right: 0.5rem !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#sidebar .is-sidebar-list-wrapper li ul i.fa:not(.fa-turn-up)::before {
  content: "↳" !important;
  font-size: 1.1rem !important;
}

/* Keep desktop logo variant in mobile as well. */
#globalTouchLogo {
  display: none !important;
}
#globalLogo {
  display: flex !important;
}

/* --- DartRun Feature Styles --- */
.dart-run-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  margin-bottom: 2rem;
}

.dart-run-container:hover {
  transform: translateY(-2px);
}

.dart-run-button {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
  color: white !important;
  border: none !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(0, 114, 255, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.dart-run-button:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 15px rgba(0, 114, 255, 0.5) !important;
  background: linear-gradient(135deg, #00d4ff 0%, #0082ff 100%) !important;
}

.dart-run-button:active {
  transform: scale(0.95) !important;
}

.dart-run-button i {
  font-size: 11px !important;
}

.dartpad-iframe {
  width: 100% !important;
  height: 500px !important;
  border: none !important;
  margin-top: 5px !important;
  border-radius: 0 0 8px 8px !important;
  background: #1e1e1e !important;
  animation: fadeIn 0.5s ease-out !important;
}

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

.dart-run-code pre, .dart-run-container .highlight pre {
  margin: 0 !important;
  border-radius: 8px !important;
}

/*
  ROOT CAUSE FIX for "chopped" text:
  Theme sets #contentHome { display:flex; flex-direction:column; justify-content:center }.
  When content is taller than the viewport, justify-content:center pushes the TOP of
  the content into negative scroll space — which is unreachable. It looks like the
  navbar is blocking it, but really the content simply cannot be scrolled to.
  Fix: override to flex-start so content always starts from the top.
*/
#contentHome {
  justify-content: flex-start !important;
}

/* Ensure anchor links don't hide headings behind the navbar */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
  scroll-margin-top: 60px;
}