/* 
Theme Name:		 VYL teemasivusto
Description:	 Teemasivustojen pohja.
Author:			 La&La
Author URI:		 https://lala.fi
Template:		 vyl
Version:		 1.1
Text Domain:	 vyl-teemasivusto
*/


/*
    Add your custom styles here
*/

/* Variables
--------------------------------------------- */
:root {
    --font-family-serif: 'Instrument Sans', serif;
    --letter-spacing-h2: -0.01em;
    --letter-spacing-h1: -0.01em;
    --font-size-h1: 4.3rem;
    --color-main: #000;
}

/* Header
--------------------------------------------- */

.site-branding a {
    text-decoration: none;
}

.site-title {
    font-size: 5rem;
    margin: var(--padding-header) var(--padding-header) 40px var(--padding-header);
    font-weight: 500; 
    text-align: center;
}

.lala-hero-text {
    padding: 60px 80px 80px 80px;
    text-align: center;
    max-width: 1160px;
    font-size: 2.6rem;
}

.page-template-page-front .lala-hero-text p {
    font-size: 2.6rem;
    margin: 0;
}

.lala-hero {
    background: transparent;
    padding: 0;
	max-width: unset;
}

.lala-flexible-wrapper {
    background: transparent !important;
}

.lala-flexible {
    background: #fff;
    margin-bottom: var(--padding-main);
    padding: 0;
}

.lala-flexible .lala-flexible-text {
    padding: 40px var(--padding-main) 40px 0;
}

.page-template-page-front .site-main .kaksi-nostoa .lala-flexible {
    padding: 0;
   
}

/* Content
--------------------------------------------- */

.button, input[type="button"], input[type="reset"], 
input[type="submit"], .wp-block-button__link, .main-navigation,
.page-template-page-front .wp-block-button__link {
    background-color: #3AC276;
    color: #fff;
}


.button, input[type="button"], input[type="reset"], 
input[type="submit"], .wp-block-button__link,
.page-template-page-front .wp-block-button__link {
    border: 1px solid transparent;
}

a:hover, .page-template-page-front .wp-block-button__link:hover {
    color: inherit;
}

a.wp-block-button__link:hover {
    background: transparent;
    border: 1px solid;
    color: inherit;
}


.site-main, .site-footer {
    background: #F2EFEA;
    overflow: auto;
}

.main-navigation {
    background: var(--color-7);
}

.main-navigation ul#primary-menu > li:hover {
    background: transparent;
}

.lala-breadcrumbs {
    background: #BDEBD1;
 }   

.page-template-page-front .site-main .vapaa-nosto h2,
.page-template-page-front .site-main .kaksi-nostoa h2{
    text-transform: none;
    font-size: 3.6rem;
    line-height: 1.02;
    margin: 0 0 25px 0;
}

.page-template-page-front .site-main .kaksi-nostoa .lala-flexible,
.page-template-page-front .site-main .kaksi-nostoa {
    background: transparent !important;
}

.page-template-page-front .site-main .kaksi-nostoa .lala-flexible > * {
    display: block;
}


/* Footer */

.site-footer {
    color: var(--color-main)
}

.site-info {
    border-top: 1px solid;
    padding-left: 0;
    padding-right: 0;
}

.footer-5 {
    padding: 0;
}

.footer-5 .gallery img {
	filter: brightness(0);
}
        
.wp-block-lala-blocks-lala-infobox-with-title {
    background: #fff;
}

.lala-hero .lala-flexible-image img {
	max-height: 425px;
}

@media screen and (min-width: 1441px) {

	.lala-hero .lala-flexible-text {
		padding: inherit;
		max-width: inherit;
	}

	.lala-hero .lala-flexible-left {
		justify-content: inherit;
	}

	.lala-hero .lala-flexible-right {
		padding: 0;
		margin-right: 0;
	}
	
	.lala-hero .lala-flexible-image {
		width: 100%;
	}
	
	.lala-hero .lala-flexible-image img {
		aspect-ratio: inherit;
		display: block;
		object-fit: cover;
	}

}


@media screen and (max-width: 1560px) {
    .site-footer, .site-main > * {
        padding-left: var(--padding-main);
        padding-right: var(--padding-main);
    }
    .lala-hero {
        margin-left: calc(var(--padding-main) * -1);
        margin-right: calc(var(--padding-main) * -1);
    }
    
} 

@media screen and (max-width: 919px) {

    .main-navigation li.focus > a {
        background: var(--color-main);
    }

    .lala-flexible .lala-flexible-text {
        padding: var(--padding-main);
    }

    .lala-flexible-right {
        margin: 0
    }

    .lala-hero img {
        aspect-ratio: 2/1;
        object-fit:cover;
    }

}


@media screen and (max-width: 600px) {
    .lala-hero-text {
        padding: 20px 40px 40px 40px;
    }

    .page-template-page-front .lala-hero-text p {
        font-size: 1.7rem;
    } 
    .page-template-page-front .site-main .vapaa-nosto h2,
    .page-template-page-front .site-main .kaksi-nostoa h2{ 
        font-size: 3.2rem;
    }

    .content-area > .subpage-menu {
        margin-bottom: 0;
        margin-top: 40px;
    }

    .site-title {
        font-size: 3.6rem;
    }
}