/* ==========================================================================
   Desktop Dropdown Navigation — Story 1.5
   Royal Emerald design system
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dropdown container — hidden by default, desktop only (AC-1, AC-3, AC-8, AC-9)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

	.vt-primary-nav .wp-block-navigation__submenu-container {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		padding: 0.75rem 0;
		background-color: var(--wp--preset--color--cream, #faf8f3);
		box-shadow: 0 4px 12px rgba(26, 58, 42, 0.15);
		border-radius: 4px;
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
		list-style: none;
		margin: 0;
	}

	/* Show on hover/focus-within (AC-1, AC-5) */
	.vt-primary-nav .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
	.vt-primary-nav .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* --------------------------------------------------------------------------
	   Dropdown items — spacing, typography, hover states (AC-2, AC-4)
	   -------------------------------------------------------------------------- */
	.vt-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 0.75rem 1.5rem;
		min-height: 44px;
		color: var(--wp--preset--color--emerald, #1a3a2a) !important;
		font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: 0.01em;
		text-transform: none;
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.vt-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.vt-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background-color: rgba(26, 58, 42, 0.05);
		color: var(--wp--preset--color--gold, #8a7040) !important;
	}

	/* --------------------------------------------------------------------------
	   Focus-visible indicators (AC-10)
	   -------------------------------------------------------------------------- */
	.vt-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid var(--wp--preset--color--gold, #8a7040) !important;
		outline-offset: 2px;
	}

	/* --------------------------------------------------------------------------
	   Parent item indicator — subtle arrow for items with children
	   -------------------------------------------------------------------------- */
	.vt-primary-nav .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
		content: '▾';
		margin-left: 0.35rem;
		opacity: 0.6;
		font-size: 0.75rem;
		vertical-align: middle;
	}

	/* --------------------------------------------------------------------------
	   Reduced motion (AC-9)
	   -------------------------------------------------------------------------- */
	@media (prefers-reduced-motion: reduce) {
		.vt-primary-nav .wp-block-navigation__submenu-container {
			transition: none;
		}
	}
}

/* --------------------------------------------------------------------------
   Mobile/Tablet guard — ensure dropdowns are hidden and don't interfere (AC-8)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.vt-primary-nav .wp-block-navigation__submenu-container {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: transparent;
		padding: 0;
	}
}