/**
 * Styles for the Compare ON1 Photo Editing Software landing page
 *
 * The page runs three background bands: the hero and the table sit on the
 * page's dark tone, the FAQs are the light band (.theme-inverted, which flips
 * its own tokens), and the closing CTA is the one step up from dark.
 *
 * @copyright   2026, ON1
 */

/* !- Hero */
#hero {
	padding: 5rem 0 2.5rem;
}

#hero .hero-sub {
	color: var(--text-300);
	font-size: var(--text-lg);
	line-height: 1.65;
	margin-bottom: 1.25rem;
}

#hero .hero-note {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 0;
}

#hero .hero-note strong {
	color: var(--text-200);
	font-weight: 600;
}

/* !- Comparison table */
#comparison .compare {
	border: 1px solid var(--bg-700);
	border-collapse: separate;
	border-radius: var(--border-radius);
	border-spacing: 0;
	width: 100%;
}

#comparison .compare th,
#comparison .compare td {
	border-bottom: 1px solid var(--bg-800);
	padding: 1.125rem 1.25rem;
	text-align: left;
	vertical-align: top;
}

#comparison .compare thead th {
	background: var(--bg-800);
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

#comparison .compare thead th i.fa-solid {
	color: var(--text-400);
	cursor: help;
	font-size: var(--text-mini);
}

#comparison .compare thead th.support-col {
	text-align: center;
}

#comparison .compare tbody td.product-cell {
	min-width: 11rem;
}

#comparison .compare .product-name-row {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

#comparison .compare .product-icon {
	flex-shrink: 0;
	line-height: 0;
}

#comparison .compare .product-name {
	color: var(--text-50);
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.3;
}

#comparison .compare .product-link {
	font-size: var(--text-mini);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

#comparison .compare .product-link:hover {
	text-decoration: underline;
}

#comparison .compare tbody td.prose-cell {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.55;
	max-width: 17rem;
}

#comparison .compare .details-link {
	background: none;
	border: 0;
	color: var(--link);
	font-family: inherit;
	font-size: var(--text-mini);
	padding: 0;
	white-space: nowrap;
}

#comparison .compare .details-link:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

#comparison .compare tbody td.support-cell {
	text-align: center;
	vertical-align: middle;
}

#comparison .compare .support-mark {
	align-items: center;
	border-radius: 50%;
	display: inline-flex;
	height: 1.5rem;
	justify-content: center;
	width: 1.5rem;
}

#comparison .compare .support-yes {
	background: var(--green-transparent);
	color: var(--green-500);
	font-size: var(--text-xs);
}

#comparison .compare .support-partial {
	background: var(--blue-transparent);
	color: var(--blue-500);
	cursor: help;
	font-size: var(--text-xs);
}

#comparison .compare .support-no {
	color: var(--text-400);
}

#comparison .compare .support-na {
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.04em;
	width: auto;
}

/*
 * The accent ramps do not flip with the theme the way the neutrals do, so the
 * 500 steps that carry these glyphs on dark fall to 1.8:1 (green) and 3.2:1
 * (blue) against their own tint on light. Step down the ramp there - green
 * needs 700 to clear 3:1, blue clears it at 600.
 */
[data-theme="light"] #comparison .compare .support-yes {
	color: var(--green-700);
}

[data-theme="light"] #comparison .compare .support-partial {
	color: var(--blue-600);
}

#comparison .compare tbody tr:last-child th,
#comparison .compare tbody tr:last-child td {
	border-bottom: 0;
}

#comparison .compare thead th:first-child {
	border-top-left-radius: var(--border-radius);
}

#comparison .compare thead th:last-child {
	border-top-right-radius: var(--border-radius);
}

#comparison .compare tbody tr:last-child td:first-child {
	border-bottom-left-radius: var(--border-radius);
}

#comparison .compare tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--border-radius);
}

#comparison .compare tbody tr:hover td {
	background: var(--bg-850);
}

/* !- Details modal */
#details-modal #details-title {
	color: var(--text-50);
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

#details-modal #details-copy {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.6;
}

#details-modal #details-copy p {
	margin-bottom: 0;
}

#details-modal #details-copy p+p {
	margin-top: 0.75rem;
}

#details-modal #details-copy strong {
	color: var(--text-100);
	font-weight: 600;
}

/*
 * !- Closing CTA
 *
 * Pinned dark rather than tokenized, because the ON1 Guarantee that footer.php
 * injects immediately below is itself pinned light. Left on var(--bg-800) this
 * section resolved to #eeeeef under the light theme - the same value the
 * guarantee lands on - so the two ran together with no visible boundary. The
 * background is a literal hex for the same reason the guarantee's is: the
 * data-theme attribute is fixed in the markup, so it must not flip.
 *
 * The explicit color matters too. body sets color on itself, and that computed
 * value inherits straight through the pinned section - a child only re-resolves
 * the tokens it names itself.
 */
#trial-cta {
	background: #282828;
	color: var(--text-300);
}

#trial-cta .cta-copy {
	color: var(--text-300);
	font-size: var(--text-lg);
	line-height: 1.6;
	margin-bottom: 2rem;
}

#trial-cta .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/*
 * Six columns, two of them running prose, will not fit a phone - and dropping
 * the table into a horizontal scroller hides the three support columns behind
 * a swipe. Each row becomes its own card instead, with the column headings
 * carried down from the data-label attributes.
 */
@media (max-width: 767px) {
	#comparison .compare {
		border: 0;
	}

	#comparison .compare,
	#comparison .compare tbody,
	#comparison .compare tbody tr,
	#comparison .compare tbody td {
		display: block;
		width: auto;
	}

	#comparison .compare thead {
		display: none;
	}

	#comparison .compare tbody tr {
		background: var(--bg-800);
		border: 1px solid var(--bg-700);
		border-radius: var(--border-radius);
		margin-bottom: 1rem;
		padding: 1.25rem;
	}

	#comparison .compare tbody tr:last-child {
		margin-bottom: 0;
	}

	#comparison .compare tbody tr:hover td {
		background: none;
	}

	#comparison .compare tbody td {
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	#comparison .compare tbody td+td {
		margin-top: 1rem;
	}

	#comparison .compare tbody td.product-cell {
		min-width: 0;
	}

	#comparison .compare tbody td.prose-cell {
		max-width: none;
	}

	#comparison .compare tbody td[data-label]::before {
		color: var(--text-400);
		content: attr(data-label);
		display: block;
		font-size: var(--text-micro);
		font-weight: 700;
		letter-spacing: 0.06em;
		margin-bottom: 0.25rem;
		text-transform: uppercase;
	}

	#comparison .compare tbody td.support-cell {
		align-items: center;
		display: flex;
		gap: 0.75rem;
		justify-content: space-between;
		text-align: left;
	}

	#comparison .compare tbody td.support-cell::before {
		margin-bottom: 0;
	}

	#comparison .compare tbody td+td.support-cell {
		margin-top: 0.75rem;
	}
}