/* 
 Theme Name:   Hello Elementor Child
 Theme URI:    
 Description:  
 Author:       jeletele
 Author URI:   
 Template:     hello-elementor
 Version:      1.0

 /* == Add your own styles below this line ==
--------------------------------------------*/

:root {
    --tec-color-icon-focus: #00493d;
    --tec-color-icon-error: #da394d;
    --tec-color-event-icon: #141827;
    --tec-color-event-icon-hover: #00493d;
    --tec-color-accent-primary: #00493d;
    --tec-color-accent-primary-hover: #00493dcc;
    --tec-color-accent-primary-active: #00493de6;
    --tec-color-accent-primary-background: #00493d12;
    --tec-color-accent-secondary: #141827;
    --tec-color-accent-secondary-hover: #141827cc;
    --tec-color-accent-secondary-active: #141827e6;
    --tec-color-accent-secondary-background: #14182712;
    --tec-color-button-primary: var(--tec-color-accent-primary);
    --tec-color-button-primary-hover: var(--tec-color-accent-primary-hover);
    --tec-color-button-primary-active: var(--tec-color-accent-primary-active);
    --tec-color-button-primary-background: var(--tec-color-accent-primary-background);
    --tec-color-button-secondary: var(--tec-color-accent-secondary);
    --tec-color-button-secondary-hover: var(--tec-color-accent-secondary-hover);
    --tec-color-button-secondary-active: var(--tec-color-accent-secondary-active);
    --tec-color-button-secondary-background: var(--tec-color-accent-secondary-background);
    --tec-color-link-primary: var(--tec-color-text-primary);
    --tec-color-link-accent: var(--tec-color-accent-primary);
    --tec-color-link-accent-hover: #00493dcc;
    --tec-color-border-default: #d5d5d5;
    --tec-color-border-secondary: #e4e4e4;
    --tec-color-border-tertiary: #7d7d7d;
    --tec-color-border-hover: #5d5d5d;
    --tec-color-border-active: #141827;
    --tec-color-background: #fff;
    --tec-color-background-events: #0000;
    --tec-color-background-transparent: #fff9;
    --tec-color-background-secondary: #f7f6f6;
    --tec-color-background-messages: #14182712;
    --tec-color-background-secondary-hover: #f0eeee;
    --tec-color-background-error: #da394d14;
    --tec-color-box-shadow: rgba(#000, 0.14);
    --tec-color-box-shadow-secondary: rgba(#000, 0.1);
    --tec-color-scroll-track: rgba(#000, 0.25);
    --tec-color-scroll-bar: rgba(#000, 0.5);
    --tec-color-background-primary-multiday: #00493d3d;
    --tec-color-background-primary-multiday-hover: #00493d57;
    --tec-color-background-secondary-multiday: #1418273d;
    --tec-color-background-secondary-multiday-hover: #14182757;
    --tec-color-accent-primary-week-event: #00493d1a;
    --tec-color-accent-primary-week-event-hover: #00493d33;
    --tec-color-accent-primary-week-event-featured: #00493d0a;
    --tec-color-accent-primary-week-event-featured-hover: #00493d24;
    --tec-color-background-secondary-datepicker: var(--tec-color-background-secondary);
    --tec-color-accent-primary-background-datepicker: var(--tec-color-accent-primary-background);
    --tec-border-radius-default: 4px;
    --tec-border-width-week-event: 2px;
    --tec-box-shadow-default: 0 2px 5px 0 var(--tec-color-box-shadow);
    --tec-box-shadow-tooltip: 0 2px 12px 0 var(--tec-color-box-shadow);
    --tec-box-shadow-card: 0 1px 6px 2px var(--tec-color-box-shadow);
    --tec-box-shadow-multiday: 16px 6px 6px -2px var(--tec-color-box-shadow-secondary);
    --tec-form-color-background: var(--tec-color-background);
    --tec-form-color-border-default: var(--tec-color-text-primary);
    --tec-form-color-border-active: var(--tec-color-accent-secondary);
    --tec-form-color-border-secondary: var(--tec-color-border-tertiary);
    --tec-form-color-accent-primary: var(--tec-color-accent-primary);
}



/* Chrome, Edge, Safari, Opera */
::-webkit-scrollbar {
    width: 5px;       /* pystyscroll */
    height: 5px;      /* vaakascroll */
}

::-webkit-scrollbar-track {
    background: transparent; /* taustatrack */
}

::-webkit-scrollbar-thumb {
    background-color: #00493d;
    border-radius: 15px;
    border: 1px solid transparent; /* pieni “gap” effect */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #00372f; /* hover-väri */
}

/* Firefox */
* {
    scrollbar-width: thin;            /* “thin” on ~5px */
    scrollbar-color: #00493d transparent;
}


#menu-dropdown .e-n-menu-heading {
    flex-direction: column;
}

#menu-dropdown .e-n-menu-item .e-n-menu-title:after {
    content: none;
}

@media screen and (max-width: 1024px) {
	#main-menu .e-n-menu-item .e-n-menu-title:after {
		content: none;
	}
}

@media screen and (max-width: 768px) {
	.text-clip-bg h1 {
		background-size: 120%;
		background-position: bottom center;
	}
}


.no-overflow {
	overflow: hidden !important;
}


.box-with-corner-arrow {
  position: relative;
  overflow: visible; /* allow overflow */
}

.box-with-corner-arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;

  width: 75px;
  height: 75px;

  background: #ffffff; /* SAME as page background */
  border-radius: 50%;

  clip-path: circle(145px at top left);
  transform: translate(25px, 25px);

  z-index: 1;
}



.corner-arrow {
  position: absolute;
  bottom: -50px;
  right: -50px;

  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #00493d;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
	
  transition: transform 0.3s ease;

  z-index: 5; /* ABOVE carve */
}

.corner-arrow:hover {
	transform: scale(1.04);
}

.corner-arrow:hover svg {
	color: #bac2ab;
}

.corner-arrow:hover:before {
	border-color: #bac2ab;
}

.corner-arrow::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 3px solid white;
}

.corner-arrow svg {
  width: 30px;
  height: 30px;
  color: white;
  position: relative;
  z-index: 2;
}

.text-clip-bg h1 {
    background-image: url("https://kuhmalahdelle.jeleteledesign.fi/wp-content/uploads/2026/02/kuhmalahdellefi-hero.jpg");
    background-position: bottom center;
	background-repeat: no-repeat;
    background-size: cover;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}

.elementor-motion-effects-element {
	
}

.elementor-nav-menu__text-align-center .elementor-nav-menu--dropdown .elementor-nav-menu a {
	text-align: center;
}