/*google fontit*/

/*=====      Miete lauseet       =====*/
.corinthia-regular {
  font-family: "Corinthia", cursive;
  font-weight: 400;
  font-style: normal;
}

.corinthia-bold {
  font-family: "Corinthia", cursive;
  font-weight: 700;
  font-style: normal;
}

/*======    Tekstit    =======*/
/* <weight>: Use a value from 400 to 900
/* <uniquifier>: Use a unique and descriptive class name*/
.playfair-display {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*=======    Korostus fontti   =======*/
.tagesschrift-regular {
  font-family: "Tagesschrift", system-ui;
  font-weight: 400;
  font-style: normal;
}

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

html {
    scroll-behavior: smooth;
}

#etusivu {
  scroll-margin-top: 170px;
}

:root {
    --header-height: 0px;
}

img {
    border-radius: 10px;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

body {
    /*padding-top: var(--header-height);*/

    background-image:
        linear-gradient(
            to top,
            rgba(196, 65, 0, 0),
            rgba(0, 196, 196, 0)
        ),
        url("../Kuvat/BackgroundImg.jpg");
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Playfair Display", sans-serif;
    font-size: 3ch;
}

a {
    color:rgb(64, 177, 139);
    text-decoration: none;
}

a:hover {
    color:#243a34;
}

.phone-logo {
    display: none;
}

h1 {
    font-family: "Playfair Display", sans-serif;
    padding-bottom: 10px;
    text-align: center;
}

h2 {
    font-family: "Tagesschrift", system-ui;
    text-align: center;
}

h3 {
    font-family: "Tagesschrift", system-ui;
    text-align: center;
}

article {
    max-width: 1000px;
    margin: 0 auto 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;

}

button {
  background-color: rgb(139, 216, 212);
  border: none;
  border-radius: 999px;
  color: rgb(54, 50, 46);
  padding: 15px 32px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.buttonit{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.buttonit button {
    background-color: #d6af7d;
}

button:hover {
    background-color: #141a18;
    color: rgb(139, 216, 212);
}

.artikkelilista {
    margin-left: 30px;
    margin-top: 5px;
}
 
/* header flexilla * tästä uupuu grid-area: header*/
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    padding-top: 0px;
    padding-right: 20%;
    background-color: rgba(152, 53, 0, 0.65);
    color: #8b8b8b;
    position: fixed; /*Tarvitaan burilais valikkoon*/
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(152, 53, 0, 0);
    color: white;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
      perspective: 900px;
  perspective-origin: top center;
}

.header .logo img {
    padding-top: 0px;
    margin-top: 0px;
}

.header.header-scrolled {
    background-color: rgba(5, 5, 5, 0);
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.377);*/
    transition: 0.5s ease;
}

.header.header-scrolled .logo img {
    height: 130px;
    width: auto;
    transition: width 5s ease, height 5s ease;
}

.nav .nav-list li {
    margin-right: 10px;
    justify-content: baseline;
}

.nav .nav-list li img {
    max-width: 100%;
    min-width: 90px;
    height: auto;
}

/*logo*/

.logo img {
    max-width: 100%;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/*     LOGON ANIMAATIO      */
/* Make the logo animate in like a hanging sign */
/* Hanging sign: drop + front/back swing */
.header .logo {
  transform-origin: top center;
  transform-style: preserve-3d;
}

.header .logo {
  transform-origin: top center;
  transform-style: preserve-3d;
  opacity: 0;

  transform: translateY(-140px) rotateX(65deg);

  animation: signDropSwing 1.6s cubic-bezier(.2,.8,.2,1) 0.35s forwards;
}

.header .logo img {
  display: block;
}

/* Drop then pendulum swing on X axis (front/back) */
@keyframes signDropSwing {
  0%   { opacity: 0; transform: translateY(-140px) rotateX(5deg); }
  45%  { opacity: 1; transform: translateY(0) rotateX(-35deg); }
  62%  { transform: translateY(0) rotateX(45deg); }
  74%  { transform: translateY(0) rotateX(-14deg); }
  84%  { transform: translateY(0) rotateX(9deg); }
  92%  { transform: translateY(0) rotateX(-5deg); }
  100% { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .header .logo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* navigointi */
.nav-list {
    display: flex;
    list-style: none;
    align-items: baseline;
}
 
.nav-list li {
    margin-left: 10px;
}
 
.nav-list li a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}
 
.nav-list li a:hover {
    color: lightblue;
}

/*Burilaisen logiikka, piilota checkbox ja ikoni oletuksena (desktop)*/
.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;  /*näkyy vasta mobiilisssa*/
}

.parallax {
  /* The image used */
  background-image: url("../Kuvat/ranta.jpg");

  /* Set a specific height */
  min-height: 1000px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position:center ;
  background-repeat: no-repeat;
  background-size: cover;
}

 /* Container holding the image and the text */
.parallaxblock {
  position: relative;
}

/* Bottom right text */
.miete {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.473);
  color: white;
  font-family: Corinthia;
  font-size: 50px;
  text-align: center;
  padding: 20px;
}

.korostus {
    font-family: Tagesschrift;
    padding: 1px;
}

.motto {
    font-family: "Corinthia", cursive;
    font-size: 50px;
    text-align: center;
    padding-top: 15px;
}


/*CONTENT*/

.content {
    flex: 1;
    padding: 0px;
    margin-top: 0px;
    border-top: #8b8b8b;
    background-color: #ff730000;
}


.content {
  position: relative;      /* required for pseudo-elements */
  overflow: visible;       /* allows wave to sit above */
  padding-top: 35px;       /* space so wave doesn't overlap content */
}

/* Back wave (lighter, offset) */
.content::before {
  content: "";
  position: absolute;
  left: 0;
  top: -22px;              /* lifts the wave above main */
  width: 100%;
  height: 44px;
  pointer-events: none;

  /* Slightly irregular "hand drawn" stroke using SVG */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 30'%3E%3Cpath d='M0 18 C 14 6, 28 26, 42 16 S 70 10, 84 18 S 112 28, 126 16 S 148 8, 160 18' fill='none' stroke='rgba(0,0,0,0.35)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x;

  background-size: 220px 44px;
  background-position: 0 0;
  animation: waveMove2 11s linear infinite reverse;
}

/* Front wave (darker, closer) */
.content::after {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;              /* different top = mismatch */
  width: 100%;
  height: 44px;
  pointer-events: none;

  
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 30'%3E%3Cpath d='M0 18 C 14 6, 28 26, 42 16 S 70 10, 84 18 S 112 28, 126 16 S 148 8, 160 18' fill='none' stroke='rgba(0,0,0,8)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x;

  background-size: 220px 44px;
  background-position: 0 0;
  animation: waveMove1 7s linear infinite;
}

@keyframes waveMove1 {
  from { background-position-x: 0; }
  to   { background-position-x: 220px; }
}

@keyframes waveMove2 {
  from { background-position-x: 0; }
  to   { background-position-x: 220px; }
}

.yhtotto .content::before,
.yhtotto .content::after {
  content: none;
}

.teksti {
    background-color: rgba(255, 255, 255, 0.473);
    padding: 10px;
    border-radius: 20px;
    font-size: 20px;
    margin-bottom: 10px;
}


.kontentti-artikkeli, .kontentti-galleria, .kontetti-ekstra {
    /*background-color: antiquewhite;*/

    min-height: min-content;
    max-width: 1000px;
    padding: 20px;
    border-radius: 1.5px;
}

/* ARTIKKELISSA ON KUVA JA TEKSTI VIERESSÄ; TEHDÄÄN FLEXILLÄ RAKENNE SINNE */

.kontentti-artikkeli {
    display: flex;
    align-items: flex-start;   /* top-align text and image */
    justify-content: center;
    align-self: start;
    margin: 0px auto 20px; /*top 0, right & left auto, bottom 20*/
    gap: 20px;                 /* space between text and image */
    background-image: url("../Kuvat/TextBackgroundOrange.jpg");

            /*=============       Tiketti reunat       ============*/
    -webkit-mask:
        radial-gradient(circle 25px at 0 0, transparent 98%, black) top left,
        radial-gradient(circle 25px at 100% 0, transparent 98%, black) top right,
        radial-gradient(circle 25px at 100% 100%, transparent 98%, black) bottom right,
        radial-gradient(circle 25px at 0 100%, transparent 98%, black) bottom left;

    -webkit-mask-size: 51% 51%;
    -webkit-mask-repeat: no-repeat;

    mask:
        radial-gradient(circle 25px at 0 0, transparent 98%, black) top left,
        radial-gradient(circle 25px at 100% 0, transparent 98%, black) top right,
        radial-gradient(circle 25px at 100% 100%, transparent 98%, black) bottom right,
        radial-gradient(circle 25px at 0 100%, transparent 98%, black) bottom left;

    mask-size: 51% 51%;
    mask-repeat: no-repeat;
}

/*===========           CONTACT PAGE                ===========*/
/* Contact page: text -> image -> cards */
.contact-article {
  max-width: 1000px;
  margin: 0 auto 20px;
  padding: 20px;
    background-image: url("../Kuvat/TextBackgroundOrange.jpg");
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Center the picture */
.contact-article .article-image {
  display: flex;
  justify-content: center;
}

.contact-article .article-image img {
  display: block;
  max-width: min(700px, 100%);
  height: auto;
  border-radius: 20px; /* optional */
}

/* 3 cards in a row */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 on top, 2 under */
  gap: 10px;
}

/* Card look */
.contact-card {
  padding: 16px 18px;
  background-color: rgba(252, 130, 31, 0.692);

}

.page-contact {
    background-image: url(../Kuvat/TextBackgroundOrange.jpg);
}

.page-contact form {
    background-color: rgba(250, 235, 215, 0.5);
    padding: 5px;
    border-radius: 10px;
}

.page-contact input,
.page-contact select,
.page-contact textarea,
.page-contact button {
    width: 100%;
    padding: 5px;
    border: 1px solid #ff9204;
    font-size: 18px;
}

.checkbox-row {
    display: flex;
    align-items: center;    /* checkbox ja teksti samalle korkeudelle */
    gap: 10px;
    padding-left: 10px;
    justify-content: flex-start;  /* vasempaan laitaan */
}

.checkbox-row input[type="checkbox"] {
    width: auto;            /* kumoaa width:100% */
    transform: scale(1.5);  /* isompi ruutu */
    cursor: pointer;
}

.checkbox-row label {
    cursor: pointer;
}

.contact-btn {
    align-self: flex-start;
    background-color: #04ffde;
    color: rgb(119, 99, 99);
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.contact-btn:hover {
    background-color: #ade0dc;
    transform: translateY(-1px);
}

.contact-btn:active {
    transform: translateY(0);
}


/* Honeypot-piilokenttä bottien varalta */
.hp-field {
    display: none;
}

.btn {
    display: block;
    width: fit-content;
    margin: 10px auto; /* centers horizontally */
    background-color: #2dfdecbd;
    color: rgb(71, 61, 61);
    text-decoration: none;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

/* Hover effect */
.btn:hover {
    background-color: #ffffffd2;
    transform: translateY(-2px);
}

/* Click effect */
.btn:active {
    transform: translateY(0);
}
.page-kiitos .contact-article {
    margin-top: 120px;
}

.article-image img {
    border-radius: 50px;
    max-width: 100%;
    min-width: 400px;
    height: auto;
}

.wrap-layout {
    display: block;   /* kill flexbox */
}

.wrap-layout .article-image {
    float: right;
    max-width: 40%;
    margin: 0 0 20px 20px;
}

.wrap-layout .article-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
}

.wrap-layout::after {
    content: "";
    display: block;
    clear: both;
}

.yhtotto {
    margin-top: 200px;
}

/*FOOTERI*/

.footer
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #141a18;
    color:rgb(44, 43, 41);
    padding: 10px;
    color: aliceblue;
    font-size: 16px;
}

.footernav-list{
    display: flex;
    list-style: none;
}

.footernav-list li{
    margin-left: 5px;
}

.footernav-list li a{
    color:rgb(255, 136, 0);
    text-decoration: none;
}

.footernav-list li a:hover {
    color: rgb(0, 0, 0);
    transition: 0.4s;
}

/*|||||||||||||||||||||||||||||         MEDIA QUERYT        |||||||||||||||||||||||||||||||||||||||||*/

/*Tabletti koko (breakpoint 1200px, koska siinä kohtaa sivuston elementit hajoaa)*/
@media (max-width: 1400px) {

.wrap-layout .article-image {
    float: none;
    max-width: 800px;
    margin: 10px auto;
}

.kontentti-artikkeli{
    flex-direction: column;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.header {
    padding-right: 5px;
    justify-content: space-between;
    align-items: center;
}

.header.header-scrolled {
    background-color: rgba(0, 0, 0, 0.555);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
    transition: 0.5s ease;
}

.header .logo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.header .logo img {
    max-width: 200px;
    height: auto;
}

.wrap-layout .article-image {
    float: none;
    max-width: 100%;
    margin: 10px auto;
}

.article-image img {
    max-width: 400px;
    min-width: 250px;
    margin-bottom: 20px;
}

}

/*|||||||||||||||||||||||||||||||||       MOBIIILI KOKO       |||||||||||||||||||||||||||||||||||||||||*/

@media (max-width: 700px){

    /*================ Hampurilais menu puhelimelle ===================*/
.header {
    justify-content: space-between;
    padding-top: 20px;
    padding-right: 20px;
}

    /*Näytä ikoni mobiilissa*/
.nav-toggle-label img {
    width: 40px;      /* adjust size */
    height: auto;
    display: block;
    cursor: pointer;
}

.nav-toggle-label {
    display: flex;
    align-items: center;
}

    /* Piilota normaali nav-valaikko mobiilissa oletuksena */
.nav {
    position: absolute;
    top: 100%;        /* just below header */
    left: 0;
    right: 0;
    background-color: rgba(29, 41, 40, 0.5);
    /*Navi avautuu smoothisti pikkuhiljaa*/
    max-height: 0;    /* alkaa sulkeutuneena */
    overflow: hidden; /* Piilota menu avautuessaan */
    opacity: 0;
    transform: translateY(-10px);
    transition:
    max-height 0.4s ease,
    opacity 0.4s ease,
    transform 0.4s ease;
    z-index: 10;
}

.nav-list {
    flex-direction: column;
    align-items: center;
}

.nav-list li {
    margin: 5px;
}

.nav-list li img {
    display: block;
    padding: 10px 20px;
}

    /* kun checkbox on true, avaa smootisti */
.nav-toggle:checked ~ .nav {
    max-height: 100vh;        /* tarpeeksi iso näyttämään kaikki linkit */
    opacity: 1;
    transform: translateY(0);
}

/* Kun burger on auki → header saa taustan */
.header:has(.nav-toggle:checked) {
    background-color:  rgba(29, 41, 40, 0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.artikkelilista {
    text-align: left;
}


/*======================== HAMPURILAIS VALIKON ASETUKSET LOPPUU TÄHÄN =================*/

/*SÄÄTÖJÄ PUHELIMILLE*/

.logo {
    display: none;
}

.phone-logo {
    display: flex;
}

.header {
    justify-content: flex-end;
}

button {
    border-radius: 0;
}

/*fontti*/
h1 {
    font-size: 1.8rem;
    text-align: center;
}

body {
    font-size: 1.3rem;
    line-height: 1.6;
    padding-top: 0px;
}

  article {
    max-width: 100%;
    margin: 0;
    padding: 20px;
  }

  /* make contact page container full width too */
  .contact-article {
    max-width: 100%;
    margin: 0;
    padding: 20px;
  }

  /* keep small side breathing room for the cards */
  .contact-cards {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .contact-card {
    width: 100%;
    max-width: none;     /* IMPORTANT: remove the 500px cap */
    margin: 0;
  }


/*Padding ja gap pieneksi puhelimella, jotta ei sivuttais skrollausta tule*/
.kontentti-artikkeli {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px;
}

.wrap-layout {
    display: block;
}

.wrap-layout .article-image {
    float: none !important;
    max-width: 100%;
    margin: 0 auto;
}

.wrap-layout .article-image img {
    width: 100%;
    height: auto;
    display: block;
}

.article-text {
    width: 100%;
    text-align: center; /* optional */
}

.article-image img {
    max-width: 100%;
    min-width: 250px;
}

/*FOOTER FLEXILLÄ ALLEKKAIN*/
.footernav-list {
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.versio {
    align-self: center;
}
}

.ticket {
  -webkit-mask:
    radial-gradient(circle 25px at 0 0, transparent 98%, black) top left,
    radial-gradient(circle 25px at 100% 0, transparent 98%, black) top right,
    radial-gradient(circle 25px at 100% 100%, transparent 98%, black) bottom right,
    radial-gradient(circle 25px at 0 100%, transparent 98%, black) bottom left;

  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;

  mask:
    radial-gradient(circle 25px at 0 0, transparent 98%, black) top left,
    radial-gradient(circle 25px at 100% 0, transparent 98%, black) top right,
    radial-gradient(circle 25px at 100% 100%, transparent 98%, black) bottom right,
    radial-gradient(circle 25px at 0 100%, transparent 98%, black) bottom left;

  mask-size: 51% 51%;
  mask-repeat: no-repeat;
}

/* { outline: 1px solid red !important; }