/*
 * TR Immigration - primary nav submenu
 *
 * The Resources dropdown: Visa Bulletin, Glossary, FAQ.
 *
 * These were written for the old navy header, so the links used --nav-link and
 * the dividers used --rule-light, both of which are pale colours meant to sit
 * on dark. Against the off-white header and the paper mobile panel they read as
 * faded to invisible. Now on the light treatment throughout.
 */

.elementor .tr-nav-item {
	position: relative;
	display: flex;
}

.elementor .tr-nav-sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	padding: var(--sp-2) 0;
	margin-top: var(--sp-1);
	background-color: var(--white);
	border: var(--hair) solid var(--rule);
	border-block-start: var(--edge) solid var(--gold);
	border-radius: var(--r-1);
	flex-direction: column;
	z-index: 30;
}

/* Keeps the dropdown open while the pointer crosses the gap below the link. */
.elementor .tr-nav-item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: var(--sp-2);
}

.elementor .tr-nav-item:hover .tr-nav-sub,
.elementor .tr-nav-item:focus-within .tr-nav-sub {
	display: flex;
}

.elementor .tr-nav-sub-link {
	font-family: var(--font-body);
	font-size: var(--fs-note);
	color: var(--navy-800);
	text-decoration: none;
	padding: var(--sp-2) var(--sp-4);
	white-space: nowrap;
}

.elementor .tr-nav-sub-link:hover,
.elementor .tr-nav-sub-link:focus-visible {
	color: var(--navy-900);
	background-color: var(--paper-dim);
}

@media (max-width: 767px) {
	.elementor .tr-nav-item { flex-direction: column; }
	.elementor .tr-nav-item .tr-nav-link { width: 100%; }

	.elementor .tr-nav-sub {
		display: flex;
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	/* Indented, with a gold marker so they read as belonging to Resources. */
	.elementor .tr-nav-sub-link {
		position: relative;
		font-size: var(--fs-base);
		color: var(--navy-800);
		padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-7);
		border-block-end: var(--hair) solid var(--rule);
		background-color: var(--paper-dim);
	}

	.elementor .tr-nav-sub-link::before {
		content: '';
		position: absolute;
		inset-inline-start: var(--sp-4);
		top: 50%;
		width: var(--sp-3);
		height: var(--hair);
		background: var(--gold);
	}

	.elementor .tr-nav-sub-link:hover,
	.elementor .tr-nav-sub-link:focus-visible {
		color: var(--navy-900);
		background-color: var(--shell);
	}
}