/**
 * Styles for the ON1 Plugins overview page
 *
 * @copyright   2026, ON1
 */

/* !- Product navigation */
/* No hero image behind it here, so it needs its own surface before it sticks
   or the pinned-dark links sit on the light theme's page background. */
#product-navigation {
	background: var(--bg-900);
}

#product-navigation.is-sticky {
	background: color-mix(in srgb, var(--bg-900) 75%, transparent);
	border-top: 0;
}

#product-navigation .nav {
	align-items: center;
}

@media (max-width: 575.98px) {
	#product-navigation .nav-item .nav-link {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

#product-navigation .nav-link {
	color: var(--text-300);
	text-decoration: none;
}

#product-navigation .nav-link small {
	font-size: var(--text-xs);
	position: relative;
	top: 0.125em;
}

#product-navigation .nav-link strong {
	color: var(--text-50);
	font-weight: 600;
}

#product-navigation .nav-link:hover,
#product-navigation a.nav-link.active {
	color: var(--text-50);
}

#product-navigation a.nav-link.active small {
	border-bottom: 1px solid var(--text-50);
}

/* !- Hero */
#overview {
	background-color: var(--bg-900);
	color: var(--text-400);
	padding: 5rem 0;
}

#overview h1 {
	color: var(--white);
}

#overview .hero-grad {
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(-40deg, var(--blue-500), var(--legacy-purple-500));
	color: transparent;
}

#overview .hero-tagline {
	color: var(--text-100);
	font-size: var(--text-xl);
	font-weight: 700;
}

#overview .btn {
	padding: 0.9375rem 1.875rem;
}

#overview .hero-buttons {
	margin-top: 1.75rem;
}

#overview .hero-meta {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-xs);
	gap: 0.5rem 1.375rem;
	list-style: none;
	margin: 1.375rem 0 0 0;
	padding: 0;
}

#overview .hero-meta i {
	color: var(--blue-300);
	margin-right: 0.25rem;
}

#overview .icon-tile {
	align-items: center;
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-50);
	display: flex;
	flex-direction: column;
	font-size: var(--text-xs);
	font-weight: 700;
	gap: 0.75rem;
	height: 100%;
	padding: 1.375rem 0.75rem 1.125rem;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

#overview .icon-tile:hover {
	border-color: var(--blue-300);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	#overview .icon-tile {
		transition: none;
	}

	#overview .icon-tile:hover {
		transform: none;
	}
}

/* !- Plugin picker */
#plugins {
	background: var(--bg-700);
	padding: 5rem 0;
}

#plugins .pick-card {
	background: var(--bg-900);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	padding: 2rem;
}

#plugins .pick-card h3 {
	align-items: center;
	display: flex;
	font-size: var(--text-lg);
	gap: 0.875rem;
	margin-bottom: 0.75rem;
}

#plugins .pick-card .pick-link {
	color: var(--link-alt);
	font-size: var(--text-sm);
	font-weight: 700;
	margin-top: auto;
	text-decoration: none;
}

#plugins .pick-card .pick-link:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

/* !- Video cards (app plugin pages) */
#plugins .video-thumb {
	border-radius: var(--border-radius);
	display: block;
	margin-bottom: 1rem;
	overflow: hidden;
	position: relative;
}

#plugins .video-thumb i {
	color: var(--white);
	font-size: 3rem;
	left: 50%;
	opacity: 0.85;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease;
}

#plugins .video-thumb:hover i {
	opacity: 1;
}

#plugins .video-card h3 {
	font-size: var(--text-lg);
	margin-bottom: 0.25rem;
}

#plugins .video-card p {
	font-size: var(--text-sm);
	margin-bottom: 0;
}

/* !- Which plugin to use (Photoshop page)
 *
 * Same treatment as the head-to-head table on the ON1 vs. Capture One page. */
#which-plugin {
	padding: 5rem 0;
}

#which-plugin .compare {
	border: 1px solid var(--bg-700);
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 0;
	width: 100%;
}

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

#which-plugin .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;
}

#which-plugin .compare tbody th {
	color: var(--text-100);
	font-weight: 600;
}

/* Plugin names and links stay on one line; the two middle columns take the squeeze */
#which-plugin .compare th:first-child,
#which-plugin .compare th:last-child,
#which-plugin .compare td:last-child {
	white-space: nowrap;
}

#which-plugin .compare tbody td {
	color: var(--text-300);
}

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

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

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

#which-plugin .compare tbody tr:last-child th {
	border-bottom-left-radius: var(--border-radius);
}

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

#which-plugin .compare tbody tr:hover th,
#which-plugin .compare tbody tr:hover td {
	background: var(--bg-850);
}

/* Below md each row becomes its own card, with the column headings carried
   down from the data-label attributes */
@media (max-width: 767.98px) {
	#which-plugin .compare {
		border: 0;
	}

	#which-plugin .compare,
	#which-plugin .compare tbody,
	#which-plugin .compare tbody tr,
	#which-plugin .compare tbody th,
	#which-plugin .compare tbody td {
		display: block;
		width: auto;
	}

	#which-plugin .compare thead {
		display: none;
	}

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

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

	#which-plugin .compare tbody tr:hover th,
	#which-plugin .compare tbody tr:hover td {
		background: none;
	}

	#which-plugin .compare tbody th,
	#which-plugin .compare tbody td {
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	#which-plugin .compare tbody th + td,
	#which-plugin .compare tbody td + td {
		margin-top: 1rem;
	}

	#which-plugin .compare tbody th[data-label]::before,
	#which-plugin .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;
	}
}

/* !- How plugins open (Photoshop page) */
#how-plugins-open {
	background: var(--bg-800);
	padding: 5rem 0;
}

#how-plugins-open h3 {
	font-size: var(--text-xl);
	margin-bottom: 0;
}

#how-plugins-open .open-card {
	background: var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	padding: 1.5rem;
}

#how-plugins-open .open-card p {
	margin-bottom: 0;
}

#how-plugins-open .menu-fig {
	border-radius: var(--border-radius);
	margin: 0;
	overflow: hidden;
}

#how-plugins-open .menu-fig img {
	display: block;
}

#how-plugins-open .menu-path {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.625rem;
}

#how-plugins-open .menu-path span {
	background: var(--bg-900);
	border-radius: var(--border-radius);
	color: var(--text-100);
	font-size: var(--text-sm);
	line-height: 1.2;
	padding: 0.375rem 0.75rem;
	white-space: nowrap;
}

#how-plugins-open .menu-path i {
	color: var(--text-500);
	font-size: var(--text-sm);
}

#how-plugins-open .open-done {
	align-items: center;
	background: var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-100);
	display: flex;
	font-size: var(--text-lg);
	gap: 1rem;
	margin-top: 1.5rem;
	padding: 1.5rem;
}

#how-plugins-open .open-done i {
	color: var(--blue);
	font-size: var(--text-2xl);
}

#how-plugins-open .open-done span {
	color: var(--text-300);
}

#how-plugins-open .open-tip {
	border-left: 3px solid var(--blue);
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: 1.5rem;
	padding: 0.25rem 0 0.25rem 1.5rem;
}

#how-plugins-open .open-tip p {
	margin-bottom: 0;
}

#how-plugins-open .open-tip em {
	color: var(--text-100);
	font-style: normal;
}

#how-plugins-open .open-caption {
	color: var(--text-500);
	font-size: var(--text-xs);
	margin: 1.5rem 0 0;
}

/* !- Plugin rows */
.plugin-row {
	padding: 5rem 0;
}

.plugin-row-tint,
#max {
	background: var(--bg-800);
}

.plugin-row h2 {
	align-items: center;
	display: flex;
	gap: 0.875rem;
	margin-bottom: 0.875rem;
}

.plugin-row .plugin-tag {
	color: var(--text-100);
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.plugin-row h2.features-label {
	color: var(--text-500);
	display: block;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 1.5rem 0 0.875rem 0;
	text-transform: uppercase;
}

.plugin-row .plugin-features {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	list-style: none;
	margin: 0 0 1.75rem 0;
	padding: 0;
}

.plugin-row .plugin-features li {
	align-items: flex-start;
	display: flex;
	gap: 0.875rem;
}

.plugin-row .feature-tick {
	align-items: center;
	background: var(--blue-transparent);
	border-radius: var(--border-radius);
	color: var(--link-alt);
	display: flex;
	flex: none;
	font-size: var(--text-sm);
	height: 1.75rem;
	justify-content: center;
	width: 1.75rem;
}

.plugin-row .plugin-features h3 {
	font-size: var(--text-lg);
	margin-bottom: 0.25rem;
}

.plugin-row .plugin-features p {
	font-size: var(--text-sm);
	margin-bottom: 0;
}

.plugin-row .works-in {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.75rem 0;
	padding: 0;
}

.plugin-row .works-in li {
	background: var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-100);
	font-size: var(--text-xs);
	padding: 0.375rem 0.625rem;
}

.plugin-row .works-in .works-label {
	background: none;
	color: var(--text-500);
	font-weight: 700;
	letter-spacing: 0.12em;
	padding-left: 0;
	text-transform: uppercase;
}

.plugin-row .plugin-price {
	color: var(--text-50);
	font-size: 1.875rem;
	font-weight: 800;
	margin-bottom: 0.875rem;
}

.plugin-row .plugin-price .fa-spin {
	color: var(--text-100);
	font-size: 1rem;
}

.plugin-row .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

.plugin-row .btn-neutral,
.plugin-row .btn-neutral:active,
.plugin-row .btn-neutral:focus {
	background-color: var(--bg-500);
	border-color: var(--bg-500);
	color: var(--text-50);
}

.plugin-row .btn-neutral:hover {
	background-color: var(--bg-400);
	border-color: var(--bg-400);
	color: var(--text-50);
}

.plugin-row .plugin-media {
	border-radius: var(--border-radius);
}

/* !- Where each plugin works */
#where-plugins-work {
	padding: 5rem 0;
}

#where-plugins-work .where-card-col {
	cursor: pointer !important;
}

#where-plugins-work .where-card {
	align-items: center;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	color: var(--text-50);
	display: flex;
	font-size: var(--text-base);
	font-weight: 700;
	gap: 1rem;
	justify-content: space-between;
	padding: 1.25rem;
	text-decoration: none;
}

#where-plugins-work .where-card:hover {
	background: var(--bg-700);
}

#where-plugins-work .where-card i {
	color: var(--link-alt);
	font-size: var(--text-2xl);
}

/* !- Photo RAW MAX */
#max {
	padding: 5rem 0;
}

#max .max-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1.75rem 0;
	padding: 0;
}

#max .max-list i {
	color: var(--link-alt);
	margin-right: 0.375rem;
}

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

/* !- Trustpilot */
#trustpilot {
	background: var(--bg-900);
	color: var(--text-300);
	padding: 5rem 0;
}

/* !- Latest news */
#related-posts {
	background: var(--bg-800);
	padding: 5rem 0;
}

#related-posts .post-card {
	background: var(--bg-900);
	border-radius: var(--border-radius);
	display: block;
	overflow: hidden;
	text-decoration: none;
}

#related-posts .post-card-body {
	padding: 1.5rem 1.625rem 1.75rem;
}

#related-posts .post-card h3 {
	font-size: var(--text-lg);
	margin-bottom: 0;
}

#related-posts .post-card:hover h3 {
	color: var(--link-alt);
}

/* !- FAQs */
#faqs .faqs-sub {
	color: var(--text-500);
	margin-bottom: 1.75rem;
}

#faqs h2 {
	margin-bottom: 0.75rem;
}

/* !- Buy callout */
/* Pinned dark, so it sets its own text color rather than inheriting the
   unpinned body's. */
#buy-callout {
	background-color: var(--bg-900);
	color: var(--text-300);
	padding: 5rem 0;
}

#buy-callout h2 {
	margin-bottom: 0.75rem;
}

#buy-callout p {
	margin-bottom: 1.75rem;
}

#buy-callout .btn {
	padding: 0.9375rem 1.875rem;
}