/**
 * The calculator's styles.
 *
 * Specification section 1.2 permits the palette to vary and forbids everything
 * else varying. This file reflects that split literally: a token block first,
 * holding every colour, radius and spacing step, then structural rules that
 * reference only tokens.
 *
 * Re-skinning is editing the token block, or overriding those custom properties
 * from a theme. A designer never needs to read past line 60, and no structural
 * rule should ever contain a literal colour.
 *
 * Reference values are specification section 10.4.
 */

/* ------------------------------------------------------------------ *
 * Tokens. This block, and only this block, may be re-skinned.
 * ------------------------------------------------------------------ */

.rol-calc {
	--rol-forest: #064b29;
	--rol-green: #176b38;
	--rol-leaf: #78b82a;
	--rol-lime: #d7f27b;
	--rol-lime-soft: #e4f2b1;

	--rol-paper: #ffffff;
	--rol-cream: #f6f5ef;
	--rol-pale: #edf4ee;
	--rol-ink: #17251c;
	--rol-ink-soft: #405146;
	--rol-line: #d7dfd8;
	--rol-field-line: #bcc8bf;

	--rol-danger: #9c2d2d;
	--rol-danger-bg: #fff1f1;
	--rol-danger-ink: #782020;

	--rol-invert-bg: var(--rol-forest);
	--rol-invert-ink: #ffffff;
	--rol-invert-ink-soft: #d9e8dd;
	--rol-invert-line: rgba(255, 255, 255, 0.18);
	--rol-invert-accent: var(--rol-lime);

	--rol-radius-panel: 8px;
	--rol-radius-field: 6px;
	--rol-radius-pill: 999px;

	--rol-gap: 20px;
	--rol-field-gap: 13px;
	--rol-panel-pad-y: 22px;
	--rol-panel-pad-x: 24px;
	--rol-accent-bar: 6px;
	--rol-control-height: 52px;
	--rol-service-height: 66px;

	--rol-focus: 3px solid rgba(120, 184, 42, 0.55);
	--rol-focus-offset: 2px;

	/* The component's typeface. This was `inherit`, which sounds neutral and is
	   not: it adopts whatever the host sets on the container the shortcode lands
	   in, and WordPress themes routinely set a serif face on `.entry-content`
	   body copy. Twenty Twenty does exactly that, which put the whole calculator
	   — fields, buttons, labels — in Hoefler Text on the live site while the
	   approved design is sans throughout. An explicit stack keeps the component
	   looking like the design it was signed off as. This token block is
	   deliberately single-specificity, so a theme that wants its own face can
	   still override the token rather than fight the component. */
	--rol-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rol-price-size: 44px;
	--rol-row-size: 13px;
}

/* ------------------------------------------------------------------ *
* Structure. No literal colours below this line.
 * ------------------------------------------------------------------ */

/* Host themes style bare elements. Twenty Twenty puts 60px above every h3 via
   `.entry-content h3`, which outranks a single-class rule, so a theme's
   typography was pulling this component apart. Every selector below is
   therefore doubled (`.rol-calc.rol-calc`) so the component's own layout wins
   without resorting to !important. This reset clears what a theme may have
   added; the rules after it set what we intend. */

.rol-calc.rol-calc :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, figure, blockquote) {
	margin: 0;
	padding: 0;
	max-width: none;
	text-align: left;
}

/* Containers too. Twenty Twenty puts `padding: 80px 0` on every <section>, which
   this component uses for its two panels — so the panels arrived 80px hollow.
   Every padding and margin the component actually wants is set by a class rule
   below, and those outrank this reset. */

.rol-calc.rol-calc :is(section, article, div, form, fieldset, aside, header, footer) {
	margin: 0;
	padding: 0;
}

.rol-calc.rol-calc fieldset {
	border: 0;
	min-width: 0;
}


.rol-calc.rol-calc {
	padding: 0;
	font-family: var(--rol-font);
	color: var(--rol-ink);
	box-sizing: border-box;
}

.rol-calc.rol-calc *,
.rol-calc.rol-calc *::before,
.rol-calc.rol-calc *::after {
	box-sizing: inherit;
}

.rol-calc.rol-calc .rol-calc__layout {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--rol-gap);
	align-items: start;
}

.rol-calc.rol-calc .rol-calc__benefit,
.rol-calc.rol-calc .rol-calc__panel {
	background: var(--rol-paper);
	border: 1px solid var(--rol-line);
	border-radius: var(--rol-radius-panel);
}

/* The benefit panel precedes the calculator panel in source order as well as
visually — Rule 13.1. Do not reverse this for a mobile mockup. */

.rol-calc.rol-calc .rol-calc__benefit {
	border-top: var(--rol-accent-bar) solid var(--rol-forest);
	overflow: hidden;
}

.rol-calc.rol-calc .rol-calc__benefit-head {
	padding: var(--rol-panel-pad-y) var(--rol-panel-pad-x);
	background: var(--rol-cream);
	border-bottom: 1px solid var(--rol-line);
}

.rol-calc.rol-calc .rol-calc__pill {
	display: inline-block;
	padding: 6px 9px;
	background: var(--rol-forest);
	color: var(--rol-invert-ink);
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 3px;
}

.rol-calc.rol-calc .rol-calc__benefit-title {
	margin: 10px 0 8px;
	color: var(--rol-forest);
	font-size: clamp(23px, 2.6vw, 31px);
	line-height: 1.05;
}

.rol-calc.rol-calc .rol-calc__benefit-summary {
	margin: 0;
	color: var(--rol-ink-soft);
}

.rol-calc.rol-calc .rol-calc__benefit-body {
	padding: var(--rol-panel-pad-y) var(--rol-panel-pad-x);
}

.rol-calc.rol-calc .rol-calc__scope-heading {
	margin: 0 0 14px;
	color: var(--rol-forest);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rol-calc.rol-calc .rol-calc__checks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.rol-calc.rol-calc .rol-calc__checks li {
	position: relative;
	padding-left: 26px;
	font-size: 14px;
	color: var(--rol-ink-soft);
}

.rol-calc.rol-calc .rol-calc__checks li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 6px;
	width: 6px;
	height: 11px;
	border: solid var(--rol-leaf);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.rol-calc.rol-calc .rol-calc__service-note {
	margin: 18px 0 0;
	padding: 13px 14px;
	background: var(--rol-pale);
	border-left: 4px solid var(--rol-leaf);
	font-size: 13px;
}

/* Rule 10.1.2 — an error is conveyed by colour, border AND background together,
never by colour alone,
and the text says what is wrong regardless. */
.rol-calc.rol-calc .rol-calc__service-note.is-error {
	background: var(--rol-danger-bg);
	border-left-color: var(--rol-danger);
	color: var(--rol-danger-ink);
	font-weight: 700;
}

.rol-calc.rol-calc .rol-calc__panel {
	padding: var(--rol-panel-pad-y) var(--rol-panel-pad-x);
	border-top: var(--rol-accent-bar) solid var(--rol-leaf);
}

.rol-calc.rol-calc .rol-calc__services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 16px;
}

.rol-calc.rol-calc .rol-calc__service {
	position: relative;
}

/* The native radio stays in the accessibility tree — Rule 10.2.1. It is moved
out of sight,
never display:none,
so it remains focusable and announced. */
.rol-calc.rol-calc .rol-calc__service input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.rol-calc.rol-calc .rol-calc__service label {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: var(--rol-service-height);
	padding: 8px;
	border: 1px solid var(--rol-field-line);
	border-radius: var(--rol-radius-field);
	background: var(--rol-paper);
	font-size: 12px;
	font-weight: 900;
	color: var(--rol-forest);
	cursor: pointer;
}

/* Checked state changes border WEIGHT as well as tint, so it is distinguishable
without colour — Rule 10.2.1. */
.rol-calc.rol-calc .rol-calc__service input:checked + label {
	background: var(--rol-pale);
	border: 3px solid var(--rol-green);
	padding: 6px;
}

.rol-calc.rol-calc .rol-calc__service input:focus-visible + label {
	outline: var(--rol-focus);
	outline-offset: var(--rol-focus-offset);
}

.rol-calc.rol-calc .rol-calc__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rol-field-gap);
}

.rol-calc.rol-calc .rol-calc__field {
	display: grid;
	gap: 6px;
}

.rol-calc.rol-calc .rol-calc__field--wide {
	grid-column: 1 / -1;
}

.rol-calc.rol-calc .rol-calc__field > span {
	font-size: 13px;
	font-weight: 900;
	color: var(--rol-ink);
}

.rol-calc.rol-calc .rol-calc__field input,
.rol-calc.rol-calc .rol-calc__field select,
.rol-calc.rol-calc .rol-calc__field textarea {
	width: 100%;
	min-height: var(--rol-control-height);
	padding: 11px 12px;
	border: 1px solid var(--rol-field-line);
	border-radius: var(--rol-radius-field);
	background: var(--rol-paper);
	color: var(--rol-ink);
	font: inherit;
	font-weight: 700;
}

.rol-calc.rol-calc .rol-calc__field textarea {
	min-height: 96px;
	font-weight: 400;
}

.rol-calc.rol-calc .rol-calc__field input:focus-visible,
.rol-calc.rol-calc .rol-calc__field select:focus-visible,
.rol-calc.rol-calc .rol-calc__field textarea:focus-visible {
	outline: var(--rol-focus);
	outline-offset: var(--rol-focus-offset);
}

.rol-calc.rol-calc .rol-calc__guidance {
	grid-column: 1 / -1;
	margin: 0;
	padding: 11px 13px;
	background: var(--rol-pale);
	border-left: 4px solid var(--rol-green);
	font-size: 13px;
}

.rol-calc.rol-calc .rol-calc__submit {
	width: 100%;
	min-height: var(--rol-control-height);
	margin-top: 15px;
	border: 0;
	border-radius: var(--rol-radius-pill);
	background: var(--rol-green);
	color: var(--rol-invert-ink);
	font: inherit;
	/* `font` is a shorthand that does not carry text-transform or
	   letter-spacing, so a theme's button rules keep applying through it. Both
	   are stated, and the size pinned, or the submit arrives in caps at 21px. */
	font-family: var(--rol-font);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* Form controls do not inherit font-family from their container in every
   browser, and themes reset them explicitly. Stated here so the controls match
   the panel around them. */
.rol-calc.rol-calc button,
.rol-calc.rol-calc input,
.rol-calc.rol-calc select,
.rol-calc.rol-calc textarea,
.rol-calc.rol-calc label,
.rol-calc.rol-calc .rol-calc__pill {
	font-family: var(--rol-font);
}

.rol-calc.rol-calc .rol-calc__submit:hover {
	background: var(--rol-forest);
}

.rol-calc.rol-calc .rol-calc__submit:focus-visible {
	outline: var(--rol-focus);
	outline-offset: var(--rol-focus-offset);
}

.rol-calc.rol-calc .rol-calc__status {
	min-height: 20px;
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--rol-ink-soft);
}

/* An error is distinguished by colour AND weight, but the text alone always
says what is wrong — Rule 12,
errors are never conveyed by colour alone. */
.rol-calc.rol-calc .rol-calc__status.is-error {
	color: var(--rol-danger-ink);
}

.rol-calc.rol-calc .rol-calc__noscript {
	margin-top: 12px;
	padding: 12px;
	border-left: 4px solid var(--rol-leaf);
	background: var(--rol-pale);
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
* The result panel.
 * ------------------------------------------------------------------ */

/* Rule 10.3.4 — absent from the layout before the first calculation and after
   any error. hidden means display:none: no reserved space,
nothing to see. */
.rol-calc.rol-calc .rol-calc__result[hidden],
.rol-calc.rol-calc .rol-calc__enquiry[hidden],
.rol-calc.rol-calc .rol-calc__button[hidden] {
	display: none !important;
}

/* Rule 10.3.1 — visually inverted relative to the form, so the answer is
unmistakably the answer. The hues may be re-skinned; the inversion may not. */
.rol-calc.rol-calc .rol-calc__result {
	margin-top: 16px;
	padding: 20px;
	background: var(--rol-invert-bg);
	color: var(--rol-invert-ink);
	border-top: var(--rol-accent-bar) solid var(--rol-leaf);
	border-radius: var(--rol-radius-panel);
}

.rol-calc.rol-calc .rol-calc__result:focus {
	outline: var(--rol-focus);
	outline-offset: var(--rol-focus-offset);
}

.rol-calc.rol-calc .rol-calc__eyebrow {
	margin: 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--rol-invert-ink-soft);
}

/* Rule 10.3.2 — the largest type on the panel by a wide margin. */
.rol-calc.rol-calc .rol-calc__price {
	margin: 4px 0 0;
	font-size: var(--rol-price-size);
	font-weight: 900;
	line-height: 1.05;
	color: var(--rol-invert-accent);
}

.rol-calc.rol-calc .rol-calc__subline {
	margin: 4px 0 14px;
	color: var(--rol-invert-ink-soft);
	font-size: 14px;
}

/* Rule 5.5.4 — the best-value disclosure. Sits above the build-up, in the
accent colour, because a substituted quantity is the one thing on this panel the
customer did not ask for and must not miss. */
.rol-calc.rol-calc .rol-calc__best-value {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid var(--rol-invert-accent);
	border-left-width: var(--rol-accent-bar);
	border-radius: var(--rol-radius-field);
	background: rgba(215, 242, 123, 0.1);
}

.rol-calc.rol-calc .rol-calc__best-value-title {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--rol-invert-accent);
}

.rol-calc.rol-calc .rol-calc__best-value-rows {
	margin: 0;
}

.rol-calc.rol-calc .rol-calc__best-value-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 3px 0;
	font-size: var(--rol-row-size);
}

.rol-calc.rol-calc .rol-calc__best-value-row dt {
	margin: 0;
	color: var(--rol-invert-ink-soft);
}

.rol-calc.rol-calc .rol-calc__best-value-row dd {
	margin: 0;
	text-align: right;
	font-weight: 700;
	color: var(--rol-invert-ink);
}

/* Rule 10.3.3 — two columns on desktop, one on small screens, each row a label
left and its value right-aligned,
separated by a hairline. */
.rol-calc.rol-calc .rol-calc__rows {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--rol-gap);
	margin: 0;
}

.rol-calc.rol-calc .rol-calc__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--rol-invert-line);
	font-size: var(--rol-row-size);
}

.rol-calc.rol-calc .rol-calc__row dt {
	margin: 0;
	color: var(--rol-invert-ink-soft);
}

.rol-calc.rol-calc .rol-calc__row dd {
	margin: 0;
	text-align: right;
	font-weight: 700;
	color: var(--rol-lime-soft);
}

.rol-calc.rol-calc .rol-calc__stack-note,
.rol-calc.rol-calc .rol-calc__charge-note {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--rol-invert-ink-soft);
}

.rol-calc.rol-calc .rol-calc__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.rol-calc.rol-calc .rol-calc__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 11px 18px;
	border: 1px solid var(--rol-paper);
	border-radius: var(--rol-radius-pill);
	background: var(--rol-paper);
	color: var(--rol-forest);
	font: inherit;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
}

.rol-calc.rol-calc .rol-calc__button:hover,
.rol-calc.rol-calc .rol-calc__button:focus-visible {
	background: var(--rol-pale);
	color: var(--rol-forest);
}

.rol-calc.rol-calc .rol-calc__button:focus-visible {
	outline: var(--rol-focus);
	outline-offset: var(--rol-focus-offset);
}

.rol-calc.rol-calc .rol-calc__button--ghost {
	background: transparent;
	color: var(--rol-invert-ink);
}

.rol-calc.rol-calc .rol-calc__disclaimer {
	margin: 16px 0 0;
	font-size: 11px;
	color: var(--rol-invert-ink-soft);
}

/* ------------------------------------------------------------------ *
* The enquiry step.
 * ------------------------------------------------------------------ */

.rol-calc.rol-calc .rol-calc__enquiry {
	margin-top: 16px;
	padding: var(--rol-panel-pad-y) var(--rol-panel-pad-x);
	border: 1px solid var(--rol-line);
	border-top: var(--rol-accent-bar) solid var(--rol-green);
	border-radius: var(--rol-radius-panel);
	background: var(--rol-cream);
}

.rol-calc.rol-calc .rol-calc__enquiry-title {
	margin: 0 0 6px;
	color: var(--rol-forest);
	font-size: 20px;
}

.rol-calc.rol-calc .rol-calc__enquiry-intro {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--rol-ink-soft);
}

.rol-calc.rol-calc .rol-calc__enquiry .rol-calc__status {
	color: var(--rol-forest);
}

.rol-calc.rol-calc .rol-calc__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rol-calc.rol-calc--unavailable {
	padding: 20px;
	border: 1px solid var(--rol-line);
	border-left: 4px solid var(--rol-leaf);
	border-radius: var(--rol-radius-panel);
	background: var(--rol-pale);
}

/* ------------------------------------------------------------------ *
* Responsive — specification section 13.
 * ------------------------------------------------------------------ */

@media (max-width: 1020px) {
.rol-calc.rol-calc .rol-calc__layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
.rol-calc.rol-calc .rol-calc__fields,
.rol-calc.rol-calc .rol-calc__rows {
		grid-template-columns: 1fr;
	}

.rol-calc.rol-calc .rol-calc__services {
		grid-template-columns: 1fr;
	}

.rol-calc.rol-calc .rol-calc__price {
		font-size: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
.rol-calc.rol-calc * {
		animation: none !important;
		transition: none !important;
	}
}