/**
 * VikPrint — stylish header dropdown (Services)
 * Brand: #FFCB05 yellow, #0056A4 blue, dark text
 */

#header .menu .sub-menu,
.ct-header .menu .sub-menu {
	--vp-dd-bg: #fffef9;
	--vp-dd-border: rgba(0, 0, 0, 0.08);
	--vp-dd-text: #1a1a1a;
	--vp-dd-muted: #666;
	--vp-dd-brand: #ffcb05;
	--vp-dd-brand-soft: rgba(255, 203, 5, 0.18);
	--vp-dd-blue: #0056a4;

	min-width: 300px !important;
	width: max-content !important;
	max-width: min(420px, 92vw) !important;
	padding: 0.45rem 0 !important;
	/* No gap — otherwise hover is lost before reaching the menu */
	margin-top: 0 !important;
	transform: none !important;

	background: var(--vp-dd-bg) !important;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, transparent 40%),
		linear-gradient(90deg, rgba(255, 203, 5, 0.07) 0%, transparent 28%) !important;
	border: 1px solid var(--vp-dd-border) !important;
	border-radius: 10px !important;
	box-shadow:
		0 4px 6px rgba(0, 0, 0, 0.04),
		0 14px 32px rgba(0, 0, 0, 0.1) !important;

	overflow: visible;
}

/* Kill Blocksy slide/gap animation that opens a dead zone under the trigger */
#header .menu-item-has-children > .sub-menu,
#header .menu-item-has-children:hover > .sub-menu,
#header .menu-item-has-children:focus-within > .sub-menu,
#header .menu-item-has-children.ct-open > .sub-menu,
.ct-header .menu-item-has-children > .sub-menu,
.ct-header .menu-item-has-children:hover > .sub-menu,
.ct-header .menu-item-has-children:focus-within > .sub-menu {
	margin-top: 0 !important;
	transform: none !important;
	translate: none !important;
}

#header .menu-item-has-children:hover > .sub-menu,
#header .menu-item-has-children:focus-within > .sub-menu,
#header .menu-item-has-children.ct-open > .sub-menu,
#header .menu-item-has-children.ct-active > .sub-menu,
.ct-header .menu-item-has-children:hover > .sub-menu,
.ct-header .menu-item-has-children:focus-within > .sub-menu,
.ct-header .menu-item-has-children.ct-active > .sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	/* Don't animate position — that recreates the dead zone */
	transition: opacity 0.15s ease, visibility 0.15s ease !important;
}

/* Overlap trigger so the cursor never crosses empty air */
#header .menu-item-has-children > .sub-menu,
.ct-header .menu-item-has-children > .sub-menu {
	top: calc(100% - 12px) !important;
	z-index: 200 !important;
}

/* Invisible hover bridge ABOVE the panel only (must not cover first item) */
#header .menu .sub-menu::after,
.ct-header .menu .sub-menu::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 16px;
	background: transparent;
	pointer-events: auto;
}

/* Yellow top accent bar */
#header .menu .sub-menu::before,
.ct-header .menu .sub-menu::before {
	content: "";
	display: block;
	height: 3px;
	margin: 0 0 0.15rem;
	border-radius: 10px 10px 0 0;
	background: linear-gradient(90deg, var(--vp-dd-brand) 0%, #ffd84d 55%, transparent 100%);
}

#header .menu .sub-menu .menu-item,
.ct-header .menu .sub-menu .menu-item {
	border: 0 !important;
	margin: 0 !important;
}

#header .menu .sub-menu .menu-item + .menu-item,
.ct-header .menu .sub-menu .menu-item + .menu-item {
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-style: solid !important;
}

#header .menu .sub-menu .ct-menu-link,
.ct-header .menu .sub-menu .ct-menu-link {
	position: relative;
	display: block !important;
	padding: 0.7rem 1.15rem 0.7rem 1.35rem !important;
	color: var(--vp-dd-text) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	letter-spacing: 0.01em;
	white-space: normal !important;
	text-decoration: none !important;
	background: transparent !important;
	border: 0 !important;
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		padding-left 0.18s ease;
}

/* Left yellow tick on hover / current */
#header .menu .sub-menu .ct-menu-link::before,
.ct-header .menu .sub-menu .ct-menu-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18%;
	bottom: 18%;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: var(--vp-dd-brand);
	opacity: 0;
	transform: scaleY(0.4);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

#header .menu .sub-menu .ct-menu-link:hover,
#header .menu .sub-menu .ct-menu-link:focus,
.ct-header .menu .sub-menu .ct-menu-link:hover,
.ct-header .menu .sub-menu .ct-menu-link:focus {
	color: var(--vp-dd-blue) !important;
	background: var(--vp-dd-brand-soft) !important;
	padding-left: 1.5rem !important;
}

#header .menu .sub-menu .ct-menu-link:hover::before,
#header .menu .sub-menu .ct-menu-link:focus::before,
.ct-header .menu .sub-menu .ct-menu-link:hover::before,
.ct-header .menu .sub-menu .ct-menu-link:focus::before {
	opacity: 1;
	transform: scaleY(1);
}

/* Current page — readable, brand-marked */
#header .menu .sub-menu .current-menu-item > .ct-menu-link,
#header .menu .sub-menu .current_page_item > .ct-menu-link,
.ct-header .menu .sub-menu .current-menu-item > .ct-menu-link,
.ct-header .menu .sub-menu .current_page_item > .ct-menu-link {
	color: var(--vp-dd-blue) !important;
	font-weight: 700 !important;
	background: var(--vp-dd-brand-soft) !important;
}

#header .menu .sub-menu .current-menu-item > .ct-menu-link::before,
#header .menu .sub-menu .current_page_item > .ct-menu-link::before,
.ct-header .menu .sub-menu .current-menu-item > .ct-menu-link::before,
.ct-header .menu .sub-menu .current_page_item > .ct-menu-link::before {
	opacity: 1;
	transform: scaleY(1);
}

/* Mobile off-canvas — VikPrint brand (navy panel, yellow/blue accents) */
.ct-panel,
#offcanvas {
	--vp-oc-bg: #0b1f33;
	--vp-oc-text: #ffffff;
	--vp-oc-muted: rgba(255, 255, 255, 0.72);
	--vp-oc-brand: #ffcb05;
	--vp-oc-blue: #0056a4;
}

.ct-panel .ct-panel-content,
#offcanvas .ct-panel-content {
	background-color: var(--vp-oc-bg) !important;
}

.ct-panel .mobile-menu > li > .ct-menu-link,
#offcanvas .mobile-menu > li > .ct-menu-link {
	color: var(--vp-oc-text) !important;
}

.ct-panel .mobile-menu > li.current-menu-item > .ct-menu-link,
.ct-panel .mobile-menu > li.current_page_item > .ct-menu-link,
#offcanvas .mobile-menu > li.current-menu-item > .ct-menu-link,
#offcanvas .mobile-menu > li.current_page_item > .ct-menu-link {
	color: var(--vp-oc-brand) !important;
	border-color: var(--vp-oc-brand) !important;
}

.ct-panel .sub-menu .ct-menu-link,
.mobile-menu .sub-menu .ct-menu-link,
#offcanvas .sub-menu .ct-menu-link {
	color: var(--vp-oc-muted) !important;
}

.ct-panel .sub-menu .ct-menu-link:hover,
.mobile-menu .sub-menu .ct-menu-link:hover,
#offcanvas .sub-menu .ct-menu-link:hover {
	color: var(--vp-oc-brand) !important;
}

.ct-panel .ct-header-cta .ct-button,
#offcanvas .ct-header-cta .ct-button {
	background-color: var(--vp-oc-blue) !important;
	color: #fff !important;
	border-color: var(--vp-oc-blue) !important;
}

.ct-panel .ct-header-cta .ct-button:hover,
#offcanvas .ct-header-cta .ct-button:hover {
	background-color: var(--vp-oc-brand) !important;
	color: #0b1f33 !important;
	border-color: var(--vp-oc-brand) !important;
}

.ct-panel .site-branding img,
#offcanvas .site-branding img {
	max-height: 42px !important;
	width: auto !important;
}