/* =========================
   1. SIVUN PERUSASETUKSET
   ========================= */
:root {
    --hemi-bg: #2B2B2B;            /* ◼️ Grafiitinharmaa */
    --hemi-text: #F5F5F5;          /* ⬜ Pehmeä valkoinen */
    --hemi-green: #4E7B4E;         /* 🟩 Hemi-vihreä */
    --hemi-copper: #A66A2C;        /* 🟫 Kupari */
    --hemi-copper-light: #D6B08A;  /* 🟧 Vaalea kupari – hillityt lisätekstit */
}

body {
    font-family: Arial, sans-serif;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    line-height: 1.6;

    background: var(--hemi-bg);
    color: var(--hemi-text);
}


/* =========================
   2. OTSIKKO / HEADER
   ========================= */
 .hemi-banner {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 25px;
}
header {           
    margin-bottom: 25px;
    padding-bottom: 25px;
    /* Headerin erotinviiva */
    border-bottom: 3px solid var(--hemi-copper);
}
header nav a {
    color: var(--hemi-text);
    text-decoration: none;
    margin-right: 18px;
}

header nav a:hover {
    color: var(--hemi-copper);
}
/* Hannun kuva ja teksti rinnakkain */
.hannu-sisalto {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* =========================
   3. HANNU PALO -OSIO
   ========================= */

main section {
    margin-top: 25px;
    max-width: 700px;
}

main h2 {
    font-size: 32px;
    margin-bottom: 10px;
    color: var(--hemi-copper);
}

/* Hannun kuvan koko */
.hannu-kuva {
    width: 510px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

main p {
    font-size: 20px;
    margin-top: 0;
}
/* Hannun perinneteksti */
.hannu-perinne {
  color: #D6B08A;
}

/* =========================
   4. MUSIIKKI
   ========================= */

/* YouTube-kuuntelupainike */
.kuuntele-painike {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 18px;
    border: 1px solid var(--hemi-copper);
    color: var(--hemi-text);
    text-decoration: none;
}

/* Yksittäinen musiikkijulkaisu */
.musiikki-kortti {
    margin-top: 25px;
    padding: 20px;
    border: 1px solid #555;

    display: flex;
    align-items: center;
    gap: 20px;
}

/* Kansikuvan koko tietokoneella */
.musiikki-kuva img {
    width: 410px;
    max-width: 100%;
    height: auto;
    display: block;
}
/* Kappaleen tietojen rivivälit */
    .musiikki-tiedot p {
    margin: 5px 0;
}
/* Kappaleen otsikon väli */
    .musiikki-tiedot h3 {
    margin-bottom: 5px;
}
/* =========================
   5. KEIKAT
   ========================= */

/* Keikkajulisteen koko */
.keikka-juliste img {
  width: 420px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Keikkakortin asettelu tietokoneella */
.keikka-kortti {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid #555;
  padding: 24px;
  max-width: 900px;
}

 /* Keikan tietojen rauhallinen ulkoasu */
.keikka-tiedot p {
    margin: 4px 0 14px;
    font-size: 17px;
    line-height: 1.45;
    color: var(--hemi-copper-light);
    }   
    /* Keikkapaikan otsikko */
        .keikka-tiedot h3 {
        margin-top: 0;
        margin-bottom: 14px;
        font-size: 22px;
        font-weight: 600;
        color: var(--hemi-text);
    }   
    /* Hannun nimen korostus */
    .keikka-hannu {
        color: var(--hemi-text);
        font-weight: 600;
    }
    /* Yhteystietojen sähköpostilinkit */
    #yhteys a {
        color: var(--hemi-copper-light);
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    #yhteys a:hover {
        color: var(--hemi-text);
        text-decoration: underline;
    }
 /* =========================
   6. TABLETTINÄKYMÄ
   ========================= */
@media (min-width: 601px) and (max-width: 1024px) {
    
    /* Vanhan tabletin selain ei tue flex-gap-arvoa */
    .hannu-sisalto,
    .keikka-kortti {
        gap: 0;
    }
    /* Hannun ja keikan tekstit 15 px kuvan oikealle puolelle */
    .hannu-sisalto > p,
    .keikka-tiedot {
        margin-left: 15px;
        min-width: 0;
    }
    /* Musiikkikortti rinnakkain tabletilla */
    .musiikki-kortti {
        flex-direction: row;
        gap: 0;
        align-items: center;
    }
    /* Musiikin tiedot 15 px levynkannen oikealle puolelle */
    .musiikki-tiedot {
        margin-left: 15px;
        min-width: 0;
    }
    /* Levynkannen kuvalaatikon koko tabletilla */
    .musiikki-kuva {
        width: 415px;
        flex: 0 0 415px;
    }
    /* Levynkannen koko tabletilla */
    .musiikki-kuva img {
        width: 415px;
        max-width: 100%;
    }
}  

/* =========================
   7. MOBIILINÄKYMÄ
   ======================== */

@media (max-width: 600px) {

    body {
        padding: 20px;
    }
    /* Hannun kuva ja teksti allekkain puhelimella */
    .hannu-sisalto {
        display: block;
    }
    /* Hannun kuvan koko puhelimella */
    .hannu-kuva {
        width: 400px;
        margin-bottom: 15px;
    }
    h2 {
        font-size: 28px;
    }
    /* Musiikkikortti allekkain puhelimella */
    .musiikki-kortti {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .musiikki-kuva {
        width: 100%;
    }
    /* Musiikkikannen koko puhelimella */
    .musiikki-kuva img {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
    /* Lauantaina-kansi koko leveydelle puhelimella */
    #julkaisu-kuva {
        width: 100%;
        max-width: none;
        height: auto;
        display: block;
}
    /* Keikkakortti puhelimella */
    .keikka-kortti {
        flex-direction: column;
        gap: 20px;
        padding: 16px;
    }

    /* Keikkajuliste puhelimella */
    .keikka-juliste {
        width: 100%;
    }

    .keikka-juliste img {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    /* Keikkatiedot julisteen alle */
    .keikka-tiedot {
        width: 100%;
    }
    /* Keikkatietojen tekstikoko puhelimella */
    .keikka-tiedot p {
        font-size: 18px;
    }
}  /* mobiilinäkymä päättyy */

/* Sosiaalisen median painikkeet */
#yhteys .some-linkit {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#yhteys .some-linkit a {
  display: inline-block;
  padding: 14px 18px;
  border: 1px solid var(--hemi-copper);
  color: var(--hemi-copper-light);
  text-decoration: none;
  font-size: 18px;
}

/* Sivun alatunniste */
footer {
  margin-top: 60px;
  padding: 30px 20px;
  border-top: 1px solid #555;
  color: var(--hemi-copper-light);
  text-align: center;
}

footer p {
  margin: 0;
  font-size: 16px;
}