/* Shared page furniture: the fixed header and the footer, on every page.
   The markup lives in partials/header.html and partials/footer.html and is
   injected at build time.

   The front page and the inner pages run different palettes, warm and cool,
   and both are deliberate. So the rules below reach for whichever custom
   property the page defines and fall back to the other, rather than forcing
   one set of colours onto both. */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 58px;
  padding: 9px clamp(18px, 4vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(5, 13, 17, 0.46);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12);
  color: #a9babf;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

.site-header a,
.site-header button {
  color: inherit;
}

.site-brand {
  justify-self: start;
  color: #eef5f6 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  text-decoration: none;
}

.site-nav,
.site-languages {
  display: flex;
  align-items: center;
}

.site-nav {
  justify-content: center;
  gap: clamp(14px, 2.2vw, 30px);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.site-nav a {
  padding: 8px 0 7px;
  border-bottom: 1px solid transparent;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  border-color: #77d4e4;
  color: #77d4e4;
  outline: none;
}

.site-languages {
  justify-self: end;
  gap: 5px;
}

/* The Finnish copy is not proofread yet, so the switcher ships hidden and
   the language is reachable only through ?lang=fi. The element stays in the
   grid so the third column keeps the nav centred. `.site-languages` sets
   display:flex, which outranks the user-agent rule for [hidden]. */
.site-languages[hidden] {
  display: none;
}

.site-languages button {
  min-width: 30px;
  padding: 6px 7px;
  border: 1px solid transparent;
  background: transparent;
  font: 600 10px/1 Inter, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.site-languages button:hover,
.site-languages button:focus-visible,
.site-languages button[aria-pressed="true"] {
  border-color: rgba(119, 212, 228, 0.46);
  color: #77d4e4;
  outline: none;
}

@media (max-width: 700px) {
  .site-header {
    grid-template-columns: 1fr auto;
    gap: 8px;
    min-height: 58px;
    padding: 8px 13px;
  }

  .site-brand { display: none; }

  .site-nav {
    justify-content: flex-start;
    gap: clamp(11px, 4vw, 20px);
    font-size: 10px;
  }

  .site-languages button {
    min-width: 27px;
    padding: 6px 4px;
  }
}

@media (max-width: 380px) {
  .site-nav { gap: 10px; }
  .site-languages { gap: 1px; }
}

/* ───────────────────────── footer ───────────────────────── */

.site-footer {
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--line, rgba(244, 241, 234, 0.14));
  background: rgba(4, 11, 15, 0.94);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 60px;
  width: min(1240px, calc(100% - 44px));
  margin: 0 auto;
  padding: 34px 0 40px;
}

/* The footer states its own colours rather than inheriting the page palette.
   The three page types disagree about what --ink and --muted mean — on the CV
   page --ink is near-black, for the printed sheet — so inheriting would make
   the footer unreadable there. */
.site-footer p {
  margin: 0;
  color: #a3b0b5;
  font-size: 11px;
  line-height: 1.6;
}

.site-footer .disclosure {
  max-width: 620px;
  color: #c5d0d3;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: flex-end;
  text-align: right;
}

.site-footer a {
  color: #7dd3fc;
  text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; }

/* A link sitting inside a run of text cannot rely on colour alone to be
   recognisable as a link (WCAG 1.4.1). The standalone links above each own
   their whole line, so only this one needs the underline. */
.site-footer a.inline-link { text-decoration: underline; }

@media (max-width: 900px) {
  .site-footer-inner { grid-template-columns: 1fr; }
  .footer-contact { justify-content: flex-start; text-align: left; }
}

@media print {
  .site-header,
  .site-footer { display: none !important; }
}