@import url('https://fonts.googleapis.com/css2?family=Birthstone&family=DM+Serif+Display:ital@0;1&family=Kapakana:wght@300..400&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
background-image: linear-gradient(to bottom right, #B6A38A, #F3EBDE, #B6A38A); background-position:fixed;
font-family: 'Noto Sans', sans-serif;
color: #2d2d2d;
text-align:justify;
}

.main a:link, .main a:active, .main a:visited { color: #5B715D; text-decoration:none; }

/* CONTAINER */
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    position: relative;
    z-index: 2;
}

.grain { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.55; background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png'); }

.texture { position: absolute; inset: 0; background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png'); opacity: 0.3; pointer-events: none; }

/* TOP BAR */
.topbar { font-family: Kapakana; background: #5C725E; color: #FFFFFF; font-size: 36px; padding: 10px 0; border-bottom: 1px solid #B88F54; }
.topbar-inner { display: flex; justify-content: space-between; }

/* NAVBAR */

.hamburger {
    display: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.navbar { background-image: linear-gradient(to bottom right, #163321, #1E462D, #163321); border-bottom: 1px solid #B88F54; padding: 10px; box-shadow: 0 4px 8px 0 rgba(184, 143, 84, 0.2), 0 6px 20px 0 rgba(184, 143, 84, 0.19);  }

.nav-inner { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }

/* LOGO */
.logo { display: flex; align-items: center; }
.logo img { height: 100px; }

/* NAV */
.nav-menu { display: flex; gap: 38px; }
.nav-link {
font-family: DM Serif Display;
position: relative;
font-size: 22px;
letter-spacing: 1px;
text-transform: uppercase;
color: #EEE;
padding-bottom: 6px;
transition: 0.3s;
z-index: 1001;
}

.nav-menu a:link, .nav-menu a:active, .nav-menu a:visited { text-decoration:none; }

.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: #c8a96a;
    transform: translateX(-50%);
    transition: 0.3s;
}

.nav-link:hover { color: #eee; transform: translateY(-1px); }
.nav-link:hover::after { width: 100%; }

/* HERO */
.hero { position: relative; height: 420px; background: url('img/hero.jpg') center/cover no-repeat; display: flex; box-shadow: 0 4px 8px 0 rgba(184, 143, 84, 0.2), 0 6px 20px 0 rgba(184, 143, 84, 0.19); border-bottom: 1px solid #B88F54; }
.hero-overlay { position: absolute; inset: 0; background: rgba(246,243,238,0.65); }
.hero-content { width: 90%; max-width:1200px; text-align:center; word-spacing: 100px; align-items: center; }
.hero-content img { max-height: 360px; filter: drop-shadow(0 10px 65px rgba(183, 144, 84, 0.4)); z-index: -1; }

/* MAIN */
.main { width:90%; max-width:1200px; margin: 0 auto; background: #F7F2EA; position: relative; padding: 30px; box-shadow: 0 4px 8px 0 rgba(184, 143, 84, 0.2), 0 6px 20px 0 rgba(184, 143, 84, 0.19); }
p { margin-bottom: 15px; }

/* FOOTER */
.footer { background-image: linear-gradient(to bottom right, #163321, #1E462D, #163321); border-top: 1px solid #B88F54; color: #FFFFFF; padding: 20px 0; text-transform: uppercase; font-size: 14px; }

.footer-inner { display: flex; justify-content: space-between; }




h1 {
    font-family: "Birthstone", serif;
    font-size: 60px;
text-transform:normal;
    font-weight: 500;
    font-style: normal;
    color: #596C59;
text-align:center;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}

h2 {
    font-family: "Birthstone", serif;
    font-size: 50px;
text-transform:normal;
    font-weight: 500;
    font-style: normal;
    color: #596C59;
text-align:left; margin: 40px 0 0 30px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}

h3 {
    font-family: "Birthstone", serif;
    font-size: 40px;
text-transform:normal;
    font-weight: 500;
    font-style: normal;
    color: #596C59;
text-align:left; margin: 40px 0 0 30px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}




.border {     background: linear-gradient(to bottom right, #f8f4ee, #efe6d8);
    border: 1px solid #d6c2a3;
    box-shadow: inset 0 0 25px rgba(184, 143, 84, 0.08),
                0 8px 20px rgba(184, 143, 84, 0.15);
padding: 5px; margin: 5px 10px; border-radius: 15px; }

.left { transform: rotate(-1deg); }
.right { transform: rotate(+1deg); }





.kasvatit {
    margin: 10px 0 40px 0;
    padding: 15px;
    background: linear-gradient(to bottom right, #f8f4ee, #efe6d8);
    border: 1px solid #d6c2a3;
    box-shadow: inset 0 0 25px rgba(184, 143, 84, 0.08),
                0 8px 20px rgba(184, 143, 84, 0.15);
    position: relative;
}

.kasvatit::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(184, 143, 84, 0.3);
    pointer-events: none;
}





/* HORSE INFO TABLE */
.horse-info {
    margin: 10px 0 40px 0;
    padding: 25px 30px;
    background: linear-gradient(to bottom right, #f8f4ee, #efe6d8);
    border: 1px solid #d6c2a3;
    box-shadow: inset 0 0 25px rgba(184, 143, 84, 0.08),
                0 8px 20px rgba(184, 143, 84, 0.15);
    position: relative;
}

.horse-info::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(184, 143, 84, 0.3);
    pointer-events: none;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 40px;
}

.info-item {
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(184, 143, 84, 0.25);
}

.info-item2 {
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
    border-bottom: 0px solid rgba(184, 143, 84, 0.25);
}

.label {
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #B78F54;
font-weight:600;
}

.value {
    font-size: 16px;
    color: #2d2d2d;
    padding-top: 2px;
}


.kuvagalleria {
  margin: 0px auto 0px auto;
  width: 100%;
  text-align: center;
  margin-top:10px;
}

.kuvagalleria img {     background: linear-gradient(to bottom right, #f8f4ee, #efe6d8);
    border: 1px solid #d6c2a3;
    box-shadow: inset 0 0 25px rgba(184, 143, 84, 0.08),
                0 8px 20px rgba(184, 143, 84, 0.15);
padding: 5px; margin: 5px 10px; border-radius: 15px; }

.kuvagalleria-meriitit {
  margin: 0px auto 0px auto;
  width: 100%;
  text-align: center;
  margin-top:10px;
}

.kuvagalleria-meriitit img {    
    border: 0px solid #d6c2a3;
padding: 5px; margin: 5px 10px; border-radius: 15px; }


.sukutaulu, .kasvattilistaus { width: 100%; border-collapse:collapse; }
.sukutaulu td { padding: 10px 15px; }
.sukutaulu small { color: #9F8664; font-size: 12px; }


.kasvattilistaus td { padding: 8px; border-bottom: solid rgba(184, 143, 84, 0.25) 1px; }

.kasvattilistaus th {
    font-size: 16px;
padding: 8px;
}




/* HORSE LIST GRID */
.horse-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 per row */
    gap: 20px;
    margin-top: 20px;
}

.horse-card {
    background: linear-gradient(to bottom right, #f8f4ee, #efe6d8);
    border: 1px solid #d6c2a3;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(184, 143, 84, 0.15);
    display: flex;
    gap: 15px;
}

.horse-card img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
}

.horse-content {
    flex: 1;
}

.horse-name {
    font-family: 'DM Serif Display';
    font-size: 22px;
    color: #724973;
    margin-bottom: 5px;
}

.horse-meta {
    font-size: 16px;
    margin-bottom: 10px;
}

.horse-trophies {
    font-size: 16px;
    color: #B78F54;
}




/* =========================
   MOBILE RESPONSIVENESS
========================= */

/* NAV MOBILE */
@media (max-width: 900px) {

    .hamburger {
        display: block;
    }

    .nav-inner {
        flex-wrap: wrap;
    }

    .navbar {
        padding: 10px;
    }

    .nav-menu {
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        background: #1E462D;
        flex-direction: column;
        align-items: center;
        gap: 0px;
        padding: 10px 0;
        display: none;
border: 1px solid #B88F54;
    }

    .nav-menu.active {
        display: block;
    }

.nav-menu a:link, .nav-menu a:active, .nav-menu a:visited { padding: 0 15px; font-size: 17px; letter-spacing: 2px; }

    .logo img {
        height: 70px;
    }
}


/* HERO */
@media (max-width: 900px) {

    .hero {
        height: auto;
        padding: 40px 0;
    }

    .hero-content {
        word-spacing: normal;
    }

    .hero-content img {
        max-width: 90%;
        display: block;
        margin: 0 auto;
    }
}


/* TEXT + HEADINGS */
@media (max-width: 700px) {

    h1 { font-size: 42px; }
    h2 { font-size: 34px; margin-left: 0; }
    h3 { font-size: 28px; margin-left: 0; }

    body {
        text-align: left;
    }
}


/* MAIN CONTAINER */
@media (max-width: 700px) {

    .main {
        padding: 20px 15px;
    }
}


/* INFO GRID */
@media (max-width: 700px) {

    .info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}


/* HORSE LIST */
@media (max-width: 900px) {

    .horse-list {
        grid-template-columns: 1fr;
    }

    .horse-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .horse-card img {
        width: 100%;
        max-width: 250px;
        height: auto;
    }
}

.rotuvalikko {
  margin-bottom: 20px;
}

.rotuvalikko a {
  margin-right: 15px;
  text-decoration: none;
  font-weight: bold;
}

.rotuvalikko a:hover {
  text-decoration: underline;
}
.rotuvalikko button {
  background-color: #f5f1e8;   /* vaalea tallisävy */
  border: 1px solid #c9a44c;   /* kultainen reunus */
  color: #5a4632;              /* tumma ruskea teksti */
  padding: 6px 12px;
  margin-right: 8px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.rotuvalikko button:hover {
  background-color: #c9a44c;
  color: white;
}

.rotuvalikko button.active {
  background-color: #c9a44c;
  color: white;
}


.hevosen-meriitit {
  margin-top: 10px;
}

.meriitit {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-block: 1rem;
}

.palkinto {
  background: #f5f1e8;
  border: 1px solid #c9a44c;
  padding: 8px 10px;
  border-radius: 6px;
    text-align: center;
color: #B78F54;
}


/* GALLERY */
@media (max-width: 700px) {


    .kuvagalleria img {
        width: 100%;
        max-width: 300px;
        height: auto;
        margin: 10px auto;
        display: block;
    }
}


/* TABLE (PEDIGREE) */
@media (max-width: 800px) {

    .sukutaulu {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* FOOTER */
@media (max-width: 700px) {

    .footer-inner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/*PORRASTETUT */


.porrastetut {
    display: flex;
    align-items: center;
    justify-content: center;
margin-block: 1rem;
}

.porr-column {
    flex: 1 1;
}

/* Aikajanan tyylit */
.level-bar {
    width: 98%;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
    margin: 10px 0;
    position: relative;
}

.level-bar-inner {
    height: 100%;
    background-color: #9e9e8a; /* Vihreä väri edustaa hevosen tasoa */
    border-radius: 8px;
    position: relative;
}

.level-bar-inner span {
    position: absolute;
    color: white;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    transform: translateY(-50%) translateX(-50%); /* Keskittää tekstin */
    font-size: 14px;
    font-weight: bold;
}

/* Ympyrän tyylit */
.level-circle {
    width: 150px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(#9e9e8a 0%, #f0f0f0 100%);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    border: 4px solid #ccc;
}

.level-circle span {
    position: absolute;
    font-size: 14px;
    color: #000;
    font-weight: bold;
}


/*KASVATUS */

.tiedot { 
      margin-left: 50px;   /* siirtää koko blokin oikealle */
}
.lista {
  list-style: none;
  padding-left: 20px;
}

.lista li {
  position: relative;
  margin-bottom: 10px;
}

.lista li::before {
  content: "✩";   /* vaihda tähän haluamasi tähti */
  position: absolute;
  left: -15px;
}