/*
 * The page hero: a rounded colour panel that fills the top of the page, with
 * the floating header pill (child theme) inside its top edge.
 *
 * Shared by the home page, every landing page, the six tools and the Grainy
 * page — anything whose <body> has .tg-hero (page-hero.php). Each page tints
 * the mesh with its own colours through --m1…--m5 and the headline gradient
 * through --hg; the defaults are the logo palette the home page uses.
 *
 * The mesh: five large radial colour fields drift behind the text, with a
 * grain tile over them (same recipe as assets/js/grain.js, at 30%). Only
 * transform is animated, so it runs on the compositor; no filter: blur(),
 * which is expensive to animate — radial gradients are soft-edged already.
 * A white ellipse sits between the colour and the text so headline, search
 * and pills keep their contrast whatever the fields are doing.
 *
 * Layout: the hero stretches to 12px from the window edges, and the site
 * header floats over its top (position: absolute on hero pages), so the
 * header pill sits inside the hero. Taking the header out of the flow — rather
 * than pulling the hero up under it by the header's height — keeps the hero
 * exactly 12px from the top on every page type, whatever height Kadence gives
 * the header there. --tg-hdr is only the room left inside the hero for it.
 * html/body get overflow-x: clip because 100vw includes the scrollbar on
 * desktop Windows; clip (not hidden) so the sticky header keeps working.
 */

html, body.tg-hero { overflow-x: clip; }
.tg-hero { --tg-hdr: 96px; }
.tg-hero #wrapper { position: relative; }
.tg-hero #masthead { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
.tg-hero #masthead .site-main-header-inner-wrap { margin-top: 24px; background: rgba(255, 255, 255, .72); }

/* Kadence pads the top of ordinary pages (48px + 32px) and the tools pad
 * their wrapper (40px); the hero replaces all of it. */
.tg-hero #primary.content-area { margin-top: 0; }
.tg-hero .entry-content-wrap { padding-top: 0; }
.tg-hero .tg-tool { padding-top: 0 !important; }

.ga-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	text-align: center;
}
.tg-hero .ga-hero {
	/* 100vw includes a classic scrollbar, which ate half its width from each
	   side gap; --tg-sbw (set by tgc_hero_scrollbar_script) gives it back. */
	margin: 12px calc(50% - 50vw + var(--tg-sbw, 0px) / 2 + 12px) 0;
	padding: calc(var(--tg-hdr) + 40px) 24px 44px !important;
	border-radius: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tg-hero .ga-hero > *:not(.ga-mesh) { position: relative; z-index: 1; }
.tg-hero .ga-hero h1 { margin-left: auto !important; margin-right: auto !important; text-wrap: balance; }

.ga-mesh {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #fff;
	pointer-events: none;
}
.ga-mesh span {
	position: absolute;
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	opacity: .55;
	will-change: transform;
	animation: ga-drift 22s ease-in-out infinite alternate;
}
.ga-mesh span:nth-child(1) { background: radial-gradient(circle, var(--m1, #FF9A3D) 0%, transparent 65%); top: -30%; left: -14%; }
.ga-mesh span:nth-child(2) { background: radial-gradient(circle, var(--m2, #FF4D8D) 0%, transparent 65%); top: -36%; right: -16%; animation-duration: 26s; animation-delay: -6s; }
.ga-mesh span:nth-child(3) { background: radial-gradient(circle, var(--m3, #7B5CFF) 0%, transparent 65%); bottom: -44%; left: 18%; animation-duration: 30s; animation-delay: -12s; }
.ga-mesh span:nth-child(4) { background: radial-gradient(circle, var(--m4, #3DB4FF) 0%, transparent 65%); bottom: -40%; right: -10%; animation-duration: 24s; animation-delay: -3s; }
.ga-mesh span:nth-child(5) { background: radial-gradient(circle, var(--m5, #FFD54A) 0%, transparent 65%); top: 20%; left: -28%; width: 48%; animation-duration: 28s; animation-delay: -9s; }

.ga-mesh::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 56% 50% at 50% 44%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.5) 55%, rgba(255,255,255,0) 100%);
}
.ga-mesh::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='-0.75'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.30'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
	opacity: .9;
}
@keyframes ga-drift {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(8%, 6%) scale(1.12); }
	100% { transform: translate(-6%, 10%) scale(.94); }
}

/* Every hero rule is prefixed with .tg-hero: core.css still styles .ga-hero
 * for any non-hero page using [gradients_app], and it loads after this file
 * (from the shortcode, in the footer), so equal-specificity rules there won.
 */

/* The gradient part of a headline. --hg is deeper than the mesh colours so
 * its lightest stop still clears 3:1 on white, the floor for text this large. */
.tg-hero .ga-hero h1 span {
	background: var(--hg, linear-gradient(100deg, #E8551F, #E0336F 35%, #6A4CF0 70%, #1C86DB)) 0 0 / 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: ga-shine 12s ease-in-out infinite alternate;
}
@keyframes ga-shine { to { background-position: 100% 0; } }

/* Search and pills sit on colour: give them solid surfaces. */
.tg-hero .ga-hero .ga-search input { background: #fff !important; box-shadow: 0 6px 24px rgba(17, 17, 17, .08) !important; }
.tg-hero .ga-hero .ga-pill:not(.on) { background: rgba(255,255,255,.75) !important; backdrop-filter: blur(6px); }

/* ─── Inner-page hero parts (tgc_page_hero) ───────────────── */
.tg-crumbs {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	margin: 0 0 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .75);
	border: 1px solid rgba(17, 17, 17, .08);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 13px;
	font-weight: 500;
	color: #6E6E78;
}
.tg-crumbs a { color: #444 !important; text-decoration: none !important; }
.tg-crumbs a:hover { color: #111 !important; }
.tg-crumbs span { color: #B4B4BC; }
.tg-hero .tg-phero h1 {
	font-size: clamp(32px, 4.6vw, 56px) !important;
	font-weight: 800 !important;
	line-height: 1.06 !important;
	letter-spacing: -0.035em !important;
	color: #0A0A0A !important;
	max-width: 18ch;
	margin-top: 0 !important;
	margin-bottom: 14px !important;
}
.tg-hero .tg-phero .tg-phero-lede {
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: #55555F !important;
	max-width: 56ch;
	margin: 0 auto 20px !important;
}
.tg-stat { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 6px; }
.tg-stat span {
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .7);
	border: 1px solid rgba(17, 17, 17, .06);
	font-size: 13px;
	font-weight: 600;
	color: #333;
}
.tg-hero .tg-tool-hero { margin-bottom: 28px; }  /* room before the tool */
.tg-phero .ga-pills { justify-content: center; margin: 14px 0 0; }
.tg-phero .ga-pills + .ga-pills { margin-top: 8px; }

/* ─── Animated Gradient Generator: a hero that flows ────────
 * Under the usual drifting fields, the panel itself is a four-colour gradient
 * sliding back and forth (the classic background-position keyframe the tool
 * exports), washed with white so the text stays readable; the fields drift
 * faster here too. Static under prefers-reduced-motion like every hero.
 */
.tg-hero-flow .ga-mesh {
	background-image:
		linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)),
		linear-gradient(120deg, var(--m1), var(--m2), var(--m3), var(--m4), var(--m1));
	background-size: auto, 400% 400%;
	animation: tg-flow 8s ease-in-out infinite alternate;
}
/* A smaller glow: just enough behind the text, so the colour moving around
   it is what you see. */
.tg-hero-flow .ga-mesh::before {
	background: radial-gradient(ellipse 40% 38% at 50% 48%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.4) 60%, rgba(255,255,255,0) 100%);
}
.tg-hero-flow .ga-mesh span { opacity: .7; animation-name: ga-drift-big; animation-duration: 7s; }
.tg-hero-flow .ga-mesh span:nth-child(2) { animation-duration: 9s; }
.tg-hero-flow .ga-mesh span:nth-child(3) { animation-duration: 8s; }
.tg-hero-flow .ga-mesh span:nth-child(4) { animation-duration: 10s; }
@keyframes tg-flow {
	0%   { background-position: 0 0, 0% 50%; }
	100% { background-position: 0 0, 100% 50%; }
}
@keyframes ga-drift-big {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(22%, 14%) scale(1.25); }
	100% { transform: translate(-16%, 20%) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
	.tg-hero-flow .ga-mesh { animation: none; }
}

/* ─── Site pages (About, FAQ, Terms, Privacy, Contact, Submit) ─
 * Kadence prints these titles in its own banner; the hero replaces it. */
.tg-info .entry-hero { display: none; }
.tg-hero .tg-info-hero { margin-bottom: 8px; }
.tg-info-guide { margin-top: 28px; }
/* FAQ: each answer block reads as one card under its question. */
.tg-info .tg-guide h2 + p { margin-bottom: 18px; }

/* ─── Guide panel ────────────────────────────────────────────
 * The write-up under each tool (wrapped by tgc_wrap_tool_guide) and the
 * explainer on each landing page: a soft rounded panel with a reading
 * measure, gradient-marked headings, code chips and gradient bullets.
 */
.tg-guide {
	margin: 56px 0 0;
	padding: clamp(24px, 4vw, 48px);
	border-radius: 28px;
	background: linear-gradient(135deg, #FAFAFC, #F4F2FB);
	border: 1px solid #EFEDF5;
}
.tg-guide > * { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
.tg-guide hr, .tg-guide .wp-block-separator { display: none; }
.tg-guide h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: clamp(19px, 2.2vw, 23px) !important;
	font-weight: 800 !important;
	letter-spacing: -.02em !important;
	line-height: 1.25 !important;
	color: #111 !important;
	margin-top: 36px !important;
	margin-bottom: 12px !important;
}
.tg-guide > h2:first-child { margin-top: 0 !important; }
.tg-guide h2::before {
	content: '';
	flex-shrink: 0;
	width: 10px;
	height: 26px;
	border-radius: 999px;
	background: var(--hg, linear-gradient(180deg, #FF7A3D, #FF4D8D, #7B5CFF));
}
.tg-guide h3 { font-size: 17px !important; font-weight: 700 !important; color: #111 !important; margin-top: 26px !important; margin-bottom: 8px !important; }
.tg-guide p, .tg-guide li { font-size: 16px; line-height: 1.75; color: #45454F; }
.tg-guide p { margin-top: 0; margin-bottom: 14px; }
.tg-guide code {
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: .86em;
	padding: 2px 7px;
	border-radius: 7px;
	background: #fff;
	border: 1px solid #ECEAF3;
	color: #4B3CC9;
	white-space: nowrap;
}
/* Code blocks in a write-up: a white card like the list items, the code set
   straight on it. Without this the inline-code pill above wrapped the whole
   block — one nowrap line in a white pill, cut off inside Kadence's grey box. */
.tg-guide pre,
.tg-guide .wp-block-code {
	margin: 0 auto 16px !important;  /* auto: stay on the 720px text column like everything else in the panel */
	padding: 18px 20px !important;
	background: #fff !important;
	border: 1px solid #EFEDF5 !important;
	border-radius: 20px !important;
	box-shadow: none !important;
	overflow: visible !important;
	white-space: pre-wrap;
}
.tg-guide pre code {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 13px;
	line-height: 1.65;
	color: #1A1A22;
	white-space: pre-wrap;
	word-break: normal;
	overflow-wrap: anywhere;
}
.tg-guide ul { list-style: none; padding: 0 !important; display: grid; gap: 10px; margin-bottom: 14px; }
.tg-guide ul li { position: relative; padding: 12px 16px 12px 40px; background: #fff; border: 1px solid #EFEDF5; border-radius: 16px; margin: 0; }
.tg-guide ul li::before {
	content: '';
	position: absolute;
	left: 16px;
	top: 1.32em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, #FF7A3D, #7B5CFF);
}
.tg-guide a { color: #4B3CC9 !important; text-decoration: underline; text-decoration-color: rgba(75, 60, 201, .3); text-underline-offset: 3px; }
.tg-guide a:hover { text-decoration-color: currentColor; }
@media (max-width: 640px) {
	.tg-guide { border-radius: 22px; margin-top: 40px; }
	.tg-guide p, .tg-guide li { font-size: 15.5px; }
}

@media (max-width: 640px) {
	.tg-hero .ga-hero {
		margin: 8px calc(50% - 50vw + var(--tg-sbw, 0px) / 2 + 8px) 0;
		padding: calc(var(--tg-hdr) + 28px) 16px 32px !important;
		border-radius: 26px;
	}
	.tg-hero .tg-tool-hero { margin-bottom: 20px; }
	.tg-hero #masthead .site-main-header-inner-wrap { margin-top: 18px; }
	/* The narrow hero shows little of each field, so make them larger and
	   pull the white glow in, or the panel reads as plain white. */
	.ga-mesh span { width: 130% !important; opacity: .62; }
	.ga-mesh::before { background: radial-gradient(ellipse 85% 42% at 50% 36%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.45) 60%, rgba(255,255,255,0) 100%) !important; }
	.tg-hero .tg-phero .tg-phero-lede { font-size: 15.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ga-mesh span, .tg-hero .ga-hero h1 span { animation: none; }
}