/*
 * Sign ROI calculator (templates/page-sign-roi-calculator.php).
 * Page-only: enqueued by inc/roi-calculator.php on that page, not bundled.
 * Every selector is scoped to .roi so nothing leaks into the site.
 */

.roi {
	--roi-gap: clamp(20px, 3vw, 36px);
	--roi-field-bg: var(--color-bg);
	--roi-line: rgba(255, 255, 255, .16);
	padding-block: clamp(48px, 7vw, 96px);
}

.roi__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: var(--roi-gap);
	align-items: start;
}

/* ---------------------------------------------------------------- inputs */
.roi-form {
	display: grid;
	gap: var(--roi-gap);
}

.roi-step {
	margin: 0;
	padding: clamp(20px, 2.6vw, 32px);
	border: 1px solid var(--roi-line);
	background: var(--color-surface);
	min-width: 0;
}

.roi-step legend {
	display: flex;
	align-items: baseline;
	gap: 12px;
	float: left;
	width: 100%;
	margin: 0 0 22px;
	padding: 0;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-white);
}

.roi-step legend span {
	color: var(--color-orange);
	font: 600 var(--text-xs) var(--font-label);
	letter-spacing: var(--tracking-label);
}

.roi-step legend + * {
	clear: both;
}

.roi-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.roi-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roi-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.roi-field--wide {
	grid-column: 1 / -1;
}

.roi-field label,
.roi-field .roi-label {
	margin-bottom: 7px;
	color: var(--color-text-muted);
	font: 600 var(--text-xs) var(--font-body-caps);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.roi-input {
	position: relative;
	display: flex;
	align-items: stretch;
}

.roi-input > span {
	display: flex;
	align-items: center;
	padding: 0 12px;
	border: 1px solid var(--roi-line);
	background: var(--color-surface-raised);
	color: var(--color-text-subtle);
	font: 500 var(--text-sm) var(--font-label);
}

.roi-input > span:first-child {
	border-right: 0;
}

.roi-input > span:last-child {
	border-left: 0;
}

.roi input[type="number"],
.roi input[type="text"],
.roi select {
	width: 100%;
	min-width: 0;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--roi-line);
	border-radius: 0;
	background: var(--roi-field-bg);
	color: var(--color-white);
	font: 500 var(--text-base) var(--font-body);
	font-variant-numeric: tabular-nums;
}

.roi select {
	appearance: none;
	padding-right: 36px;
	background-image: linear-gradient(45deg, transparent 50%, var(--color-orange) 50%), linear-gradient(135deg, var(--color-orange) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
}

.roi input:focus-visible,
.roi select:focus-visible,
.roi button:focus-visible,
.roi summary:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.roi input[aria-invalid="true"] {
	border-color: var(--color-led-red);
}

.roi-hint {
	margin: 6px 0 0;
	color: var(--color-text-subtle);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.roi-hint a {
	color: var(--color-orange-soft);
}

.roi-choice {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.roi-choice label {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 14px 14px 14px 42px;
	border: 1px solid var(--roi-line);
	background: var(--color-bg);
	color: var(--color-white);
	font: 600 var(--text-md) var(--font-body);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.roi-choice label small {
	color: var(--color-text-subtle);
	font-weight: 400;
	font-size: var(--text-sm);
}

.roi-choice input {
	position: absolute;
	top: 15px;
	left: 14px;
}

/*
 * Radios and checkboxes are drawn here rather than left to the browser:
 * the theme's global input rule (full width, 50px min-height, padding) is
 * meant for text fields, and iOS Safari applied it to these too, drawing
 * oversized controls that overlapped their labels.
 */
.roi input[type="radio"],
.roi input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 2px solid var(--color-text-subtle);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.roi input[type="radio"]:checked {
	border-color: var(--color-orange);
	background: radial-gradient(circle, var(--color-orange) 0 4px, transparent 4.5px);
}

.roi input[type="checkbox"] {
	border-radius: var(--radius-sm);
}

.roi input[type="checkbox"]:checked {
	border-color: var(--color-orange);
	background: var(--color-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%231a0a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.roi-choice label:has(input:checked) {
	border-color: var(--color-orange);
	background: var(--color-surface-raised);
}

.roi-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-white);
	font-size: var(--text-md);
	cursor: pointer;
}

.roi-toggle {
	min-height: 44px;
}

.roi-optional[hidden] {
	display: none;
}

.roi-optional {
	margin-top: 18px;
}

/* ---------------------------------------------------------------- results */
.roi-results {
	position: sticky;
	top: calc(var(--sun-header-height) + 16px);
	border: 1px solid var(--roi-line);
	border-top: 3px solid var(--color-orange);
	background: var(--color-void);
}

.roi-results__head {
	padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px) 0;
}

.roi-results__head .eyebrow {
	margin-bottom: 8px;
}

.roi-results__head h2 {
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.05;
}

.roi-hero-stat {
	margin: 22px clamp(20px, 2.6vw, 30px) 0;
	padding: 20px;
	background: var(--color-surface);
	border-left: 3px solid var(--color-green);
}

.roi-hero-stat p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.roi-hero-stat strong {
	display: block;
	margin: 4px 0;
	color: var(--color-white);
	font: 700 clamp(2.4rem, 4.4vw, 3.4rem) / 1 var(--font-display);
	font-variant-numeric: tabular-nums;
}

.roi-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 20px clamp(20px, 2.6vw, 30px) 0;
	background: var(--roi-line);
	border: 1px solid var(--roi-line);
}

.roi-stats > div {
	padding: 14px 16px;
	background: var(--color-void);
	min-width: 0;
}

.roi-stats dt {
	color: var(--color-text-subtle);
	font: 600 var(--text-2xs) var(--font-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.roi-stats dd {
	margin: 6px 0 0;
	color: var(--color-white);
	font: 700 1.35rem / 1.1 var(--font-display);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.roi-stats dd small {
	display: block;
	margin-top: 4px;
	color: var(--color-text-subtle);
	font: 400 var(--text-xs) / 1.4 var(--font-body);
}

.roi-block {
	margin: 24px clamp(20px, 2.6vw, 30px) 0;
}

.roi-block h3 {
	margin: 0 0 12px;
	font: 700 var(--text-xs) var(--font-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-orange-soft);
}

/* Cost per 1,000 views comparison bars */
.roi-bars {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.roi-bars li {
	display: grid;
	grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	font-size: var(--text-sm);
}

.roi-bars__name {
	color: var(--color-text-muted);
}

.roi-bars__track {
	height: 10px;
	background: var(--color-surface-raised);
}

.roi-bars__fill {
	display: block;
	height: 100%;
	background: var(--color-text-subtle);
	transform-origin: left;
}

.roi-bars li.is-sign .roi-bars__name {
	color: var(--color-white);
	font-weight: 700;
}

.roi-bars li.is-sign .roi-bars__fill {
	background: var(--color-orange);
}

.roi-bars__value {
	min-width: 5.5ch;
	color: var(--color-white);
	font: 600 var(--text-sm) var(--font-label);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.roi-scenarios {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
}

.roi-scenarios th,
.roi-scenarios td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--roi-line);
	text-align: right;
}

.roi-scenarios th:first-child,
.roi-scenarios td:first-child {
	padding-left: 0;
	text-align: left;
}

.roi-scenarios thead th {
	color: var(--color-text-subtle);
	font: 600 var(--text-2xs) var(--font-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.roi-scenarios tbody th {
	color: var(--color-white);
	font-weight: 600;
}

.roi-scenarios td {
	color: var(--color-white);
}

.roi-note {
	margin: 10px 0 0;
	color: var(--color-text-subtle);
	font-size: var(--text-xs);
	line-height: 1.55;
}

.roi-results__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	margin-top: 26px;
	padding: 20px clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 28px);
	border-top: 1px solid var(--roi-line);
}

.roi-empty {
	margin: 22px clamp(20px, 2.6vw, 30px) 0;
	color: var(--color-text-muted);
}

/* ---------------------------------------------------------------- method + sources */
.roi-method {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--color-paper);
	color: var(--color-bg);
}

.roi-method h2,
.roi-method h3 {
	color: var(--color-bg);
}

.roi-method .eyebrow {
	color: var(--color-orange-ink);
}

.roi-method__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px clamp(28px, 4vw, 56px);
	margin-top: 28px;
}

.roi-method__grid h3 {
	margin: 0 0 8px;
	font-size: 1.15rem;
}

.roi-method__grid p,
.roi-method__grid li {
	color: #30353b;
	font-size: var(--text-md);
	line-height: 1.6;
}

.roi-method code {
	padding: 1px 5px;
	background: #ecebe6;
	color: var(--color-bg);
	font: 500 .85em var(--font-label);
}

.roi-sources {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: clamp(28px, 3.5vw, 40px);
	border-top: 1px solid var(--color-text-muted);
}

.roi-sources__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px clamp(28px, 4vw, 56px);
	align-items: end;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.roi-sources__head h3 {
	margin: 0;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	line-height: 1;
	text-transform: uppercase;
}

.roi-sources__head > p {
	max-width: 46ch;
	margin: 0;
	color: var(--color-surface-raised);
	font-size: var(--text-md);
	line-height: 1.6;
}

.roi-sources__group + .roi-sources__group {
	margin-top: 28px;
}

.roi-sources__group h4 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--color-orange-ink);
	font: 600 var(--text-xs) var(--font-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.roi-sources__group h4::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-text-muted);
}

.roi-sources__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.roi-source {
	display: grid;
	grid-template-columns: 2.4em minmax(0, 1fr);
	gap: 14px;
	padding: 16px 20px;
	border: 1px solid var(--color-text-muted);
	border-left: 3px solid var(--color-text-muted);
	background: var(--color-white);
	scroll-margin-top: calc(var(--sun-header-height) + 24px);
	transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
}

.roi-source:hover {
	border-left-color: var(--color-orange);
}

/* A citation link lands here; make the card it points to obvious. */
.roi-source:target {
	border-color: var(--color-orange);
	box-shadow: 0 0 0 3px rgba(249, 129, 40, .22);
}

.roi-source__num {
	color: var(--color-orange-ink);
	font: 600 var(--text-sm) / 1.4 var(--font-label);
	font-variant-numeric: tabular-nums;
}

/* Title and use on the left; who published it and the link on the right. */
.roi-source__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 30%);
	gap: 6px clamp(20px, 3vw, 40px);
	align-items: start;
	min-width: 0;
}

.roi-source__main,
.roi-source__side {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.roi-source__side {
	gap: 4px;
}

.roi-source__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 2px 0 0;
	color: #4b525a;
	font: 500 var(--text-2xs) / 1.5 var(--font-label);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.roi-source__flag {
	padding: 2px 6px;
	border: 1px solid var(--color-orange-ink);
	color: var(--color-orange-ink);
	font-weight: 600;
	white-space: nowrap;
}

.roi-source__title {
	margin: 0;
	color: var(--color-bg);
	font: 600 1rem / 1.35 var(--font-body);
}

.roi-source__used {
	margin: 0;
	color: var(--color-surface-raised);
	font-size: var(--text-sm);
	line-height: 1.55;
}

.roi-source__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-self: start;
	min-height: 32px;
	color: var(--color-orange-ink);
	font: 600 var(--text-xs) var(--font-body-caps);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.roi-source__link:hover,
.roi-source__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.roi-source__link:focus-visible {
	outline: 2px solid var(--color-orange-ink);
	outline-offset: 2px;
}

.roi-disclaimer {
	margin-top: 24px;
	padding: 16px 18px;
	border-left: 3px solid var(--color-orange-ink);
	background: #f0efea;
	color: #30353b;
	font-size: var(--text-sm);
	line-height: 1.6;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
	.roi__layout {
		grid-template-columns: 1fr;
	}

	.roi-results {
		position: static;
	}
}

@media (max-width: 680px) {
	.roi-grid,
	.roi-grid--3,
	.roi-choice,
	.roi-method__grid,
	.roi-sources__head {
		grid-template-columns: 1fr;
	}

	.roi-source {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 16px;
	}

	.roi-source__body {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.roi-stats {
		grid-template-columns: 1fr;
	}

	.roi-bars li {
		grid-template-columns: minmax(96px, 40%) minmax(0, 1fr) auto;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.roi-bars__fill {
		transition: transform var(--motion-base) ease;
	}
}

/* Print: the results on white paper, with the inputs kept as the record of
 * what was assumed. Browsers drop backgrounds when printing, so every dark
 * surface is reset to black-on-white rather than white-on-nothing. */
@media print {
	.site-header,
	.site-footer,
	.page-hero,
	.breadcrumbs,
	.roi .section-heading,
	.roi-results__foot,
	.roi-method {
		display: none !important;
	}

	.roi {
		padding: 0;
	}

	.roi__layout {
		grid-template-columns: 1fr;
	}

	.roi-results {
		position: static;
		break-before: page;
	}

	.roi,
	.roi * {
		color: #000 !important;
		background: transparent !important;
		border-color: #999 !important;
		box-shadow: none !important;
	}

	.roi-bars__track {
		background: #e5e5e5 !important;
	}

	.roi-bars__fill {
		background: #777 !important;
	}

	.roi-bars li.is-sign .roi-bars__fill {
		background: #000 !important;
	}
}

.roi-print {
	padding: 0 0 4px;
	border: 0;
	border-bottom: 1px solid var(--color-line);
	background: none;
	color: var(--color-white);
	font: 600 var(--text-xs) var(--font-body-caps);
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}

.roi-print:hover {
	border-color: var(--color-orange);
}

.roi-input > span {
	white-space: nowrap;
}

.roi-grid--spaced {
	margin-top: 18px;
}

.roi-stats--flush {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
}

.roi-note sup a,
.roi-hint sup a {
	color: var(--color-orange-soft);
	text-decoration: none;
}

@media (max-width: 680px) {
	.roi-stats--flush {
		grid-template-columns: 1fr;
	}
}

/* Below the two-column breakpoint the results follow the long form. */
.roi-jump {
	display: none;
}

@media (max-width: 1180px) {
	.roi-jump {
		display: inline-flex;
		align-items: center;
		justify-self: start;
		min-height: 44px;
		gap: 8px;
		color: var(--color-orange-soft);
		font: 600 var(--text-sm) var(--font-body-caps);
		letter-spacing: .08em;
		text-transform: uppercase;
	}
}

/* ---------------------------------------------------------------- phones
 * One heading scale, a 11px floor for labels, and no layouts that need more
 * width than a phone has: the scenario table becomes stacked cards and the
 * media bars put the label above the bar.
 */
.roi-nowrap {
	white-space: nowrap;
}

@media (max-width: 680px) {
	.roi {
		padding-block: 40px 56px;
	}

	.roi h2,
	.roi-method h2 {
		font-size: clamp(2rem, 9.4vw, 2.4rem);
		line-height: .95;
	}

	.roi .section-heading {
		margin-bottom: 28px;
	}

	.roi .section-heading > p {
		color: var(--color-text-subtle);
		font-size: var(--text-md);
		line-height: 1.6;
	}

	.roi-step {
		padding: 20px 16px;
	}

	.roi-step legend {
		margin-bottom: 18px;
		font-size: 1.2rem;
	}

	.roi-choice label {
		padding: 12px 12px 12px 40px;
	}

	.roi-results__head,
	.roi-results__foot {
		padding-inline: 16px;
	}

	.roi-hero-stat,
	.roi-stats,
	.roi-block,
	.roi-empty {
		margin-inline: 16px;
	}

	.roi-hero-stat {
		padding: 16px;
	}

	.roi-hero-stat strong {
		font-size: 2.3rem;
	}

	.roi-stats dt {
		font-size: 11px;
	}

	.roi-stats dd {
		font-size: 1.25rem;
	}

	.roi-block h3 {
		font-size: 12px;
	}

	.roi-note {
		font-size: 12.5px;
		line-height: 1.6;
	}

	/* Bars: name and value on one line, the bar full width beneath. */
	.roi-bars {
		gap: 12px;
	}

	.roi-bars li {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name value"
			"track track";
		gap: 4px 10px;
	}

	.roi-bars__name { grid-area: name; }
	.roi-bars__value { grid-area: value; }
	.roi-bars__track { grid-area: track; }

	/* Scenario table: one card per scenario, labels from data-label. */
	.roi-scenarios thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.roi-scenarios,
	.roi-scenarios tbody,
	.roi-scenarios tr,
	.roi-scenarios th,
	.roi-scenarios td {
		display: block;
		width: 100%;
	}

	.roi-scenarios tr {
		padding: 12px 0;
		border-bottom: 1px solid var(--roi-line);
	}

	.roi-scenarios tbody th,
	.roi-scenarios td {
		padding: 0;
		border: 0;
		text-align: left;
	}

	.roi-scenarios tbody th {
		margin-bottom: 6px;
		font-size: var(--text-md);
	}

	.roi-scenarios td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding-block: 2px;
	}

	.roi-scenarios td::before {
		content: attr(data-label);
		color: var(--color-text-subtle);
	}

	.roi-method {
		padding-block: 48px;
	}

	.roi-method__grid h3 {
		line-height: 1.2;
	}

	.roi-sources__head h3 {
		font-size: 1.8rem;
	}

	.roi-disclaimer {
		padding: 14px;
	}
}