/*
 * Custom Off-canvas Mobile Navigation
 * (Hides WP's built-in mobile dialog, shows our offcanvas panel)
 */

body.vm-offcanvas-open {
	overflow: hidden;
}

/* Default (desktop): don't show offcanvas */
.vm-offcanvas-nav {
	display: none;
}

@media (max-width: 1190px) {
	/* Hide WP's built-in responsive menu contents so it doesn't conflict */
	header.wp-block-template-part .wp-block-navigation__responsive-container,
	header.wp-block-template-part .wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	.vm-offcanvas-nav {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		top: 110px;
		bottom: 0;
		z-index: 2000;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.vm-offcanvas-nav.is-open {
		pointer-events: auto;
		opacity: 1;
		top: 110px;
		transition: top 0.4s ease, opacity 0.2s ease;
	}

	body.vm-header-scrolled .vm-offcanvas-nav {
		top: 91.75px;
	}

	body.vm-header-scrolled .vm-offcanvas-nav.is-open {
		top: 91.75px;
	}

	/* Backdrop */
	.vm-offcanvas-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
	}

	/* On homepage, hide backdrop darkening until the header is scrolled */
	body.home:not(.vm-header-scrolled) .vm-offcanvas-backdrop {
		background: transparent;
	}

	/* On homepage, hide backdrop darkening until the header is scrolled */
	body.home:not(.vm-header-scrolled) .vm-offcanvas-panel{
		background: unset;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
	}

	body.home:not(.vm-header-scrolled) .vm-offcanvas-panel .wp-block-navigation__container li a{
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	body.home:not(.vm-header-scrolled).vm-offcanvas-open header.wp-block-template-part{
		background: rgba(0, 0, 0, 0.5);
	}

	/* Panel */
	.vm-offcanvas-panel {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 100%;
		/* width: min(420px, 88vw); */
		width: 100vw;
		background: #FAF6F0;
		background: rgba(250, 246, 240, 0.92);
		transform: translateX(100%);
		transition: transform 0.25s ease;
		padding: 18px;
		padding-top: 60px;
	}

	.vm-offcanvas-nav.is-open .vm-offcanvas-panel {
		transform: translateX(0);
	}

	.vm-offcanvas-panel nav{
		display: flex;
		justify-content: center;
	}

	/* Close button (hidden: we close using the hamburger/X) */
	.vm-offcanvas-close {
		display: none;
		width: 42px;
		height: 42px;
		border: 0;
		background: transparent;
		border-radius: 10px;
		color: var(--wp--preset--color--ink);
		font-size: 34px;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.vm-offcanvas-close span {
		transform: translateY(-1px);
	}

	/*
	 * Inside the offcanvas: keep the WP responsive container visible because
	 * it contains the actual <ul class="wp-block-navigation__container"> links.
	 * We only hide the inner open/close controls, then restyle the container
	 * to behave like a normal block.
	 */
	.vm-offcanvas-nav .wp-block-navigation__responsive-container-close,
	.vm-offcanvas-nav .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	.vm-offcanvas-nav .wp-block-navigation__responsive-container {
		display: block !important;
		position: static !important;
		inset: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		height: auto !important;
		width: auto !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	.vm-offcanvas-nav .wp-block-navigation__responsive-dialog {
		position: static !important;
	}

	.vm-offcanvas-nav .wp-block-navigation__responsive-container-content {
		padding: 0 !important;
	}

	/* Make the nav list look offcanvas-friendly */
	.vm-offcanvas-nav .wp-block-navigation__container {
		list-style: none;
		margin: 0;
		padding: 64px 0 24px;
		padding-top: 20px;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.vm-offcanvas-nav .wp-block-navigation__container .wp-block-navigation-item__content {
		display: inline-block;
		padding: 12px 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		font-weight: 500;
		font-size: 20px;
		font-weight: 800;
		letter-spacing: 0.8px;
	}

	/* body.home  .vm-offcanvas-nav .vm-offcanvas-panel .wp-block-navigation__container li:last-child a,
	body.home  .vm-offcanvas-nav .vm-offcanvas-panel .wp-block-navigation__container li:nth-last-child(2) a{
		background-color: #fff;
		color: var(--wp--preset--color--ink);
		padding: 12px 20px;
		border-radius: 4px;
		font-size: 25px;
		margin-top: 25px;
		box-shadow: 0 2px 12px rgba(28, 26, 23, 0.15);
	}

	body.home.vm-header-scrolled  .vm-offcanvas-nav.is-open .vm-offcanvas-panel .wp-block-navigation__container li:last-child a{
		background-color: var(--wp--preset--color--accent);
		color: #fff;
	} */

	body.home  .vm-offcanvas-nav .vm-offcanvas-panel nav.wp-block-navigation:last-child{
		/* background-color: #aaa; */
		padding: 0;
		margin: 0;
	}

	body.home  .vm-offcanvas-nav .vm-offcanvas-panel nav.wp-block-navigation:last-child .wp-block-navigation__container{
		padding: 0;
		flex-direction: row;
	}

	
	body.home  .vm-offcanvas-nav .vm-offcanvas-panel nav.wp-block-navigation:last-child .wp-block-navigation__container li:last-child a,
	body.home  .vm-offcanvas-nav .vm-offcanvas-panel nav.wp-block-navigation:last-child .wp-block-navigation__container li:nth-last-child(2) a{
		background-color: #fff;
		color: var(--wp--preset--color--ink);
		padding: 12px 20px;
		border-radius: 4px;
		font-size: 18px;
		margin-top: 25px;
		box-shadow: 0 2px 12px rgba(28, 26, 23, 0.15);
		margin-top: 0;
	}

	body.home.vm-header-scrolled .vm-offcanvas-nav .vm-offcanvas-panel nav.wp-block-navigation:last-child .wp-block-navigation__container li:last-child a,
	body.home.vm-header-scrolled .vm-offcanvas-nav .vm-offcanvas-panel nav.wp-block-navigation:last-child .wp-block-navigation__container li:nth-last-child(2) a{
		background-color: var(--wp--preset--color--accent);
		color: #fff;
	}
}

/* ==========================================================================
   Jon Suh "Hamburgers" — collapse icon for WP navigation toggle
   (Copied from custom.css so offcanvas toggle styles live together.)
   ========================================================================== */

/* Hamburger layout inside the WP button */
.wp-block-navigation__responsive-container-open.hamburger {
	padding: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
}

.wp-block-navigation__responsive-container-open.hamburger .hamburger-box {
	width: 40px;
	height: 24px; /* (layer-height * 3) + (layer-spacing * 2) */
	position: relative;
	display: inline-block;

	/* Scale down to match the WP button size */
	transform: scale(0.55);
	transform-origin: center;
	left: -1px;
}

.wp-block-navigation__responsive-container-open.hamburger .hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px; /* layer-height / -2 (4px / -2) */
}

.wp-block-navigation__responsive-container-open.hamburger .hamburger-inner,
.wp-block-navigation__responsive-container-open.hamburger .hamburger-inner::before,
.wp-block-navigation__responsive-container-open.hamburger .hamburger-inner::after {
	width: 40px;
	height: 4px;
	background-color: #000;
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}

body.home header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-open.hamburger .hamburger-inner,
body.home header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-open.hamburger .hamburger-inner::before,
body.home header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-open.hamburger .hamburger-inner::after {
	background-color: #fff;
}

.wp-block-navigation__responsive-container-open.hamburger .hamburger-inner::before,
.wp-block-navigation__responsive-container-open.hamburger .hamburger-inner::after {
	content: "";
	display: block;
}

.wp-block-navigation__responsive-container-open.hamburger .hamburger-inner::before {
	/* (layer-spacing + layer-height) * -1  => (6 + 4) * -1 */
	top: -10px;
}

.wp-block-navigation__responsive-container-open.hamburger .hamburger-inner::after {
	/* bottom: (layer-spacing + layer-height) * -1 */
	bottom: -10px;
}

/* collapse type */
.wp-block-navigation__responsive-container-open.hamburger--collapse .hamburger-inner {
	top: auto;
	bottom: 0;
	transition-duration: 0.13s;
	transition-delay: 0.13s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.wp-block-navigation__responsive-container-open.hamburger--collapse .hamburger-inner::after {
	top: -20px; /* (layer-spacing*2 + layer-height*2) * -1 => (12 + 8) * -1 */
	bottom: auto;
	transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
		opacity 0.1s linear;
}

.wp-block-navigation__responsive-container-open.hamburger--collapse .hamburger-inner::before {
	transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
		transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.wp-block-navigation__responsive-container-open.hamburger--collapse.is-active .hamburger-inner {
	transform: translate3d(0, -10px, 0) rotate(-45deg); /* (layer-spacing + layer-height) * -1 */
	transition-delay: 0.22s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.wp-block-navigation__responsive-container-open.hamburger--collapse.is-active .hamburger-inner::after {
	top: 0;
	opacity: 0;
	transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
		opacity 0.1s 0.22s linear;
}

.wp-block-navigation__responsive-container-open.hamburger--collapse.is-active .hamburger-inner::before {
	top: 0;
	transform: rotate(-90deg);
	transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
		transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Hide the default WordPress SVG icon so only the Jon Suh markup shows */
@media (max-width: 1190px) {
	.wp-block-navigation__responsive-container-open.hamburger svg {
		display: none !important;
	}
}