/* ────────────────────────────────────────────────────────────────
   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 Frame:
     - No border-radius. 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 an affiliate applies in the editor. Same
       precedent as icon-cards (position-bound colors documented in
       COMPONENT-MAP.md).

   z-index: 90. Unlike habitat-arch, this theme does NOT set its own
   z-index on the mobile nav — it falls back to GeneratePress core's
   defaults (.main-navigation at 100, its submenu at 99999). 90 still
   sits behind the mobile nav (100) and behind site-popup's overlay
   (99999, from the community-connect-features plugin) either way, so
   the same value works here for a different reason than in Arch. 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;
}