/* ==========================================================================
   Vidigami Shell — header, desktop dropdowns, mobile drawer.
   Geometry mirrors the old Elementor Pro "HeadNav" template (id 40) +
   Premium Nav Menu, and the "NavDrawer" popup (id 143).
   Breakpoints follow Elementor: mobile ≤767, tablet 768–1024, desktop ≥1025.
   ========================================================================== */

.vdg-header,
.vdg-drawer {
	--vdg-ink: #000;
	--vdg-mint: #A2EBCB;
	--vdg-blush: #F9CABB;
	--vdg-font: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* While Elementor Pro is still active (preview mode), hide its header/footer/drawer. */
body.vdg-shell .elementor-location-header,
body.vdg-shell .elementor-location-footer,
body.vdg-shell .elementor-location-popup[data-elementor-id="143"],
body.vdg-shell #elementor-popup-modal-143 {
	display: none !important;
}

/* --- Header bar ----------------------------------------------------------- */

.vdg-header {
	position: relative;
	z-index: 100;
	background: #fff;
	font-family: var(--vdg-font);
}

.vdg-header__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	max-width: 1764px; /* 1564 content + 2×100 padding */
	margin: 0 auto;
	padding: 5px 100px 0;
}

.vdg-header__logo {
	flex: 0 1 705px;
	box-sizing: border-box;
	align-self: stretch;
	min-width: 0;
	min-height: 75px;
	padding: 0 10px;
	background: url("https://dzkqwmxzv16vl.cloudfront.net/Vidigami_Wordmark_K.webp") no-repeat 10px 50% / 200px auto;
	transition: transform .3s;
}

/* Elementor "shrink" hover, centred on the 200px wordmark */
.vdg-header__logo:hover {
	transform: scale(.9);
	transform-origin: 110px 50%;
}

.vdg-nav {
	flex: 0 1 50%;
	min-width: 0;
}

.vdg-header__toggle {
	display: none;
}

/* --- Desktop menu --------------------------------------------------------- */

.vdg-nav .vdg-menu,
.vdg-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vdg-nav .vdg-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.vdg-nav .vdg-menu > li {
	position: relative;
}

/* Doubled class beats the Elementor kit's `.elementor-kit-6 a` (same weight, loads later). */
.vdg-header .vdg-nav a {
	display: flex;
	align-items: center;
	padding: 7px 10px;
	font-family: var(--vdg-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	word-spacing: -2px;
	color: var(--vdg-ink);
	text-decoration: none;
	transition: color .2s;
}

.vdg-nav .vdg-menu > li > a:hover,
.vdg-nav .vdg-menu > li:focus-within > a,
.vdg-nav .vdg-menu > li.vdg-open > a {
	color: #747474;
}

/* Chevron (Font Awesome chevron-down, 14px) */
.vdg-header .menu-item-has-children > a::after,
.vdg-drawer .menu-item-has-children > a::after {
	content: "";
	flex: none;
	width: 12.25px; /* 448/512 × 14px, the glyph's real width */
	height: 14px;
	margin: 0 0 -3px 5px;
	position: relative;
	top: -1px;
	background: var(--vdg-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207 381.5L12.7 187.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0L224 284.5l154.7-154c9.4-9.3 24.5-9.3 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 381.5c-9.4 9.4-24.6 9.4-33.9 0z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207 381.5L12.7 187.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0L224 284.5l154.7-154c9.4-9.3 24.5-9.3 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 381.5c-9.4 9.4-24.6 9.4-33.9 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.vdg-nav .vdg-menu > li > a::after {
	margin-bottom: -3px;
}

/* Dropdown panel. padding-top on the wrapper bridges the 10px hover gap. */
.vdg-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	box-sizing: border-box;
	padding: 25px 20px 25px 15px;
	margin-top: 3px;
	background: var(--vdg-mint);
	border-radius: 5px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s, transform .2s, visibility 0s .2s;
}

.vdg-nav .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -3px;
	height: 3px;
}

.vdg-nav .vdg-menu > li:hover > .sub-menu,
.vdg-nav .vdg-menu > li:focus-within > .sub-menu,
.vdg-nav .vdg-menu > li.vdg-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .2s, transform .2s;
}

.vdg-nav .sub-menu a {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
}

.vdg-nav .sub-menu a:hover,
.vdg-nav .sub-menu a:focus-visible {
	color: #575858;
}

/* --- Tablet --------------------------------------------------------------- */

@media (max-width: 1024px) {
	.vdg-header__inner {
		padding: 0 30px;
	}

	.vdg-header__logo {
		flex-basis: 177px;
		min-height: 61px;
		background-size: 150px auto;
	}

	.vdg-header__logo:hover {
		transform-origin: 85px 50%;
	}

	.vdg-nav {
		flex-basis: 75%;
	}
}

/* --- Mobile: logo + toggle, menu lives in the drawer ---------------------- */

@media (max-width: 767px) {
	.vdg-header {
		background: transparent;
	}

	.vdg-header__inner {
		justify-content: space-between;
		align-items: flex-start;
		padding: 0 10px;
	}

	.vdg-header__logo {
		flex: 0 0 170px;
		min-height: 100px;
		background-position: 10px 31px;
	}

	.vdg-nav {
		display: none;
	}

	.vdg-header__toggle {
		display: block;
		flex: none;
		width: 54px;
		height: 24px;
		margin: 31px 13px 0 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: url("https://dzkqwmxzv16vl.cloudfront.net/toggle.svg") no-repeat center / contain;
		cursor: pointer;
	}
}

/* --- Drawer --------------------------------------------------------------- */

.vdg-drawer[hidden] {
	display: none;
}

.vdg-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	justify-content: flex-end;
	font-family: var(--vdg-font);
}

.vdg-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .8);
	animation: vdg-fade .3s ease both;
}

.vdg-drawer__panel {
	position: relative;
	box-sizing: border-box;
	width: 80vw;
	height: 100%;
	overflow-y: auto;
	display: flex;
	align-items: center;
	padding: 0 20px 20px 30px;
	background: var(--vdg-blush);
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
	animation: vdg-in-right .6s cubic-bezier(.16, 1, .3, 1) both;
}

.vdg-drawer.is-closing .vdg-drawer__panel {
	animation: vdg-out-right .3s ease both;
}

.vdg-drawer.is-closing .vdg-drawer__backdrop {
	animation: vdg-fade .3s ease reverse both;
}

.vdg-drawer__close {
	position: absolute;
	top: 4%;
	right: 7%;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.vdg-drawer__close svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--vdg-ink);
	stroke-width: 3.2;
}

/* Hello Elementor paints `button:hover/:focus` #c36 (and iOS keeps :hover after a tap). */
.vdg-header button.vdg-header__toggle:hover,
.vdg-header button.vdg-header__toggle:focus,
.vdg-drawer button.vdg-drawer__close:hover,
.vdg-drawer button.vdg-drawer__close:focus {
	background-color: transparent;
	color: inherit;
}

.vdg-drawer__nav {
	padding-left: 10px;
	width: 100%;
}

.vdg-drawer .vdg-menu,
.vdg-drawer .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vdg-drawer .vdg-drawer__nav a {
	display: inline-flex;
	align-items: center;
	padding: 18px 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--vdg-ink);
	text-decoration: none;
}

.vdg-drawer .menu-item-has-children > a::after {
	margin: 0 0 0 10px;
	top: 1px;
	transition: transform .2s;
}

.vdg-drawer .vdg-open > a::after {
	transform: rotate(180deg);
}

.vdg-drawer .sub-menu {
	display: none;
	padding-left: 16px;
	margin-top: -6px;
	margin-bottom: 6px;
}

.vdg-drawer .vdg-open > .sub-menu {
	display: block;
}

.vdg-drawer .sub-menu a {
	padding: 10px 0;
	font-size: 20px;
	font-weight: 600;
}

html.vdg-drawer-open {
	overflow: hidden;
}

@keyframes vdg-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes vdg-in-right {
	from { opacity: 0; transform: translateX(40px); }
	to { opacity: 1; transform: none; }
}

@keyframes vdg-out-right {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateX(40px); }
}

@media (prefers-reduced-motion: reduce) {
	.vdg-drawer__panel,
	.vdg-drawer__backdrop,
	.vdg-nav .sub-menu {
		animation: none !important;
		transition: none !important;
	}
}