/* One native header. Its slot never contracts, so content does not jump. */
body .site-header[data-cx-header] {
  --cx-motion:1000ms cubic-bezier(.16,1,.3,1);
  --cx-surface-motion:700ms cubic-bezier(.16,1,.3,1);
  --cx-slot:88px;
  position:sticky;top:0;z-index:100;height:var(--cx-slot);min-height:var(--cx-slot);
  padding:0;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  transform:none;translate:none;transition:none;
}
body .site-header[data-cx-header]>.header-inner {
  position:absolute;top:0;left:50%;transform:translateX(-50%);margin:0;
  width:100%;max-width:none;height:var(--cx-slot);min-height:0;
  padding:0 max(24px,calc((100% - 1280px)/2));border:1px solid transparent;border-radius:0;
  background:var(--header,var(--paper));box-shadow:none;
  transition:width var(--cx-motion),height var(--cx-motion),top var(--cx-motion),padding var(--cx-motion),
    border-radius var(--cx-motion),gap var(--cx-motion),background-color var(--cx-surface-motion),
    border-color var(--cx-surface-motion),box-shadow var(--cx-surface-motion),backdrop-filter var(--cx-surface-motion);
}
body .site-header[data-cx-header][data-cx-compact="true"]>.header-inner {
  width:min(1120px,calc(100% - 40px));height:70px;top:20px;padding:0 18px 0 24px;
  border-radius:50px;border-color:var(--line);
  background:color-mix(in srgb,var(--header,var(--paper)) 94%,transparent);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 14px 34px #00000024;
}
body.public-body .site-header[data-cx-header] .brand {display:flex;align-items:center;min-height:44px;width:262px;transition:width var(--cx-motion)}
body.public-body .site-header[data-cx-header]>.header-inner{padding-inline:max(48px,calc((100% - 1280px)/2));backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
body.public-body .site-header[data-cx-header][data-cx-compact="true"]>.header-inner{padding-inline:24px 18px;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
body.public-body .site-header[data-cx-header] .brand img {max-height:60px;transition:max-height var(--cx-motion)}
body.public-body .site-header[data-cx-header][data-cx-compact="true"] .brand {width:230px}
body.public-body .site-header[data-cx-header][data-cx-compact="true"] .brand img {max-height:44px}
body.public-body .site-header[data-cx-header] .desktop-nav {gap:22px;margin-right:14px;transition:gap var(--cx-motion),margin var(--cx-motion)}
body.public-body .site-header[data-cx-header] .desktop-nav a {display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding-inline:4px;white-space:nowrap}
body.public-body .site-header[data-cx-header] .desktop-nav a.nav-cta {padding:10px 16px;line-height:1.35}
body .site-header[data-cx-header] :is(.theme-toggle,.mobile-navigation>summary,.cx-menu-close){min-width:44px;min-height:44px}
body .site-header[data-cx-header] :focus-visible {outline:3px solid var(--accent,var(--red));outline-offset:3px}
body .site-header[data-cx-header] .mobile-navigation nav {
  left:0;right:0;top:calc(100% + 8px);max-height:calc(100dvh - 120px);overflow-y:auto;
  border:1px solid var(--line);border-radius:16px;overscroll-behavior:contain;
}
body .site-header[data-cx-header] .mobile-navigation nav a {display:flex;align-items:center;min-height:44px}
body .site-header[data-cx-header] .cx-menu-close {
  align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface,var(--paper));color:var(--text,var(--ink));font:inherit;cursor:pointer;
}
body .site-header[data-cx-header] .mobile-navigation[open]>summary{font-size:0}
body .site-header[data-cx-header] .mobile-navigation[open]>summary::after{content:'×';font-size:26px}
html.cx-header-menu-open{overflow:hidden!important;scrollbar-gutter:stable;overscroll-behavior:none}
html.cx-header-menu-open body{overflow:clip!important;overscroll-behavior:none}
@media(max-width:1100px){
  body.public-body .site-header[data-cx-header] .desktop-nav {display:none}
  body.public-body .site-header[data-cx-header] .mobile-navigation {display:block}
  body.public-body .site-header[data-cx-header] .header-actions {margin-left:auto}
}
@media(max-width:760px){
  body.public-body .site-header[data-cx-header] {--cx-slot:77px}
  body.public-body .site-header[data-cx-header]>.header-inner{padding:0 16px;gap:12px}
  body.public-body .site-header[data-cx-header][data-cx-compact="true"]>.header-inner{width:calc(100% - 28px);height:64px;top:12px;padding:0 10px 0 16px;gap:8px}
  body.public-body .site-header[data-cx-header] .brand {width:min(215px,calc(100vw - 152px))}
  body.public-body .site-header[data-cx-header][data-cx-compact="true"] .brand {width:min(190px,calc(100vw - 166px))}
  body.public-body .site-header[data-cx-header][data-cx-compact="true"] .brand img {max-height:38px}
  body .site-header[data-cx-header] .mobile-navigation nav {max-height:calc(100dvh - 100px)}
}
/* The existing private administration has a second navigation row on small screens. */
body.admin-body.cx-admin-brand .site-header[data-cx-header]{--cx-slot:112px}
body.admin-body.cx-admin-brand .site-header[data-cx-header]>.header-inner{display:grid;grid-template-columns:minmax(180px,1fr) auto 44px;gap:16px;padding:16px max(24px,calc((100% - 1200px)/2));background:var(--paper)}
body.admin-body.cx-admin-brand .site-header[data-cx-header][data-cx-compact="true"]>.header-inner{height:88px;padding:12px 22px;border-radius:44px}
@media(max-width:1100px){
  body.admin-body.cx-admin-brand .site-header[data-cx-header]{--cx-slot:160px}
  body.admin-body.cx-admin-brand .site-header[data-cx-header]>.header-inner{grid-template-columns:minmax(0,1fr) 44px;gap:10px;padding:15px 20px}
  body.admin-body.cx-admin-brand .site-header[data-cx-header][data-cx-compact="true"]>.header-inner{width:calc(100% - 28px);height:144px;top:12px;padding:12px 16px;border-radius:28px}
}
body .site-header[data-cx-header]:not([data-cx-ready="true"]) *,body .site-header[data-cx-header]:not([data-cx-ready="true"])>.header-inner{transition:none!important}
@media(prefers-reduced-motion:reduce){body .site-header[data-cx-header] *,body .site-header[data-cx-header]>.header-inner{transition:none!important}}
html[data-cx-reduced-motion="true"] .site-header[data-cx-header] *,html[data-cx-reduced-motion="true"] .site-header[data-cx-header]>.header-inner{transition:none!important}
