/* ==========================================================================
   Ruokapartneri - tyylit

   Sisältö:
     1. Muuttujat (värit, fontit, mitat)  <- muokkaa ilmettä täältä
     2. Perusasetukset
     3. Sivun rakenne
     4. Logo ja nimi
     5. Pääviesti
     6. Erotin
     7. Tekstilohkot
     8. Yhteystiedot
     9. Ruokakuva
    10. Yhteydenottolomake ja kiitossivu
    11. Footer
    12. Työpöytänäkymä (1024px ja leveämmät)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Muuttujat
   -------------------------------------------------------------------------- */
:root {
  /* Värit */
  --cream-rgb:          247 235 218;
  --color-bg:           rgb(var(--cream-rgb));
  --color-bg-fade:      rgb(var(--cream-rgb) / 0);   /* sama sävy läpinäkyvänä */
  --color-bg-highlight: #fdf7ec;

  --color-green-deep:   #14301e;
  --color-green:        #1f4129;
  --color-green-mid:    #2a5434;
  --color-olive:        #7e8c4e;
  --color-olive-line:   #b9be8e;

  --color-text:         #2c3a2b;
  --color-text-soft:    #4b5a48;
  --color-on-dark:      #f4eadb;

  /* Fontit - vain järjestelmäfontteja, ei ulkoisia latauksia */
  --font-body:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-script: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;

  /* Tekstikoot - skaalautuvat näytön leveyden mukaan */
  --size-body:   clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem);
  --size-lead:   clamp(1.125rem,  1.05rem + 0.45vw, 1.375rem);
  --size-h1:     clamp(2.25rem,   1.75rem + 2.20vw, 3.9rem);
  --size-h2:     clamp(1.5rem,    1.15rem + 1.50vw, 2.5rem);
  --size-h2-sm:  clamp(1.125rem,  1.04rem + 0.35vw, 1.375rem);
  --size-name:   clamp(1.75rem,   1.35rem + 1.60vw, 2.75rem);
  --size-footer: clamp(0.9375rem, 0.90rem + 0.20vw, 1.0625rem);

  /* Mitat ja välit */
  --measure:     34rem;                          /* tekstipalstan maksimileveys */
  --gutter:      clamp(1.25rem, 3.4vw, 3.5rem);  /* sivun reunus */
  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    1.75rem;
  --space-lg:    2.75rem;
  --space-xl:    clamp(3rem, 6vw, 5.5rem);
  --footer-max:  120rem;

  /* Ruokakuvan alkuperäinen pikselileveys. Kuvaa ei koskaan suurenneta tämän
     yli, jotta se pysyy terävänä. Jos vaihdat kuvan, päivitä tämä luku. */
  --scene-width: 1031px;
}


/* --------------------------------------------------------------------------
   2. Perusasetukset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: radial-gradient(125% 85% at 8% 0%,
                    var(--color-bg-highlight) 0%, var(--color-bg-fade) 58%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ul { margin: 0; }
ul            { padding: 0; list-style: none; }
img, svg      { display: block; max-width: 100%; }
address       { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--color-green);
  outline-offset: 3px;
  border-radius: 3px;
}


/* --------------------------------------------------------------------------
   3. Sivun rakenne

   Koko sivu on yksi yhtenäinen vaalea kanvaasi. Ruokakuva sulautuu siihen
   pehmeällä maskilla - kuvalle ei ole omaa taustaa eikä omaa palstaa, joten
   tekstin ja kuvan väliin ei synny näkyvää saumaa.

   Mobiili:   hero -> esittely -> yhteystiedot -> ruokakuva (allekkain)
   Työpöytä:  ylärivi  = hero vasemmalla, ruokakuva oikealla
              alarivi  = esittely vasemmalla, yhteystiedot oikealla
   -------------------------------------------------------------------------- */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Yhteinen tekstipalstan rajaus kapeilla näytöillä. */
.hero,
.content__story,
.content__aside {
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero    { padding-block: var(--space-xl) 0; }
.content { padding-block: var(--space-lg) var(--space-xl); }

.content__aside { margin-top: var(--space-lg); }


/* --------------------------------------------------------------------------
   4. Logo ja nimi
   -------------------------------------------------------------------------- */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  color: var(--color-green);
}

.brand__mark {
  width: clamp(3.25rem, 2.5rem + 3vw, 5rem);
  height: auto;
}

.brand__name {
  font-size: var(--size-name);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}


/* --------------------------------------------------------------------------
   5. Pääviesti
   -------------------------------------------------------------------------- */
.hero__title {
  max-width: 15ch;                /* taittuu kahdelle riville kuten referenssissä */
  margin-bottom: var(--space-sm);
  font-size: var(--size-h1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--color-green);
  text-wrap: balance;
}

.hero__lead {
  max-width: 30ch;
  font-size: var(--size-lead);
  line-height: 1.5;
  color: var(--color-text-soft);
}


/* --------------------------------------------------------------------------
   6. Erotin
   -------------------------------------------------------------------------- */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 18rem;
  margin-top: var(--space-lg);
  color: var(--color-olive);
}

.divider__rule  { flex: 1; height: 1px; background-color: var(--color-olive-line); }
.divider__heart { flex: none; width: 1.125rem; height: auto; }


/* --------------------------------------------------------------------------
   7. Tekstilohkot
   -------------------------------------------------------------------------- */
.block + .block { margin-top: var(--space-lg); }
.block p + p    { margin-top: var(--space-sm); }

.block__title {
  margin-bottom: var(--space-sm);
  font-size: var(--size-h2);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-green);
  text-wrap: balance;
}

.block__title--sm {
  max-width: 26ch;
  font-size: var(--size-h2-sm);
  line-height: 1.3;
  letter-spacing: -0.01em;
}


/* --------------------------------------------------------------------------
   8. Yhteystiedot
   -------------------------------------------------------------------------- */
.contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.contact__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.contact__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 1.5px solid var(--color-olive-line);
  border-radius: 50%;
  color: var(--color-olive);
}

.contact__icon svg { width: 1.125rem; height: 1.125rem; }

.contact__link {
  color: var(--color-green-mid);
  text-decoration: underline;
  text-decoration-color: var(--color-olive-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;        /* pitkä osoite ei riko kapeaa näyttöä */
}

.contact__link:hover {
  color: var(--color-green-deep);
  text-decoration-color: currentColor;
}


/* --------------------------------------------------------------------------
   9. Ruokakuva

   Kuva näytetään aina omassa mittakaavassaan (height: auto) eikä koskaan
   suurempana kuin alkuperäinen tiedosto, joten se pysyy terävänä. Reunat
   häivytetään maskilla suoraan läpinäkyväksi - taustaväriä ei maalata kuvan
   päälle, joten sivun tausta jatkuu saumattomasti kuvan alta.

   Kuvan vaihto: korvaa assets/images/hero-scene.jpg samannimisellä
   tiedostolla, päivitä index.html:n alt-teksti ja width/height sekä
   --scene-width tämän tiedoston :root-osiossa.
   -------------------------------------------------------------------------- */
.scene {
  /* Mobiilissa yläreuna sulaa taustaan, alareuna jää kiinni puupintaan. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 20%);
}

.scene__img {
  width: 100%;
  height: auto;                   /* ei venytystä, ei object-fit-rajausta */
  max-width: var(--scene-width);  /* ei suurenneta yli alkuperäisen */
  margin-inline: auto 0;          /* kiinni oikeaan reunaan leveillä näytöillä */
}


/* --------------------------------------------------------------------------
   10. Yhteydenottolomake ja kiitossivu

   Lomake on oma, koko sivun levyinen osionsa kaksipalstaisen sisältöosion
   jälkeen. Se käyttää sivun omaa väri- ja tekstimaailmaa: vaalea kenttäpohja,
   oliivinvihreä reunaviiva ja tummanvihreä painike.

   Näppäimistökohdistuksen näyttää sivun yhteinen :focus-visible-reunus
   (osio 2); tässä vaihdetaan sen lisäksi kentän oma reunaviiva tummemmaksi.
   -------------------------------------------------------------------------- */

/* Lomakeosio keskitetään sivulle ja rajataan mukavaan lukuleveyteen (48rem
   = 768px). Yläväli tulee .content-osion alareunuksesta (osio 3). */
.form-section {
  padding-block: 0 var(--space-xl);
}

.form-section__inner {
  max-width: calc(48rem + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Kenttäruudukko. Kapealla näytöllä yksi palsta, jolloin kentät täyttävät
   koko käytettävissä olevan leveyden. Leveämmällä Nimi ja Sähköposti ovat
   vierekkäin; Viesti vie aina koko lomakkeen leveyden. */
.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm) var(--space-md);
}

@media (min-width: 40rem) {
  .form__grid        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__field--wide { grid-column: 1 / -1; }
}

/* Hunajapurkki: kenttä on lomakkeessa mukana mutta pois näkyvistä eikä sitä
   tavoita sarkaimella - vain botit täyttävät sen. Ks. contact.php. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-green-mid);
}

.form__req { color: var(--color-olive); }

.form__input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;                  /* >= 17px, jottei iOS zoomaa kenttään */
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg-highlight);
  border: 1.5px solid var(--color-olive);
  border-radius: 0.5rem;
}

.form__input:hover { border-color: var(--color-green-mid); }
.form__input:focus { border-color: var(--color-green); }

.form__textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.form__submit {
  align-self: stretch;            /* mobiilissa koko palstan levyinen */
  margin-top: var(--space-xs);
  padding: 0.8rem 1.5rem;
  font: inherit;
  font-weight: 700;
  color: var(--color-on-dark);
  background-color: var(--color-green);
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

.form__submit:hover { background-color: var(--color-green-deep); }

/* Puhelinta leveämmillä näytöillä painike kutistuu tekstinsä levyiseksi. */
@media (min-width: 30rem) {
  .form__submit {
    align-self: flex-start;
    padding-inline: 2.25rem;
  }
}

/* Kiitos- ja virhesivu, jonka contact.php näyttää lomakkeen lähetyksen
   jälkeen. Käyttää samaa taustaa, typografiaa ja footeria kuin etusivu.
   Runko venyy vähintään ikkunan korkuiseksi, jotta footer pysyy alalaidassa
   myös lyhyellä sisällöllä. */
.page-status {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.status {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--space-xl);
}

.status__inner {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.status .brand           { margin-bottom: 0; }
.status .brand__name     { font-size: var(--size-h2-sm); }

.status__title {
  margin-block: var(--space-md) var(--space-sm);
  font-size: var(--size-h2);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-green);
  text-wrap: balance;
}

.status__list {
  margin-top: var(--space-sm);
  padding-left: 1.25rem;
  list-style: disc;
  color: var(--color-text-soft);
}

.status__list li + li { margin-top: var(--space-xs); }

.status__hint {
  margin-top: var(--space-md);
  font-size: 0.9375rem;
  color: var(--color-text-soft);
}

.status__back {
  display: inline-block;
  margin-top: var(--space-lg);
  font-weight: 600;
  color: var(--color-green-mid);
  text-decoration: underline;
  text-decoration-color: var(--color-olive-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.status__back:hover {
  color: var(--color-green-deep);
  text-decoration-color: currentColor;
}


/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-green);
  color: var(--color-on-dark);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  max-width: var(--footer-max);
  margin-inline: auto;
  padding: var(--space-md) var(--gutter);
  font-size: var(--size-footer);
}

.site-footer__thanks {
  font-family: var(--font-script);
  font-size: calc(var(--size-footer) * 1.35);
  line-height: 1.3;
}

.site-footer :focus-visible { outline-color: var(--color-on-dark); }


/* --------------------------------------------------------------------------
   12. Työpöytänäkymä (1024px ja leveämmät)
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {

  .page {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .hero    { grid-area: 1 / 1 / 2 / 2; margin-inline: auto 0; }
  .scene   { grid-area: 1 / 2 / 2 / 3; }
  .content { grid-area: 2 / 1 / 3 / 3; }

  /* Lomake omalle riville koko sivun leveydeltä, sisältöosion alle. */
  .form-section { grid-area: 3 / 1 / 4 / 3; }

  /* Alarivi jakautuu samoihin palstoihin kuin ylärivi. */
  .content {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .content__story { grid-column: 1; margin-inline: auto 0; }
  .content__aside { grid-column: 2; margin-inline: 0 auto; margin-top: 0; }

  /* Kuva alkaa sivun yläreunasta ja sulaa alareunastaan taustaan,
     vasen reuna häivytetään tekstin puolelle. */
  .scene {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
  }

  .scene__img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%);
            mask-image: linear-gradient(to right, transparent 0%, #000 30%);
  }
}