/* HERO-HEADER */

.hero-header {
  background-image: url('header.jpg'); 
  background-size: cover;
  background-position: center; 
  height: 320px; 
  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: 80px; /* Laskettu 120px -> 80px, jotta ei peitä mobiilissa */
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 100%
    );
    z-index: 2;
}


/* 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: 20px; /* 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;
}

.hero-header, #page-content {
    margin-left: 280px; /* Sidebarin leveys */
    width: calc(100% - 280px);
}

@media (max-width: 992px) {
    .hero-header, #page-content {
        margin-left: 0;
        width: 100%;
    }
}


/* Mobiili-hienosäädöt headerille */
@media (max-width: 991px) {
    .hero-title {
        font-size: 60px !important; /* Pienennetään jättiotsikkoa mobiilissa */
    }
    .hero-header {
        height: 250px; /* Madalletaan headeria mobiilissa */
    }
    .hero-content {
        padding-top: 60px; /* Huomioidaan mobile-top-barin viemä tila */
    }
}