/* =========================================================================
   Jaettu header — SAMA joka sivulla. Itsenäinen komponentti: ei riipu
   style.css:n eikä chami.css:n tokeneista, jotta ilme on identtinen kaikkialla.
   Chamin punainen teema (Deep Blush #530F0E, Rich Wood #30150E, Silk Beach #F8E5D7).
   Markup: onnin .site-header; käyttäytyminen: onni-cv.js (#site-header/#nav-toggle/#site-nav).
   ========================================================================= */
:root { --hh: 76px; }

/* kiinteä, läpinäkyvä header; kermainen glass morphism skrollatessa */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--hh); display: flex; align-items: center;
  background: transparent;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-header.is-stuck {
  background: rgba(248, 229, 215, .9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(48, 21, 14, .08), 0 12px 34px -24px rgba(48, 21, 14, .55);
}

/* headeri on kiinteä, joten sisältö alkaa sen alta */
body { padding-top: var(--hh); }

/* Leveys ja reunapadding tulevat sivun omasta .wrap-luokasta (markup: class="wrap header-inner"),
   jolloin headerin reunat osuvat sivun sisällön reunoihin joka sivulla. Tässä vain flex-asettelu. */
.header-inner {
  display: flex; align-items: center; gap: 28px; width: 100%; box-sizing: border-box;
}

/* kielivalitsin: tekstilinkit (staattiset sivut) ja i18n-napit näyttävät samalta */
.lang-switch { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.lang-switch a, .lang-switch button {
  font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .02em;
  color: #30150e; background: none; border: 0; padding: 0; cursor: pointer;
  opacity: .6; text-decoration: none;
}
.lang-switch a:hover, .lang-switch button:hover { opacity: 1; color: #530f0e; text-decoration: none; }
.lang-switch a[aria-current="true"], .lang-switch button[aria-pressed="true"] { opacity: 1; color: #530f0e; }

.header-mail {
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 18px;
  color: #30150e; white-space: nowrap; text-decoration: none;
}
.header-mail:hover { color: #530f0e; text-decoration: none; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 17px;
  color: #30150e; text-decoration: none;
}
.site-nav a:hover { color: #530f0e; text-decoration: none; }
.site-nav a[aria-current="page"] { color: #530f0e; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 48px; height: 48px; padding: 0;
  background: none; border: 0; cursor: pointer; color: #30150e;
}
.nav-toggle svg { width: 28px; height: 28px; margin: 0 auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: var(--hh) 0 auto 0; margin: 0; display: none;
    background: rgba(248, 229, 215, .98);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 24px rgba(48, 21, 14, .12);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 8px 24px 18px; }
  .site-nav li { border-bottom: 1px solid #e4c9b8; }
  .site-nav li:last-child { border-bottom: 0; }
  .site-nav a { display: block; padding: 16px 0; font-size: 18.5px; }
}

@media (max-width: 560px) {
  .header-mail { display: none; }
}

@media print { .site-header { display: none; } body { padding-top: 0; } }

/* Chami-logo brändin vasemmalla; logo näkyy aina, teksti piiloutuu kapealla (≤560px) */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.header-logo-link { display: inline-flex; flex: none; }
.header-logo { height: 40px; width: auto; display: block; }
@media (max-width: 560px) { .header-logo { height: 34px; } }