/*
 * UNESTI Core styles.
 * --unesti-cta is reserved for affiliate CTAs only. Ads must never use it.
 */
:root {
	--unesti-cta: #ff6a00;
	--unesti-cta-hover: #e05d00;
	--unesti-cta-text: #ffffff;
	--unesti-border: #e3e6eb;
	--unesti-muted: #5b6573;
	--unesti-soft: #f6f7f9;
	--unesti-good: #1f9d55;
	--unesti-warn: #c0392b;
	--unesti-radius: 12px;
}

/* CTA buttons */
.unesti-btn .wp-block-button__link,
.unesti-compare td a {
	background: var(--unesti-cta);
	color: var(--unesti-cta-text);
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
}

.unesti-btn .wp-block-button__link {
	min-height: 48px; /* comfortable tap target */
	padding: 0.85em 1.6em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.unesti-btn .wp-block-button__link:hover,
.unesti-btn .wp-block-button__link:focus,
.unesti-compare td a:hover,
.unesti-compare td a:focus {
	background: var(--unesti-cta-hover);
	color: var(--unesti-cta-text);
}

.unesti-microcopy {
	font-size: 0.8125rem;
	color: var(--unesti-muted);
	margin-top: 0.5rem;
}

/* "Free Templates" menu item (menu item CSS class: unesti-menu-cta) */
.unesti-menu-cta > a {
	background: var(--unesti-cta);
	color: var(--unesti-cta-text) !important;
	border-radius: 8px;
	padding-left: 1em !important;
	padding-right: 1em !important;
}

/* Disclosure and YMYL notices */
.unesti-disclosure,
.unesti-ymyl {
	font-size: 0.875rem;
	line-height: 1.5;
	padding: 0.75rem 1rem;
	margin: 0 0 1.5rem;
	border-radius: 6px;
	background: var(--unesti-soft);
	border-left: 4px solid #9aa4b2;
}

.unesti-ymyl {
	background: #fff8e6;
	border-left-color: #e0a800;
}

/* Badges */
.unesti-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	background: #e8f0fe;
	color: #1a3d8f;
	margin: 0 0 0.75rem;
}

.unesti-badge-hands-on {
	background: #e6f6ec;
	color: #136c3a;
}

/* Product box, verdict, top picks */
.unesti-product-box,
.unesti-verdict,
.unesti-top-picks {
	border: 2px solid var(--unesti-border);
	border-radius: var(--unesti-radius);
	padding: 1.25rem;
	margin: 2rem 0;
}

.unesti-verdict {
	border-color: var(--unesti-cta);
}

.unesti-product-box h3,
.unesti-verdict h2,
.unesti-top-picks h2 {
	margin-top: 0;
}

/* Comparison table: scrolls sideways on phones instead of squashing */
.unesti-compare .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5rem 0;
}

.unesti-compare table {
	min-width: 640px;
	border-collapse: collapse;
	width: 100%;
}

.unesti-compare th,
.unesti-compare td {
	border: 1px solid var(--unesti-border);
	padding: 0.75rem;
	vertical-align: top;
	text-align: left;
}

.unesti-compare thead th {
	background: var(--unesti-soft);
}

.unesti-compare td a {
	display: inline-block;
	padding: 0.5em 0.9em;
	white-space: nowrap;
}

/* Pros / cons and who-it's-for */
.unesti-pros,
.unesti-cons {
	border-radius: var(--unesti-radius);
	padding: 1rem 1.25rem;
	height: 100%;
}

.unesti-pros {
	background: #effaf3;
	border-top: 4px solid var(--unesti-good);
}

.unesti-cons {
	background: #fdf1f0;
	border-top: 4px solid var(--unesti-warn);
}

.unesti-pros h3,
.unesti-cons h3 {
	margin-top: 0;
	font-size: 1.1rem;
}

/* Opt-in band */
.unesti-optin {
	background: var(--unesti-soft);
	border-radius: var(--unesti-radius);
	padding: 2rem 1.25rem;
	margin: 2.5rem 0;
	text-align: center;
}

/* Homepage hero, cards and trust strip */
.unesti-hero {
	background: linear-gradient(135deg, #fff4ec 0%, #eef3ff 100%);
	border-radius: 20px;
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
	margin: 1rem 0 3rem;
}

.unesti-hero h1 {
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}

.unesti-hero > p {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	color: #3c4450;
}

.unesti-hero .wp-block-buttons {
	margin-top: 1.75rem;
	gap: 0.75rem;
}

.unesti-hero .wp-block-button__link {
	padding: 0.85em 1.6em;
	border-radius: 999px;
	font-weight: 700;
}

.home .entry-content > h2 {
	margin-top: 3.5rem;
	margin-bottom: 1.25rem;
	letter-spacing: -0.01em;
}

.home .entry-content > .wp-block-columns {
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

.unesti-card {
	background: #fff;
	border: 1px solid var(--unesti-border);
	border-top: 4px solid var(--unesti-cta);
	border-radius: var(--unesti-radius);
	padding: 1.5rem;
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.unesti-card:hover {
	box-shadow: 0 10px 30px rgba(20, 30, 50, 0.08);
	transform: translateY(-2px);
}

.unesti-card h3 {
	margin-top: 0;
	font-size: 1.25rem;
}

.unesti-card h3 a {
	color: inherit;
	text-decoration: none;
}

.unesti-card p:last-child {
	margin-bottom: 0;
}

.unesti-card p:last-child a {
	font-weight: 700;
	text-decoration: none;
}

.unesti-trust {
	background: var(--unesti-soft);
	border-radius: var(--unesti-radius);
	padding: 1.5rem 1rem;
	margin: 3rem 0;
}

.unesti-trust .wp-block-columns {
	margin-bottom: 0;
	align-items: center;
}

.unesti-trust p {
	text-align: center;
	font-weight: 600;
	margin: 0;
}

/*
 * Ad slots. In Advanced Ads add the wrapper class "unesti-ad" to every placement.
 * min-height reserves the space so the page does not jump when the ad loads (CLS).
 * Deliberately neutral: no CTA colour, no borders, clearly labelled.
 */
.unesti-ad {
	min-height: 280px;
	margin: 2rem auto;
	text-align: center;
	clear: both;
}

.unesti-ad::before {
	content: "Advertisement";
	display: block;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a929c;
	margin-bottom: 4px;
}

@media (max-width: 767px) {
	.unesti-ad {
		min-height: 250px;
	}
}