/*
 * Global footer (Phase 3B — docs/FOOTER-IMPLEMENTATION.md). Only columns
 * with real content render (footer.php checks first) — this file just
 * lays out whatever is present, so it degrades cleanly whether 2 or 5
 * columns are shown.
 */

.bholats-footer {
	margin-top: var(--space-16);
	padding-block: var(--space-10) var(--space-6);
	background: var(--color-brand-ink);
	color: var(--color-text-on-brand);
}

.bholats-footer__columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
}

/*
 * The 5-column row (brand + 4 link columns side by side) now starts at
 * 1024px instead of 768px, and the brand column's share was raised from
 * 1.2fr to 1.6fr — both because of the new, longer brand copy (heading +
 * full supporting paragraph, replacing the old one-line "Tech Made Easy").
 * At 768px specifically, 1.2fr of a 5.2fr row left the brand column only
 * ~137px wide, wrapping the paragraph into 12 short lines — a visibly
 * cramped "runt column" next to the link lists. Keeping the brand column
 * full-width (the same treatment already used below 768px) through the
 * 768-1023px tablet range, and giving it more relative room once the
 * 5-column row does apply, keeps the paragraph at a readable measure
 * without changing anything about the link columns' own layout.
 */
@media (min-width: 1024px) {
	.bholats-footer__columns { grid-template-columns: 1.6fr repeat(4, 1fr); }
}

.bholats-footer__brand { grid-column: 1 / -1; }
@media (min-width: 1024px) { .bholats-footer__brand { grid-column: auto; } }

/*
 * The supplied logo's dark elements (the "BHOLAT'S" wordmark and the
 * circuit ring) are a near-black navy that measures almost identical to
 * this footer's own --color-brand-ink background (~1:1 contrast) --
 * confirmed by sampling the actual asset's pixel colour against the
 * footer's background colour, not assumed. Rendered directly on the dark
 * footer the transparent logo's dark parts are nearly invisible. The logo
 * was designed for a light background, so it gets one here: a small
 * elevated light surface (matching the project's own established
 * base -> elevated -> floating layering system), not a redesign of the
 * footer itself. See docs/BRAND-IDENTITY-IMPLEMENTATION.md.
 */
.bholats-footer__logo {
	display: inline-flex;
	align-items: center;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-2) var(--space-4);
	box-shadow: var(--shadow-md);
}

/* 68px (+21% over the old 56px, not the full 20-30% range blindly applied):
   compared against 56/64/68/72/76px side by side next to the brand
   heading below it — 56/64 still read as visibly undersized against that
   bold heading, 76 started to feel slightly oversized/dominant, 68 was
   the smallest step that read as a confident, intentional size. Height
   only; width:auto already preserves the asset's own aspect ratio. */
.bholats-footer__logo :is(img, svg) { display: block; height: 68px; width: auto; object-fit: contain; }

/*
 * Brand statement replacing the old one-line "Tech Made Easy" tagline —
 * a heading + supporting paragraph, not the homepage hero restated. Sized
 * and weighted to read as a confident footer sub-brand line: font-body (not
 * font-display, which the hero/page headings use) at --text-base, clearly
 * stronger than the --text-sm column links beneath it, but nowhere near the
 * scale of an actual page heading. max-width keeps the paragraph at a
 * comfortable reading measure rather than stretching edge-to-edge if the
 * brand column is ever widened.
 */
.bholats-footer__brand-heading {
	margin: var(--space-3) 0 0;
	max-width: 34ch;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-snug);
	color: var(--color-text-on-brand);
}

.bholats-footer__brand-text {
	margin: var(--space-2) 0 0;
	max-width: 36ch;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: rgba(255, 255, 255, 0.75);
}

.bholats-footer__heading {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 var(--space-4);
}

.bholats-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.bholats-footer__list a {
	color: var(--color-text-on-brand);
	opacity: 0.85;
	text-decoration: none;
	font-size: var(--text-sm);
}
.bholats-footer__list a:hover { opacity: 1; text-decoration: underline; }

.bholats-footer__social {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Same small-caps treatment as .bholats-footer__heading (the "SHOP" /
   "CUSTOMER CARE" column labels above) — reused here inline rather than
   stacked, so the row reads as one intentional "Follow us + icons" group
   instead of a bare row of icons or a whole new footer section. */
.bholats-footer__social-label {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: rgba(255, 255, 255, 0.6);
}
/* Icon-only links (aria-label carries the name, matching the WhatsApp
   button's own convention) — sized for a real 44px touch target even
   though the glyph itself renders smaller inside it, same principle as
   the header's icon buttons (components/mobile-nav.css). */
.bholats-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--color-text-on-brand);
	opacity: 0.8;
	text-decoration: none;
}
.bholats-footer__social a:hover { opacity: 1; }
/* --shadow-focus (used elsewhere site-wide) is a blue glow tuned for light
   surfaces — low-contrast on this footer's dark background. Reuses the
   same bright-outline treatment the announcement bar above already uses
   for the same reason (header.css), not a new pattern. */
.bholats-footer__social a:focus-visible {
	opacity: 1;
	outline: 2px solid var(--color-brand-bright);
	outline-offset: 2px;
}
.bholats-footer__social svg { width: var(--icon-lg); height: var(--icon-lg); }

.bholats-footer__bottom {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 768px) {
	.bholats-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }

	/* Bug fix: adding the NachTech credit lengthened the copyright line
	   enough to reach under the fixed WhatsApp button on pages without a
	   product purchase bar to elevate it (home, Shop, Cart, Checkout —
	   most of the site). Confirmed live: at 1024px the credit's own link
	   rendered at x 935-992px, squarely inside WhatsApp's fixed 948-1004px
	   footprint — "NachTech" was genuinely, visibly covered, not a
	   bounding-box false positive (verified with a precise text-range
	   measurement and a screenshot). This only happens below
	   --container-max (1320px): at 1440px+ the container's own max-width
	   already leaves enough natural margin past its edge that the two
	   never come close, confirmed at 1440 showing no overlap at all.
	   Rather than tuning a fragile width-specific gap, reserving this
	   clearance unconditionally at every row-layout width (>=768px) is
	   simpler and robust — at 1440+ it's a harmless bit of extra empty
	   space on an already-spacious dark footer bar, not a visible change.
	   calc() mirrors WhatsApp's own real footprint (56px button diameter,
	   hardcoded in whatsapp-button.css) plus its own largest offset token
	   (--space-5, used at its >=1024px breakpoint) plus a small
	   var(--space-3) gap — deliberately not modifying WhatsApp's own
	   positioning at all, per the brief's "do not modify WhatsApp
	   positioning unless genuinely required" — this reserves space on the
	   footer side instead. */
	.bholats-footer__bottom {
		padding-right: calc(56px + var(--space-5) + var(--space-3));
	}
}

.bholats-footer__legal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}
.bholats-footer__legal-list a { color: inherit; text-decoration: none; }
.bholats-footer__legal-list a:hover { text-decoration: underline; }

.bholats-footer__copyright { margin: 0; }

/* Developer credit — discreet, rides along with the copyright line rather
   than becoming a third item in .bholats-footer__bottom's flex row (which
   would break the existing two-item space-between balance between the
   legal links and the copyright block). Below 768px (where .bholats-footer
   __bottom is still a single column) it drops to its own line, matching
   how the legal-list and copyright already stack there — not a new
   layout, just one more line in the same stack. At 768px and up it joins
   the copyright text inline with a middot, reading as one sentence: "©
   2026 Bholat's IT World. · Website by NachTech". No colour of its own —
   inherits .bholats-footer__bottom's existing muted rgba(255,255,255,.65)
   text-xs, the same treatment already given to the copyright and legal
   text next to it, so it reads as part of the same quiet legal/meta row
   rather than a promotional addition. */
.bholats-footer__credit {
	display: block;
	margin-top: var(--space-1);
}
@media (min-width: 768px) {
	.bholats-footer__credit {
		display: inline;
		margin-top: 0;
	}
	.bholats-footer__credit::before { content: " · "; }
}

/* Only "NachTech" is a link — same muted-link treatment already used for
   .bholats-footer__legal-list a right next to it (inherit colour, no
   underline at rest, underline on hover) and the same bright-outline
   focus-visible already established for .bholats-footer__social a above
   (--shadow-focus is tuned for light surfaces and reads low-contrast on
   this dark footer background). */
.bholats-footer__credit a {
	color: inherit;
	text-decoration: none;
}
.bholats-footer__credit a:hover { text-decoration: underline; }
.bholats-footer__credit a:focus-visible {
	outline: 2px solid var(--color-brand-bright);
	outline-offset: 2px;
}