/**
 * Styles for the ON1 vs. DxO PhotoLab comparison page
 *
 * @copyright   2026, ON1
 *
 * The 2027 design for /on1-vs-dxo-photolab/. It carries the Photo RAW comparison
 * subnav and the hero vocabulary - both live on the 2027 product sheets this
 * page does not load, and base.css carries neither - then the section shells
 * and the widgets this page family owns: the on-page contents bar, the
 * head-to-head table, the paired ON1/competitor cards, the TL;DR callouts, the
 * pricing tiers, the camp cards, and the verdict box. The #resources band is
 * base.css's shared component - eyebrow, h2 and .resource-card - so nothing
 * for it lives here.
 *
 * Band order, on the 70/20/10 dark / light / one-step-lighter split:
 *
 *   #hero               pinned dark, --bg-950
 *   #page-contents      follows the theme
 *   #side-by-side       follows the theme
 *   #in-action          follows the theme, blue burst
 *   #raw-processing     follows the theme
 *   #ai-gap             follows the theme, blue burst
 *   #editing-feel       follows the theme
 *   #layers-masking     follows the theme
 *   #lens-camera        follows the theme
 *   #cost-of-committing follows the theme, blue burst
 *   #which-editor       pinned LIGHT
 *   #final-verdict      follows the theme
 *   #faqs               follows the theme, --bg-800 (the one step-lighter band)
 *   #resources          follows the theme, base.css owns the band
 *   #try-photo-raw      pinned dark, --bg-950
 *   ON1 Guarantee       pinned light, injected by partials/footer.php
 *
 * Everything is scoped to the body id, which keeps these rules clear of the
 * #faqs and .eyebrow vocabulary base.css owns under the same names.
 */

/* !- Product navigation
 *
 * base.css owns the sticky mechanics - the .sticky class base.js adds and the
 * offset it measures off #site-header - but none of the bar's own chrome, so
 * all of that lives here.
 *
 * Every link is white rather than --text-300, so the active state is carried by
 * the underline rather than by colour.
 *
 * border-top: 0 when pinned is deliberate, and base.css's
 * .sticky.is-sticky[data-on1-sticky-below] comment names this bar as one of the
 * pages that does it: #site-header already draws that line, and both drawing
 * one rendered a 4px rule on scroll. */
#on1-vs-dxo-photolab #product-navigation.is-sticky {
	background: color-mix(in srgb, var(--bg-900) 75%, transparent);
	border-top: 0;
}

@media (max-width: 575.98px) {
	#on1-vs-dxo-photolab #product-navigation {
		background: var(--bg-900);
	}
}

#on1-vs-dxo-photolab #product-navigation .nav {
	align-items: center;
}

/* base.css gives every li a 0.25rem bottom margin and zeroes it on
   :last-child. The bar centers items on their margin box, so the last link
   sat 2px below the rest. */
#on1-vs-dxo-photolab #product-navigation .nav-item {
	margin-bottom: 0;
}

#on1-vs-dxo-photolab #product-navigation .nav-link {
	color: var(--white);
	text-decoration: none;
}

#on1-vs-dxo-photolab #product-navigation .nav-link:hover {
	opacity: 0.75;
}

/* Seven links fit at full padding from 1200px up. Below that they tighten,
   which holds the bar to one line down to about 940px. */
@media (max-width: 1199.98px) {
	#on1-vs-dxo-photolab #product-navigation .nav-item .nav-link {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

/* Phones: the bar wraps, so the rows sit tighter. The product icon is hidden
   in the markup at this width. */
@media (max-width: 575.98px) {
	#on1-vs-dxo-photolab #product-navigation .nav-item .nav-link {
		padding-bottom: 0.25rem;
		padding-top: 0.25rem;
	}
}

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

#on1-vs-dxo-photolab #product-navigation .nav-link strong {
	font-weight: 600;
}

#on1-vs-dxo-photolab #product-navigation a.nav-link.active small {
	border-bottom: 1px solid var(--white);
}

/* !- Hero
 *
 * The negative margin pulls the band up under the subnav, which is 46px tall,
 * and the top padding adds that height back so the content still clears it. */
#on1-vs-dxo-photolab #hero {
	background: var(--bg-950);
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 2.5rem 0;
	text-align: center;
}

#on1-vs-dxo-photolab #hero .eyebrow {
	margin-bottom: 2.25rem;
}

#on1-vs-dxo-photolab #hero .eyebrow span {
	align-items: center;
	background: var(--blue-transparent);
	border-radius: var(--border-radius);
	color: var(--blue-300);
	display: inline-flex;
	gap: 0.5rem;
	letter-spacing: 0.08em;
	padding: 0.3125rem 0.75rem;
	text-transform: uppercase;
}

/* The product-page heroes run this headline at 76px. This one is a full
   sentence and wraps to four lines at that size, so it takes the same step down
   the overview page takes: 56px, and 38px below lg. */
#on1-vs-dxo-photolab #hero h1 {
	color: var(--white);
	font-size: 3.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin-bottom: 1.375rem;
}

@media (max-width: 991.98px) {
	#on1-vs-dxo-photolab #hero h1 {
		font-size: 2.375rem;
	}
}

#on1-vs-dxo-photolab #hero .hero-sub {
	color: var(--text-300);
	font-size: var(--text-lg);
	line-height: 1.6;
	margin-bottom: 2.25rem;
}

/* Matches the NoNoise AI 2027 hero button: this padding plus Bootstrap's
   default 1rem, no font-size override. Scoped to the hero, not the page - a
   bare .btn here would also catch the subnav's .btn-sm and blow out its
   sizing. */
#on1-vs-dxo-photolab #hero .btn {
	padding: 0.9375rem 1.875rem;
}

#on1-vs-dxo-photolab #hero .hero-icon {
	border-radius: 22%;
}

/* The #hero rule above ends at 2.5rem of bottom padding, which is the gap above
   the screenshot rather than below it. */
#on1-vs-dxo-photolab #hero .hero-shot {
	margin-bottom: 0;
	margin-top: 2.5rem;
}

#on1-vs-dxo-photolab #side-by-side,
#on1-vs-dxo-photolab #in-action,
#on1-vs-dxo-photolab #raw-processing,
#on1-vs-dxo-photolab #ai-gap,
#on1-vs-dxo-photolab #editing-feel,
#on1-vs-dxo-photolab #lens-camera,
#on1-vs-dxo-photolab #layers-masking,
#on1-vs-dxo-photolab #cost-of-committing,
#on1-vs-dxo-photolab #which-editor,
#on1-vs-dxo-photolab #final-verdict,
#on1-vs-dxo-photolab #try-photo-raw {
	padding: 5rem 0;
}

/* Pinning with data-theme only redefines the tokens. body's color is already
   computed by the time it inherits in, so each pinned band restates it or the
   copy keeps the other theme's grey. */
#on1-vs-dxo-photolab #try-photo-raw {
	background: var(--bg-950);
	color: var(--text-300);
}

#on1-vs-dxo-photolab #which-editor {
	background: var(--bg-800);
	color: var(--text-300);
}

/* base.css puts the FAQ band on --bg-900, the same tone as the page. This page
   uses it as its single step-lighter band. */
#on1-vs-dxo-photolab #faqs {
	background: var(--bg-800);
}

/* !- On-page contents
 *
 * The jump list under the hero. Chips rather than a bulleted list, so the ten
 * entries wrap into two tidy rows instead of a tall column. */
#on1-vs-dxo-photolab #page-contents {
	border-bottom: 1px solid var(--bg-800);
	border-top: 1px solid var(--bg-800);
	padding: 1.75rem 0;
}

#on1-vs-dxo-photolab .vs-toc-label {
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 0.875rem;
	text-transform: uppercase;
}

#on1-vs-dxo-photolab .vs-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

#on1-vs-dxo-photolab .vs-toc li {
	margin-bottom: 0;
}

#on1-vs-dxo-photolab .vs-toc a {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	color: var(--text-300);
	display: inline-block;
	font-size: var(--text-xs);
	padding: 0.4375rem 0.875rem;
	text-decoration: none;
}

#on1-vs-dxo-photolab .vs-toc a:hover {
	border-color: var(--blue-500);
	color: var(--text-50);
}

/* !- Head-to-head table
 *
 * Same treatment as the comparison table on the Compare ON1 Photo Editing
 * Software landing page, narrowed to three columns. */
#on1-vs-dxo-photolab .compare {
	border: 1px solid var(--bg-700);
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 0;
	width: 100%;
}

#on1-vs-dxo-photolab .compare th,
#on1-vs-dxo-photolab .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;
}

#on1-vs-dxo-photolab .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;
}

#on1-vs-dxo-photolab .compare thead th.on1-col {
	color: var(--blue-500);
}

#on1-vs-dxo-photolab .compare tbody th {
	color: var(--text-100);
	font-weight: 600;
}

#on1-vs-dxo-photolab .compare tbody td {
	color: var(--text-300);
}

#on1-vs-dxo-photolab .compare tbody tr:last-child th,
#on1-vs-dxo-photolab .compare tbody tr:last-child td {
	border-bottom: 0;
}

#on1-vs-dxo-photolab .compare thead th:first-child {
	border-top-left-radius: var(--border-radius);
}

#on1-vs-dxo-photolab .compare thead th:last-child {
	border-top-right-radius: var(--border-radius);
}

#on1-vs-dxo-photolab .compare tbody tr:last-child th {
	border-bottom-left-radius: var(--border-radius);
}

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

#on1-vs-dxo-photolab .compare tbody tr:hover th,
#on1-vs-dxo-photolab .compare tbody tr:hover td {
	background: var(--bg-850);
}

/* !- Paired cards
 *
 * The ON1 / competitor pairs that carry this page's feature lists. .vs-card-on1
 * is the one that gets the blue edge. */
#on1-vs-dxo-photolab .vs-card {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 1.75rem;
}

#on1-vs-dxo-photolab .vs-card-on1 {
	border-color: color-mix(in srgb, var(--blue-500) 35%, transparent);
}

#on1-vs-dxo-photolab .vs-card img {
	border-radius: var(--border-radius);
	margin-bottom: 1.25rem;
	width: 100%;
}

#on1-vs-dxo-photolab .vs-card h3 {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: 1rem;
}

#on1-vs-dxo-photolab .vs-card p {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.6;
}

#on1-vs-dxo-photolab .vs-card ul {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

#on1-vs-dxo-photolab .vs-card li {
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	gap: 0.625rem;
	line-height: 1.55;
}

#on1-vs-dxo-photolab .vs-card li::before {
	background: var(--bg-500);
	border-radius: 50%;
	content: '';
	flex: none;
	height: 0.375rem;
	margin-top: 0.5rem;
	width: 0.375rem;
}

#on1-vs-dxo-photolab .vs-card-on1 li::before {
	background: var(--blue-500);
}

#on1-vs-dxo-photolab .vs-card li strong {
	color: var(--text-50);
	font-weight: 600;
}

/* !- Narrative blocks
 *
 * The alternating image-and-copy rows. The headings are h3 so the section h2
 * keeps the outline. */
#on1-vs-dxo-photolab .vs-copy h3 {
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

#on1-vs-dxo-photolab .vs-copy p {
	color: var(--text-300);
	line-height: 1.7;
}

#on1-vs-dxo-photolab .vs-copy p:last-child {
	margin-bottom: 0;
}

#on1-vs-dxo-photolab .vs-copy ul {
	color: var(--text-300);
	line-height: 1.7;
}

#on1-vs-dxo-photolab .vs-copy strong {
	color: var(--text-50);
}

#on1-vs-dxo-photolab .vs-shot {
	border-radius: var(--border-radius);
	width: 100%;
}

/* !- TL;DR callout */
#on1-vs-dxo-photolab .vs-tldr {
	background: var(--blue-transparent);
	border: 1px solid color-mix(in srgb, var(--blue-500) 30%, transparent);
	border-radius: var(--border-radius);
	margin-top: 2.25rem;
	padding: 1.5rem 1.75rem;
}

/* Specificity, not source order, decides against the .vs-tldr p rule below, so
   the label is matched through its wrapper to stay ahead of it. */
#on1-vs-dxo-photolab .vs-tldr .vs-tldr-label {
	color: var(--link-alt);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

#on1-vs-dxo-photolab .vs-tldr p {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.7;
	margin-bottom: 0;
}

#on1-vs-dxo-photolab .vs-tldr strong {
	color: var(--text-50);
}

/* !- Pricing tiers */
#on1-vs-dxo-photolab .vs-tier {
	border-bottom: 1px solid var(--bg-700);
	padding: 1rem 0;
}

#on1-vs-dxo-photolab .vs-tier:first-of-type {
	padding-top: 0;
}

#on1-vs-dxo-photolab .vs-tier:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

#on1-vs-dxo-photolab .vs-tier-name {
	color: var(--text-50);
	font-size: var(--text-sm);
	font-weight: 600;
	margin-bottom: 0.25rem;
}

#on1-vs-dxo-photolab .vs-tier-detail {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.55;
	margin-bottom: 0;
}

/* !- Camp cards
 *
 * The light band. --bg-900 rather than --bg-800 so the cards sit a step above
 * the band they are on, which is the reverse of the dark-theme pairing. */
#on1-vs-dxo-photolab .vs-camp {
	background: var(--bg-900);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 2.25rem;
}

#on1-vs-dxo-photolab .vs-camp-on1 {
	border-color: color-mix(in srgb, var(--blue-500) 35%, transparent);
}

#on1-vs-dxo-photolab .vs-camp h3 {
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: 1.25rem;
}

#on1-vs-dxo-photolab .vs-camp ul {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

#on1-vs-dxo-photolab .vs-camp li {
	color: var(--text-300);
	display: flex;
	font-size: var(--text-sm);
	gap: 0.625rem;
	line-height: 1.6;
}

/* #which-editor is pinned light, so this is the light step in both themes. */
#on1-vs-dxo-photolab .vs-camp li i.fa-solid {
	color: var(--blue-700);
	font-size: var(--text-xs);
	margin-top: 0.3125rem;
}

#on1-vs-dxo-photolab .vs-camp li strong {
	color: var(--text-50);
	font-weight: 600;
}

#on1-vs-dxo-photolab .vs-camp-note {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 0;
	margin-top: 1.25rem;
}

/* !- Verdict box */
#on1-vs-dxo-photolab .vs-verdict {
	background: var(--bg-800);
	border: 1px solid color-mix(in srgb, var(--blue-500) 25%, transparent);
	border-radius: var(--border-radius);
	padding: 2.5rem;
}

#on1-vs-dxo-photolab .vs-verdict p {
	color: var(--text-300);
	line-height: 1.75;
}

#on1-vs-dxo-photolab .vs-verdict p:last-child {
	margin-bottom: 0;
}

#on1-vs-dxo-photolab .vs-verdict strong {
	color: var(--text-50);
}

/* !- Video */
#on1-vs-dxo-photolab .vs-video {
	border-radius: var(--border-radius);
	margin-bottom: 2.25rem;
	overflow: hidden;
}

/* !- Closing CTA */
#on1-vs-dxo-photolab #try-photo-raw .vs-cta-copy {
	color: var(--text-300);
	font-size: var(--text-lg);
	margin-bottom: 1.5rem;
}

#on1-vs-dxo-photolab #try-photo-raw .vs-cta-list {
	color: var(--text-300);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-sm);
	gap: 0.75rem 1.75rem;
	justify-content: center;
	list-style: none;
	margin: 0 0 2rem;
	padding-left: 0;
}

#on1-vs-dxo-photolab #try-photo-raw .vs-cta-list li {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0;
}

#on1-vs-dxo-photolab #try-photo-raw .vs-cta-list i.fa-solid {
	color: var(--green-500);
	font-size: var(--text-xs);
}

#on1-vs-dxo-photolab #try-photo-raw .btn {
	padding: 0.75rem 1.25rem;
}

@media (max-width: 991.98px) {
	#on1-vs-dxo-photolab #side-by-side,
	#on1-vs-dxo-photolab #in-action,
	#on1-vs-dxo-photolab #raw-processing,
	#on1-vs-dxo-photolab #ai-gap,
	#on1-vs-dxo-photolab #editing-feel,
	#on1-vs-dxo-photolab #lens-camera,
	#on1-vs-dxo-photolab #layers-masking,
	#on1-vs-dxo-photolab #cost-of-committing,
	#on1-vs-dxo-photolab #which-editor,
	#on1-vs-dxo-photolab #final-verdict,
	#on1-vs-dxo-photolab #try-photo-raw {
		padding: 3rem 0;
	}
}

/*
 * Five columns will not fit a phone or a tablet, and a horizontal scroller
 * hides the two DxO columns behind a swipe. Each row becomes its own card
 * instead, with the column headings carried down from the data-label
 * attributes. Same treatment as the compare landing page, one breakpoint
 * wider: this table carries two more columns than that one, and it is already
 * unreadable by 992px.
 */
@media (max-width: 991.98px) {
	#on1-vs-dxo-photolab .compare {
		border: 0;
	}

	#on1-vs-dxo-photolab .compare,
	#on1-vs-dxo-photolab .compare tbody,
	#on1-vs-dxo-photolab .compare tbody tr,
	#on1-vs-dxo-photolab .compare tbody th,
	#on1-vs-dxo-photolab .compare tbody td {
		display: block;
		width: auto;
	}

	#on1-vs-dxo-photolab .compare thead {
		display: none;
	}

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

	#on1-vs-dxo-photolab .compare tbody tr:last-child {
		margin-bottom: 0;
	}

	#on1-vs-dxo-photolab .compare tbody tr:hover th,
	#on1-vs-dxo-photolab .compare tbody tr:hover td {
		background: none;
	}

	#on1-vs-dxo-photolab .compare tbody th,
	#on1-vs-dxo-photolab .compare tbody td {
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	#on1-vs-dxo-photolab .compare tbody th + td,
	#on1-vs-dxo-photolab .compare tbody td + td {
		margin-top: 1rem;
	}

	#on1-vs-dxo-photolab .compare tbody th[data-label]::before,
	#on1-vs-dxo-photolab .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;
	}
}