/* =========================
   BASE
   ========================= */

html { scroll-behavior: smooth; }

body{
  margin:0;
  font-family:'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color:#104033;
  line-height:1.6;
  font-weight:400;

  background:#fff url('/img/taustakuva.png') no-repeat center top;
  background-size:100% auto; /* desktop: ei “venytä” korkeutta */
}

/* mobiili: cover näyttää yleensä paremmalta eikä “katkea” */
@media (max-width: 1200px){
  body{ background-size: cover; }
}

h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display', serif;
  font-weight:400;
  color:#104033;
}

/* =========================
   NAVBAR (ei fixed)
   ========================= */

.navbar{
  padding:1.25rem 0;
  background:transparent;
}

/* linkit – pidetään sama fiilis kuin aiemmin */
.navbar .navbar-brand{
  font-family:'Playfair Display', serif;
  color:#104033;
  text-decoration:none;
}

.navbar .nav-link{
  color:#104033;
  font-weight:400;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active{
  color:#688767;
}

/* kontaktinappi navissa (käyttää edelleen btn-outline-light rungon) */
.btn-nav-contact{
  border-radius:50px;
  padding:.5rem 1.25rem;
  border-color:rgba(255,255,255,.85);
  color:#104033;
  background:transparent;
}

.btn-nav-contact:hover{
  background:rgba(255,255,255,.2);
  border-color:#104033;
  color:#104033;
}

/* mobiilin avattu valikko tarvitsee taustan luettavuuteen */
@media (max-width: 991px){
  .navbar-collapse{
    background:rgba(255,255,255,.95);
    padding:1rem;
    border-radius:.75rem;
    margin-top:1rem;
  }

  .navbar-collapse .nav-link{ color:#104033; }
  .navbar-collapse .btn-nav-contact{
    border-color:#688767;
    color:#688767;
  }
}

/* hamburger-ikonin väri (valkoinen viiva taustaa vasten) */
.navbar-toggler:focus{ box-shadow:none; }

.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =========================
   HERO (transparent)
   ========================= */

.hero-section{
  background:transparent;
  padding:6rem 0 4.5rem;
  min-height:520px;
  display:flex;
}

.hero-section h1,
.hero-section p{
  text-shadow:0 2px 4px rgba(0,0,0,.18);
}

/* hero-CTA valkoinen kuten aiemmin */
.hero-section .btn.btn-primary{
  background:#fff;
  border:none;
  color:#104033;
  border-radius:50px;
  padding:.75rem 2rem;
  box-shadow:0 4px 15px rgba(0,0,0,.18);
}

.hero-section .btn.btn-primary:hover{
  background:#f6d4d3;
  color:#104033;
}

/* =========================
   SECTION BACKGROUNDS (minimal)
   ========================= */

.section-white{ background:#fff; }
.section-color{ background:#d8e4c9; }
.bg-soft{ background:#d8e4c9; } /* kevyt bränditausta jos tarvitsette */

/* =========================
   CARDS / SERVICES
   ========================= */

.service-card{
  background:rgba(255,255,255,.95);
  border-radius:.75rem;
  padding:2rem 1.5rem;
  height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}

.service-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.service-card h3{
  font-family:'Playfair Display', serif;
  font-size:1.25rem;
  margin-bottom:.75rem;
  color:#104033;
}

/* =========================
   CONTACT INFO (shared)
   ========================= */

.contact-info-section{
  padding:4rem 0;
  background:linear-gradient(135deg, #d8e4c9 0%, rgba(255,255,255,.6) 100%);
}

.contact-info-item{
  display:flex;
  gap:1rem;
  margin-bottom:1.5rem;
  align-items:flex-start;
}

.contact-info-item i{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(104,135,103,.15);
  color:#688767;
  flex-shrink:0;
}

.contact-info-item a{
  color:#688767;
  text-decoration:none;
}

.contact-info-item a:hover{
  color:#818a5e;
  text-decoration:underline;
}

.map-container{
  height:400px;
  border-radius:.75rem;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(104,135,103,.18);
}

/* =========================
   PAGE HEADER (koulutus / ota-yhteyttä)
   transparent over body bg
   ========================= */

.page-header{
  background:transparent;
  color:#fff;
  text-align:center;
  padding:5.5rem 0 3rem;
}

.page-header h1,
.page-header .lead{
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.22);
}

/* =========================
   FORMS (minimal, keep your look)
   ========================= */

.contact-form-wrapper{
  background:#d8e4c9;
  padding:2rem;
  border-radius:.75rem;
  box-shadow:0 2px 15px rgba(104,135,103,.10);
}

.form-control{
  border:2px solid rgba(104,135,103,.30);
  border-radius:.5rem;
}

.form-control:focus{
  border-color:#688767;
  box-shadow:0 0 0 .2rem rgba(104,135,103,.15);
}

/* =========================
   FOOTER
   ========================= */

.footer{
  background:#d8e4c9;
  color:#104033;
}

.footer-link{
  color:#104033;
  text-decoration:none;
}

.footer-link:hover{
  color:#fff;
  text-decoration:underline;
}

/* =========================
   SMALL RESPONSIVE TWEAKS
   ========================= */

@media (max-width: 991px){
  .hero-section{ padding:5.5rem 0 4rem; min-height:460px; }
  .map-container{ height:320px; }
}

@media (max-width: 767px){
  .hero-section{ padding:5rem 0 3.5rem; min-height:420px; }
}