/*
Theme Name: EnerMAN Astra Child
Theme URI: https://enerman.in/
Description: Child theme of Astra for EnerMAN Technologies. Holds small code fixes (band-aid audit F28, F32, F33, F34, F36) and the WhatsApp link that replaces the Click to Chat plugin.
Author: EnerMAN Technologies
Author URI: https://enerman.in/
Template: astra
Version: 1.0.6
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: enerman-astra-child
*/

/* The v2 design system CSS is not in this file, on purpose. It stays in
   Appearance > Customize > Additional CSS (its source is the design system v2 CSS block).
   Additional CSS belongs to the active theme, so the switch to this theme copies it across
   (RUNBOOK-switch-to-child.md). This file holds only the WhatsApp link. */

/* The WhatsApp link (band-aid audit F04, decision D1 option A), printed by functions.php.
   v2 colours: navy fill, white text, a white edge so it still shows on navy bands and the footer.
   The var() fallbacks keep the colours if the v2 block is ever missing.
   Keyboard focus takes the v2 block's orange ring, as every link does. */
.enerman-wa {
	position: fixed;
	right: 16px;
	bottom: 24px;
	z-index: 99;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 48px;
	padding: 0 18px 0 14px;
	border: 2px solid var(--eman-white, #FFFFFF);
	border-radius: 999px;
	background: var(--eman-navy, #04195E);
	box-shadow: var(--eman-sh-card, 0 1px 2px rgba(4, 25, 94, 0.06), 0 6px 20px rgba(4, 25, 94, 0.06));
	color: var(--eman-white, #FFFFFF);
	font-family: "Lexend", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

/* Two classes beat Astra's a:hover and a:focus colours (one class and one element). */
.enerman-wa:hover,
.enerman-wa:focus,
.enerman-wa:visited {
	color: var(--eman-white, #FFFFFF);
}

.enerman-wa:hover {
	background: var(--eman-navy-line, #3A4C85);
}

/* Astra draws a dotted outline on every focused link; keep only the keyboard ring. */
.enerman-wa:focus:not(:focus-visible) {
	outline: none;
}

/* The keyboard ring, set on the link itself: on the test site a theme rule outranked the v2 block's
   a:focus-visible and the ring came out white on a white page (check, 27 Sep 19:37). Orange, as in
   Direction B: 3.05:1 on white, 5.3:1 on navy. */
.enerman-wa:focus-visible {
	outline: 2px solid var(--eman-orange, #F4690B);
	outline-offset: 3px;
}

.enerman-wa__icon {
	flex: none;
	display: block;
}

/* Phones only. Pinned from the start, the link sat on a hero button on a 390-pixel phone:
   the datasheet or walkthrough button on the seven product pages, and a button on Home and on
   Products when the browser's bars leave a shorter screen. At the page end it sat on the footer's
   social icons. So on phones it waits for 96 pixels of scroll and fades in by 160; by then
   everything that was whole on the first screen has moved clear. Between 160 and 96 pixels
   from the page end it slides below the screen; keyboard focus brings it back.
   Browsers without scroll-driven animations (Firefox; Safari before 26) keep it pinned the
   whole time, as the Click to Chat bubble is today. */
@media (max-width: 767px) {
	@supports (animation-timeline: scroll()) {
		.enerman-wa {
			animation: enerman-wa-reveal auto linear both, enerman-wa-tuck auto linear both;
			animation-timeline: scroll(root), scroll(root);
			animation-range: 96px 160px, calc(100% - 160px) calc(100% - 96px);
		}

		.enerman-wa:focus-visible {
			animation-name: enerman-wa-reveal, none;
		}
	}
}

@keyframes enerman-wa-reveal {
	from {
		opacity: 0;
		visibility: hidden;
	}
	to {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes enerman-wa-tuck {
	to {
		translate: 0 calc(100% + 32px);
	}
}