@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation-Bold.eot');
    src: local('Sansation Bold'), local('Sansation-Bold'),
        url('../fonts/sansation/Sansation-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sansation/Sansation-Bold.woff2') format('woff2'),
        url('../fonts/sansation/Sansation-Bold.woff') format('woff'),
        url('../fonts/sansation/Sansation-Bold.ttf') format('truetype'),
        url('../fonts/sansation/Sansation-Bold.svg#Sansation-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation-Italic.eot');
    src: local('Sansation Italic'), local('Sansation-Italic'),
        url('../fonts/sansation/Sansation-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sansation/Sansation-Italic.woff2') format('woff2'),
        url('../fonts/sansation/Sansation-Italic.woff') format('woff'),
        url('../fonts/sansation/Sansation-Italic.ttf') format('truetype'),
        url('../fonts/sansation/Sansation-Italic.svg#Sansation-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation-BoldItalic.eot');
    src: local('Sansation Bold Italic'), local('Sansation-BoldItalic'),
        url('../fonts/sansation/Sansation-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sansation/Sansation-BoldItalic.woff2') format('woff2'),
        url('../fonts/sansation/Sansation-BoldItalic.woff') format('woff'),
        url('../fonts/sansation/Sansation-BoldItalic.ttf') format('truetype'),
        url('../fonts/sansation/Sansation-BoldItalic.svg#Sansation-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation-Light.eot');
    src: local('Sansation Light'), local('Sansation-Light'),
        url('../fonts/sansation/Sansation-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sansation/Sansation-Light.woff2') format('woff2'),
        url('../fonts/sansation/Sansation-Light.woff') format('woff'),
        url('../fonts/sansation/Sansation-Light.ttf') format('truetype'),
        url('../fonts/sansation/Sansation-Light.svg#Sansation-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation-Regular.eot');
    src: local('Sansation Regular'), local('Sansation-Regular'),
        url('../fonts/sansation/Sansation-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sansation/Sansation-Regular.woff2') format('woff2'),
        url('../fonts/sansation/Sansation-Regular.woff') format('woff'),
        url('../fonts/sansation/Sansation-Regular.ttf') format('truetype'),
        url('../fonts/sansation/Sansation-Regular.svg#Sansation-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation-LightItalic.eot');
    src: local('Sansation Light Italic'), local('Sansation-LightItalic'),
        url('../fonts/sansation/Sansation-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/sansation/Sansation-LightItalic.woff2') format('woff2'),
        url('../fonts/sansation/Sansation-LightItalic.woff') format('woff'),
        url('../fonts/sansation/Sansation-LightItalic.ttf') format('truetype'),
        url('../fonts/sansation/Sansation-LightItalic.svg#Sansation-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
   
    padding-left: 0;
    padding-right: 0;    
}
#g-mainbar {

    padding: 3rem 0 0 0;
}
#g-navigation .g-main-nav .g-toplevel {
    line-height: 4;
}

/* 1. PERUSASETUKSET JA KIRJASIN */
body {
    /* Käytetään selkeitä päätteettömiä fontteja, jotka ovat helppoja lukea */
    font-family: Lato, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6; /* Lisää ilmaa rivien väliin -> helpompi lukea */
    color: #333; /* Tummanharmaa on silmälle pehmeämpi kuin täysin musta */
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* 2. OTSIKOIDEN TYYLIT */
h1, h2, h3 {
    color: #612023; 
    line-height: 1.2;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2.2rem; /* Pääotsikko on selkeästi suurin */
}

h2 {
    font-size: 1.8rem;
}
h3 {
    font-size: 1.6rem;
}
h4 {
    font-size: 1.4rem;
}

h5 {
    font-size: 1.2rem;
}

/* 3. LEIPÄTEKSTI JA LISTAT */
p {
    margin-bottom: 1.2em; /* Sopiva väli kappaleiden välillä */
}

ul, ol {
    margin-bottom: 1.2em;
    padding-left: 1.5em;
}

li {
    margin-bottom: 0.5em;
}

/* 4. LAINAUKSET JA NOSTOT (kuten "Tavoitteenani on...") */
blockquote {
    font-style: italic;
    border-left: 4px solid #1a4a5e;
    margin: 1.5em 0;
    padding: 0.5em 1.5em;
    background-color: #f9f9f9;
}

/* 5. LIHAVOINNIT */
strong {
    font-weight: 600;
}

/* 6. RESPONSIIVISUUS (mobiililaitteet) */
@media (max-width: 600px) {
    body {
        font-size: 16px; /* Hieman isompi perusfontti kännykälle */
        padding: 15px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
}

#g-footer a {
  color: #FFF;
  text-decoration: underline;
  text-underline-offset: 5px;
  }
#g-footer a:hover {
  color: #FFF;
  text-decoration: none;
  }
  
  .sppb-addon-single-image-container {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    transition: all .4s ease;
}

.sppb-addon-single-image-container {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    
    /* Syvyys */
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.08);

    /* Hieno kehys */
    border: 1px solid #FFFFFF;

    /* Taustaväri fallback */
    background: #111;

    transition: all .4s ease;
}

/* Kuva */
.sppb-addon-single-image-container img {
    display: block;
    width: 100%;
    height: auto;

    /* Kevyt värien viimeistely */
    filter: contrast(1.05) saturate(1.05);

    transition: transform .6s ease;
}

/* Hienovarainen sävy-overlay */
.sppb-addon-single-image-container::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.05),
        rgba(0,0,0,0.2)
    );

    pointer-events: none;
}
/* Satunnainen kallistus käyttää CSS-muuttujaa */
.sppb-addon-single-image-container {
    transform: rotate(var(--tilt, 0deg));
}

/* Hover: suoristuu + pieni zoom */
.sppb-addon-single-image-container:hover {
    transform: rotate(0deg) scale(1.02);
}
/* Perus transform muuttujilla */
.sppb-addon-single-image-container {
    transform:
        perspective(1200px)
        rotateZ(var(--tilt, 0deg))
        rotateX(var(--tiltX, 0deg))
        rotateY(var(--tiltY, 0deg))
        scale(var(--scale, 1));

    transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
}

/* Hover = “asettuu + nousee” */
.sppb-addon-single-image-container:hover {
    transform:
        perspective(1200px)
        rotateZ(0deg)
        rotateX(0deg)
        rotateY(0deg)
        scale(1.04);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.25),
        0 6px 20px rgba(0,0,0,0.12);
}

/* Kuva reagoi kevyesti */
.sppb-addon-single-image-container img {
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.sppb-addon-single-image-container:hover img {
    transform: scale(1.03);
}
.cc-trigger.cc-trigger-icon svg {
    width: 30px !important;
}