/* ==========================================================================
   Laskurisivut.fi -- design tokens
   Konsepti: "mittarilaite" -- kylmä paperi + syvä metsänvihreä + meripihka-
   aksentti, luvut aina tasalevyisellä mono-fontilla kuin instrumentin
   lukemassa. Kulmasulkeet (ks. .result-card.highlight, .calc-hub-card.featured,
   logomerkki) ovat sivuston toistuva tunnusmerkki.
   ========================================================================== */

:root {
  --paper: #F3F6F4;
  --surface: #FFFFFF;
  --surface-2: #EAF1EC;
  --ink: #0E1F19;
  --ink-muted: #55685F;
  --line: #DBE5DF;
  --line-strong: #C2D1C8;

  --forest: #146B52;
  --forest-deep: #0D4E3A;
  --forest-tint: #E7F2ED;
  --forest-ink: #FFFFFF;

  --amber: #DB8A2B;
  --amber-deep: #B96F1C;
  --amber-tint: #FBEEDC;

  --radius: 8px;
  --radius-sm: 5px;
  --radius-pill: 999px;
  --max-width: 960px;

  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(14, 31, 25, 0.05);
  --shadow-md: 0 10px 28px -10px rgba(14, 31, 25, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0A1613;
    --surface: #101F1A;
    --surface-2: #16261F;
    --ink: #E9F2EE;
    --ink-muted: #91A69B;
    --line: #223730;
    --line-strong: #2E463C;

    --forest: #37BD8E;
    --forest-deep: #56D2A6;
    --forest-tint: #12281F;
    --forest-ink: #06120E;

    --amber: #F0A24C;
    --amber-deep: #F7BC7A;
    --amber-tint: #2A1F10;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.6em;
}
h2 { font-size: 1.5rem; }
h3 { font-size: 1.12rem; }

a { color: inherit; }

::selection { background: var(--amber-tint); color: var(--ink); }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--forest);
  color: var(--forest-ink);
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
}
.logomark { color: var(--ink); flex-shrink: 0; }
.logo-word {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.logo-word span { color: var(--amber); }

nav[aria-label="Päävalikko"] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
nav[aria-label="Päävalikko"] a {
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: color 0.12s ease, background-color 0.12s ease;
}
nav[aria-label="Päävalikko"] a:hover { color: var(--forest); background: var(--surface-2); }
nav[aria-label="Päävalikko"] a.active { color: var(--forest); }
nav[aria-label="Päävalikko"] a:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.calc-hub-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ==========================================================================
   Nav-pudotusvalikko: "Kaikki laskurit"
   ========================================================================== */
.nav-item-dropdown { position: relative; }

.nav-dropdown-toggle { display: inline-flex; align-items: center; }
.nav-dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  opacity: 0.6;
}
.nav-item-dropdown:hover .nav-dropdown-toggle::after,
.nav-item-dropdown:focus-within .nav-dropdown-toggle::after,
.nav-item-dropdown.is-open .nav-dropdown-toggle::after {
  transform: rotate(225deg) translate(1px, 1px);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  /* Ei väliä liipaisimen ja valikon välissä: tyhjä rako katkaisisi hoverin,
     kun hiiri liikkuu viistosti alas kohti valikon sisältöä. */
  padding: 1.15rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-width: calc(100vw - 2rem);
  /* Turvaverkko: valikko roikkuu kiinni liipaisimessa, joka on kiinteän
     (sticky) headerin sisällä, joten sivun vieritys ei koskaan paljasta
     valikon reunan alle jäävää sisältöä. Jos valikko on silti korkeampi
     kuin näytön käytettävissä oleva tila, se vierii omana laatikkonaan.
     iOS Safaria varten 100dvh 100vh:n päälle: Safarissa 100vh vastaa koko
     näyttöä ikään kuin osoiterivi olisi piilossa, vaikka se olisi näkyvissä,
     jolloin turvaverkko laskisi liikaa tilaa eikä valikko todellisuudessa
     mahtuisikaan -- 100dvh seuraa aina todellista näkyvää korkeutta.
     Chromessa 100vh on jo vastannut näkyvää korkeutta, joten sinne tämä ei
     tuo muutosta. */
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 30;
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-item-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown-desktop {
  display: grid;
  grid-template-columns: repeat(4, minmax(172px, 1fr));
  gap: 0.2rem 1.75rem;
  align-items: start;
}
.nav-dropdown-mobile { display: none; }
.nav-dropdown-col h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.nav-dropdown-col a {
  position: relative;
  display: block;
  padding: 0.32rem 0.5rem 0.32rem 0.65rem;
  margin: 0 0 0.05rem -0.65rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 500;
  overflow-wrap: break-word;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-dropdown-col a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--amber);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height 0.12s ease;
}
.nav-dropdown-col a:hover,
.nav-dropdown-col a:focus-visible {
  background: var(--surface-2);
  color: var(--forest);
}
.nav-dropdown-col a:hover::before,
.nav-dropdown-col a:focus-visible::before {
  height: 55%;
}
.nav-dropdown-footer {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.nav-dropdown-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--forest);
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  transition: gap 0.15s ease, color 0.15s ease;
}
.nav-dropdown-footer a:hover { gap: 0.55rem; color: var(--forest-deep); }

/* 4 kiinteän 172px-sarakkeen valikko vaatii n. 814px tilaa, joten se ei
   mahdu enää tabletilla/kapealla työpöydällä -- pudotetaan 2 sarakkeeseen
   ilman alarajaa, jolloin sarakkeet kutistuvat aina saatavan tilan mukaan
   sen sijaan että pakottaisivat sivun ylileveäksi. */
@media (max-width: 860px) {
  .nav-dropdown-menu {
    /* Ilman kiinteää leveyttä absoluuttisesti sijoitettu ruudukko laskee
       oman "shrink-to-fit"-leveytensä 0-alarajaisista 1fr-sarakkeista
       lähes nollaan, jolloin todellinen sisältö vuotaa näkymättömän
       laatikon ulkopuolelle. Kiinteä leveys poistaa koko ongelman. */
    width: min(420px, calc(100vw - 1.5rem));
    max-width: none;
  }
  .nav-dropdown-desktop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kapealla näytöllä header rivittyy kahdelle riville (logo + nav), jolloin
   valikon liipaisin ei enää ole lähellä sivun oikeaa reunaa. Ankkuroidaan
   valikko silloin koko headeriin (position: sticky kelpaa ankkuriksi) sen
   sijaan että se roikkuisi liipaisimen kohdalla ruudun ulkopuolella.
   Samalla vaihdetaan pylväsvalikko yhden kategorian kerrallaan avautuvaan
   harmonikkaan: puhelimen näytön korkeus ei riitä kaikkien kategorioiden
   näyttämiseen kerralla, joten koko listan sijaan auki on oletuksena vain
   otsikot, ja käyttäjä avaa tarvitsemansa kategorian erikseen. */
@media (max-width: 480px) {
  .nav-item-dropdown { position: static; }
  .nav-dropdown-menu { right: 0.75rem; }
  .nav-dropdown-desktop { display: none; }
  .nav-dropdown-mobile { display: block; }
}

.nav-mobile-top {
  display: block;
  padding: 0.55rem 0.65rem;
  margin: 0 0 0.3rem;
  border-radius: var(--radius-sm);
  color: var(--forest);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: background-color 0.12s ease;
}
.nav-mobile-top:hover,
.nav-mobile-top:focus-visible { background: var(--surface-2); }

.nav-mobile-cat { border-top: 1px solid var(--line); }
.nav-mobile-cat:first-of-type { border-top: none; }
.nav-mobile-cat summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
}
.nav-mobile-cat summary::-webkit-details-marker { display: none; }
.nav-mobile-cat summary::after {
  content: "+";
  color: var(--forest);
  font-size: 0.9rem;
}
.nav-mobile-cat[open] summary::after { content: "\2212"; }
.nav-mobile-cat a {
  display: block;
  padding: 0.42rem 0.65rem 0.42rem 1.15rem;
  margin: 0 0 0.05rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  overflow-wrap: break-word;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-mobile-cat a:hover,
.nav-mobile-cat a:focus-visible { background: var(--surface-2); color: var(--forest); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding: 3.25rem 0 1.75rem;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.75rem);
  margin: 0 0 1.1rem;
}
.hero .lead {
  position: relative;
  color: var(--ink-muted);
  max-width: 620px;
  margin: 0 auto;
  padding-top: 1.15rem;
  font-size: 1.05rem;
}
.hero .lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 2px;
  background: var(--amber);
  transform: translateX(-50%);
}

/* ==========================================================================
   Mainospaikat
   ========================================================================== */
.ad-slot {
  margin: 1.75rem auto;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-slot .adsbygoogle {
  width: 100%;
  min-height: 90px;
  background: repeating-linear-gradient(
    45deg, var(--surface), var(--surface) 10px,
    var(--surface-2) 10px, var(--surface-2) 20px
  );
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-size: 0.8rem;
}

/* ==========================================================================
   Laskuri: lomake + tulokset
   ========================================================================== */
.calculator {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 2rem;
  align-items: start;
  padding: 1rem 1.25rem 2.5rem;
}
@media (max-width: 780px) {
  .calculator { grid-template-columns: 1fr; }
}
/* Grid-lasten oletus min-width on auto, jolloin ne eivät suostu kutistumaan
   sisältöään pienemmiksi vaikka raidan leveys (1fr) sen sallisi -- tämä
   pakotti koko sivun ylileveäksi kapeilla näytöillä. */
.calc-form,
.results {
  min-width: 0;
}

.calc-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.calc-form h2 { margin-top: 0; font-size: 1.1rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.86rem;
  margin-bottom: 0.35rem;
  color: var(--ink-muted);
}
.field input, .field select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.field input[type="number"],
.field input[type="text"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px var(--forest-tint);
}

/* Radio-/valintaryhmä pillinä (esim. tasaerä vs. tasalyhennys) */
.field-radiogroup {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.field-radiogroup label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.field-radiogroup input[type="radio"] {
  accent-color: var(--forest);
  width: 15px;
  height: 15px;
}
.field-radiogroup label:has(input:checked) {
  border-color: var(--forest);
  background: var(--forest-tint);
  color: var(--forest-deep);
}

.btn-primary {
  width: 100%;
  background: var(--forest);
  color: var(--forest-ink);
  border: none;
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.08s ease;
}
.btn-primary:hover { background: var(--forest-deep); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 0.6rem 1rem;
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--ink-muted); }

.results h2 { font-size: 1.1rem; margin-top: 0; }

.result-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 520px) {
  .result-cards { grid-template-columns: 1fr; }
}
.result-card {
  position: relative;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.result-card.highlight {
  background: var(--forest-tint);
  border-color: var(--forest);
}
/* Signature: mittarin kulmasulkeet korostetulla tuloskortilla */
.result-card.highlight::before,
.result-card.highlight::after,
.calc-hub-card.featured::before,
.calc-hub-card.featured::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: var(--amber);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.result-card.highlight::before,
.calc-hub-card.featured::before {
  top: -1px; left: -1px;
  border-top-width: 2.5px;
  border-left-width: 2.5px;
  border-top-left-radius: 5px;
}
.result-card.highlight::after,
.calc-hub-card.featured::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 2.5px;
  border-right-width: 2.5px;
  border-bottom-right-radius: 5px;
}
.result-label { font-size: 0.78rem; color: var(--ink-muted); }
.result-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.chart-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
#chart {
  width: 100%;
  height: auto;
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
}

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
caption {
  text-align: left;
  padding: 0.85rem 1rem 0.15rem;
  font-weight: 700;
  font-size: 0.92rem;
}
th, td {
  padding: 0.55rem 1rem;
  text-align: right;
  border-bottom: 1px solid var(--line);
}
th:first-child, td:first-child { text-align: left; }
td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
thead th {
  font-family: var(--font-sans);
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tbody tr:hover { background: var(--surface-2); }

/* Pitkä lyhennystaulukko: rajattu korkeus + pystyvieritys */
.table-wrap.scroll-y {
  max-height: 480px;
  overflow-y: auto;
}
.table-wrap.scroll-y thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
}

/* ==========================================================================
   Opas / artikkeli
   ========================================================================== */
.guide {
  padding: 1rem 1.25rem 2.5rem;
}
.guide h2 { margin-top: 2.25rem; }
.guide p { color: var(--ink); }
.formula {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.2rem;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.2rem;
  display: inline-block;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
}
.faq details[open] { border-color: var(--line-strong); }
.faq summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: var(--forest);
  font-family: var(--font-mono);
}
.faq details[open] summary::before { content: "\2212"; }
.faq p { margin: 0.6rem 0 0; color: var(--ink-muted); }

/* ==========================================================================
   Laskuri-hub
   ========================================================================== */
.calc-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 2rem;
}
.calc-hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.calc-hub-card:hover {
  border-color: var(--forest);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.calc-hub-card.featured {
  background: var(--forest-tint);
  border-color: var(--forest);
}
.calc-hub-card-title {
  font-weight: 700;
  font-size: 1.02rem;
}
.calc-hub-card-desc {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* Huomiolaatikko */
.note {
  background: var(--amber-tint);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  margin: 1rem 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0 2.5rem;
  margin-top: 2rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.footer-inner nav a { color: var(--ink-muted); text-decoration: none; }
.footer-inner nav a:hover { color: var(--forest); }
.disclaimer { width: 100%; margin: 0.25rem 0 0; font-size: 0.8rem; }

/* ==========================================================================
   Evästebanneri
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
  box-shadow: var(--shadow-md);
}
.cookie-banner p { margin: 0; font-size: 0.9rem; max-width: 560px; color: var(--ink-muted); }
.cookie-actions { display: flex; gap: 0.6rem; }
.cookie-actions .btn-primary,
.cookie-actions .btn-secondary { width: auto; }