/*
 * Hydro Shield — global footer.
 * Graphite foundation throughout — no tonal step-up band anymore (the
 * closing CTA band was removed per direct user request). Cyan appears only
 * as the focus-ring colour, consistent with every other component.
 */

.hs-footer {
	position: relative;
	background: var(--hs-color-bg);
	border-top: 1px solid rgba(240, 240, 232, 0.08);
	overflow: hidden;
}

.hs-footer a {
	text-decoration: none;
}

/* Global floating action stack: rendered beside the footer so it is
   available on every template, but fixed to the viewport rather than the
   footer. REWORKED (direct request — "premium nahi hai so change or
   improve"): the stock WhatsApp-brand green circle clashed with the rest
   of the site's restrained graphite/off-white/cyan palette (nothing else
   on this site uses that green anywhere). Recoloured onto the same
   palette every other button on the site already uses — graphite
   surface, off-white glyph, a soft large shadow (matching the Hero
   card's shadow language) instead of the old flat dark one, and cyan
   only as a quiet accent that appears on hover/focus rather than sitting
   on the button at rest.

   STACK (direct request, 2026-09-25 — "us kay opar location icon bi add
   kar do"): a location button was added above WhatsApp. Rather than
   position each button independently with hand-tuned `bottom` offsets
   (fragile — the second button's offset would need to account for the
   first button's exact height + gap, and again at every breakpoint),
   `.hs-float-stack` is the single fixed-position anchor and each
   `.hs-float-btn` is just a normal flex child inside it — order in the
   DOM (footer.php) is the only thing that decides which one sits on top. */
.hs-float-stack {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.hs-float-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(240, 240, 232, 0.14);
	border-radius: 50%;
	background: var(--hs-color-graphite);
	box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.18);
	color: var(--hs-color-off-white);
	transition: transform var(--hs-duration-fast) var(--hs-ease-standard), box-shadow var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-float-btn svg {
	width: 24px;
	height: 24px;
}

.hs-float-btn:hover,
.hs-float-btn:focus-visible {
	transform: translateY(-3px);
	border-color: var(--hs-color-accent);
	box-shadow: 0 14px 30px -6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 229, 255, 0.25);
}

.hs-float-btn:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 3px;
}

@media (max-width: 639.98px) {
	.hs-float-stack {
		right: 14px;
		bottom: 14px;
		gap: 10px;
	}

	.hs-float-btn {
		width: 52px;
		height: 52px;
	}

	.hs-float-btn svg {
		width: 22px;
		height: 22px;
	}
}

/* Large background watermark of the real logo. Bleeds past the footer's
   own right/bottom edge for a cropped-corner mark instead of a centered
   stamp; low opacity + pointer-events:none keep it decorative only, never
   competing with or blocking the real content above it.
   COMMAND 08 (footer-height-only): sized down alongside the brand-column
   logo below so it stays a quiet corner mark proportional to the now much
   more compact footer, instead of dominating it — it's position:absolute
   so it never added to the footer's actual height, but at the old 360px it
   visually overwhelmed the shorter footer. */
.hs-footer__watermark {
	position: absolute;
	right: -40px;
	bottom: -40px;
	z-index: 0;
	opacity: 0.05;
	pointer-events: none;
}

.hs-footer__watermark img {
	display: block;
	height: 160px;
	width: auto;
}

.hs-footer__main-inner,
.hs-footer__bottom-inner {
	position: relative;
	z-index: 1;
	max-width: 1360px;
	margin: 0 auto;
	padding-left: var(--hs-space-4);
	padding-right: var(--hs-space-4);
}

/* ================= A. Main navigation ================= */

.hs-footer__main-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--hs-space-4);
	/* COMMAND 08 (footer-height-only): was space-6/space-5 (64px/40px) —
	   the single biggest driver of the old footer's height was the 360px
	   brand logo below, not this padding, but both are tightened together
	   so the whole block reads as one compact band.
	   FOLLOW-UP: bumped from space-4 (24px) to 40px — the logo image now
	   sits at top: -36px (see .hs-footer__logo img), which needs at least
	   36px of headroom above it to avoid clipping against .hs-footer's
	   overflow: hidden. */
	padding-top: 40px;
	padding-bottom: var(--hs-space-4);
	/* Keeps each column at its own natural height instead of the grid's
	   default stretch alignment forcing Explore/Products/Contact to match
	   the brand column. */
	align-items: start;
}

.hs-footer__brand {
	position: relative;
	max-width: 32ch;
}

/* Direct request — 5x bigger logo, footer height unchanged. A normal
   in-flow image can't do both (its own column would just grow to match
   it, taking the whole footer with it — the exact problem COMMAND 08
   fixed). Fix: .hs-footer__logo keeps its ORIGINAL 44px layout footprint
   (still what the row-height math sees) with overflow: visible, and the
   actual image is position: absolute inside it — 5x the height (220px)
   but taken out of flow, so it visually bleeds without ever affecting the
   column/row/footer height. Anchored to the footprint's TOP edge (not
   vertically centered) so it only bleeds downward, not up past the
   footer's own top edge into the section above it. */
.hs-footer__logo {
	display: inline-flex;
	position: relative;
	height: 44px;
	overflow: visible;
	margin-bottom: 10px;
	z-index: 2;
}

/* FOLLOW-UP (direct request — "logo ko thoora opar karoo or text bi opar
   karooo", then "logo thoora sa opar kar doo 20px"): shifted up a further
   20px (top: -16px → -36px) — there's headroom above it from
   .hs-footer__main-inner's own padding-top, so this doesn't clip the logo
   against the section's top edge. */
.hs-footer__logo img {
	display: block;
	position: absolute;
	left: 0;
	top: -36px;
	height: 220px;
	width: auto;
	max-width: none;
}

.hs-footer__logo-text {
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--hs-color-text);
}

/* FOLLOW-UP (direct request — "text ko logo kay nichay space hai wahan le
   jao", then "text ko small kar do", then "font big kar kay capitalize kar
   kay thoora opar kar doo, logo kay opar thoora overlap bi chalay ga", then
   "logo ko thoora opar karoo or text bi opar karooo"): the enlarged logo
   bleeds down 220px from the column's top (see .hs-footer__logo above,
   itself now shifted up 16px) — measured live, the row itself is only
   ~245px tall (set by the Explore/Products/Contact columns' own content),
   and the uppercase text now wraps to 3 lines at this size. Pulled up
   again (top: 190px → 164px) to keep clear of the copyright bar below
   instead of crowding it. Still position: absolute so it never affects
   the column/row/footer height. */
.hs-footer__brand-text {
	position: absolute;
	top: 164px;
	left: 0;
	z-index: 3;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hs-color-text-muted);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.hs-footer__col-heading {
	margin: 0 0 12px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hs-color-grey-mid);
}

.hs-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* COMMAND 08 (footer-height-only): row height brought down from 40px to
   32px — same links, same font-size, just a tighter vertical rhythm
   between rows so the column doesn't read as padded-out. */
.hs-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-size: 0.92rem;
	color: var(--hs-color-text-muted);
	transition: color var(--hs-duration-fast) var(--hs-ease-standard), transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-footer__links a:hover,
.hs-footer__links a:focus-visible {
	color: var(--hs-color-text);
	transform: translateX(3px);
}

.hs-footer__links a:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
	border-radius: var(--hs-radius-sm);
}

/* Call + WhatsApp, one consistent icon+number row each (2026-09-22, direct
   follow-up — "number hai phir nichay icon or phir nichay number hai
   thoora... dobara arrange kar dein achay say"): the previous layout was a
   plain phone-number text link, THEN a WhatsApp icon, THEN the same
   number again below it — replaced with two matching rows (icon on the
   left, number beside it, not stacked), same treatment for both methods
   instead of only WhatsApp getting an icon. */
.hs-footer__contact-methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

.hs-footer__contact-method {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--hs-color-text-muted);
	transition: color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-footer__contact-method:hover,
.hs-footer__contact-method:focus-visible {
	color: var(--hs-color-text);
}

.hs-footer__contact-method:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
	border-radius: var(--hs-radius-sm);
}

.hs-footer__contact-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(240, 240, 232, 0.08);
	color: var(--hs-color-accent);
	transition: background var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-footer__contact-method:hover .hs-footer__contact-icon,
.hs-footer__contact-method:focus-visible .hs-footer__contact-icon {
	background: rgba(240, 240, 232, 0.14);
}

.hs-footer__contact-number {
	font-size: 0.9rem;
}

/* Real 2-location block (2026-09-22, direct request — "footer mein
   location icon add karo jahan shops name dono or location exact add
   ho"): a pin icon + shop name per outlet, sitting below the phone/
   WhatsApp links rather than crammed into the same single-line list item
   the old one-area placeholder used.
   FOLLOW-UP (same day — "text dono say delete kar do... text par bi click
   hoo... direction par jaye"): the address paragraph is gone (name-only
   now), and the whole card is ONE clickable <a> straight to that outlet's
   real Google Maps place link (template-parts/footer.php renders a <div>
   instead only when a location has no maps_url yet) — not a separate
   small "Get Directions" sub-link nested inside it, which would be
   invalid HTML (a link can't contain a link). */
.hs-footer__locations {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(240, 240, 232, 0.08);
}

a.hs-footer__location {
	text-decoration: none;
	cursor: pointer;
}

.hs-footer__location {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.hs-footer__location-pin {
	flex: 0 0 auto;
	display: flex;
	margin-top: 1px;
	color: var(--hs-color-accent);
	transition: transform var(--hs-duration-fast) var(--hs-ease-standard);
}

a.hs-footer__location:hover .hs-footer__location-pin,
a.hs-footer__location:focus-visible .hs-footer__location-pin {
	transform: translateX(3px);
}

.hs-footer__location-name {
	margin: 0;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--hs-color-text);
	transition: color var(--hs-duration-fast) var(--hs-ease-standard);
}

a.hs-footer__location:hover .hs-footer__location-name,
a.hs-footer__location:focus-visible .hs-footer__location-name {
	color: var(--hs-color-accent);
}

a.hs-footer__location:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
	border-radius: var(--hs-radius-sm);
}

/* ================= B. Bottom bar ================= */

.hs-footer__bottom {
	border-top: 1px solid rgba(240, 240, 232, 0.08);
}

/* COMMAND 08 (footer-height-only): vertical padding brought down from
   space-4 (24px top+bottom) to a tighter 14px so the bottom bar reads as a
   clean finishing strip rather than its own padded section. */
.hs-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hs-space-3);
	padding-top: 14px;
	padding-bottom: 14px;
}

.hs-footer__copyright {
	margin: 0;
	font-size: 0.8rem;
	color: var(--hs-color-grey-mid);
}

/* Direct request — "Developed By VanceDev" credit, name only (no link yet,
   nothing to point it at). Same small-text/separator language the footer
   already uses elsewhere. */
.hs-footer__credit {
	margin-left: 6px;
	padding-left: 10px;
	border-left: 1px solid rgba(240, 240, 232, 0.14);
	color: var(--hs-color-grey-mid);
}

.hs-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--hs-space-4);
}

/* Real links again (2026-09-25) — privacy-policy/impressum/terms now
   exist as real pages (see footer.php's comment on this block). */
.hs-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	font-size: 0.8rem;
	color: var(--hs-color-grey-mid);
	transition: color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-footer__legal a:hover,
.hs-footer__legal a:focus-visible {
	color: var(--hs-color-text-muted);
}

.hs-footer__legal a:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
	border-radius: var(--hs-radius-sm);
}

/* ================= Responsive ================= */

@media (max-width: 1023.98px) {
	.hs-footer__main-inner {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--hs-space-4);
	}

	.hs-footer__brand {
		grid-column: 1 / -1;
		max-width: 48ch;
	}

	/* The 220px enlarged logo relies on the SAME grid row as
	   Explore/Products/Contact being tall enough to contain its bleed
	   without overlap (see .hs-footer__logo above) — true on desktop,
	   where brand shares a row with those columns, but not here: below
	   1024px brand becomes its own full-width row (grid-column: 1 / -1
	   above) with nothing forcing that row tall, so the 220px bleed would
	   spill into the Explore/Products row underneath it. Falls back to the
	   original small 44px mark (and normal in-flow text) at this
	   breakpoint and narrower instead. */
	.hs-footer__logo {
		height: 44px;
	}

	.hs-footer__logo img {
		position: static;
		height: 44px;
	}

	.hs-footer__brand-text {
		position: static;
		margin-top: 0;
	}
}

/* COMMAND 08 (footer-height-only): mobile gap/top-padding brought down from
   space-5 (40px) to space-4 (24px) — stacked columns still get sensible
   breathing room, just not more than the desktop layout has. */
@media (max-width: 639.98px) {
	.hs-footer__main-inner {
		grid-template-columns: 1fr;
		gap: var(--hs-space-4);
		padding-top: var(--hs-space-4);
	}

	.hs-footer__brand {
		grid-column: auto;
		max-width: none;
	}

	.hs-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.hs-footer__watermark img {
		height: 100px;
	}

	.hs-footer__logo img {
		height: 36px;
	}

	/* The desktop logo enlargement (.hs-footer__logo img above, 220px) is
	   scoped to desktop only — mobile keeps the original small 36px mark
	   (simpler stacked layout, less room to safely bleed a huge logo). The
	   brand-text's position:absolute + top:214px offset was tuned for that
	   220px logo, so it must reset to normal in-flow positioning here,
	   otherwise it would float disconnected from the small mobile logo
	   and land on top of whichever stacked column happens to sit at that
	   fixed pixel offset. */
	.hs-footer__brand-text {
		position: static;
		margin-top: 10px;
		font-size: 0.9rem;
		line-height: 1.6;
		text-shadow: none;
	}
}