/* One header geometry for React pages, prices and the calculator. */
html { overflow-y: scroll; }
#root nav, .price-site-header { --primary: oklch(55.8% .288 302.321); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
#root nav > .max-w-7xl, .price-site-nav { box-sizing: border-box; width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
#root nav > div > .h-16, .price-site-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; height: 64px; min-height: 64px; }
#root nav .hidden.md\:flex, .price-site-links { display: flex; justify-content: center; align-items: center; gap: 4px; }
#root nav .hidden.md\:flex > a, .price-site-links > a { margin: 0 !important; padding: 8px 12px; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
#root nav > div > div > :last-child, .price-site-tools { justify-self: end; display: flex; align-items: center; gap: 16px; }
#root nav > div > div > :last-child > * { margin: 0 !important; }
#root nav .flex.gap-2, .price-site-languages { display: flex; gap: 8px; }
#root nav .flex.gap-2 > button,
#root nav .flex.gap-2 > a, .price-site-languages > a, .price-site-languages > button { box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; width: 42px; height: 32px; padding: 0; font: 500 14px/20px ui-sans-serif, system-ui, sans-serif; }
#root nav a.text-2xl, .price-site-brand { display: block; width: max-content; font-size: 24px; line-height: 32px; font-weight: 700; }
.price-site-links > a { color: #fff; }
.site-nav-current, .price-site-links > a.site-nav-current, .price-site-mobile-menu > a.site-nav-current { color: oklch(55.8% .288 302.321) !important; }
@media(min-width:640px) { #root nav > .max-w-7xl, .price-site-nav { padding-inline: 24px; } }
@media(min-width:1024px) { #root nav > .max-w-7xl, .price-site-nav { padding-inline: 32px; } }
@media(max-width:767px) {
  #root nav > div > .h-16, .price-site-nav { grid-template-columns: 1fr auto; }
  #root nav .hidden.md\:flex, .price-site-links { display: none; }
  .price-site-menu-toggle { width: 40px; height: 40px; box-sizing: border-box; }
}
