/*
 * aov-growth.css — Growth Blueprint 2027 styles (Phases 7, 8, 9).
 * DRAFT FOR REVIEW. Uses the theme's --aov-* tokens from aov.css,
 * so light and dark mode follow the theme switch automatically.
 */

/* 1. Dark-mode fix for the "In short" box.
      Today it keeps its light background with light text (1.27:1 contrast). */
[data-theme="dark"] .aov-prose .wp-block-group.has-background,
[data-theme="dark"] .aov-prose .aov-answer {
	background: var(--aov-surface) !important;
	color: var(--aov-ink) !important;
	border-left: 4px solid var(--aov-gold);
}
[data-theme="dark"] .aov-prose .wp-block-group.has-background a,
[data-theme="dark"] .aov-prose .aov-answer a {
	color: var(--aov-link);
}

/* 2. Byline in the meta strip */
.aov-byline {
	font-weight: 600;
	color: var(--aov-ink-strong);
}
.aov-byline a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.aov-meta .aov-byline + * {
	margin-left: .5em;
}

/* 3. "Was this helpful?" */
.aov-helpful {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: 2rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--aov-border);
	border-radius: var(--aov-r-md, 10px);
	background: var(--aov-sunk);
	color: var(--aov-ink);
}
.aov-helpful p {
	margin: 0;
	font-weight: 600;
}
.aov-helpful__btn {
	min-width: 64px;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--aov-border);
	border-radius: var(--aov-r-md, 10px);
	background: var(--aov-surface);
	color: var(--aov-ink-strong);
	font: inherit;
	cursor: pointer;
}
.aov-helpful__btn:hover:not(:disabled),
.aov-helpful__btn:focus-visible {
	border-color: var(--aov-link);
}
.aov-helpful__btn:disabled {
	opacity: .55;
	cursor: default;
}
.aov-helpful__thanks {
	color: var(--aov-muted);
}

/* 4. Practice task block */
.aov-practice {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--aov-border);
	border-left: 4px solid var(--aov-gold);
	border-radius: var(--aov-r-md, 10px);
	background: var(--aov-sunk);
}
.aov-practice .aov-eyebrow {
	margin: 0 0 .5rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aov-muted);
}
.aov-practice details summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.aov-practice__done {
	min-height: 44px;
	padding: 0 1.1rem;
	border: 1px solid var(--aov-link);
	border-radius: var(--aov-r-md, 10px);
	background: transparent;
	color: var(--aov-link);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.aov-practice__done[aria-pressed="true"] {
	border-color: var(--aov-border);
	color: var(--aov-muted);
	cursor: default;
}

/* 5. Table of contents on phones: collapsible, below "In short" */
@media (max-width: 767px) {
	nav.aov-toc[data-aov-mobile] {
		position: static;
		margin: 1.25rem 0;
		padding: 0;
		border: 1px solid var(--aov-border);
		border-radius: var(--aov-r-md, 10px);
		background: var(--aov-sunk);
	}
	.aov-toc__toggle {
		display: flex;
		width: 100%;
		min-height: 44px;
		align-items: center;
		justify-content: space-between;
		padding: 0 1rem;
		border: 0;
		background: transparent;
		color: var(--aov-ink-strong);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}
	.aov-toc__toggle::after {
		content: "+";
		font-size: 1.25rem;
	}
	.aov-toc__toggle[aria-expanded="true"]::after {
		content: "\2212";
	}
	nav.aov-toc[data-aov-mobile] > :not(.aov-toc__toggle) {
		padding: 0 1rem .75rem;
	}
	nav.aov-toc.aov-toc--collapsed > :not(.aov-toc__toggle) {
		display: none;
	}
	/* The toggle button already says "On this page". */
	nav.aov-toc[data-aov-mobile] > .aov-eyebrow {
		display: none;
	}
	nav.aov-toc[data-aov-mobile] a {
		display: inline-block;
		min-height: 32px;
		padding: 6px 0;
	}

	/* 44px tap targets for article navigation on phones */
	.aov-prevnext .aov-pn,
	.aov-related a {
		min-height: 44px;
	}
}

/* 5b. MailerLite form inside the theme's newsletter box.
       The box already has the heading and text, so hide the form's own copy
       (the success message stays visible) and let the form use the box colours. */
.aov-nl .ml-embedded {
	min-height: 120px;
}
.aov-nl .ml-form-embedContainer .ml-form-embedWrapper {
	background: transparent !important;
	max-width: 100% !important;
	border: 0 !important;
}
.aov-nl .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody {
	padding: 0 !important;
}
.aov-nl .ml-form-embedContainer .ml-form-embedBody.row-form .ml-form-embedContent {
	display: none !important;
}
.aov-nl .ml-form-embedContainer .ml-form-successContent h4,
.aov-nl .ml-form-embedContainer .ml-form-successContent p {
	color: inherit !important;
}
.aov-nl .ml-form-embedContainer input.form-control {
	min-height: 44px;
}
.aov-nl .ml-form-embedContainer button.primary {
	min-height: 44px !important;
}
/* MailerLite styles use an ID selector, so these need #wrapper to win. */
#wrapper .aov-nl .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary {
	background: var(--aov-gold) !important;
	border-color: var(--aov-gold) !important;
	color: #101c30 !important;
	border-radius: var(--aov-r-md, 10px) !important;
	font-family: inherit !important;
	font-weight: 700 !important;
}
#wrapper .aov-nl .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover {
	filter: brightness(1.06);
}
#wrapper .aov-nl .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
	border-radius: var(--aov-r-md, 10px) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
}
#wrapper .aov-nl .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4,
#wrapper .aov-nl .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
	color: var(--aov-ink-strong) !important;
	font-family: inherit !important;
}

/* 5c. Newsletter slide-in: bottom-right card on desktop, bottom bar on phones. */
.aov-slidein {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	width: min(360px, calc(100vw - 32px));
	padding: 1.1rem 1.25rem 1rem;
	background: var(--aov-surface);
	color: var(--aov-ink);
	border: 1px solid var(--aov-border);
	border-left: 4px solid var(--aov-gold);
	border-radius: var(--aov-r-md, 10px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
	transform: translateY(calc(100% + 40px));
	transition: transform .35s ease;
}
.aov-slidein.is-open {
	transform: none;
}
.aov-slidein[hidden] {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.aov-slidein {
		transition: none;
	}
}
.aov-slidein__close {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--aov-muted);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
.aov-slidein__close:hover,
.aov-slidein__close:focus-visible {
	color: var(--aov-ink-strong);
}
.aov-slidein__h {
	margin: 0 2.25rem .35rem 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--aov-ink-strong);
}
.aov-slidein__t {
	margin: 0 0 .75rem;
	font-size: .92rem;
	line-height: 1.45;
	color: var(--aov-muted);
}
#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper {
	background: transparent !important;
	max-width: 100% !important;
	border: 0 !important;
}
#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
	padding: 0 !important;
}
#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.row-form .ml-form-embedContent {
	display: none !important;
}
#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary {
	min-height: 44px !important;
	background: var(--aov-gold) !important;
	border-color: var(--aov-gold) !important;
	color: #101c30 !important;
	border-radius: var(--aov-r-md, 10px) !important;
	font-family: inherit !important;
	font-weight: 700 !important;
}
#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
	min-height: 44px;
	border-radius: var(--aov-r-md, 10px) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
}
#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4,
#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
	color: var(--aov-ink-strong) !important;
	font-family: inherit !important;
}
@media (max-width: 767px) {
	.aov-slidein {
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		padding: .85rem 16px calc(.75rem + env(safe-area-inset-bottom));
		border: 0;
		border-top: 4px solid var(--aov-gold);
		border-radius: 14px 14px 0 0;
	}
	.aov-slidein__h {
		font-size: 1rem;
	}
	.aov-slidein__t {
		margin-bottom: .6rem;
		font-size: .85rem;
	}
	/* Email and button on one row to keep the bar short. */
	#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
		display: flex;
		gap: 8px;
		align-items: stretch;
	}
	#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent {
		flex: 1 1 auto;
		margin: 0 !important;
	}
	#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
		margin: 0 !important;
	}
	#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
		flex: 0 0 auto;
		margin: 0 !important;
		width: auto !important;
	}
	#aov-slidein .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary {
		width: auto !important;
		padding: 0 14px !important;
		white-space: nowrap;
	}
}

/* 6. Ads: hide any ad slot Google marks as unfilled, so readers never see
      an empty white box (6 Nov 2026). The old fixed-height reservation was
      removed because it left blank gaps when no ad filled. */
ins.adsbygoogle[data-ad-status="unfilled"] {
	display: none !important;
}