/*
 * Mobile CTA Bar
 *
 * Sticky bottom button bar shown on phone-size viewports only.
 * Hidden on desktop. Honors iOS safe-area inset.
 *
 * The bar is a native core/buttons block (`.wp-block-buttons.nn-mobile-cta`)
 * holding native core/button blocks — so it is fully editable in the Site
 * Editor. This stylesheet only does layout + shape; button colours come from
 * WordPress's own preset classes (has-<slug>-background-color, etc.).
 */

/* ── Wrapper (the core/buttons block) ─────────────────────────
   `display` carries !important because the wrapper is a core/buttons
   block — core's own .wp-block-buttons layout CSS otherwise competes
   with (and can win over) our show/hide rules. */
.nn-mobile-cta {
	display: none !important;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	/* border-box so left:0 + right:0 + padding stays exactly viewport-wide.
	   The wrapper is a core/buttons block and does not inherit a border-box
	   reset — without this the 0.75rem side padding is added outside the
	   viewport-width box and the bar runs ~24px past the right screen edge. */
	box-sizing: border-box;
	flex-wrap: nowrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0.75rem;
	padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 47.99rem) {
	.nn-mobile-cta {
		display: flex !important;
	}
}

/* Docked: solid bar across the bottom, grounded feel. A palette background
   chosen in the settings adds a has-<slug>-background-color class, whose
   WordPress-generated rule (with !important) overrides this default. */
.nn-mobile-cta--docked {
	background-color: var(--wp--preset--color--background, #ffffff);
	border-top: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.08));
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
}

/* Floating: no bar background; buttons float over content with their own
   drop-shadow so they read against any page background. */
.nn-mobile-cta--floating {
	background-color: transparent;
	border-top: none;
	box-shadow: none;
}
.nn-mobile-cta--floating .wp-block-button__link {
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.18),
		0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ── Layout variants ────────────────────────────────────────── */
.nn-mobile-cta--stacked {
	flex-direction: column;
}
.nn-mobile-cta--sbs .wp-block-button,
.nn-mobile-cta--single .wp-block-button {
	flex: 1 1 0;
}
.nn-mobile-cta--stacked .wp-block-button {
	width: 100%;
}

/* ── Buttons (native core/button blocks) ────────────────────── */
.nn-mobile-cta .wp-block-button {
	margin: 0;
}
.nn-mobile-cta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 1rem;
	border-radius: 9999px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.nn-mobile-cta .wp-block-button__link:active {
	transform: translateY(1px);
}
.nn-mobile-cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #2563eb);
	outline-offset: 2px;
}

/* ── Icons ──────────────────────────────────────────────────────
   A button carries a `nn-cta-icon-<slug>` class (added in the settings
   form, or hand-typed in the Site Editor's Advanced → CSS class field).
   The class sets the --nn-cta-icon variable; the shared rule below paints
   that SVG as a mask before the label, in the button's text colour. */
.nn-cta-icon-phone                     { --nn-cta-icon: url("icons/phone.svg"); }
.nn-cta-icon-envelope                  { --nn-cta-icon: url("icons/envelope.svg"); }
.nn-cta-icon-calendar-days             { --nn-cta-icon: url("icons/calendar-days.svg"); }
.nn-cta-icon-location-dot              { --nn-cta-icon: url("icons/location-dot.svg"); }
.nn-cta-icon-star                      { --nn-cta-icon: url("icons/star.svg"); }
.nn-cta-icon-arrow-right               { --nn-cta-icon: url("icons/arrow-right.svg"); }
.nn-cta-icon-comments                  { --nn-cta-icon: url("icons/comments.svg"); }
.nn-cta-icon-cart-shopping             { --nn-cta-icon: url("icons/cart-shopping.svg"); }
.nn-cta-icon-play                      { --nn-cta-icon: url("icons/play.svg"); }
.nn-cta-icon-circle-info               { --nn-cta-icon: url("icons/circle-info.svg"); }
.nn-cta-icon-arrow-up-right-from-square { --nn-cta-icon: url("icons/arrow-up-right-from-square.svg"); }
.nn-cta-icon-download                  { --nn-cta-icon: url("icons/download.svg"); }
.nn-cta-icon-clock                     { --nn-cta-icon: url("icons/clock.svg"); }
.nn-cta-icon-bookmark                  { --nn-cta-icon: url("icons/bookmark.svg"); }
.nn-cta-icon-heart                     { --nn-cta-icon: url("icons/heart.svg"); }

.nn-mobile-cta .wp-block-button[class*="nn-cta-icon-"] .wp-block-button__link::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	background-color: currentColor;
	-webkit-mask: var(--nn-cta-icon) center / contain no-repeat;
	mask: var(--nn-cta-icon) center / contain no-repeat;
}

/* ── Body padding so content isn't covered by the bar on mobile ──
   :has() is supported in all modern browsers (Chrome 105+, Safari 15.4+,
   Firefox 121+). Older browsers just skip the padding — the bar still
   works, content simply ends behind it. */
@media (max-width: 47.99rem) {
	body:has(.nn-mobile-cta--sbs),
	body:has(.nn-mobile-cta--single) {
		padding-bottom: 4.5rem;
	}
	body:has(.nn-mobile-cta--stacked) {
		padding-bottom: 8rem;
	}
}

/* ── Site Editor context ────────────────────────────────────────
   In the Site Editor the bar must be visible and editable at any
   canvas width — so it renders inline rather than fixed-positioned
   (which at desktop width would hide it via the rules above).
   `.editor-styles-wrapper` exists only inside the editor, so this is
   inert on the front end. The 2-class specificity beats the base
   `.nn-mobile-cta` rule without needing !important. */
.editor-styles-wrapper .nn-mobile-cta {
	display: flex !important;
	position: static;
}