/* ==========================================================================
   THRIVE Pop-Kit — motion, texture, depth & micro-interactions
   Separately enqueued (after thrive.css). Enhances existing classes
   (.thrive-card, .thrive-hero, .thrive-section-dark, buttons, links, figures)
   so it applies site-wide with no per-page markup changes.
   Respects prefers-reduced-motion.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Scroll reveal — content rises + fades in as it enters the viewport.
   JS (thrive-pop.js) adds .thrive-reveal to content blocks, then .is-visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.thrive-reveal {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.7s var(--thrive-ease), transform 0.7s var(--thrive-ease);
		will-change: opacity, transform;
	}
	.thrive-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
	/* staggered children (cards in a row reveal one after another) */
	.thrive-reveal.is-visible > * { animation: thrivePopIn 0.7s var(--thrive-ease) both; }
	.thrive-reveal.is-visible > *:nth-child(2) { animation-delay: 0.09s; }
	.thrive-reveal.is-visible > *:nth-child(3) { animation-delay: 0.18s; }
	.thrive-reveal.is-visible > *:nth-child(4) { animation-delay: 0.27s; }
	.thrive-reveal.is-visible > *:nth-child(5) { animation-delay: 0.36s; }
}
@keyframes thrivePopIn {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   2. Cards — deeper lift + a gold top-accent that draws on hover.
   -------------------------------------------------------------------------- */
.thrive-card {
	position: relative;
	overflow: hidden;
}
.thrive-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	height: 3px; width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: linear-gradient(90deg, var(--pop-gold), var(--pop-evergreen));
	transition: transform 0.45s var(--thrive-ease);
	z-index: 2;
}
.thrive-card:hover::before,
.thrive-card:focus-within::before { transform: scaleX(1); }
.thrive-card:hover { transform: translateY(-7px); }

/* --------------------------------------------------------------------------
   3. Buttons — soft sheen sweep on hover (adds to existing transition).
   -------------------------------------------------------------------------- */
.wp-block-button__link { position: relative; overflow: hidden; }
.wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0; left: -120%;
	width: 60%; height: 100%;
	background: linear-gradient(100deg, transparent, rgb(var(--t-white-rgb) / 0.28), transparent);
	transform: skewX(-18deg);
	transition: left 0.6s var(--thrive-ease);
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button__link:hover::after { left: 130%; }

/* --------------------------------------------------------------------------
   4. In-content links — animated underline that wipes in.
   -------------------------------------------------------------------------- */
.wp-block-post-content a:not(.wp-block-button__link):not(.btn-gold):not(.btn-primary):not(.btn-secondary):not(.help-card):not(.q-submit),
.entry-content a:not(.wp-block-button__link):not(.btn-gold):not(.btn-primary):not(.btn-secondary):not(.help-card):not(.q-submit),
main .wp-block-group p a {
	background-image: linear-gradient(var(--pop-gold), var(--pop-gold));
	background-size: 0% 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.35s var(--thrive-ease), color 0.2s var(--thrive-ease);
	text-decoration: none;
}
.wp-block-post-content a:not(.wp-block-button__link):not(.btn-gold):not(.btn-primary):not(.btn-secondary):not(.help-card):not(.q-submit):hover,
.entry-content a:not(.wp-block-button__link):not(.btn-gold):not(.btn-primary):not(.btn-secondary):not(.help-card):not(.q-submit):hover,
main .wp-block-group p a:hover { background-size: 100% 1.5px; }

/* --------------------------------------------------------------------------
   5. Section heading accent — a small gold rule under centered H2s.
   -------------------------------------------------------------------------- */
main .wp-block-heading.has-text-align-center {
	position: relative;
	padding-bottom: 0.6rem;
}
main .wp-block-heading.has-text-align-center::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 0;
	width: 54px; height: 3px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pop-gold), var(--pop-sage));
}

/* --------------------------------------------------------------------------
   6. Imagery — gentle zoom on hover for figures/cover thumbnails.
   -------------------------------------------------------------------------- */
.wp-block-image img,
.thrive-card .wp-block-cover {
	transition: transform 1.1s var(--thrive-ease);
}
.wp-block-image:hover img,
.thrive-card:hover .wp-block-cover { transform: scale(1.045); }
.wp-block-image { overflow: hidden; border-radius: var(--thrive-radius, 18px); }

/* --------------------------------------------------------------------------
   7. Premium grain — barely-there texture over dark/cover sections.
   -------------------------------------------------------------------------- */
.thrive-hero::after,
.thrive-section-dark::after,
.has-evergreen-deep-background-color::after,
.has-evergreen-background-color::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.5;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.thrive-hero, .thrive-section-dark { position: relative; }
.thrive-hero > *, .thrive-section-dark > * { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   8. Organic section divider — soft wave. Add <div class="thrive-divider"></div>
   or it is injected above the footer (see footer.html).
   -------------------------------------------------------------------------- */
.thrive-divider {
	display: block;
	width: 100%;
	height: clamp(40px, 6vw, 90px);
	line-height: 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23186041' d='M0,40 C240,100 480,0 720,30 C960,60 1200,110 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E");
}
.thrive-divider.is-flipped { transform: rotate(180deg); }
.thrive-divider.is-deep {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%230F3A2C' d='M0,40 C240,100 480,0 720,30 C960,60 1200,110 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E");
}
.thrive-divider.is-sage {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%239DB8AB' d='M0,40 C240,100 480,0 720,30 C960,60 1200,110 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   9. Soft botanical background pattern — apply .thrive-pattern-bg to a section.
   -------------------------------------------------------------------------- */
.thrive-pattern-bg {
	position: relative;
	background-color: var(--wp--preset--color--ivory, var(--t-ivory-pop));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23BF8A27' stroke-width='1' opacity='0.08'%3E%3Cpath d='M60 18c14 12 14 32 0 44-14-12-14-32 0-44z'/%3E%3Cpath d='M60 62c14 12 14 32 0 44-14-12-14-32 0-44z'/%3E%3Ccircle cx='60' cy='60' r='4'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 120px 120px;
}

/* --------------------------------------------------------------------------
   10. Pop-kit icon helper — sizes the SVG line-icons consistently.
   -------------------------------------------------------------------------- */
.thrive-icon {
	display: inline-flex;
	width: 46px; height: 46px;
	color: var(--pop-evergreen);
}
.thrive-icon svg { width: 100%; height: 100%; }
.thrive-card .thrive-icon {
	color: var(--pop-gold);
	margin-bottom: 0.6rem;
	width: 42px; height: 42px;
}

/* --------------------------------------------------------------------------
   11. Footer trust band — partner logos + certified badge on ivory.
   -------------------------------------------------------------------------- */
.thrive-trust-band { text-align: center; }
.thrive-trust-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.75rem, 5vw, 3.75rem);
	margin-top: 1.75rem;
}
.thrive-trust-logos img {
	height: clamp(52px, 7vw, 78px);
	width: auto;
	opacity: 0.9;
	filter: saturate(0.92);
	transition: opacity 0.3s var(--thrive-ease), filter 0.3s var(--thrive-ease), transform 0.3s var(--thrive-ease);
}
.thrive-trust-logos img:first-child { height: clamp(70px, 9vw, 104px); } /* certified badge a touch larger */
.thrive-trust-logos img:hover { opacity: 1; filter: none; transform: translateY(-3px); }

/* Developer credit line in the dark footer */
.thrive-dev-credit {
	text-align: center;
	margin: 1.1rem 0 0;
	font-size: 0.8rem;
	opacity: 0.78;
	color: var(--wp--preset--color--sage-light, var(--t-mist));
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}
.thrive-dev-credit a {
	color: var(--wp--preset--color--gold, var(--t-gold-amber));
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}
.thrive-dev-credit a:hover { text-decoration: underline; }
.thrive-dev-credit img { vertical-align: middle; opacity: 0.9; }

/* --------------------------------------------------------------------------
   12. Navigation dropdowns — premium panels (mega-menu base).
   Image thumbnails slot in once Grok prompt #4 assets land (menu-<hub>.png).
   -------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 0;
	border-top: 3px solid var(--pop-gold);
	border-radius: 14px;
	padding: 0.5rem;
	min-width: 250px;
	margin-top: 0.5rem;
	background: var(--wp--preset--color--ivory, var(--t-ivory-pop));
	box-shadow: 0 26px 60px -24px rgb(var(--t-pine-legacy-rgb) / 0.38);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 9px;
	padding: 0.55rem 0.95rem;
	transition: background-color 0.2s var(--thrive-ease), color 0.2s var(--thrive-ease), padding-left 0.2s var(--thrive-ease);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--sage-light, var(--t-mist));
	color: var(--pop-evergreen);
	padding-left: 1.15rem;
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-navigation__submenu-container { animation: thriveMenuIn 0.2s var(--thrive-ease) both; }
}
@keyframes thriveMenuIn {
	from { opacity: 0; transform: translateY(7px); }
	to   { opacity: 1; transform: none; }
}

/* Location & trust band — top-aligned flex, hugs content (no empty sage). */
.thrive-loctrust-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.4rem 2.5rem;
}
.thrive-loctrust-grid > div {
	flex: 1 1 200px;
	min-width: 0; /* let items shrink so text wraps instead of clipping (flex min-width:auto trap) */
	overflow-wrap: break-word;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--evergreen, var(--t-forest));
}
.thrive-loctrust-grid strong { display: block; margin-bottom: 0.3rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   13. Meet Kristine — real floating cutout on the evergreen band.
   -------------------------------------------------------------------------- */
.thrive-meet-kristine { position: relative; overflow: hidden; }
.thrive-kristine-float { position: relative; margin: 0; }
.thrive-kristine-float::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%; bottom: 4%;
	width: 80%; height: 72%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgb(var(--t-sage-pop-rgb) / 0.38), rgb(var(--t-gold-amber-rgb) / 0.12) 45%, transparent 72%);
	filter: blur(22px);
	pointer-events: none;
}
.thrive-kristine-float img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 0; /* flush to the band's bottom edge — she stands on it */
	filter: drop-shadow(0 18px 26px rgb(var(--t-black-rgb) / 0.38));
}
/* image column flush to bottom; text column keeps breathing room above the edge */
.thrive-meet-kristine .wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; }
.thrive-meet-kristine .is-vertically-aligned-center { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
@media (max-width: 781px) {
	.thrive-kristine-float img { max-width: 360px; margin: 0 auto; }
	.thrive-meet-kristine .is-vertically-aligned-center { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   14. Header — EMC-style: logo left, utility links + nav stacked right.
   Light background, no green top bar, no address.
   -------------------------------------------------------------------------- */
.thrive-header {
	background: var(--wp--preset--color--white, var(--t-white));
	border-bottom: 2px solid var(--pop-evergreen);
}
.thrive-header-inner { align-items: center; column-gap: 2rem; }
.thrive-brand-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.thrive-brand-logo img { height: 54px; width: auto; }
.thrive-header-right {
	display: flex !important;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.55rem;
	flex: 1 1 auto;
}
.thrive-header-utility { display: flex; align-items: center; gap: 0.9rem; font-size: 0.82rem; line-height: 1; }
.thrive-header-utility a {
	display: inline-flex; align-items: center; gap: 0.42rem;
	color: var(--pop-evergreen); text-decoration: none; font-weight: 600;
	transition: color 0.2s var(--thrive-ease);
}
.thrive-header-utility a:hover { color: var(--pop-gold); }
.thrive-header-utility svg { width: 15px; height: 15px; flex: 0 0 auto; }
.thrive-util-sep { width: 1px; height: 15px; background: var(--pop-sage); opacity: 0.6; }
.thrive-header-right .wp-block-navigation { justify-content: flex-end; }
@media (min-width: 1081px) {
	.thrive-header { position: sticky; top: 0; z-index: 50; box-shadow: 0 8px 26px -20px rgb(var(--t-pine-legacy-rgb) / 0.5); }
}
@media (max-width: 1080px) {
	.thrive-header-inner { flex-wrap: wrap; row-gap: 0.6rem; justify-content: center; }
	.thrive-header-right { align-items: center; flex-basis: 100%; }
	.thrive-header-utility { justify-content: center; flex-wrap: wrap; }
	.thrive-header-right .wp-block-navigation { justify-content: center; }
}