/* Shared header for every page. Keep page-specific styles out of this component. */
.site-header {
    height:var(--header-height); position:sticky; top:0; z-index:30;
    background:var(--navy); color:#fff; border:0;
    font-family:var(--font-sans);
    font-weight:500; line-height:1.65;
}
.site-header .header-inner { height:100%; display:flex; align-items:center; gap:32px; }
.site-header .brand { display:inline-flex; align-items:center; flex-shrink:0; color:#fff; font-size:18px; font-weight:700; letter-spacing:-.6px; gap:8px; }
.site-header .brand img { width:29px; height:29px; object-fit:contain; padding:2px; border-radius:7px; background:#fff; }
.site-header .desktop-nav { display:flex; align-items:center; gap:28px; margin-inline:auto; font-size:16px; font-weight:600; }
.site-header .desktop-nav a:hover,.site-header nav [aria-current="page"] { color:var(--hero-accent); }
.site-header a:focus-visible,.site-header summary:focus-visible { outline-color:var(--hero-accent); }
.site-header .header-actions { display:flex; align-items:center; gap:20px; }
.site-header .language-picker { position:relative; font-size:14px; }
.site-header .language-picker summary { display:flex; align-items:center; gap:7px; min-height:44px; }
.site-header .language-picker summary > .icon:first-child { width:18px; }
.site-header .language-picker summary > .icon:last-child { width:14px; }
.site-header .language-options { position:absolute; top:calc(100% + 8px); right:0; min-width:160px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 12px 36px #17233b12; }
.site-header .language-options a { padding:9px 12px; min-height:44px; display:flex; justify-content:space-between; gap:20px; white-space:nowrap; border-radius:6px; }
.site-header .language-options a:hover,.site-header .language-options a[aria-current] { background:var(--surface-tint); color:var(--blue); }
.site-header .language-options a:focus-visible { outline-color:var(--blue); }
.site-header .language-options .icon { width:15px; }
.site-header .mobile-menu { display:none; }
@media(max-width:1100px) {
    .site-header .header-inner { gap:20px; }
    .site-header .desktop-nav { gap:22px; font-size:14px; }
}
@media(max-width:1050px) {
    .site-header .desktop-nav { display:none; }
    .site-header .header-actions { margin-left:auto; }
    .site-header .mobile-menu { display:block; }
    .site-header .mobile-menu > summary { width:44px; height:44px; display:flex; justify-content:center; flex-direction:column; gap:6px; }
    .site-header .mobile-menu > summary span { height:1.5px; width:22px; background:#fff; margin-inline:auto; }
    .site-header .mobile-menu[open] > summary span:first-child { transform:translateY(3.75px) rotate(45deg); }
    .site-header .mobile-menu[open] > summary span:last-child { transform:translateY(-3.75px) rotate(-45deg); }
    .site-header .mobile-menu nav { position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column; gap:3px; padding:12px 32px 20px; background:var(--navy); border-bottom:1px solid #385c7a; box-shadow:0 15px 30px #17233b0d; }
    .site-header .mobile-menu nav a { padding:10px 0; min-height:44px; font-size:15px; }
    .site-header .mobile-menu nav a:hover { color:var(--hero-accent); }
}
@media(max-width:600px) {
    .site-header .header-inner { gap:10px; }
    .site-header .brand { font-size:17px; }
    .site-header .brand img { width:27px; height:27px; }
    .site-header .header-actions { gap:10px; }
    .site-header .language-picker { font-size:12px; }
    .site-header .language-picker summary > .icon:first-child { display:none; }
    .site-header .mobile-menu nav { padding-inline:24px; }
}

.site-header .header-install { white-space:nowrap; flex-shrink:0; height:36px; min-height:36px; padding:5px 14px; gap:5px; }
.site-header .mobile-menu nav .header-install-mobile { display:none; }
@media(max-width:850px) {
    .site-header .header-install { display:none; }
    .site-header .mobile-menu nav .header-install-mobile { display:inline-flex; align-self:flex-start; padding:10px 14px; gap:5px; margin-top:8px; }
}



.site-header .mobile-menu nav .button-gradient-on-dark,
.site-header .mobile-menu nav .button-gradient-on-dark:hover { color:var(--navy); }