/*
 * De knop "terug naar Smit Media" die op elke pagina van een app-site staat (die staan onder smitmedia.dev/<app>/).
 * Staat los van de vormgeving van de app: vaste kleuren, links onderin, mee te scrollen.
 */
.sm-back {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  display: inline-flex; align-items: center; gap: 2px; height: 56px; padding: 0 20px 0 6px; border-radius: 999px;
  background: linear-gradient(135deg, #3B2FC9, #5B43A8); color: #FFFFFF; text-decoration: none;
  font: 700 14px/1 "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: 0;
  box-shadow: 0 16px 34px -10px rgba(40, 24, 120, .75), inset 0 0 0 1px rgba(255, 255, 255, .28);
  transition: transform .45s cubic-bezier(.34, 1.45, .64, 1), box-shadow .25s;
  animation: sm-back-in .9s cubic-bezier(.34, 1.45, .64, 1) .6s both;
}
@keyframes sm-back-in { from { transform: translateY(24px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.sm-back:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 40px -12px rgba(40, 24, 120, .85), inset 0 0 0 1px rgba(255, 255, 255, .4); }
.sm-back:active { transform: scale(.97); }
.sm-back:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.sm-back > svg { width: 22px; height: 22px; fill: currentColor; flex: none; margin: 0 0 0 8px; transition: transform .35s cubic-bezier(.34, 1.45, .64, 1); }
.sm-back:hover > svg { transform: translateX(-4px); }
.sm-back-logo {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; margin: 0 12px 0 8px;
  background: #1D1C23; font-weight: 900; font-size: 13px; letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.sm-back-text { display: grid; gap: 3px; text-align: left; }
.sm-back-text small { font-size: 11.5px; font-weight: 600; opacity: .82; }
.sm-back-text b { font-size: 16px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .sm-back { animation: none; } }
@media print { .sm-back { display: none; } }

/*
 * De menubalk van de app-sites krijgt dezelfde maat en plek als die van de hub (smitmedia.dev): 68 px hoog, 1200 px breed,
 * logo en naam op dezelfde plaats, dezelfde doorzichtigheid en wazigheid. De inhoud (app-logo en app-naam) blijft die van de app.
 */
@font-face {
  font-family: "SM Flex"; font-style: normal; font-weight: 300 900; font-stretch: 100% 151%; font-display: swap;
  src: url("/assets/fonts/RobotoFlex.woff2") format("woff2");
}
html { scroll-padding-top: 84px; }
header.top { background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
header.top > .wrap { max-width: 1200px; height: 68px; min-height: 68px; padding: 0 24px; gap: 16px; }
header.top .brand { gap: 12px; margin-right: auto; }
header.top .brand svg { width: 40px; height: 40px; }
header.top .brand span { font-family: "SM Flex", "Roboto Flex", Roboto, system-ui, sans-serif; font-weight: 800; font-stretch: 112%; font-size: 19px; line-height: 1; letter-spacing: -.01em; }
header.top nav { margin-left: 0; gap: 4px; }
header.top nav a { padding: 9px 14px; border-radius: 999px; font-weight: 560; font-size: 15px; }
header.top .themes { margin-left: 0; }
@media (max-width: 760px) { header.top > .wrap { gap: 8px; } }
@media (max-width: 400px) { header.top .brand span { font-size: 17px; } }