/* Sivuston yläpalkki (kelluva kapseli) kirjautumissivulle: sama kuin etusivulla. */
header.header { position: fixed; inset: 14px 0 auto; z-index: 100; width: auto; height: auto; margin: 0; display: block; border: 0; }
.header .navbar {
    width: min(980px, calc(100% - 28px)); min-height: 64px; margin-inline: auto; padding: 0 10px 0 22px;
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid var(--line); border-radius: 999px; background: rgba(6, 21, 45, .72); backdrop-filter: blur(18px);
    box-shadow: 0 14px 40px rgba(0, 8, 28, .35);
}
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { width: 78px; height: 40px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: #d8e5f6; font-size: .9rem; font-weight: 600; text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: #55b8ff; }
.nav-links a.login-link { padding: 12px 28px; font-size: 1rem; font-weight: 800; min-height: 46px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--blue); color: #fff; }
.nav-links a.login-link:hover { color: #fff; filter: brightness(1.12); }
.nav-links a:focus-visible, .menu-button:focus-visible { outline: 3px solid #55b8ff; outline-offset: 3px; border-radius: 6px; }
.menu-button { display: none; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; }
.menu-button span { display: block; width: 24px; height: 2px; margin: 5px auto; background: #fff; transition: .25s; }
body.has-site-header main { min-height: 100vh; padding-top: 8.5rem; }
@media (min-width: 1200px) { .header .navbar { width: min(1560px, calc(100% - 7vw)); min-height: 4rem; } .nav-logo img { width: 5.4rem; height: auto; } }
@media (min-width: 2000px) { .header .navbar { width: min(1900px, calc(100% - 7vw)); } }
@media (max-width: 900px) {
    .header .navbar { padding: 0 8px 0 18px; }
    .menu-button { display: block; }
    .nav-links { position: fixed; inset: 88px 14px auto; display: none; padding: 22px; flex-direction: column; align-items: stretch; text-align: center; border: 1px solid var(--line); border-radius: 16px; background: rgba(5, 20, 45, .97); box-shadow: 0 24px 70px rgba(0, 8, 28, .42); }
    .nav-links.open { display: flex; }
    .menu-button.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-button.open span:nth-child(2) { opacity: 0; }
    .menu-button.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (min-width: 1200px) { body.has-site-header main { grid-template-columns: minmax(0, 1fr) minmax(28rem, 34rem); gap: 6rem; } }

/* Lakisivut (tietosuoja, käyttöehdot): sama tumma yläpalkki kuin etusivulla molemmissa teemoissa */
.header { --blue: #1877f2; --line: rgba(129, 189, 255, .28); }
body.legal-body .nav-links a.login-link { background: #1877f2; color: #fff; }
body.legal-body .legal-page { padding-top: 8.5rem; }
body.legal-body .legal-tools { display: flex; justify-content: flex-end; margin: -.4rem 0 1rem; }
body.legal-body .header .navbar { background: rgba(6, 21, 45, .94); }

/* Jäsen- ja admin-paneeli: sama kelluva yläpalkki kuin etusivulla + tila ja uloskirjautuminen palkissa */
body.panel-page main { padding-top: 7.5rem; }
body.panel-page .auth-view { min-height: calc(100vh - 7.5rem); }
.nav-status { display: inline-flex; align-items: center; gap: 8px; color: #b9cbe3; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.nav-status .status-dot { margin: 0; }
.nav-links .nav-logout {
    display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 24px; margin: 0;
    border: 1px solid rgba(98, 196, 255, .55); border-radius: 999px; background: transparent; color: #fff;
    font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; transition: background .2s, border-color .2s;
}
.nav-links .nav-logout:hover { background: rgba(98, 196, 255, .14); border-color: #62c4ff; }
.nav-links .nav-logout.hidden { display: none !important; }
/* Lakisivut, vaalea teema: yläpalkki vaalenee myös (vaalea kapseli, tumma logo ja tummat linkit) */
:root[data-theme="light"] body.legal-body .header .navbar { background: rgba(255, 255, 255, .9); border-color: rgba(11, 35, 71, .18); box-shadow: 0 14px 40px rgba(11, 35, 71, .14); }
:root[data-theme="light"] body.legal-body .nav-logo img { filter: brightness(0); opacity: .9; }
:root[data-theme="light"] body.legal-body .nav-links a { color: #41536f; }
:root[data-theme="light"] body.legal-body .nav-links a:hover { color: #0a58b5; }
:root[data-theme="light"] body.legal-body .nav-links a.login-link { background: #1877f2; color: #fff; }
:root[data-theme="light"] body.legal-body .menu-button span { background: #0b1b33; }
@media (max-width: 900px) {
    :root[data-theme="light"] body.legal-body .nav-links { background: #fff; border-color: rgba(11, 35, 71, .18); box-shadow: 0 24px 70px rgba(11, 35, 71, .2); }
}
/* Yläpalkin painikkeet: sama korkeus ja tasavälit kapselin sisällä (nappi-tasaus) */
.header .navbar { padding: 0 10px 0 22px; }
.nav-links a.login-link, .nav-links .nav-logout { box-sizing: border-box; height: 44px; min-height: 0; padding: 0 26px; line-height: 1; font-size: 1rem; white-space: nowrap; }
@media (min-width: 1200px) {
    .header .navbar { padding: 0 .625rem 0 1.6rem; }
    .nav-links a.login-link, .nav-links .nav-logout { height: 2.75rem; padding: 0 1.7rem; }
}
@media (max-width: 900px) { .nav-links a.login-link, .nav-links .nav-logout { height: 46px; width: 100%; } }
/* Yläpalkin painike hieman pienemmäksi, välit pidetään tasaisina (nappi-koko-2) */
.header .navbar { padding: 0 12px 0 22px; }
.nav-links a.login-link, .nav-links .nav-logout { height: 40px; padding: 0 22px; font-size: .95rem; }
@media (min-width: 1200px) {
    .header .navbar { padding: 0 .8rem 0 1.6rem; }
    .nav-links a.login-link, .nav-links .nav-logout { height: 2.4rem; padding: 0 1.45rem; font-size: .95rem; }
}
@media (max-width: 900px) { .nav-links a.login-link, .nav-links .nav-logout { height: 46px; } }