/* ==========================================================================
   pjd-core - PWA install prompt bar.
   Rendered by includes/features/class-pwa-install-prompt.php.

   Brand-agnostic on purpose: a neutral slate scale carries every surface,
   border and text colour so the bar never fights a Divi child theme, and the
   site's brand shows up in exactly one place - the CTA.

   No external requests. Typography inherits the host page.
   ========================================================================== */

.pjd-pwa-bar {
	/* --pwa-accent / --pwa-accent-ink / --pwa-accent-ring arrive as INLINE
	   custom properties from PHP, derived from pwa.theme_color. They are
	   declared here only so the bar still renders if an optimiser strips the
	   style attribute.

	   TRAP: inline custom properties beat a stylesheet declaration, so do NOT
	   redeclare --pwa-accent inside a [data-style] block. The old mock set it
	   to white on the dark style; doing that here would silently throw the
	   brand colour away on one style and not the others. */
	--pwa-accent: #0f172a;
	--pwa-accent-ink: #ffffff;
	--pwa-accent-ring: rgba(255, 255, 255, 0.24);

	/* Neutral scale. Overridden per style below. */
	--pwa-surface: #ffffff;
	--pwa-border: #e6eaf0;
	--pwa-title: #0f172a;
	--pwa-sub: #697586;
	--pwa-close: #9aa4b5;
	--pwa-btn-quiet-bg: #f1f4f8;
	--pwa-btn-quiet-ink: #4a5568;
	--pwa-radius: 10px;
	--pwa-gap: 11px;

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;

	display: flex;
	align-items: center;
	gap: var(--pwa-gap);

	padding: 9px 12px;
	padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));

	background: var(--pwa-surface);
	border-top: 1px solid var(--pwa-border);
	box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.1);

	font-family: inherit;

	/* Ships hidden. Only the controller ever reveals it, and only once it has a
	   real install path - visibility (not opacity) so the buttons stay out of
	   the tab order while the bar is down. */
	transform: translateY(110%);
	transition: transform 0.22s ease;
	visibility: hidden;
}

.pjd-pwa-bar[data-visible="true"] {
	transform: translateY(0);
	visibility: visible;
}

/* Belt and braces alongside the JS standalone check: never show the install
   prompt inside the already-installed app. */
@media (display-mode: standalone) {
	.pjd-pwa-bar {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pjd-pwa-bar {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Parts
   -------------------------------------------------------------------------- */

/* Absent when no icon attachment resolves. The flex gap closes on its own, so
   there is nothing to toggle and no broken image to render. */
.pjd-pwa-bar__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: var(--pwa-radius);
	background: #ffffff; /* always white so a dark logo mark survives the dark style */
	border: 1px solid var(--pwa-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pjd-pwa-bar__icon img {
	width: 27px;
	height: auto;
	max-width: 100%;
	display: block;
}

.pjd-pwa-bar__text {
	flex: 1;
	min-width: 0; /* without this the ellipsis never kicks in inside a flex row */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pjd-pwa-bar__title {
	display: block;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--pwa-title);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pjd-pwa-bar__sub {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	line-height: 1.3;
	color: var(--pwa-sub);
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pjd-pwa-bar__sub svg {
	flex: none;
}

/* CTA: 36px visual, 44px tap area via the ::before overlay below. */
.pjd-pwa-bar__cta {
	flex: none;
	position: relative;
	border: none;
	cursor: pointer;
	background: var(--pwa-accent);
	color: var(--pwa-accent-ink);
	font-family: inherit;
	font-weight: 800;
	font-size: 12.5px;
	line-height: 1;
	padding: 11px 16px;
	border-radius: 8px;
	white-space: nowrap;

	/* The ring is what stops the button vanishing when the brand colour is close
	   to the bar's surface. The default theme_color IS #000000, which would
	   otherwise be a black button on the near-black dark style. PHP picks the
	   ring tone from the same luminance test that picks the ink. */
	box-shadow: inset 0 0 0 1px var(--pwa-accent-ring);
}

.pjd-pwa-bar__cta::before,
.pjd-pwa-bar__close::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 44px;
	min-height: 44px;
	width: 100%;
	height: 100%;
}

/* Quiet CTA - the iOS "How" button. Neutral by design: there is no install to
   trigger there, so it must not look like the primary action. */
.pjd-pwa-bar__cta--quiet {
	background: var(--pwa-btn-quiet-bg);
	color: var(--pwa-btn-quiet-ink);
	box-shadow: none;
}

.pjd-pwa-bar__close {
	flex: none;
	position: relative;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--pwa-close);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.pjd-pwa-bar__cta:focus-visible,
.pjd-pwa-bar__close:focus-visible {
	outline: 2px solid var(--pwa-title);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Styles - data-style="light" | "dark" | "floating"
   light is the default and needs no overrides.
   -------------------------------------------------------------------------- */

.pjd-pwa-bar[data-style="dark"] {
	--pwa-surface: #0f172a;
	--pwa-border: transparent;
	--pwa-title: #ffffff;
	--pwa-sub: #9aa7bd;
	--pwa-close: #7c89a0;
	--pwa-btn-quiet-bg: rgba(255, 255, 255, 0.12);
	--pwa-btn-quiet-ink: #e8edf5;
	border-top: none;
}

.pjd-pwa-bar[data-style="dark"] .pjd-pwa-bar__icon {
	border-color: rgba(255, 255, 255, 0.16);
}

.pjd-pwa-bar[data-style="floating"] {
	left: 10px;
	right: 10px;
	bottom: 10px;
	bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	padding: 9px 11px;
	border: 1px solid var(--pwa-border);
	border-radius: 13px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

.pjd-pwa-bar[data-style="floating"] .pjd-pwa-bar__icon {
	width: 36px;
	height: 36px;
}

.pjd-pwa-bar[data-style="floating"] .pjd-pwa-bar__icon img {
	width: 26px;
}

.pjd-pwa-bar[data-style="floating"] .pjd-pwa-bar__close {
	width: 24px;
	height: 24px;
}

/* --------------------------------------------------------------------------
   Desktop - 768px and up.

   NOT hidden: Chrome and Edge install PWAs on desktop, and hiding the bar
   there threw that install away. But a full-width strip across a 1920px
   monitor reads as a cookie banner, so every style collapses to the same
   bottom-right card.

   Selector is [data-style] (present, any value) so it has the same specificity
   as the per-style blocks above and wins by source order. PHP always sets the
   attribute.
   -------------------------------------------------------------------------- */

/* v1.6.21: DEFAULT IS MOBILE ONLY. The desktop card below is opt-in per
   site via pwa.install_prompt.show_on. Kept as a rule rather than deleted
   because desktop Chrome and Edge do install PWAs - it is a choice, not a
   capability gap. */
@media (min-width: 768px) {
	/* :not([data-preview]) so an admin previewing on a laptop still sees the
	   bar. Without it, phones-only (the default) would hide the very thing
	   preview mode exists to show. */
	.pjd-pwa-bar[data-show-on="mobile"]:not([data-preview]) {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.pjd-pwa-bar[data-style] {
		left: auto;
		right: 16px;
		bottom: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		width: calc(100% - 32px);
		max-width: 420px;
		padding: 11px 13px;
		padding-bottom: 11px;
		border: 1px solid var(--pwa-border);
		border-radius: 13px;
		box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
	}

	/* --pwa-border is transparent on the dark style, which would leave the card
	   with no edge at all against a dark page. */
	.pjd-pwa-bar[data-style="dark"] {
		border-color: rgba(255, 255, 255, 0.12);
	}
}

/* --------------------------------------------------------------------------
   iOS mode - set by the controller when there is no install API to call.
   Swaps the copy only; works on top of all three styles.
   -------------------------------------------------------------------------- */

.pjd-pwa-bar__ios {
	display: none;
}

.pjd-pwa-bar[data-mode="ios"] .pjd-pwa-bar__standard {
	display: none;
}

.pjd-pwa-bar[data-mode="ios"] .pjd-pwa-bar__text.pjd-pwa-bar__ios {
	display: flex;
	flex-direction: column;
}

.pjd-pwa-bar[data-mode="ios"] button.pjd-pwa-bar__ios {
	display: inline-flex;
	align-items: center;
}

/* "How" expands the hint. The sub line is nowrap + ellipsis by default, and on
   a narrow iPhone the Add-to-Home-Screen instruction is exactly the copy that
   gets truncated - so the quiet button has a real job to do rather than being
   decoration. */
.pjd-pwa-bar[data-mode="ios"][data-ios-expanded="true"] .pjd-pwa-bar__sub {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	/* The sub line is a flex row of text / glyph / text. Without wrap those
	   three squash instead of flowing onto a second line. */
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Body offset - keeps a fixed bottom bar off the page's own bottom UI.
   The controller adds .pjd-pwa-bar-open to <html> while the bar is up.
   Mobile only: on desktop the bar is an inset card, not a full-width strip.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.pjd-pwa-bar-open body {
		padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
	}
}