/* -------------------------------
   Sticky footer (flexbox-versio)
   -------------------------------------------------------------- */
   html,                /* koko dokkari */
   body {               
     height: 100%;      /* tarvitaan, jotta flex-korkeus toimii */
   }
   
   body {
     display: flex;           /* pystysuora flex-kontti */
     flex-direction: column;  /* header > main > footer */
   }



/*************************
 *  Reset + perusmuuttujat
 *************************/
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
    /* Värit (brändiohjeesta) */
    --color-accent: #EF7B00;
    --color-text:   #222222;
    --color-bg:     #fef6ea;
    --color-dark:   #37475A;
    --color-light:  #F5F7FA;
    --color-xtra:   #FFE3CC;
  
    /* Typografia */
    --font-body: "Inter", system-ui, sans-serif;
    --font-heading: "Poppins", system-ui, sans-serif;
  
    /* Layout */
    --max-width: 65ch;
    --flow-space: 1.5rem;
  }
  
  body {
    font-family: var(--font-body);
    line-height: 1.6;
    background: var(--color-bg);
    color: var(--color-text);
  }
  
  /*************************
   *  Yleiset helper‑luokat
   *************************/
  .wrapper {
    max-width: var(--max-width);
    margin-inline: auto;
    padding: 1rem;
  }
  .flow > * + * {
    margin-block-start: var(--flow-space);
  }
  
  /*************************
   *  Navigaatio
   *************************/

  .site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 1rem;
  }

  /* =========================================================
   Sticky-navigaatio + kevyt alapohjaväri
   ---------------------------------------------------------
   • position: sticky  →  kiinnittyy ruudun yläreunaan
   • top: 0           →  kiinnityskorkeus
   • z-index: 100     →  varmistaa, että nav on kaiken päällä
   • background       →  sama kerma, ettei osu silmään
   • box-shadow       →  1 px pehmeä varjo = “premium” tuntuma
========================================================= */
.site-nav{
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);           /* #FAF7F5 */
    box-shadow: 0 1px 3px rgba(0,0,0,.05); /* ohut alas varjo */
    display: flex;                         /* nämä saattavat jo
                                              olla, mutta ei haittaa
                                              toistoa */
    justify-content: space-between;
    align-items: center;
    padding-block: 0.75rem;                /* hiukan kapeampi */
  }


  .nav-links {
    list-style: none;
    display: flex;
    gap: 1rem;
  }
  .nav-links a {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
  }
  .logo img {
    height: 44px; /* yhtenäinen korkeus */
  }
  
  /*************************
   *  Hero‑osio
   *************************/
  .hero {
    text-align: center;
    padding-block: 3rem;
  }
  .hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--color-dark);
  }
  .hero-img {
    width: 70%;
    border-radius: 0.75rem;
    object-fit: cover;
    height: auto;
   
  }
  
  /*************************
   *  Painike (CTA)
   *************************/
  .button {
    display: inline-block;
    padding: 0.75em 1.5em;
    background: var(--color-accent);
    color: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .button:hover {
    transform: scale(1.04);
    opacity: 0.9;
  }

/* Logo-koko — hallitaan keskitetysti täällä
   --------------------------------------------------------------
   - max-height = korkein sallittu korkeus (pikseleinä)
   - auto-leveys pitää kuvasuhteen kunnossa
   - @media breakpoints: eri koko mobiilille & desktopille        */
   .logo img {
    max-height: 56px;      /* peruskoko: ~näkyy selvästi navissa */
    height: auto;
  }
  
  /* Isommilla näytöillä hiukan reilumpi logo */
  @media (min-width: 768px) {
    .logo img {
      max-height: 72px;
    }
  }
  





  
  /*************************
   *  Taulukot (hinnasto)
   *************************/
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 0.5em;
    text-align: left;
  }
  th {
    background: var(--color-xtra);
  }

  /* ============================================================
   RESPONSIVE NAVIGATION
   ------------------------------------------------------------
   • piilota linkit, näytä toggle alle 768 px
   • avaa liukuva valikko kun <nav> saa .open-luokan
=========================================================== */

/* 2.1  Perusikonin (kolme viivaa) muotoilu */
.nav-toggle{
  display:none;                   /* näkyviin vasta mobiilissa   */
  flex-direction:column;
  justify-content:center;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  width:24px; height:3px;
  background:var(--color-text);
  border-radius:2px;
}

/* ==========================================================
   MOBIILI-PUDOTUSVALIKKO (<= 767 px leveys)
   ----------------------------------------------------------
   1) nav-links on position:absolute navin alapuolella
   2) oletuksena display:none;
   3) kun nav saa .open-luokan → display:flex;
========================================================= */
@media (max-width: 767px){

    /* 2.1  Näytä hamburger, piilota linkit alkuun */
    .nav-toggle{display:flex;}   /* jos se oli jo määritelty, ok */
    .nav-links{
      display:none;              /* piilossa default */
      position:absolute;
      top:100%;                  /* heti navin alapuolelle */
      left:0;
      width:100%;
      background:var(--color-bg);      /* kerma tausta */
      flex-direction:column;
      align-items:center;
      gap:1rem;
      padding:1rem 0 1.5rem;
      box-shadow:0 4px 12px rgba(0,0,0,.06); /* varjo alas */
    }
  
    /* 2.2  Kun navissa on .open → lista esiin */
    #mainNav.open .nav-links{
      display:flex;
    }
  
    /* 2.3  Linkkien ulkoasu */
    .nav-links a{
      font-size:1.125rem;
      text-decoration:none;
      color:var(--color-text);
    }
    .nav-links a:hover{
      text-decoration:underline;
    }
  }
  
/* ===========================================================
   STICKY FOOTER  (flexbox + 100vh)
   -----------------------------------------------------------
   • body venyy vähintään koko näkymän korkeudelle   (100vh)
   • flex-kolumni työntää footerin alas, ellei sisältö sitä tee
=========================================================== */
html, body{
    height: 100%;            /* fallback vanhoille selaimille */
  }
  body{
    min-height: 100vh;       /* nykyselaimet – varmin keino   */
    display: flex;
    flex-direction: column;  /* ylhäältä alas: nav → main → footer */
  }
  
  #main{                     /* venytetään vain sisällön lohkoa */
    flex: 1 0 auto;          /*  grow | shrink | basis */
    /* Kasvaa täyttämään kaiken ylimääräisen tilan,
       muttei kutistu alle luonnollisen korkeutensa */
  }
  
  /*  —  footerille ei tarvita erillistä sääntöä:
        se saa luonnollisen korkeutensa ja laskeutuu alas  */

        .cta-wide{
            display:block;                /* block → margin:auto toimii  */
            width:max-content;            /* pysyy napin omassa leveydessä */
            margin:2rem auto 0;           /* y-väli 2 rem, keskitys sivusuunnassa */
            padding:0.75em 1.5em;
            font-size:1.125rem;
            text-align:center;            /* teksti keskelle         */
          }



          /* Kontaktilista – ikonit ja tasaiset välit */
/* nappirivi keskelle */
.contact-buttons{
    display:flex;
    flex-direction:column;      /* mobiili */
    gap:1rem;
    margin:1.5rem 0 2rem;
    align-items:center;
  }
  @media(min-width:600px){
    .contact-buttons{flex-direction:row}
  }
  
  /* voit tehdä värit luokkakohtaisesti */
  .email   { background:#37475A; }   /* tummansininen */
  .whatsapp{ background:#25D366; }   /* WA-vihreä    */ 
  .facebook{ background:#1877F2; }   /* FB-sininen    }*/
  
  ul, ol {
    margin-left: 1.5rem;
    padding-left: 1rem;
  }