/*
ProfitPulse brand design layer.

Styles native WordPress blocks to match the ProfitPulse look so pages can be
built and edited visually, with no per page HTML. Colours come from the
palette defined in theme.json, so everything stays aligned to the logo.
*/

/* Eyebrow label: small, uppercase, letter spaced, teal */
.is-style-pp-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin-bottom: 1rem;
}

/* Gold gradient price or accent heading */
.is-style-pp-price {
	background: linear-gradient(135deg, var(--wp--preset--color--gold-bright) 0%, var(--wp--preset--color--gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--wp--preset--color--gold); /* fallback if clip unsupported */
}

/* Gold stat: large gold figure for outcomes and metrics */
.is-style-pp-stat {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	line-height: 1.1;
	color: var(--wp--preset--color--gold);
}

/* Brand card: dark surface, gold hairline, gradient top accent, hover lift */
.is-style-pp-card {
	position: relative;
	background: #0B0B0B;
	border: 1px solid rgba(248, 176, 0, 0.16);
	border-radius: 14px;
	padding: 2.25rem;
	overflow: hidden;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.is-style-pp-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--wp--preset--color--gold), transparent);
	opacity: 0.5;
	transition: opacity 0.35s ease;
}
.is-style-pp-card:hover {
	transform: translateY(-4px);
	border-color: rgba(248, 176, 0, 0.32);
	box-shadow: 0 24px 60px -20px rgba(248, 176, 0, 0.18);
}
.is-style-pp-card:hover::before {
	opacity: 1;
}

/* Teal card variant, for the relationship and CFO style surfaces */
.is-style-pp-card-teal {
	position: relative;
	background: linear-gradient(135deg, rgba(0, 168, 152, 0.06) 0%, #0B0B0B 60%);
	border: 1px solid rgba(0, 168, 152, 0.3);
	border-radius: 18px;
	padding: 2.4rem;
	overflow: hidden;
	transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.is-style-pp-card-teal:hover {
	border-color: rgba(0, 168, 152, 0.5);
	box-shadow: 0 24px 60px -20px rgba(0, 168, 152, 0.25);
}

/* Note or fair use callout: left gold border, subtle ground */
.is-style-pp-note {
	background: rgba(248, 240, 232, 0.025);
	border-left: 2px solid var(--wp--preset--color--gold);
	border-radius: 0 8px 8px 0;
	padding: 1.6rem 1.85rem;
}

/* Ambient gold glow behind a section group */
.is-style-pp-section-glow {
	position: relative;
	overflow: hidden;
}
.is-style-pp-section-glow::before {
	content: "";
	position: absolute;
	top: -20%;
	left: 50%;
	width: 900px;
	height: 600px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(248, 176, 0, 0.10) 0%, rgba(248, 176, 0, 0.04) 35%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}
.is-style-pp-section-glow > * {
	position: relative;
	z-index: 1;
}

/* Teal button variant, alongside the gold default set in theme.json */
.wp-block-button.is-style-pp-teal .wp-block-button__link {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-pp-teal .wp-block-button__link:hover {
	filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.is-style-pp-card,
	.is-style-pp-card-teal {
		transition: none;
	}
	.is-style-pp-card:hover {
		transform: none;
	}
}

/* ============================================================
   LIGHT ZONE  (Insights, Blog, Tools): "light teaches"
   Applied by wrapping page content in a group with class pp-light.
   White ground, ink text, same gold and teal accents and fonts.
   Dark pages are unaffected.
   ============================================================ */
.pp-light { background-color: #FFFFFF; color: var(--wp--preset--color--ink); }
.pp-light :where(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--ink); }
.pp-light :where(p, li) { color: var(--wp--preset--color--ink); }

/* Links read as teal with an underline for clarity on white */
.pp-light a:not(.wp-element-button) {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pp-light a:not(.wp-element-button):hover { color: var(--wp--preset--color--ink); }

/* Eyebrow and stat stay in brand colour, both legible on white */
.pp-light .is-style-pp-eyebrow { color: var(--wp--preset--color--teal); }
.pp-light .is-style-pp-stat { color: var(--wp--preset--color--teal); }

/* Card inverts to a light surface, keeps the gold hairline accent */
.pp-light .is-style-pp-card { background: #FAF9F6; border-color: rgba(0, 0, 0, 0.08); }
.pp-light .is-style-pp-card:hover {
	border-color: rgba(0, 0, 0, 0.16);
	box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.18);
}
.pp-light .is-style-pp-card :where(h1, h2, h3, h4, h5, h6, p, li) { color: var(--wp--preset--color--ink); }

/* Teal card on a light ground */
.pp-light .is-style-pp-card-teal {
	background: linear-gradient(135deg, rgba(0, 168, 152, 0.07) 0%, #FFFFFF 60%);
	border-color: rgba(0, 168, 152, 0.35);
}
.pp-light .is-style-pp-card-teal :where(h1, h2, h3, h4, p, li) { color: var(--wp--preset--color--ink); }

/* Note callout on a light ground */
.pp-light .is-style-pp-note { background: #F7F3EC; border-left-color: var(--wp--preset--color--gold); }
.pp-light .is-style-pp-note :where(p, h1, h2, h3, h4) { color: var(--wp--preset--color--ink); }

/* Soften the ambient glow so it does not muddy white */
.pp-light .is-style-pp-section-glow::before {
	background: radial-gradient(ellipse at center, rgba(248, 176, 0, 0.06) 0%, transparent 70%);
}