/* =========================================================
   mobile.css — hamburger-menu & oikealta liukuva paneeli
   ========================================================= */

/* Hamburger piilossa desktopilla */
.vitv-hamburger { display: none; }
.vitv-mobile-panel { display: none; }
.vitv-overlay { display: none; }

@media (max-width: 768px) {

	/* Piilota desktop-navigaatio kokonaan */
	.vitv-nav--desktop,
	.vitv-header__cta {
		display: none !important;
	}

	.vitv-header__inner { padding-right: 70px; } /* tilaa hamburgerille */

	/* Hamburger oikeaan yläkulmaan, fixed */
	.vitv-hamburger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		position: fixed;
		top: 14px;
		right: 16px;
		z-index: 9999;
		width: 48px;
		height: 48px;
		padding: 12px;
		background: var(--vitv-green-dark);
		border: none;
		border-radius: 12px;
		cursor: pointer;
		box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	}
	.vitv-hamburger__bar {
		display: block;
		width: 24px;
		height: 3px;
		background: #fff;
		border-radius: 3px;
		transition: transform .4s cubic-bezier(.68, -0.55, .27, 1.55),
		            opacity .4s cubic-bezier(.68, -0.55, .27, 1.55);
	}

	/* Aktiivinen hampurilainen -> rasti */
	.vitv-hamburger.is-active { background: var(--vitv-cta); }
	.vitv-hamburger.is-active .vitv-hamburger__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
	.vitv-hamburger.is-active .vitv-hamburger__bar:nth-child(2) { opacity: 0; }
	.vitv-hamburger.is-active .vitv-hamburger__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

	/* Overlay */
	.vitv-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(20, 40, 26, .6);
		backdrop-filter: blur(2px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .4s ease, visibility .4s ease;
		z-index: 9990;
	}
	.vitv-overlay.is-active { opacity: 1; visibility: visible; }

	/* Oikealta liukuva paneeli */
	.vitv-mobile-panel {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		height: 100dvh;
		width: 80%;
		max-width: 350px;
		background: linear-gradient(165deg, #1B5E20 0%, #2E7D32 55%, #43A047 100%);
		color: #fff;
		border-left: 2px solid rgba(249, 168, 37, .55);
		z-index: 9995;
		transform: translateX(100%);
		transition: transform .4s cubic-bezier(.68, -0.2, .27, 1.1);
		box-shadow: -20px 0 50px rgba(0, 0, 0, .35);
		overflow-y: auto;
		padding: 80px 0 32px;
	}
	.vitv-mobile-panel.is-active { transform: translateX(0); }

	.vitv-mobile-panel__head { padding: 0 28px 12px; }
	.vitv-mobile-panel__title { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; opacity: .7; }

	/* Vahva selektori mobiilimenuille - varmista että itemit ovat allekkain */
	.vitv-nav--mobile .vitv-menu,
	.vitv-nav--mobile .vitv-menu.vitv-menu--mobile {
		flex-direction: column !important;
		display: flex !important;
		gap: 0 !important;
	}
	.vitv-menu--mobile li,
	.vitv-nav--mobile .vitv-menu li {
		width: 100% !important;
		display: block !important;
		float: none !important;
	}
	.vitv-menu--mobile a { color: #fff; padding: 14px 28px; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.vitv-menu--mobile a:hover { background: rgba(255, 255, 255, .1); color: var(--vitv-yellow); }

	/* Mobiilin alavalikot näkyviin sisennettyinä */
	.vitv-menu--mobile .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: rgba(0, 0, 0, .15);
		box-shadow: none;
		border: none;
		border-radius: 0;
		padding: 0;
	}
	.vitv-menu--mobile .sub-menu a { padding-left: 44px; font-size: 15px; font-weight: 500; }

	.vitv-mobile-panel__cta { margin-top: auto; padding: 24px 28px 0; }

	/* Estä taustan vieritys kun paneeli auki */
	body.vitv-menu-open { overflow: hidden; }

	/* Pienennä heroa hieman mobiilissa */
	.vitv-hero { min-height: 90vh; }
	
	/* Hero-pillit: piilota kaikki mobiilissa etteivät mene tekstin päälle */
	.vitv-hero__pills { display: none !important; }
	
	/* Vaihtoehtoisesti: näytä pillit uudelleen positionoituina mobiilissa
	@media (min-width: 640px) {
		.vitv-hero__pills { display: block; }
	}
	*/
}