@import url('../fonts/fonts.css');

/* ==========================================================================
   psykoterapiaytimessa.fi
   Psykologi- ja psykoterapiapalvelut Ytimessä

   Sisällys
     1. Design-tokenit
     2. Perustus ja typografia
     3. Layout-apurit
     4. Painikkeet ja linkit
     5. Header ja navigaatio
     6. Hero
     7. Osiot ja koristeet
     8. Komponentit (kortit, aikajana, askelmat, nostot)
     9. Yhteystiedot ja lomake
    10. Footer
    11. Sisäsivut (tietosuoja, kiitos)
    12. Liike ja saavutettavuus
   ========================================================================== */


/* 1. Design-tokenit
   ------------------------------------------------------------------------ */

:root {
  /* Väripaletti: salvia & hiekka.
     Kaikki tekstiparit on mitattu ≥ 4.5:1 (WCAG AA).
     --sage-300 on koristeväri: sitä ei käytetä koskaan tekstiin vaalealla. */
  --sage-900: #2F4739;
  --sage-700: #46614F;
  --sage-500: #6B8674;
  --sage-300: #A8BCAC;
  --sage-100: #D7E1D6;
  --sage-050: #E9EFE8;

  --sand-300: #DCCDB4;
  --sand-200: #E8DECD;
  --sand-100: #F3EDE2;

  --clay-700: #8F5539;
  --clay-500: #B4785A;

  --paper:    #FBF8F3;
  --paper-hi: #FFFDFA;
  --ink:      #262B27;
  --ink-soft: #545C51;

  /* Typografia */
  --font-head: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.17vw, 0.95rem);
  --step-0:  clamp(1.0625rem, 1.02rem + 0.23vw, 1.1875rem);
  --step-1:  clamp(1.25rem, 1.17rem + 0.38vw, 1.4375rem);
  --step-2:  clamp(1.5rem, 1.36rem + 0.7vw, 1.875rem);
  --step-3:  clamp(1.875rem, 1.65rem + 1.1vw, 2.5rem);
  --step-4:  clamp(2.25rem, 1.83rem + 2.1vw, 3.5rem);

  /* Rytmi */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: clamp(4rem, 3rem + 5vw, 7rem);

  --wrap:   72rem;
  --prose:  38rem;   /* ≈ 66 merkkiä riviä kohden */

  --radius-s:  10px;
  --radius-m:  16px;
  --radius-l:  24px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgba(47, 71, 57, 0.05),
              0 2px 8px rgba(47, 71, 57, 0.05);
  --shadow-m: 0 2px 4px rgba(47, 71, 57, 0.05),
              0 8px 24px rgba(47, 71, 57, 0.08);
  --shadow-l: 0 4px 8px rgba(47, 71, 57, 0.06),
              0 16px 40px rgba(47, 71, 57, 0.10);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 4.5rem;
}


/* 2. Perustus ja typografia
   ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Ankkurilinkit eivät katoa kiinteän headerin alle. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;

  /* Sivua ei saa voida vierittää vaakasuunnassa. Tässä käytetään clip-arvoa
     eikä hidden-arvoa: hidden loisi vieritysalueen, joka rikkoisi kiinteän
     ylätunnisteen (position: sticky). Varsinaiset ylivuodon lähteet on
     korjattu erikseen — tämä on vain varmistus. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;

  /* Pitkät suomen kielen yhdyssanat ja sähköpostiosoitteet katkeavat
     mieluummin kuin työntävät sivun laidan yli kapealla ruudulla. */
  overflow-wrap: break-word;
}

/* Flex- ja grid-lapset kutistuvat oletuksena vain sisältönsä
   vähimmäisleveyteen asti. Ilman tätä yksikin katkeamaton merkkijono
   levittää koko sarakkeen ruudun ulkopuolelle. */
.hero__grid > *,
.split > *,
.contact-grid > *,
.cards > *,
.routes > *,
.steps > li,
.traits > li > div,
.contact-details > li > div,
.notice > div,
.site-footer__grid > * {
  min-width: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sage-900);
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); letter-spacing: -0.01em; }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 600; }

p { margin: 0 0 var(--space-m); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--sage-700); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--clay-700); }

strong { font-weight: 600; color: var(--sage-900); }

ul, ol { margin: 0 0 var(--space-m); padding-left: 1.25em; }
li { margin-bottom: var(--space-2xs); }

img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--sage-700);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sand-300); color: var(--sage-900); }

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--sage-900);
  color: var(--paper);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  font-weight: 500;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--paper); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* 3. Layout-apurit
   ------------------------------------------------------------------------ */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.prose { max-width: var(--prose); }
.prose--wide { max-width: 46rem; }

.section { padding-block: var(--space-2xl); position: relative; }
.section--tight { padding-block: var(--space-xl); }

.section-head { margin-bottom: var(--space-l); max-width: 44rem; }

.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage-700);
  margin-bottom: var(--space-xs);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}


/* 4. Painikkeet ja linkit
   ------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 500;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease),
              border-color 0.2s var(--ease),
              transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--sage-700);
  color: #fff;
  box-shadow: var(--shadow-s);
}
.btn--primary:hover { background: var(--sage-900); color: #fff; box-shadow: var(--shadow-m); }

.btn--ghost {
  background: transparent;
  color: var(--sage-900);
  border-color: var(--sage-300);
}
.btn--ghost:hover { background: var(--sage-050); border-color: var(--sage-500); color: var(--sage-900); }

.btn--clay {
  background: var(--clay-700);
  color: #fff;
  box-shadow: var(--shadow-s);
}
.btn--clay:hover { background: #7A472F; color: #fff; box-shadow: var(--shadow-m); }

.btn--full { width: 100%; }

.btn .icon { width: 1.1em; height: 1.1em; flex: none; }

/* Tekstilinkki, jossa nuoli */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--sage-300);
  padding-bottom: 2px;
}
.link-arrow:hover { border-color: var(--clay-500); }
.link-arrow svg { width: 0.9em; height: 0.9em; transition: transform 0.2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }


/* 5. Header ja navigaatio
   ------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 243, 0.85);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--sage-100);
  box-shadow: 0 1px 12px rgba(47, 71, 57, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--sage-900);
}
.brand__mark { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
}
.brand__tag {
  font-size: 0.75rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.nav { display: flex; align-items: center; gap: var(--space-m); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav__list a:hover { color: var(--sage-900); border-bottom-color: var(--sage-300); }
.nav__list a[aria-current='true'] { color: var(--sage-900); border-bottom-color: var(--sage-700); }

.nav__cta { white-space: nowrap; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--sage-100);
  border-radius: var(--radius-s);
  color: var(--sage-900);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--sage-050); }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block;
  width: 1.15rem; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(6px); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after  { transform: rotate(-45deg); }

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; position: relative; }

  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-s);
    padding: var(--space-m) 1.25rem var(--space-l);
    background: var(--paper-hi);
    border-bottom: 1px solid var(--sage-100);
    box-shadow: var(--shadow-m);
    /* Piilotettu oletuksena — myös näppäimistöltä ja ruudunlukijalta. */
    display: none;
  }
  .nav.is-open { display: flex; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li + li { border-top: 1px solid var(--sage-050); }
  .nav__list a {
    display: block;
    padding: 0.85rem 0.25rem;
    font-size: 1.0625rem;
    border-bottom: none;
    border-left: 3px solid transparent;
    padding-left: 0.75rem;
  }
  .nav__list a:hover, .nav__list a[aria-current='true'] {
    border-bottom: none;
    border-left-color: var(--sage-700);
    background: var(--sage-050);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
  }
  .nav__cta { margin-top: var(--space-xs); }
}


/* 6. Hero
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem) var(--space-2xl);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__bg svg { width: 100%; height: 100%; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 5vw, 4.5rem);
  align-items: center;
}

.hero__title { margin-bottom: var(--space-m); }
.hero__title .accent {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--sage-700);
}

.hero__lead { max-width: 34rem; margin-bottom: var(--space-l); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

.hero__note {
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 32rem;
}

.hero__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--space-l);
  padding: 0;
}
.hero__credentials li {
  margin: 0;
  padding: 0.35rem 0.85rem;
  background: var(--sage-050);
  border: 1px solid var(--sage-100);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--sage-900);
}

.hero__figure { position: relative; }
.hero__figure svg { width: 100%; height: auto; }

@media (max-width: 56rem) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-l); }
  .hero__figure { max-width: 22rem; margin-inline: auto; order: -1; }
}


/* 7. Osiot ja koristeet
   ------------------------------------------------------------------------ */

.section--tint { background: var(--sage-050); }
.section--sand { background: var(--sand-100); }

/* Pehmeä aaltoraja osioiden välissä */
.wave { display: block; width: 100%; height: auto; line-height: 0; }
.wave svg { display: block; width: 100%; height: clamp(2.5rem, 4vw, 4.5rem); }

.divider {
  width: 3.5rem;
  height: 3px;
  border: 0;
  margin: 0 0 var(--space-m);
  background: var(--sand-300);
  border-radius: 2px;
}


/* 8. Komponentit
   ------------------------------------------------------------------------ */

/* Kortit — palvelut */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-m);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--paper-hi);
  border: 1px solid var(--sage-100);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }

.card__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: var(--sage-050);
  border-radius: var(--radius-s);
  color: var(--sage-700);
  margin-bottom: var(--space-2xs);
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }

.card h3 { margin-bottom: 0; font-size: var(--step-0); font-family: var(--font-body); font-weight: 600; }
.card p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }

/* Kaksi palstaa: teksti + sivupalkki */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .split { grid-template-columns: 1fr; gap: var(--space-l); }
}

/* Nostot — "millainen terapeutti olen" */
.traits {
  display: grid;
  gap: var(--space-s);
  list-style: none;
  margin: 0;
  padding: 0;
}
.traits li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin: 0;
  padding: var(--space-s) var(--space-m);
  background: var(--paper-hi);
  border: 1px solid var(--sage-100);
  border-radius: var(--radius-m);
}
.traits svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--sage-700); margin-top: 0.15rem; }
.traits strong { display: block; margin-bottom: 0.1rem; }
.traits span { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; }

/* Aikajana — koulutus ja kokemus */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 0.4375rem; top: 0.6rem; bottom: 0.6rem;
  width: 2px;
  background: var(--sage-100);
}
.timeline li {
  position: relative;
  margin: 0 0 var(--space-m);
  padding-left: 2rem;
}
.timeline li:last-child { margin-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5rem;
  width: 0.9375rem; height: 0.9375rem;
  background: var(--paper);
  border: 3px solid var(--sage-500);
  border-radius: 50%;
}
.timeline__year {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--clay-700);
}
.timeline__what { font-size: 1rem; line-height: 1.5; }

/* Askelmat — mitä istunnoilla tehdään */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-m);
  counter-reset: step;
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  margin: 0;
  padding: var(--space-m);
  background: var(--paper-hi);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-m);
  position: relative;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  margin-bottom: var(--space-xs);
  background: var(--sand-200);
  color: var(--sage-900);
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
}
.steps h3 { font-size: var(--step-0); font-family: var(--font-body); margin-bottom: 0.3rem; }
.steps p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }

/* Reitit vastaanotolle */
.routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-m);
  margin-top: var(--space-l);
}
.route {
  padding: var(--space-m);
  border-radius: var(--radius-m);
  border: 1px solid var(--sage-100);
  background: var(--paper-hi);
}
.route--highlight { background: var(--sage-050); border-color: var(--sage-300); }
.route h3 { font-size: var(--step-1); }
.route ul { margin-bottom: var(--space-s); padding-left: 1.1em; }
.route li { font-size: var(--step--1); color: var(--ink-soft); }
.route li::marker { color: var(--sage-500); }

/* Lainaus */
.pullquote {
  margin: 0;
  padding: var(--space-l) var(--space-m);
  border-left: 3px solid var(--sand-300);
  font-family: var(--font-head);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.45;
  color: var(--sage-900);
  text-wrap: balance;
}


/* 9. Yhteystiedot ja lomake
   ------------------------------------------------------------------------ */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-details { list-style: none; margin: var(--space-m) 0 0; padding: 0; }
.contact-details li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: var(--space-m);
}
.contact-details svg { width: 1.3rem; height: 1.3rem; flex: none; color: var(--sage-700); margin-top: 0.25rem; }
.contact-details dt, .contact-details .label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--sage-900);
}
.contact-details .value { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.contact-details address { font-style: normal; margin: 0; }
.contact-details a { color: var(--sage-700); }

/* Sähköpostiosoite on yksi pitkä katkeamaton merkkijono. Se saa katketa
   mistä tahansa kohdasta, jottei se työnnä sivua laidan yli. */
.contact-details a[href^='mailto:'],
.site-footer a[href^='mailto:'] {
  overflow-wrap: anywhere;
}

.form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--paper-hi);
  border: 1px solid var(--sage-100);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
}

/* Arkaluontoisuusvaroitus */
.notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-m);
  background: var(--sand-100);
  border: 1px solid var(--sand-300);
  border-radius: var(--radius-m);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink);
}
.notice svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--clay-700); margin-top: 0.15rem; }
.notice strong { display: block; }

.field { margin-bottom: var(--space-m); }

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--sage-900);
}
.field .optional { font-weight: 400; color: var(--ink-soft); }

.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--sage-300);
  border-radius: var(--radius-s);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

.field input:hover, .field textarea:hover { border-color: var(--sage-500); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--sage-700);
  box-shadow: 0 0 0 3px rgba(70, 97, 79, 0.18);
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] {
  border-color: var(--clay-700);
}
.field input[aria-invalid='true']:focus, .field textarea[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgba(143, 85, 57, 0.2);
}

.field-error {
  display: none;
  margin-top: 0.35rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--clay-700);
}
.field-error.is-visible { display: block; }

.field-hint {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.char-count { font-variant-numeric: tabular-nums; }
.char-count.is-near { color: var(--clay-700); font-weight: 600; }

.field--check { display: flex; gap: 0.75rem; align-items: flex-start; }
.field--check input[type='checkbox'] {
  width: 1.15rem; height: 1.15rem;
  margin: 0.28rem 0 0;
  flex: none;
  accent-color: var(--sage-700);
  cursor: pointer;
}
.field--check label {
  margin: 0;
  font-weight: 400;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
  cursor: pointer;
}

/* Hunajapurkki botteja varten — ei koskaan näkyvissä eikä fokusoitavissa */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  font-size: var(--step--1);
  line-height: 1.6;
}
.form-status:empty { display: none; padding: 0; margin: 0; }
.form-status--ok {
  background: var(--sage-050);
  border: 1px solid var(--sage-300);
  color: var(--sage-900);
}
.form-status--error {
  background: #FBEFE9;
  border: 1px solid var(--clay-500);
  color: #6E3F28;
}

.btn[aria-busy='true'] { opacity: 0.7; cursor: progress; }


/* 10. Footer
   ------------------------------------------------------------------------ */

.site-footer {
  background: var(--sage-900);
  color: var(--sage-100);
  padding-block: var(--space-xl) var(--space-l);
  font-size: var(--step--1);
  line-height: 1.7;
}
.site-footer a { color: var(--sand-200); }
.site-footer a:hover { color: #fff; }
.site-footer h2, .site-footer h3 { color: var(--paper); font-size: var(--step-0); }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-l);
  margin-bottom: var(--space-l);
}
.site-footer address { font-style: normal; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-m);
  border-top: 1px solid rgba(233, 239, 232, 0.18);
  color: var(--sage-300);
  font-size: 0.8125rem;
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-m); list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin: 0; }


/* 11. Sisäsivut
   ------------------------------------------------------------------------ */

.page-header {
  background: var(--sage-050);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--sage-100);
}

.doc h2 { font-size: var(--step-2); margin-top: var(--space-l); }
.doc h2:first-of-type { margin-top: 0; }
.doc h3 { font-size: var(--step-1); margin-top: var(--space-m); }
.doc ul { margin-bottom: var(--space-m); }
.doc dl { margin: 0 0 var(--space-m); }
.doc dt { font-weight: 600; color: var(--sage-900); margin-top: var(--space-s); }
.doc dd { margin: 0.15rem 0 0; color: var(--ink-soft); }


.centered-card {
  max-width: 34rem;
  margin: var(--space-2xl) auto;
  padding: var(--space-xl) var(--space-m);
  text-align: center;
}
.centered-card__icon {
  width: 4rem; height: 4rem;
  margin: 0 auto var(--space-m);
  color: var(--sage-700);
}


/* 12. Liike ja saavutettavuus
   ------------------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Ilman JS:ää sisältö on aina näkyvissä. */
.no-js .reveal { opacity: 1; transform: none; }

/* Kunnioita järjestelmän liikeasetusta: traumasivustolla tämä ei ole
   kosmeettinen valinta, joten kaikki liike sammutetaan kokonaan. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .card, .traits li, .steps li, .route, .form-card { border: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
}

@media print {
  .site-header, .nav-toggle, .hero__bg, .hero__figure, .form-card, .wave { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
}