Improve alignment on left/right margins

Fixes #2461. Also fixes an issue with cut-off drop shadows for cards on
some pages, like the tutorials landing, in mobile view.

@theme/styles.css

@@ -7,13 +7,6 @@ ul.nav.navbar-nav {
   width: 100%;
 }
 
-@media (min-width: 992px) and (min-width: 1200px) {
-  .top-nav .topnav-search {
-    margin-left: 3.5rem;
-    margin-right: 0.5rem;
-  }
-}
-
 .top-nav .topnav-search {
   flex-grow: 1;
 }
@@ -223,6 +216,9 @@ ul.nav.navbar-nav {
   --footer-title-font-weight: 600;
   --footer-title-font-size: 1rem;
   --footer-title-text-color: #A2A2A4;
+
+  --sidebar-margin-horizontal: 32px;
+  --sidebar-item-padding-horizontal: 0;
 }
 
 :root.light {

styles/_cards.scss

@@ -1,5 +1,7 @@
 .card, .cta-card, .q-wrapper {
-  box-shadow: $dropdown-box-shadow;
+  @include media-breakpoint-up(lg) {
+    box-shadow: $dropdown-box-shadow;
+  }
 }
 #code-samples-deck  {
   .card {

styles/_layout.scss

@@ -346,3 +346,9 @@ section {
     --line-height-multiplier: 1.2;
   }
 }
+
+@include media-breakpoint-up(lg) {
+  [data-component-name="TableOfContent/TableOfContent"] {
+    margin-right: 32px;
+  }
+}

styles/_osano.scss

@@ -5,3 +5,14 @@
 .osano-cm-switch {
   box-sizing: content-box !important;
 }
+
+.osano-cm-widget {
+  right: 16px;
+  width: 50px;
+  height: 50px;
+  border: 1px solid transparent;
+
+  @include media-breakpoint-up(lg) {
+    right: 32px;
+  }
+}

styles/_top-nav.scss

@@ -318,6 +318,9 @@ $nav-height: 80px;
         margin-left: 3.5rem;
         margin-right: 0.5rem;
       }
+      #topnav-language {
+        margin-right: 0.5rem;
+      }
       #topnav-button {
         margin-left: 0.2rem;
         margin-right: 1rem;
@@ -637,33 +640,13 @@ a {
   }
 }
 
-// Theme toggler
-.custom-theme-toggle {
-  .custom-control-label {
-    padding: 1rem;
-    cursor: pointer;
-  }
-  .custom-control-label::before,
-  .custom-control-input:checked ~ .custom-control-label::before {
-    position: static;
-    display: inline-block;
-    content: " ";
-    cursor: pointer;
-    border: 0;
-    background-image: url("../img/sun-moon.svg");
-    background-size: 3rem;
-    background-color: transparent;
-    transform-origin: center;
-    margin-left: -0.5rem;
-    margin-right: 0.5rem;
-    transition: transform 0.4s ease, background-position 0.4s ease;
-    // Default: dark mode, show moon
-    transform: rotate(15deg);
-    background-position: top left;
-  }
-  .custom-control-label::after {
-    display: none;
-  }
+#topnav-theme > div {
+  border-radius: var(--language-picker-border-radius);
+  color: var(--language-picker-text-color);
+  background-color: var(--language-picker-background-color);
+  border: 1px solid var(--language-picker-border-color);
+  padding: var(--language-picker-input-padding-vertical) var(--language-picker-input-padding-horizontal);
+  min-height: var(--language-picker-min-height);
 }
 
 // Fix dropdown box-shadows on mobile (language selector's shadow overlaps the

styles/_xrplai.scss

@@ -1,5 +1,12 @@
 button.MarkpromptFloatingTrigger {
   bottom: 4.5rem;
+  border-radius: $border-radius-sm;
+  right: 16px;
+  border: 1px solid transparent;
+
+  @include media-breakpoint-up(lg) {
+    right: 32px;
+  }
 }
 
 html.light .MarkpromptContentDialog a {