/*
Theme Name: ClubNord
Theme URI: https://sarmantti.fi
Author: Arttu Teronen
Author URI: https://sarmantti.fi
Description: An accessible theme for general use. WooCommerce-ready. Translation ready.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.1.2
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hotelivalo
*/

.maps {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.faq p {
	color: white;
}

.faq a {
	color: var(--wp--preset--color--accent-2);
	text-decoration: var(--wp--preset--color--accent-2);
	text-decoration-line: underline;
}

.buuutton:hover .wp-block-button__link {
	color: var(--wp--preset--color--accent-2);
}

:root :where(.wp-block-button .wp-block-button__link:hover) {
	transform: none !important;
	filter: none !important;
	transition: color 200ms ease-in-out !important;
}

.wp-block-button.is-style-hotelivalo-button-variation-1:hover a.wp-block-button__link,
.wp-block-button.is-style-hotelivalo-button-variation-1:active a.wp-block-button__link,
.wp-block-button.is-style-hotelivalo-button-variation-1:focus a.wp-block-button__link {
    color: var(--wp--preset--color--accent-2);
}


.wp-block-button.is-style-hotelivalo-button-variation-2:hover a.wp-block-button__link,
.wp-block-button.is-style-hotelivalo-button-variation-2:active a.wp-block-button__link,
.wp-block-button.is-style-hotelivalo-button-variation-2:focus a.wp-block-button__link {
    color: var(--wp--preset--color--base);
}

.event-title {
	text-shadow: 0px 0px 25px rgba(0,0,0,0.75);
}

.event-tile img {
    transition:
	  transform 300ms ease-out,
	  filter 300ms ease-out;
	transform: scale(1.07);
}

.event-tile:hover img {
    transform: scale(1);
	filter: blur(3px);
}

.activitynav .wp-block-navigation .wp-block-navigation-item__content {
	font-weight: normal;
	text-transform: none;
	font-size: 17px;
    line-height: normal;
}

.activitynav .wp-block-navigation-item:not(:first-child) {
    border-style: none !important;
    padding-left: 0 !important;
}

.activitynav .current-menu-item,
.has-child>.current-menu-ancestor {
    text-decoration: underline;
}

@media screen and (max-width: 78.5em) {
    .footertext {
        text-align: center !important;
        align-self: center !important;
    }
    .footertitle {
        text-align: center !important;
        width: 100% !important;
        margin-top: 20px !important;
    }
	.wp-block-site-logo img {
	max-width: 120px;
	}
	.wp-block-navigation__responsive-container.is-menu-open {
		padding-top: 89px !important;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		margin-right: -0.28em !important;
	}
	.activitylist {
		border-left-style: none !important;
		padding-left: 0px !important;
	}
}

header {
	max-width: 1200px;
	margin: auto;
}

.footerlogo{
	align-self: center;
}

.activitylist {
	border-color: #094FA3;
}

:root {
	--border-radius-min: 5%;
	--border-radius-med: 10%;
	--border-radius-max: 50%;

	--flex-10: 10%;
	--flex-20: 20%;
	--flex-30: 30%;
	--flex-40: 40%;
	--flex-50: 50%;
	--flex-60: 60%;
	--flex-70: 70%;
	--flex-80: 80%;
	--flex-90: 90%;
}

/*
div.grecaptcha-badge {
    display: none;
}*/

* {
	box-sizing: border-box;
}

/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;

	@view-transition {
		navigation: auto;
	}
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;

		/* Turn off any transition
		*/
		-webkit-transition: none !important;
		-moz-transition: none !important;
		-o-transition: none !important;
		transition: none !important;
	}
	/* Turn off view-transitions
	*/
	@view-transition {
		navigation: none!important;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

.color-1 {
	background: #579557;
	background: oklch(61.17% 0.1119 144.06);
}


.color-2 {
	background: #bce36e;
	background: oklch(86.34% 0.1511 124.75);
}

.color-3 {
	background: #9ccdb9;
	background: oklch(80.81% 0.0586 167.89);
}

.color-4 {
	background: #fcfffa;
	background: oklch(99.64% 0.00726707422221069 132.41283633702847);
}

.color-5 {
	background: #2F4F4F;
	background: oklch(40.3% 0.0377 195.76);
}

.color-6 {
	background: #1a2119;
	background: oklch(23.78% 0.0182 141.61);
}

.error {
	background: #AB4E52;
	background: oklch(54.28% 0.1223 19.41);
}
.success {
	background: #00A550;
	background: oklch(63.17% 0.16968429530538884 151.06699503363475);
}
.warning {
	background: #E69F64;
	background: oklch(75.96% 0.1134 59.62);
}


/*
**	NAMED GRID AREAS
*/

div.site-header {
	grid-area: header;
}

div.site-main {
	grid-area: main;
}

div.site-footer {
	grid-area: footer;
}

div.wp-block-group:has(.is-style-vertical-text) {
	grid-area: vertical-heading;
}

div.wp-block-group.is-style-card-stack {
	grid-area: card-stack;
}



/*
**	NAMED GRID AREAS - ADMIN VIEW
**	Grid areas for outermost layout when logged in
*/
div#wpadminbar {
	grid-area: wpadminbar;
}

div.wp-site-blocks {
	grid-area: wp-site-blocks;
}

/*
**	LAYOUT
**
*/
/* body div.wp-site-blocks {
	min-height: 100vh;
	min-height: 100dvh;
	min-height: 100svh;
	display: grid;
	grid-template-areas:
		"header"
		"main"
		"footer";
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;

} */

/*
**	LAYOUT
**	USER LOGGED IN
*/
/* :where(body.logged-in.admin-bar) div.wp-site-blocks  {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height))!important;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height))!important;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height))!important;
	display: grid;
        grid-template-areas:
        "wpadminbar"
        "wp-site-blocks"!important;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr !important;
} */

/*** No margin for the footer top on home page ***/
:where(body.home.page) footer.site-footer div.wp-block-group {
	margin-top: 0!important;
}

:where(body.home.page) :where(h1) {
	text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;
}

.hero-cover :where(h1, h2, h3, h4, h5, h6) {
    text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;
}

.is-content-fit-content {
	max-width: fit-content!important;
}

.is-margin-inline-none {
	margin-inline: 0!important;
	justify-content: space-evenly;
	width: 100%;
}

.margin-inline-auto {
	margin-inline: auto!important;
}

.is-justify-self-center {
	justify-self: anchor-center;
}

.is-content-max-width-40 {
	max-width: 40ch;
}

.align-content-center {
    align-content: center;
}

.no-text-wrap {
	text-wrap: nowrap;
}

#openSearch {
    :where(.icon-container) {
        width: clamp(1.5em, 2.5vw, 2em)!important;
    }
}

.is-style-letter-bg {
	background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position-x: right!important;
    width: 100%!important;
}

@media screen and (max-width: 37.5em) {
	.is-style-grid-cols-one {
		grid-template-columns: 1fr!important;
	}
}

.list-style-none {
	list-style-type: none;
	padding-left: 0;
	text-wrap: pretty;
}

.wp-block-list.list-style-none {
    list-style-type: none!important;
    padding-left: 0;
    text-wrap: pretty;

    &li {
        list-style-type: none;
    }
}

.text-wrap-pretty {
	text-wrap: pretty;
}

.is-style-icon-img img {
    width: 3em;
}

.object-fit-contain img {
	object-fit: contain!important;
}

/***RESERVATION BUTTON***/
li.wp-block-navigation-item.reservation-btn {
	background: var(--wp--preset--color--accent-4);
	text-align: center;
	padding-inline: 1em;
	padding-block: 0.5em;
	margin-right: 1em;
}

[data-wpml="current-language-item"] {
    span, a {
        text-decoration: underline;
    }
}

/* Zero margin for the last block in site */
:where(.wp-site-blocks) > :last-child {
	margin-block-start: 0!important;
    margin-block-end: 0;
    /* padding-top: 60px; */
}

/* Transition time and type for each link and input element except Site Title */
.wp-element-button, button, input, textarea, a:where(:not(.wp-block-site-title)) {
    transition: 0.3s ease-in-out;
}

.has-shadow-accent {
	filter:drop-shadow(0 0.5em 1em var(--wp--preset--color--accent-2));
}

/****************/
/***NAVIGATION***/
/****************/

.wpml-language-switcher-navigation-block {
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: var(--wp--preset--font-size--nav-font);
	font-weight: 700;
	text-decoration: none;

	[data-wpml='language-item']:first-of-type {
		margin-top: 0!important; 
	}
}

nav.lang-select.wp-block-navigation {
	width: 100%;
	gap: 0.1em;
	margin-bottom: 0.5em;

	.wp-block-navigation-item {
		border: none!important;
		padding-left: 1em !important;
	}
}


/* ul.main-navigation {
	min-height: 3em;
} */

.main-navigation {
	.wp-block-navigation-item {
		min-height: 2em!important;
	}

	:where(.is-menu-open) ul.wp-block-navigation__container.is-responsive.main-navigation {
		margin: 0 auto!important;
	}
	/* :where(.is-menu-open) .wp-block-navigation__responsive-container-content {
		padding-top:0!important;
	} */
	/* Navigation changes to make the outerskirts of mobile nav transparent.
	** Old style is above this comment
	** Changes between lines 311-335
	** Arttu Teronen | Sarmantti Oy | 2025-04-22
	*/

	.wp-block-navigation__responsive-container.is-menu-open { 
		padding-top: 124px;
	}
	:where(.is-menu-open) .wp-block-navigation__responsive-container-content {
		padding-block: 2em !important;
		background-color: var(--wp--preset--color--base);
        border: 1px solid black;
		box-shadow: var(--wp--preset--shadow--natural);
	}
	:where(.is-menu-open) {
		/* padding-top: 4em!important; */
		background-color: transparent!important;
	}

	:where(.is-menu-open) .wp-block-navigation__responsive-container-close {
		right: 2em;
		padding-top: 2em;
	}
}

nav.is-responsive.main-navigation:has(.is-menu-open) button.wp-block-navigation__responsive-container-open {
	color: transparent!important;
}


/* .wp-block-navigation__responsive-dialog {
	position: absolute;
	top: 0;
	left: 0;
	justify-self: anchor-center;
	width: 60%;
} */

/*** CAROUSEL ***/
.wp-block-cb-carousel {
	margin-top: 0!important;

	.slick-slide {
		padding-inline: 0!important;
	}
}

.slick-dots {
	bottom: 1em;
}

.hi-carousel-wrapper {
	position: relative!important;
}

.absolute-heading-wrapper {
	position: absolute!important;
    z-index: 999!important;
    width: 100%!important;
    height: 100%!important;
    min-width: 100%!important;
}

.hide-element {
	display: none!important;
	pointer-events: none!important;
}
.hide-on-desktop {
	display: none !important;
	pointer-events: none !important;

	@media (max-width: 78.5em) {
		display: block!important;
		pointer-events: auto!important;
	}
}

/*
* Make mobile navigation menu appear sooner than the screen width of 600px
*/
@media ( min-width: 78.5em ) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: block !important;
    }

    /* If site logo included in the nav item ul */
    /* .wp-block-navigation-item:not(:first-child, :nth-child(2)) {
        border-left: 0.0625em solid rgb(9, 79, 163) !important;
        padding-left: 1em !important;
    } */
	.wp-block-navigation-item:not(:first-child) {
		border-left: 0.0625em solid rgb(9, 79, 163)!important;
		padding-left: 1em!important;
	}
}
@media ( min-width: 37.5em ) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: none;
    }
}

@media ( max-width: 37.5em ) {

    div.entry-content > .wp-block-group > .wp-block-group > .wp-block-columns > .wp-block-column > .wp-block-group:has(p, ul, li) {
        padding-inline: 0em!important;
    }

	.is-hidden-on-mobile {
		display: none!important;
		pointer-events: none!important;
	}

	.lead-columns {
		.wp-block-column:nth-of-type(1) {
			/* flex-basis: var(--flex-10)!important; */
            display: none!important;
		}
		.wp-block-column:nth-of-type(2) {
			flex-basis: var(--flex-90)!important;
		}
	}

	/* form.wpcf7-form label, form.wpcf7-form input, form.wpcf7-form span {
		max-width: 14.5em!important;
	} */

    form.wpcf7-form {
        justify-content: center;

        :where(label,input,span) {
            display: unset!important;
        }
    }

	.wpcf7-form-control {
		max-width: 100%!important;
	}

	.center-columns {
		flex-direction: column !important;
		justify-items: center !important;
		place-content: center !important;
	}

    /* :where(.wp-block-group:has(figure > table)) {
        padding-inline: 1em!important;
    } */

    /* .wp-block-table td:not(:nth-of-type(2)),
    .wp-block-table th {
        padding-right: 1em;
        text-wrap: nowrap;
    } */

    .wp-block-table {
        td:not(:nth-of-type(2)) {
            padding-right: 1em;
        }
        td, th {
            text-wrap:nowrap;
        }
    }

    :where(:not(.hero-cover, .restaurant-menu-button, .is-style-hotelivalo-letter-cover, .keep-min-height).wp-block-cover) {
        /* height: 25vh !important; */
        min-height: unset !important;
    }
    .restaurant-menu-outer-cover {
        justify-content: center!important;
        margin-inline: auto!important;
        overflow: visible;
        margin-bottom: 16em!important;

        .wp-block-cover__inner-container {
            .wp-block-columns {
                padding-right: 0!important;
                margin-bottom: 0!important;
                margin-top: unset!important;
            }
        }
    }

    .restaurant-menu-button {

        height: 10em !important;
        width: 10em !important;

        img.wp-block-cover__image-background {
            margin-left: 3.8em!important;
        }
    }

    .wp-block-cover__inner-container > .wp-block-columns:has(div.wp-block-cover.restaurant-menu-button) {
        position: absolute;
        /* top: 140%; */
        top: 8em;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    li.wp-block-navigation-item:has(.open-search) {
        padding-left: 0 !important;
        margin-bottom: 0.5em;
    }
}

@media (max-width: 460px) {
    .letter-v,
    .letter-a {
        & img.wp-block-cover__image-background {
            margin-left: 10em;
        }
    }

    li.wp-block-navigation-item.reservation-btn {
        margin-right: 0;
        margin-bottom: 0.5em;
        padding-block: unset;
    }

    .wp-block-group.is-vertical.is-layout-flex.wp-container-core-group-is-layout-4b827052.wp-block-group-is-layout-flex {
        margin-bottom: 0.5em;
    }
}

@media ( max-width: 78.5em ) {
	.is-space-between-mobile {
		justify-content: space-between!important;	
	}
	nav.main-navigation {
		width: 100%;
		justify-content: end;
	}
	:where(.wp-block-cover.hero-cover) {
		min-height: 40vh !important;
        max-height: 60vh !important;
	}
	:where(:not(.hero-cover, .restaurant-menu-button, .is-style-hotelivalo-letter-cover, .keep-min-height).wp-block-cover) {
		height: 40vh;
	}

	:where(.justify-left-mobile) {
		justify-content: left!important;
	}
	/* .order-reverse {
		flex-direction: column-reverse;
	} */

	.is-hidden-on-mobile {
		display: none!important;
		pointer-events: none!important;
	}

	.lead-columns {
		.wp-block-column:nth-of-type(1) {
			flex-basis: var(--flex-20)!important;
		}
		.wp-block-column:nth-of-type(2) {
			flex-basis: var(--flex-80)!important;
		}
	}

	/* form.wpcf7-form label, form.wpcf7-form input, form.wpcf7-form span {
		max-width: 22.5em;
	} */

	form.wpcf7-form {
		grid-template-areas:
			"your-name"
			"your-email"
			"your-message"
			"your-message"
			"contact-submit"
			"spinner"
			"response-output"!important;
	}

    .remove-bg-mobile {
        background-image: none !important;
    }

    .wp-block-cover.is-style-hotelivalo-letter-cover.letter-a > div > div:has(p) {
        max-width: 40ch!important;
        margin-left: 0!important;
    }
}

@media (max-width: 48.75em ) {
	.order-reverse {
			flex-direction: column-reverse;
	}
}

@media (max-width: 56em) {



    :where(body.page-template-haku.page) {
        h1  {
            text-wrap: pretty;
            padding-inline: 2em;
        }
    }
    .wp-block-search__inside-wrapper {
        width: 100% !important;
        display: inline-grid !important;
        gap: 0.5em !important;

        & .wp-block-search__button {
            margin-left: 0 !important;
        }
    }
}


.contacts-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr))!important;
    /* gap: 1em; */
}

/*** CONTACT FORM ***/
form.wpcf7-form > label, form.wpcf7-form > input, form.wpcf7-form > span {
	display: grid;
}

label.first-name {
	grid-area: first-name;
}
label.last-name {
	grid-area: last-name;
}
label.your-email {
	grid-area: your-email;
}
label.your-message {
	grid-area: your-message;
}
/* label.captcha {
	grid-area: captcha;
} */
input.wpcf7-submit {
	grid-area: contact-submit;
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
    border-radius: 0;
	border: none;
    font-family: var(--wp--preset--font-family--open-sans);
    font-size: var(--wp--preset--font-size--nav-font);
    font-weight: 700;
    padding-top: var(--wp--preset--spacing--no-clamp-small);
    padding-right: var(--wp--preset--spacing--no-clamp-small);
    padding-bottom: var(--wp--preset--spacing--no-clamp-small);
    padding-left: var(--wp--preset--spacing--no-clamp-small);
    text-decoration: none;
    text-transform: uppercase;
	max-width: 10em;
}
input.wpcf7-submit:hover,
input.wpcf7-submit:active,
input.wpcf7-submit:focus {
  color: var(--wp--preset--color--accent-2);
}
span.wpcf7-spinner {
	grid-area: spinner;
	place-self: anchor-center;
	grid-column:1;
}
div.wpcf7-response-output {
	grid-area: response-output;
	margin-inline: 0!important;
	margin-block: 0.5em!important;
}
form.wpcf7-form {
	display: grid;
	grid-template-areas:
		"your-name your-email"
		"your-message your-message"
		"your-message your-message"
		"contact-submit spinner"
		"response-output .";
	grid-template-columns: auto;
	grid-template-rows: auto;
	gap: 1em;
	margin-inline: auto;
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
}

.wpcf7-form-control {
	padding-block: 0.5em;
	font-size: var(--wp--preset--font-size--medium);
	width: 100%;
    filter: drop-shadow(2px 3px 8px rgba(0, 0, 0, 0.6));
    border: none;
}

/*** Details customization ***/
details {
	border: thin solid var(--wp--preset--color--accent-1);
}
details > p {
	margin-inline: 1em;
}
details > p:last-child {
	margin-block-end: 1em!important;

}

summary {
	font-size: var(--wp--preset--font-size--large);
	color: white;
	background-color: var(--wp--preset--color--accent-1);
	list-style-type: '+ ';
}

details[open] > summary {
	list-style-type: '\2006\2043\2005';
}

summary::marker {
	display: inline-block;
	font-size: var(--wp--preset--font-size--large);
	width: 1.5em;
}

/*** WP TABLE ***/

.wp-block-table td, .wp-block-table th {
	padding-block: 0;
    padding-left: 0;
    padding-right: 3em;
}

.wp-block-table td:nth-of-type(2) {
    padding-right: 0;
}

.wp-block-table tr {
	padding-block: 1em;
}

/*** FAQ ACCORDION ***/


.faq-accordion {
    display: none!important;
}
.wp-block-esab-accordion .esab__icon {
	margin-right: 1em;
}

.esab__heading_txt {
	font-family: var(--wp--preset--font-family--playfair-display);
	text-wrap-style: pretty;
}




/* .wp-block-group:has(.restaurant-menu-button) {
	margin-right: 2em;
} */

/* .wp-block-cover:has(.wp-block-cover.is-style-hotelivalo-letter-cover.restaurant-menu-button) {
	align-items: baseline;

	.wp-block-cover__inner-container {
		margin-top: 2em;
		margin-right: 2em;
	}
} */


.restaurant-menu-button {
	img.wp-block-cover__image-background {
		margin-right: auto;
		overflow: hidden;
		margin-left: 5em;
	}

    & .wp-block-cover__inner-container {
        height: 100%;
    }
}

.restaurant-menu-link {
    height: 100%;
    max-height: 100%;

    a {
        text-decoration: none;
        &:hover {
            text-decoration: none;
        }
    }
}

:where(.restaurant-menu-button) a:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: " ";
}
/*** SCROLL TO TOP BUTTON ***/

.scroll-to-top {
	position: fixed;
    bottom: 6em;
    right: 0.75em;
    z-index: 10000;
    opacity: 0;
    background-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--base);
    cursor: pointer;
    border-radius: 100%;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    transition: 0.5s;
    width: 2.5em;
    height: 2.5em;
    text-align: center;
    align-content: center;
	border: 0.06em solid;

	svg {
		fill: var(--wp--preset--color--base);
	}

	/* &:focus {
		outline: 2px solid var(--wp--preset--color--alys-black);
		outline-offset: 2px;
	} */

}

.show-back-to-top-btn {
	opacity: 1!important;		
	transform: translateY(0);
}

footer a:where(:not(.wp-element-button)) {
	text-decoration: underline 0.125em solid var(--wp--preset--color--accent-2);

	&:hover {
		text-decoration: underline 0.125em solid var(--wp--preset--color--base);
	}
}

.privacy-policy-link a {
	color: #777777!important;
	text-decoration: none!important;
    font-size: var(--wp--preset--font-size--small)!important;

	&:hover {
		color: var(--wp--preset--color--accent-2)!important;
		text-decoration: none!important;
	}
}

div.cmplz-document.cookie-statement.cmplz-document-eu {
    margin-block: 2em!important;
}


@media (max-width: 76em) {
	.wp-block-group:has(.distances-group, .hivalo-map) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.distances-group {
		grid-column: span 2;
	}

	.hivalo-map {
        img {
            width: 100%;
        }
    }
}

.width-100 {
	width: 100%;
	img {
		max-width: 100%!important;
		min-width: 100%!important;
	}
}