/*
 * The mega menu panels and the narrow dropdowns beside them.
 *
 * Two shapes come out of inc/mega-menu.php: a `.sonipat-mega` panel that carries a
 * `.sonipat-mega-grid` of children across several columns, and a `.sonipat-sub-list`
 * that keeps the old narrow dropdown. The sheet loads whenever a menu is assigned,
 * because a parent item that was never ticked still has a dropdown to reveal, and
 * this is the file that reveals it; a flat menu asks for nothing here.
 *
 * Three things come from the Customizer rather than from here, and none of them is
 * a length written into a rule: the column count, the gap and the panel width arrive
 * as `--sonipat-mega-*` custom properties printed on `:root`, the width mode and the
 * open mode arrive as classes on `<body>`, and a panel ticked in the menu editor
 * carries its own column count inline. `header-builder.css` has already hidden every
 * `.sub-menu`, so this sheet's whole job is to bring one back when it is open.
 *
 * Anchoring: a panel hangs from the header *row*, not from the word or arrow under
 * it, because a full-width panel that starts at the item's left edge would run off
 * the screen. That means a ticked item has to stop being a containing block
 * (`position: static` below) while an unticked one stays `relative` so its dropdown
 * still sits under it. Sticky and transparent headers are applied to the
 * template-part wrapper rather than to a row, so a row is free to be the anchor.
 */

/* The row is the panel's containing block. */
.sonipat-hb-row {
	position: relative;
}

.sonipat-nav-list > li {
	position: relative;
}

/* A ticked item hands the job back to the row; its panel is a direct child. */
.sonipat-nav-list > .sonipat-mega-parent {
	position: static;
}

/* --- opening -------------------------------------------------------------- */

/* `header-builder.css` hides `.sub-menu` with no way for a rule of the same
   specificity to un-hide it later in this sheet, so both selectors below carry the
   list class as well and outspecify it rather than relying on file order. */

/* A panel's wrapper is not a list, so nothing hides it: it paints its own
   background, border, shadow and padding, and two of them stacked in the same
   corner of the row means the closed one covers the open one's first row. It has
   to travel with the list inside it. */
.sonipat-nav-list > li > .sonipat-mega {
	display: none;
}

.sonipat-nav-list li.is-open > .sub-menu,
.sonipat-nav-list li.is-open > .sonipat-mega {
	display: block;
}

.sonipat-nav-list li.is-open > .sonipat-mega > .sonipat-mega-inner > .sonipat-mega-grid {
	display: grid;
}

/* Hover mode also answers to a real pointer and to the keyboard without any
   script, so a page whose JavaScript failed still shows its sub-menus. Click mode
   is excluded by name: a panel that appears under a pointer would make the owner's
   "on click of the arrow" setting untrue, and the arrow is what the script opens.

   A focused item that carries `.is-shut` is one Escape just closed. Both the pointer
   and the keyboard paths have to honour it, because the two are the same reader: a
   mouse resting on the word is exactly what a keyboard user pressing Escape is trying
   to put the panel away from, and a `:hover` rule with no guard would print it straight
   back so the key would appear to do nothing. The class is dropped by the script's own
   mouseenter, so leaving the word and coming back opens it again, and a page with no
   JavaScript never has the class to begin with.

   The arrow is excluded by name for the same reason the script ignores it: Escape
   hands focus back to that item's own arrow, which is inside the item, so plain
   `:focus-within` would print the panel again. */
@media (hover: hover) and (min-width: 961px) {
	body.sonipat-mega-open-hover .sonipat-nav-list > li:hover:not(.is-shut) > .sub-menu,
	body.sonipat-mega-open-hover .sonipat-nav-list > li:hover:not(.is-shut) > .sonipat-mega,
	body.sonipat-mega-open-hover .sonipat-nav-list > li:focus-within:not(.is-shut) > .sub-menu,
	body.sonipat-mega-open-hover .sonipat-nav-list > li:focus-within:not(.is-shut) > .sonipat-mega {
		display: block;
	}

	body.sonipat-mega-open-hover .sonipat-nav-list > li:hover:not(.is-shut) > .sonipat-mega > .sonipat-mega-inner > .sonipat-mega-grid,
	body.sonipat-mega-open-hover .sonipat-nav-list > li:focus-within:not(.is-shut) > .sonipat-mega > .sonipat-mega-inner > .sonipat-mega-grid {
		display: grid;
	}

	.sonipat-mega-grid > li:hover:not(.is-shut) > .sub-menu,
	.sonipat-mega-grid > li:focus-within:not(.is-shut) > .sub-menu {
		display: block;
	}
}

/* --- the arrow ------------------------------------------------------------ */

.sonipat-sub-toggle {
	align-items: center;
	aspect-ratio: 1;
	background: transparent;
	border: 0;
	/* A round chip rather than a rounded square: the arrow inside it is a chevron,
	   and a disc is the shape a visitor already reads as "this opens something". */
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	line-height: 0;
	padding: 0.32rem;
	transition: background-color 0.18s ease, color 0.18s ease;
	vertical-align: middle;
}

.sonipat-sub-toggle svg {
	transition: transform 0.2s var(--sonipat-ease);
}

.sonipat-sub-toggle:hover,
.sonipat-sub-toggle:focus-visible {
	background: var(--sonipat-wash);
	color: var(--sonipat-primary);
}

.sonipat-nav-list li.is-open > .sonipat-sub-toggle svg {
	transform: rotate(180deg);
}

/* --- the panel ------------------------------------------------------------ */

.sonipat-mega {
	background-color: var(--sonipat-surface);
	/* A brand line across the top edge, so the panel reads as something the site
	   made rather than a box the browser dropped down.
	   It is a background layer rather than a pseudo-element: only a background is
	   clipped by the panel's own corners for free, and the alternative — putting the
	   bar inside with `overflow: hidden` — would also clip a second-level dropdown
	   that a panel's own child opens below the panel's edge. */
	background-image: linear-gradient(90deg, var(--sonipat-primary), var(--sonipat-primary-hover));
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% 3px;
	border: 1px solid var(--sonipat-border);
	border-radius: var(--sonipat-radius);
	box-shadow: var(--sonipat-shadow-lift);
	left: 0;
	margin-inline: auto;
	right: 0;
	padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 1.8vw, 1.6rem) clamp(0.55rem, 1vw, 0.8rem);
	position: absolute;
	top: 100%;
	width: min(100%, 1200px);
	z-index: 20;
}

/* The content mode is the header's own container: 1200px of centred width, the
   same number header-builder.css gives .sonipat-hb-inner, so a panel's edges line
   up with the logo and the call to action instead of making a third measure. */
.sonipat-mega-inner {
	margin-inline: auto;
	max-width: none;
	position: relative;
}

body.sonipat-mega-full .sonipat-mega {
	border-inline: 0;
	border-radius: 0;
	border-top-width: 1px;
	width: 100%;
}

body.sonipat-mega-custom .sonipat-mega {
	width: min(100%, var(--sonipat-mega-max-width, 1140px));
}

/* Columns, filled downward first: the walker prints how many rows that needs, which
   is the one number CSS cannot work out for itself from a flat list of children.
   Filling down rather than across is what keeps a group of related links together in
   one column instead of scattering a pair across the panel. */
.sonipat-mega-grid {
	display: grid;
	gap: clamp(0.3rem, 0.8vw, 0.6rem) var(--sonipat-mega-gap, 24px);
	grid-auto-flow: column;
	grid-template-columns: repeat(var(--sonipat-mega-columns, 4), minmax(0, 1fr));
	grid-template-rows: repeat(var(--sonipat-mega-rows, 2), minmax(0, auto));
	list-style: none;
	margin: 0;
	padding: 0;
}

.sonipat-mega-grid > li {
	margin: 0;
	min-width: 0;
}

/* The cell: mark, then label. The anchor is the whole cell, so the pointer does not
   have to find the text itself. */
.sonipat-mega-grid a {
	align-items: center;
	border-radius: 12px;
	color: var(--sonipat-text);
	display: grid;
	font-size: 0.92rem;
	font-weight: 600;
	gap: 0.75rem;
	grid-template-columns: auto minmax(0, 1fr);
	line-height: 1.3;
	padding: 0.6rem 0.7rem;
	position: relative;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* A cell whose link matches no mark still has to put its label in the same column as
   every other one, or the panel's left edges would not line up. The class comes from
   the walker rather than from `:has()`, for the same reason `sonipat-mega-parent`
   does: a child theme has to be able to read what a panel is made of. */
.sonipat-mega-bare > a {
	grid-template-columns: minmax(0, 1fr);
	padding-left: calc(0.7rem + 34px + 0.75rem);
}

.sonipat-mega-chip {
	align-items: center;
	/* primary-soft, not the band's wash: the chip sits on the panel surface, and the
	   header band remaps --sonipat-wash to a neutral made from its own ink, which reads
	   grey here. --sonipat-primary-soft is purple on a light surface and already
	   strengthens to 0.22 inside a dark scope, so one token covers both. */
	background: var(--sonipat-primary-soft);
	border-radius: 10px;
	color: var(--sonipat-primary);
	display: flex;
	flex: none;
	height: 34px;
	justify-content: center;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s var(--sonipat-ease);
	width: 34px;
}

.sonipat-mega-grid a:hover,
.sonipat-mega-grid a:focus-visible {
	background: var(--sonipat-primary-soft);
	/* primary-hover, not primary: the label is now sitting on a purple wash rather than
	   on the panel, and #6A47ED over that wash measures 3.75:1. The deep tone is 5:1. */
	color: var(--sonipat-primary-hover);
}

.sonipat-mega-grid a:hover .sonipat-mega-chip,
.sonipat-mega-grid a:focus-visible .sonipat-mega-chip {
	background: var(--sonipat-primary);
	color: var(--sonipat-surface);
	transform: translateY(-1px);
}

.sonipat-mega-grid .current-menu-item > a {
	color: var(--sonipat-primary);
}

.sonipat-mega-desc {
	color: var(--sonipat-text-muted);
	display: block;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.5;
	/* Lines the blurb up under the label rather than under the chip. */
	padding: 0 0.7rem 0.5rem calc(34px + 0.75rem);
}

/* The way out of the panel: the parent page, named by whatever the owner called it
   in Appearance → Menus. */
.sonipat-mega-foot {
	border-top: 1px solid var(--sonipat-border);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	margin: clamp(0.5rem, 1vw, 0.8rem) 0 0;
	padding: clamp(0.55rem, 1vw, 0.8rem) 0.7rem 0.15rem;
	text-transform: uppercase;
}

.sonipat-mega-foot a {
	/* --sonipat-text-faint measured 4.32:1 on the panel surface, under the floor this
	   sheet holds every other link to. The line is small and uppercase, so it is the
	   muted tone rather than the faintest one the theme owns. */
	color: var(--sonipat-text-muted);
	display: inline-flex;
	font-weight: 600;
	gap: 0.45rem;
	text-decoration: none;
	transition: color 0.18s ease;
}

.sonipat-mega-foot a::after {
	border: solid currentColor;
	border-width: 0 1.6px 1.6px 0;
	content: "";
	height: 6px;
	margin-top: 0.15rem;
	transform: rotate(-45deg);
	transition: transform 0.18s var(--sonipat-ease);
	width: 6px;
}

.sonipat-mega-foot a:hover,
.sonipat-mega-foot a:focus-visible {
	color: var(--sonipat-primary);
}

.sonipat-mega-foot a:hover::after,
.sonipat-mega-foot a:focus-visible::after {
	transform: rotate(-45deg) translate(2px, -2px);
}

/* The panel is the anchor for a grandchild list, which stays a narrow dropdown
   under its parent even inside a wide panel. */
.sonipat-mega-grid > li {
	position: relative;
}

/* A column link that has a second level of its own carries its caret at the right
   edge of the link's own line. The arrow is printed after the link, and a
   description is a block under it, so an inline arrow would be pushed onto a line
   below the blurb instead of sitting beside the word it opens. */
.sonipat-mega-grid > li > .sonipat-sub-toggle {
	position: absolute;
	right: 0.35rem;
	top: 0.45rem;
}

.sonipat-mega-grid > li > a {
	padding-right: 1.7rem;
}

.sonipat-mega-grid .sub-menu {
	background: var(--sonipat-surface);
	border: 1px solid var(--sonipat-border);
	border-radius: var(--sonipat-radius-sm);
	box-shadow: var(--sonipat-shadow);
	display: none;
	left: 0;
	min-width: 210px;
	padding: 0.4rem;
	position: absolute;
	top: 100%;
	z-index: 21;
}

.sonipat-mega-grid li.is-open > .sub-menu {
	display: block;
}

/* --- the narrow dropdown -------------------------------------------------- */

.sonipat-sub-list {
	background: var(--sonipat-surface);
	border: 1px solid var(--sonipat-border);
	border-radius: var(--sonipat-radius-sm);
	box-shadow: var(--sonipat-shadow);
	display: none;
	list-style: none;
	margin: 0;
	min-width: 220px;
	padding: 0.4rem;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 20;
}

.sonipat-sub-list > li {
	margin: 0;
}

.sonipat-sub-list a {
	border-radius: 8px;
	color: var(--sonipat-text);
	display: block;
	font-size: 0.9rem;
	padding: 0.5rem 0.7rem;
	white-space: normal;
}

.sonipat-sub-list a:hover,
.sonipat-sub-list a:focus-visible {
	background: var(--sonipat-primary-soft);
	color: var(--sonipat-primary-hover);
}

/* The last item would otherwise get clipped at the edge of the header on a menu
   that runs to the trailing edge of the row. */
.sonipat-nav-list > li:last-child > .sonipat-sub-list {
	left: auto;
	right: 0;
}

/* --- arrival -------------------------------------------------------------- */

/* A display change cannot be transitioned, so the arrival is an animation that
   runs each time a panel is shown. The duration is the owner's number; "Nothing"
   and a reduced-motion reader both skip it. */
@keyframes sonipat-mega-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes sonipat-mega-slide {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

body.sonipat-mega-anim-fade .sonipat-nav-list li.is-open > .sub-menu,
body.sonipat-mega-anim-fade .sonipat-nav-list li.is-open > .sonipat-mega {
	animation: sonipat-mega-fade var(--sonipat-mega-duration, 220ms) var(--sonipat-ease);
}

body.sonipat-mega-anim-slide .sonipat-nav-list li.is-open > .sub-menu,
body.sonipat-mega-anim-slide .sonipat-nav-list li.is-open > .sonipat-mega {
	animation: sonipat-mega-slide var(--sonipat-mega-duration, 220ms) var(--sonipat-ease);
}

/* A CSS-only hover reveal should not flicker when the pointer crosses the few
   pixels between the word and the panel. */
.sonipat-mega::before,
.sonipat-sub-list::before {
	content: "";
	display: block;
	height: 12px;
	left: 0;
	position: absolute;
	right: 0;
	top: -12px;
}

/* --- phone and tablet ----------------------------------------------------- */

/* Below the drawer's breakpoint there is no hover and no width for columns: the nav
   element is already a full-width sheet hanging from the row, so a panel is asked to
   be plain, vertical content inside it. What it is no longer asked for is to be
   printed whether the reader wants it or not. A sheet that opens with all eight
   services already listed under Services is a wall of words that shoves About,
   Contact and Blog out of the window, so a parent's children stay shut until that
   parent is opened. The rules above that hide a closed list and reveal an open one
   are not width-gated, so the collapsed state costs nothing here: the drawer only
   has to give the arrow back and lay the line the arrow sits in. */
@media only screen and (max-width: 960px) {
	/* A thumb, not a pointer: the arrow is now the control over a list in the sheet,
	   so it takes the 44px target a phone menu is expected to offer. */
	.sonipat-nav.is-open .sonipat-sub-toggle {
		height: 44px;
		justify-content: center;
		position: static;
		width: 44px;
	}

	/* Word, then arrow, then the list under both. This covers a cell inside a panel
	   as well as a top-level item, which is why the caret keeps its own column rather
	   than the absolute corner it is placed in on a wide screen: inside the sheet the
	   line is one column wide and an arrow laid over it would sit on the label. */
	.sonipat-nav.is-open .menu-item-has-children {
		align-items: center;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	/* Both shapes a parent holds - the panel wrapper and the narrow dropdown - are
	   direct children of the item, so both have to be told to fall under the whole
	   line rather than under the arrow's column. */
	.sonipat-nav.is-open .menu-item-has-children > .sub-menu,
	.sonipat-nav.is-open .menu-item-has-children > .sonipat-mega {
		grid-column: 1 / -1;
	}

	/* The narrow dropdown is the same kind of floating panel as the mega, so it has
	   to be flattened the same way. Left absolutely placed it contributes no height
	   to the sheet, so the drawer's own background stops short and the last links
	   hang over the page below it. */
	.sonipat-mega,
	.sonipat-sub-list {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		min-width: 0;
		padding: 0;
		position: static;
		width: auto;
	}

	/* The children still have to read as children. */
	.sonipat-sub-list {
		padding-left: 0.9rem;
	}

	/* Nothing is absolutely placed inside the drawer, so the strip that bridged the
	   hover gap between a parent and its panel would only sit on top of the parent. */
	.sonipat-mega::before,
	.sonipat-sub-list::before {
		display: none;
	}

	/* The brand edge belongs to a floating card. Flattened into the sheet it would be
	   a stray rule above the first link, and the `background: transparent` shorthand
	   above already drops the gradient layer that paints it. */

	/* In the drawer the word that opens this list is also the link to that page, so a
		   second one at the foot is noise rather than an exit. */
	.sonipat-mega-foot {
		display: none;
	}

	.sonipat-mega-grid {
		display: block;
		padding-left: 0.9rem;
	}

	/* The rule above is the one a reader would expect to be enough, but a list in the
	   sheet is revealed by the same class a wide screen uses to un-hide its columns:
	   `.sonipat-nav-list li.is-open > … > .sonipat-mega-grid` out-specifies a plain
	   class selector, so opening Services on a phone would otherwise paint four
	   columns of colliding labels inside 390 pixels. */
	.sonipat-nav-list li.is-open > .sonipat-mega > .sonipat-mega-inner > .sonipat-mega-grid {
		display: block;
	}

	.sonipat-mega-grid .sub-menu {
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 0.9rem;
		position: static;
	}

	/* The sheet makes every link a block, which is what a plain list of words wants
	   and not what a cell is: its mark and its label are two columns of one grid, and
	   stacked they leave a chip floating above the name it belongs to. */
	.sonipat-nav.is-open .sonipat-mega-grid a {
		display: grid;
		font-size: 1rem;
		padding-block: 0.45rem;
	}

	.sonipat-nav.is-open .sonipat-sub-list a {
		font-size: 1rem;
		padding-block: 0.45rem;
	}

	.sonipat-mega-grid a,
	.sonipat-sub-list a {
		border-radius: 0;
	}

	/* Nothing is absolutely placed inside the drawer, so the room that was kept for
	   the caret goes back to the link. */
	.sonipat-mega-grid > li > a {
		padding-right: 0;
	}

	.sonipat-mega-desc {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.sonipat-mega-anim-fade .sonipat-nav-list li.is-open > .sub-menu,
	body.sonipat-mega-anim-fade .sonipat-nav-list li.is-open > .sonipat-mega,
	body.sonipat-mega-anim-slide .sonipat-nav-list li.is-open > .sub-menu,
	body.sonipat-mega-anim-slide .sonipat-nav-list li.is-open > .sonipat-mega {
		animation: none;
	}

	.sonipat-sub-toggle svg {
		transition: none;
	}
}