/* ============================================================
 * ThornBloom Sticky Footer CTA (.tb-sticky-cta)
 * Scroll-triggered, page-context-aware, dismissible.
 * Hidden by default; .is-visible activates.
 * @since 2.7.21 (chunk 2 — multi-build 2026-04-21)
 * ============================================================ */

.tb-sticky-cta {
	position: fixed; left: 0; right: 0; bottom: 0;
	z-index: 40;
	background: var(--realm-primary, #0E1426);
	border-top: 1px solid var(--tb-border-strong, rgba(209, 178, 140, 0.35));
	padding: 14px 24px;
	display: flex; align-items: center; justify-content: center;
	gap: 18px;
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
	transition: transform .32s ease-out, opacity .32s ease-out;
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
}

.tb-sticky-cta::before {
	content: ""; position: absolute;
	left: 0; right: 0; top: -1px; height: 1px;
	background: linear-gradient(90deg,
		transparent,
		var(--realm-metallic, #D1B28C) 20%,
		var(--realm-metallic, #D1B28C) 80%,
		transparent);
	opacity: 0.7;
}

.tb-sticky-cta.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.tb-sticky-cta-inner {
	display: flex; align-items: center; gap: 22px;
	max-width: 1180px; width: 100%; margin: 0 auto;
}

.tb-sticky-cta-eyebrow {
	flex: 1 1 auto;
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-size: 13px; font-weight: 600;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--realm-taupe, #B8B3A8);
	margin: 0;
}
.tb-sticky-cta-eyebrow em {
	font-style: normal;
	color: var(--realm-cream, #ECE4D5);
	text-transform: none;
	letter-spacing: 0.02em;
	font-family: var(--tb-font-body, 'Cormorant Garamond', Georgia, serif);
	font-size: 17px;
	font-weight: 400;
	margin-right: 8px;
}

.tb-sticky-cta-actions {
	display: flex; align-items: center; gap: 14px;
}

/* Buttons — namespaced .tb-btn variants are shared with the mobile menu featured card.
   Defined here for first use; safe if duplicated by other components. */
.tb-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 13px 24px;
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-size: 12px; font-weight: 600;
	letter-spacing: 0.18em; text-transform: uppercase;
	text-decoration: none; cursor: pointer;
	border-radius: 2px;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tb-btn--primary {
	background: var(--realm-metallic, #D1B28C);
	color: var(--realm-bg, #070A14);
	border: 1px solid var(--realm-metallic, #D1B28C);
}
.tb-btn--primary:hover,
.tb-btn--primary:focus-visible {
	background: var(--realm-metallic-bright, #E1C29A);
	border-color: var(--realm-metallic-bright, #E1C29A);
	outline: none;
}
.tb-btn--ghost {
	background: transparent;
	color: var(--realm-cream, #ECE4D5);
	border: 1px solid var(--tb-border-strong, rgba(209, 178, 140, 0.35));
}
.tb-btn--ghost:hover,
.tb-btn--ghost:focus-visible {
	color: var(--realm-metallic, #D1B28C);
	border-color: var(--realm-metallic, #D1B28C);
	outline: none;
}

.tb-sticky-cta-dismiss {
	width: 32px; height: 32px;
	background: transparent;
	border: 1px solid var(--tb-border-taupe, rgba(196, 188, 177, 0.14));
	color: var(--realm-taupe, #B8B3A8);
	cursor: pointer; border-radius: 2px;
	font-size: 18px; line-height: 1;
	transition: color .2s ease, border-color .2s ease, transform .2s ease;
	flex: 0 0 auto;
}
.tb-sticky-cta-dismiss:hover,
.tb-sticky-cta-dismiss:focus-visible {
	color: var(--realm-cream, #ECE4D5);
	border-color: var(--tb-border-gold, rgba(209, 178, 140, 0.18));
	transform: rotate(90deg);
	outline: none;
}

/* Mobile — collapse eyebrow + ghost CTA, primary spans width */
@media (max-width: 720px) {
	.tb-sticky-cta { padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
	.tb-sticky-cta-inner { gap: 12px; flex-wrap: wrap; }
	.tb-sticky-cta-eyebrow { display: none; }
	.tb-sticky-cta-actions { flex: 1 1 auto; }
	.tb-btn {
		padding: 13px 18px;
		font-size: 12px;
		flex: 1 1 auto;
		justify-content: center;
	}
	.tb-btn--ghost { display: none; }
}

/* While any drawer is open, hide the sticky CTA without animation. */
body[data-drawer-open="true"] .tb-sticky-cta {
	opacity: 0;
	pointer-events: none;
	transform: translateY(110%);
	transition: none;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.tb-sticky-cta {
		transition: opacity .25s ease;
		transform: none;
	}
	.tb-sticky-cta:not(.is-visible) {
		opacity: 0;
		pointer-events: none;
	}
}

/* ========================================================================
   v2.7.59 — Lift the floating Contact pill above the sticky CTA bar
   ------------------------------------------------------------------------
   The .tb-contact-toggle (bottom: 24px, right: 24px) was sitting directly
   on top of the right side of the sticky CTA bar, covering part of the
   primary "Claim" button. While the sticky CTA is visible we lift the
   contact toggle (and its open panel) above the bar so they don't overlap.
   Uses :has() — supported in all evergreen browsers from late 2023.
   ======================================================================== */

@supports selector(:has(*)) {
	body:has(.tb-sticky-cta.is-visible) .tb-contact-toggle {
		bottom: 96px;
		transition: bottom .32s ease-out;
	}
	body:has(.tb-sticky-cta.is-visible) .tb-contact-panel {
		bottom: 152px;
	}

	@media (max-width: 720px) {
		body:has(.tb-sticky-cta.is-visible) .tb-contact-toggle {
			bottom: 80px;
		}
		body:has(.tb-sticky-cta.is-visible) .tb-contact-panel {
			bottom: 136px;
		}
	}
}

/* v2-7-59-sentinel: contact-pill-lift */

/* ========================================================================
   v2.7.60 — Hide global sticky CTA on mobile for collection pages
   ------------------------------------------------------------------------
   Collection pages (EF + DR) have their own template-level mobile sticky
   CTA (.tbc-sticky-cta) which is context-aware (shows suite pricing).
   The global bar now renders on these pages for desktop but must hide
   on mobile to prevent a double sticky bar.
   ======================================================================== */
@media (max-width: 900px) {
  .page-template-template-collection-redesign .tb-sticky-cta,
  .page-template-template-collection-dark-romance .tb-sticky-cta,
  .page-template-template-collection-midnight-celestial .tb-sticky-cta {
    display: none !important;
    pointer-events: none;
  }
}

/* v2-7-60-sentinel: collection-desktop-sticky */
/* v2.10.4 (2026-09-03): Midnight Celestial collection template added to the
   rule above -- it prints its own .tbc-sticky-cta like EF and DR, and was
   showing both bars on mobile. */


/* ========================================================================
   v2.7.61 (2026-09-20) - Astra's scroll-to-top, on brand and out of the way
   ------------------------------------------------------------------------
   SITE-WIDE, not one template. Astra prints #ast-scroll-top from its own
   template-parts/scroll-to-top.php; scroll-to-top-enable is unset on both
   hosts, so Astra's default applies and its background falls back to the
   customizer link colour, which is also unset, so the control painted as
   Astra's default blue. On a dark green site it read as an unstyled blue
   square, and no #ast-scroll-top rule existed anywhere in the child theme
   on either host, so nothing was overriding it.

   Three things are fixed here:
     colour   dark ground, brand gold icon and border, no blue anywhere
     size     44x44, a real tap target. Astra's 2.1em at 15px was 31.5px
     position lifted clear of the floating Contact pill, and lifted again
              whenever the site-wide sticky CTA bar is up, so it can never
              sit on the bar or on the pill
   The gold and the grounds are realm tokens, so a realm page gets its own
   metallic rather than Enchanted Forest's.
   ======================================================================== */
#ast-scroll-top {
	width: 44px;
	height: 44px;
	line-height: 44px;
	font-size: 15px;
	background-color: var(--realm-secondary, #10180F);
	color: var(--realm-metallic, #D1B28C);
	border: 1px solid var(--realm-metallic, #D1B28C);
	border-radius: 2px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, bottom .32s ease-out;
}
#ast-scroll-top:hover,
#ast-scroll-top:focus-visible {
	background-color: var(--realm-metallic, #D1B28C);
	color: var(--realm-bg, #0C100E);
	border-color: var(--realm-metallic-bright, #E1C29A);
	outline: none;
}
#ast-scroll-top .ast-icon.icon-arrow svg {
	fill: currentColor;
	width: 1.25em;
}

/* The Contact pill is fixed at right 24px / bottom 24px and stands about
   40px tall, so the control stacks ABOVE it rather than beside it. Moving it
   up rather than sideways also keeps it off the full-width primary buttons
   that landing pages use at phone width. */
.ast-scroll-to-top-right { right: 24px; bottom: 80px; }
.ast-scroll-to-top-left  { left: 24px;  bottom: 80px; }

@media (max-width: 720px) {
	.ast-scroll-to-top-right { right: 14px; bottom: 72px; }
	.ast-scroll-to-top-left  { left: 14px;  bottom: 72px; }
}

/* When the site-wide bar is up the Contact pill is already lifted by v2.7.59,
   to bottom 96px on desktop and 80px on mobile. The control goes above the
   lifted pill, same mechanism, same transition. */
@supports selector(:has(*)) {
	body:has(.tb-sticky-cta.is-visible) .ast-scroll-to-top-right,
	body:has(.tb-sticky-cta.is-visible) .ast-scroll-to-top-left {
		bottom: 148px;
	}
	@media (max-width: 720px) {
		body:has(.tb-sticky-cta.is-visible) .ast-scroll-to-top-right,
		body:has(.tb-sticky-cta.is-visible) .ast-scroll-to-top-left {
			bottom: 140px;
		}
	}
}

/* v2-7-61-sentinel: ast-scroll-top-brand */

/* ========================================================================
   v2.7.62 (2026-09-20) - two more Astra defaults, measured not assumed
   ------------------------------------------------------------------------
   Both were found by reading computed styles in a real browser render of a
   child-theme page, not by reading CSS, and both are SITE-WIDE.

   1. TEXT SELECTION was Astra blue. astra/assets/css/minified/main.min.css
      sets `::selection { color:#fff; background:rgb(2,116,190) }` and Astra's
      inline dynamic CSS sets `::selection { background: var(--ast-global-
      color-0) }`. The child theme only overrode selection under
      `[data-realm="..."]`, and that attribute is not present on the main
      site's pages, so every page highlighted in Astra blue. Measured on the
      Seating Chart landing page: the two Astra rules matched, both child
      rules did not.
      A descendant selector is used so the rule outranks Astra's bare
      `::selection` whatever the load order, while still sitting below the
      existing `[data-realm]` rules, which are more specific and stay in
      charge on the wedding-website pages.
      ::-moz-selection has to be its own rule: an unknown pseudo-element in a
      selector list drops the whole list.

   2. THE FOCUS RING was Astra's `outline: thin dotted`. On the gold primary
      button it computed to `rgb(16, 24, 15) dotted 1px`, a near-black hairline
      on a gold ground, which is neither visible nor on brand. Replaced with a
      2px solid ring in the realm metallic, offset so it reads against both the
      filled and the outline buttons, and only for keyboard focus.
   ======================================================================== */

html ::selection {
	background: var(--realm-metallic, #D1B28C);
	color: var(--realm-bg, #0C100E);
	text-shadow: none;
}
html ::-moz-selection {
	background: var(--realm-metallic, #D1B28C);
	color: var(--realm-bg, #0C100E);
	text-shadow: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
#ast-scroll-top:focus-visible {
	outline: 2px solid var(--realm-metallic, #D1B28C);
	outline-offset: 2px;
}
/* Astra's thin dotted ring only ever showed up on pointer focus. Cleared for
   that case; keyboard focus keeps the ring above. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
	outline: none;
}

/* v2-7-62-sentinel: selection-and-focus-ring */