/*
 * Header & footer builder layout.
 *
 * The markup is produced by inc/header-builder.php, so every selector here maps
 * to a row, a slot or one of the palette elements. Colours come from the theme
 * tokens — `.sonipat-header` and `.sonipat-footer` already remap them for a dark
 * band in style.css — and a band the owner has painted arrives with its own
 * remapped family from `sonipat_it_band_css()`, so nothing here hard-codes one.
 *
 * Two things are driven by the builder rather than by a fixed design: which
 * devices an element or a band appears on (`sonipat-off-*`), and the size of the
 * logo and the social icons at each of those widths. Both use the same three
 * breakpoints the device switches in the Customizer are named after, so a switch
 * and this sheet can never disagree about what "tablet" means.
 */

/* --- rows ---------------------------------------------------------------- */

.sonipat-hb-inner,
.sonipat-fb-top,
.sonipat-fb-bottom-inner {
	margin-inline: auto;
	max-width: 1200px;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.sonipat-hb-row {
	border-bottom: 1px solid transparent;
}

/* A row the user has switched on but emptied (every element switched off, its
   social URLs left blank, or the lot of them hidden for this device) would
   otherwise show as a stray strip of band colour. `:has()` looks through the
   device classes, so a row that only holds phone-hidden elements collapses on a
   phone the same way an empty one does. */
.sonipat-hb-row:not(:has(.sonipat-el)) {
	display: none;
}

/* A slot takes the same treatment: an emptied one still carries flex-grow, so it
   would swallow the slack of the line and stop the menu button short of the edge
   with nothing at all inside it. */
.sonipat-hb-slot:not(:has(.sonipat-el)) {
	display: none;
}

@media only screen and (max-width: 1024px) {
	.sonipat-hb-row:not(:has(.sonipat-el:not( .sonipat-off-tablet ))) {
		display: none;
	}

	.sonipat-hb-slot:not(:has(.sonipat-el:not( .sonipat-off-tablet ))) {
		display: none;
	}
}

@media only screen and (max-width: 620px) {
	.sonipat-hb-row:not(:has(.sonipat-el:not( .sonipat-off-mobile ))) {
		display: none;
	}

	.sonipat-hb-slot:not(:has(.sonipat-el:not( .sonipat-off-mobile ))) {
		display: none;
	}
}

.sonipat-hb-above .sonipat-hb-inner {
	align-items: center;
	display: flex;
	gap: 0.4rem 1.4rem;
	min-height: 40px;
	padding-block: 0.4rem;
}

.sonipat-hb-primary .sonipat-hb-inner {
	display: flex;
	gap: var(--sonipat-gap);
	min-height: 68px;
	padding-block: 0.9rem;
}

.sonipat-hb-below .sonipat-hb-inner {
	display: flex;
	gap: 1.2rem;
	min-height: 46px;
	padding-block: 0.5rem;
}

.sonipat-hb-above {
	border-bottom-color: var(--sonipat-border);
	font-size: 0.82rem;
}

.sonipat-hb-slot {
	align-items: center;
	display: flex;
	flex: 1 1 0;
	gap: 0.9rem;
	min-width: 0;
}

.sonipat-hb-left {
	/* The identity block anchors the row. In an equal third it squeezes down
	   past its own logo image and drops the site name on top of it. */
	flex: 0 1 auto;
	justify-content: flex-start;
}

.sonipat-hb-center {
	flex: 1 1 auto;
	justify-content: center;
}

.sonipat-hb-right {
	flex: 0 1 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-left: auto;
}

/* --- elements ------------------------------------------------------------ */

.sonipat-el {
	align-items: center;
	display: flex;
	flex: 0 1 auto;
	gap: 0.6rem;
	min-width: 0;
}

.sonipat-el > * {
	margin: 0;
}

.sonipat-site-title {
	color: var(--sonipat-text);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.18rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.sonipat-site-title a {
	color: inherit;
	text-decoration: none;
}

.sonipat-site-tagline {
	border-left: 1px solid var(--sonipat-border-strong);
	color: var(--sonipat-text-faint);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	padding-left: 0.9rem;
	text-transform: uppercase;
}

/* The logo image keeps its own width; a shrinking slot must take the site name
   instead of sliding it across the wordmark. */
.sonipat-el-logo {
	flex: 0 0 auto;
}

.custom-logo-link {
	display: flex;
	line-height: 0;
}

.custom-logo {
	/* Height is the dimension a header row constrains, so the builder's sliders
	   drive it and the width follows the wordmark's own ratio. `object-fit` keeps
	   the picture undistorted where the max-width below has to cut in. */
	height: var(--sonipat-logo-h, 42px);
	width: auto;
	max-width: min(100%, 460px);
	object-fit: contain;
}

.sonipat-el a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

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

/* The top bar paints the header's translucent band, which composites to a mid
   purple — light enough that the muted text token drops to 3.7:1 there. Text on
   this row takes the full foreground colour, and the accent carries the hover. */
.sonipat-hb-above .sonipat-el a,
.sonipat-hb-above .sonipat-el-hours,
.sonipat-hb-above .sonipat-el-address {
	color: var(--sonipat-text);
}

.sonipat-hb-above .sonipat-el a:hover {
	color: var(--sonipat-secondary);
}

.sonipat-el-hours {
	color: var(--sonipat-text-muted);
	letter-spacing: 0.02em;
}

/* .sonipat-el-* is the wrapper the builder puts around every element, so the
   link itself carries its own class. Both selectors are .sonipat-el-scoped to
   out-specify the top-bar link hover rule above. */
.sonipat-el .sonipat-cta {
	background: var(--sonipat-primary);
	border: 1px solid var(--sonipat-primary);
	border-radius: 12px;
	color: #fff;
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.62em 1.25em;
	white-space: nowrap;
}

.sonipat-el .sonipat-cta:hover,
.sonipat-el .sonipat-cta:focus-visible {
	background: var(--sonipat-primary-hover);
	border-color: var(--sonipat-primary-hover);
	color: #fff;
}

.sonipat-el-address {
	color: var(--sonipat-text-muted);
	font-size: 0.9rem;
	font-style: normal;
	line-height: 1.6;
}

/* --- navigation ---------------------------------------------------------- */

.sonipat-nav {
	min-width: 0;
}

.sonipat-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2.4vw, 2.2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sonipat-nav-list a {
	color: var(--sonipat-text);
	font-size: 0.94rem;
	font-weight: 500;
	padding-block: 0.4rem;
	position: relative;
}

/* A bar that grows out of the word rather than a border under it: a border would add
   two pixels to the anchor's box and shift the whole row's baseline the moment
   something was hovered. `currentColor` picks up the brand ink the next rule sets, so
   the bar can never disagree with the colour of the word. */
.sonipat-nav-list > li > a::after {
	background: currentColor;
	bottom: 0.1rem;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s var(--sonipat-ease);
}

.sonipat-nav-list a:hover,
.sonipat-nav-list .current-menu-item > a {
	color: var(--sonipat-primary);
}

/* The page you are on, and the section you are inside: /services/seo/ still has to
   say that Services is where it came from. */
.sonipat-nav-list > li > a:hover::after,
.sonipat-nav-list > li > a:focus-visible::after,
.sonipat-nav-list > .current-menu-item > a::after,
.sonipat-nav-list > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.sonipat-nav-list .sub-menu {
	display: none;
}

.sonipat-nav-toggle {
	align-items: center;
	background: transparent;
	border: 1px solid var(--sonipat-border-strong);
	border-radius: 10px;
	color: inherit;
	display: none;
	flex-direction: column;
	gap: 4px;
	height: 38px;
	justify-content: center;
	padding: 0;
	width: 42px;
}

.sonipat-nav-toggle-bar,
.sonipat-nav-toggle-bar::before,
.sonipat-nav-toggle-bar::after {
	background: var(--sonipat-text);
	content: "";
	display: block;
	height: 2px;
	transition: transform 0.25s var(--sonipat-ease), opacity 0.2s ease;
	width: 18px;
}

.sonipat-nav-toggle-bar {
	position: relative;
}

.sonipat-nav-toggle-bar::before {
	left: 0;
	position: absolute;
	top: -6px;
	width: 18px;
}

.sonipat-nav-toggle-bar::after {
	left: 0;
	position: absolute;
	top: 6px;
	width: 18px;
}

.sonipat-nav-toggle[aria-expanded="true"] .sonipat-nav-toggle-bar {
	background: transparent;
}

.sonipat-nav-toggle[aria-expanded="true"] .sonipat-nav-toggle-bar::before {
	transform: translateY(6px) rotate(45deg);
}

.sonipat-nav-toggle[aria-expanded="true"] .sonipat-nav-toggle-bar::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* --- search -------------------------------------------------------------- */

.sonipat-el-search form {
	display: flex;
	gap: 0.4rem;
}

.sonipat-el-search input[type="search"] {
	background: var(--sonipat-wash);
	border: 1px solid var(--sonipat-border);
	border-radius: 10px;
	color: var(--sonipat-text);
	font-size: 0.9rem;
	padding: 0.5em 0.8em;
	width: min(220px, 40vw);
}

.sonipat-el-search input[type="submit"] {
	background: var(--sonipat-primary);
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-size: 0.85rem;
	padding: 0.5em 0.9em;
}

/* --- social -------------------------------------------------------------- */

/*
 * The icons are inline SVG drawn from each network's real mark, and the brand
 * colour arrives on the link as `--sonipat-social-brand` (with
 * `--sonipat-social-ink` where the network's own mark is not white). Which of
 * the four styles and four shapes are in use is a data attribute on the list, so
 * one rule per choice paints the whole set, and the size is a custom property per
 * device that the three media queries at the bottom of this sheet swap.
 */

.sonipat-social-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sonipat-social-item {
	display: flex;
}

.sonipat-social-link {
	align-items: center;
	border: 1px solid transparent;
	display: flex;
	height: var(--sonipat-social-size, 34px);
	justify-content: center;
	transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
	width: var(--sonipat-social-size, 34px);
}

.sonipat-social-svg {
	display: block;
	height: 56%;
	fill: var(--sonipat-social-ink, currentColor);
	width: 56%;
}

/* A network the theme has no mark for keeps two readable letters rather than an
   empty chip. */
.sonipat-social-mark {
	font-size: calc(var(--sonipat-social-size, 34px) * 0.34);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* Styles first, then shapes: a shape has to be able to take the chip away from
   any style at the same specificity. */
.sonipat-social-list[data-style="brand-fill"] .sonipat-social-link {
	background: var(--sonipat-social-brand);
	color: var(--sonipat-social-ink, #fff);
}

.sonipat-social-list[data-style="brand-fill"] .sonipat-social-svg {
	fill: var(--sonipat-social-ink, #fff);
}

.sonipat-social-list[data-style="brand"] .sonipat-social-link {
	color: var(--sonipat-social-brand);
}

.sonipat-social-list[data-style="brand"] .sonipat-social-svg {
	fill: var(--sonipat-social-brand);
}

.sonipat-social-list[data-style="neutral"] .sonipat-social-link {
	border-color: var(--sonipat-border-strong);
	color: var(--sonipat-text-muted);
}

.sonipat-social-list[data-style="neutral"] .sonipat-social-svg {
	fill: var(--sonipat-text-muted);
}

.sonipat-social-list[data-style="plain"] .sonipat-social-link {
	color: var(--sonipat-text-muted);
}

.sonipat-social-list[data-style="plain"] .sonipat-social-svg {
	fill: var(--sonipat-text-muted);
}

/* A brand-filled chip is already the network's own colour, so it brightens; the
   other three take it on hover, which is the moment the set shows its range. */
.sonipat-social-link:hover,
.sonipat-social-link:focus-visible {
	opacity: 0.86;
}

.sonipat-social-list[data-style="brand"] .sonipat-social-link:hover,
.sonipat-social-list[data-style="brand"] .sonipat-social-link:focus-visible,
.sonipat-social-list[data-style="neutral"] .sonipat-social-link:hover,
.sonipat-social-list[data-style="neutral"] .sonipat-social-link:focus-visible,
.sonipat-social-list[data-style="plain"] .sonipat-social-link:hover,
.sonipat-social-list[data-style="plain"] .sonipat-social-link:focus-visible {
	color: var(--sonipat-social-brand);
	opacity: 1;
}

.sonipat-social-list[data-style="brand"] .sonipat-social-link:hover .sonipat-social-svg,
.sonipat-social-list[data-style="brand"] .sonipat-social-link:focus-visible .sonipat-social-svg,
.sonipat-social-list[data-style="neutral"] .sonipat-social-link:hover .sonipat-social-svg,
.sonipat-social-list[data-style="neutral"] .sonipat-social-link:focus-visible .sonipat-social-svg,
.sonipat-social-list[data-style="plain"] .sonipat-social-link:hover .sonipat-social-svg,
.sonipat-social-list[data-style="plain"] .sonipat-social-link:focus-visible .sonipat-social-svg {
	fill: var(--sonipat-social-brand);
}

.sonipat-social-list[data-style="neutral"] .sonipat-social-link:hover {
	background: var(--sonipat-wash);
}

.sonipat-social-list[data-shape="circle"] .sonipat-social-link {
	border-radius: 50%;
}

.sonipat-social-list[data-shape="rounded"] .sonipat-social-link {
	border-radius: calc(var(--sonipat-social-size, 34px) * 0.24);
}

.sonipat-social-list[data-shape="square"] .sonipat-social-link {
	border-radius: 0;
}

.sonipat-social-list[data-shape="none"] .sonipat-social-link {
	background: transparent;
	border-color: transparent;
	border-radius: 0;
	height: auto;
	width: auto;
}

/* With no chip to take a percentage from, the mark carries its own size. */
.sonipat-social-list[data-shape="none"] .sonipat-social-svg {
	height: calc(var(--sonipat-social-size, 34px) * 0.75);
	width: calc(var(--sonipat-social-size, 34px) * 0.75);
}

/* --- footer -------------------------------------------------------------- */

.sonipat-fb-top {
	padding-block: clamp(2.75rem, 5.5vw, 4.25rem) clamp(1.75rem, 3.5vw, 2.5rem);
}

.sonipat-fb-columns {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.75rem, 3.4vw, 2.75rem) clamp(1.5rem, 2.6vw, 2.25rem);
}

/* The column gap is deliberately small: the rhythm inside a column belongs to
   the elements themselves (a heading sits tight over its list, a row of contact
   details sits tight under the last one), and a wide gap made every column read
   as a list of unrelated blocks. */
.sonipat-fb-column {
	display: flex;
	flex: 1 1 210px;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

/* A custom-HTML element can hold a heading and a list, which must stack rather
   than sit side by side as flex items the way a header row's elements do. */
.sonipat-fb-column .sonipat-el {
	align-items: flex-start;
	flex-direction: column;
}

/* Headings --------------------------------------------------------------- */

/* Prefixed with .sonipat-fb so these win over the band typography in style.css
   whichever stylesheet the browser happens to load last. Two words split over
   two lines read as a mistake at this tracking, so the heading keeps one line
   and clips rather than pushing the column wider. */
.sonipat-fb .sonipat-fb-column h4 {
	align-items: center;
	color: var(--sonipat-text);
	display: flex;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.3;
	margin: 0 0 0.8rem;
	overflow: hidden;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A hairline that trails the words instead of ruling under the whole column: in
   a band where every element is a block of text, it is what marks a heading as
   one. It shrinks rather than pushing past the column when the heading is long.
   currentColor, not the border token: the band's border colours are derived for
   a light surface, and on this dark band they are the same hue as the background. */
.sonipat-fb .sonipat-fb-column h4::after {
	background: linear-gradient( 90deg, currentColor, transparent );
	content: "";
	flex: 0 1 46px;
	height: 1px;
	margin-left: 0.75rem;
	min-width: 0;
	opacity: 0.32;
}

/* Text ------------------------------------------------------------------- */

.sonipat-fb .sonipat-fb-column p {
	color: var(--sonipat-text-muted);
	font-size: 0.9rem;
	line-height: 1.75;
	margin: 0 0 0.35rem;
}

.sonipat-fb .sonipat-fb-column ul {
	display: grid;
	gap: 0.05rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The chip row is a list too, but the grid above would stack it one per line. */
.sonipat-fb .sonipat-fb-column .sonipat-social-list {
	display: flex;
	gap: 0.5rem;
}

.sonipat-fb .sonipat-fb-column li {
	margin: 0;
}

/* The size is set here rather than inherited: the band's default body type is a
   reading size, and eight reading-size service names made the columns look
   unfinished next to a 0.72rem heading. */
.sonipat-fb .sonipat-fb-column ul a {
	color: var(--sonipat-text-muted);
	display: inline-block;
	font-size: 0.9rem;
	line-height: 1.5;
	max-width: 100%;
	padding-block: 0.26rem;
	text-decoration: none;
	transition: color 0.25s var(--sonipat-ease), transform 0.25s var(--sonipat-ease);
}

/* Lime, not the brand purple. #6A47ED on this band is under two to one, so the
   hover this rule replaces was invisible to the people who needed it most. */
.sonipat-fb .sonipat-fb-column ul a:hover,
.sonipat-fb .sonipat-fb-column ul a:focus-visible {
	color: var(--sonipat-secondary);
	transform: translateX( 3px );
}

/* The identity column ----------------------------------------------------- */

/* The wordmark is dark ink on transparency, which this band swallows. A light
   plate keeps the owner's artwork whole and stays legible whatever colour they
   paint the band, because the plate is never the colour behind it. */
.sonipat-fb-column .custom-logo-link {
	background: #fff;
	border-radius: 12px;
	line-height: 0;
	margin-bottom: 0.55rem;
	padding: 0.5rem 0.7rem;
}

.sonipat-fb-column .sonipat-el-social {
	margin-top: 0.7rem;
}

/* The contact column ------------------------------------------------------ */

/* The two rows a visitor acts on, set brighter and larger than the link lists so
   they read as the point of the column rather than more of the same. */
.sonipat-fb-column .sonipat-el-phone > a,
.sonipat-fb-column .sonipat-el-email > a,
.sonipat-fb-column .sonipat-el-whatsapp > a {
	color: var(--sonipat-text);
	display: inline-block;
	font-size: 0.98rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.45;
	padding-block: 0.16rem;
	text-decoration: none;
	transition: color 0.25s var(--sonipat-ease);
}

.sonipat-fb-column .sonipat-el-phone > a:hover,
.sonipat-fb-column .sonipat-el-email > a:hover,
.sonipat-fb-column .sonipat-el-whatsapp > a:hover {
	color: var(--sonipat-secondary);
}

/* <address> is italic in the UA sheet, which no footer asks for. */
.sonipat-fb-column .sonipat-el-address {
	color: var(--sonipat-text-muted);
	font-size: 0.88rem;
	font-style: normal;
	line-height: 1.65;
}

.sonipat-fb-column .sonipat-el-hours {
	color: var(--sonipat-text-faint);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	line-height: 1.6;
}

.sonipat-fb-column .sonipat-el-button {
	margin-top: 0.85rem;
}

/* The bottom strip -------------------------------------------------------- */

.sonipat-fb-bottom {
	border-top: 1px solid var(--sonipat-border);
}

.sonipat-fb-bottom-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding-block: 1.3rem 1.7rem;
}

.sonipat-fb-bottom .sonipat-el,
.sonipat-fb-bottom p {
	color: var(--sonipat-text-faint);
	font-size: 0.82rem;
	line-height: 1.6;
}

.sonipat-fb-bottom a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s var(--sonipat-ease);
}

.sonipat-fb-bottom a:hover {
	color: var(--sonipat-secondary);
}

/* Column widths follow the count the builder was set to. */
.sonipat-fb[data-columns="1"] .sonipat-fb-column { flex-basis: 100%; }
.sonipat-fb[data-columns="2"] .sonipat-fb-column { flex-basis: calc(50% - clamp(1.5rem, 2.6vw, 2.25rem) / 2); }
.sonipat-fb[data-columns="3"] .sonipat-fb-column { flex-basis: calc(33.333% - clamp(1.5rem, 2.6vw, 2.25rem) * 0.67); }
.sonipat-fb[data-columns="4"] .sonipat-fb-column { flex-basis: calc(25% - clamp(1.5rem, 2.6vw, 2.25rem) * 0.75); }
.sonipat-fb[data-columns="5"] .sonipat-fb-column { flex-basis: calc(20% - clamp(1.5rem, 2.6vw, 2.25rem) * 0.8); }
.sonipat-fb[data-columns="6"] .sonipat-fb-column { flex-basis: calc(16.666% - clamp(1.5rem, 2.6vw, 2.25rem) * 0.83); }

/* --- responsive ---------------------------------------------------------- */

/*
 * The three device bands the builder's switches are named after. Anything the
 * owner can switch off per device is hidden here, and the two sizes the sliders
 * drive -- logo height and icon size -- change in the same place, so the preview
 * and the switches agree on where a "tablet" stops being one.
 */

@media only screen and (max-width: 1024px) {
	/* The top bar has no fixed design to protect: whatever the owner left on this
	   device wraps onto a second line instead of spilling out of the band. */
	.sonipat-hb-above .sonipat-hb-inner {
		flex-wrap: wrap;
		row-gap: 0.35rem;
	}

	.custom-logo {
		height: var(--sonipat-logo-h-tablet, 36px);
		max-width: min(100%, 44vw);
	}

	/* One property per device, retargeted on the list: the chip size, the mark
	   inside it, the corner radius and the letter fallback all read it, so they
	   cannot drift apart halfway down a breakpoint. */
	.sonipat-social-list {
		--sonipat-social-size: var(--sonipat-social-size-tablet, 32px);
	}

	.sonipat-off-tablet {
		display: none;
	}
}

@media only screen and (max-width: 960px) {
	.sonipat-nav-toggle {
		display: flex;
	}

	.sonipat-nav {
		display: none;
	}

	/* The menu element is a single button here, so it reads as stranded in the
	   middle of the row; the trailing edge is where a menu button belongs. */
	.sonipat-hb-center {
		justify-content: flex-end;
	}

	/* The sheet is exactly as long as the menu is, and a menu with a service list
	   under it is longer than a phone. Held to its natural height it pushed the last
	   words below the bottom of the window, where nothing could reach them: the page
	   behind cannot scroll (the header is pinned, so the sheet never travels with it)
	   and the sheet itself had no overflow to scroll. Capped to the room the header
	   left and given its own scroll, every item is one drag away. `--sonipat-nav-top`
	   is the sheet's measured distance from the top of the window — the admin bar, a
	   row above this one and the sticky offset all move it, and only the laid-out
	   page knows by how much. The `vh` line is the fallback for a browser without
	   dynamic viewport units: a panel a little too tall still scrolls, whereas no
	   cap at all is the bug this rule exists to fix. */
	.sonipat-nav.is-open {
		background: var(--sonipat-bg);
		border-top: 1px solid var(--sonipat-border);
		display: block;
		inset: 100% 0 auto;
		max-height: calc(100vh - var(--sonipat-nav-top, 0px));
		max-height: calc(100dvh - var(--sonipat-nav-top, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-block: 1.5rem;
		position: absolute;
		width: 100%;
	}

	.sonipat-nav.is-open .sonipat-nav-list {
		flex-direction: column;
		gap: 0.2rem;
		padding-inline: clamp(1rem, 4vw, 2rem);
	}

	.sonipat-nav.is-open a {
		display: block;
		font-size: 1.05rem;
		padding-block: 0.6rem;
	}

	.sonipat-hb-primary .sonipat-hb-inner {
		position: relative;
	}

	.sonipat-hb-right {
		flex-wrap: nowrap;
	}
}

@media only screen and (max-width: 620px) {
	/* A phone cannot fit a logo, the menu button and a full-size call-to-action
	   on one line, and three equal slots would push the button past the viewport.
	   The slots take their content's width and the row wraps instead, so nothing
	   spills and every element the user placed still appears. */
	.sonipat-hb-primary .sonipat-hb-inner {
		flex-wrap: wrap;
		row-gap: 0.6rem;
	}

	.sonipat-hb-slot {
		flex: 0 1 auto;
	}

	/* On a wrapped row the right slot's `margin-left: auto` lands on the *second*
	   line, so the menu button stays glued to the wordmark and the call-to-action
	   drifts to the far edge under it. The button takes the end of the identity
	   line instead, and anything placed right of it fills the line below. */
	.sonipat-hb-center {
		margin-left: auto;
	}

	.sonipat-hb-right {
		flex: 1 1 auto;
		margin-left: 0;
	}

	.sonipat-hb-right > .sonipat-el {
		flex: 1 1 auto;
	}

	.sonipat-hb-right > .sonipat-el > .sonipat-cta {
		display: flex;
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
	}

	.custom-logo {
		height: var(--sonipat-logo-h-mobile, 30px);
		/* A percentage in the cap is indefinite while the link is being sized, so
		   the wordmark's own box would keep the full 348/55 width and leave dead
		   space beside a picture that painted narrower. */
		max-width: 42vw;
	}

	.sonipat-social-list {
		--sonipat-social-size: var(--sonipat-social-size-mobile, 30px);
	}

	.sonipat-el .sonipat-cta {
		font-size: 0.8rem;
		padding: 0.5em 0.9em;
	}

	/* One column per row. A phone showing two of them set the eight service names
	   side by side at ~180px each, which wrapped every one of them twice. */
	.sonipat-fb[data-columns] .sonipat-fb-column {
		flex-basis: 100%;
	}

	/* A column whose whole content is switched off this device must not hold a
	   row of its own, or the footer gains a gap where nothing is. */
	.sonipat-fb-column:not(:has(.sonipat-el:not( .sonipat-off-mobile ))) {
		display: none;
	}

	/* The fixed scroll-to-top chip sits over the bottom-right corner of the page,
	   which is exactly where this strip's last words land once the reader reaches
	   the end — on a phone, where the strip is full width. */
	.sonipat-fb-bottom-inner {
		align-items: flex-start;
		flex-direction: column;
		padding-inline-end: 4rem;
	}

	/* The top bar on a phone. On a desktop this row is a left/centre/right statement;
	   on a phone it is two taps — call and mail — so it keeps both and gives up the
	   desktop shape instead of disappearing. The slots flatten to `contents`, which
	   makes the four elements peers of one wrapping line: left alone, the left pair and
	   the right pair each held to their own group and the strip broke into three ragged
	   lines with a gap down the middle of the second one. */
	.sonipat-hb-above {
		font-size: 0.76rem;
	}

	.sonipat-hb-above .sonipat-hb-inner {
		flex-wrap: wrap;
		gap: 0.1rem 0.9rem;
		justify-content: center;
		min-height: 0;
		padding-block: 0.25rem;
	}

	.sonipat-hb-above .sonipat-hb-slot {
		display: contents;
	}

	.sonipat-hb-above .sonipat-el {
		justify-content: center;
	}

	/* A tap needs a target rather than a line of text: each link carries its own 34px
	   of height, so the strip stays two compact lines and still answers a thumb. The
	   address never breaks mid-word — at 320px a wrapped email reads as two mistakes.
	   Direct children only: the social chips are anchors too, and giving them this
	   height turns a 30px round mark into a 30x34 pill. */
	.sonipat-hb-above .sonipat-el > a {
		min-height: 34px;
		padding-inline: 0.2rem;
		white-space: nowrap;
	}

	.sonipat-hb-above .sonipat-el-hours {
		line-height: 34px;
	}

	/* The chips take the line under the words rather than the trailing edge beside
	   them, which is the only way four of them fit the narrowest phone. Their size
	   stays the owner's per-device setting — the range-wide token above it. */
	.sonipat-hb-above .sonipat-social-list {
		flex-wrap: wrap;
		gap: 0.4rem;
		justify-content: center;
	}

	.sonipat-off-mobile {
		display: none;
	}
}

/* Desktop is the widest of the three ranges, so its switch is the only one that
   needs a minimum rather than a maximum. */
@media only screen and (min-width: 1025px) {
	.sonipat-off-desktop {
		display: none;
	}

	.sonipat-fb-column:not(:has(.sonipat-el:not( .sonipat-off-desktop ))) {
		display: none;
	}
}

@media only screen and (min-width: 621px) and (max-width: 1024px) {
	.sonipat-fb-column:not(:has(.sonipat-el:not( .sonipat-off-tablet ))) {
		display: none;
	}

	/* Two columns across the tablet range. The count the owner set still decides
	   how many columns the row holds on a desktop, but a 1024px-wide pair of them
	   is where a service name starts breaking into three lines. */
	.sonipat-fb[data-columns]:not( [data-columns="1"] ) .sonipat-fb-column {
		flex-basis: calc(50% - clamp(1.5rem, 2.6vw, 2.25rem) / 2);
	}
}

/* With the sheet open the page behind it holds still. The drawer scrolls its own
   list now, and a document travelling underneath a pinned header would move the
   button that opened it — and everything the reader was about to tap — to somewhere
   else on the screen. `header-menu.js` puts the class on while a sheet is showing.
   The admin bar needs no rule of its own here: it is laid out in the page's own
   flow, so the row the sheet hangs from is already below it, and the measured
   `--sonipat-nav-top` takes that distance into the sheet's height along with it. */
html.sonipat-nav-lock,
html.sonipat-nav-lock body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.sonipat-nav-toggle-bar,
	.sonipat-nav-toggle-bar::before,
	.sonipat-nav-toggle-bar::after,
	.sonipat-social-link,
	.sonipat-el a {
		transition: none;
	}

	/* The colour change stays; the nudge is the part that moves the page. */
	.sonipat-fb .sonipat-fb-column ul a:hover {
		transform: none;
	}
}