/*!
 * RoofingWala - "Spec Sheet" redesign layer
 *
 * Loaded after every other child-theme stylesheet (see inc/enqueue.php), so it
 * restyles by overriding tokens and component rules rather than by rewriting the
 * older files. Removing this one file restores the previous look.
 *
 * Direction: tool-first. Warm paper ground, deep navy ink, one orange for
 * actions, a monospace face for measurements and labels.
 *
 * Contrast notes: --rw-accent (#B8430A) is the text-safe orange and carries
 * links and button fills (5.4:1 against white). --rw-orange (#E8590C) is for
 * large decoration and for use on the navy, never for small text on a light
 * ground.
 */

/* ==========================================================================
   1. Spec-sheet type
   ========================================================================== */

/* Tokens, header and footer live in main.css; this file holds the page-level
   components that are specific to the redesign. */
.rw-tools__kicker,
.rw-section-heading__link,
.rw-card__date,
.rw-topics__count {
	font-family: var(--rw-font-mono);
}

/* ==========================================================================
   3. Homepage hero
   ========================================================================== */

.rw-tools--hero .rw-tools__panel {
	position: relative;
	overflow: hidden;
	background-color: var(--rw-paper);
	background-image:
		linear-gradient(var(--rw-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--rw-line) 1px, transparent 1px);
	background-size: 100% 32px, 32px 100%;
	border-bottom: 1px solid var(--rw-line);
	padding-block: var(--rw-space-xl) var(--rw-space-2xl);
}

.rw-tools--hero .rw-tools__intro {
	position: relative;
	max-width: none;
	text-align: left;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rw-space-xl);
	align-items: center;
	min-height: 0;
	margin-bottom: var(--rw-space-xl);
}

@media (min-width: 62.5em) {
	.rw-tools--hero .rw-tools__intro {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: 3.5rem;
		min-height: 0;
	}
}

.rw-tools--hero .rw-tools__intro-text {
	position: relative;
	z-index: 1;
	max-width: 40rem;
}

.rw-tools__kicker {
	margin: 0 0 var(--rw-space-sm);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rw-accent);
}

.rw-tools--hero .rw-tools__title {
	font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.75rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--rw-ink);
}

.rw-tools--hero .rw-tools__lede {
	max-width: 34rem;
	margin-inline: 0;
	margin-top: var(--rw-space-sm);
	font-size: 1.125rem;
	color: var(--rw-body);
}

.rw-tools__cta-wrap {
	margin: var(--rw-space-md) 0 0;
}

.rw-tools__cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--rw-font-heading);
	font-weight: 700;
	text-decoration: none;
	min-height: 52px;
	padding-inline: var(--rw-space-lg);
	color: #FFFFFF;
	background-color: var(--rw-accent);
	border-radius: var(--rw-radius);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.rw-tools__cta:hover,
.rw-tools__cta:focus-visible {
	color: #FFFFFF;
	background-color: var(--rw-accent-hover);
	transform: translateY(-1px);
}

.rw-tools--hero :focus-visible {
	outline-color: var(--rw-accent);
}

/* ---- Popular calculators and group shortcuts ---- */

.rw-tools--hero .rw-calc-index.rw-calc-index .rw-calc-index__item {
	border: 1px solid var(--rw-line);
	border-top: 3px solid var(--rw-ink);
	border-radius: var(--rw-radius);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rw-tools--hero .rw-calc-index.rw-calc-index .rw-calc-index__item:nth-child(3n + 2) {
	border-top-color: var(--rw-teal);
}

.rw-tools--hero .rw-calc-index.rw-calc-index .rw-calc-index__item:nth-child(3n) {
	border-top-color: var(--rw-orange);
}

.rw-tools--hero .rw-calc-index.rw-calc-index .rw-calc-index__item:hover {
	border-color: var(--rw-line);
	border-top-color: var(--rw-accent);
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -22px rgba(15, 27, 45, 0.45);
}

.rw-tools--hero .rw-calc-chips .rw-calc-chips__link {
	color: var(--rw-ink);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line-strong);
	border-radius: var(--rw-radius);
	font-weight: 600;
}

.rw-tools--hero .rw-calc-chips .rw-calc-chips__link:hover,
.rw-tools--hero .rw-calc-chips .rw-calc-chips__link:focus-visible {
	color: #FFFFFF;
	background-color: var(--rw-ink);
	border-color: var(--rw-ink);
}

.rw-tools--hero .rw-calc-chips__count {
	font-family: var(--rw-font-mono);
	color: var(--rw-muted);
}

.rw-tools--hero .rw-calc-chips .rw-calc-chips__link:hover .rw-calc-chips__count,
.rw-tools--hero .rw-calc-chips .rw-calc-chips__link:focus-visible .rw-calc-chips__count {
	color: var(--rw-on-dark);
}

/* ==========================================================================
   4. Quick calculator (homepage hero)
   ========================================================================== */

.rw-qc {
	background-color: var(--rw-ink);
	color: #FFFFFF;
	border: 1px solid var(--rw-navy-line);
	border-radius: var(--rw-radius);
	overflow: hidden;
	box-shadow: 0 24px 50px -20px rgba(15, 27, 45, 0.55);
}

.rw-qc__tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background-color: #0A1424;
	border-bottom: 1px solid var(--rw-navy-line);
}

.rw-qc .rw-qc__tabs button {
	margin: 0 0 -1px;
	padding: 16px 8px;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	color: #8CA0BC;
	font-family: var(--rw-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
}

.rw-qc .rw-qc__tabs button:hover {
	color: #FFFFFF;
	background: none;
}

.rw-qc .rw-qc__tabs button[aria-selected="true"] {
	color: #FFFFFF;
	background-color: var(--rw-ink);
	border-bottom-color: var(--rw-orange);
}

.rw-qc :focus-visible {
	outline-color: var(--rw-orange);
}

.rw-qc__body {
	padding: 20px 22px 22px;
}

.rw-qc__viz {
	position: relative;
	margin-bottom: 18px;
	padding: 6px 10px 0;
	background-color: #0A1424;
	border: 1px solid var(--rw-navy-line);
	border-radius: var(--rw-radius);
}

.rw-qc__svg {
	display: block;
	width: 100%;
	height: auto;
}

.rw-qc__house {
	fill: var(--rw-navy-2);
	stroke: #31445F;
	stroke-width: 2;
}

.rw-qc__roof {
	fill: rgba(232, 89, 12, 0.14);
	stroke: var(--rw-orange);
	stroke-width: 4;
	stroke-linejoin: round;
}

.rw-qc__guide {
	fill: none;
	stroke: #6F85A5;
	stroke-width: 1.5;
	stroke-dasharray: 5 5;
}

.rw-qc__angle {
	fill: none;
	stroke: #FFB48A;
	stroke-width: 2;
}

.rw-qc__label,
.rw-qc__run {
	font: 600 12px var(--rw-font-mono);
	fill: #9FB0C8;
}

.rw-qc__label {
	fill: #FFB48A;
	font-weight: 700;
}

.rw-qc__live {
	position: absolute;
	top: 10px;
	left: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	font: 600 11px var(--rw-font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8CA0BC;
}

.rw-qc__live i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #3DDC84;
	box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.2);
}

.rw-qc__pane {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 14px;
}

.rw-qc__pane[hidden] {
	display: none;
}

.rw-qc__field {
	min-width: 0;
}

.rw-qc__field--wide,
.rw-qc__hint {
	grid-column: 1 / -1;
}

.rw-qc__field label {
	display: flex;
	justify-content: space-between;
	margin: 0 0 8px;
	font: 600 11px/1 var(--rw-font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9FB0C8;
}

.rw-qc__field label b {
	font-size: 13px;
	letter-spacing: 0;
	color: #FFB48A;
}

.rw-qc__step {
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--rw-navy-2);
	border: 1px solid #31445F;
	border-radius: var(--rw-radius);
}

.rw-qc__step:focus-within {
	border-color: var(--rw-orange);
	box-shadow: 0 0 0 2px rgba(232, 89, 12, 0.35);
}

.rw-qc .rw-qc__step button {
	flex: none;
	align-self: stretch;
	width: 40px;
	min-height: 44px;
	padding: 0;
	background-color: #1C3350;
	border: 0;
	border-radius: 0;
	color: #FFFFFF;
	font: 600 20px/1 var(--rw-font-mono);
	cursor: pointer;
}

.rw-qc .rw-qc__step button:hover {
	background-color: var(--rw-accent);
}

.rw-qc .rw-qc__step input {
	flex: 1;
	width: 100%;
	min-width: 0;
	padding: 11px 4px;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #FFFFFF;
	font: 700 18px var(--rw-font-mono);
	text-align: right;
	outline: none;
	-moz-appearance: textfield;
}

.rw-qc .rw-qc__step input::-webkit-outer-spin-button,
.rw-qc .rw-qc__step input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.rw-qc__unit {
	padding: 0 8px 0 4px;
	font: 500 12px var(--rw-font-mono);
	color: #8CA0BC;
}

.rw-qc__range {
	width: 100%;
	height: 28px;
	margin: 0;
	accent-color: var(--rw-orange);
}

.rw-qc__ticks {
	display: flex;
	justify-content: space-between;
	margin-top: -2px;
	padding: 0 6px;
	font: 500 11px var(--rw-font-mono);
	color: #6F85A5;
}

.rw-qc__hint {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #8CA0BC;
}

.rw-qc__out {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	margin-top: 18px;
	overflow: hidden;
	background-color: #0A1424;
	border: 1px solid var(--rw-navy-line);
	border-radius: var(--rw-radius);
}

.rw-qc__main {
	padding: 16px 18px;
	border-right: 1px solid var(--rw-navy-line);
}

.rw-qc__main small,
.rw-qc__side small {
	display: block;
	margin-bottom: 6px;
	font: 600 11px var(--rw-font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8CA0BC;
}

.rw-qc__main strong {
	font: 800 44px/1 var(--rw-font-mono);
	letter-spacing: -0.05em;
	color: #FFB48A;
}

.rw-qc__main span {
	margin-left: 6px;
	font: 500 14px var(--rw-font-mono);
	color: #8CA0BC;
}

.rw-qc__side {
	display: grid;
}

.rw-qc__side > div {
	padding: 12px 16px;
}

.rw-qc__side > div + div {
	border-top: 1px solid var(--rw-navy-line);
}

.rw-qc__side b {
	font: 700 20px var(--rw-font-mono);
	color: #FFFFFF;
}

.rw-qc__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	padding: 15px;
	background-color: var(--rw-accent);
	border-radius: var(--rw-radius);
	color: #FFFFFF;
	font-family: var(--rw-font-heading);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.rw-qc__cta:hover,
.rw-qc__cta:focus-visible {
	background-color: var(--rw-accent-hover);
	color: #FFFFFF;
}

@media (max-width: 26em) {
	.rw-qc__body {
		padding: 16px;
	}

	.rw-qc__out {
		grid-template-columns: 1fr;
	}

	.rw-qc__main {
		border-right: 0;
		border-bottom: 1px solid var(--rw-navy-line);
	}

	.rw-qc__main strong {
		font-size: 34px;
	}
}

/* ==========================================================================
   5. Section headings and cards
   ========================================================================== */

.rw-section-heading {
	border-bottom: 0;
	padding-bottom: 0;
}

.rw-section-heading__title {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 800;
}

.rw-section-heading__link {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (min-width: 40em) {
	.rw-card {
		gap: 0;
		background-color: var(--rw-bg);
		border: 1px solid var(--rw-line);
		border-radius: var(--rw-radius);
		overflow: hidden;
		transition: transform 0.18s ease, box-shadow 0.18s ease;
	}

	.rw-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 14px 30px -16px rgba(15, 27, 45, 0.35);
	}

	/* The image runs edge to edge inside the box; the text gets its own padding. */
	.rw-card__media {
		border-radius: 0;
	}

	.rw-card__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 10px;
		padding: 20px 22px 22px;
	}

	.rw-card--featured .rw-card__body {
		padding: var(--rw-space-lg);
	}
}

.rw-card__term {
	font-family: var(--rw-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

/* ==========================================================================
   6. Plans (journeys): a navy panel
   ========================================================================== */

.rw-journeys {
	margin-block: var(--rw-space-2xl);
	padding: var(--rw-space-xl) var(--rw-space-lg);
	background-color: var(--rw-ink);
	border-radius: var(--rw-radius);
	color: #FFFFFF;
}

.rw-journeys.rw-home__section {
	padding-top: var(--rw-space-xl);
}

.rw-journeys .rw-section-heading__title {
	color: #FFFFFF;
}

.rw-journeys .rw-journey.rw-journey {
	background-color: #13233A;
	border: 1px solid #2C3F5B;
	border-radius: var(--rw-radius);
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.rw-journeys .rw-journey.rw-journey:hover {
	border-color: var(--rw-orange);
	transform: translateY(-3px);
}

.rw-journeys .rw-journey .rw-journey__title {
	color: #FFFFFF;
}

.rw-journeys .rw-journey .rw-journey__lede {
	color: #A9B6C9;
}

.rw-journeys .rw-journey .rw-journey__link {
	color: #DCE4EF;
}

.rw-journeys .rw-journey .rw-journey__link:hover {
	color: #FFB48A;
}

.rw-journeys .rw-journey .rw-journey__step {
	align-items: center;
	gap: var(--rw-space-sm);
	padding-block: 10px;
	border-top-color: #2C3F5B;
}

.rw-journeys .rw-journey .rw-journey__step::before {
	display: grid;
	flex: 0 0 28px;
	place-items: center;
	width: 28px;
	height: 28px;
	background-color: var(--rw-ink);
	border: 2px solid var(--rw-orange);
	border-radius: 50%;
	color: #FFB48A;
	font-family: var(--rw-font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 40em) {
	.rw-journeys {
		padding: var(--rw-space-lg) var(--rw-space-md);
		border-radius: var(--rw-radius);
	}
}

/* ==========================================================================
   7. Promise and topics
   ========================================================================== */

.rw-promise__item {
	border-radius: var(--rw-radius);
	text-align: left;
}

.rw-promise__icon {
	background-color: var(--rw-accent-soft);
	color: var(--rw-accent);
	border-radius: var(--rw-radius);
}

.rw-promise__eyebrow {
	font-family: var(--rw-font-mono);
}

.rw-topics__pill {
	border-radius: var(--rw-radius);
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.rw-topics__pill:hover {
	transform: translateX(3px);
	border-color: var(--rw-ink);
}

/* ==========================================================================
   9. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.rw-card:hover,
	.rw-journey:hover,
	.rw-topics__pill:hover,
	.rw-tools__cta:hover,
	.rw-tools--hero .rw-calc-index.rw-calc-index .rw-calc-index__item:hover {
		transform: none;
	}
}

/* ==========================================================================
   10. Archive headers and topic pills (formerly in listing.css section 13)
   ========================================================================== */

.rw-archive-header {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	background-color: var(--rw-ink);
}

.rw-archive-header__title {
	color: #FFFFFF;
	font-weight: 800;
}

.rw-archive-header__count {
	color: #FFB48A;
	font-family: var(--rw-font-mono);
}

.rw-archive-header__description {
	color: var(--rw-on-dark);
}

.rw-archive-header :focus-visible {
	outline-color: var(--rw-orange);
}

.rw-topics__name {
	font-weight: 700;
}

/* ==========================================================================
   11. Single post: contents list and spacing
   ========================================================================== */

.rw-single {
	display: flow-root;
}

.rw-related {
	margin-bottom: var(--rw-space-3xl);
}

.rw-entry__content h2 {
	scroll-margin-top: 110px;
}

.rw-toc {
	margin: 0 0 var(--rw-space-lg);
}

.rw-toc__box {
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius);
}

.rw-toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	font-family: var(--rw-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rw-ink);
	list-style: none;
	cursor: pointer;
}

.rw-toc__title::-webkit-details-marker {
	display: none;
}

.rw-toc__title::after {
	content: "+";
	font-size: 1.125rem;
	line-height: 1;
	color: var(--rw-accent);
}

.rw-toc__box[open] > .rw-toc__title::after {
	content: "\2013";
}

.rw-toc__list {
	margin: 0;
	padding: 0 18px 16px;
	list-style: none;
}

.rw-toc__item {
	margin: 0;
}

.rw-toc__link {
	display: block;
	padding: 7px 0 7px 12px;
	border-left: 2px solid var(--rw-line);
	font-family: var(--rw-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rw-body);
	text-decoration: none;
}

.rw-toc__link:hover,
.rw-toc__link:focus-visible {
	color: var(--rw-accent);
	border-left-color: var(--rw-accent);
}

.rw-toc__link[aria-current] {
	color: var(--rw-ink);
	background-color: var(--rw-accent-soft);
	border-left-color: var(--rw-orange);
}

@media (min-width: 62.5em) {
	.rw-entry--toc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		column-gap: 3.5rem;
		align-items: start;
	}

	.rw-entry--toc > .rw-entry__header,
	.rw-entry--toc > .rw-entry__content {
		grid-column: 1;
	}

	/* One element spanning the header and the text, so it can stay in view
	   for the whole article. Its top margin matches the header's, so it lines
	   up with the headline. */
	.rw-entry--toc > .rw-toc {
		position: sticky;
		top: 110px;
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
		max-height: calc(100vh - 140px);
		margin: var(--rw-space-xl) 0 0;
		overflow-y: auto;
	}
}