@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{--green:#213b27;--cream:#efe3c9;--ink:#283b2b;--sepia:#998d72;--line:#9c9279}

html,body{min-height:100%;background:url(img/bg.png); 	background-repeat: no-repeat; display:flex;justify-content:center;align-items:flex-start;
	background-attachment:fixed;
	background-size:cover;font-family:Cormorant Garamond;color:#302d25; text-align:justify; font-size: 16px;}

a:link, a:active, a:visited { color: var(--green); text-decoration:none;}
a:hover { color: var(--sepia); text-decoration:none;}

.page{width:100%;overflow:hidden;position:relative; }

.topbar{width:100%;height:70px;background:linear-gradient(180deg,#253f29 0%,#1d351f 100%);display:flex;align-items:center;justify-content:space-between;padding:0 70px;position:relative;z-index:5}


.nav{display:flex;height:70px;align-items:center;gap:53px}

.nav a{position:relative;color:#efe8d5;text-decoration:none;text-transform:uppercase;font-family:"Cinzel",serif;font-size:16px;font-weight:500;letter-spacing:.4px;text-shadow:0 2px 5px rgba(0,0,0,.28);transition:color .25s ease,transform .25s ease,text-shadow .25s ease}

.nav a:after{content:"";position:absolute;left:50%;bottom:-8px;width:0;height:1px;background:linear-gradient(90deg,transparent,#efe8d5,transparent);transform:translateX(-50%);transition:width .25s ease}

.nav a:hover{color:#fff6df;transform:translateY(-2px);text-shadow:0 0 10px rgba(255,246,223,.35)}

.nav a:hover:after{width:100%}

.social {display:flex;gap:29px;align-items:center}

.social a{color:#efe8d5;text-decoration:none;font-size:19px;font-weight:700;line-height:1;transition:color .25s ease,transform .25s ease,text-shadow .25s ease}

.social a:nth-child(2){font-family:Arial,sans-serif;font-size:20px}

.social a:hover{color:#fff6df;transform:translateY(-3px);text-shadow:0 0 11px rgba(255,246,223,.45)}

.farm {display:flex;gap:29px;align-items:center; color:#efe8d5; font-family: Cinzel; font-size:19px;font-weight:700;line-height:1; }

.content{position:relative;   display:flex;
  align-items:flex-start;
  gap:5%;}



.main-copy{  position:relative;
  z-index:2;
  flex:0 1 55%;
  margin-left:10%;
  padding:30px 0 20px 0;}

.main-copy-horse{  position:relative;
  z-index:2;
  flex:0 1 80%;
  margin-left:10%;
  padding:30px 0 0 0;}


h1{font-family:"Cinzel",serif;font-size:25px;font-weight:500;line-height:1.6;letter-spacing:3px;text-transform:uppercase;color:#263a2a; text-align:center; }

h2{font-family:"Cinzel",serif;font-size:22px;font-weight:500;line-height:1.6;letter-spacing:3px;text-transform:uppercase;color:#263a2a; text-align:left; text-indent: 30px; }

h3{font-family:"Cinzel",serif;font-size:22px;font-weight:500;line-height:1.6;letter-spacing:3px;text-transform:uppercase;color:#263a2a; text-align:left; text-indent: 30px; margin-top: 40px; }


.main-copy p, .main-copy-horse p{ margin-bottom:21px;}

.contact-card{  position:relative;
  z-index:22;
  top:auto;
  right:auto;
  flex:0 0 20%;
  margin-top:-50px;
  margin-right:10%;
  color:#343028;
  text-align:center; font-size: 16px; line-height: 1.5; }

.contact-card p{margin-bottom:29px}

.ots img { width:100%; }

.copyt { font-size: 12px; text-transform:uppercase;}




.hevoslistaus{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:20px;
  align-items:start;
}

.hevoslistaus_hevonen {
  position:relative;
text-align:center;
font-size: 16px;
}

.hevoslistaus_hevonen img {
width:90%;
border: solid rgba(255,255,255,0.6) 10px;
}

.hevoslistaus_hevonen a:link, .hevoslistaus_hevonen a:active, .hevoslistaus_hevonen a:visited {
font-family: Cormorant Garamond;
font-size: 18px;
color: var(--green);
text-decoration:none;
font-weight:600;
}





.perustiedot, .sukutaulu {
width:100%;
  background: rgba(255,255,255,.5);
border-collapse:collapse;
margin: 10px 0;
border: solid var(--cream) 1px;
font-size: 16px;
}

.perustiedot td {
padding: 10px 15px;
border-bottom: solid var(--cream) 1px;
}

.kysymys { background: #283618; font-weight: 700; text-transform:uppercase; font-size: 16px; width: 20%; color: #FEFAE0; letter-spacing: 1px; }

.kuvat {
text-align:center;
margin-bottom: 20px;
}

.kuvat img { height: 165px; margin: 10px; border: solid rgba(255,255,255,0.6) 5px; }

.sukutaulu td {
padding: 10px 25px;
border-bottom: solid var(--cream) 1px;
}

ul { text-indent: 20px; }

.kilpailukalenteri-2 { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.kilpailukalenteri-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 10px; }

.kilpailukalenteri-2 div, .kilpailukalenteri-3 div { padding: 20px 30px; }




@media(max-width:1400px){body{justify-content:flex-start}}

.menu-toggle{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:6px;z-index:20}
.menu-toggle span{display:block;width:28px;height:2px;background:#efe8d5;border-radius:999px;transition:transform .25s ease,opacity .25s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:1100px){
  .topbar{padding:0 30px}
  .nav{gap:28px}
  .main-copy{flex-basis:62%;margin-left:6%}
  .contact-card{flex-basis:26%;margin-right:6%}
  .hevoslistaus{grid-template-columns:1fr 1fr}
}

@media(max-width:820px){
  html,body{display:block;font-size:16px;text-align:left}
  .page{min-width:0}
  .topbar{height:64px;padding:0 18px;position:sticky;top:0}
  .menu-toggle{display:flex}
  .nav{position:absolute;top:64px;left:0;right:0;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;background:linear-gradient(180deg,#253f29 0%,#1d351f 100%);box-shadow:0 12px 20px rgba(0,0,0,.2);max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav.is-open{max-height:320px}
  .nav a{display:block;padding:17px 22px;border-top:1px solid rgba(239,232,213,.16);font-size:15px;text-align:left}
  .nav a:after{display:none}
  .nav a:hover{transform:none}
  .social{margin-left:auto}
  .content{display:block;padding:24px 18px 36px}
  .main-copy,.main-copy-horse{width:100%;max-width:760px;margin:0 auto;padding:0;flex:none}
  .contact-card{width:100%;max-width:520px;margin:34px auto 0;flex:none;font-size:17px}
  .ots img{max-width:260px}
  h1,h2,h3{font-size:clamp(26px,8vw,34px);line-height:1.25;letter-spacing:2px;text-indent:0;text-align:left;margin-bottom:18px}
  h3{margin-top:30px}
  .main-copy p,.main-copy-horse p{margin-bottom:18px}
  .hevoslistaus{grid-template-columns:1fr;gap:28px}
  .hevoslistaus_hevonen img{width:100%;max-width:420px}
  .perustiedot,.perustiedot tbody,.perustiedot tr,.perustiedot td{display:block;width:100%}
  .perustiedot td{border-bottom:0}
  .kysymys{width:100%}
  .kuvat img{width:100%;max-width:200px;height:auto}
}

@media(max-width:480px){
  .topbar{padding:0 12px}
  .social a{font-size:18px}
  .content{padding:20px 14px 30px}
  .contact-card{font-size:16px}
  .copyt{font-size:13px}
}