/*
 * VLINZZA Footer + Mobile Contact Dock
 * FOOTER STRUCTURED MANAGEMENT FINAL CORRECTION (2026-09-08).
 *
 * Zero !important, zero #id selectors, tokens only. Logical properties only
 * - no physical left/right (RTL rule).
 *
 * Breakpoints:
 *   Desktop        >= 1025px — 5-column row.
 *   Tablet+Mobile  <= 1024.98px — one shared 2-column paired grid,
 *                  OWNER APPROVED — FINAL.
 *
 * Per-item colours (Dock Buttons) are now Owner-editable settings, applied
 * as inline `style` on each pill (inc/footer/contact-dock.php) - not fixed
 * classes here. `--vlz-color-phone`/`--vlz-color-whatsapp` remain only as
 * the settings screen's stored DEFAULTS (inc/footer/settings.php), not as
 * CSS read at render time.
 */

/*
 * VLINZZA FAB — four live Footer brand glyphs only.
 * Font Awesome Free Brands subset; font licensed under SIL OFL 1.1.
 */
@font-face {
	font-family: "Vlinzza FAB";
	src: url("../fonts/vlinzza-fab-four-glyphs.woff2") format("woff2");
	font-display: block;
	font-style: normal;
	font-weight: 400;
}

:root {
	--vlz-footer-cta-radius: var(--vlz-radius-pill);
	--vlz-dock-z: 998;
	/*
	 * The dock's actual rendered block-size: padding-block-start
	 * (--vlz-space-2xs, 8px) + pill min-block-size (48px) + padding-block-end
	 * (max(--vlz-space-sm, safe-area) = 16px with no safe-area inset) = 72px.
	 * Kept as a literal so the Footer's own reserved-space calc always
	 * matches what the dock actually occupies.
	 */
	--vlz-dock-height: 72px;
}

/* ===========================================================================
 * Shell / landmark
 * ======================================================================= */

.vlz-footer {
	background-color: var(--vlz-color-surface-alt);
	color: var(--vlz-color-text);
}

.vlz-footer__main {
	max-inline-size: var(--vlz-wide-max);
	margin-inline: auto;
	padding-inline: var(--vlz-container-gutter);
	padding-block: var(--vlz-space-2xl) var(--vlz-space-xl);
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 0.9fr 1.1fr;
	column-gap: var(--vlz-space-lg);
	row-gap: 0;
	align-items: start;
}

/* ===========================================================================
 * Columns — shared
 * ======================================================================= */

.vlz-footer__col {
	min-inline-size: 0;
}

.vlz-footer__heading {
	margin-block: 0 var(--vlz-space-sm);
	font-size: 16px;
	font-weight: var(--vlz-weight-semibold);
	line-height: var(--vlz-leading-heading);
	color: var(--vlz-color-heading);
}

.vlz-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--vlz-space-2xs);
}

.vlz-footer__links a {
	color: var(--vlz-color-text-muted);
	font-size: 14px;
	text-decoration: none;
	transition: color 0.18s ease;
}

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

/* ===========================================================================
 * Brand column
 * ======================================================================= */

.vlz-footer__logo img {
	max-block-size: 44px;
	inline-size: auto;
}

.vlz-footer__description {
	margin-block: var(--vlz-space-sm) 0;
	max-inline-size: 32ch;
	font-size: 14px;
	line-height: var(--vlz-leading-body);
	color: var(--vlz-color-text-muted);
}

.vlz-footer__badges {
	margin-block-start: var(--vlz-space-sm);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vlz-space-sm);
}

/* Position/spacing/show-hide ONLY - never reaches inside a badge's own markup. */
.vlz-footer__badge {
	max-inline-size: 100%;
}

/* ===========================================================================
 * Contact column
 * ======================================================================= */

.vlz-footer__col--contact {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--vlz-space-sm);
}

/* Contact heading is CENTERED (Final Correction §4) - every other column
   heading stays start-aligned; this rule is scoped to the Contact column
   only. */
.vlz-footer__col--contact .vlz-footer__heading {
	margin-block-end: var(--vlz-space-2xs);
	text-align: center;
}

/*
 * Contact rows (FOOTER CONTACT VISUAL FINAL CLOSURE §6-8, §16-18): no label -
 * Phone/WhatsApp/Email share ONE alignment grid instead of each row
 * centering itself at its own content width (that per-row centering was the
 * root cause of the three icons/values landing at different X positions).
 * Two shared columns - value, then icon - with the whole group centered as
 * one unit within the Contact column; `.vlz-footer__contact-row` and
 * `.vlz-footer__contact-value-group` are collapsed with `display: contents`
 * so the value/icon of every row become direct items of the SAME grid
 * (their common `<a>`/`<span>` row wrapper keeps its href/hover/focus
 * behaviour - display:contents only removes its own box, not its function).
 */
.vlz-footer__contact-rows {
	display: grid;
	/*
	 * Value column can shrink below its max-content width (base 0, cap
	 * max-content) so on the narrowest phones the value wraps onto a second
	 * line instead of spilling past the Contact column's edge - the page
	 * ships `overflow-x: clip`, so unshrinkable content would render
	 * off-canvas rather than merely scroll (spec §23). Icon column never
	 * shrinks.
	 */
	grid-template-columns: minmax(0, max-content) max-content;
	justify-content: center;
	align-items: center;
	row-gap: var(--vlz-space-2xs);
	/* Icon-to-value gap: spec §8 calls for 4-8px, not a general spacing token. */
	column-gap: 6px;
}

.vlz-footer__contact-row {
	display: contents;
	color: var(--vlz-color-text-muted);
	font-size: 14px;
	text-decoration: none;
}

.vlz-footer__contact-row:hover,
.vlz-footer__contact-row:focus-visible {
	color: var(--vlz-color-primary);
}

.vlz-footer__contact-value-group {
	display: contents;
}

/* Value column - shared by all three rows, so every value starts/ends at
   the same inline edge and the three icons line up on one axis. */
.vlz-footer__contact-value {
	grid-column: 1;
	justify-self: end;
	overflow-wrap: anywhere;
	unicode-bidi: isolate;
}

/* Icon column - shared by all three rows, 4-8px from the value. */
.vlz-footer__contact-icon {
	grid-column: 2;
	justify-self: start;
	flex: none;
	display: inline-flex;
	align-items: center;
}

/*
 * Phone/WhatsApp display contract: the stored value is never reformatted -
 * this only splits its rendering into two nodes so "2+" sits a short
 * (~1-2 character) gap to the visual LEFT of the number (DOM order is
 * code-then-number inside the `dir="ltr"` isolate - render.php).
 */
.vlz-footer__phone-display {
	display: inline-flex;
	align-items: baseline;
}

.vlz-footer__phone-number {
	margin-inline-start: 0.3em;
}

.vlz-footer__cta-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--vlz-space-sm);
	margin-block-start: var(--vlz-space-xs);
}

/*
 * Final Correction §13: centered, clearly bigger than the prior build,
 * never full-width. Radius stays the project's own pill language.
 */
.vlz-footer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--vlz-space-xl);
	block-size: 48px;
	border-radius: var(--vlz-footer-cta-radius);
	border: 1px solid transparent;
	font-weight: var(--vlz-weight-semibold);
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vlz-footer__cta--primary {
	background-color: var(--vlz-color-primary);
	border-color: var(--vlz-color-primary);
	color: var(--vlz-color-text-invert);
}

.vlz-footer__cta--primary:hover,
.vlz-footer__cta--primary:focus-visible {
	background-color: var(--vlz-color-primary-strong);
	border-color: var(--vlz-color-primary-strong);
	color: var(--vlz-color-text-invert);
}

/*
 * Secondary treatment: reuses the project's own existing secondary button
 * language (assets/css/global-classes.css .vlz-btn--secondary) - transparent
 * fill, --vlz-color-border-strong border, heading-coloured text at rest;
 * primary-coloured border/text on hover/focus.
 */
.vlz-footer__cta--secondary {
	background-color: transparent;
	border-color: var(--vlz-color-border-strong);
	color: var(--vlz-color-heading);
}

.vlz-footer__cta--secondary:hover,
.vlz-footer__cta--secondary:focus-visible {
	background-color: transparent;
	border-color: var(--vlz-color-primary);
	color: var(--vlz-color-primary);
}

.vlz-footer__social {
	margin: var(--vlz-space-xs) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	gap: var(--vlz-space-xs);
}

/*
 * Reuses the EXACT visual system already shipped for the Contact / Request
 * Service pages' social icons (`.vlz-contact-page__social-link` in
 * assets/css/global-classes.css) - same 36px size, same 2px (near-square,
 * not circular) radius, same #252a31 resting colour and #1DA1F2 hover/focus
 * colour, same "Vlinzza FAB" webfont glyphs.
 */
.vlz-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 2px;
	color: #fff;
	background-color: #252a31;
	/* Explicit reset: the project's global `a` rule sets no
	   text-decoration:none, so every anchor keeps the browser default
	   underline unless a rule states otherwise (no underline, spec §16). */
	text-decoration: none;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.vlz-footer__social-link:hover,
.vlz-footer__social-link:focus-visible {
	color: #1da1f2;
	background-color: transparent;
	text-decoration: none;
	outline: 0;
}

.vlz-footer__social-link:focus-visible {
	outline: 2px solid #1da1f2;
	outline-offset: 3px;
}

/* ===========================================================================
 * Shared icon registry glyphs — "Vlinzza FAB" webfont, used by Social links,
 * Contact Items and Dock Buttons alike (inc/footer/data.php
 * vlz_footer_render_icon()). One codepoint map, reused everywhere an Owner
 * picks one of these icons from the settings screen's <select>.
 * ======================================================================= */

.vlz-footer__icon-fab {
	font-family: "Vlinzza FAB";
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
}

.vlz-footer__icon-fab--facebook::after {
	content: "\f39e";
}

.vlz-footer__icon-fab--x::after {
	content: "\f099";
}

.vlz-footer__icon-fab--instagram::after {
	content: "\f16d";
}

.vlz-footer__icon-fab--linkedin::after {
	content: "\f0e1";
}

.vlz-footer__icon-fab--youtube::after {
	content: "\f167";
}

.vlz-footer__icon-fab--tiktok::after {
	content: "\e07b";
}

.vlz-footer__icon-fab--telegram::after {
	content: "\f2c6";
}

.vlz-footer__icon-fab--pinterest::after {
	content: "\f0d2";
}

.vlz-footer__icon-fab--snapchat::after {
	content: "\f2ab";
}

/* Contact/Dock icon glyphs sit smaller than the 36px social buttons. */
.vlz-footer__contact-icon .vlz-footer__icon-fab,
.vlz-contact-dock__icon .vlz-footer__icon-fab {
	font-size: 16px;
}

/* ===========================================================================
 * Copyright strip
 * ======================================================================= */

.vlz-footer__copyright {
	background-color: rgb(29, 154, 240);
	padding-block: var(--vlz-space-sm);
}

.vlz-footer__copyright p {
	margin: 0;
	max-inline-size: var(--vlz-wide-max);
	margin-inline: auto;
	padding-inline: var(--vlz-container-gutter);
	font-size: 13px;
	text-align: center;
	color: var(--vlz-color-text-invert);
}

/* ===========================================================================
 * Focus ring — every link/CTA/social icon
 * ======================================================================= */

.vlz-footer a:focus-visible {
	outline: var(--vlz-focus-width) solid var(--vlz-color-focus);
	outline-offset: var(--vlz-focus-offset);
}

.vlz-footer .vlz-footer__social-link:focus-visible {
	outline: 2px solid #1da1f2;
	outline-offset: 3px;
}

.vlz-contact-dock__pill:focus-visible {
	outline: var(--vlz-focus-width) solid var(--vlz-color-focus-invert);
	outline-offset: var(--vlz-focus-offset);
}

/* ===========================================================================
 * Tablet + Mobile — 2-column paired grid (OWNER APPROVED — FINAL)
 * ======================================================================= */

@media (max-width: 1024.98px) {
	.vlz-footer__main {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--vlz-space-md);
		row-gap: var(--vlz-space-lg);
	}

	/*
	 * Batch 3 (2026-10-15 Footer Email flexible contact row): the Contact
	 * column shared the 1fr/1fr Tablet/Mobile row with a Links column
	 * (measured live at 390px: only 159.5px, leaving the shared value track
	 * in .vlz-footer__contact-rows just ~135px after the icon column and
	 * gap - the email address wrapped to two lines there regardless of its
	 * own text length). Reusing the SAME existing grid-column:1/-1 rule the
	 * Brand column already uses for an identical full-row need gives the
	 * Contact column, and therefore its shared value/icon grid, the full
	 * row width to grow into first, with .vlz-footer__contact-value's
	 * existing minmax(0, max-content) still free to wrap only once a value
	 * genuinely exceeds that much larger width. No new declaration, value,
	 * selector or rule - only this existing rule's selector list is
	 * extended to the Contact column.
	 */
	.vlz-footer__col--brand,
	.vlz-footer__col--contact {
		grid-column: 1 / -1;
	}

	.vlz-footer__description {
		max-inline-size: none;
	}

	/* Logo scales down proportionally on Tablet/Mobile - inline-size stays
	   auto, so the aspect ratio is never distorted. */
	.vlz-footer__logo img {
		max-block-size: 36px;
	}
}

/*
 * Mobile-only logo centring: Mobile only, not Tablet - the Brand column's
 * other content (description, badges) is untouched; only the logo wrapper
 * is centred. Same 767.98px boundary the Mobile Contact Dock already uses.
 */
@media (max-width: 767.98px) {
	.vlz-footer__logo {
		display: flex;
		justify-content: center;
	}
}

/* ===========================================================================
 * Mobile Contact Dock — separate component, not part of .vlz-footer
 * ======================================================================= */

.vlz-contact-dock {
	display: none;
}

@media (max-width: 767.98px) {
	.vlz-contact-dock {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--vlz-space-sm);
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: var(--vlz-dock-z);
		padding-block: var(--vlz-space-2xs);
		padding-block-end: max(var(--vlz-space-sm), env(safe-area-inset-bottom, 0px));
	}

	.vlz-contact-dock__pill {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/*
		 * DOM order is icon-then-label; in this RTL document a plain "row"
		 * would place that first child (the icon) at the inline-start, i.e.
		 * the right - row-reverse flips the visual order only, so the icon
		 * renders at the left and the label at the right (spec §23), with no
		 * markup/JS change.
		 */
		flex-direction: row-reverse;
		gap: var(--vlz-space-2xs);
		min-inline-size: 132px;
		max-inline-size: 45vw;
		min-block-size: 48px;
		padding-inline: var(--vlz-space-md);
		border-radius: 999px;
		font-weight: var(--vlz-weight-semibold);
		font-size: 14px;
		text-decoration: none;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		/* background-color / color are set inline per button from the Owner's
		   own Dock Button settings (inc/footer/contact-dock.php) - no fixed
		   colour class here. */
	}

	.vlz-contact-dock__icon {
		flex: none;
		display: inline-flex;
		align-items: center;
	}

	/*
	 * The dock is position:fixed and does not participate in document flow,
	 * so reserved space is needed to guarantee the fixed bar never visually
	 * covers page content that follows the Footer. Reserved via the
	 * transparent `.vlz-footer` wrapper's own margin-block-end (invisible,
	 * no colour) rather than inflating the copyright strip's own padding.
	 */
	.vlz-footer {
		/* +4px safety buffer over the dock's own measured height. */
		margin-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--vlz-dock-height) + 4px);
	}

	/*
	 * The dock already carries the WhatsApp action, and the floating
	 * WhatsApp Chat widget is configured showOnMobile=OFF (the project's
	 * vlzc_dequeue_whatsapp_assets_on_hidden_mobile gate mirrors that on
	 * genuine mobile devices). That gate is user-agent based, so a narrow
	 * viewport on a desktop user agent still receives the widget, where it
	 * sits on top of the dock pills. Hide it whenever the dock is present,
	 * on the same 767.98px boundary the dock itself uses. The plugin's own
	 * settings and files are untouched.
	 */
	body:has(.vlz-contact-dock) .wa__btn_popup,
	body:has(.vlz-contact-dock) .wa__popup_chat_box {
		display: none;
	}
}

/* ===================================================================
 * Back-to-Top control -- relocated from assets/css/single-post.css
 * (Task 1 site-wide CSS conditional-loading fix, 2026-09-19, Report 35).
 * Genuinely global: rendered via vlz_single_post_register_back_to_top()
 * (inc/blog/single.php) on generate_after_footer for every public
 * front-end route, replacing GeneratePress's own back-to-top control.
 * Markup/JS ownership stays in single.php / assets/js/single-post.js;
 * only the CSS moved here.
 * =================================================================== */
/* ===================================================================
 * TOC + Back-to-Top Build & Final QA — Back-to-Top control.
 *
 * One child-owned, page-level fixed control replaces GeneratePress's legacy
 * renderer and script on every public front-end route. Its base state is
 * hidden and non-interactive; JS exposes it at the exact 300px threshold.
 *
 * `--btt-progress` (0-1) is set inline by assets/js/single-post.js from
 * whole-page scroll progress and drives the ring via `stroke-dashoffset`;
 * `r="25"` on both circles in a `viewBox="0 0 56 56"` gives a circumference
 * of 2 * pi * 25 = 157.0796... (rounded to 157.08 below) — the fixed
 * `stroke-dasharray` every dashoffset value is computed against.
 * =================================================================== */
.vlz-single-back-to-top {
	--btt-size: 52px;
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: var(--vlz-z-sticky);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--btt-size);
	height: var(--btt-size);
	padding: 0;
	border: 0;
	border-radius: var(--vlz-radius-pill);
	background: var(--vlz-color-surface);
	color: var(--vlz-color-primary-strong);
	box-shadow: 0 4px 14px rgba(23, 102, 156, 0.18);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	pointer-events: none;
}

.vlz-single-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.vlz-single-back-to-top:hover {
	background: var(--vlz-color-surface-alt);
}

.vlz-single-back-to-top:focus-visible {
	outline: var(--vlz-focus-width) solid var(--vlz-color-focus);
	outline-offset: var(--vlz-focus-offset);
}

.vlz-single-back-to-top__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Progress should read as "filling clockwise from the top", not from the
	 * SVG's default 3-o'clock start point. */
	transform: rotate(-90deg);
}

.vlz-single-back-to-top__ring-track,
.vlz-single-back-to-top__ring-progress {
	fill: none;
	stroke-width: 3;
}

.vlz-single-back-to-top__ring-track {
	/* Neutral track so the progress stroke stays legible against it
	 * regardless of what's behind the button. */
	stroke: var(--vlz-color-border, #d9e2ec);
}

.vlz-single-back-to-top__ring-progress {
	stroke: var(--vlz-color-primary-strong);
	stroke-linecap: round;
	stroke-dasharray: 157.08;
	stroke-dashoffset: calc(157.08 * (1 - var(--btt-progress, 0)));
}

@media (prefers-reduced-motion: no-preference) {
	.vlz-single-back-to-top {
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	}

	.vlz-single-back-to-top.is-visible {
		transition-delay: 0s;
	}

	.vlz-single-back-to-top__ring-progress {
		transition: stroke-dashoffset 0.1s linear;
	}
}

.vlz-single-back-to-top__arrow {
	position: relative;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* Tablet overrides the Desktop 30px offsets; Mobile is scoped below. */
@media (max-width: 1024.98px) {
	.vlz-single-back-to-top {
		right: 20px;
		bottom: 24px;
	}
}

@media (max-width: 767.98px) {
	.vlz-single-back-to-top {
		--btt-size: 48px;
		right: 16px;
		/* Clears the ~72px mobile contact dock plus a safety
		 * margin; safe-area-aware for devices with a home-indicator inset. */
		bottom: calc(92px + env(safe-area-inset-bottom, 0px));
	}
}