/* ────────────────────────────────────────────────────────────────
   03-sticky-actions.css — Sticky Actions (mobile fixed bottom bar)
   Patterns: habitat-patterns/sticky-actions-1, sticky-actions-2
   Class chain: .cc-sticky-actions (fixed bar, full-bleed)
                → .cc-sticky-actions__inner (button row)
                → .wp-block-buttons → .wp-block-button (nth-child colors)
                                     → .wp-block-button__link.cc-sticky-actions__action

   Deliberate exceptions to this theme's usual conventions — do not
   "fix" these to match the rest of Arch:
     - No border-radius, even though Arch rounds nearly everything else.
       An edge-to-edge bar with rounded buttons reads as a floating
       widget rather than a fixed edge.
     - No gap between buttons — the bar should read as one solid edge.
     - Colors are position-bound (button 1 orange, button 2 blue),
       enforced here by :nth-child so they hold regardless of which
       button style variation (is-style-primary/secondary/etc.) an
       affiliate applies in the editor. Same precedent as icon-cards.

   z-index: 90. Mobile nav is 999 in this theme (03-site-header.css),
   site-popup's overlay is 99999 (community-connect-features plugin) —
   90 sits behind both on purpose, so this bar is covered automatically
   whenever either opens. Do not raise this value without re-checking
   both of those.

   .cc-sticky-actions__action is a published class — Google Tag Manager
   binds a conversion-tracking click trigger to it via CSS selector on
   every affiliate site. Do not rename it; nothing will fail loudly if
   you do, tracking will just silently stop.
   ──────────────────────────────────────────────────────────────── */

.cc-sticky-actions {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 90;
}

/* Duplicate guard — inserting the pattern twice must render one bar. */
.cc-sticky-actions ~ .cc-sticky-actions {
	display: none !important;
}

.cc-sticky-actions__inner {
	display: flex;
}

.cc-sticky-actions .wp-block-buttons {
	display: flex;
	width: 100%;
	gap: 0;
	margin: 0;
}

.cc-sticky-actions .wp-block-button {
	flex: 1;
	margin: 0;
}

/* Selector must be at least as specific as 02-buttons.css's own base rule
   for this exact element. That rule is a grouped selector,
   ".wp-block-button .wp-block-button__link, .wp-block-button a.wp-block-button__link"
   — since our button is a real <a>, it matches the second, MORE specific
   branch (2 classes + 1 element), which beats a plain 2-class selector
   regardless of source order (the element-tier difference breaks the
   tie). Confirmed live: without the "a" here, this whole rule silently
   lost to 02-buttons.css's 8px radius / 48px min-height, not just radius. */
.cc-sticky-actions a.wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 0 var(--spacing-md);
	padding-bottom: env(safe-area-inset-bottom);
	border-radius: var(--radius-none);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	text-align: center;
	text-decoration: none;
}

.cc-sticky-actions .wp-block-button:nth-child(1) .wp-block-button__link {
	background-color: var(--color-orange-primary);
}

.cc-sticky-actions .wp-block-button:nth-child(2) .wp-block-button__link {
	background-color: var(--color-blue-primary);
}

@media (max-width: 768px) {
	.cc-sticky-actions {
		display: block;
	}
}

/* Body clearance so the fixed bar doesn't overlap page content/footer
   at scroll-end. Value must track the button's own min-height (56px)
   above — keep these two numbers in sync if either changes. */
@media (max-width: 768px) {
	body:has(.cc-sticky-actions) {
		padding-bottom: calc(56px + env(safe-area-inset-bottom));
	}
}

/* ── Editor-only override ──────────────────────────────────────
   Hidden above 768px and position: fixed on the front end (both by
   design, above) — but that makes the block invisible in the editor
   canvas (normally wider than 768px) with nothing to click into, or
   floating fixed over the canvas if forced visible without also
   neutralizing position. Force it visible and back into normal document
   flow only inside the editor, per this codebase's own convention of
   scoping editor-only fixes with .editor-styles-wrapper at the bottom of
   each component's own file (see 04-editor.css's docblock). Front-end
   behavior is untouched — .editor-styles-wrapper doesn't exist there. */
.editor-styles-wrapper .cc-sticky-actions {
	display: block !important;
	position: static !important;
}