/* =========================================================================
   OEF alatunniste · yksi kanoninen footer kaikille 21 staattiselle sivulle
   -------------------------------------------------------------------------
   9.11.2026 (claude/oef-yhtenainen). Ennen tätä sivustolla oli seitsemän
   footer-varianttia: Tailwind-sivujen kolme, runkosivujen yksi, etusivu,
   energiaopas ja kartoitus. Markup on nyt sama joka sivulla (scripts/
   yhtenaista-ala.mjs kirjoittaa sen), ja tämä tiedosto piirtää sen ilman
   Tailwindia, koska kahdeksan runkosivua ei lataa Tailwind-CDN:ää.

   Mitat on luettu etusivun footerista 1280 px:llä (getComputedStyle),
   jotta etusivu ei muutu: palstat 4 x 266 px, väli 32 px, otsikko 16/700,
   linkit 16 px --teksti-3, osoitelohko 13 px --teksti-4, alarivi keskitetty.
   Poikkeus etusivusta: tekijärivin väri on --teksti-4 eikä slate-600, koska
   slate-600 jäi alle 4,5:1:n.
   ========================================================================= */

.oef-ala {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 15, 20, 0.5);
  padding: 48px 24px;
  font-family: var(--f-leipa, 'Inter', system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--teksti-3, #94A3B8);
  text-align: left;
}
.oef-ala__palsta { max-width: 1160px; margin: 0 auto; }
.oef-ala__ruudukko { display: grid; gap: 32px; margin: 0 0 32px; }
@media (min-width: 768px) { .oef-ala__ruudukko { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* .oef-ala.oef-ala (0-2-1) ohittaa oef-typo.css:n html p:not([class*="max-w"]) (0-1-2) 72ch-katon. */
.oef-ala.oef-ala p, .oef-ala.oef-ala ul, .oef-ala.oef-ala li, .oef-ala.oef-ala address { margin: 0; max-width: none; }
.oef-ala ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.oef-ala address { font-style: normal; }
.oef-ala a { color: inherit; text-decoration: none; transition: color var(--dur-fast, 150ms) ease-out; }
.oef-ala a:hover { color: var(--toiminta, #FF5C00); }
.oef-ala a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; border-radius: 2px; }
/* Footer kantaa itse osoitteen katkeavuuden (10.11.2026). Muut sivut saavat saman
   oef-tokens.css §9:stä, mutta varke.html (Astro) ei lataa tokens-tiedostoa, ja
   ilman tätä katkeamaton osoite venytti 4. palstan 232 px:iin: vuoto 52 px @768. */
.oef-ala a[href^="mailto:"] { overflow-wrap: anywhere; }

.oef-ala.oef-ala .oef-ala__merkki { display: flex; flex-direction: column; margin: 0 0 16px; color: #FFFFFF; }
.oef-ala__merkki-nimi { font-size: 1.3125rem; font-weight: 700; line-height: 1.05; }
.oef-ala__merkki-maa { font-size: 0.8125rem; font-weight: 600; opacity: 0.7; line-height: 1.45; }
.oef-ala.oef-ala .oef-ala__kuvaus { margin: 0 0 12px; }
.oef-ala.oef-ala .oef-ala__riippumaton { max-width: 34ch; margin: 0 0 12px; font-size: 0.8125rem; color: var(--teksti-3, #94A3B8); }
.oef-ala__osoite { display: grid; gap: 4px; font-size: 0.8125rem; line-height: 1.45; color: var(--teksti-4, #7C8CA1); }

.oef-ala.oef-ala .oef-ala__otsikko { margin: 0 0 16px; color: #FFFFFF; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.oef-ala__yritys { color: #FFFFFF; font-weight: 700; }

.oef-ala__alarivi {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 32px;
  text-align: center;
}
.oef-ala.oef-ala .oef-ala__tekija { margin-top: 8px; font-size: 0.75rem; color: var(--teksti-4, #7C8CA1); }
.oef-ala__piste {
  display: inline-block; width: 4px; height: 4px; margin: 0 2px; border-radius: 50%;
  background: #22C55E; vertical-align: middle;
  animation: oef-ala-syke 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes oef-ala-syke { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .oef-ala__piste { animation: none; } }

/* mittaus.js liittää footerin perään rivin "Evästeasetukset · Tietosuojaseloste".
   Se keskitetään alarivin alle, ettei se roiku palstan ulkopuolella vasemmalla. */
.oef-ala.oef-ala .oef-ev-footer { max-width: 1160px; margin: 16px auto 0; font-size: 0.8125rem; text-align: center; }
.oef-ala .oef-ev-footer button {
  background: none; border: 0; padding: 4px 2px; cursor: pointer; font: inherit;
  color: var(--teksti-3, #94A3B8); text-decoration: underline;
}
.oef-ala .oef-ev-footer a { text-decoration: underline; }
.oef-ala .oef-ev-footer button:hover, .oef-ala .oef-ev-footer a:hover { color: #FFFFFF; }
.oef-ala .oef-ev-footer button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }