/**
 * Navigation Styles
 *
 * Custom styles for the WordPress Navigation block, specifically targeting
 * the dropdown submenu behaviour, layout, and typography.
 *
 * @package TravelVip
 * @since   1.0.0
 */

/* ==========================================================================
   1. Submenu Container
   ========================================================================== */

/**
 * Overrides the default submenu container to match the TravelVip design:
 * white background, subtle shadow, left-aligned relative to the parent item,
 * and offset 15px below the trigger to create visual breathing room.
 */
.wp-block-navigation__submenu-container {
	background-color: #ffffff;
	color: #64748b;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	padding: 10px;
	min-width: 280px;

	/* Align dropdown to the left edge of the parent item */
	left: 0 !important;
	right: auto !important;

	/* Push dropdown 15px below the navigation bar */
	top: calc(100% + 15px) !important;
}

/* ==========================================================================
   2. Invisible Bridge (Hover Gap Fix)
   ========================================================================== */

/**
 * Creates an invisible hover-sensitive area above the dropdown that bridges
 * the 15px gap between the nav item and the submenu container.
 * Without this, the mouse loses focus while crossing the gap and closes the menu.
 */
.wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -20px;    /* Extends upward to cover the gap */
	left: 0;
	width: 100%;
	height: 25px;  /* Tall enough to reach the parent nav item */
	background: transparent;
	display: block;
	z-index: -1;   /* Sits behind the menu content */
}

/* ==========================================================================
   3. Submenu Item Link
   ========================================================================== */

/**
 * Stacks the label and description vertically inside each submenu link,
 * with smooth background-colour transition on hover.
 */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 12px 15px;
	text-decoration: none;
	transition: background-color 0.2s ease;
	border-radius: 4px;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: #f8fafc;
}

/* ==========================================================================
   4. Submenu Item Label (Service Title)
   ========================================================================== */

/**
 * Uses Playfair Display (mapped via theme.json) for the service name,
 * ensuring visual hierarchy over the description text below.
 */
.wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: 16px;
	font-weight: 400;
	color: #0A1A2F;
	line-height: 1.2;
}

/* ==========================================================================
   5. Submenu Item Description
   ========================================================================== */

/**
 * Secondary text rendered below the service title inside each dropdown item.
 * Smaller, muted, and uses Inter for readability at small sizes.
 */
.menu-item-description {
	font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
	font-size: 12px;
	font-weight: 400;
	color: #64748b;
	line-height: 1.4;
	display: block;
}

/* ==========================================================================
   6. Submenu Item Separators
   ========================================================================== */

/**
 * Light hairline border between submenu items.
 * The last item has no bottom border to avoid a double-border with the container.
 */
.wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
	border-bottom: none;
}