/* The Solvonex logo, header and footer (shared by every page). The octopus is the package's mark SVG
   (teal on light, light teal on dark); "Solvonex" is live text in Funnel Display Bold, so the browser
   hints it like the nav text instead of drawing soft vector paths at 1x. Fitted to
   solvonex-logo-inline-on-light.svg (package v2) at 44px tall: the same 156 x 44 box, mark box
   (2,2 35x40), size, letter-spacing and baseline (31px); navy #1B3A5C on light, white on dark.
   Every box on whole pixels. One link home, named "Solvonex". The font is self-hosted (SIL OFL,
   fonts/OFL-Funnel-Display.txt): weight 700 only, Latin subset, preloaded, swap. */
@font-face {
  font-family: 'Funnel Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/funnel-display-700.woff2') format('woff2');
}
.sx-brand { position: relative; display: block; flex: none; width: 156px; height: 44px; text-decoration: none; }
.sx-brand .sx-brand__mark { position: absolute; left: 2px; top: 2px; width: 35px; height: 40px; display: block; }
.sx-brand .sx-brand__mark--dark { display: none; } /* as specific as the rule above, so it wins */
:root:not([data-theme="light"]) .sx-brand .sx-brand__mark--light { display: none; }
:root:not([data-theme="light"]) .sx-brand .sx-brand__mark--dark { display: block; }
.sx-brand__name {
  position: absolute; left: 42px; top: 6px; white-space: nowrap;
  font: 700 25.69px/31px 'Funnel Display', system-ui, sans-serif; letter-spacing: -0.192px; color: #1B3A5C;
}
:root:not([data-theme="light"]) .sx-brand__name { color: #FFFFFF; }

.footer-brand { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }

/* Header logo on whole pixels (it was at x 57.594 / 76.8, y 11.5 inside a blurred nav, so it rendered soft):
   - the side padding (4vw, 5vw on phones) rounded down to whole pixels, for the nav and the footer;
   - the logo pinned 12px from the top instead of centered in the 67px under the nav's 1px border;
   - the nav's backdrop blur moved to a layer behind its contents, so no ancestor of the logo has a filter. */
nav, footer { padding-left: round(down, 4vw, 1px); padding-right: round(down, 4vw, 1px); }
@media (max-width: 600px) {
  nav { padding-left: round(down, 5vw, 1px); padding-right: round(down, 5vw, 1px); }
}
nav .nav-logo { align-self: flex-start; margin-top: 12px; }
nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}