/*
Theme Name: Hello Elementor Child (Olohuonetuotanto)
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.0.1.1714982057
Updated: 2024-05-06 10:54:17
*/

/* =========================
   Google Font: Merriweather
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');


 

/* ========================= 
   PERUSASETUKSET
   ========================= */

/* ✅ Oletusfontti koko sivulle.
   Elementor saa silti vaihtaa fontit widgeteissä (älä pakota h1/p/span jne). */
html, body {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-weight: 400;

  overflow-x: hidden;

  /* Pitkien sanojen luonnollinen katkaisu tarvittaessa, estää layoutin hajoamisen */
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal; /* Ei katkaisua keskeltä sanaa oletuksena */
}

body {
  position: relative;
  width: 100%; /* Korjattu 100vw -> 100% varmuuden vuoksi vierityspalkkien kanssa */
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}




/* Nämä periytyvät nyt html/body-tasolta.
   Ei aseteta font-familyä tageille -> Elementor pystyy overrideamaan fontit. */
p, div, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Kappaleet (p) */
p {
  margin-bottom: 1.5rem;
}

/* Linkit (a) */
a {
  text-decoration: none;
  transition: color 0.2s ease;
  color: #fff;
}

a:hover {
  color: #FFA4EC; 
}
 
/* Aktiivinen linkki (jos ollaan kyseisellä sivulla) */
a.active,
a[aria-current="page"] {
  cursor: default;
  pointer-events: none;
  color: gray;
  text-decoration: none;
}

a.broken_link {
  text-decoration: auto !important;
}


h1, h2, h3, h4, h5 {
    font-family: 'Abril Fatface', serif;
}





/* Lomakekenttien placeholderit */
form input::placeholder,
form textarea::placeholder {
  opacity: 1 !important;
  font-size: 0.9em;
}

/* =========================
   Headings (painotus ok, mutta ei fonttipakkoa)
   ========================= */
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
  font-weight: 600; /* hyvä oletus otsikoille */
}

/* =========================
   Strong / Bold text
   ========================= */
strong,
b {
  font-family: inherit; /* perii sen fontin mitä Elementor / parent asettaa */
  font-weight: 700;
}

 
 
 
 


/* Elementor logo / image carousel */
.elementor-image-carousel img {
  max-height: 80px;     /* säädä: 60–100px on yleensä hyvä */
  width: auto;
  object-fit: contain;
  margin: 0 auto;
}










 
 
/* Kun WP admin bar näkyy, pusketaan koko sivu alas */
/* Siirrä header alas vain kun WP admin bar näkyy */

  
 

/* =========================================
   Elementor Text Editor
   Headings scale based on widget font-size
   ========================================= */

.elementor-widget-text-editor .elementor-widget-container {
  /* tämä font-size tulee Elementorista (esim. 16px) */
  line-height: 1.65;
}

/* Perusteksti */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-size: 1em;
  margin: 0 0 0.9em 0;
}

/* Otsikot – skaalautuvat suhteessa widgetin font-sizeen */
.elementor-widget-text-editor h1 { font-size: 2.2em; }
.elementor-widget-text-editor h2 { font-size: 1.8em; }
.elementor-widget-text-editor h3 { font-size: 1.5em; }
.elementor-widget-text-editor h4 { font-size: 1.25em; }
.elementor-widget-text-editor h5 { font-size: 1.1em; }
.elementor-widget-text-editor h6 { font-size: 1em; }

.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5,
.elementor-widget-text-editor h6 {
  line-height: 1.2;
  margin: 2em 0 0.5em 0;
}



 /* =========================================
   Elementor Text Editor – list spacing
   ========================================= */

/* Itse lista */
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
  margin: 0 0 1em 1.5em; /* alin väli + sisennys */
  padding: 0;
}

/* Yksittäiset listaelementit */
.elementor-widget-text-editor li {
  margin-bottom: 0.2em; /* ← TÄMÄ säätää välin li-elementtien välillä */
  line-height: 1.55;
}

/* Poista viimeisen listan turha extra-väli */
.elementor-widget-text-editor li:last-child {
  margin-bottom: 0;
}

.elementor-widget-text-editor p + ul,
.elementor-widget-text-editor p + ol {
  margin-top: 0.6em;
}






 



.booking-embed {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  background: #0b1220;
  border-radius: 20px;
}
.booking-embed iframe {
  border-radius: 14px;
  background: #fff;
}






 
 
 
/* =========================
   ELEMENTOR WIDGETS
   ========================= */

.elementor-widget-call-to-action .elementor-widget-container {
    position: relative;
}

.elementor-cta__bg.elementor-bg {
    border-top: 5px solid #FF7019;
    border-left: 5px solid #FF7019;
}

.elementor-widget-call-to-action .elementor-widget-container::before {
    animation: fadeInBorders 0.5s ease-in-out forwards;
}

@keyframes fadeInBorders {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}






/* =========================
   NAVIGAATIO (HEADER)
   ========================= */

/* Navigaatiopalkin perusasetukset */
#main-header-nav {
    transition: background-color 0.2s ease;
	z-index: 100;
}

/* Navigaatiopalkki skrollatessa */
#main-header-nav.scrolled {
    background-color: rgba(0, 0, 0, 0.85); /* Korjattu väriarvo */ 
}

#main-header-nav.scrolled .hfe-nav-menu__toggle svg {
	filter: invert(1) contrast(1.1); 
	transition: all 0.2s ease;  
}  

/* Navigaatiolinkit */
#main-header-nav a {
    transition: all 0.2s ease;
}
 
/* Navigaatiolinkit skrollatessa */
 
#main-header-nav.scrolled a {
    font-size: 1em;
    color: #fff;
}

#main-header-nav.scrolled a:hover {
    color: #ec008c; 
}
#main-header-nav.scrolled .current_page_item a {
    color: #ec008c;
}
#main-header-nav.scrolled .buttoni a {
    color: #fff;
	font-size: 0.8em;  
}
#main-header-nav.scrolled .buttoni a:hover { 
    color: #ec008c; 
    background: #fff;       
}

#main-header-nav.scrolled .buttoni span:hover {
	color: #ec008c; 
}





/* HEADER SCROLLED – ELEMENTOR PAINIKE */

#main-header-nav.scrolled .buttoni a {
    background: #fff;
    color: #ec008c;
    font-size: 0.8em; 
    transition: all 0.2s ease;
}

/* Teksti */
#main-header-nav.scrolled .buttoni a .elementor-button-text {
    color: #ec008c;
}

/* Ikoni (font awesome / svg) */
#main-header-nav.scrolled .buttoni a .elementor-button-icon,
#main-header-nav.scrolled .buttoni a .elementor-button-icon i,
#main-header-nav.scrolled .buttoni a .elementor-button-icon svg {
    color: #ec008c;
    fill: #ec008c;
}

/* Hover – pidetään sama tyyli tai halutessa tummempi pinkki */
#main-header-nav.scrolled .buttoni a:hover {
    background: #fff;
    color: #ec008c;
}

/* Hover myös tekstille ja ikonille */
#main-header-nav.scrolled .buttoni a:hover .elementor-button-text,
#main-header-nav.scrolled .buttoni a:hover .elementor-button-icon,
#main-header-nav.scrolled .buttoni a:hover .elementor-button-icon i,
#main-header-nav.scrolled .buttoni a:hover .elementor-button-icon svg {
    color: #ec008c;
    fill: #ec008c;
}








/* Logo navigaatiossa */
#main-header-nav .logo {
  transition: all 0.25s ease;
  filter: invert(1) contrast(1.1);
}
 

#main-header-nav .logo img { 
    transition: all 0.2s ease; 
}

#main-header-nav.scrolled .logo img {
    max-width: 120px;   
}

/* Navigaation listat */
#main-header-nav li.nofill { 
	border: 1px solid #000;
	margin-right: 15px;
}

#main-header-nav li.fill {
	background: #000;
}
#main-header-nav li.fill a {
	color: #fff;
}

#main-header-nav li.rounded {
	border-radius: 50px;
	padding: 5px 20px;
}

#main-header-nav li.m-left {
	margin-left: 40px;
}



#main-header-nav.scrolled .hfe-dropdown ul, 
#main-header-nav.scrolled .hfe-dropdown ul li, 
#main-header-nav.scrolled .hfe-dropdown ul li a {  
    text-align: center !important;  
} 

 
#main-header-nav.scrolled .hfe-dropdown ul li a {  
    font-size: 0.85em !important;
}



  


  


/* =========================
   EFEKTIT & HERO
   ========================= */

/* Oletus: elementti näkyy normaalisti */
#liukuvari-top {
    filter: none; /* Ei suodatusta oletuksena */
    opacity: 1;   /* Täysin näkyvä */
    visibility: visible; /* Varmistaa, että elementti näkyy */
    transition: filter 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

/* Skrollattuna: elementti häivytetään */
#liukuvari-top.scrolled {
    filter: blur(10px); /* Häivytysefekti */
    opacity: 0;         /* Elementti tehdään näkymättömäksi */
    visibility: hidden; /* Piilotetaan elementti lopulta */
}

.border-frame img {
  border-left: 15px solid #f57c00;  /* Vasemman reunan reunus */
  border-bottom: 15px solid #f57c00;/* Alareunan reunus */
  box-sizing: border-box; /* Varmistaa, että borderit sisällytetään elementin kokonaisleveyteen */
}






























 



/* =========================
   FOOTER MENU
   ========================= */

/* Säädä nämä jos haluat: */
:root{
  --footer-link: #ffffff;   /* päälinkkien väri */
  --footer-sub:  #ffffff;   /* alalinkkien väri */
  --footer-hover:#ffd34a;   /* hover- ja aktiivisen linkin korostusväri */
}

/* Perus reset footer-menulle */
.footer-menu .elementor-nav-menu,
.footer-menu .elementor-nav-menu * {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Linkit listaksi */
.footer-menu .elementor-nav-menu .menu-item {
  display: block !important;
  margin: 0 0 10px 0 !important;
}

/* =================
   PÄÄLINKIT
   ================= */
.footer-menu .elementor-nav-menu > .menu-item > a {
  display: inline-block;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  color: var(--footer-link) !important;
  opacity: 1 !important;
  /* PAKOTETTU NORMAALI PAKSUUS PÄÄLINKEILLE */
  font-weight: normal !important;
}

/* =================
   ALALINKIT (Sub-menu)
   ================= */

/* Sub-menu aina näkyviin + sisennys */
.footer-menu .elementor-nav-menu .sub-menu {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  max-height: none !important;
  transition: none !important;
  margin: 6px 0 10px 10px !important; /* 10px sisennys */
  padding: 0 !important;
  font-size: 100% !important; /* Varmistaa koon periytymisen säiliölle */
}

.footer-menu .elementor-nav-menu .sub-menu .menu-item {
  display: block !important;
  margin: 0 0 5px 0 !important;
}

/* Alalinkkien perustyyli (Tämä on "tarkka" sääntö) */
.footer-menu .elementor-nav-menu .sub-menu .menu-item > a {
  display: inline-block;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  color: var(--footer-sub) !important; /* Perusväri */
  opacity: 1 !important;
  font-size: inherit !important; /* Varmistaa koon periytymisen linkille */
  /* PAKOTETTU NORMAALI PAKSUUS ALALINKEILLE */
  font-weight: 300 !important;
}

/* =================
   HOVER & ACTIVE TILAT
   ================= */

/* Yleinen Hover / focus: */
.footer-menu .elementor-nav-menu a:hover,
.footer-menu .elementor-nav-menu a:focus {
  background: transparent !important;
  color: var(--footer-hover) !important;
}

/* Yleinen Aktiivinen linkki: */
.footer-menu .elementor-nav-menu li.current-menu-item > a,
.footer-menu .elementor-nav-menu li.current-menu-ancestor > a,
.footer-menu .elementor-nav-menu a.elementor-item-active {
    color: var(--footer-hover) !important;
}

/* --- KORJAUS: SUB-MENUN HOVER & ACTIVE --- */
/* Nämä säännöt ovat erityisen tarkkoja, jotta ne voittavat alalinkin perusvärin */

/* Sub-menu hover */
.footer-menu .elementor-nav-menu .sub-menu a:hover,
.footer-menu .elementor-nav-menu .sub-menu a:focus {
     color: var(--footer-hover) !important;
}

/* Sub-menu aktiivinen */
.footer-menu .elementor-nav-menu .sub-menu li.current-menu-item > a,
.footer-menu .elementor-nav-menu .sub-menu a.elementor-item-active {
    color: var(--footer-hover) !important;
}


/* =================
   MUUT SÄÄDÖT
   ================= */

/* Näytä näppäimistöfocus järkevästi */
.footer-menu .elementor-nav-menu a:focus-visible {
  outline: 2px solid var(--footer-hover);
  outline-offset: 4px;
}

/* Poista Elementor underline pointer footerissa */
.footer-menu .e--pointer-underline .elementor-item::after,
.footer-menu .e--pointer-underline .elementor-item::before {
  height: 0 !important;
}

/* Poista dropdown-nuoli footerissa */
.footer-menu .elementor-nav-menu .menu-item-has-children > a .sub-arrow,
.footer-menu .elementor-nav-menu .menu-item-has-children > a::after {
  display: none !important;
}

 
 
 
 


/* =========================
   MUUT TYYLIT & KOMPONENTIT
   ========================= */

.elementor-field-option label {
    font-size: 14px !important;
}







/* Lainauslaatikko (Quote) */
.quote-k {
    position: relative;
    max-width: 900px;
    margin: 40px auto;
    padding: 50px 70px;
    background-color: #ffe7d9;
    border: 2px solid #000;
    border-radius: 25px;
    color: #000;
    text-align: center;
}

.quote-k::before,
.quote-k::after {
    position: absolute;
    font-size: 150px;
    color: #000;
}

.quote-k::before {
    content: '“';
	top: 16px;
	left: 50px;
}

.quote-k::after {
    content: '”';
    bottom: -66px;
    right: 50px;
}

/* Custom Button */
.custom-button-class {
    background-color: #1a237e;
    border-radius: 25px;
    padding: 15px 25px;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    transition: all 0.22s ease;
}

.custom-button-class:hover {
    background-color: #bccfff;
	color: #000;
}

.custom-button-class .elementor-button-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-button-class .elementor-button-text {
    padding: 0 10px;
}

/* Elementor Tabs & Accordion Padding Fixes */
.elementor-widget-tabs .elementor-tab-content {
    padding: 30px !important;
}

.elementor-accordion .elementor-accordion-item .elementor-tab-content {
    padding: 25px !important;
}

/* Valikon ikonit */
.elementor-location-footer li.menu-item a i,
header .elementor-nav-menu__container ul.sub-menu li a i {
	margin-left: 7px;
	font-size: 0.8em;
}

/* =========================
   TRANSLATEPRESS & CHAT
   ========================= */

.trp-language-switcher-container .trp-flag-image {
    display: none;  /* Piilottaa nykyisen kuvan */
}

/* Asettaa mukautetun taustakuvan elementille */
.trp-language-switcher-container a.elementor-item {
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: left center !important;
    padding-left: 19px !important;
    display: inline-block !important;
    height: 18px !important;
    line-height: 18px !important;
}

/* TODO: Lisää kuvien URL-osoitteet näihin, jos haluat lippujen näkyvän.
   Jos et halua kuvia, käytä mieluummin: background-image: none !important; */
.trp-language-switcher-container a[href*="/"] {
    background-image: url('') !important;
}

.trp-language-switcher-container a[href*="/sv/"] {
    background-image: url('') !important;
}

/* Elementor Menu Item Padding Fix (spesifi korjaus) */
.elementor-1714 .elementor-element.elementor-element-5dd8fc74 .elementor-nav-menu--main .elementor-item {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* HUOM: reCAPTCHA-logon piilottaminen on sallittua vain, jos sivustolla on
   näkyvillä teksti: "This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply." */
.grecaptcha-badge {
	/*display: none;*/
	margin-bottom: 50px;
} 

.elementor-counter-title {
	text-align: center;
	font-size: 0.7em;
	margin-top: 12px;
}

/* =========================
   RESPONSIIVISUUS (MEDIA QUERIES)
   ========================= */

/* Pienemmät näytöt (max-width: 768px) */
@media (max-width: 768px) {

   .trp-language-switcher-container a.elementor-item {
        padding-left: 5px !important;
        height: 10px !important;
        line-height: 12px !important;
        background-size: contain !important;
        margin-left: 20px;
        margin-bottom: 10px;
    }

	.elementor-accordion .elementor-accordion-item .elementor-tab-content {
		padding: 20px !important;
	}
    /* Skaalataan accordion-otsikoita mobiilissa */
	.elementor-accordion .elementor-accordion-item .elementor-tab-content h2 { font-size: 24px; }
	.elementor-accordion .elementor-accordion-item .elementor-tab-content h3 { font-size: 20px; }
	.elementor-accordion .elementor-accordion-item .elementor-tab-content h4 { font-size: 18px; }
	.elementor-accordion .elementor-accordion-item .elementor-tab-content h5 { font-size: 16px; }

	.quote-k {
		padding: 30px 30px;
	}

	.quote-k::before,
	.quote-k::after {
		font-size: 80px; /* Pienemmät hipsut mobiilissa */
	}

	.quote-k::before {
		top: 1px;
	}

	.quote-k::after {
	    bottom: -43px;
		right: 50px;
	}
}

/* Erittäin pienet näytöt (max-width: 480px) */
@media (max-width: 480px) {
    /* .trp-language-switcher-container a.elementor-item { }  - Tyhjä sääntö poistettu */
}