/* Group stylesheet for the navigation widgets. */

.alovesinh-brand-logo {
	display: inline-flex;
	align-items: center;
	gap: var( --alv-sp-2 );
}

.alovesinh-brand-logo-lifted {
	--alv-brand-mark-radius: var( --alv-r-2 );
	--alv-brand-mark-shadow: 0 6px 14px var( --alv-c-brand-veil );
}

.alovesinh-anchor .alv-w-brand-logo {
	display: flex;
}

/* Bare by default, as the design sets the mark in the header; only the footer lifts it off a dark
	ground, so the glow is a variable the widget switches on. The element name is in the selector
	because Elementor's `.elementor img { border-radius: 0; box-shadow: none }` outranks one class. */
.alovesinh-brand-logo img.alovesinh-brand-logo-image,
.alovesinh-mega-menu img.alovesinh-mega-menu-drawer-logo {
	flex-shrink: 0;

	/* Only the height belongs to the design: a wide wordmark keeps its own width instead of
		shrinking into the square an icon mark fills. */
	width: auto;
	max-width: 100%;
	height: var( --alv-brand-mark-size, 38px );
	border-radius: var( --alv-brand-mark-radius, 0 );
	object-fit: contain;
	box-shadow: var( --alv-brand-mark-shadow, none );
}

.alovesinh-brand-logo-name {
	font-size: var( --alv-fs-4 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-tight-1 );
	color: var( --alv-block-title );
}

/* Tighter than the shared row and set in the caption size, which is what tells a reader the trail
	is scaffolding rather than content. The last crumb is a span, so only the links answer hover:
	a hover on every crumb would paint the current page as a link. */
.alovesinh-breadcrumb {
	--alv-row-wrap: wrap;
	gap: 8px;
	margin-bottom: var( --alv-sp-3 );
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

.alovesinh-breadcrumb a:hover {
	color: var( --alv-c-brand-deep );
}

/* Both rows are centred wrapping strips, so the row rules are written once and each strip states
	its own gap and its own spacing above: written twice, the two strips drift apart when one is tuned. */
.alovesinh-filter-links,
.alovesinh-pagination {
	--alv-row-wrap: wrap;
	justify-content: center;
}

/* The source design leaves this row's cross axis alone, so its chips stretch to one another's
	height; centring them would break the row apart the moment one chip wraps to two lines. */
.alovesinh-filter-links {
	--alv-row-align: stretch;

	gap: var( --alv-sp-2 );
	margin-bottom: var( --alv-sp-4 );
}

/* The source design's chip is inline-flex; left as a plain inline anchor every chip came out
	2-4px narrower than the demo. The floor is named too, the way the page box beside it names one. */
.alovesinh-filter-links-link {
	display: inline-flex;
	align-items: center;
	min-height: var( --alv-touch );
	padding: 10px 18px;
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-semibold );
	white-space: nowrap;
	color: var( --alv-c-text-2 );
	background: var( --alv-c-white );
	transition: border-color var( --alv-dur-1 ) ease, color var( --alv-dur-1 ) ease;
}

.alovesinh-filter-links-link:hover {
	border-color: var( --alv-c-brand );
	color: var( --alv-c-brand-deep );
}

.alovesinh-filter-links-link-current {
	border-color: var( --alv-c-brand-deep );
	color: var( --alv-c-white );
	background: var( --alv-c-brand-deep );
}

.alovesinh-pagination {
	gap: var( --alv-sp-1 );
	margin-top: var( --alv-sp-5 );
}

/* A page box is a touch target before it is a number, so the 44px floor holds even for
	a single digit. */
.alovesinh-pagination-page {
	display: grid;
	place-items: center;
	min-width: var( --alv-touch );
	min-height: var( --alv-touch );
	padding: 0 var( --alv-sp-2 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-2 );
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-c-text-2 );
	background: var( --alv-c-white );
}

.alovesinh-pagination-page:hover {
	border-color: var( --alv-c-brand );
	color: var( --alv-c-brand-deep );
}

.alovesinh-pagination-page-current {
	border-color: var( --alv-c-brand-deep );
	color: var( --alv-c-white );
	background: var( --alv-c-brand-deep );
}

/* The skip mark is not a target: a boxed ellipsis reads as a page the reader can open. */
.alovesinh-pagination-gap {
	display: grid;
	place-items: center;
	min-height: var( --alv-touch );
	padding: 0 var( --alv-sp-1 );
	color: var( --alv-c-text-muted );
}

.alovesinh-mega-menu {
	--alv-menu-quick: 0.18s;
	--alv-menu-slow: 0.24s;

	/* A hold, not motion, so the reduced-motion rule leaves it alone while the pointer crosses the header gap.
		Written in seconds: the script scales it by a thousand. */
	--alv-menu-grace: var( --alv-menu-quick );
	--alv-menu-intent: var( --alv-menu-quick );
	--alv-menu-card-radius: 14px;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
}

/* Elementor gives a full-width child container `width: 100%`, so the cluster beside the bar takes
	the whole header frame and lies over the last menu items, which then cannot be clicked. Beside the bar
	it must hug. */
.alv-w-mega-menu ~ .e-con-full.e-con-full {
	flex-grow: 0;
	width: auto;
}

.alovesinh-mega-menu-frame {
	display: flex;
	align-items: center;
}

.alovesinh-mega-menu-list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alovesinh-mega-menu-link {
	display: flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	padding: 10px 14px;
	border: 0;
	border-radius: var( --alv-r-1 );
	font-family: inherit;
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-medium );
	color: var( --alv-c-text-2 );
	background: transparent;
	cursor: pointer;
	transition: color var( --alv-menu-quick ) ease, background var( --alv-menu-quick ) ease;
}

.alovesinh-mega-menu-link:hover,
.alovesinh-mega-menu-link[aria-expanded="true"] {
	color: var( --alv-c-brand-deep );
	background: var( --alv-c-brand-tint );
}

.alovesinh-mega-menu-arrow {
	width: 14px;
	height: 14px;
	transition: transform var( --alv-menu-quick ) ease;
}

.alovesinh-mega-menu-link[aria-expanded="true"] .alovesinh-mega-menu-arrow {
	transform: rotate( 180deg );
}

/* Anchored to the header's content frame, not to the button: anchoring to the button pushes a
	920px panel past the viewport between 981px and 1240px and scrolls the whole page sideways. */
.alovesinh-mega-menu-panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;

	/* Elementor positions every widget, and the widgets after the header would paint over the panel. */
	z-index: var( --alv-z-2 );
	visibility: hidden;
	max-width: 920px;
	margin-inline: auto;

	/* Padding, not margin: the space above the card belongs to the panel, so a pointer in it is already back
		inside the item; only the header's own gap above is left to the close delay. */
	padding-top: 10px;
	opacity: 0;
	transform: translateY( -8px );
	transition: opacity var( --alv-menu-quick ) ease, transform var( --alv-menu-quick ) ease, visibility var( --alv-menu-quick );
}

.alovesinh-mega-menu-item-open .alovesinh-mega-menu-panel {
	visibility: visible;
	opacity: 1;
	transform: translateY( 0 );
}

.alovesinh-mega-menu-panel-inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 260px;
	gap: 24px;
	padding: var( --alv-sp-3 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-4 );
	background: var( --alv-c-white );
	box-shadow: var( --alv-sh-3 );
}

.alovesinh-mega-menu-card-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alovesinh-mega-menu-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: var( --alv-sp-2 );
	border: var( --alv-bd-hairline ) solid transparent;
	border-radius: var( --alv-menu-card-radius );
	transition: border-color var( --alv-menu-quick ) ease, background var( --alv-menu-quick ) ease, transform var( --alv-menu-quick ) ease;
}

.alovesinh-mega-menu-card:hover {
	border-color: color-mix( in srgb, var( --alv-c-brand ) 35%, transparent );
	background: color-mix( in srgb, var( --alv-c-brand ) 5%, transparent );
	transform: translateY( -2px );
}

/* Same reason as the brand mark above: this must outrank Elementor's own image reset, which
	would otherwise give the thumbnail its natural height and square corners. */
.alovesinh-mega-menu img.alovesinh-mega-menu-card-image {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var( --alv-r-2 );
	object-fit: cover;
}

/* A decorative tile nobody clicks on its own — deliberately NOT --alv-touch even though both
	are 44px: sharing them would inflate this tile whenever the real buttons grow. */
.alovesinh-mega-menu-card-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var( --alv-r-2 );
	color: var( --alv-c-brand-deep );
	background: color-mix( in srgb, var( --alv-c-brand ) 10%, transparent );
}

.alovesinh-mega-menu-card-icon svg {
	width: 20px;
	height: 20px;
}

.alovesinh-mega-menu-card-text {
	min-width: 0;
}

.alovesinh-mega-menu-card-name {
	display: block;
	margin-bottom: 4px;
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-bold );
	color: var( --alv-c-ink );
}

.alovesinh-mega-menu-card-description {
	display: block;
	font-size: var( --alv-fs-2 );
	line-height: var( --alv-lh-base );
	color: var( --alv-c-text-muted );
}

.alovesinh-mega-menu-aside {
	display: flex;
	flex-direction: column;
	gap: var( --alv-sp-2 );
	padding: var( --alv-sp-3 );
	border-radius: var( --alv-r-3 );
	background: var( --alv-c-bg-light );
}

.alovesinh-mega-menu-aside-description {
	margin: 0;
	font-size: 14px;
	line-height: var( --alv-lh-copy );
	color: var( --alv-c-text-2 );
}

.alovesinh-mega-menu-drawer-open,
.alovesinh-mega-menu-drawer-close,
.alovesinh-mega-menu-drawer-head,
.alovesinh-mega-menu-quick-call,
.alovesinh-mega-menu-drawer-foot,
.alovesinh-mega-menu-overlay {
	display: none;
}

/* A shadow, not a heavier weight: the header row has 6px to spare, and a bolder label pushes the phone number
	and the booking button onto two lines. */
.alovesinh-mega-menu-link[aria-current="page"] {
	color: var( --alv-c-brand-deep );
	text-shadow: 0.4px 0 0 currentcolor, -0.4px 0 0 currentcolor;
}

.alovesinh-mega-menu-link:focus-visible,
.alovesinh-mega-menu-card:focus-visible,
.alovesinh-mega-menu-drawer-open:focus-visible,
.alovesinh-mega-menu-drawer-close:focus-visible {
	outline: 2px solid var( --alv-c-brand-deep );
	outline-offset: 2px;
}

/* 1240px is the content frame width: one row needs 1241px for the logo, seven items, the phone
	number and the booking button; anything narrower wraps the labels. */
@media ( max-width: 1240px ) {

	.alovesinh-mega-menu {
		justify-content: flex-end;
	}

	/* The row's flex item is Elementor's widget wrapper, not the nav inside it, so order and the
		growth rules have to sit here: on the nav the row never sees them and the hamburger stays
		stranded between the logo and the header cluster instead of ending the row. */
	.alv-w-mega-menu.alv-w-mega-menu {
		flex: 0 0 auto;
		order: 3;
		margin-left: auto;
	}

	.alovesinh-mega-menu-drawer-open {
		display: grid;
		place-items: center;
		width: var( --alv-touch );
		height: var( --alv-touch );
		border: var( --alv-bd-hairline ) solid var( --alv-c-border );
		border-radius: var( --alv-r-2 );
		color: var( --alv-c-ink );
		background: var( --alv-c-white );
	}

	.alovesinh-mega-menu-quick-call {
		display: flex;
		align-items: center;
		gap: var( --alv-sp-2 );
		padding: var( --alv-sp-2 );
		border-radius: var( --alv-menu-card-radius );
		color: var( --alv-c-white );
		background: linear-gradient( 135deg, var( --alv-c-brand ) 0%, var( --alv-c-brand-deep ) 100% );
	}

	.alovesinh-mega-menu-quick-call-icon {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		border-radius: var( --alv-r-2 );
		background: color-mix( in srgb, var( --alv-c-white ) 18%, transparent );
	}

	/* 12px, a step below the shared caption size: the label sits above a 19px number inside a
		coloured tile, where the caption size reads as a second line of content rather than a tag. */
	.alovesinh-mega-menu-quick-call-label {
		display: block;
		font-size: 12px;
		letter-spacing: var( --alv-tr-wide-1 );
		text-transform: uppercase;
		opacity: 0.85;
	}

	.alovesinh-mega-menu-quick-call-number {
		display: block;
		font-size: 19px;
		font-weight: var( --alv-fw-extrabold );
		letter-spacing: var( --alv-tr-tight-1 );
	}

	.alovesinh-mega-menu-frame {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: var( --alv-z-4 );
		display: flex;
		visibility: hidden;
		overflow-y: auto;
		flex-direction: column;

		/* Looks like the default but undoes the bar's centring above, which in a column shrinks every
			row of the drawer to its text and pulls it into the middle. */
		align-items: stretch;
		gap: 8px;
		width: min( 380px, 86vw );
		padding: var( --alv-sp-3 );
		background: var( --alv-c-white );
		box-shadow: var( --alv-sh-3 );
		transform: translateX( 100% );
		transition: transform var( --alv-menu-slow ) ease, visibility var( --alv-menu-slow );
	}

	.admin-bar .alovesinh-mega-menu-frame {
		top: var( --wp-admin--admin-bar--height, 0 );
	}

	.alovesinh-mega-menu-open .alovesinh-mega-menu-frame {
		visibility: visible;
		transform: none;
	}

	.alovesinh-mega-menu-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: var( --alv-sp-2 );
		border-bottom: var( --alv-bd-hairline ) solid var( --alv-c-border );
	}

	.alovesinh-mega-menu-drawer-brand {
		display: flex;
		align-items: center;
		gap: var( --alv-sp-2 );
		font-size: var( --alv-fs-4 );
		font-weight: var( --alv-fw-extrabold );
		color: var( --alv-c-ink );
	}

	.alovesinh-mega-menu-drawer-close {
		display: grid;
		place-items: center;
		width: var( --alv-touch );
		height: var( --alv-touch );
		border: 0;
		border-radius: var( --alv-r-2 );
		color: var( --alv-c-text-2 );
		background: var( --alv-c-bg-light );
		cursor: pointer;
	}

	.alovesinh-mega-menu-list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	/* A button shrinks to its label where a link fills the row, so the full width is set for both:
		otherwise the arrow sits against the words and the right half of the row takes no tap. */
	.alovesinh-mega-menu-link {
		justify-content: space-between;
		width: 100%;
		min-height: 48px;
		padding: var( --alv-sp-2 );
		font-size: 16px;
		font-weight: var( --alv-fw-semibold );
	}

	.alovesinh-mega-menu-item + .alovesinh-mega-menu-item {
		border-top: var( --alv-bd-hairline ) solid var( --alv-c-border );
	}

	.alovesinh-mega-menu-panel {
		position: static;
		display: grid;
		grid-template-rows: 0fr;
		width: auto;
		padding-top: 0;
		transform: none;
		transition: grid-template-rows var( --alv-menu-slow ) ease, opacity var( --alv-menu-quick ) ease, visibility var( --alv-menu-quick );
	}

	.alovesinh-mega-menu-item-open .alovesinh-mega-menu-panel {
		grid-template-rows: 1fr;
		transform: none;
	}

	.alovesinh-mega-menu-panel-inner {
		overflow: hidden;
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --alv-sp-2 );
		min-height: 0;
		padding: 0 0 var( --alv-sp-2 );
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.alovesinh-mega-menu-card-grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.alovesinh-mega-menu-card {
		padding: 10px;
		border-color: var( --alv-c-border );
	}

	.alovesinh-mega-menu-drawer-foot {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: auto;
		padding-top: 16px;
		padding-bottom: env( safe-area-inset-bottom );
		border-top: var( --alv-bd-hairline ) solid var( --alv-c-border );
	}

	.alovesinh-mega-menu-drawer-hours {
		font-size: var( --alv-fs-2 );
		text-align: center;
		color: var( --alv-c-text-muted );
	}

	.alovesinh-mega-menu-drawer-button {
		justify-content: center;
	}

	.alovesinh-mega-menu-drawer-social {
		display: flex;
		justify-content: center;
		gap: 10px;
	}

	/* Full touch size even though the icon is 20px: this row sits at the very bottom of a drawer,
		which is where a thumb lands least accurately. */
	.alovesinh-mega-menu-drawer-social-link {
		width: var( --alv-touch );
		height: var( --alv-touch );
		border-radius: var( --alv-r-circle );
		color: var( --alv-c-text-2 );
		background: var( --alv-c-bg-light );
	}

	/* The source design draws these as 20px inline drawings; the icon library hands over artwork
		at its own size and in its own black, which fills the whole 44px tile and hides it. */
	.alovesinh-mega-menu-drawer-social-link svg {
		width: 20px;
		height: 20px;
		fill: currentcolor;
	}

	.alovesinh-mega-menu-drawer-social-link-zalo {
		color: var( --alv-c-white );
		background: var( --alv-c-zalo );
	}

	.alovesinh-mega-menu-overlay {
		position: fixed;
		inset: 0;
		z-index: var( --alv-z-3 );
		display: block;
		visibility: hidden;
		background: color-mix( in srgb, var( --alv-c-ink ) 45%, transparent );
		opacity: 0;
		transition: opacity var( --alv-menu-slow ) ease, visibility var( --alv-menu-slow );
	}

	.alovesinh-mega-menu-open .alovesinh-mega-menu-overlay {
		visibility: visible;
		opacity: 1;
	}

	.alovesinh-mega-menu-scroll-lock {
		overflow: hidden;
	}
}

.alovesinh-chan-trang .alovesinh-brand-logo {
	margin-bottom: var( --alv-sp-2 );
}

.alovesinh-chan-trang .alovesinh-brand-logo-name {
	color: var( --alv-c-white );
}

@media ( prefers-reduced-motion: reduce ) {

	.alovesinh-mega-menu-panel,
	.alovesinh-mega-menu-frame,
	.alovesinh-mega-menu-overlay,
	.alovesinh-mega-menu-arrow,
	.alovesinh-mega-menu-card {
		transition: none;
	}
}