/* ============================================================================
   MK GOODS: layout V3 (Hannan PDF 20.10.2026)
   Värit Hannan paletista, serif kauttaaltaan (Newsreader), painikkeet täysin pyöreät.
   Etusivu: hero, esittely + The origins, neljä kuva/teksti-laattaa shakkiruutuna,
   kuvakaista, footer. Edellinen versio (demo4-pohja): _vanhat-alasivut-v1/.
   TEEMA VAIHDETAAN VAIN TÄSTÄ :root-lohkosta.
   ============================================================================ */

:root {
  /* ---- VÄRIT (Hannan PDF) ---- */
  --c-navy:      #001A38;
  --c-olive:     #7D8A5A;
  --c-olive-tile:#6E7A4D;   /* oliivilaatta valkoisella tekstillä: #7D8A5A antaa 3,7:1, tämä 4,6:1 */
  --c-olive-text:#5F6B40;   /* oliivi tekstinä valkoisella: 5,7:1 */
  --c-sand:      #C4B09C;
  --c-brown:     #957350;
  --c-brown-btn: #86663F;   /* ruskea painike valkoisella tekstillä: 5,3:1 */
  --c-green:     #A8BE86;
  --c-offwhite:  #F4F4F2;
  --c-green-light: #F5F6F4; /* yhteysosiot alasivuilla (Hanna 27.10.) */

  --c-bg:        #FFFFFF;
  --c-text:      #1C2A3D;
  --c-heading:   var(--c-navy);
  --c-muted:     #4E5B6B;
  --c-border:    #E1E1DC;

  --font: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;

  /* Yhteydenottopainike (kp/) lukee nämä nimet */
  --c-primary:    var(--c-navy);
  --c-primary-2:  var(--c-olive-tile);   /* painikkeen pallon liukuväri navy → oliivi */
  --c-on-primary: #FFFFFF;
  --c-dark:       var(--c-navy);
  --c-on-dark:    #FFFFFF;
  --c-surface:    #FFFFFF;
  --font-body:    var(--font);

  --container: 1160px;
  --pad-x: clamp(16px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 120px);
}

/* ===========================  BASE  ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0; overflow-x: clip;
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--font); font-size: 1.125rem; line-height: 1.7;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--font); color: var(--c-heading); line-height: 1.12; margin: 0 0 .45em; font-weight: 700; letter-spacing: -.005em; }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
p { margin: 0 0 1.1em; }
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 999; background: var(--c-navy); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip-link:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--c-olive); outline-offset: 3px; }

/* ===========================  PAINIKKEET (täysin pyöreät)  ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 28px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font); font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn-navy  { background: var(--c-navy); color: #fff; }
.btn-brown { background: var(--c-brown-btn); color: #fff; }
.btn-light { background: #fff; color: var(--c-navy); }
.btn-light.on-olive { color: var(--c-olive-text); }
.hero .btn-navy { border-color: rgba(255,255,255,.85); box-shadow: 0 10px 28px rgba(0,10,25,.35); }  /* navy erottuu tummasta herokuvasta */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn-navy:hover  { background: #0B2C55; }
  .btn-brown:hover { background: #745632; }
  .btn-light:hover { background: var(--c-offwhite); }
}

/* ===========================  HERO  ============================ */
.hero { position: relative; min-height: clamp(520px, 50vw, 680px); display: flex; align-items: center; color: #fff; overflow: hidden; background: #3E4A2A; }
.hero picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 50% 40%; }
/* Teksti keskellä kuten alasivujen heroissa (Hanna 23.10.), siksi tasainen tummennus eikä vasemmalta tummeneva */
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,20,40,.46); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-block: 72px; text-align: center; }
.hero h1 { color: #fff; font-style: italic; font-weight: 600; font-size: clamp(2.5rem, 6vw, 4.4rem); max-width: 11em; margin: 0 auto .35em; text-shadow: 0 2px 18px rgba(0,10,25,.45); }
.hero-sub { font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.55; max-width: 31em; margin: 0 auto 34px; color: #fff; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ===========================  ESITTELY + THE ORIGINS  ============================ */
.intro { padding-block: var(--section-y); }
.intro-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.intro h2 { text-transform: uppercase; letter-spacing: .01em; margin-bottom: .2em; }
.intro-tag { font-style: italic; font-size: 1.2rem; color: var(--c-heading); margin-bottom: 1.4em; }
.origins h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 18px; }
.origins ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); }
.origins li { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--c-border); }
.origins b { color: var(--c-olive-text); font-weight: 700; }
.origins span { color: var(--c-muted); }

/* ===========================  LAATAT (kuva + teksti shakkiruutuna)  ============================ */
.tile { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(420px, 38vw, 540px); }
.tile-media { position: relative; overflow: hidden; background: var(--c-offwhite); }
.tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-text { display: flex; align-items: center; justify-content: center; padding:   /* palsta keskellä värialuetta, ei kiinni sivun reunassa (Hanna 23.10.) */ clamp(48px, 6vw, 88px) clamp(24px, 6vw, 88px); }
.tile-text > div { width: 100%; max-width: 30rem; }
.tile-text h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.tile-text p { margin-bottom: 1.6em; }
.tile--flip .tile-media { order: 2; }
.tile--sand  .tile-text { background: var(--c-sand); color: var(--c-navy); }
.tile--navy  .tile-text { background: var(--c-navy); color: #fff; }
.tile--olive .tile-text { background: var(--c-olive-tile); color: #fff; }
.tile--light .tile-text { background: var(--c-offwhite); color: var(--c-text); }
.tile--brown .tile-text { background: var(--c-brown-btn); color: #fff; }
.tile--green .tile-text { background: var(--c-green-light); color: var(--c-navy); }
.tile--navy h2, .tile--olive h2, .tile--brown h2 { color: #fff; }
.tile--tall { min-height: clamp(460px, 42vw, 600px); }
.tile-text .place { display: block; font-style: italic; font-size: 1.15rem; margin: -.3em 0 1em; }

/* ===========================  KUVAKAISTA  ============================ */
.band { position: relative; min-height: clamp(340px, 34vw, 480px); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: #2A2F33; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.band::after { content: ""; position: absolute; inset: 0; background: rgba(0,20,40,.48); }
.band .wrap { position: relative; z-index: 1; }
.band p { margin: 0; color: #fff; }
.band-quote { font-style: italic; font-weight: 600; font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.2; }
.band-sub { margin-top: 14px !important; font-size: 1.1rem; letter-spacing: .02em; }

/* ===========================  ESIKATSELUILMOITUS (alasivut tehdään seuraavaksi)  ============================ */
.preview-toast { position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translate(-50%, 20px); opacity: 0; visibility: hidden;
  width: min(440px, calc(100% - 32px)); padding: 16px 20px; border-radius: 16px; background: var(--c-navy); color: #fff; font-size: 1rem; line-height: 1.5;
  box-shadow: 0 18px 40px rgba(0,26,56,.25); transition: opacity .25s, transform .3s, visibility .25s; }
.preview-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ===========================  ALASIVUT  ============================ */
.page-hero { position: relative; height: clamp(240px, 30vw, 440px); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; background: #2A2F33; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero--text::after { content: ""; position: absolute; inset: 0; background: rgba(0,20,40,.40); }
.page-hero .wrap { position: relative; z-index: 1; width: 100%; }
.page-hero p { margin: 0; color: #fff; font-style: italic; font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.2; text-shadow: 0 2px 18px rgba(0,10,25,.55); }
.page-hero .hero-sub2 { font-weight: 400; font-size: 1.15rem; margin-top: 12px; }
.page-hero .btn { margin-top: 24px; }

.page-head { padding-block: clamp(56px, 7vw, 100px); }
.subhero + .section:not([class*="section--"]) { padding-top: 0; }   /* kaksi valkoista peräkkäin: ei tuplaväliä (katalogiosio piilossa) */
.page-head h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 30px; }
.linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); }
.linklist li { display: block; padding: 0; border: 0; }
.linklist a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--c-border); color: var(--c-olive-text); font-weight: 600; transition: color .18s; }
.linklist a::after { content: "\2193"; color: var(--c-muted); font-weight: 400; }
@media (hover: hover) { .linklist a:hover { color: var(--c-navy); } }

.section { padding-block: var(--section-y); }
.section--navy { background: var(--c-navy); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--light { background: var(--c-offwhite); }
.section--sand { background: var(--c-sand); color: var(--c-navy); }
.narrow { max-width: 46rem; }   /* palsta alkaa logon linjasta (.wrap ympärillä), kapenee vain oikealta */
.lead-italic { font-style: italic; font-size: 1.2rem; }

.catalogue-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.catalogue-card { aspect-ratio: 4 / 3; background: #fff; color: var(--c-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; border-radius: 6px; }
.catalogue-card img { width: 84px; height: 84px; }
.catalogue-card span { font-style: italic; color: var(--c-muted); }

.where-more { margin-top: 36px; }

.quote blockquote { margin: 0; font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.25; color: var(--c-navy); }
.quote figcaption { margin-top: 18px; font-style: italic; text-align: right; }

/* Lainaus kuvan päällä (Hanna 23.10.) */
.quote-band { position: relative; overflow: hidden; padding-block: clamp(96px, 12vw, 170px); background: #3B2A12; }
.quote-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.quote-band::after { content: ""; position: absolute; inset: 0; background: rgba(0,20,40,.52); }
.quote-band .wrap { position: relative; z-index: 1; }
.quote-band .narrow { margin-inline: auto; }
.quote-band blockquote, .quote-band figcaption { color: #fff; text-shadow: 0 2px 18px rgba(0,10,25,.45); }

/* Tuottaja: täysleveä kuva ja sen alla tekstipalsta keskellä värialuetta (Hannan suunnitelma, 23.10.) */
.producer-media { height: clamp(240px, 32vw, 480px); overflow: hidden; background: var(--c-offwhite); }
.producer-media img { width: 100%; height: 100%; object-fit: cover; }
.producer-text { padding-block: clamp(48px, 6vw, 84px); }
.producer-text .narrow { margin-inline: auto; }
.producer-text .place { display: block; font-style: italic; font-size: 1.15rem; margin: -.3em 0 1em; }
.producer--brown .producer-text { background: var(--c-brown-btn); color: #fff; }
.producer--olive .producer-text { background: var(--c-olive-tile); color: #fff; }
.producer--sand  .producer-text { background: var(--c-sand); color: var(--c-navy); }
.producer--green .producer-text { background: var(--c-green); color: var(--c-navy); }
.producer--light .producer-text { background: var(--c-offwhite); color: var(--c-text); }
.producer--brown h2, .producer--olive h2 { color: #fff; }

/* Yhteyskaista vaalein vihreä #F5F6F4, teksti ja painike navy (Hanna 23.10. ja 27.10.) */
.cta-band { background: var(--c-green-light); color: var(--c-navy); padding-block: clamp(56px, 7vw, 96px); }
.cta-band h2 { color: var(--c-navy); }
.cta-band p { font-style: italic; margin-bottom: 28px; }
.cta-band--light { background: var(--c-offwhite); color: var(--c-text); }
.cta-band--light h2 { color: var(--c-navy); }

.prose p { margin-bottom: 1.2em; }
.tagline { font-style: italic; color: var(--c-muted); font-size: 1rem; }
.cta-band .tagline { color: var(--c-navy); margin-bottom: 28px; }

.values { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 34px; }
.values li { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; }
.values svg { width: 48px; height: 48px; color: var(--c-green); }
.values h3 { font-size: 1.3rem; margin-bottom: .3em; }
.values p { margin: 0; color: rgba(255,255,255,.88); }

.lomake-alue { margin-top: 26px; }
.lomake-alue .kp-root { --kp-primary: var(--c-navy); --kp-primary-2: var(--c-navy); }
.process-placeholder { border: 2px dashed #C9CCC4; border-radius: 12px; padding: 40px 24px; text-align: center; color: var(--c-muted); font-style: italic; margin: 22px 0 30px; }
.process-placeholder--dark { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.88); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-info .row { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; }
.contact-info .row p { margin: 0; }
.contact-info svg { flex-shrink: 0; margin-top: 4px; color: var(--c-olive-text); }
.contact-info a { color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px; }
.form { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: clamp(22px, 4vw, 36px); }
.field { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }   /* lyhyet kentät 50/50 (_ohjeet §12) */
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 700; color: var(--c-navy); margin-bottom: 6px; font-size: 1rem; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #C9CCC4; border-radius: 8px; font: inherit; color: var(--c-text); background: #fff; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--c-olive); outline-offset: 1px; border-color: var(--c-olive); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note { font-size: .9rem; color: var(--c-muted); margin: 14px 0 0; }
.form-msg { margin: 12px 0 0; font-size: 1rem; }
.form-msg.ok { color: var(--c-olive-text); }
.form-msg.err { color: #A3341F; }

@media (max-width: 860px) {
  .catalogue-grid, .contact-grid { grid-template-columns: 1fr; }
  .catalogue-card { max-width: 420px; }
}
@media (max-width: 640px) {
  .page-hero { height: 220px; }
  .producer-media { height: auto; aspect-ratio: 2.2 / 1; }
  .values li { grid-template-columns: 44px 1fr; gap: 14px; }
  .values svg { width: 38px; height: 38px; }
  .btn-row .btn { flex: 1 1 100%; }
}

/* ===========================  RESPONSIIVISUUS  ============================ */
@media (max-width: 860px) {
  .intro-grid { grid-template-columns: 1fr; }
  .tile { grid-template-columns: 1fr; min-height: 0; }
  .tile-media { aspect-ratio: 4 / 3; }
  .tile--flip .tile-media { order: 0; }
  .tile-text > div { max-width: 36rem; }
}
@media (max-width: 640px) {
  body { font-size: 1.06rem; }
  .hero { min-height: 520px; align-items: flex-end; }
  .hero::after { background: linear-gradient(0deg, rgba(0,20,40,.78) 0%, rgba(0,20,40,.45) 55%, rgba(0,20,40,.15) 100%); }
  .hero .wrap { padding-block: 48px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .origins li { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile-text { padding: 44px 16px 52px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .preview-toast { transition: none; }
}

/* Suomenkielisen sivun K-ruoka-linkki navy-pohjalla (where-more) */
.where-more a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

/* Jälleenmyyjähaku (hallinnan moduuli jalleenmyyjat, 26.10.2026): navy-osiossa */
.jm { margin: 26px 0 34px; }
.jm-haku label { display: block; font-weight: 700; margin-bottom: 8px; }
.jm-rivi { display: flex; gap: 10px; max-width: 26rem; }
.jm-rivi input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: #fff; color: var(--c-navy); font: inherit; letter-spacing: .08em; }
.jm-rivi input:focus { outline: 2px solid var(--c-green); outline-offset: 2px; }
.jm-viesti { margin: 18px 0 10px; min-height: 1.2em; }
.jm-viesti:empty { margin: 0; }
.jm-tulokset { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jm-tulokset li { display: grid; gap: 2px; padding: 16px 20px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.jm-nimi { font-size: 1.1rem; }
.jm-matka { font-style: italic; color: var(--c-green); }
.jm-linkki { justify-self: start; text-decoration: underline; text-underline-offset: 3px; }
.jm-kaikki { margin: 12px 0 0; padding-left: 1.2em; }
@media (max-width: 640px) { .jm-rivi { max-width: none; } }

/* Evästepalkki (evasteet.js): pohja on navy kuten painikkeet, joten Hyväksy valkoisena kuten .btn-light, yläreuna oliivi.
   body-etuliite voittaa evasteet.js:n myöhemmin lisäämän tyylin. (mk20, 9.11.2026) */
body .ks-evaste { border-top-color: var(--c-olive); }
body .ks-evaste-nappi:not(.ks-evaste-nappi--toinen) { background: #fff; color: var(--c-navy); border-color: #fff; }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 18px; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 34px 0 8px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }