/*!
 * RoofingWala - article stylesheet
 *
 * The entry header and the prose inside a post or page. Loaded on singular
 * views only. Everything here serves one goal: making a long guide comfortable
 * to read to the end.
 */

/*
 * The article view ends on the newsletter, a tinted panel that runs to the
 * container edges and is meant to meet the footer the way it does on the
 * homepage, so it owns the bottom of the page and nothing is padded after it.
 * A static page ends on running text and still needs the breathing room.
 */
.rw-single {
	padding-bottom: 0;
}

.rw-page {
	padding-bottom: var(--rw-space-3xl);
}

/* ==========================================================================
   1. Entry header
   ========================================================================== */

.rw-entry__header {
	max-width: var(--rw-wide);
	margin-block: var(--rw-space-xl) var(--rw-space-xl);
}

.rw-entry__term {
	display: inline-block;
	font-family: var(--rw-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--rw-tracking-label);
	color: var(--rw-accent);
	text-decoration: none;
	margin-bottom: var(--rw-space-sm);
}

.rw-entry__term:hover {
	text-decoration: underline;
}

.rw-entry__title {
	font-size: var(--rw-size-display);
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin: 0;
}

.rw-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rw-space-sm);
	margin-top: var(--rw-space-md);
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	color: var(--rw-muted);
}

.rw-entry__meta a {
	color: var(--rw-ink);
	font-weight: 600;
	text-decoration: none;
}

.rw-entry__meta a:hover {
	color: var(--rw-accent);
}

.rw-entry__updated {
	color: var(--rw-accent);
	font-weight: 600;
}

.rw-entry__media {
	margin: var(--rw-space-xl) 0 0;
}

.rw-entry__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--rw-radius);
}

/* ==========================================================================
   2. Content measure
   ========================================================================== */

/*
 * A three column grid gives running text a fixed reading measure while letting
 * wide and full width blocks break out, without wrapper divs in the markup.
 */
.rw-entry__content {
	display: grid;
	grid-template-columns:
		1fr
		min(var(--rw-measure), 100%)
		1fr;
}

.rw-entry__content > * {
	grid-column: 2;
}

.rw-entry__content > .alignwide {
	grid-column: 1 / -1;
	width: 100%;
	max-width: var(--rw-wide);
	margin-inline: auto;
}

.rw-entry__content > .alignfull {
	grid-column: 1 / -1;
	width: 100%;
	max-width: none;
}

.rw-entry__content > * + * {
	margin-top: var(--rw-space-md);
}

/* ==========================================================================
   3. Prose
   ========================================================================== */

.rw-entry__content p {
	margin-bottom: 0;
}

.rw-entry__content h2 {
	font-size: var(--rw-size-h2);
	margin-top: var(--rw-space-2xl);
}

/*
 * The one decorative element on the site: a short accent rule under section
 * headings, borrowed from the chalk line a roofer snaps to keep courses
 * straight. It appears here and nowhere else.
 */
.rw-entry__content h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: var(--rw-space-sm);
	background-color: var(--rw-accent);
}

.rw-entry__content h3 {
	font-size: var(--rw-size-h3);
	margin-top: var(--rw-space-xl);
}

.rw-entry__content h4 {
	font-size: 1.0625rem;
	margin-top: var(--rw-space-lg);
}

.rw-entry__content a {
	color: var(--rw-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.rw-entry__content a:hover {
	color: var(--rw-accent-hover);
	text-decoration-thickness: 2px;
}

.rw-entry__content ul,
.rw-entry__content ol {
	padding-left: 1.35em;
}

.rw-entry__content li + li {
	margin-top: var(--rw-space-2xs);
}

.rw-entry__content li::marker {
	color: var(--rw-accent);
}

.rw-entry__content blockquote {
	margin-inline: 0;
	padding-left: var(--rw-space-md);
	border-left: 3px solid var(--rw-accent);
	font-style: italic;
	font-size: 1.1em;
	line-height: 1.55;
	color: var(--rw-ink);
}

.rw-entry__content blockquote p {
	margin-bottom: 0;
}

.rw-entry__content figure {
	margin: 0;
}

.rw-entry__content img {
	border-radius: var(--rw-radius);
}

.rw-entry__content figcaption,
.rw-entry__content .wp-element-caption {
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	line-height: 1.5;
	color: var(--rw-muted);
	margin-top: var(--rw-space-2xs);
}

.rw-entry__content hr {
	border: 0;
	border-top: 1px solid var(--rw-line);
	margin-block: var(--rw-space-2xl);
}

/* Data tables. Cost breakdowns and material comparisons read better set in the
   heading face, which has proper tabular figures. */
.rw-entry__content .wp-block-table,
.rw-entry__content figure.wp-block-table {
	overflow-x: auto;
}

.rw-entry__content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-small);
	font-variant-numeric: tabular-nums;
}

.rw-entry__content th {
	text-align: left;
	font-size: var(--rw-size-meta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rw-muted);
	border-bottom: 2px solid var(--rw-line-strong);
	padding: 0.7rem 0.75rem;
}

.rw-entry__content td {
	border-bottom: 1px solid var(--rw-line);
	padding: 0.7rem 0.75rem;
}

.rw-entry__content code {
	font-family: var(--rw-font-mono);
	font-size: 0.9em;
	background-color: var(--rw-surface);
	padding: 0.1em 0.35em;
	border-radius: 3px;
}

.rw-entry__content pre {
	font-family: var(--rw-font-mono);
	font-size: 0.9em;
	background-color: var(--rw-surface);
	padding: var(--rw-space-md);
	border-radius: var(--rw-radius);
	overflow-x: auto;
}

.rw-entry__pages {
	margin-top: var(--rw-space-xl);
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-small);
	font-weight: 600;
}

/* ==========================================================================
   3b. In-article components
   ========================================================================== */

/*
 * Callout. A tinted panel with a 3px accent left edge, the same construction as
 * the author box, which the design nominates as the one place a panel is used.
 * It carries the things a reader must not miss inside a long guide: a safety
 * instruction, a counterintuitive point, a list of things never to do. There is
 * deliberately only one variant. Adding a red or amber version would introduce a
 * second accent, which this design does not permit, so emphasis is carried by
 * the label instead of by hue.
 */
.rw-entry__content .rw-callout {
	background-color: var(--rw-surface);
	border-left: 3px solid var(--rw-accent);
	border-radius: var(--rw-radius);
	padding: var(--rw-space-md);
	margin-top: var(--rw-space-lg);
}

.rw-entry__content .rw-callout > * {
	margin-top: 0;
}

.rw-entry__content .rw-callout > * + * {
	margin-top: var(--rw-space-sm);
}

.rw-entry__content .rw-callout__label {
	display: block;
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-meta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--rw-tracking-label);
	color: var(--rw-accent);
}

.rw-entry__content .rw-callout ul,
.rw-entry__content .rw-callout ol {
	margin-bottom: 0;
}

/*
 * Safety variant. The same panel in the one semantic colour, used only for
 * physical risk: working at height, ice, live cables, and the never-do-this
 * lists. On this site those instructions are the difference between a repair
 * bill and an injury, so they are allowed to look different from an aside.
 * List markers are overridden too, since the accent green inside a red panel
 * reads as an error rather than a detail.
 */
.rw-entry__content .rw-callout--safety {
	background-color: var(--rw-danger-soft);
	border-left-color: var(--rw-danger);
}

.rw-entry__content .rw-callout--safety .rw-callout__label {
	color: var(--rw-danger);
}

.rw-entry__content .rw-callout--safety li::marker {
	color: var(--rw-danger);
}

/*
 * Questions. Set as ordinary h3s so the article keeps one heading hierarchy for
 * assistive technology and for the table of contents, with a hairline between
 * pairs to stop a long run of short answers reading as a wall.
 */
.rw-entry__content .rw-faq__item + .rw-faq__item {
	margin-top: var(--rw-space-md);
	padding-top: var(--rw-space-md);
	border-top: 1px solid var(--rw-line);
}

.rw-entry__content .rw-faq__item h3 {
	margin-top: 0;
	font-size: var(--rw-size-h3);
}

.rw-entry__content .rw-faq__item p {
	margin-top: var(--rw-space-2xs);
}

/* A table inside an article scrolls on its own rather than pushing the page. */
.rw-entry__content .rw-table {
	overflow-x: auto;
	margin-top: var(--rw-space-lg);
}

.rw-entry__content .rw-table table {
	min-width: 34rem;
}

.rw-entry__content .rw-table th:first-child,
.rw-entry__content .rw-table td:first-child {
	padding-left: 0;
}

/* ==========================================================================
   4. Article footer areas
   ========================================================================== */

/* Author box on a post sits after the content, separated by a rule. */
.rw-entry + .rw-author-box,
.rw-entry__content + .rw-author-box {
	margin-top: var(--rw-space-2xl);
}

@media (max-width: 39.99em) {
	.rw-entry__header {
		margin-block: var(--rw-space-lg);
	}

	.rw-entry__content blockquote {
		padding-left: var(--rw-space-sm);
	}
}
/* ==========================================================================
   5. Article column
   ========================================================================== */

/*
 * Everything in the article view shares one centred column. Without this the
 * entry header sat flush left at 62rem while the running text was centred at
 * its own measure inside the 1200px container, so the headline and the first
 * paragraph started at visibly different places.
 */
.rw-single > *,
.rw-page > * {
	max-width: var(--rw-wide);
	margin-inline: auto;
}

/*
 * The article element needs naming explicitly. Something in the inherited
 * stylesheet resets max-width on it, so the child combinator alone lost and the
 * headline ran to the full container while everything around it sat at 62rem.
 * A class-level selector is enough; no !important required.
 */
.rw-single > .rw-entry,
.rw-page > .rw-entry {
	max-width: var(--rw-wide);
	margin-inline: auto;
}

.rw-entry__dek {
	margin: var(--rw-space-md) 0 0;
	max-width: 60ch;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--rw-muted);
}

/* ==========================================================================
   6. After the article
   ========================================================================== */

.rw-author-box--entry {
	margin-top: var(--rw-space-2xl);
}

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

/*
 * The newsletter closes the article view against the footer, and is the one
 * block here exempt from the 62rem reading column: it takes the full container
 * width it has on the homepage, so the same component reads the same way in
 * both places. The 2xl lead-in matches the homepage section rhythm.
 */
.rw-single > .rw-newsletter {
	max-width: none;
	margin-top: var(--rw-space-2xl);
}