@import 'essentials';

/*------------------------------------*\
BASIC
\*------------------------------------*/
html { font-size:100%; }

input, input:focus {
	outline:0;
	border:0;
}

.columns {
	display: flex;
	flex-direction: column;

  	@include st { flex-direction: row; }

	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start safe;
	align-content: flex-start safe;
	margin: 0 -1em;

	.col {
    	padding: 0 1em;
		flex-basis: 100%;
		flex-grow: 0;
		flex-shrink: 1;
		align-self: auto;

    	@include st {
			flex-basis: calc(100% / 3);

			&.col-1of1 { flex-basis: 100%; }
			&.col-1of2 { flex-basis: 50%; }
			&.col-2of2 { flex-basis: 100%; }
			&.col-1of3 { flex-basis: calc(100% / 3); }
			&.col-2of3 { flex-basis: calc(100% / 3 * 2); }
			&.col-3of3 { flex-basis: 100%; }
			&.col-1of4 { 
				flex-basis: 50%; 

				.content {
					display: flex;
					flex-direction: column;
					height: 100%;
					padding: 0 0 1rem 0;

					p:last-of-type {
						margin-top: auto;
					}
				}
				
			}
			&.col-2of4 { flex-basis: 50%; }
			&.col-3of4 { flex-basis: 75%; }
			&.col-4of4 { flex-basis: 100%; }
			&.col-1of5 { flex-basis: 20%; }
			&.col-2of5 { flex-basis: 40%; }
			&.col-3of5 { flex-basis: 60%; }
			&.col-4of5 { flex-basis: 80%; }
			&.col-5of5 { flex-basis: 100%; }
			&.col-1of6 { flex-basis: calc(100% / 3); }
    	}

		@include lt {
			&.col-1of4 { flex-basis: 25%; }
		}

		@include ld {
			&.col-1of6 { flex-basis: calc(100% / 6.2); }
		}
	}
}

// iOS + safari fixes (at least for iPhone5-8)
@supports (-webkit-touch-callout: none) {
	.columns {
		.col {
			width: 100%;
		}
	}
}

// iPad: 1/3 columns are now 50% in width (making then 1/2 columns)
@media only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : portrait) {
		.columns .col.col-1of3 {
		    flex-basis: 50% !important; 
	}
}


/*------------------------------------*\
HEADER
\*------------------------------------*/
$arrowSvg : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4yNSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgMTIuMjUgNyI+CiAgPHBhdGggZD0iTTYuMTI1LDAsMTIuMjUsN0gwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIuMjUgNykgcm90YXRlKDE4MCkiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==";

@mixin mobile {
	@media (max-width: 767px) { @content; }
}
@mixin st {
	@media (min-width: 768px) { @content; }
}
@mixin mt {
	@media (max-width: 1200px) and (min-width: 768px) { @content; }
}
.header {
	padding: $header-padding 0;
	background-color: $header-background;

	position: relative;
	z-index: 999;

	.container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		.logo-img {
			width: 150px;
		}
	}
	#mobile-menu-button {
		width: $menu-button-width;	
		height: calc(#{$menu-button-width} / 1.5);
		transform: rotate(0deg);
		cursor: pointer;
    @include st { display: none; }
		span {
			display: block;
			position: absolute;
			height: 3px;
			width: 100%;
			background: black;
			border-radius: 4px;
			opacity: 1;
			left: 0;
      transform: rotate(0);
      transition: .2s ease-in-out;
			&:nth-child(1) { top: 0; }
			&:nth-child(2), &:nth-child(3) {
        top: 50%;
        transform: translateY(-50%) rotate(0);
      }
			&:nth-child(4){ bottom: 0; }
		}
		&.open{
			span {
				&:nth-child(1){
					top: 50%;
          transform: translateY(-50%) rotate(0);
					width: 0%;
					left: 50%;
				}
				&:nth-child(2){
          transform: rotate(45deg);
				}
				&:nth-child(3){
					transform: rotate(-45deg);
				}
				&:nth-child(4) {
					bottom: 50%;
          transform: translateY(50%) rotate(0);
					width: 0%;
					left: 50%;
				}
			}
		}
	}

	/*
	// MENU
	.nav {
		font-size: 1rem;
		position: absolute;
		transition: left 0.3s ease;
		bottom: 0;
		display: block;
		width: 100%;
		left: -150%;
		transform: translateY(calc(100% - 1rem));
		z-index: 99;
		background: white;
		text-align: center;
		transition: left 0.3s ease;
		&.open { left: 0; }
    @include st {
      text-align: right;
      user-select: none;
      position: relative;
      transform: none;
      z-index: 0;
      left: auto;
    }
    // Eka taso UL
		>ul {
			margin: 0;
			padding: 1em;
      @include st {
        padding: 0;
      }
      // Eka taso LI
			>li {
				display: block;
				margin: 0.5em 0;
        @include st {
					display: inline-block;
					margin: $menu-list-item-margin 0 $menu-list-item-margin 3rem;
					&:first-child {
						margin-left: 0;
					}
        }
        // Kaikki alemmat tasot UL
        ul.sub-menu {
          height: 0;
          list-style: none;
          padding: 0;
          overflow: hidden;
          font-size: 0.9em;
          background-color: $header-background;
          @include st {
            position: absolute;
            font-size: 1em;
            padding: 0 1rem;
            width: auto;
            text-align: left;
            &.open { overflow: visible; }
          }
          li:first-child { margin-top: $menu-list-item-margin; }
          li:last-child { margin-bottom: $menu-list-item-margin; }
        }
        // Tasottain alemman tason UL
        @include st {
          // Heti alapuolella oleva
          >ul.sub-menu {
            left: -1rem;
            bottom: calc(-#{$menu-list-item-margin} - #{$header-padding});
            transform: translateY(100%);
            &.open-to-left {
              left: auto;
              right: -1rem;
            }
            // Loput
            li>ul.sub-menu {
              right: -1rem;
              top: -$menu-list-item-margin;
              transform: translateX(100%);
              &.open-to-left {
                right: auto;
                left: -1rem;
                transform: translateX(-100%);
              }
            }
          }
        }
			}
      // Kaikki LI
      li {
        position: relative;
        white-space: nowrap;
        @include st {
          margin-top: $menu-list-item-margin;
          margin-bottom: $menu-list-item-margin;
        }
        a { text-decoration: none; transition: 0.2s ease-in-out; }
      }
      
      // Kaikki current itemit
      .current-menu-ancestor, .current-menu-item {
        >a {
          color: $main;
          &:hover { color: $main; }
        }
        >.arrow span { background-color: $main !important; }
      }
      .current-menu-item:not(.menu-item-has-children) { pointer-events: none; }
      
      // Kaikki parentit
      .menu-item-has-children {
        padding-right: calc(2 * #{$menu-arrow-width});
        padding-left: calc(2 * #{$menu-arrow-width});
        @include st {
          padding-left: 0;
          &.hover {
            >a { color: $main; }
            >span.arrow span { background-color: $main; }
          }
        }
        .arrow {
          display: block;
          position: absolute;
          right: calc(#{$menu-button-width} / 2 - #{$menu-arrow-width} / 2);
          top: calc(1em - 0.5em);
          transform: translateY(-30%);
          width: $menu-arrow-width;
          height: $menu-arrow-width;
          transition: 0.2s ease-in-out;
          cursor: pointer;
          @include st { cursor: default; right: 0; }
          span {
            position: absolute;
            width: calc(0.707106781186548 * #{$menu-arrow-width});
            height: $menu-arrow-thickness;
            border-radius: $menu-arrow-thickness;
            background-color: $text;
            top: 70%;
            transition: 0.2s ease-in-out;
            &:first-child {
              left: calc(50% + #{$menu-arrow-thickness} / 2);
              transform: translateX(-100%) rotate(45deg);
              transform-origin: calc(100% - #{$menu-arrow-thickness} / 2) center;
            }
            &:last-child {
              right: calc(50% + #{$menu-arrow-thickness} / 2);
              transform: translateX(100%) rotate(-45deg);
              transform-origin: calc(#{$menu-arrow-thickness} / 2) center;
            }
          }
          &.open {
            span {
              top: 25%;
              background-color: $main;
              //@include st { background-color: $text; }
              &:first-child {
                transform: translateX(-100%) rotate(-45deg);
              }
              &:last-child {
                transform: translateX(100%) rotate(45deg);
              }
            }
          }
          &:hover {
            span {
              background-color: $main;
            }
          }
        }
      }
	}
	}
	*/

	.top-menu-bar {

		&.zero-height {
			.top-nav {
				margin-top: -40px;
			}
		}

		.container {
			> .top-nav {
				padding: unset;
				background: transparent;
				transition: all 0.2s;
				z-index: 1;

				.menu-item-has-children a:has(.arrow)::after {
					background-color: #fff;
				}

				.sub-menu {
					background: #111111;
				}
			}
		}
	}

	.middle-menu-bar {
		> .container {

			@include st {
				> .logo {
					flex-basis: 20%!important;
					max-width: 240px;
				}
				> .search {
					flex-basis: calc( 100% - 20% - 311px - 1px - 2rem)!important;
				}
				> .nav {
					flex-basis: 311px!important;
				}
			}

			@include mt {
				> .search {
					flex-basis: calc( 100% - 20% - 90px - 1px - 4rem)!important;
				}
				> .nav {
					flex-basis: 90px!important;
				}
			}

			> .logo {
				margin-right: unset;
			}
			> .nav {
				z-index: -1;
				background: transparent;

				.mobile {
					background: #fff;
				}

				a {
					padding: 0.4em 1em!important;
				}

				@include mt {
					ul li {
						display: flex;
						align-items: center;
							
						a {
							text-indent: 100%;
							white-space: nowrap;
							overflow: hidden;
							width: 45px!important;
						}
					}
				}

				a::before {
					content: "";
					margin-right: 8px;
					background: unset;
					background-repeat: no-repeat;
					background-size: contain;
					width: 1rem;
					height: 1rem;
					display: block;
					float: left;
					padding: 0.4em 1em;
				}
			}
		}
	}

	.bottom-menu-bar {
		> .container {
			> .nav {
				.menu-item-has-children a:has(.arrow)::after {
					background-color: #BE000F;
				}
				.sub-menu {
					background: #f0f0f0;
					display: flex!important;
					flex-direction: row;
					gap: 0.5rem 1rem;
					margin-top: 10px;

					.menu-item {
						width: fit-content;
					}
				}
			}
		}
	}

	/* MENU */
	.nav {
		font-size: 1rem;
		position: absolute;
		transition: left 0.3s ease;
		bottom: 0;
		display: block;
		width: 100%;
		left: -150%;
		transform: translateY(calc(100% - 1rem));
		z-index: 99;
		background: white;
		text-align: center;
		transition: left 0.3s ease;
		
		&.open { 
			left: 0; 

			> .mobile > .menu {
				overflow: scroll;
				height: calc(100vh - 8rem);
			}
		}

		&.top-nav {
			.current_page_item > a, 
			.menu-item-has-children:has(.current_page_item) > a {
				font-weight: 600;
			}
		}
		
		@include st {
			text-align: right;
			user-select: none;
			position: relative;
			transform: none;
			z-index: 0;
			left: auto;
		}
	
		/* Main navigation level */
		> ul {
			margin: 0;
			padding: 1em;
			position: relative; // Added for sub-menu positioning context
			justify-content: center!important;
			
			@include st {
				padding: 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
		
			/* First level items */
			> li {
				display: block;
				margin: 0.5em 0;
				
				&.menu-item-has-children a:has(.arrow)::after {
					content: "";
					background-repeat: no-repeat;
					clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
					width: 12px;
					height: 7px;
					display: inline-flex;
					margin: auto 0 auto 8px;
				}
				&.menu-item-has-children:hover a:has(.arrow)::after {
					transform: rotate(180deg);
				}

				@include st {
					position: static!important;
					display: inline-block;

					&:first-child { margin-left: 0; }

					margin: 0 0 0 3rem;
					padding: $menu-list-item-margin 0;

					
				}
		
				/* Sub-menu container */
				> ul.sub-menu {
					@include st {
						position: absolute!important;
						left: 0;
						//top: 100%;
						top: 100%!important;
						margin-top: unset;
						width: 100%;
						//background-color: $header-background;
						//background: red!important;
						height: fit-content!important;
						display: flex;
						visibility: hidden;
						opacity: 0;
						transform: translateY(-10px);
						transition: 
						visibility 0s linear 0.2s,
						opacity 0.2s,
						transform 0.2s;

						box-sizing: content-box;
						flex-flow: wrap;
						display: flex!important;
						
						// When parent is hovered or has current-menu-ancestor class
						.menu-item-has-children:hover &,
						.current-menu-ancestor & {
							visibility: visible;
							opacity: 1;
							transform: translateY(0);
							transition-delay: 0s;

							
						}
			
						// On sub-pages, always show the relevant sub-menu
						.current-menu-ancestor & {
							visibility: visible;
							opacity: 1;
							transform: translateY(0);
						}
			
						// Sub-menu items layout
						> li {
							text-wrap: nowrap;
							margin: $menu-list-item-margin 2rem;
							&:first-child { margin-left: 0; }
						}
					}
			
					// Mobile styles remain unchanged
					@include mobile {
						height: 0;
						list-style: none;
						padding: 0;
						overflow: hidden;
						font-size: 0.9em;
						
						&.open {
							height: auto;
						}
					}
				}
			}
		}
	
		/* Common link styles */
		a {
			text-decoration: none;
			transition: 0.2s ease-in-out;
			display: inline-block;
			text-wrap-mode: nowrap;
			
			&:hover {
				color: $main;
			}
		}
	
		/* Current menu items */
		.current-menu-ancestor,
		.current-menu-item {
			> a {
				color: $main;
				&:hover { color: $main; }
			}
		}
		
		.current-menu-item:not(.menu-item-has-children) {
			pointer-events: none;
		}
	}
	
	/* Arrow styles - simplified for new design */
	.menu-item-has-children {
		.arrow {
			@include st {
				display: none; // Hide arrows in desktop view since we're using hover
			}
			
			// Keep mobile arrow styles as they were
			@include mobile {
				// Your existing mobile arrow styles
			}
		}
	}
}

/*------------------------------------*\
FOOTER
\*------------------------------------*/
.footer {
	padding: 5rem 0;
	position: relative;
	margin-top: 5rem;

	.copyright {
		text-align: center;
		margin: 0;
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 1rem;
		font-size: 0.8rem;
		user-select: none;

		img {
			width: 55px;
		}
	}
}

/*------------------------------------*\
RESPONSIIVISUUS
\*------------------------------------*/

/* Mobiili */
@media only screen and (min-width:320px) {

}
@media only screen and (min-width:480px) {

}
/* Tabletti */
@media only screen and (min-width:768px) {

}
@media only screen and (min-width:1024px) {

}
/* Tyopoyta */
@media only screen and (min-width:1140px) {

}
@media only screen and (min-width:1280px) {

}

/*------------------------------------*\
PLUGINS
\*------------------------------------*/

/* Contact Form 7 */

.wpcf7 {

	input[type="submit"] {

	    &:hover {
	    }
	}

	input[type="text"], input[type="email"] {
		border: 1px solid;
    	width: 100%;

    	@media only screen and (min-width: 768px) {
    	}
	}

	textarea {
		width: 100%;

		@media only screen and (min-width: 768px) {
	    }
	}

	.wpcf7-list-item-label, label {
	}

	.columns {
		justify-content: flex-start;

		.col.col-1of3 {
			width: calc(100% / 3);

			@media only screen and (max-width: 1024px) {
				width: auto
			}
		}

		.col.col-1of4 {
			width: 25%;

			@media only screen and (max-width: 1024px) {
				width: auto;
			}
		}

		.col.col-1of5 {
			width: 20%;

			@media only screen and (max-width: 1024px) {
				width: auto;
			}
		}
	}
}

/* Joku muu yleinen plugini, joka vaatii määritykset */

.header .top-menu-bar .top-nav-right .pll-parent-menu-item.menu-item:hover ul.sub-menu {
    background: black!important;
    opacity: 1;
    visibility: visible;
    transform: unset;
    padding: 0 1rem 0 0.5rem;
    list-style: none;
    margin-left: -1rem;
}


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

	.header .nav.top-nav > ul {
		margin-left: unset;
	}
	.header .bottom-menu-bar .nav > ul {
		margin-left: unset;
		justify-content: center!important;
	}
}

.v2-hide-section {
	display: none!important;
}