/* ------------------------------------------------------------- */
/*	HEADER & MEGAMENU – RAKENNE                                  */
/* ------------------------------------------------------------- */

#tt-header {
	user-select: none;
}

.megamenu {
	position: relative;
	z-index: 1000;
	width: 100%;
	padding-top: 30px;
}

/* -------- Header‑wrapperit -------- */
.tt-main-menu-holder,
.tt-main-menu-inner,
.tt-main-menu-content {
	position: relative;
	z-index: 1001;
	background-color: transparent;
}

/* Header‑sisus keskelle ja täyteen leveyteen */
.tt-header-inner {
	display: flex;
	justify-content: center;	/* keskittää .tt-header-col */
	width: 100%;
	align-items: center;
}

/* Header‑kolumni täysleveäksi ja keskelle naville */
.tt-header-col {
	flex: 1 1 100%;
	display: flex;
	justify-content: center;	/* keskittää nav-grid */
	align-items: center;
}

/* Poistetaan alkuperäinen vasen push */
.tt-header-col:first-child {
	margin-right: 0;
}

/* Headerin tausta valkoiseksi megamenun ollessa auki */
body.megamenu-open header {
	background-color: #fff;
}

#menu-paavalikko-left {
	margin-left: auto;
}

/* ------------------------------------------------------------- */
/*	PÄÄTASON LINKIT                                              */
/* ------------------------------------------------------------- */

.megamenu .tt-main-menu-list > li > a {
	color: #fff;
	position: relative;
	z-index: 1001;
	text-transform: uppercase;
}

body.megamenu-open .tt-main-menu-list > li > a {
	color: #192232 !important;
}


.megamenu-trigger {
	cursor: default;
	display: inline-block;
	text-decoration: none;
}

/* -------- Linkkityylit yhtenäiset -------- */

.tt-main-menu-list > li {
	padding: 2.5rem 1rem;
}

.tt-main-menu-list > li > a {
	display: inline-block;
	line-height: 1;
	vertical-align: middle;
	display: inline;
	padding: 0;
	
}

/* ------------------------------------------------------------- */
/*	MEGAMENU‑PANEELI                                             */
/* ------------------------------------------------------------- */

.megamenu {
	position: relative;
	z-index: 1000;
}

/* -------- Header‑wrapperit -------- */
.tt-main-menu-holder,
.tt-main-menu-inner,
.tt-main-menu-content {
	position: relative;
	z-index: 1001;
	background-color: transparent;
}

.tt-header-inner {
	display: flex;
	justify-content: center;
	width: 100%;
	align-items: center;
}

.tt-header-col {
	flex: 1 1 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tt-header-col:first-child {
	margin-right: 0;
}

/* Headerin tausta valkoiseksi megamenun ollessa auki */
body.megamenu-open header {
	background-color: #fff;
}

/* Päätason linkit */
.megamenu .tt-main-menu-list > li > a {
	color: #fff;
	position: relative;
	z-index: 1001;
	font-size: 12px;
}

body:not(.page-header-on) .tt-main-menu-list > li > a,
body.megamenu-open .tt-main-menu-list > li > a,
body.scrolled-down .tt-main-menu-list > li > a {
	color: #192232 !important;
}

/* Linkkien hoverit pois */
.megamenu .tt-main-menu-list > li > a:hover {
	color: inherit;
}

.megamenu-trigger {
	display: inline-block;
	text-decoration: none;
}

/* Linkkityylit */
.tt-main-menu-list > li {
	padding: 2.5rem 1rem;
}

.tt-main-menu-list > li > a {
	display: inline;
	line-height: 1;
	vertical-align: middle;
	padding: 0;
}

/* Megamenu-paneeli */
.megamenu-panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	background-color: #fff;
	display: none; /* PIILOTUS: ei vie tilaa eikä näy */
	opacity: 0;
	transform: none;
	z-index: 1000;
	padding: 2.5rem 2rem 6rem 2rem;
	box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.05);

	overflow-y: auto;
	max-height: calc(100vh - 94px);

	transition: opacity 0.25s ease;
}

.megamenu-item.open > .megamenu-panel {
	display: block;     /* TAI grid/flex jos käytät sitä sisällä */
	opacity: 1;
}

.megamenu-panel .tt-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	max-width: 1400px;
	margin: 0 auto;
}

.megamenu-panel .tt-row.no-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.megamenu-panel h4 {
	font-size: 1.1rem;
	font-weight: 500;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	color: #192232;
}

.megamenu-panel p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #192232;
	margin-bottom: 1rem;
}

.megamenu-panel ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/*.megamenu-panel li {
	margin-bottom: 0.5rem;
}*/

.megamenu-panel a {
	text-decoration: none;
	font-weight: 600;
}

.megamenu-panel a:hover {
	text-decoration: underline;
}

.megamenu-panel img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	margin-bottom: 1rem;
}

/* ------------------------------------------------------------- */
/* SPLIT‑MENU KESKITYS GRIDILLÄ */
/* ------------------------------------------------------------- */

.split-menu {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	pointer-events: auto;
}



.left-menu,
.right-menu {
	display: flex;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.left-menu  { justify-self: end; }
.right-menu { justify-self: start; }

.tt-logo-center {
	/*margin: 0 2rem;*/
	z-index: 1002;
	flex-shrink: 0;
}

.tt-logo-center [data-role="logo"] {
	display: none;
	transition: all 200ms ease-in-out;
}

.tt-logo-center .logo-white {
	display: block;
}

.tt-logo-center [data-role="logo"]:hover {
	transform: scale(1.1);
}

body:not(.page-header-on) .tt-logo-center .logo-white,
body.megamenu-open .tt-logo-center .logo-white,
body.scrolled-down .tt-logo-center .logo-white {
	display: none;
}

body:not(.page-header-on) .tt-logo-center .logo-gold,
body.megamenu-open .tt-logo-center .logo-gold,
body.scrolled-down .tt-logo-center .logo-gold {
	display: block;
}

.tt-logo-center img[data-role="logo"] {
	width: 65px;
	height: auto;
}

/* Alleviivaukset megamenu-linkille */
.megamenu-item.open > a {
	position: relative;
}

.megamenu-item.open > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -12px;
	width: 100%;
	height: 1px;
	background-color: #cc9b65;
	transition: width 0.2s ease-in-out;
}

/* Ei-megamenu-linkkien hover ja aktiivinen */
.menu-item:not(.megamenu-item):hover > a,
.menu-item:not(.megamenu-item).current-menu-item > a {
	position: relative;
}

.menu-item:not(.megamenu-item):hover > a::after,
.menu-item:not(.megamenu-item).current-menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -12px;
	width: 100%;
	height: 1px;
	background-color: #fff;
	transition: width 0.2s ease-in-out;
}

/* alleviivaukset tummalla, jos sivua on skrollattu */
body:not(.page-header-on) .menu-item:not(.megamenu-item):hover > a::after,
body.scrolled-down .menu-item:not(.megamenu-item):hover > a::after,
body.scrolled-down .menu-item:not(.megamenu-item).current-menu-item > a::after {
	background-color: #cc9b65;
}

/* Alkuviivan piilotus */
.menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -12px;
	width: 0;
	height: 1px;
	background-color: transparent;
	transition: width 0.2s ease-in-out;
}

.megamenu-panel .col-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.megamenu-panel .col-image-wrapper {
	aspect-ratio: 1 / 1;
	width: 100%;
	overflow: hidden; /* pysyvä, ei pelkästään hoverilla */
	margin-bottom: 15px;
	position: relative;
}

.megamenu-panel .tt-col-12:hover .col-image {
	transform: scale(1.05);
}

/* Alkuasetus: blur */
.megamenu-panel .tt-row .col-image {
	/*filter: blur(3px);*/
	/*animation: sharpen 1.5s ease forwards;*/
}

/* Animaatio blur → tarkka */
/*@keyframes sharpen {
	from {
		filter: blur(3px);
	}
	to {
		filter: blur(0px);
	}
}*/

/* Alkuasetus: sarakkeet piiloon ja siirtyneenä alas */
.megamenu.mm-active .tt-row .tt-col-12 {
	opacity: 0;
	transform: translateY(20px);
	animation: tt-megamenu-rise 0.5s ease-out forwards;
}

/* Animaatio määrittely */
@keyframes tt-megamenu-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Wave-viiveet sarakkeille */
.megamenu.mm-active .tt-row .tt-col-12:nth-child(1) {
	animation-delay: 0s;
}
.megamenu.mm-active .tt-row .tt-col-12:nth-child(2) {
	animation-delay: 0.07s;
}
.megamenu.mm-active .tt-row .tt-col-12:nth-child(3) {
	animation-delay: 0.14s;
}
.megamenu.mm-active .tt-row .tt-col-12:nth-child(4) {
	animation-delay: 0.21s;
}
.megamenu.mm-active .tt-row .tt-col-12:nth-child(5) {
	animation-delay: 0.28s;
}
.megamenu.mm-active .tt-row .tt-col-12:nth-child(6) {
	animation-delay: 0.35s;
}

.megamenu-panel h4 {
	text-transform: uppercase;
	font-size: 12px;
	margin-bottom: 15px;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	position: relative;
}

.megamenu-panel h4 a:hover {
	text-decoration: none !important;
}

.megamenu-panel h4 a {
	position: relative;
	display: inline-block;
}

.megamenu-panel h4 a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.megamenu-panel .tt-col-12:hover h4 a::after {
	transform: scaleX(1);
}

.megamenu-panel .tt-col-12:hover h4::after {
	transform: scaleX(1);
}


.megamenu-panel h4 i {
	font-size: 0.85em;
	position: relative;
	top: 0;
	left: 6px;
}

.megamenu-panel h5 {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 0;
}


.megamenu-panel p {
	font-size: 12px;
}

.megamenu-contact-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.megamenu-contact-row .tt-col-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.megamenu-contact-row h4,
.megamenu-contact-row h5 {
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 1rem;
	text-transform: uppercase;
	color: #192232;
}

.megamenu-contact-row p {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #192232;
	margin-bottom: 1rem;
}

.megamenu-contact-row a {
	color: #0073aa;
	text-decoration: none;
}

.megamenu-contact-row a:hover {
	text-decoration: underline;
}

/* Nappi-tyyli linkeille */
.megamenu-button {
	display: inline-block;
	margin-top: 0.5rem;
	margin-bottom: 1.5rem;
	padding: 0.8em 2em;
	border: 0px solid #192232;
	border-radius: 50px;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	background: #c69660;
	color: #ffffff;
	transition: all 0.3s ease;
	width: 230px;
	text-align: center;
	white-space: nowrap;
}

.megamenu-button i {
	margin-left: 0.5em;
}

.megamenu-button:hover {
	background-color: #192232;
	color: #fff;
	text-decoration: none !important;
}

/* Sosiaalinen media */
.social-icons {
	display: flex;
	gap: 1.5rem;
	margin-top: 1rem;
}

.social-icons a {
	font-size: 1.4rem !important;
	color: #cc9b65 !important;
	transition: color 0.3s ease;
}

.social-icons a:hover {
	color: #192232 !important;
}

.follow-us {
	margin-top: 2.5rem;
	font-size: 0.6rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #666;
}

.megamenu-panel strong,
.megamenu-panel strong a {
	font-weight: 600 !important;
}

.megamenu-panel .contact-info {
	padding-left: 165px;
}

.megamenu-panel .contact-info p {
	line-height: 1.7em;
}

.megamenu-panel .contact-info a:not(.megamenu-button) {
	text-decoration: none !important;
	border-bottom: none !important;
}

.megamenu-panel .info-links {
	padding-left: 44px;
}

.megamenu-panel .info-links > ul:not(.social-icons) > li > a {
	color: #192232;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	text-underline-offset: 5px;
	position: relative;
	display: inline-block;
	padding-right: 1.2em; /* tilaa nuolelle */
	transition: all 0.3s ease;
}

.megamenu-panel .info-links > ul:not(.social-icons) > li > a::after {
	content: "\f061"; /* Font Awesome arrow-right */
	font-family: "Font Awesome 6 Pro"; /* tai "Font Awesome 6 Free" */
	font-weight: 300; /* käytä 900 jos solid-tyyli */
	position: absolute;
	right: -5px;
	top: calc(50% + 2px);
	transform: translateY(-50%) translateX(-5px) scaleX(0);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	font-size: 12px;	
}

.megamenu-panel .info-links ul li a:hover::after {
	transform: translateY(-50%) translateX(0) scaleX(1);
	opacity: 0.8;
}

/*body.megamenu-open {
	position: fixed;
	width: 100%;
	overflow-y: scroll;
}*/

/* MEGA MENU PÄÄTTYY ------------------------------------------------------------------------------- */

/* Headerin Book Now (yms) -napit */

.tt-header-utility-wrapper {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 2rem;
	/*padding-left: 9.1rem;*/
}

.tt-header-utility {
	position: absolute;
	/*display: flex;
	align-items: center;*/
	gap: 1.25rem;
	font-size: 12px;
}

.tt-header-utility-left {
	/*left: 117px;*/
	left: 5vw;
	top: 42px;
	font-size: 12px;
	font-weight: 600;
	/*justify-content: flex-start;*/
	transition: all 0.3s ease;
}

.tt-header-utility-left .lang-switch {
	margin-right: 30px;
}

.tt-header-utility-right {
	right: 20px;
	top: 32px;
	/*justify-content: flex-end;*/
}

.lang-switch,
.location-icon {
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.lang-switch:hover,
.location-icon:hover {
	opacity: 0.7;
}

.location-icon {
	transform: translateX(1.5rem);
}

/* BOOK NOW -nappi */
.btn-booknow {
	display: inline-block;
	border: 1px solid #fff;
	padding: 0.7rem 3.5rem;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	color: #fff;
	text-decoration: none;
	transition: all 0.3s ease;
	white-space: nowrap;
	margin-right: 0;
	margin-left: -1rem;
	border-radius: 50px;
	transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

.btn-booknow:hover {
	background-color: #c69660;
	border-color: #c69660;

}

.btn-booknow:active {
  transform: translateY(1px); /* nappi “uppoaa” */
}

body:not(.page-header-on) .btn-booknow,
body.page-header-on.scrolled-down .btn-booknow,
body.megamenu-open .btn-booknow {
	border-color: #192232;
	color: #192232;
}

body:not(.page-header-on) .btn-booknow:hover,
body.page-header-on.scrolled-down .btn-booknow:hover,
body.megamenu-open .btn-booknow:hover {
	border-color: #c69660;
	background: #c69660;
	color: #fff;
}


body:not(.page-header-on) .lang-switch,
body:not(.page-header-on) .location-icon,
body.page-header-on.scrolled-down .lang-switch,
body.page-header-on.scrolled-down .location-icon,
body.megamenu-open .lang-switch,
body.megamenu-open .location-icon {
	color: #192232;
}

nav ul.social-icons {
	list-style: none;
	padding-inline-start: 0;
}

.megamenu-panel .social-icons .tripadvisor-icon {
	transform: translateY(12px) translateX(-2px);
	width: 28px;
	transition: filter 0.4s ease;
}

.megamenu-panel .social-icons .tripadvisor-icon:hover,
.mobile-menu .social-icons .tripadvisor-icon:hover {
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) hue-rotate(185deg) contrast(90%);
}

.mobile-menu .social-icons .tripadvisor-icon {
	transform: translateX(-2px);
	width: 25px;
	transition: filter 0.4s ease;
}


html:lang(fi) .btn-booknow {
	padding: 0.7rem 2.5rem;
}

.megamenu-panel a:focus {
	outline: 1px dotted #000;
	outline-offset: 3px;
}

.megamenu-panel a:focus:not(:focus-visible) {
	outline: none;
}


/* Valikon responsivisuudet */

@media (max-width: 1440px) {

	.megamenu-panel .contact-info {
		padding-left: 12vw;
	}

	.megamenu-panel .info-links {
		padding-left: 29px;
	}

	.tt-main-menu-list > li {
		padding: 2.5rem 0.6rem;
	}
	
	.megamenu .tt-main-menu-list > li > a {
		font-size: 11px;
	}
	
	.tt-logo-center img[data-role="logo"] {
		width: 55px;
	}

	.tt-header-utility-right {
		top: 34px;
	}
	
	.btn-booknow {
		font-size: 11px;
		padding: 0.55rem 2.8rem;
	}
	
	.tt-header-utility-left {
		font-size: 11px;
		top: 44px;
		left: 44px;
	}
	
}


/* ===========================================================
   OLETUSVERSIO (EN ym.)
   Näitä sääntöjä käytetään kaikilla kielillä,
   kun selainikkuna on enintään 1200px leveä
   =========================================================== */
@media (max-width: 1200px) {

	.tt-header-utility-left {
		top: 0;
		left: 40px;
	}

	.tt-header-utility-right {
		top: 0;
		right: 40px;
	}

	.btn-booknow {
		transform: scale(0.8);
		transform-origin: right top;
		padding: 0.4rem 2rem;
	}
}


/* ===========================================================
   SUOMI-VERSIO
   Täsmälleen samat säännöt kuin yllä,
   mutta ne laukeavat aiemmin (max-width: 1300px).
   html:lang(fi) varmistaa että vain fi-kielisellä sivulla
   =========================================================== */
@media (max-width: 1300px) {

	html:lang(fi) .tt-header-utility-left {
		top: 0;
		left: 40px;
	}

	html:lang(fi) .tt-header-utility-right {
		top: 0;
		right: 40px;
	}

	html:lang(fi) .btn-booknow {
		transform: scale(0.8);
		transform-origin: right top;
		padding: 0.4rem 2rem;
	}
}