/*
 * Declarative replacement for the part of the template's app.min.js that only
 * set inline display styles on load:
 *
 *   ManageDarkThemeLayout() hides one of the two logos and one of the two
 *   theme-toggle icons depending on the active theme. The template ships no
 *   CSS for this, so without the script BOTH logos render on top of each
 *   other. Doing it in CSS also avoids a flash of the wrong logo.
 *
 * `!important` is deliberate: the original applied these as inline styles,
 * which outrank everything in styles.css. Without it, rules like
 * `.topbar .navbar-nav .nav-link { display: flex }` (specificity 0,3,0) beat
 * these selectors and the wrong theme icon stays visible.
 *
 * Mirrors app.min.js exactly:
 *   light -> hide .light-logo, hide .sun,  show .moon
 *   dark  -> hide .dark-logo,  hide .moon, show .sun
 */

html[data-bs-theme="light"] .light-logo,
html[data-bs-theme="light"] .sun {
  display: none !important;
}

html[data-bs-theme="light"] .moon {
  display: flex !important;
}

html[data-bs-theme="dark"] .dark-logo,
html[data-bs-theme="dark"] .moon {
  display: none !important;
}

html[data-bs-theme="dark"] .sun {
  display: flex !important;
}

/*
 * The theme puts `transition: all .2s` on containers. Switching the container
 * option animates max-width between `1200px` and `100%` — an interpolation
 * Chrome resolves to a stuck `calc(0% + 1200px)`, so "Full" visibly does
 * nothing. Applied for one frame around the switch, this suppresses the
 * animation so the new width lands immediately.
 */
.tame-no-transition,
.tame-no-transition * {
  transition: none !important;
}