/* estetään mobiilissa ylivuotoongelmat */
*,
*::before,
*::after {
  box-sizing: border-box;
}


html, body { 
  min-height: 100vh; /* koko selaimen korkeudelle */
  background: black;
}

body {
  display: flex; /* Määrittää sivun joustavasti asetelluksi */
  flex-direction: column; /* elementit pystysuoraan */
}

main { 
  flex: 1; /* täyttää kaiken jäljellä olevan tilan ennen footeria */
}

/* tyhjää  tilaa headerin jälkeen */
.pt-hero-gap {
  padding-top: 130px; 
}




/* NAVBAR */

.navbar {
  background: rgba(0, 0, 0, 0.75); /* hieman tummempi */
  backdrop-filter: blur(5px);
  position: fixed;
  z-index: 1055;
  width: 100%;
  border-bottom: 2px solid rgba(255,255,255,0.06);
}

/* Linkit normaalitilassa */
.navbar .nav-link {
  color: #4ea8ff !important;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-decoration: none;
  position: relative;
  transition: color .2s ease;
  text-shadow: 0 0 4px rgba(78,168,255,0.25);
}

/* Hover */
.navbar .nav-link:hover {
  color: #4ea8ff !important; 
}

/* Aktiivinen sivu */
.navbar .nav-link.active {
  color: #4ea8ff !important;
  font-weight: 600;
}

/* Alleviivaus hoverissa ja aktiivisessa */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #4ea8ff;
  transition: width .25s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  width: 100%;
}


/* Navbar brand (nimi) */
.navbar .navbar-brand {
  color: #4ea8ff;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-decoration: none;
  position: relative;
  transition: color .2s ease;
}

/* Hover */
.navbar .navbar-brand:hover {
  color: #4ea8ff;
}

/* Alleviivaus hoverissa */
.navbar .navbar-brand::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #4ea8ff;
  transition: width .25s ease;
}

.navbar .navbar-brand:hover::after {
  width: 100%;
}




/* HERO-HEADER */

.hero-header {
  background-image: url('header.jpg'); 
  background-size: cover;
  background-position: center; 
  height: 420px; 
  position: relative;  /* overlay-asetteluun */

}

/* tumma overlay kuvan päällä*/
.hero-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 0;
  pointer-events: none;
}


/* headerin alareuna sulautumaan bodyn mustan taustan kanssa */
.hero-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 120px;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.4) 10%,
    rgba(0,0,0,0.75) 25%,
    rgba(0,0,0,1) 100%
  );

  z-index: 2; /* overlayn päälle */
  pointer-events: none;
}


/* Tekstit hero-osion sisällä */
.hero-content {
  position: relative;
  z-index: 1;               /* näkyviin overlayn päälle */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* keskelle pystyyn */
  align-items: center;      /* keskelle vaakaan */
  text-align: center;
  padding: 0 1rem;
  padding-top: 30px; /* desktop */
}

/* Otsikoiden värit ja hehkut */
.hero-content h1,
.hero-content h3 {
  color: #fff;
  text-shadow:
    0 0 8px #2e88ff,
    0 0 16px #2e88ff,
    0 0 80px rgba(46,136,255,0.8);
}

/* Pääotsikko */
.hero-title {
  font-family: 'Allura', cursive;
  font-weight: 700;
  font-size: 130px;
  margin: 0;
}





/* FOOTER */

footer {
  bottom: 0; /* näkymän alareunaan */
  width: 100%; /* koko sivun leveys */
  margin-top: 130px !important; /* tyhjää tilaa footerin yläpuolelle */
}


.footer-icons {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

.footer-icons a svg {
  width: 43px;
  height: 43px;
  color: #4ea8ff; /* perusväri */
  transition: transform .2s ease, color .2s ease, filter .2s ease;
}

.footer-icons a:hover svg {
  transform: translateY(-2px);
}

/* Brändivärit hoverissa */
.footer-icons a.github:hover svg {
  color: #f472b6; 
  filter: drop-shadow(0 0 6px rgba(244,114,182,0.6));
}

.footer-icons a.mail:hover svg {
  color: #2dd4bf; 
  filter: drop-shadow(0 0 6px rgba(45,212,191,0.6));
}

.footer-icons a.linkedin:hover svg {
  color: #0a66c2; 
  filter: drop-shadow(0 0 6px rgba(10,102,194,0.6));
}






/* ============================= */
/*   ETUSIVU – PROFIILIKUVA     */
/* ============================= */

.omakuva-wrap {
  position: relative;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  overflow: hidden;


  /* hienovarainen kehys */
  box-shadow: 0 0 20px rgba(78,168,255,0.6);
}

/* itse kuva */
.omakuva {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 10% 10%;
  border-radius: 50%;
  display: block;

  /* kevyt sävy kuvalle*/
  filter: 
    contrast(1.08)
    brightness(0.95)
    saturate(0.9);
}






/* ============================= */
/*   ETUSIVU – ESITTELYTEKSTI   */
/* ============================= */

.neu-box-etusivu h4 {
  color: #fff;
  line-height: 2.4;
  font-family: 'Poppins', sans-serif;
  margin: 0;

}

.neu-box-etusivu p {
  color: #e0e0e0;
  text-shadow: none;
  font-size: 22px;
  font-family: 'Poppins', sans-serif;
  text-shadow: 0 0 4px rgba(78,168,255,0.25);
}

strong {
  color: #4ea8ff;
  text-shadow: 0 0 15px rgba(78,168,255,0.6);
  font-weight: 600;
}




/* NEU-BOXIT MUUALLA SIVUSTOLLA*/

.neu-box {
  background: rgba(0,0,0,0.3);
  padding: 1rem;
  border-radius: 12px;
  color: white;

}

/* neu-boxien otsikot */
.neu-box h3, .neu-box h4 { 
  color: #ffffff;
  font-family: 'Poppins', sans-serif; 
  margin-bottom: 1rem; /* tilaa otsikon ja seuraavan tekstin väliin */
  font-size: 35px;
}

.neu-box p { /* Neu-boxien sisäteksti */
  color: #cfcfcf;
  line-height: 1.5; /* riviväli */
  font-size: 20px;
}



/* tekstikenttien yhteinen tyyli */
.neu-box input[type="text"],
.neu-box input[type="number"],
.neu-box input[type="email"],
.neu-box input[type="date"],
.neu-box textarea {
  width: 100%;     /* 70 % laatikon sisätilasta */
  max-width: 420px;
  background: white;
  border: none; /*ei reunaviivaa*/
  color: black;
  padding: 0.4rem;  /* sisätila kentän sisälle */
  border-radius: 10px;
  margin-top: 5px;  /* väli */
  margin: 5px auto;  /* keskitys vaakasuunnassa */
  display: block;   /* varmistaa että margin: auto toimii */
}




/* LINKKIEN ERIKOISVÄRITYKSET */

/* sähköpostit */
a[href^="mailto:"] { 
  color: #66ccff;
  text-decoration: none; /* poistaa alleviivauksen */
  font-weight: 500; /* paksumpi teksti */
  text-shadow:
    0 0 6px #2e88ff, 
    0 0 12px rgba(46,136,255,0.8); 
}

/* kun hiiri kohdistettu */
a[href^="mailto:"]:hover { 
  color: #2e88ff; /* Kirkkaampi sininen */
  text-shadow:
    0 0 10px #2e88ff, /* Lisää valoa ympärille */
    0 0 20px rgba(46,136,255,1); /* hohde */
}




/* GitHub-linkit */
a[href*="github.com"] {
  color: #b388ff;
  text-decoration: none; /* Ei alleviivauksia */
  font-weight: 500; /* paksumpi teksti */
  text-shadow:
    0 0 6px #b388ff, /* hehku lähellä tekstiä */
    0 0 12px rgba(179,136,255,0.8); /* ulompo hehku */
}

/* kun hiiri kohdistettu*/
a[href*="github.com"]:hover { 
  color: #d1aaff; 
  text-shadow:
    0 0 10px #d1aaff, 
    0 0 20px rgba(209,170,255,1); 
}


/*linkedin linkit */
a[href*="linkedin.com"] {
  color: #b388ff;
  text-decoration: none; /* Ei alleviivauksia */
  font-weight: 500; /* paksumpi teksti */
  text-shadow:
    0 0 6px #b388ff, /* hehku lähellä tekstiä */
    0 0 12px rgba(179,136,255,0.8); /* ulompo hehku */
}

/* kun hiiri kohdistettu*/
a[href*="linkedin.com"]:hover { 
  color: #d1aaff; 
  text-shadow:
    0 0 10px #d1aaff, 
    0 0 20px rgba(209,170,255,1); 
}






/* PROJEKTIT "LUE LISÄÄ" OSIOT */

/* Koko näytön päälle tuleva tumma tausta */
.overlay { 
  position: fixed; /* Pysyy paikallaan, vaikka sivua skrollataan */
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(10, 10, 10, 0.9); 
  display: none; /* Piilotettuna oletuksena */
  justify-content: center; 
  align-items: center; 
  z-index: 999; /* Näkyy kaiken muun päällä */
  backdrop-filter: blur(10px); /* Sumennusefekti taustalle */
}

/* #popup-id, Aktivoituu kun käyttäjä klikkaa Lue lisää -painiketta */
.overlay:target { 
  display: flex; 

}

/* Popupin sisältölaatikko  */
.overlay-content { 
  max-width: 800px; 
  background: #111; 
  padding: 2rem; /* Riittävästi sisätilaa tekstille */
  border-radius: 25px; 
  box-shadow: 1px 0 30px #a8c5eb; 
  text-align: left; 
  overflow-y: auto; /* jos sisältöä on paljon, skrollautuu laatikon sisällä */
  max-height: 85vh; /* estää popupin ylittämästä näytön korkeutta */
}

/* sulje painike popupissa */
.close-btn { 
  position: absolute;
  top: 20px; /* etäisyys yläreunasta */
  right: 30px; /* etäisyys oikeasta reunasta */
  color: #fff; 
  font-size: 60px; 
  text-decoration: none; /* ei alleviivausta */
}

/* kun kursori rastin päällä */
.close-btn:hover { 
  color: #a8c5eb; 
}



/* YHTENÄINEN NAPPI */

button, .btn { 
  padding: 0.75rem 1.6rem; 
  border-radius: 999px; 
  background: black; 
  color: #ffffff !important; 
  font-weight: 600; 
  border: 1.5px solid rgba(255,255,255,0.08); 

  box-shadow:
    0 8px 20px rgba(8, 1, 112, 0.6),
    inset 0 1px 0 rgba(8, 1, 112, 0.6); 

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
} 

button:hover, .btn:hover {
  box-shadow:
    0 8px 30px rgba(125, 177, 245, 0.35),
    inset 0 1px 0 rgba(125, 177, 245, 0.35);
  background: #111;
}





  /* github buttonit */
.btn-git { 
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: black;
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.08);

  box-shadow:
    0 2px 8px rgba(207, 39, 207, 0.6),
    inset 0 1px 0 rgba(207, 39, 207, 0.6); /* pinkki yläreuna */

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Hover */
.btn-git:hover {
  box-shadow:
    0 8px 30px rgba(233, 155, 207, 0.55),   /* sama blur/voima kuin muissa */
    inset 0 1px 0 rgba(233, 155, 207, 0.8); /* pinkki sisäreuna säilyy */
  background: #111;
}





/*  PROJECT KORTIT    */

.project-card {
  position: relative;
  overflow: hidden;
  background: black;
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 2rem;
  transition: transform .35s ease, box-shadow .35s ease;
  display: flex;
  flex-direction: column;
}

/* Yleinen hover – hillitty ja premium */
.project-card:hover {
  transform: translateY(-6px);
}

/* Neon reunahohto */
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  opacity: .35;
  pointer-events: none;
}

.project-purple {
  box-shadow: 0 0 35px rgba(163,49,144,.45);
}
.project-purple:hover {
  box-shadow: 0 0 60px rgba(200,90,180,.85);
}

.project-blue {
  box-shadow: 0 0 35px rgba(13,119,206,.45);
}
.project-blue:hover {
  box-shadow: 0 0 60px rgba(80,170,255,.9);
}

.project-green {
  box-shadow: 0 0 35px rgba(1,90,23,.5);
}
.project-green:hover {
  box-shadow: 0 0 60px rgba(60,200,120,.9);
}

.project-red {
  box-shadow: 0 0 35px rgba(156,29,29,.5);
}
.project-red:hover {
  box-shadow: 0 0 60px rgba(255,80,80,.9);
}

.project-orange {
  box-shadow: 0 0 35px rgba(233,161,5,.5);
}
.project-orange:hover {
  box-shadow: 0 0 60px rgba(255,200,80,.95);
}

.project-teal {
  box-shadow: 0 0 35px rgba(3,150,125,.5);
}
.project-teal:hover {
  box-shadow: 0 0 60px rgba(80,230,200,.95);
}

/* Painikealue aina alas */
.project-card .button-group {
  margin-top: auto;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}



.project-card img {
  border-radius: 14px;
  margin-top: 12px;
  margin-bottom: 16px;
  box-shadow:
    0 0 25px rgba(0,0,0,.7),
    0 0 35px rgba(255,255,255,.08);
}

.project-card h4 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .5px;
}

.project-card p {
  font-size: 20px;
  color: #d6d6d6;
}




/* TYÖNÄYTE POPUP – kuva vasemmalla, teksti oikealla */
.popup-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

/* Kuva */
.popup-image {
  width: 40%;
  max-width: 280px;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 0 25px rgba(0,0,0,.6);
}

/* Teksti */
.popup-text {
  flex: 1;
}

.popup-text p {
  font-size: 17px;
  line-height: 1.5;
  color: #d6d6d6;
}


/* viesti käyttäjälle yhteydenoton jälkeen */

.thank-you-box {
  max-width: 520px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(78,168,255,0.25);
  box-shadow: 0 0 25px rgba(78,168,255,0.35);
  text-align: center;
  animation: fadeInUp .4s ease;
}

.thank-you-box h4 {
  color: #4ea8ff;
  font-weight: 600;
  margin-bottom: .4rem;
  letter-spacing: .3px;
}

.thank-you-box p {
  color: #d6d6d6;
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

/* Kevyt animaatio */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}








/* ===================================== */
/*   RESPONSIVE – KAIKKI LAITTEET        */
/* ===================================== */

/* TABLET & ALASPÄIN (≤992px) */
@media (max-width: 992px) {

  /* Hampurilaisvalikko näkyvämmäksi */
  .navbar-toggler {
    border: 1.5px solid rgba(46,136,255,0.6);
    box-shadow: 0 0 12px rgba(46,136,255,0.8);
    border-radius: 12px;
  }

  /* Korvataan Bootstrapin svg-ikoni */
  .navbar-toggler-icon {
    background-image: none;
    width: 28px;
    height: 2px;
    background-color: #2e88ff;
    position: relative;
    box-shadow: 0 0 10px #2e88ff;
  }

  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 28px;
    height: 2px;
    background-color: #2e88ff;
    box-shadow: 0 0 10px #2e88ff;
  }

  .navbar-toggler-icon::before { top: -8px; }
  .navbar-toggler-icon::after  { top:  8px; }

  .navbar-toggler:hover {
    box-shadow: 0 0 25px #2e88ff;
  }

  /* HERO */
  .hero-content {
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .hero-header { height: 320px; }
  .hero-title  { font-size: 60px; }
  .hero-subtitle { font-size: 32px; }

  /* Projektikorttien korostukset (tablet) */
  .project-purple { box-shadow: 0 0 120px rgba(200,90,180,.55); }
  .project-blue   { box-shadow: 0 0 120px rgba(80,170,255,.55); }
  .project-green  { box-shadow: 0 0 120px rgba(60,200,120,.55); }
  .project-red    { box-shadow: 0 0 120px rgba(255,80,80,.55); }
  .project-orange { box-shadow: 0 0 120px rgba(255,200,80,.55); }
  .project-teal   { box-shadow: 0 0 120px rgba(80,230,200,.55); }

  /* Profiilikuvan koko tabletissa */
  .omakuva-wrap {
    width: 220px;
    height: 220px;
  }

  /* Etusivun tekstit */
  .neu-box-etusivu h3 { font-size: 18px; line-height: 2.2; }
  .neu-box-etusivu p  { font-size: 16px; line-height: 1.45; }
}



/* ===================================== */
/*   MOBIILI (≤768px)                    */
/* ===================================== */
@media (max-width: 768px) {

  /* Yleinen layout etusivulla */
  .etusivu-layout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }

  /* Profiilikuva mobiilissa (hero-osion alle) */
  .omakuva-wrap {
    position: relative;
    margin: -60px 0 20px 10px; /* ylös + vasemmalle */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
  }

  /* Bootstrapin kolumnien täysi leveys */
  #etusivu .col-8,
  #etusivu .col-md-7 {
    width: 100%;
  }

  /* Profiilitiedot yhteen sarakkeeseen */
  .profile-info {
    grid-template-columns: 1fr;
  }

  /* CTA-painikkeet allekkain */
  .cta-group {
    flex-direction: column;
  }

  /* Projektikorttien korostukset (mobiili) */
  .project-purple { box-shadow: 0 0 120px rgba(200,90,180,.55); }
  .project-blue   { box-shadow: 0 0 120px rgba(80,170,255,.55); }
  .project-green  { box-shadow: 0 0 120px rgba(60,200,120,.55); }
  .project-red    { box-shadow: 0 0 120px rgba(255,80,80,.55); }
  .project-orange { box-shadow: 0 0 120px rgba(255,200,80,.55); }
  .project-teal   { box-shadow: 0 0 120px rgba(80,230,200,.55); }
}



/* ===================================== */
/*   PIENI MOBIILI (≤600px)              */
/* ===================================== */
@media (max-width: 600px) {

  /* Profiilikuva pienessä mobiilissa */
  .omakuva-wrap {
    position: relative;
    margin: -55px 0 16px 5px;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
  }
  /* Bootstrapin kolumnien täysi leveys */
  #etusivu .col-8,
  #etusivu .col-md-7 {
    width: 100%;
  }

  /* HERO pienessä mobiilissa */
  .hero-content {
    padding-top: 80px;
    padding-bottom: 30px;
  }

  .hero-header { height: 260px; }
  .hero-title  { font-size: 46px; }
  .hero-subtitle { font-size: 26px; }

  /* Neu-box */
  .neu-box {
    padding: 1rem;
    margin-bottom: 20px;
    border-radius: 10px;
  }

  .neu-box h3,
  .neu-box h4 { font-size: 24px; }

  .neu-box p {
    font-size: 16px;
    line-height: 1.4;
  }

  /* Projektikorttien korostukset (pieni mobiili) */
  .project-purple { box-shadow: 0 0 90px rgba(200,90,180,.55); }
  .project-blue   { box-shadow: 0 0 90px rgba(80,170,255,.55); }
  .project-green  { box-shadow: 0 0 90px rgba(60,200,120,.55); }
  .project-red    { box-shadow: 0 0 90px rgba(255,80,80,.55); }
  .project-orange { box-shadow: 0 0 90px rgba(255,200,80,.55); }
  .project-teal   { box-shadow: 0 0 90px rgba(80,230,200,.55); }
}