/*
 * article-actions-bar.css — sticky-on-scroll Listen/Share bar (2026-07-20, revised twice same day).
 *
 * assets/css/theme.css is protected shell (kit/guards/check_protected_shell.py) and must not be
 * touched during the current release — same additive-file pattern as listen-to-article.css in
 * this folder, loaded per the eligibility resolver (alexdesigns_article_actions_bar_enqueue() in
 * functions.php) with an explicit dependency on 'alexdesigns-theme' so it wins the cascade by
 * source order.
 *
 * Behavior (Alex, 2026-07-20): white/plain, in normal document flow, on page load — not a
 * colored banner the instant the page loads. Once the user scrolls past it, it pins below the
 * header AND switches to the blue "stand out" treatment (.is-stuck, toggled by
 * assets/js/article-actions-bar.js via an IntersectionObserver on a sentinel element rendered
 * immediately before the bar).
 *
 * Mechanism, corrected mid-pass: tried position:sticky first (kept the bar in normal flow at all
 * times, which would have also been the fix for a breadcrumb-overlap bug found the same pass).
 * Found live, immediately after deploying it, that sticky doesn't actually hold here: an element
 * can only stay stuck while its OWN containing block still has scrollable height below the stick
 * point, and WordPress wraps this block in its own auto-generated .wp-block-template-part div
 * that's barely taller than the bar itself — the bar ran out of "room" to stick almost
 * immediately and scrolled off the top of the viewport entirely, confirmed via
 * getBoundingClientRect() showing a negative top. Settled on: default (not `.is-stuck`) has NO
 * position rule at all, a normal in-flow block element; `.is-stuck` applies position:fixed. The
 * sentinel element (same one used for stuck-state detection) doubles as the flow-space
 * placeholder while fixed removes the bar from flow — see the JS for how its height is set.
 *
 * --ad-header-h is set by assets/js/article-actions-bar.js (ResizeObserver) so the fixed `top`
 * offset (used only in the .is-stuck state) stays correct across the header's mobile/desktop
 * height difference and a logged-in admin bar.
 */

/* .ad-visually-hidden is ALSO defined in listen-to-article.css -- deliberately duplicated here,
   not shared/imported. That file stays enqueued only on singular posts (Listen isn't extended to
   other page types until Phase 2B); this file now loads broadly per the eligibility resolver
   (Share-only on most pages today). The share status region and URL-fallback label markup this
   file's own PHP renders (inc/listen-share-eligibility.php) needs this class available
   independent of whether listen-to-article.css also happens to be loaded on a given page —
   found live this pass by tracing which CSS file actually loads on a Share-only, non-post page. */
.ad-visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ad-actions-bar__sentinel {
	height: 0;
}

/* Alex, pass 3 (2026-07-20): "tighten up the vertical spacing as much as possible above and below
   the white bar." assets/js/article-actions-bar.js tags the relocated .wp-block-template-part
   wrapper with this class right before moving it to sit after the page's H1. Once moved, it's no
   longer that container's first child, so WordPress's own global block-gap rule
   (`:where(.is-layout-flow)>*{margin-block-start:var(--wp--preset--spacing--50)}` /
   `:where(.is-layout-constrained)>*{...}`, 1.5rem, from theme.json's spacing scale) applies a
   1.5rem margin-top to the wrapper itself, AND — since the same rule keys off DOM position, not
   authorship — an identical 1.5rem margin-top to whatever element now immediately follows it.
   That's the large gap both above and below the bar Alex flagged live; it was never intentional
   spacing, just an unrelated global rule reacting to a DOM position the templates never
   authored. Neither !important is optional here: theme.json's own block-gap rule is itself
   unscoped (`:root :where(.is-layout-flow)>*`), so an unqualified override loses on source order
   alone in some template layouts. */
.ad-actions-bar__wrap-under-h1 {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
.ad-actions-bar__wrap-under-h1 + * {
	margin-block-start: 0 !important;
}

/* Indent found live (2026-07-20, pass 5): .ad-actions-bar__inner's own max-width + side padding
   (below) is sized for the bar's ORIGINAL full-bleed placement directly under the header, where
   that padding is the only thing keeping its content off the viewport edges. Once relocated
   in-flow under the breadcrumb or H1 (this class), the wrapper already sits inside the page's own
   padded content container (e.g. has-global-padding) at the SAME left edge as the breadcrumb —
   the inner element's own side padding then stacks on top of that, indenting "Share"/"Listen to
   article" ~25px further right than the breadcrumb and H1 they're supposed to align with. The
   surrounding container already provides correct side spacing; this element needs none of its
   own. max-width/margin-inline no longer do anything useful either once nested here (the wrapper
   is already narrower than --wp--style--global--wide-size in every real layout), removed for
   clarity, not because they were causing a second bug. */
.ad-actions-bar__wrap-under-h1 .ad-actions-bar__inner {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.ad-actions-bar {
	/* Default (page just loaded, not yet stuck): a normal in-flow block element, white/plain,
	   blending with the page — .ad-listen-trigger/.ad-share-trigger's own base colors
	   (listen-to-article.css / this file's Share rule below) already read correctly here, no
	   override needed in this state. */
	background: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: background-color 160ms ease, border-color 160ms ease;
}

/* Stuck state — toggled by assets/js/article-actions-bar.js once the sentinel above scrolls out
   of view. position:fixed here, NOT position:sticky on the base rule -- found live 2026-07-20
   that sticky only holds an element in place while its OWN containing block still has scrollable
   height below the stick point, and WordPress's auto-generated .wp-block-template-part wrapper
   around this block is barely taller than the bar itself, so a permanently-sticky bar ran out of
   "room" to stick almost immediately and scrolled away with it. Toggling to fixed only once
   stuck sidesteps that entirely (fixed is relative to the viewport, not a parent's height) --
   the sentinel element handles keeping the document flow correct in this state (see the JS: its
   height gets set to the bar's own height while stuck, holding the space fixed removes the bar
   from, so nothing after it jumps). Blue background / white text so the bar reads as a distinct,
   findable strip once the user has scrolled past its original position. light-text is the same
   token already used for text on the site's other colored (navy) surfaces, not a one-off. */
.ad-actions-bar.is-stuck {
	position: fixed;
	top: var(--ad-header-h, 61px);
	left: 0;
	width: 100%;
	z-index: 45; /* below .ad-header's 50 and .ad-progress's 60, above normal page content */
	background: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary-hover, var(--wp--preset--color--primary));
}

.ad-actions-bar.is-stuck .ad-listen-trigger,
.ad-actions-bar.is-stuck .ad-share-trigger {
	color: var(--wp--preset--color--light-text);
}
.ad-actions-bar.is-stuck .ad-listen-trigger:hover,
.ad-actions-bar.is-stuck .ad-share-trigger:hover {
	color: #fff;
}
.ad-actions-bar.is-stuck .ad-listen-trigger:focus-visible,
.ad-actions-bar.is-stuck .ad-share-trigger:focus-visible {
	outline-color: var(--wp--preset--color--light-text);
}

/* ---- Expanded Listen player, stuck state only -----------------------------------------------
   listen-to-article.css's .ad-listen-player is styled for a light background (surface/tint fill,
   muted-ink text) — that's correct as-is for the default (not-yet-stuck) white bar, so this only
   needs to override once .is-stuck switches the bar to blue. */
.ad-actions-bar.is-stuck .ad-listen-player {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--wp--preset--color--light-text);
}
.ad-actions-bar.is-stuck .ad-listen-player__btn {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--wp--preset--color--light-text);
}
.ad-actions-bar.is-stuck .ad-listen-player__btn:hover {
	border-color: #fff;
	color: #fff;
}
.ad-actions-bar.is-stuck .ad-listen-player__speed-btn {
	color: var(--wp--preset--color--muted-on-navy);
}
.ad-actions-bar.is-stuck .ad-listen-player__speed-btn.is-active {
	border-color: #fff;
	color: #fff;
}
.ad-actions-bar.is-stuck .ad-listen-player__progress {
	color: var(--wp--preset--color--muted-on-navy);
}
.ad-actions-bar.is-stuck .ad-listen-player__close {
	color: var(--wp--preset--color--muted-on-navy);
}
.ad-actions-bar.is-stuck .ad-listen-player__close:hover {
	color: #fff;
}

.ad-actions-bar__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 0.6rem clamp(22px, 5vw, 48px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

/* No breadcrumb-spacing compensation needed anywhere in this file. The old
   [data-ad-actions-bar] ~ .ad-breadcrumb bug class (found live 2026-07-20) doesn't apply at all
   anymore: assets/js/article-actions-bar.js now relocates the bar to sit directly under the
   page's H1 (Alex, pass 2, same day), so it no longer sits between the header and the breadcrumb
   in the DOM in the first place. In its default (not `.is-stuck`) state it's a normal in-flow
   block, so nothing after it is ever pushed out of place either. */

/* ---- Share trigger ------------------------------------------------------------------------
   Same restrained treatment as .ad-listen-trigger (listen-to-article.css): underlined text +
   small line icon, no filled background/shadow/badge — an editorial action, not a CTA. */
.ad-share-trigger {
	display: inline-flex; align-items: center; gap: 0.4rem;
	background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
	font-family: inherit; font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary); text-decoration: underline;
	text-underline-offset: 0.16em; min-height: 44px;
}
.ad-share-trigger:hover { color: var(--wp--preset--color--primary-hover, var(--wp--preset--color--primary)); }
.ad-share-trigger:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.ad-share-trigger svg { flex: none; }
/* Companion rule per docs/ui-standards.md §1: a class's display must never be beaten by [hidden]. */
.ad-share-trigger[hidden] { display: none; }

/* ---- Selectable-URL fallback (Task 1, Phase 1) --------------------------------------------
   Final fallback tier when native share AND clipboard both fail/are unavailable — a real,
   focusable, readonly text field the visitor can select-and-copy manually, never a dead end.
   Set as its own flex item so it doesn't fight the trigger row's layout when shown. Given
   .ad-actions-bar-h and .ad-share-trigger's own [hidden] bugs found live this session (Chrome
   excludes <svg> from the [hidden] UA default; a class's own display ties with [hidden] at equal
   specificity), this element gets the SAME explicit companion rule defensively even though it's
   a plain <div>, not an svg — cheap insurance against the identical class of bug recurring. */
.ad-share-url-fallback {
	display: flex; align-items: center; width: 100%;
	margin-top: 0.5rem; flex-basis: 100%;
}
.ad-share-url-fallback[hidden] { display: none; }
.ad-share-url-fallback__input {
	width: 100%; min-height: 44px; padding: 0.5rem 0.75rem;
	font-family: inherit; font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
}
.ad-share-url-fallback__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px;
}
.ad-actions-bar.is-stuck .ad-share-url-fallback__input {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--wp--preset--color--light-text);
}
.ad-actions-bar.is-stuck .ad-share-url-fallback__input:focus-visible {
	outline-color: #fff;
}

@media (max-width: 480px) {
	.ad-actions-bar__inner { gap: 1.1rem; padding-block: 0.5rem; }
}